Act as an expert frontend developer and UI/UX designer. Build a modern, interactive React application for a product called "Clickward.ai", an AI-powered continuous conversion rate optimization platform.
The app should use React, Tailwind CSS, Framer Motion (for animations), Recharts (for data visualization), and Lucide React (for icons). The entire app must be in a sleek dark mode (using Tailwind's neutral-950 as the main background).
The application should have two main views managed by state: a "Landing Page" and a "Dashboard".
1. Landing Page
- Vibe: Premium, modern, tech-forward, dark mode with glowing indigo/cyan accents.
- Navigation: Simple top bar with the logo (Activity icon) and a "Live Demo" button.
- Hero Section:
- A large, blurred glowing background orb (indigo/cyan) behind the text.
- A small pill-shaped badge reading "The future of Conversion Rate Optimization".
- A massive, bold headline: "Never manually A/B test again." with "again." styled with a gradient text clip.
- A subheadline explaining the product: "Drop in a single script. Our AI analyzes visitor behavior, generates new page variants, and continuously runs A/B tests..."
- Two buttons: A primary "Launch Interactive Demo" button (indigo) and a secondary "View Documentation" button (outline). Clicking the demo button should switch the app state to the Dashboard view.
- Features Grid: 3 glassmorphism cards (backdrop-blur, semi-transparent borders) detailing features: "Behavior Analysis", "AI Variant Generation", and "Perpetual Optimization". Use relevant Lucide icons.
- Animations: Use Framer Motion to fade in and slide up the hero elements and feature cards on load.
2. Dashboard (Web App)
- Layout: A full-screen layout with a fixed left sidebar (width 64) and a main content area.
- Sidebar: Contains the logo, navigation links (Overview, Experiments, Heatmaps, Settings), and an "Exit Demo" button at the bottom that returns the user to the Landing Page.
- Header: Sticky top header in the main content area showing the project name ("Acme Corp Optimization"), a pulsing green indicator ("AI Agent Active"), the current win rate (68.4%), and a "Pause AI" button.
- State Management: The sidebar should control which view is shown in the main content area (Overview, Experiments, or Heatmaps).
3. Dashboard Views
A. Overview Tab:
- Stats Row: 4 cards showing Conversion Rate (3.4%), Active Tests (12), Total Visitors (124.5k), and AI Actions (843).
- Chart: Use
recharts to render an AreaChart showing Conversion Rate Over Time (Mon-Sun, trending upwards from 2.1% to 3.4%). Use an indigo gradient fill for the area.
- Live AI Feed: A vertical list simulating real-time AI actions. Use
setInterval to add a new action every 4 seconds (e.g., "Analyzing scroll depth...", "Deploying Variant C..."). Use Framer Motion's AnimatePresence to smoothly animate new items sliding in from the top.
- Experiments Table: A table showing active experiments with columns for Page/Element, Variants, Traffic Split, Leading Variant, Confidence (with a visual progress bar), and Status.