Chat UI Product Hero Section

<div class="text-neutral-900 antialiased" style="font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial">
  <main class="mx-auto max-w-4xl p-6 md:p-10">
    <section class="relative overflow-hidden rounded-3xl border border-neutral-200 bg-white shadow-[0_20px_60px_-24px_rgba(0,0,0,0.25)]">
      <div class="pointer-events-none absolute inset-0" aria-hidden="true" style="background-image: linear-gradient(to right, rgba(0,0,0,0.04) 1px, transparent 1px), linear-gradient(to bottom, rgba(0,0,0,0.04) 1px, transparent 1px); background-size: 26px 26px;"></div>
      <div class="relative p-6 md:p-8">
        <div class="mx-auto w-full max-w-lg rounded-2xl border border-neutral-200 bg-white shadow-sm">
          <div class="flex h-10 items-center justify-between border-b border-neutral-200 px-3">
            <div class="flex items-center gap-1.5">
              <span class="h-2.5 w-2.5 rounded-full bg-neutral-200"></span>
              <span class="h-2.5 w-2.5 rounded-full bg-neutral-200"></span>
              <span class="h-2.5 w-2.5 rounded-full bg-neutral-200"></span>
            </div>
            <div class="h-3 w-20 rounded bg-neutral-200"></div>
          </div>
          <div class="space-y-3 p-4">
            <div class="flex items-center gap-2">
              <span class="h-2.5 w-2.5 rounded bg-neutral-200"></span>
              <span class="h-2 w-2 rounded bg-neutral-200"></span>
              <div class="h-2.5 w-40 rounded bg-neutral-200"></div>
            </div>
            <div class="flex items-center gap-2">
              <span class="h-2.5 w-2.5 rounded bg-neutral-200"></span>
              <div class="h-2.5 w-56 rounded bg-neutral-200"></div>
            </div>
            <div class="flex items-center gap-2">
              <span class="h-2.5 w-2.5 rounded bg-neutral-200"></span>
              <div class="h-2.5 w-44 rounded bg-neutral-200"></div>
            </div>
            <div class="mt-3 flex items-center gap-2 rounded-lg border border-neutral-200 bg-white px-2 py-1.5 shadow-sm">
              <div class="h-4 w-4 rounded-full bg-neutral-200"></div>
              <div class="h-3 w-full rounded bg-neutral-200"></div>
              <div class="h-4 w-6 rounded bg-neutral-200"></div>
            </div>
          </div>
        </div>
        <div class="mx-auto max-w-2xl pt-6 md:pt-8">
          <h2 class="text-2xl md:text-3xl font-semibold tracking-tight text-neutral-900">Chat UI Starter</h2>
          <p class="mt-3 text-sm md:text-base leading-relaxed text-neutral-600">A lightweight, flexible chat interface for modern teams.</p>
          <p class="text-sm md:text-base leading-relaxed text-neutral-600">Customize quickly with clean defaults and a polished look.</p>
          <div class="mt-5">
            <a href="#" class="group inline-flex items-center gap-2 rounded-lg border border-neutral-200 bg-white px-4 py-2 text-xs font-medium text-neutral-900 shadow-sm hover:bg-neutral-50 focus:outline-none focus:ring-2 focus:ring-neutral-900/10">
              Preview demo
              <i data-lucide="arrow-right" class="h-4 w-4 transition-transform group-hover:translate-x-0.5"></i>
            </a>
          </div>
        </div>
      </div>
    </section>
  </main>
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&display=swap" rel="stylesheet">
  <script src="https://unpkg.com/lucide@latest/dist/umd/lucide.js"></script>
  <script>
    window.addEventListener('DOMContentLoaded', () => {if (window.lucide) lucide.createIcons({ attrs: { 'stroke-width': 1.5 } });});
  </script>
</div>