`. - **State management:** Local React state only. - `src/components/Header.js` manages mobile menu open/closed state. - `src/components/Testimonials.js` simulates async testimonial loading with a `setTimeout`. - **Animations:** - Scroll reveals use `data-reveal` attributes. - `useRevealOnScroll()` in `src/App.js` observes all `[data-reveal]` nodes with `IntersectionObserver`. - Visible nodes receive `.is-visible` once and are then unobserved. - Floating mockup, progress pulse, shimmer skeletons, hero glows, and CTA orbs are defined in `styles/main.css`. - **Backend/API:** None. All product, pricing, trust badge, and testimonial data is hardcoded in component-local arrays. - **Conversion behavior:** CTAs are anchor links to sections, except final trial CTA uses `mailto:hello@flowsync.so?subject=Start%20my%20FlowSync%20trial`. Important gotchas: - Do **not** add raw JSX; there is no JSX compiler or bundler. - Imports must be browser-resolvable and include `.js` extensions for local files. - Import React from `src/jsx.js`, not from package names. - Tailwind utilities depend on `` in `index.html`; there is no `tailwind.config.js`. - HSL design tokens in `styles/main.css` are consumed by Tailwind arbitrary values like `bg-[hsl(var(--primary))]`. - The `.dark` token set exists in CSS but is not toggled anywhere in the app. - `Providers` currently only wraps children in a `

`; add real global providers there only if a future feature needs them. - Testimonial loading is intentionally simulated, not fetched from a service. ## File Structure ```text index.html — HTML shell, SEO description/title, Tailwind CDN, global CSS, module entry. styles/main.css — HSL design tokens, dark token variant, custom shadows/radii, reveal states, glows, skeleton shimmer, motion-reduction rules. src/jsx.js — Imports React and htm from esm.sh; exports `html` and `React`. src/main.js — ReactDOM CDN import; mounts `` into `#root`. src/mainProviders.js — Minimal wrapper for future global providers. src/App.js — Page composition and `useRevealOnScroll()` IntersectionObserver hook. src/components/Header.js — Fixed responsive nav, logo, desktop CTAs, mobile menu state. src/components/Hero.js — Above-fold value prop, CTAs, animated workflow mockup, proof metrics. src/components/TrustBar.js — Four trust/integration badges. src/components/Features.js — Three automation feature cards from local `features` array. src/components/Pricing.js — Three pricing cards from local `plans` array; Studio highlighted. src/components/Testimonials.js — Simulated async customer stories with loading, error, and empty states. src/components/FinalCTA.js — Dark final urgency CTA with mailto trial link. src/components/Footer.js — Copyright and footer anchor links. ``` ## Key Features ### Header Navigation File: `src/components/Header.js` Requirements: - Fixed top nav with translucent white background, border, and `backdrop-blur-xl`. - Brand link uses inline SVG mark and “FlowSync” wordmark. - Desktop nav links: - `#features` - `#pricing` - `#customers` - Desktop CTAs: - “View plans” → `#pricing` - “Start free” → `#signup` - Mobile: - Menu button appears below `md`. - Button text switches between `☰` and `×`. - `aria-expanded` must mirror the `open` state. - Clicking a mobile nav item or signup CTA closes the menu. - No route handling exists; all navigation is same-page anchors. ### Hero Section File: `src/components/Hero.js` Requirements: - Primary above-the-fold conversion section. - Must preserve: - Badge: “Save 9+ hours every week with automated handoffs” - H1: “Turn busywork into workflows that run themselves.” - Primary CTA → `#signup` - Secondary CTA → `#features` - Trust microcopy: no credit card, setup in 12 minutes, cancel anytime. - Right-side animated product mockup: - Uses `automationSteps` array. - Displays three workflow rows with progress bars. - Shows proof metrics: `41%`, `9.4h`, `0`. - Floating shell animation comes from `.animate-float`. - The mockup is presentational; do not wire it to real state unless building an actual product demo. ### Trust Bar File: `src/components/TrustBar.js` Requirements: - Section between hero and features. - Shows four badges from local `badges` array: - Stripe-ready billing - Google Calendar sync - Zapier-friendly triggers - SOC 2 aligned controls - These are trust claims only; there are no actual integrations. ### Features File: `src/components/Features.js` Requirements: - Section id must remain `features` for nav and CTA anchors. - Renders three feature cards from local `features` array: - Smart intake routing - Revenue-ready automations - Time-saving command center - Cards use `.feature-card`, border, shadow, and hover translate motion. - Icons are text symbols, not icon library imports. ### Pricing File: `src/components/Pricing.js` Data model: ```js { name: string, price: string, caption: string, popular: boolean, features: string[] } ``` Requirements: - Section id must remain `pricing`. - Renders three plans: - Solo — `$19` - Studio — `$49`, `popular: true` - Scale — `$99` - The popular plan displays “Most Popular”, blue border, and primary CTA styling. - Each plan CTA links to `#signup`. - Prices are static monthly prices; no billing toggle exists. ### Testimonials File: `src/components/Testimonials.js` Data model: ```js { id: string, name: string, role: string, initials: string, quote: string, metric: string, gradient: string } ``` Requirements: - Section id must remain `customers`. - Uses local `TESTIMONIALS` array for three stories. - Simulates async loading: - Initial `loading: true` - After `420ms`, sets testimonials and `loading: false` - Cleanup clears timer and prevents state updates when unmounted. - Must preserve loading UX: - Three skeleton cards rendered by `SkeletonCard`. - Skeleton shimmer comes from `.skeleton` in `styles/main.css`. - Includes defensive states: - Error message if simulated load throws. - Empty state if loaded testimonial array is empty. - Customer images are represented by gradient initial avatars, not external photo URLs. ### Final CTA File: `src/components/FinalCTA.js` Requirements: - Section id must remain `signup`. - Dark rounded CTA panel with decorative `.cta-orb` elements. - Primary CTA: - Text: “Claim free trial” - Link: `mailto:hello@flowsync.so?subject=Start%20my%20FlowSync%20trial` - Secondary CTA: - Text: “Compare plans” - Link: `#pricing` - Urgency microcopy says trial spots reset Monday and 23 guided setup calls remain. ### Footer File: `src/components/Footer.js` Requirements: - Footer includes static copyright: - `© 2026 FlowSync. Workflow automation for service businesses.` - Links point to: - `#features` - `#pricing` - `#signup` ## Design Guidelines - **Visual style:** Crisp white SaaS landing page with deep navy text, electric blue accents, soft gradients, rounded cards, and subtle motion. - **Color system:** Use CSS variables from `styles/main.css`. - Background: `--background` - Text: `--foreground` - Primary blue: `--primary` - Secondary cyan: `--secondary` - Accent purple: `--accent` - Card/background surfaces: `--card`, `--muted` - Borders: `--border` - **Typography:** System sans stack in `body`; heavy headings use Tailwind `font-black` with tight negative tracking. - **Cards:** Use large radii via `rounded-[var(--radius-lg)]`, light borders, and custom shadows `--shadow-sm/md/lg`. - **Motion:** - Use `data-reveal` for scroll entrance. - Hover cards may translate up slightly and increase shadow. - Respect existing `prefers-reduced-motion` block; new animations must degrade under reduced motion. - **Responsive behavior:** - Mobile-first Tailwind classes. - Header collapses to a menu below `md`. - Hero switches from single column to two columns at `lg`. - Feature/testimonial grids become 3 columns at `md`; pricing becomes 3 columns at `lg`. ## App Flow 1. Visitor lands on `/` and sees fixed header plus hero value proposition. 2. Primary hero CTA scrolls to final signup CTA via `#signup`. 3. Secondary hero CTA scrolls to feature explanation via `#features`. 4. Trust bar reinforces credibility with integration/control badges. 5. Features explain automation use cases. 6. Pricing section lets visitor compare Solo, Studio, and Scale; Studio is visually recommended. 7. Testimonials load after a short simulated delay, showing skeletons first. 8. Final CTA drives email-based trial conversion. 9. Footer provides fallback anchors. Edge cases: - If JavaScript fails, no React content renders because the app is fully client-rendered. - If `IntersectionObserver` is unavailable, `[data-reveal]` elements may remain hidden; add a fallback before supporting older browsers. - If testimonial data becomes empty, the empty state is already implemented. - If testimonial loading fails, an error UI exists but is only reachable if the simulated try block throws. - Mobile menu does not close automatically when resizing to desktop; this is harmless because the mobile menu is hidden at `md`. ## Conventions - Components are named with PascalCase and exported as named functions. - Component files live in `src/components/{ComponentName}.js`. - Shared React/templating imports: - Use `import { html } from '../jsx.js';` for presentational components. - Use `import React, { html } from '../jsx.js';` when hooks/state are needed. - Use local arrays near the component for static content (`features`, `plans`, `badges`, `TESTIMONIALS`). - Keep same-page navigation anchor IDs stable because multiple CTAs depend on them. - Styling should primarily use Tailwind utility classes; add custom CSS to `styles/main.css` only for tokens, reusable animation/effect primitives, or selectors Tailwind cannot express cleanly. - When mapping arrays with `htm`, provide stable `key` values. - To add a new page section: 1. Create `src/components/NewSection.js`. 2. Import it in `src/App.js`. 3. Insert it in the desired order inside `

`. 4. Add an `id` only if it needs anchor navigation. 5. Add `data-reveal` to elements that should animate on scroll. 6. Add nav/footer links only if the section is part of the primary conversion path. - To add an actual external integration or form submission, introduce a backend/API deliberately; the current app has no secure place for secrets and no server-side processing. ## Platform (GenMB) This app is built and hosted on GenMB. **Runtime:** Browser sandbox (iframe) or Cloud Run. No Node.js server — all code runs client-side unless `backend/` exists. **Dependencies:** CDN-only (esm.sh, cdn.tailwindcss.com, unpkg). Use ES module imports with full CDN URLs. No `npm install` at runtime. **Entry point:** `index.html` must include all CDN script tags. Tailwind via CDN with inline config. **Built-in services (relative API paths only, never hardcode domains):** - `/api/ai/completion` — AI proxy | `/api/data/{appId}/*` — PostgreSQL (DataConnect SDK) - `/api/storage/{appId}/*` — File uploads (GCS) | `/api/auth/google/*` — Google OAuth - `/api/contact/submit` — Contact form | SDKs: `window.genmb.db`, `.storage`, `.auth` **File structure:** `index.html` (entry), `src/` (source), `styles/` (CSS), `backend/` (optional FastAPI), `CLAUDE.md` (this file). **Cannot:** Install npm packages at runtime, access filesystem, make direct server-side calls from frontend, modify infra.

FlowSync Launch