Hero Carousel Split

<section class="ws-hero ws-hero-carousel-split overflow-hidden bg-[var(--ws-hero-bg)]">
  <div class="flex min-h-[520px] flex-col lg:flex-row">

    <!-- Left: text content (60%) -->
    <div class="flex flex-1 flex-col justify-center px-8 py-16 lg:px-16 lg:py-20" style="flex: 0 0 60%;">
      <!-- Eyebrow -->
      <p class="mb-4 inline-flex w-fit rounded-full px-3 py-1 text-xs font-semibold uppercase tracking-widest bg-[var(--ws-hero-badge-bg)] text-[var(--ws-hero-accent)]">Slide 01 of 03</p>

      <!-- Heading (active slide) -->
      <h1 class="text-balance text-4xl font-bold tracking-tight text-[var(--ws-hero-text)] sm:text-5xl lg:text-6xl">
        Build faster with<br class="hidden sm:block" /> ready-made patterns.
      </h1>

      <!-- Description -->
      <p class="mt-5 max-w-lg text-pretty text-lg text-[var(--ws-hero-text-soft)]">
        Webspire gives your team copy-paste UI patterns that are token-aligned, SSR-safe, and built for Tailwind v4 from day one.
      </p>

      <!-- CTA buttons -->
      <div class="mt-8 flex flex-wrap 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)]">Start for free</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">Browse patterns</a>
      </div>

      <!-- Slide title tabs -->
      <nav class="mt-10 flex gap-6" aria-label="Carousel slides">
        <!-- Active slide -->
        <button class="border-b-2 border-[var(--ws-hero-accent)] pb-2 text-sm font-semibold text-[var(--ws-hero-text)] transition" aria-current="true">
          UI Patterns
        </button>
        <!-- Inactive slides -->
        <button class="border-b-2 border-transparent pb-2 text-sm font-medium text-[var(--ws-hero-text-soft)] transition hover:opacity-80">
          CSS Snippets
        </button>
        <button class="border-b-2 border-transparent pb-2 text-sm font-medium text-[var(--ws-hero-text-soft)] transition hover:opacity-80">
          Templates
        </button>
      </nav>
    </div>

    <!-- Right: image area (40%) -->
    <div class="relative flex items-end justify-end overflow-hidden" style="flex: 0 0 40%; background: linear-gradient(160deg, var(--ws-color-accent), #f59e0b); min-height: 300px;"> <!-- ws-ok: decorative gradient endpoint -->

      <!-- Decorative content inside image area -->
      <div class="absolute inset-0 flex items-center justify-center">
        <div class="text-center">
          <div class="mx-auto mb-4 h-20 w-20 rounded-2xl bg-white/20"></div>
          <div class="mx-auto h-3 w-32 rounded-full bg-white/30"></div>
          <div class="mx-auto mt-2 h-2 w-24 rounded-full bg-white/20"></div>
        </div>
      </div>

      <!-- Slide counter + navigation (bottom-right) -->
      <div class="relative z-10 flex items-center gap-4 p-6">
        <span class="text-sm font-bold text-white/90">01 / 03</span>

        <!-- Prev button -->
        <button
          class="flex h-10 w-10 items-center justify-center rounded-full border border-white/40 text-white transition hover:bg-white/20"
          aria-label="Previous slide"
        >
          <svg class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7"/>
          </svg>
        </button>

        <!-- Next button -->
        <button
          class="flex h-10 w-10 items-center justify-center rounded-full border border-white/40 text-white transition hover:bg-white/20"
          aria-label="Next slide"
        >
          <svg class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7"/>
          </svg>
        </button>
      </div>
    </div>

  </div>
</section>