AI Tool Landing Page

Build a landing page for an AI writing tool called "Draftly" that rewrites and improves text in real time. The page should include:

1. **Sticky nav** — Logo ("Draftly") left, nav links (Product, Pricing, Docs, Blog), a "Sign in" ghost button and "Try free" solid blue-600 button on the right. Nav is transparent on scroll, white on opaque after scroll-past-hero.

2. **Hero section** — Centered layout, max-w-3xl, 120px top padding. Small pill badge at top with a sparkle icon: "✨ Now powered by GPT-4o". H1 (text-5xl, font-extrabold): "Write better. In seconds." Subtitle (text-xl, text-zinc-500, max-w-lg): "Draftly rewrites your drafts with the exact tone, length, and style you need — instantly." Two CTAs: "Start writing for free" (blue-600, rounded-full, px-8, py-3) and "Watch 90s demo →" (text link with play icon). Below the CTAs: trust line with logos "Trusted by 14,000+ writers at Notion, Shopify, HubSpot".

3. **Live demo embed** — A large interactive card (max-w-4xl, zinc-900 background, rounded-2xl, box-shadow-2xl) showing a split-pane text editor mockup:
   - **Left pane ("Before"):** A textarea with rough draft text: "Our product is good and helps people do stuff faster and better than before."
   - **Right pane ("After — Draftly"):** Polished AI output (green text highlight): "Our product dramatically accelerates how teams work — delivering measurable results, faster." 
   - A toolbar above with tone selector (Professional / Casual / Bold), length (Shorter / Same / Longer), and a blue "Rewrite →" button.

4. **Metrics strip** — 4 stats in a horizontal row: "14,000+ active users", "4.9★ average rating", "2.4x faster editing", "180+ languages supported".

5. **Features grid (2×3 grid, 6 cards):**
   - Tone Control — "Professional, casual, confident, empathetic. Dial in exactly how you sound."
   - Length Optimizer — "Cut to a tweet or expand to a blog post. One click."
   - Smart Synonyms — "Avoids repetition automatically with context-aware replacements."
   - Team Presets — "Save your brand voice as a team style guide. Always on-brand."
   - Browser Extension — "Works directly in Gmail, Notion, Docs, and 30+ other tools."
   - API Access — "Embed Draftly into your own product with a simple REST API."
   Each card: icon in blue-50 square, bold title, 2-line description on zinc-50 background.

6. **Social proof — quote wall** — 3 large pull quotes from notable users, each with avatar (48px circle), name, company, and a blue open-quote mark (text-5xl).

7. **Playground CTA** — Full-width section, gradient from blue-600 to violet-500, centered. Headline: "Try Draftly on your own writing." A large textarea (max-w-2xl) with a placeholder: "Paste a sentence or paragraph here…" and a "Rewrite it →" button below. Subtext: "No account needed. Free forever for 5 rewrites/day."

8. **Footer** — Standard 4-column footer.

**Design:** White background, blue-600/violet-500 gradient accents, Inter font, 100px section gaps, subtle grid texture on hero background. Fully responsive.

[NAVBAR — transparent → white on scroll]
  Draftly    Product  Pricing  Docs  Blog    [Sign in]  [Try free]

[HERO — centered, 120px top padding]
  ✨ Now powered by GPT-4o

  Write better.
  In seconds.

  Draftly rewrites your drafts with the exact tone, length,
  and style you need — instantly.

  [Start writing for free]   Watch 90s demo ▶

  Trusted by 14,000+ writers at [Notion] [Shopify] [HubSpot]

[DEMO CARD — zinc-900 background, rounded]
  ┌──────────────────────────────────────────────────────────────────┐
  │  Tone: [Professional ▾]  Length: [Same ▾]        [Rewrite →]   │
  │ ─────────────────────────────────────────────────────────────── │
  │  BEFORE                       │  AFTER — Draftly               │
  │  ─────────────────────────   │  ───────────────────────────    │
  │  "Our product is good and    │  "Our product dramatically       │
  │   helps people do stuff      │   accelerates how teams work     │
  │   faster and better          │   — delivering measurable        │
  │   than before."              │   results, faster."              │
  │                              │   (highlighted green)            │
  └──────────────────────────────────────────────────────────────────┘

[METRICS STRIP]
  14,000+          4.9★            2.4×             180+
  active users     avg rating      faster editing   languages

[FEATURES GRID — 2×3]
  ┌──────────────────────────┐  ┌──────────────────────────┐  ┌──────────────────────────┐
  │ [🎤] Tone Control         │  │ [↔] Length Optimizer     │  │ [🔀] Smart Synonyms      │
  │ Professional, casual,    │  │ Cut to a tweet or expand │  │ Avoids repetition with   │
  │ confident, empathetic.   │  │ to a blog post. 1 click.  │  │ context-aware swaps.     │
  └──────────────────────────┘  └──────────────────────────┘  └──────────────────────────┘
  ┌──────────────────────────┐  ┌──────────────────────────┐  ┌──────────────────────────┐
  │ [🏢] Team Presets         │  │ [🔌] Browser Extension   │  │ [⚙️] API Access           │
  │ Save your brand voice as │  │ Works in Gmail, Notion,  │  │ Embed Draftly into your  │
  │ a shared style guide.    │  │ Docs + 30 other tools.   │  │ product via REST API.    │
  └──────────────────────────┘  └──────────────────────────┘  └──────────────────────────┘

[QUOTE WALL — 3 cols]
  ┌──────────────────────────┐  ┌──────────────────────────┐  ┌──────────────────────────┐
  │ "                         │  │ "                        │  │ "                        │
  │ Draftly saved our content │  │ I use it to rewrite every│  │ The tone control is       │
  │ team 6 hours a week."     │  │ cold email I send.       │  │ genuinely magic.          │
  │                           │  │ Response rates up 40%.   │  │ Nothing else like it."   │
  │ [●] Claire W.             │  │ [●] Dev M.               │  │ [●] Sasha R.             │
  │     Head of Content,      │  │     Founder, Startify    │  │     Copywriter            │
  │     Lattice               │  │                          │  │                           │
  └──────────────────────────┘  └──────────────────────────┘  └──────────────────────────┘

[PLAYGROUND CTA — blue→violet gradient]
  Try Draftly on your own writing.

  ┌────────────────────────────────────────────────────────────────┐
  │ Paste a sentence or paragraph here…                           │
  │                                                                │
  │                                                                │
  └────────────────────────────────────────────────────────────────┘
              [Rewrite it →]
  No account needed. Free forever for 5 rewrites/day.

[FOOTER — 4 cols]
  Draftly             Product          Resources        Company
  "Write better.      Features         Docs             About
   In seconds."       Pricing          API Reference    Blog
                      Browser Ext.     Changelog        Careers

  © 2026 Draftly, Inc.