Services & Capabilities Cards Section

<div class="md:py-24 max-w-6xl mr-auto ml-auto pt-16 pb-16">
  <div class="mb-12">
    <div class="flex items-center gap-3 mb-6">
      <span class="text-xs font-medium text-white/50 uppercase tracking-widest font-geist-mono" style="">Services</span>
      <div class="h-px flex-1 bg-white/10"></div>
    </div>
    <h2 class="text-3xl md:text-4xl font-semibold tracking-tight text-white mb-4" style="">What I do</h2>
    <p class="lg:text-lg leading-relaxed text-base text-neutral-300 mb-8 font-geist-mono" style="">From initial concept
      to final deployment, I provide comprehensive design and development services tailored to your needs.</p>
  </div>

  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
    <!-- Card 01 - Strategy & Planning -->
    <div
      class="group relative hover:bg-white/10 transition-all duration-500 overflow-hidden bg-white/5 border-white/10 border rounded-2xl">
      <!-- Preview canvas -->
      <div class="relative overflow-hidden bg-neutral-900/90 h-80 border-white/10 border rounded-xl">
        <!-- Layered background cards for depth -->

        <div
          class="pointer-events-none absolute right-2 top-12 bg-gradient-to-br from-white/5 to-transparent invisible w-[68%] h-[68%] border-white/5 border rounded-xl rotate-[8deg]"
          style="box-shadow: 0 20px 80px rgba(0,0,0,0.4);"></div>

        <!-- Main interface card -->
        <div
          class="relative z-10 mx-auto mt-6 w-[88%] h-[76%] rounded-xl bg-neutral-950 border border-white/15 shadow-[0_32px_80px_rgba(0,0,0,0.7)]">
          <!-- Top bar -->
          <div class="flex items-center justify-between p-4 border-b border-white/5">
            <div class="flex items-center gap-2">
              <div class="w-3 h-3 rounded-full bg-red-500/80"></div>
              <div class="w-3 h-3 rounded-full bg-yellow-500/80"></div>
              <div class="w-3 h-3 rounded-full bg-green-500/80"></div>
            </div>
            <p class="text-xs text-white/60 font-geist-mono" style="">Strategy Board</p>
          </div>

          <!-- Content area -->
          <div class="px-5 pt-4">
            <div class="space-y-3">
              <div class="h-2 w-8 rounded-full bg-emerald-400/60"></div>
              <div class="h-2 w-32 rounded-full bg-white/20"></div>
              <div class="h-10 w-full rounded-lg border border-white/10 bg-white/5 flex items-center px-3">
                <div class="w-6 h-2 rounded-full" style="background: linear-gradient(90deg, #FF6A1A 0%, #FF8A3A 100%);">
                </div>
              </div>
              <div class="grid grid-cols-3 gap-2 mt-4">
                <div class="h-12 rounded-lg bg-white/5 border border-white/10"></div>
                <div class="h-12 rounded-lg bg-emerald-400/10 border border-emerald-400/20"></div>
                <div class="h-12 rounded-lg bg-white/5 border border-white/10"></div>
              </div>
            </div>
          </div>

          <!-- Floating cursor -->
          <div class="absolute right-4 bottom-6 text-emerald-400 opacity-90">

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

      <!-- Content -->
      <div class="pt-6 pr-6 pb-6 pl-6">
        <div class="flex mb-4 items-center justify-between">
          <span class="text-lg font-semibold text-emerald-400 tracking-tight font-geist-mono" style="">01</span>

        </div>
        <h3 class="text-2xl font-semibold tracking-tight text-white mb-3" style="">Strategy &amp; Research</h3>
        <p class="text-white/60 leading-relaxed font-geist-mono text-sm" style="">I start by understanding your goals,
          researching your market, and crafting a strategic foundation for success.</p>
      </div>
    </div>

    <!-- Card 02 - Design & Prototyping -->
    <div
      class="group relative rounded-2xl border border-white/10 bg-white/5 hover:bg-white/10 transition-all duration-500 overflow-hidden">
      <!-- Preview canvas -->
      <div class="relative overflow-hidden bg-neutral-900/90 h-80 border-white/10 border rounded-xl">
        <!-- Layered background cards -->



        <!-- Main design interface -->
        <div
          class="relative z-10 bg-neutral-950 w-[88%] h-[76%] border-white/15 border rounded-xl mt-6 mr-auto ml-auto shadow-[0_32px_80px_rgba(0,0,0,0.7)]">
          <!-- Top bar -->
          <div class="flex border-white/5 border-b pt-4 pr-4 pb-4 pl-4 items-center justify-between">
            <div class="flex items-center gap-2">
              <div class="w-3 h-3 rounded-full bg-red-500/80"></div>
              <div class="w-3 h-3 rounded-full bg-yellow-500/80"></div>
              <div class="w-3 h-3 rounded-full bg-green-500/80"></div>
            </div>
            <p class="text-xs text-white/60 font-geist-mono" style="">Design System</p>
          </div>

          <!-- Design elements -->
          <div class="px-5 pt-4">
            <div class="space-y-4">
              <!-- Color palette -->
              <div class="flex items-center gap-3">
                <div class="w-4 h-4 rounded-full"
                  style="background: linear-gradient(135deg, #FF6A1A 0%, #FF8A3A 100%);"></div>
                <div class="w-4 h-4 rounded-full bg-emerald-400"></div>
                <div class="w-4 h-4 rounded-full bg-blue-400"></div>
                <div class="w-4 h-4 rounded-full bg-white/20"></div>
              </div>

              <!-- Components -->
              <div class="space-y-3">
                <div class="h-8 w-24 rounded-lg" style="background: linear-gradient(90deg, #FF6A1A 0%, #FF8A3A 100%);">
                </div>
                <div class="h-6 w-full rounded-lg bg-white/10"></div>
                <div class="flex gap-2">
                  <div class="h-4 w-16 rounded-full bg-white/20"></div>
                  <div class="h-4 w-12 rounded-full bg-emerald-400/30"></div>
                </div>
              </div>
            </div>
          </div>

          <!-- Design tools cursor -->
          <div class="absolute right-5 bottom-5 text-blue-400 opacity-90">

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

      <!-- Content -->
      <div class="p-6">
        <div class="flex items-center justify-between mb-4">
          <span class="text-blue-400 text-lg font-semibold tracking-tight font-geist-mono" style="">02</span>

        </div>
        <h3 class="text-2xl font-semibold tracking-tight text-white mb-3" style="">Design &amp; Prototyping</h3>
        <p class="text-white/60 leading-relaxed font-geist-mono text-sm" style="">Creating beautiful, functional designs
          with interactive prototypes that bring your vision to life.</p>
      </div>
    </div>

    <!-- Card 03 - Development & Launch -->
    <div
      class="group relative rounded-2xl border border-white/10 bg-white/5 hover:bg-white/10 transition-all duration-500 overflow-hidden">
      <!-- Preview canvas -->
      <div class="relative h-80 rounded-xl bg-neutral-900/90 border border-white/10 overflow-hidden">
        <!-- Layered background cards -->



        <!-- Main code interface -->
        <div
          class="relative z-10 bg-neutral-950 w-[88%] h-[76%] border-white/15 border rounded-xl mt-6 mr-auto ml-auto shadow-[0_32px_80px_rgba(0,0,0,0.7)]">
          <!-- Terminal-style header -->
          <div class="flex border-white/5 border-b pt-4 pr-4 pb-4 pl-4 items-center justify-between">
            <div class="flex items-center gap-2">
              <div class="w-3 h-3 rounded-full bg-red-500/80"></div>
              <div class="w-3 h-3 rounded-full bg-yellow-500/80"></div>
              <div class="w-3 h-3 rounded-full bg-green-500/80"></div>
            </div>
            <p class="text-xs text-white/60 font-geist-mono" style="">development.js</p>
          </div>

          <!-- Code-like content -->
          <div class="px-5 pt-4 space-y-3">
            <div class="flex items-center gap-2">
              <span class="text-xs text-emerald-400 font-geist-mono" style="">const</span>
              <div class="h-2 w-16 rounded-full bg-blue-400/60"></div>
              <div class="h-2 w-8 rounded-full bg-white/30"></div>
            </div>
            <div class="flex items-center gap-2">
              <div class="h-2 w-4 rounded-full bg-purple-400/60"></div>
              <div class="h-2 w-20 rounded-full bg-white/20"></div>
            </div>
            <div class="pl-4 space-y-2">
              <div
                class="h-8 w-full rounded-lg bg-gradient-to-r from-emerald-400/10 to-blue-400/10 border border-emerald-400/20">
              </div>
              <div class="flex gap-3">
                <div class="h-2 w-12 rounded-full"
                  style="background: linear-gradient(90deg, #FF6A1A 0%, #FF8A3A 100%);"></div>
                <div class="h-2 w-6 rounded-full bg-emerald-400/60"></div>
              </div>
            </div>

            <!-- Status indicator -->
            <div
              class="flex items-center gap-2 mt-4 px-3 py-2 rounded-lg bg-emerald-400/10 border border-emerald-400/20">
              <div class="w-2 h-2 rounded-full bg-emerald-400"></div>
              <span class="text-xs text-emerald-400 font-geist-mono" style="">Build successful</span>
            </div>
          </div>

          <!-- Code cursor -->
          <div class="absolute right-4 bottom-6 text-purple-400 opacity-90">

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

      <!-- Content -->
      <div class="p-6">
        <div class="flex items-center justify-between mb-4">
          <span class="text-purple-400 text-lg font-semibold tracking-tight font-geist-mono" style="">03</span>

        </div>
        <h3 class="text-2xl font-semibold tracking-tight text-white mb-3" style="">Development &amp; Launch</h3>
        <p class="text-white/60 leading-relaxed font-geist-mono text-sm" style="">Building high-performance, responsive
          experiences with clean code and seamless deployment.</p>
      </div>
    </div>
  </div>
</div>