Front page

The public page at / introduces Mooflair to visitors. It is the same for every signed-in state; only the buttons change.

Sections

1. Header: a floating pill that gets a blurred background once you scroll. Links jump to Features, How it works and Templates.
2. Hero: the pitch, two buttons and a live mock of the Studio canvas (the same React Flow canvas, node cards, edges, controls and minimap): every morning → write a reply → you approve → post, with the rejected branch to a notification. It loops three runs (success, a failed post, a rejected reply) with a Studio-style status card on top and a live-view card and an approval card floating over it. On a phone the flow is laid out top to bottom.
3. Marquee: the things a flow can do in a browser, scrolling slowly.
4. Features: a bento grid (Studio canvas, real Chrome, AI steps, human approval, live view, campaigns, datasets and insight). Tiles glow under the pointer.
5. How it works: draw, add accounts and AI, run and watch.
6. Templates: the 𝕏/Threads reply, Shopee affiliate and page-check starters.
7. Call to action and footer.

Buttons

• Signed in: Open app (/app).
• Signed out: Sign in, and Get started (sign-up) only when sign-up is enabled in the . With sign-up off, the main buttons lead to sign-in.

Where it lives

• Page: src/app/[locale]/(marketing)/page.tsx, views in src/views/(marketing)/ (ViewMarketing…), texts under app.home in the locale files.
• Motion uses framer-motion; MotionConfig reducedMotion="user" turns movement off for visitors who ask for less motion.
• The indigo and coral brand colors (brand, flair) and the marquee animation are in globals.css.