Flip Card Base

<section class="ws-flip-card bg-gray-50" aria-label="Service flip cards">
  <div class="mx-auto max-w-6xl px-4 py-16 sm:py-24">
    <div class="text-center">
      <h2 class="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">What We Offer</h2>
      <p class="mt-2 text-lg text-gray-600">Hover over a card to learn more about our services.</p>
    </div>

    <div class="mt-12 grid gap-8 sm:grid-cols-2 lg:grid-cols-3">
      <!-- Card 1 — Indigo -->
      <div class="group perspective-1000 h-64">
        <div class="relative h-full w-full transition-transform duration-500 [transform-style:preserve-3d] group-hover:[transform:rotateY(180deg)]">
          <!-- Front -->
          <div class="absolute inset-0 flex flex-col items-center justify-center rounded-2xl bg-indigo-600 px-6 text-center [backface-visibility:hidden]">
            <svg class="h-12 w-12 text-indigo-200" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M12 18v-5.25m0 0a6.01 6.01 0 0 0 1.5-.189m-1.5.189a6.01 6.01 0 0 1-1.5-.189m3.75 7.478a12.06 12.06 0 0 1-4.5 0m3.75 2.383a14.406 14.406 0 0 1-3 0M14.25 18v-.192c0-.983.658-1.823 1.508-2.316a7.5 7.5 0 1 0-7.517 0c.85.493 1.509 1.333 1.509 2.316V18" /></svg>
            <h3 class="mt-4 text-xl font-bold text-white">Strategy</h3>
            <p class="mt-1 text-sm text-indigo-200">Data-driven growth plans</p>
          </div>
          <!-- Back -->
          <div class="absolute inset-0 flex flex-col items-center justify-center rounded-2xl border border-gray-200 bg-[var(--ws-color-surface)] px-6 text-center [backface-visibility:hidden] [transform:rotateY(180deg)]">
            <p class="text-sm leading-relaxed text-gray-600">We craft comprehensive strategies backed by market research and analytics to help your business scale sustainably and outperform competitors.</p>
            <a href="#strategy" class="mt-4 text-sm font-semibold text-indigo-600 hover:text-indigo-500">Learn more &rarr;</a>
          </div>
        </div>
      </div>

      <!-- Card 2 — Emerald -->
      <div class="group perspective-1000 h-64">
        <div class="relative h-full w-full transition-transform duration-500 [transform-style:preserve-3d] group-hover:[transform:rotateY(180deg)]">
          <!-- Front -->
          <div class="absolute inset-0 flex flex-col items-center justify-center rounded-2xl bg-emerald-600 px-6 text-center [backface-visibility:hidden]">
            <svg class="h-12 w-12 text-emerald-200" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M17.25 6.75 22.5 12l-5.25 5.25m-10.5 0L1.5 12l5.25-5.25m7.5-3-4.5 16.5" /></svg>
            <h3 class="mt-4 text-xl font-bold text-white">Development</h3>
            <p class="mt-1 text-sm text-emerald-200">Modern web applications</p>
          </div>
          <!-- Back -->
          <div class="absolute inset-0 flex flex-col items-center justify-center rounded-2xl border border-gray-200 bg-[var(--ws-color-surface)] px-6 text-center [backface-visibility:hidden] [transform:rotateY(180deg)]">
            <p class="text-sm leading-relaxed text-gray-600">From responsive frontends to robust APIs, we build performant web applications using cutting-edge technologies like Astro, Svelte, and Tailwind CSS.</p>
            <a href="#development" class="mt-4 text-sm font-semibold text-emerald-600 hover:text-emerald-500">Learn more &rarr;</a>
          </div>
        </div>
      </div>

      <!-- Card 3 — Amber -->
      <div class="group perspective-1000 h-64">
        <div class="relative h-full w-full transition-transform duration-500 [transform-style:preserve-3d] group-hover:[transform:rotateY(180deg)]">
          <!-- Front -->
          <div class="absolute inset-0 flex flex-col items-center justify-center rounded-2xl bg-amber-600 px-6 text-center [backface-visibility:hidden]">
            <svg class="h-12 w-12 text-amber-200" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M3.75 3v11.25A2.25 2.25 0 0 0 6 16.5h2.25M3.75 3h-1.5m1.5 0h16.5m0 0h1.5m-1.5 0v11.25A2.25 2.25 0 0 1 18 16.5h-2.25m-7.5 0h7.5m-7.5 0-1 3m8.5-3 1 3m0 0 .5 1.5m-.5-1.5h-9.5m0 0-.5 1.5M9 11.25v1.5M12 9v3.75m3-6v6" /></svg>
            <h3 class="mt-4 text-xl font-bold text-white">Design</h3>
            <p class="mt-1 text-sm text-amber-200">Beautiful user experiences</p>
          </div>
          <!-- Back -->
          <div class="absolute inset-0 flex flex-col items-center justify-center rounded-2xl border border-gray-200 bg-[var(--ws-color-surface)] px-6 text-center [backface-visibility:hidden] [transform:rotateY(180deg)]">
            <p class="text-sm leading-relaxed text-gray-600">Our design team creates intuitive interfaces and memorable brand experiences that delight users and drive engagement across every touchpoint.</p>
            <a href="#design" class="mt-4 text-sm font-semibold text-amber-600 hover:text-amber-500">Learn more &rarr;</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>