AI Hero Split

<section class="ws-ai-hero bg-[var(--ws-ai-hero-bg)]">
  <div class="mx-auto max-w-7xl">
    <div class="grid min-h-[80vh] lg:grid-cols-2">
      <!-- Content -->
      <div class="flex flex-col justify-center px-6 py-20 lg:px-12 lg:py-28">
        <p class="inline-flex w-fit items-center gap-2 rounded-full border border-[var(--ws-ai-hero-border)] 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>
        <h1 class="mt-6 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="mt-5 max-w-lg 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>
        <div class="mt-8 flex flex-wrap gap-3">
          <a href="#" class="rounded-xl bg-[var(--ws-ai-hero-action-bg)] px-6 py-3 text-sm font-semibold text-[var(--ws-ai-hero-action-text)] transition hover:opacity-90">Get started free</a>
          <a href="#" class="rounded-xl border border-[var(--ws-ai-hero-border)] bg-[var(--ws-ai-hero-bg)] px-6 py-3 text-sm font-semibold text-[var(--ws-ai-hero-text-soft)] transition hover:opacity-80">Watch demo</a>
        </div>
        <div class="mt-10 flex items-center gap-6 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>
            No credit card
          </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>
            14-day trial
          </div>
        </div>
      </div>

      <!-- Mock chat interface -->
      <div class="hidden items-center justify-center bg-gradient-to-br from-slate-100 via-slate-50 to-slate-100 p-8 lg:flex">
        <div class="w-full max-w-sm space-y-3">
          <!-- Chat header -->
          <div class="rounded-t-2xl border border-[var(--ws-ai-hero-border)] bg-[var(--ws-color-surface)] p-4">
            <div class="flex items-center gap-3">
              <div class="flex h-8 w-8 items-center justify-center rounded-full bg-[var(--ws-ai-hero-accent)] text-xs font-bold text-[var(--ws-ai-hero-action-text)]" aria-hidden="true">AI</div>
              <div>
                <p class="text-sm font-semibold text-[var(--ws-ai-hero-text)]">AI Assistant</p>
                <p class="text-xs text-[var(--ws-ai-hero-text-soft)]">Online</p>
              </div>
            </div>
          </div>

          <!-- Messages -->
          <div class="space-y-3 border-x border-[var(--ws-ai-hero-border)] bg-[var(--ws-color-surface)] p-4">
            <!-- User message -->
            <div class="flex justify-end">
              <div class="max-w-[75%] rounded-2xl rounded-br-md bg-[var(--ws-ai-hero-action-bg)] px-4 py-2.5 text-sm text-[var(--ws-ai-hero-action-text)]">How can I improve my landing page?</div>
            </div>
            <!-- AI message -->
            <div class="flex justify-start">
              <div class="max-w-[75%] rounded-2xl rounded-bl-md border border-[var(--ws-ai-hero-border)] bg-slate-50 px-4 py-2.5 text-sm text-[var(--ws-ai-hero-text)]">Focus on a clear value proposition, add social proof, and use a strong CTA above the fold.</div>
            </div>
            <!-- User message -->
            <div class="flex justify-end">
              <div class="max-w-[75%] rounded-2xl rounded-br-md bg-[var(--ws-ai-hero-action-bg)] px-4 py-2.5 text-sm text-[var(--ws-ai-hero-action-text)]">Show me an example.</div>
            </div>
          </div>

          <!-- Chat input -->
          <div class="rounded-b-2xl border border-[var(--ws-ai-hero-border)] bg-[var(--ws-color-surface)] p-3">
            <div class="flex items-center gap-2 rounded-xl bg-slate-50 px-3 py-2">
              <span class="flex-1 text-sm text-slate-400">Type a message...</span>
              <svg class="h-4 w-4 text-[var(--ws-ai-hero-accent)]" 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>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>