A premium landing page for an AI productivity tool that helps non-technical professionals figure out which parts of their daily work are repetitive and how much of it can be automated with AI.

Built with React, Three.js, and vanilla CSS. Features a 3D interactive globe, cursor-following particles, scroll-triggered animations, and a custom warm amber/gold design system.

• React (Vite) for fast client-side rendering
• Three.js via React Three Fiber for 3D visuals
• Framer Motion for entrance and scroll animations
• Vanilla CSS with custom properties for the design system

npm install
npm run dev

Dev server starts at http://localhost:5173.

src/
  components/
    layout/      Navbar, Footer
    sections/    Hero, Problem, HowItWorks, Features, ProductPreview,
                 Testimonials, FAQ, FinalCTA, Marquee
    three/       Globe, Particles, Scene (3D layer)
    ui/          Button, Card, SectionHeader (reusable primitives)
  styles/
    variables.css   Design tokens (colors, spacing, typography)
    index.css       Global resets and utilities
  App.jsx
  main.jsx

• Color: Warm amber/gold on dark instead of the typical blue/purple AI aesthetic. Feels premium and stands out.
• Typography: Quantico for headings (techy, angular), Outfit for body text (clean, readable).
• 3D: Fibonacci-distributed nodes on a wireframe globe with connection lines. Particles react to cursor movement.
• Target audience: Non-tech professionals, so the UI is intentionally simple and jargon-free.

Parth Patidar