Hero Device Showcase

<section class="ws-hero ws-hero-device-showcase overflow-hidden bg-[var(--ws-hero-bg)]">
  <div class="mx-auto max-w-5xl px-6 py-20 text-center lg:py-28">
    <!-- Eyebrow -->
    <p class="mb-4 inline-flex rounded-full bg-[var(--ws-hero-badge-bg)] px-3 py-1 text-xs font-semibold uppercase tracking-widest text-[var(--ws-hero-accent)]">Available on all devices</p>

    <!-- Heading -->
    <h1 class="text-balance text-4xl font-bold tracking-tight text-[var(--ws-hero-text)] sm:text-5xl lg:text-6xl">
      Your product, perfectly<br class="hidden sm:block" /> on every screen.
    </h1>

    <!-- Description -->
    <p class="mx-auto mt-5 max-w-2xl text-pretty text-lg text-[var(--ws-hero-text-soft)]">
      Fully responsive patterns that look sharp on desktop, tablet, and mobile — shipped from a single source of truth.
    </p>

    <!-- CTA -->
    <div class="mt-8 flex flex-wrap items-center justify-center gap-3">
      <a href="#" class="rounded-xl bg-[var(--ws-hero-action-bg)] px-6 py-3 text-sm font-semibold text-[var(--ws-hero-action-text)] transition hover:bg-[var(--ws-hero-action-bg-hover)]">See all patterns</a>
      <a href="#" class="rounded-xl border border-[var(--ws-hero-border)] px-6 py-3 text-sm font-semibold text-[var(--ws-hero-text)] transition hover:opacity-80">View documentation</a>
    </div>

    <!-- Device mockup composition -->
    <div class="relative mx-auto mt-14 flex items-end justify-center" style="height: 320px; max-width: 700px;">

      <!-- Tablet (behind-left) -->
      <div class="absolute bottom-0 left-0 z-10 hidden sm:block" style="width: 200px;">
        <div class="rounded-2xl border-4 border-[var(--ws-hero-text)] bg-[var(--ws-hero-text)] shadow-lg">
          <!-- Bezel top -->
          <div class="flex items-center justify-center py-2">
            <div class="h-1.5 w-8 rounded-full bg-[var(--ws-hero-bg)] opacity-40"></div>
          </div>
          <!-- Screen -->
          <div class="overflow-hidden rounded-lg" style="aspect-ratio: 4/3; background: linear-gradient(135deg, #6366f1, #8b5cf6);"> <!-- ws-ok: device mockup screen gradient -->
            <div class="flex h-full items-center justify-center">
              <span class="text-xs font-medium text-white/60">Tablet view</span>
            </div>
          </div>
          <!-- Bezel bottom -->
          <div class="flex items-center justify-center py-2">
            <div class="h-3 w-3 rounded-full bg-[var(--ws-hero-bg)] opacity-40"></div>
          </div>
        </div>
      </div>

      <!-- Laptop (center, largest) -->
      <div class="relative z-20 w-full" style="max-width: 500px;">
        <!-- Laptop lid -->
        <div class="rounded-t-xl border-4 border-b-0 border-[var(--ws-hero-text)] bg-[var(--ws-hero-text)] shadow-2xl">
          <!-- Camera dot -->
          <div class="flex items-center justify-center pb-1 pt-2">
            <div class="h-1.5 w-1.5 rounded-full bg-[var(--ws-hero-bg)] opacity-40"></div>
          </div>
          <!-- Screen -->
          <div class="overflow-hidden rounded-t-lg" style="aspect-ratio: 16/10; background: linear-gradient(135deg, var(--ws-hero-accent), #f59e0b);"> <!-- ws-ok: device mockup screen gradient -->
            <div class="flex h-full flex-col items-center justify-center gap-2 p-4">
              <div class="h-2 w-1/2 rounded-full bg-white/30"></div>
              <div class="h-2 w-1/3 rounded-full bg-white/20"></div>
              <div class="mt-2 h-6 w-20 rounded-lg bg-white/40"></div>
            </div>
          </div>
        </div>
        <!-- Laptop base -->
        <div class="h-3 w-full rounded-b-sm bg-[var(--ws-hero-text)]"></div>
        <div class="mx-auto h-1.5 w-3/4 rounded-b-xl bg-[var(--ws-hero-border)]"></div>
      </div>

      <!-- Phone (behind-right) -->
      <div class="absolute bottom-0 right-0 z-10 hidden sm:block" style="width: 80px;">
        <div class="rounded-3xl border-4 border-[var(--ws-hero-text)] bg-[var(--ws-hero-text)] shadow-lg">
          <!-- Notch -->
          <div class="flex items-center justify-center py-1.5">
            <div class="h-1 w-6 rounded-full bg-[var(--ws-hero-bg)] opacity-40"></div>
          </div>
          <!-- Screen -->
          <div class="overflow-hidden" style="aspect-ratio: 9/19; background: linear-gradient(180deg, #10b981, #0ea5e9);"> <!-- ws-ok: device mockup screen gradient -->
            <div class="flex h-full items-center justify-center">
              <span class="text-xs font-medium text-white/60" style="writing-mode: vertical-rl; font-size: 8px;">Mobile</span>
            </div>
          </div>
          <!-- Home bar -->
          <div class="flex items-center justify-center py-2">
            <div class="h-1 w-8 rounded-full bg-[var(--ws-hero-bg)] opacity-40"></div>
          </div>
        </div>
      </div>

    </div>
  </div>
</section>