Hero Three-Column Category

<section class="ws-hero ws-hero-three-column relative overflow-hidden bg-[var(--ws-hero-bg)]">
  <div class="flex min-h-screen flex-col lg:flex-row">

    <!-- Column 1 -->
    <div class="group relative flex flex-1 cursor-pointer flex-col items-center justify-center overflow-hidden p-10 text-center lg:min-h-screen">
      <!-- Background image placeholder -->
      <div class="absolute inset-0 bg-gradient-to-br from-violet-800 via-violet-600 to-purple-900 transition-transform duration-700 group-hover:scale-105"></div>
      <!-- Dark gradient overlay -->
      <div class="absolute inset-0 bg-gradient-to-t from-black/70 via-black/30 to-black/20"></div>
      <!-- Content -->
      <div class="relative z-10 flex flex-col items-center gap-4">
        <span class="inline-block rounded-full border border-white/30 px-3 py-1 text-xs font-semibold uppercase tracking-widest text-white/80">Category One</span>
        <h2 class="text-balance text-3xl font-bold tracking-tight text-white lg:text-4xl">Creative Design</h2>
        <p class="max-w-xs text-sm text-white/70">Bold visuals and immersive experiences for forward-thinking brands.</p>
        <a href="#" class="mt-2 inline-flex items-center gap-2 rounded-full bg-white px-5 py-2.5 text-sm font-semibold text-slate-900 transition hover:bg-slate-100"> <!-- ws-ok -->
          Explore
          <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M17 8l4 4m0 0l-4 4m4-4H3"/></svg>
        </a>
      </div>
    </div>

    <!-- Column 2 -->
    <div class="group relative flex flex-1 cursor-pointer flex-col items-center justify-center overflow-hidden p-10 text-center lg:min-h-screen">
      <div class="absolute inset-0 bg-gradient-to-br from-emerald-700 via-teal-600 to-cyan-800 transition-transform duration-700 group-hover:scale-105"></div>
      <div class="absolute inset-0 bg-gradient-to-t from-black/70 via-black/30 to-black/20"></div>
      <div class="relative z-10 flex flex-col items-center gap-4">
        <span class="inline-block rounded-full border border-white/30 px-3 py-1 text-xs font-semibold uppercase tracking-widest text-white/80">Category Two</span>
        <h2 class="text-balance text-3xl font-bold tracking-tight text-white lg:text-4xl">Digital Strategy</h2>
        <p class="max-w-xs text-sm text-white/70">Data-driven approaches that grow your audience and convert with precision.</p>
        <a href="#" class="mt-2 inline-flex items-center gap-2 rounded-full bg-white px-5 py-2.5 text-sm font-semibold text-slate-900 transition hover:bg-slate-100"> <!-- ws-ok -->
          Explore
          <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M17 8l4 4m0 0l-4 4m4-4H3"/></svg>
        </a>
      </div>
    </div>

    <!-- Column 3 -->
    <div class="group relative flex flex-1 cursor-pointer flex-col items-center justify-center overflow-hidden p-10 text-center lg:min-h-screen">
      <div class="absolute inset-0 bg-gradient-to-br from-orange-700 via-rose-600 to-pink-800 transition-transform duration-700 group-hover:scale-105"></div>
      <div class="absolute inset-0 bg-gradient-to-t from-black/70 via-black/30 to-black/20"></div>
      <div class="relative z-10 flex flex-col items-center gap-4">
        <span class="inline-block rounded-full border border-white/30 px-3 py-1 text-xs font-semibold uppercase tracking-widest text-white/80">Category Three</span>
        <h2 class="text-balance text-3xl font-bold tracking-tight text-white lg:text-4xl">Brand Identity</h2>
        <p class="max-w-xs text-sm text-white/70">Distinctive identities built for clarity, recognition, and long-term impact.</p>
        <a href="#" class="mt-2 inline-flex items-center gap-2 rounded-full bg-white px-5 py-2.5 text-sm font-semibold text-slate-900 transition hover:bg-slate-100"> <!-- ws-ok -->
          Explore
          <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M17 8l4 4m0 0l-4 4m4-4H3"/></svg>
        </a>
      </div>
    </div>

  </div>
</section>