Animated Services Showcase Section with CTAs

<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">Services</span>
    </span>
    <span aria-hidden="true" role="separator" aria-orientation="vertical" class="w-px bg-white/10 h-10"></span>
    <span class="text-sm text-neutral-300">what we offer</span>
  </div>
  <div class="h-px bg-white/10 mt-4 animate-fadeIn animation-delay-100"></div>

  <div class="grid grid-cols-1 lg:grid-cols-12 items-center gap-8 sm:gap-10 mt-6 sm:mt-8">
    <!-- Left content -->
    <div class="lg:col-span-6 animate-fadeInLeft animation-delay-200">
      <!-- Headline -->
      <h1 class="text-[44px] sm:text-6xl md:text-7xl leading-[1.05] font-light text-zinc-100 tracking-tighter">Let's Build Something Extraordinary</h1>

      <!-- Divider -->
      <div class="h-px bg-white/10 mt-6 animate-fadeIn animation-delay-300"></div>

      <!-- Service 1 -->
      <div class="mt-6 animate-fadeInUp animation-delay-400">
        <div class="flex items-center gap-3">
          <h3 class="text-2xl sm:text-3xl text-zinc-100 font-sans font-light tracking-tighter">Creative
            Development</h3>
          <span class="inline-flex items-center rounded-full px-3 py-1 text-sm text-zinc-200 bg-white/5 ring-1 ring-white/10 font-sans hover:bg-white/10 transition-colors duration-200">Starting at $2,999</span>
        </div>
        <p class="text-zinc-400 text-sm sm:text-base mt-3 font-sans">Crafting digital experiences that captivate and
          convert your audience</p>
      </div>

      <!-- Divider -->
      <div class="h-px bg-white/10 mt-6 animate-fadeIn animation-delay-500"></div>

      <!-- Service 2 -->
      <div class="mt-6 animate-fadeInUp animation-delay-600">
        <div class="flex items-center gap-3">
          <h3 class="text-2xl sm:text-3xl text-zinc-100 font-sans font-light tracking-tighter">Full-Stack
            Solutions</h3>
          <span class="inline-flex items-center rounded-full px-3 py-1 text-sm text-zinc-200 bg-white/5 ring-1 ring-white/10 font-sans hover:bg-white/10 transition-colors duration-200">Starting at $5,999</span>
        </div>
        <p class="text-zinc-400 text-sm sm:text-base mt-3 font-sans">Complete digital solutions from strategy to
          deployment and beyond.</p>
      </div>

      <!-- CTAs -->
      <div class="flex gap-6 animate-fadeInUp animation-delay-500 mt-5 items-center">
  <a href="#work" style="align-items: center; background-image: linear-gradient(144deg, rgb(175, 64, 255), rgb(91, 66, 243) 50%, rgb(0, 221, 235)); border: 0px; border-radius: 8px; box-shadow: rgba(151, 65, 252, 0.2) 0px 15px 30px -5px; box-sizing: border-box; color: rgb(255, 255, 255); display: inline-flex; font-size: 14px; justify-content: center; line-height: 1em; max-width: 100%; min-width: auto; padding: 3px; text-decoration: none; user-select: none; touch-action: manipulation; white-space: nowrap; cursor: pointer; height: 50px; margin-top: 1rem; transform: scale(1); width: auto;" onmouseover="this.querySelector('span').style.background='none'" onmouseout="this.querySelector('span').style.backgroundColor='rgb(5, 6, 45)'" onmousedown="this.style.transform='scale(0.9)'" onmouseup="this.style.transform='scale(1)'" class="">
    <span style="background: none rgb(5, 6, 45); padding: 16px 24px; border-radius: 6px; display: flex; align-items: center; justify-content: center; gap: 0.5rem;" class="">View work</span>
  </a>
  <a href="#pricing" style="align-items: center; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 8px; box-shadow: rgba(255, 255, 255, 0.05) 0px 1px 0px inset; box-sizing: border-box; color: rgb(255, 255, 255); display: inline-flex; font-size: 14px; justify-content: center; line-height: 1em; max-width: 100%; min-width: auto; padding: 3px; text-decoration: none; user-select: none; touch-action: manipulation; white-space: nowrap; cursor: pointer; height: 50px; margin-top: 1rem; transform: scale(1); width: auto;" onmouseover="this.style.backgroundColor='rgba(255, 255, 255, 0.1)'" onmouseout="this.style.backgroundColor='rgba(255, 255, 255, 0.05)'" onmousedown="this.style.transform='scale(0.9)'" onmouseup="this.style.transform='scale(1)'" class="">
    <span style="padding: 16px 24px; border-radius: 6px; display: flex; align-items: center; justify-content: center; gap: 0.5rem;" class="">Start project<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-right" style="width: 16px; height: 16px;"><path d="M5 12h14" class=""></path><path d="m12 5 7 7-7 7" class=""></path></svg></span>
  </a>
</div>
    </div>

    <!-- Right showcase -->
    <div class="lg:col-span-6 animate-fadeInRight animation-delay-300">
      <div class="relative mx-auto w-full max-w-[860px] hover-lift" style="filter: drop-shadow(0 20px 60px rgba(0,0,0,0.6));">
        <!-- Outer frame -->
        <div class="rounded-[28px] bg-neutral-900/60 ring-1 ring-white/10 p-3">
          <!-- Inner "screen" -->
          <div class="relative overflow-hidden rounded-[22px] bg-neutral-950 border border-white/10">
            <!-- Browser bar -->
            <div class="flex items-center gap-2 px-4 py-3 border-b border-white/10">
              <span class="h-3 w-3 rounded-full bg-zinc-700"></span>
              <span class="h-3 w-3 rounded-full bg-zinc-700/70"></span>
              <span class="h-3 w-3 rounded-full bg-zinc-700/50"></span>
            </div>

            <!-- Gallery grid -->
            <div class="p-4 sm:p-6">
              <div class="grid grid-cols-2 md:grid-cols-3 gap-3 sm:gap-4 stagger-animation">
                <div class="relative overflow-hidden rounded-xl border border-white/10 bg-neutral-900 hover:scale-105 transition-transform duration-300">
                  <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/e5607922-3e3a-4da8-958a-13f3bb19c07c_320w.jpg" alt="Project preview 1" class="w-full h-full object-cover opacity-90">
                  <div class="absolute inset-0 bg-gradient-to-b from-black/0 via-black/20 to-black/50"></div>
                </div>
                <div class="relative overflow-hidden rounded-xl border border-white/10 bg-neutral-900 hover:scale-105 transition-transform duration-300">
                  <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/c7939795-f326-4a4c-9541-6cd5ee24e793_320w.jpg" alt="Project preview 2" class="w-full h-full object-cover opacity-90">
                  <div class="absolute inset-0 bg-gradient-to-b from-black/0 via-black/20 to-black/50"></div>
                </div>
                <div class="relative overflow-hidden rounded-xl border border-white/10 bg-neutral-900 md:row-span-2 hover:scale-105 transition-transform duration-300">
                  <img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/62af90a3-7459-4c4f-be9c-04149b391218_320w.jpg" alt="Project preview 3" class="w-full h-full object-cover opacity-90">
                  <div class="absolute inset-0 bg-gradient-to-t from-black/60 via-black/10 to-transparent"></div>
                </div>
                <div class="relative overflow-hidden rounded-xl border border-white/10 bg-neutral-900 hover:scale-105 transition-transform duration-300">
                  <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/5c3d7b58-631c-4dce-a85d-327c0dbb183b_320w.jpg" alt="Project preview 4" class="w-full h-full object-cover opacity-90">
                  <div class="absolute inset-0 bg-gradient-to-b from-black/0 via-black/20 to-black/50"></div>
                </div>
                <div class="relative overflow-hidden rounded-xl border border-white/10 bg-neutral-900 hover:scale-105 transition-transform duration-300">
                  <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/fb6b509f-d7d6-4c5a-ab4e-9cc3661e184b_320w.jpg" alt="Project preview 5" class="w-full h-full object-cover opacity-90">
                  <div class="absolute inset-0 bg-gradient-to-b from-black/0 via-black/20 to-black/50"></div>
                </div>
              </div>
            </div>

            <!-- Soft glow -->
            <div class="pointer-events-none absolute -right-24 bottom-0 w-72 h-72 rounded-full bg-white/10 blur-3xl">
            </div>
            <div class="pointer-events-none absolute -left-24 -top-24 w-80 h-80 rounded-full bg-white/5 blur-3xl"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>