Services Tabbed

<section class="ws-services-tabbed bg-[var(--ws-color-surface)] py-16">
  <div class="mx-auto max-w-6xl px-6">
    <h2 class="mb-10 text-3xl font-bold text-slate-900">Our Services</h2>

    <div class="grid gap-8 lg:grid-cols-2">
      <!-- Tab list (left) -->
      <div class="space-y-2" role="tablist">
        <button role="tab" aria-selected="true" class="flex w-full items-center gap-4 rounded-xl bg-[var(--ws-color-surface-alt)] p-5 text-left text-white transition">
          <span class="text-2xl font-bold text-white/30">01</span>
          <div>
            <h3 class="text-base font-semibold">UI/UX Design</h3>
            <p class="mt-1 text-sm text-white/70">Research-driven design that puts users first and converts visitors into customers.</p>
          </div>
        </button>
        <button role="tab" aria-selected="false" class="flex w-full items-center gap-4 rounded-xl border border-slate-200 bg-[var(--ws-color-surface)] p-5 text-left transition hover:border-slate-300 dark:hover:border-slate-600">
          <span class="text-2xl font-bold text-slate-200">02</span>
          <div>
            <h3 class="text-base font-semibold text-slate-900">Web Development</h3>
            <p class="mt-1 text-sm text-slate-500">Modern, performant web applications built with the latest technologies.</p>
          </div>
        </button>
        <button role="tab" aria-selected="false" class="flex w-full items-center gap-4 rounded-xl border border-slate-200 bg-[var(--ws-color-surface)] p-5 text-left transition hover:border-slate-300 dark:hover:border-slate-600">
          <span class="text-2xl font-bold text-slate-200">03</span>
          <div>
            <h3 class="text-base font-semibold text-slate-900">Brand Strategy</h3>
            <p class="mt-1 text-sm text-slate-500">Crafting distinctive brand identities that resonate with your target audience.</p>
          </div>
        </button>
        <button role="tab" aria-selected="false" class="flex w-full items-center gap-4 rounded-xl border border-slate-200 bg-[var(--ws-color-surface)] p-5 text-left transition hover:border-slate-300 dark:hover:border-slate-600">
          <span class="text-2xl font-bold text-slate-200">04</span>
          <div>
            <h3 class="text-base font-semibold text-slate-900">Digital Marketing</h3>
            <p class="mt-1 text-sm text-slate-500">Data-driven campaigns that drive growth and maximize ROI.</p>
          </div>
        </button>
      </div>

      <!-- Preview panel (right) -->
      <div role="tabpanel" class="flex flex-col justify-center">
        <div class="aspect-[4/3] rounded-2xl bg-gradient-to-br from-blue-100 to-indigo-200 dark:from-blue-900/30 dark:to-indigo-900/30"></div>
        <div class="mt-6">
          <div class="flex h-12 w-12 items-center justify-center rounded-xl bg-blue-100">
            <svg class="h-6 w-6 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-width="2" d="M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2.343M11 7.343l1.657-1.657a2 2 0 012.828 0l2.829 2.829a2 2 0 010 2.828l-8.486 8.485M7 17h.01"/></svg>
          </div>
          <h3 class="mt-3 text-xl font-bold text-slate-900">UI/UX Design</h3>
          <p class="mt-2 text-sm text-slate-600">We create intuitive, beautiful interfaces backed by user research and testing. From wireframes to high-fidelity prototypes, every pixel serves a purpose.</p>
          <a href="#" class="mt-4 inline-flex items-center gap-1 text-sm font-medium text-blue-600 hover:gap-2 transition-all">Learn more <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"/></svg></a>
        </div>
      </div>
    </div>
  </div>
</section>