Services Offerings Grid Section

<section
  class="relative z-10 sm:p-8 animate-scaleIn animation-delay-500 bg-zinc-950/60 w-full max-w-7xl border-white/10 border rounded-3xl mt-24 mr-auto ml-auto pt-6 pr-6 pb-6 pl-6 backdrop-blur">
  <!-- Header -->
  <div class="flex gap-6 sm:px-0 pr-1 pl-1 items-center animate-fadeInUp">
    <span class="inline-flex items-center gap-2 text-sm">
      <span class="text-4xl font-medium text-white">Additional Services</span>
    </span>
    <span aria-hidden="true" role="separator" aria-orientation="vertical" class="w-px h-10 bg-white/10"></span>
    <span class="text-sm text-neutral-300">specialized solutions</span>
  </div>
  <div class="h-px bg-white/10 mt-4 animate-fadeIn animation-delay-100"></div>

  <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mt-8 stagger-animation">

    <!-- Consulting -->
    <div class="bg-zinc-900/60 border border-white/10 rounded-2xl p-6 hover:bg-zinc-800/60 transition-colors">
      <div class="flex items-start gap-4">
        <div
          class="w-12 h-12 rounded-xl bg-cyan-500/10 border border-cyan-500/20 flex items-center justify-center flex-shrink-0">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
            stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"
            class="lucide lucide-lightbulb text-cyan-400">
            <path d="M9 18h6v-3a3 3 0 0 0-6 0v3Z" class=""></path>
            <path d="M15.09 7A6 6 0 1 1 8.91 7" class=""></path>
            <circle cx="12" cy="2" r="1" class=""></circle>
          </svg>
        </div>
        <div class="flex-1">
          <h3 class="text-lg font-medium text-white mb-2">Design &amp; Development Consulting</h3>
          <p class="text-sm text-neutral-400 mb-4">Strategic guidance for your digital initiatives, technical reviews,
            and optimization recommendations.</p>
          <div class="flex items-center justify-between">
            <span class="text-white font-medium">$150/hour</span>
            <span class="text-xs text-neutral-500">Flexible scheduling</span>
          </div>
        </div>
      </div>
    </div>

    <!-- Maintenance -->
    <div class="bg-zinc-900/60 border border-white/10 rounded-2xl p-6 hover:bg-zinc-800/60 transition-colors">
      <div class="flex items-start gap-4">
        <div
          class="w-12 h-12 rounded-xl bg-orange-500/10 border border-orange-500/20 flex items-center justify-center flex-shrink-0">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
            stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"
            class="lucide lucide-wrench text-orange-400">
            <path
              d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"
              class=""></path>
          </svg>
        </div>
        <div class="flex-1">
          <h3 class="text-lg font-medium text-white mb-2">Website Maintenance &amp; Support</h3>
          <p class="text-sm text-neutral-400 mb-4">Ongoing maintenance, updates, security monitoring, and technical
            support for your digital assets.</p>
          <div class="flex items-center justify-between">
            <span class="text-white font-medium">From $300/month</span>
            <span class="text-xs text-neutral-500">Retainer packages</span>
          </div>
        </div>
      </div>
    </div>

    <!-- Training -->
    <div class="bg-zinc-900/60 border border-white/10 rounded-2xl p-6 hover:bg-zinc-800/60 transition-colors">
      <div class="flex items-start gap-4">
        <div
          class="w-12 h-12 rounded-xl bg-pink-500/10 border border-pink-500/20 flex items-center justify-center flex-shrink-0">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
            stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"
            class="lucide lucide-graduation-cap text-pink-400">
            <path
              d="M21.42 10.922a1 1 0 0 0-.019-1.838L12.83 5.18a2 2 0 0 0-1.66 0L2.6 9.08a1 1 0 0 0 0 1.832l8.57 3.908a2 2 0 0 0 1.66 0z"
              class=""></path>
            <path d="M22 10v6" class=""></path>
            <path d="M6 12.5V16a6 3 0 0 0 12 0v-3.5" class=""></path>
          </svg>
        </div>
        <div class="flex-1">
          <h3 class="text-lg font-medium text-white mb-2">Team Training &amp; Workshops</h3>
          <p class="text-sm text-neutral-400 mb-4">Custom training sessions for your team on design systems, development
            workflows, and best practices.</p>
          <div class="flex items-center justify-between">
            <span class="text-white font-medium">Custom pricing</span>
            <span class="text-xs text-neutral-500">Group sessions</span>
          </div>
        </div>
      </div>
    </div>

    <!-- Performance -->
    <div class="bg-zinc-900/60 border border-white/10 rounded-2xl p-6 hover:bg-zinc-800/60 transition-colors">
      <div class="flex items-start gap-4">
        <div
          class="w-12 h-12 rounded-xl bg-indigo-500/10 border border-indigo-500/20 flex items-center justify-center flex-shrink-0">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
            stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"
            class="lucide lucide-zap text-indigo-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>
        <div class="flex-1">
          <h3 class="text-lg font-medium text-white mb-2">Performance Optimization</h3>
          <p class="text-sm text-neutral-400 mb-4">Speed optimization, SEO improvements, and performance audits to
            maximize your site's potential.</p>
          <div class="flex items-center justify-between">
            <span class="text-white font-medium">Starting at $1,200</span>
            <span class="text-xs text-neutral-500">1-2 weeks</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>