<section class="rounded-xl border bg-card text-card-foreground shadow-xs" data-resizable-preview>
  <header class="flex flex-wrap items-center gap-3 border-b px-4 py-3">
    <div class="min-w-0">
      <p class="text-sm font-medium">Marketing block preview</p>
      <p class="text-xs text-muted-foreground">Resize the frame to check how the hero stack, proof band, and action group respond.</p>
    </div>
    <div class="ms-auto flex flex-wrap items-center gap-2">
      <button type="button" class="btn" data-variant="outline" data-size="sm" data-preview-preset="375">Mobile</button>
      <button type="button" class="btn" data-variant="outline" data-size="sm" data-preview-preset="768">Tablet</button>
      <button type="button" class="btn" data-variant="outline" data-size="sm" data-preview-preset="1120">Desktop</button>
      <button type="button" class="btn" data-variant="ghost" data-size="sm" data-preview-preset="1280">Full</button>
    </div>
  </header>
  <div class="flex flex-wrap items-center gap-3 border-b px-4 py-3">
    <label class="text-xs font-medium text-muted-foreground" for="marketing-block-range">Width</label>
    <input id="marketing-block-range" class="w-full min-w-40 flex-1 accent-primary" type="range" min="360" max="1280" value="1120" data-preview-range />
    <output class="rounded-md bg-muted px-2.5 py-1 font-mono text-xs tabular-nums" data-preview-output>1120px</output>
  </div>
  <div class="overflow-x-auto bg-muted/30 p-4 md:p-6">
    <div class="mx-auto w-full max-w-full overflow-hidden rounded-xl border bg-background shadow-sm transition-[width] duration-150" data-preview-viewport>
      <div class="w-full p-4 md:p-6">
<section class="grid gap-4 xl:grid-cols-[1.15fr_0.85fr]">
  <article class="card rounded-[calc(var(--radius-xl)+4px)] border bg-linear-to-br from-background via-background to-muted/30 p-6 sm:p-8">
    <header class="grid gap-4">
      <div class="flex flex-wrap items-center gap-2">
        <span class="badge">Marketing</span>
        <span class="badge" data-variant="outline">Launch-ready</span>
      </div>
      <div class="max-w-2xl space-y-4">
        <h2 class="text-3xl font-semibold tracking-tight sm:text-5xl">Ship polished product pages without leaving semantic HTML.</h2>
        <p class="max-w-xl text-sm text-muted-foreground sm:text-base">5h3ll-ui gives teams a shadcn-like visual system for docs, admin pages, onboarding, and landing surfaces without a React-only dependency chain.</p>
      </div>
      <div class="flex w-full flex-col gap-3 sm:w-auto sm:flex-row sm:flex-wrap">
        <button type="button" class="btn w-full sm:w-auto">Start building</button>
        <button type="button" class="btn w-full sm:w-auto" data-variant="outline">Browse blocks</button>
      </div>
    </header>
    <section class="mt-8 grid gap-4 sm:grid-cols-3">
      <div class="rounded-xl border bg-background/80 p-4">
        <p class="text-2xl font-semibold tabular-nums">8</p>
        <p class="mt-1 text-sm text-muted-foreground">Standalone style packs</p>
      </div>
      <div class="rounded-xl border bg-background/80 p-4">
        <p class="text-2xl font-semibold tabular-nums">40+</p>
        <p class="mt-1 text-sm text-muted-foreground">Documented components</p>
      </div>
      <div class="rounded-xl border bg-background/80 p-4">
        <p class="text-2xl font-semibold tabular-nums">0</p>
        <p class="mt-1 text-sm text-muted-foreground">Framework lock-in</p>
      </div>
    </section>
    <footer class="mt-8 grid gap-3 border-t pt-6 text-sm text-muted-foreground sm:grid-cols-3">
      <p>Semantic HTML first</p>
      <p>Minimal JavaScript</p>
      <p>Composable design tokens</p>
    </footer>
  </article>

  <div class="grid gap-4">
    <article class="card rounded-[calc(var(--radius-xl)+4px)] border p-6">
      <header>
        <h2>Trusted for modern product surfaces</h2>
        <p>Use the same primitives across marketing, dashboard, and account flows.</p>
      </header>
      <section class="grid gap-3">
        <div class="item gap-3 rounded-xl border px-4 py-3">
          <section>
            <h3>Documentation</h3>
            <p>Build polished docs pages with a consistent visual language.</p>
          </section>
          <span class="badge" data-variant="secondary">Live</span>
        </div>
        <div class="item gap-3 rounded-xl border px-4 py-3">
          <section>
            <h3>Product UI</h3>
            <p>Reuse the same cards, fields, dialogs, and tabs inside apps.</p>
          </section>
          <span class="badge" data-variant="outline">Stable</span>
        </div>
        <div class="item gap-3 rounded-xl border px-4 py-3">
          <section>
            <h3>Landing pages</h3>
            <p>Compose hero, stats, proof, and CTA sections without React wrappers.</p>
          </section>
          <span class="badge">New</span>
        </div>
      </section>
    </article>

    <article class="card rounded-[calc(var(--radius-xl)+4px)] border p-6">
      <header>
        <h2>Why teams copy this block</h2>
        <p>It balances headline content with proof, actions, and secondary context.</p>
      </header>
      <section class="space-y-3">
        <div class="rounded-xl border bg-muted/40 p-4">
          <p class="text-sm font-medium">Fast to adapt</p>
          <p class="mt-2 text-sm text-muted-foreground">Swap the messaging, metrics, and CTA labels without changing the layout primitives.</p>
        </div>
        <div class="rounded-xl border bg-muted/40 p-4">
          <p class="text-sm font-medium">Responsive by default</p>
          <p class="mt-2 text-sm text-muted-foreground">The hero stack, action row, and proof cards all collapse cleanly inside the resizable preview.</p>
        </div>
      </section>
    </article>
  </div>
</section>
      </div>
    </div>
  </div>
</section>