AI product interface built from scratch

Interactive editor demo

A fully functional mock editor with document list, toolbar, content area, and live word count. Users can interact with the interface, not just look at a screenshot.

AI suggestion system

Three suggestion cards that expand to show previews of AI-generated rewrites. Click Apply and the editor content updates in real-time. Demonstrates complex UI state management.

Production-grade UI

macOS-style window chrome, traffic light dots, proper panel layouts, hover states, and transitions. The demo looks like a shipped product, not a prototype.

# AI Product Marketing Page with Interactive Demo

## What to build
A marketing page for an AI writing tool with an embedded, functional editor demo.

## Sections
1. **Nav**: product name with logo badge, CTA button, back link
2. **Hero**: large headline, subtitle, two CTAs
3. **Interactive demo**: the centerpiece. A mock editor interface with:
   - Left sidebar: 4 document entries, active one highlighted, "New document" button
   - Main editor: toolbar (bold, italic, heading icons), document content, word count, blinking cursor
   - Right panel: 3 AI suggestion cards (color-coded by type), expandable with preview text, Apply/Dismiss buttons that modify the editor content
4. **Features**: 3 cards (contextual rewrites, tone matching, team memory)
5. **Social proof**: large stat + 3 testimonial cards with avatar initials
6. **CTA**: email capture
7. **Footer**: attribution

## Design requirements
- The editor demo must be interactive (click suggestions, see content change)
- macOS-style window chrome (traffic light dots, title bar)
- Proper panel shadows and borders
- Client component with React state management

Build a marketing page for a fictional AI writing assistant called "Draft." The page must include a fully interactive editor demo embedded in the page.

The demo is a three-panel app interface: left sidebar with 4 documents (clickable), center editor with toolbar (bold/italic/heading SVG icons), pre-filled blog post content with live word count and blinking cursor, right panel with 3 AI suggestion cards color-coded by type (tone=orange, data=blue, brevity=green). Clicking a card expands a rewrite preview with Apply/Dismiss buttons. Apply does a string replacement in the live editor content.

Wrap the demo in macOS-style window chrome (traffic light dots, title bar). Below the demo: 3 feature cards, social proof section with stat and testimonials, email capture CTA. Use client-side state for all interactivity.