Hero Product Preview

<section class="ws-hero bg-[var(--ws-hero-bg)] pt-20 pb-0">
  <div class="mx-auto max-w-5xl px-6 text-center">

    <!-- Eyebrow -->
    <div class="mb-5 inline-flex items-center gap-2 rounded-full border border-[var(--ws-hero-badge-border)] bg-[var(--ws-hero-badge-bg)] px-3.5 py-1.5">
      <span class="h-1.5 w-1.5 rounded-full bg-emerald-500" aria-hidden="true"></span>
      <span class="text-xs font-medium text-[var(--ws-hero-badge-text)]">v3.2 just shipped — Parallel agents</span>
      <a href="#" class="text-xs font-medium text-[var(--ws-hero-accent)] hover:underline">See what's new →</a>
    </div>

    <!-- Headline -->
    <h1 class="text-balance text-4xl font-bold tracking-tight text-[var(--ws-hero-text)] sm:text-5xl md:text-6xl">
      Built to make you<br class="hidden sm:block">
      <span class="text-[var(--ws-hero-accent)]">extraordinarily productive</span>
    </h1>

    <!-- Subtext -->
    <p class="mx-auto mt-6 max-w-2xl text-lg leading-relaxed text-[var(--ws-hero-text-soft)]">
      The AI editor that understands your entire codebase — not just the file you're looking at.
      Write, refactor and ship faster than ever before.
    </p>

    <!-- CTAs -->
    <div class="mt-8 flex flex-wrap items-center justify-center gap-3">
      <a href="#"
        class="inline-flex items-center gap-2 rounded-xl bg-[var(--ws-hero-cta-bg)] px-5 py-3 text-sm font-semibold text-[var(--ws-hero-cta-text)] shadow-sm transition-opacity hover:opacity-90">
        <svg class="h-4 w-4" fill="none" viewBox="0 0 16 16" aria-hidden="true"><path d="M8 1a6.5 6.5 0 110 13A6.5 6.5 0 018 1zm0 3.5v4l2.5 1.5" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>
        Download for macOS
      </a>
      <a href="#"
        class="inline-flex items-center gap-2 rounded-xl border border-[var(--ws-hero-cta-secondary-border)] bg-[var(--ws-hero-cta-secondary-bg)] px-5 py-3 text-sm font-semibold text-[var(--ws-hero-text)] transition-colors hover:border-[var(--ws-hero-accent)]">
        Try in browser
        <svg class="h-4 w-4" fill="none" viewBox="0 0 16 16" aria-hidden="true"><path d="M3 8h10M9 4l4 4-4 4" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></svg>
      </a>
    </div>

    <!-- Social proof -->
    <p class="mt-5 text-xs text-[var(--ws-hero-text-muted)]">
      Trusted by engineers at Stripe, NVIDIA, OpenAI and 50,000+ teams worldwide
    </p>

  </div>

  <!-- Product Preview -->
  <div class="relative mx-auto mt-14 max-w-6xl px-6">
    <!-- Vignette fade at bottom -->
    <div class="pointer-events-none absolute inset-x-0 bottom-0 h-32 bg-gradient-to-t from-[var(--ws-hero-bg)] to-transparent" aria-hidden="true"></div>

    <!-- Mock IDE window -->
    <div class="overflow-hidden rounded-t-2xl border border-b-0 border-[var(--ws-hero-preview-border)] bg-[var(--ws-hero-preview-bg)] shadow-2xl">

      <!-- Titlebar -->
      <div class="flex items-center gap-2 border-b border-[var(--ws-hero-preview-border)] bg-[var(--ws-hero-preview-chrome)] px-4 py-3">
        <div class="flex gap-1.5" aria-hidden="true">
          <span class="h-3 w-3 rounded-full bg-red-400"></span>
          <span class="h-3 w-3 rounded-full bg-yellow-400"></span>
          <span class="h-3 w-3 rounded-full bg-green-400"></span>
        </div>
        <div class="mx-auto flex items-center gap-2 rounded-md border border-[var(--ws-hero-preview-border)] bg-[var(--ws-hero-preview-bg)] px-3 py-1">
          <span class="text-xs text-[var(--ws-hero-text-muted)]">src / components / AuthModal.tsx</span>
        </div>
      </div>

      <!-- Code area (decorative) -->
      <div class="flex" aria-hidden="true" role="presentation">
        <!-- Sidebar -->
        <div class="hidden w-48 shrink-0 border-r border-[var(--ws-hero-preview-border)] bg-[var(--ws-hero-preview-chrome)] p-3 sm:block">
          <div class="space-y-1">
            <div class="h-3 w-24 rounded bg-[var(--ws-hero-preview-border)] opacity-60"></div>
            <div class="h-3 w-32 rounded bg-[var(--ws-hero-preview-border)] opacity-40"></div>
            <div class="mt-2 h-3 w-20 rounded bg-[var(--ws-hero-preview-border)] opacity-60"></div>
            <div class="h-3 w-28 rounded bg-[var(--ws-hero-preview-border)] opacity-80 text-xs font-mono text-[var(--ws-hero-accent)]"></div>
            <div class="h-3 w-24 rounded bg-[var(--ws-hero-preview-border)] opacity-40"></div>
            <div class="mt-2 h-3 w-16 rounded bg-[var(--ws-hero-preview-border)] opacity-60"></div>
            <div class="h-3 w-36 rounded bg-[var(--ws-hero-preview-border)] opacity-40"></div>
          </div>
        </div>

        <!-- Code lines -->
        <div class="min-h-[260px] flex-1 p-5 font-mono text-xs leading-6">
          <div class="space-y-1 text-[var(--ws-hero-text-muted)]">
            <div class="flex gap-4"><span class="w-6 text-right opacity-40">1</span><span class="text-violet-400">import</span><span class="text-[var(--ws-hero-text-soft)]"> &#123; useState &#125; from <span class="text-amber-400">'react'</span></span></div>
            <div class="flex gap-4"><span class="w-6 text-right opacity-40">2</span><span></span></div>
            <div class="flex gap-4"><span class="w-6 text-right opacity-40">3</span><span class="text-violet-400">export default function</span><span class="text-blue-400"> AuthModal</span><span class="text-[var(--ws-hero-text-soft)]">() &#123;</span></div>
            <div class="flex gap-4"><span class="w-6 text-right opacity-40">4</span><span class="pl-4 text-violet-400">const</span><span class="text-[var(--ws-hero-text-soft)]"> [tab, setTab] = useState&lt;</span><span class="text-emerald-400">'login'</span> | <span class="text-emerald-400">'register'</span>&gt;(<span class="text-emerald-400">'login'</span>)</div>
            <!-- AI suggestion highlight -->
            <div class="flex gap-4 rounded-r-md border-l-2 border-[var(--ws-hero-accent)] bg-[var(--ws-hero-accent)]/8 pl-1">
              <span class="w-6 text-right opacity-40">5</span>
              <span class="pl-4 text-violet-400">const</span>
              <span class="text-[var(--ws-hero-text-soft)]"> [loading, setLoading] = useState(</span>
              <span class="text-amber-400">false</span>
              <span class="text-[var(--ws-hero-text-soft)]">)</span>
            </div>
            <div class="flex gap-4"><span class="w-6 text-right opacity-40">6</span><span></span></div>
            <div class="flex gap-4"><span class="w-6 text-right opacity-40">7</span><span class="pl-4 text-violet-400">return</span><span class="text-[var(--ws-hero-text-soft)]"> (</span></div>
            <div class="flex gap-4"><span class="w-6 text-right opacity-40">8</span><span class="pl-8 text-blue-400">&lt;div</span><span class="text-amber-400"> className</span><span class="text-[var(--ws-hero-text-soft)]">=</span><span class="text-emerald-400">"modal-overlay"</span><span class="text-blue-400">&gt;</span></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>