AI Hero With Quick Actions

<section class="ws-ai-hero bg-[var(--ws-ai-hero-bg)]">
  <div class="mx-auto max-w-4xl px-6 py-24 text-center sm:py-32">
    <!-- Badge -->
    <p class="mb-6 inline-flex items-center gap-2 rounded-full border border-[var(--ws-ai-hero-border)] bg-[var(--ws-ai-hero-bg)] px-4 py-1.5 text-xs font-medium uppercase tracking-[0.15em] text-[var(--ws-ai-hero-accent)]">
      <svg class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M9.813 15.904L9 18.75l-.813-2.846a4.5 4.5 0 00-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 003.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 003.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 00-3.09 3.09z" /></svg>
      Powered by AI
    </p>

    <!-- Headline -->
    <h1 class="text-balance text-4xl font-bold tracking-tight text-[var(--ws-ai-hero-text)] sm:text-5xl lg:text-6xl">Build faster with AI</h1>
    <p class="mx-auto mt-6 max-w-2xl text-pretty text-lg text-[var(--ws-ai-hero-text-soft)]">Transform your workflow with intelligent automation. Ask anything, generate content, and ship products in record time.</p>

    <!-- Chat input -->
    <div class="mx-auto mt-10 max-w-xl">
      <div class="flex items-center gap-2 rounded-2xl border border-[var(--ws-ai-hero-border)] bg-[var(--ws-ai-hero-bg)] p-2 shadow-lg">
        <input type="text" placeholder="Ask anything..." aria-label="Ask anything" class="flex-1 bg-transparent px-4 py-3 text-base text-[var(--ws-ai-hero-text)] placeholder:text-[var(--ws-ai-hero-text-soft)] focus:outline-none" />
        <button type="button" class="flex-shrink-0 rounded-xl bg-[var(--ws-ai-hero-action-bg)] px-5 py-3 text-sm font-semibold text-[var(--ws-ai-hero-action-text)] transition hover:opacity-90" aria-label="Send message">
          <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M6 12L3.269 3.126A59.768 59.768 0 0121.485 12 59.77 59.77 0 013.27 20.876L5.999 12zm0 0h7.5" /></svg>
        </button>
      </div>
    </div>

    <!-- Quick action pills -->
    <div class="mx-auto mt-6 flex max-w-2xl flex-wrap items-center justify-center gap-2">
      <button type="button" class="rounded-full border border-[var(--ws-ai-hero-border)] bg-[var(--ws-ai-hero-bg)] px-4 py-2 text-sm text-[var(--ws-ai-hero-text-soft)] transition hover:border-[var(--ws-ai-hero-accent)] hover:text-[var(--ws-ai-hero-text)]">
        <span class="mr-1.5" aria-hidden="true">&#9997;&#65039;</span>Write a blog post
      </button>
      <button type="button" class="rounded-full border border-[var(--ws-ai-hero-border)] bg-[var(--ws-ai-hero-bg)] px-4 py-2 text-sm text-[var(--ws-ai-hero-text-soft)] transition hover:border-[var(--ws-ai-hero-accent)] hover:text-[var(--ws-ai-hero-text)]">
        <span class="mr-1.5" aria-hidden="true">&#128187;</span>Generate code
      </button>
      <button type="button" class="rounded-full border border-[var(--ws-ai-hero-border)] bg-[var(--ws-ai-hero-bg)] px-4 py-2 text-sm text-[var(--ws-ai-hero-text-soft)] transition hover:border-[var(--ws-ai-hero-accent)] hover:text-[var(--ws-ai-hero-text)]">
        <span class="mr-1.5" aria-hidden="true">&#128202;</span>Analyze data
      </button>
      <button type="button" class="rounded-full border border-[var(--ws-ai-hero-border)] bg-[var(--ws-ai-hero-bg)] px-4 py-2 text-sm text-[var(--ws-ai-hero-text-soft)] transition hover:border-[var(--ws-ai-hero-accent)] hover:text-[var(--ws-ai-hero-text)]">
        <span class="mr-1.5" aria-hidden="true">&#127912;</span>Create images
      </button>
    </div>

    <!-- Trust indicators -->
    <div class="mt-12 flex flex-wrap items-center justify-center gap-8 text-sm text-[var(--ws-ai-hero-text-soft)]">
      <div class="flex items-center gap-2">
        <svg class="h-4 w-4 text-emerald-500" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" /></svg>
        10k+ users
      </div>
      <div class="flex items-center gap-2">
        <svg class="h-4 w-4 text-emerald-500" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" /></svg>
        99.9% uptime
      </div>
      <div class="flex items-center gap-2">
        <svg class="h-4 w-4 text-emerald-500" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" /></svg>
        SOC 2
      </div>
    </div>
  </div>
</section>