Responsive Services Section with Gradient Cards

<section
  class="sm:p-8 relative 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">
    <span class="inline-flex items-center gap-2 text-sm">
      <span class="text-4xl font-medium text-white">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">what we offer</span>
  </div>
  <div class="h-px bg-white/10 mt-4"></div>

  <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mt-6 sm:mt-8">
    <!-- Service 1: Web Design & Development -->
    <div
      class="group relative overflow-hidden rounded-2xl border border-white/10 bg-gradient-to-br from-neutral-900/80 to-neutral-950/80 p-6 hover:border-white/20 transition-all duration-300">
      <div
        class="absolute inset-0 bg-gradient-to-br from-blue-500/5 via-transparent to-cyan-500/5 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
      </div>
      <div class="relative">
        <div class="flex items-center gap-4 mb-4">
          <div class="h-12 w-12 rounded-lg bg-blue-500/10 flex items-center justify-center">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
              stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
              class="lucide lucide-code w-6 h-6 text-blue-400">
              <path d="m16 18 6-6-6-6" class=""></path>
              <path d="m8 6-6 6 6 6" class=""></path>
            </svg>
          </div>
          <div>
            <h3 class="text-lg font-semibold text-white">Web Design &amp; Development</h3>
            <p class="text-sm text-neutral-400">From $2,500</p>
          </div>
        </div>
        <p class="text-sm text-neutral-300 mb-6">Custom websites and web applications built with modern frameworks and
          optimized for performance, SEO, and user experience.</p>
        <ul class="space-y-2 mb-6">
          <li class="flex items-center gap-2 text-sm text-neutral-300">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
              stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
              class="lucide lucide-check w-4 h-4 text-emerald-400">
              <path d="M20 6 9 17l-5-5" class=""></path>
            </svg>
            Responsive design
          </li>
          <li class="flex items-center gap-2 text-sm text-neutral-300">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
              stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
              class="lucide lucide-check w-4 h-4 text-emerald-400">
              <path d="M20 6 9 17l-5-5" class=""></path>
            </svg>
            Performance optimization
          </li>
          <li class="flex items-center gap-2 text-sm text-neutral-300">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
              stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
              class="lucide lucide-check w-4 h-4 text-emerald-400">
              <path d="M20 6 9 17l-5-5" class=""></path>
            </svg>
            SEO implementation
          </li>
          <li class="flex items-center gap-2 text-sm text-neutral-300">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
              stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
              class="lucide lucide-check w-4 h-4 text-emerald-400">
              <path d="M20 6 9 17l-5-5" class=""></path>
            </svg>
            CMS integration
          </li>
        </ul>
        <button class="inline-flex items-center gap-2 text-sm text-blue-400 hover:text-blue-300 transition-colors">
          Learn more
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-right w-4 h-4">
            <path d="M5 12h14" class=""></path>
            <path d="m12 5 7 7-7 7" class=""></path>
          </svg>
        </button>
      </div>
    </div>

    <!-- Service 2: Mobile App Development -->
    <div
      class="group relative overflow-hidden rounded-2xl border border-white/10 bg-gradient-to-br from-neutral-900/80 to-neutral-950/80 p-6 hover:border-white/20 transition-all duration-300">
      <div
        class="absolute inset-0 bg-gradient-to-br from-purple-500/5 via-transparent to-pink-500/5 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
      </div>
      <div class="relative">
        <div class="flex items-center gap-4 mb-4">
          <div class="h-12 w-12 rounded-lg bg-purple-500/10 flex items-center justify-center">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
              stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
              class="lucide lucide-smartphone w-6 h-6 text-purple-400">
              <rect width="14" height="20" x="5" y="2" rx="2" ry="2" class=""></rect>
              <path d="M12 18h.01" class=""></path>
            </svg>
          </div>
          <div>
            <h3 class="text-lg font-semibold text-white">Mobile App Development</h3>
            <p class="text-sm text-neutral-400">From $5,000</p>
          </div>
        </div>
        <p class="text-sm text-neutral-300 mb-6">Native and cross-platform mobile applications for iOS and Android with
          seamless user experiences and robust functionality.</p>
        <ul class="space-y-2 mb-6">
          <li class="flex items-center gap-2 text-sm text-neutral-300">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
              stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
              class="lucide lucide-check w-4 h-4 text-emerald-400">
              <path d="M20 6 9 17l-5-5" class=""></path>
            </svg>
            iOS &amp; Android
          </li>
          <li class="flex items-center gap-2 text-sm text-neutral-300">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
              stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
              class="lucide lucide-check w-4 h-4 text-emerald-400">
              <path d="M20 6 9 17l-5-5" class=""></path>
            </svg>
            App Store deployment
          </li>
          <li class="flex items-center gap-2 text-sm text-neutral-300">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
              stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
              class="lucide lucide-check w-4 h-4 text-emerald-400">
              <path d="M20 6 9 17l-5-5" class=""></path>
            </svg>
            Push notifications
          </li>
          <li class="flex items-center gap-2 text-sm text-neutral-300">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
              stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
              class="lucide lucide-check w-4 h-4 text-emerald-400">
              <path d="M20 6 9 17l-5-5" class=""></path>
            </svg>
            API integration
          </li>
        </ul>
        <button class="inline-flex items-center gap-2 text-sm text-purple-400 hover:text-purple-300 transition-colors">
          Learn more
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 " stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-right w-4 h-4">
            <path d="M5 12h14" class=""></path>
            <path d="m12 5 7 7-7 7" class=""></path>
          </svg>
        </button>
      </div>
    </div>

    <!-- Service 3: Brand Identity -->
    <div
      class="group relative overflow-hidden rounded-2xl border border-white/10 bg-gradient-to-br from-neutral-900/80 to-neutral-950/80 p-6 hover:border-white/20 transition-all duration-300">
      <div
        class="absolute inset-0 bg-gradient-to-br from-amber-500/5 via-transparent to-orange-500/5 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
      </div>
      <div class="relative">
        <div class="flex items-center gap-4 mb-4">
          <div class="h-12 w-12 rounded-lg bg-amber-500/10 flex items-center justify-center">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
              stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
              class="lucide lucide-palette w-6 h-6 text-amber-400">
              <path
                d="M12 22a1 1 0 0 1 0-20 10 9 0 0 1 10 9 5 5 0 0 1-5 5h-2.25a1.75 1.75 0 0 0-1.4 2.8l.3.4a1.75 1.75 0 0 1-1.4 2.8z"
                class=""></path>
              <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="6.5" cy="12.5" r=".5" fill="currentColor" class=""></circle>
              <circle cx="8.5" cy="7.5" r=".5" fill="currentColor" class=""></circle>
            </svg>
          </div>
          <div class="">
            <h3 class="text-lg font-semibold text-white">Brand Identity Design</h3>
            <p class="text-sm text-neutral-400">From $1,500</p>
          </div>
        </div>
        <p class="text-sm text-neutral-300 mb-6">Complete brand identity systems including logos, color palettes,
          typography, and brand guidelines that capture your vision.</p>
        <ul class="space-y-2 mb-6">
          <li class="flex items-center gap-2 text-sm text-neutral-300">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
              stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
              class="lucide lucide-check w-4 h-4 text-emerald-400">
              <path d="M20 6 9 17l-5-5" class=""></path>
            </svg>
            Logo design
          </li>
          <li class="flex items-center gap-2 text-sm text-neutral-300">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
              stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
              class="lucide lucide-check w-4 h-4 text-emerald-400">
              <path d="M20 6 9 17l-5-5" class=""></path>
            </svg>
            Color palette
          </li>
          <li class="flex items-center gap-2 text-sm text-neutral-300">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
              stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
              class="lucide lucide-check w-4 h-4 text-emerald-400">
              <path d="M20 6 9 17l-5-5" class=""></path>
            </svg>
            Typography system
          </li>
          <li class="flex items-center gap-2 text-sm text-neutral-300">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
              stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
              class="lucide lucide-check w-4 h-4 text-emerald-400">
              <path d="M20 6 9 17l-5-5" class=""></path>
            </svg>
            Brand guidelines
          </li>
        </ul>
        <button class="inline-flex items-center gap-2 text-sm text-amber-400 hover:text-amber-300 transition-colors">
          Learn more
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-right w-4 h-4">
            <path d="M5 12h14" class=""></path>
            <path d="m12 5 7 7-7 7" class=""></path>
          </svg>
        </button>
      </div>
    </div>

    <!-- Service 4: Digital Strategy -->
    <div
      class="group relative overflow-hidden rounded-2xl border border-white/10 bg-gradient-to-br from-neutral-900/80 to-neutral-950/80 p-6 hover:border-white/20 transition-all duration-300">
      <div
        class="absolute inset-0 bg-gradient-to-br from-emerald-500/5 via-transparent to-teal-500/5 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
      </div>
      <div class="relative">
        <div class="flex items-center gap-4 mb-4">
          <div class="h-12 w-12 rounded-lg bg-emerald-500/10 flex items-center justify-center">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
              stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
              class="lucide lucide-trending-up w-6 h-6 text-emerald-400">
              <path d="M16 7h6v6" class=""></path>
              <path d="m22 7-8.5 8.5-5-5L2 17" class=""></path>
            </svg>
          </div>
          <div class="">
            <h3 class="text-lg font-semibold text-white">Digital Strategy</h3>
            <p class="text-sm text-neutral-400">From $3,000</p>
          </div>
        </div>
        <p class="text-sm text-neutral-300 mb-6">Strategic planning and consulting to help you navigate the digital
          landscape and achieve your business goals.</p>
        <ul class="space-y-2 mb-6">
          <li class="flex items-center gap-2 text-sm text-neutral-300">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
              stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
              class="lucide lucide-check w-4 h-4 text-emerald-400">
              <path d="M20 6 9 17l-5-5" class=""></path>
            </svg>
            Market research
          </li>
          <li class="flex items-center gap-2 text-sm text-neutral-300">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
              stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
              class="lucide lucide-check w-4 h-4 text-emerald-400">
              <path d="M20 6 9 17l-5-5" class=""></path>
            </svg>
            User journey mapping
          </li>
          <li class="flex items-center gap-2 text-sm text-neutral-300">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
              stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
              class="lucide lucide-check w-4 h-4 text-emerald-400">
              <path d="M20 6 9 17l-5-5" class=""></path>
            </svg>
            Growth planning
          </li>
          <li class="flex items-center gap-2 text-sm text-neutral-300">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
              stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
              class="lucide lucide-check w-4 h-4 text-emerald-400">
              <path d="M20 6 9 17l-5-5" class=""></path>
            </svg>
            KPI tracking
          </li>
        </ul>
        <button class="inline-flex items-center gap-2 text-sm text-emerald-400 hover:text-emerald-300 transition-colors">
          Learn more
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-right w-4 h-4">
            <path d="M5 12h14" class=""></path>
            <path d="m12 5 7 7-7 7" class=""></path>
          </svg>
        </button>
      </div>
    </div>
  </div>

  <!-- CTA Section -->

</section>