Animated Service Pricing Cards Grid Section

<section
  class="relative z-10 sm:p-8 animate-scaleIn animation-delay-300 bg-zinc-950/60 w-full max-w-7xl border-white/10 border rounded-3xl mt-16 mr-auto ml-auto pt-6 pr-6 pb-6 pl-6 backdrop-blur">
  <div class="grid grid-cols-1 lg:grid-cols-3 gap-8 stagger-animation">

    <!-- Web Development -->
    <div class="bg-zinc-900/60 border border-white/10 rounded-2xl p-8 hover-lift group">
      <div
        class="w-16 h-16 rounded-2xl bg-blue-500/10 border border-blue-500/20 flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
        <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none"
          stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"
          class="lucide lucide-code text-blue-400">
          <polyline points="16,18 22,12 16,6" class=""></polyline>
          <polyline points="8,6 2,12 8,18" class=""></polyline>
        </svg>
      </div>

      <h3 class="text-2xl font-medium text-white mb-4 tracking-tight">Web Development</h3>
      <p class="text-neutral-400 mb-6 leading-relaxed">Modern, responsive websites and web applications built with the
        latest technologies and best practices.</p>

      <div class="space-y-3 mb-8">
        <div class="flex items-center gap-3 text-sm text-neutral-300">
          <div class="w-1.5 h-1.5 rounded-full bg-blue-400"></div>
          <span>React &amp; Next.js Applications</span>
        </div>
        <div class="flex items-center gap-3 text-sm text-neutral-300">
          <div class="w-1.5 h-1.5 rounded-full bg-blue-400"></div>
          <span>Custom WordPress Solutions</span>
        </div>
        <div class="flex items-center gap-3 text-sm text-neutral-300">
          <div class="w-1.5 h-1.5 rounded-full bg-blue-400"></div>
          <span>E-commerce Platforms</span>
        </div>
        <div class="flex items-center gap-3 text-sm text-neutral-300">
          <div class="w-1.5 h-1.5 rounded-full bg-blue-400"></div>
          <span>API Integration &amp; Development</span>
        </div>
      </div>

      <div class="text-2xl font-semibold text-white mb-2">Starting at $3,500</div>
      <p class="text-xs text-neutral-500">Timeline: 2-6 weeks</p>
    </div>

    <!-- UI/UX Design -->
    <div class="bg-zinc-900/60 border border-white/10 rounded-2xl p-8 hover-lift group">
      <div
        class="w-16 h-16 rounded-2xl bg-purple-500/10 border border-purple-500/20 flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
        <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none"
          stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"
          class="lucide lucide-palette text-purple-400">
          <circle cx="13.5" cy="6.5" r=".5" fill="currentColor" class=""></circle>
          <circle cx="17.5" cy="10.5" r=".5" fill="currentColor" class=""></circle>
          <circle cx="8.5" cy="7.5" r=".5" fill="currentColor" class=""></circle>
          <circle cx="6.5" cy="12.5" r=".5" fill="currentColor" class=""></circle>
          <path
            d="M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10c.926 0 1.648-.746 1.648-1.688 0-.437-.18-.835-.437-1.125-.29-.289-.438-.652-.438-1.125a1.64 1.64 0 0 1 1.668-1.668h1.996c3.051 0 5.555-2.503 5.555-5.554C21.965 6.012 17.461 2 12 2z"
            class=""></path>
        </svg>
      </div>

      <h3 class="text-2xl font-medium text-white mb-4 tracking-tight">UI/UX Design</h3>
      <p class="text-neutral-400 mb-6 leading-relaxed">User-centered design solutions that create meaningful experiences
        and drive engagement.</p>

      <div class="space-y-3 mb-8">
        <div class="flex items-center gap-3 text-sm text-neutral-300">
          <div class="w-1.5 h-1.5 rounded-full bg-purple-400"></div>
          <span>User Research &amp; Strategy</span>
        </div>
        <div class="flex items-center gap-3 text-sm text-neutral-300">
          <div class="w-1.5 h-1.5 rounded-full bg-purple-400"></div>
          <span>Wireframing &amp; Prototyping</span>
        </div>
        <div class="flex items-center gap-3 text-sm text-neutral-300">
          <div class="w-1.5 h-1.5 rounded-full bg-purple-400"></div>
          <span>Visual Interface Design</span>
        </div>
        <div class="flex items-center gap-3 text-sm text-neutral-300">
          <div class="w-1.5 h-1.5 rounded-full bg-purple-400"></div>
          <span>Design System Creation</span>
        </div>
      </div>

      <div class="text-2xl font-semibold text-white mb-2">Starting at $2,500</div>
      <p class="text-xs text-neutral-500">Timeline: 1-4 weeks</p>
    </div>

    <!-- Brand Identity -->
    <div class="bg-zinc-900/60 border border-white/10 rounded-2xl p-8 hover-lift group">
      <div
        class="w-16 h-16 rounded-2xl bg-emerald-500/10 border border-emerald-500/20 flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
        <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none"
          stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"
          class="lucide lucide-zap text-emerald-400">
          <path
            d="M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z"
            class=""></path>
        </svg>
      </div>

      <h3 class="text-2xl font-medium text-white mb-4 tracking-tight">Brand Identity</h3>
      <p class="text-neutral-400 mb-6 leading-relaxed">Complete brand identity solutions that capture your essence and
        resonate with your audience.</p>

      <div class="space-y-3 mb-8">
        <div class="flex items-center gap-3 text-sm text-neutral-300">
          <div class="w-1.5 h-1.5 rounded-full bg-emerald-400"></div>
          <span>Logo Design &amp; Brand Mark</span>
        </div>
        <div class="flex items-center gap-3 text-sm text-neutral-300">
          <div class="w-1.5 h-1.5 rounded-full bg-emerald-400"></div>
          <span>Brand Guidelines</span>
        </div>
        <div class="flex items-center gap-3 text-sm text-neutral-300">
          <div class="w-1.5 h-1.5 rounded-full bg-emerald-400"></div>
          <span>Marketing Collateral</span>
        </div>
        <div class="flex items-center gap-3 text-sm text-neutral-300">
          <div class="w-1.5 h-1.5 rounded-full bg-emerald-400"></div>
          <span>Digital Asset Library</span>
        </div>
      </div>

      <div class="text-2xl font-semibold text-white mb-2">Starting at $4,000</div>
      <p class="text-xs text-neutral-500">Timeline: 3-6 weeks</p>
    </div>
  </div>
</section>