Animated Service Cards Grid

<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 max-w-7xl">
  <!-- Brand Identity -->
  <div
    class="rounded-xl border p-6 animate-[slideUp_0.6s_ease-out_0.1s_both] border-white/10 bg-neutral-900/40 flex flex-col">
    <div class="rounded-lg border p-4 mb-5 relative overflow-hidden border-white/10 bg-white/5">
      <div class="flex items-center justify-center">
        <div class="grid grid-cols-2 gap-4 w-full">
          <!-- Main logo -->
          <div class="col-span-2 h-16 rounded-lg bg-blue-500 flex items-center justify-center relative overflow-hidden">
            <div class="absolute inset-0 bg-blue-400/20"></div>
            <span class="text-white text-xl font-bold relative z-10" style="">L</span>
          </div>
          <!-- Logo variations -->
          <div class="h-12 rounded bg-blue-500 flex items-center justify-center border border-blue-400/30">
            <span class="text-white text-sm font-bold" style="">L</span>
          </div>
          <div
            class="h-12 rounded border-2 border-blue-500 flex items-center justify-center bg-white/5 backdrop-blur-sm">
            <span class="text-blue-400 text-sm font-bold" style="">L</span>
          </div>
        </div>
      </div>
    </div>
    <div class="mt-auto">
      <h3 class="text-xl font-medium tracking-tight font-geist mb-2" style="">Brand Identity Design</h3>
      <p class="text-sm font-geist text-neutral-400" style="">Create memorable visual identities with custom logos,
        color systems, and brand guidelines that capture your essence.</p>
    </div>
  </div>

  <!-- Web Design -->
  <div
    class="rounded-xl border p-6 animate-[slideUp_0.6s_ease-out_0.2s_both] border-white/10 bg-neutral-900/40 flex flex-col">
    <div class="rounded-lg border p-4 mb-5 border-white/10 bg-white/5">
      <div class="space-y-3">
        <!-- Browser mockup -->
        <div class="rounded border flex items-center gap-2 p-2 border-white/10 bg-black/30">
          <div class="flex gap-1">
            <div class="h-2 w-2 rounded-full bg-rose-500/80"></div>
            <div class="h-2 w-2 rounded-full bg-amber-400/80"></div>
            <div class="h-2 w-2 rounded-full bg-cyan-400/80"></div>
          </div>
          <div class="h-2 flex-1 rounded bg-white/10"></div>
        </div>
        <!-- Page content -->
        <div class="space-y-2">
          <div class="h-3 w-3/4 rounded bg-white/10"></div>
          <div class="h-2 w-full rounded bg-white/10"></div>
          <div class="h-2 w-5/6 rounded bg-white/10"></div>
        </div>
        <!-- CTA button -->
        <div class="flex justify-center">
          <div class="h-6 w-20 rounded bg-blue-500/60"></div>
        </div>
      </div>
    </div>
    <div class="mt-auto">
      <h3 class="text-xl font-medium tracking-tight font-geist mb-2" style="">Web Design &amp; Development</h3>
      <p class="text-sm font-geist text-neutral-400" style="">Design and build responsive, user-friendly websites that
        engage visitors and drive conversions across all devices.</p>
    </div>
  </div>

  <!-- Digital Marketing -->
  <div
    class="rounded-xl border p-6 animate-[slideUp_0.6s_ease-out_0.3s_both] border-white/10 bg-neutral-900/40 flex flex-col">
    <div class="rounded-lg border p-4 mb-5 space-y-3 border-white/10 bg-white/5">
      <!-- Social media posts grid -->
      <div class="grid grid-cols-2 gap-2">
        <div class="rounded border p-2 space-y-1 border-white/10 bg-black/30">
          <div class="h-2 w-3/4 rounded bg-white/10"></div>
          <div class="h-8 rounded bg-blue-500/30"></div>
          <div class="flex gap-1">
            <div class="h-1 w-3 rounded bg-white/10"></div>
            <div class="h-1 w-3 rounded bg-white/10"></div>
          </div>
        </div>
        <div class="rounded border p-2 space-y-1 border-white/10 bg-black/30">
          <div class="h-2 w-3/4 rounded bg-white/10"></div>
          <div class="h-8 rounded bg-blue-600/30"></div>
          <div class="flex gap-1">
            <div class="h-1 w-3 rounded bg-white/10"></div>
            <div class="h-1 w-3 rounded bg-white/10"></div>
          </div>
        </div>
      </div>
      <div class="flex justify-center">
        <button class="rounded px-3 py-1 ring-1 text-xs bg-white/5 ring-white/10 text-neutral-200" style="">Create Campaign</button>
      </div>
    </div>
    <div class="mt-auto">
      <h3 class="text-xl font-medium tracking-tight font-geist mb-2" style="">Digital Marketing</h3>
      <p class="text-sm font-geist text-neutral-400" style="">Develop strategic campaigns across social media, email,
        and digital channels to amplify your brand reach.</p>
    </div>
  </div>

  <!-- Print & Packaging -->
  <div
    class="rounded-xl border p-6 animate-[slideUp_0.6s_ease-out_0.4s_both] border-white/10 bg-neutral-900/40 flex flex-col">
    <div class="rounded-lg border p-4 mb-5 space-y-3 border-white/10 bg-white/5">
      <div class="grid grid-cols-3 gap-2">
        <!-- Business cards -->
        <div class="rounded border p-2 aspect-[3/2] border-white/10 bg-black/30">
          <div class="h-1 w-2/3 rounded mb-2 bg-white/10"></div>
          <div class="h-1 w-1/2 rounded bg-white/10"></div>
        </div>
        <!-- Brochure -->
        <div class="rounded border p-2 aspect-[3/4] border-white/10 bg-black/30">
          <div class="h-3 rounded mb-1 bg-blue-500/30"></div>
          <div class="space-y-1">
            <div class="h-1 w-full rounded bg-white/10"></div>
            <div class="h-1 w-3/4 rounded bg-white/10"></div>
          </div>
        </div>
        <!-- Package -->
        <div class="rounded border p-2 aspect-square border-white/10 bg-black/30">
          <div class="h-2 w-2 rounded mb-2 bg-blue-500/50"></div>
          <div class="space-y-1">
            <div class="h-1 w-full rounded bg-white/10"></div>
            <div class="h-1 w-2/3 rounded bg-white/10"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="mt-auto">
      <h3 class="text-xl font-medium tracking-tight font-geist mb-2" style="">Print &amp; Packaging Design</h3>
      <p class="text-sm font-geist text-neutral-400" style="">Design compelling print materials and packaging that make
        lasting impressions in physical spaces.</p>
    </div>
  </div>

  <!-- Video Production -->
  <div
    class="rounded-xl border p-6 animate-[slideUp_0.6s_ease-out_0.5s_both] border-white/10 bg-neutral-900/40 flex flex-col">
    <div class="rounded-lg border p-4 mb-5 border-white/10 bg-white/5">
      <div class="rounded bg-black relative overflow-hidden h-24">
        <div class="absolute inset-0 bg-blue-500/20"></div>
        <!-- Play button -->
        <div class="absolute inset-0 flex items-center justify-center">
          <div class="h-8 w-8 rounded-full bg-white/90 flex items-center justify-center">
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
              stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="play"
              class="lucide lucide-play text-black">
              <path d="M5 5a2 2 0 0 1 3.008-1.728l11.997 6.998a2 2 0 0 1 .003 3.458l-12 7A2 2 0 0 1 5 19z" class="">
              </path>
            </svg>
          </div>
        </div>
        <!-- Video timeline -->
        <div class="absolute bottom-2 left-2 right-2">
          <div class="h-1 rounded bg-white/20">
            <div class="h-1 w-1/3 rounded bg-blue-500"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="mt-auto">
      <h3 class="text-xl font-medium tracking-tight font-geist mb-2" style="">Video Production</h3>
      <p class="text-sm font-geist text-neutral-400" style="">Produce engaging video content from concept to
        post-production for marketing, social media, and brand storytelling.</p>
    </div>
  </div>

  <!-- Creative Consulting -->
  <div
    class="rounded-xl border p-6 animate-[slideUp_0.6s_ease-out_0.6s_both] border-white/10 bg-neutral-900/40 flex flex-col">
    <div class="rounded-lg border p-4 mb-5 relative border-white/10 bg-white/5">
      <div class="grid grid-cols-2 gap-3">
        <!-- Strategy board -->
        <div class="space-y-2">
          <div class="text-[11px] font-geist text-neutral-400" style="">Strategy</div>
          <div class="space-y-1">
            <div class="rounded px-2 py-1 text-[10px] bg-blue-500/20 text-blue-300" style="">Brand Positioning</div>
            <div class="rounded px-2 py-1 text-[10px] bg-blue-400/20 text-blue-300" style="">Market Research</div>
            <div class="rounded px-2 py-1 text-[10px] bg-blue-600/20 text-blue-300" style="">Creative Direction</div>
          </div>
        </div>
        <!-- Consultation -->
        <div class="space-y-2">
          <div class="text-[11px] font-geist text-neutral-400" style="">Session Notes</div>
          <div class="space-y-1">
            <div class="h-1 w-full rounded bg-white/10"></div>
            <div class="h-1 w-3/4 rounded bg-white/10"></div>
            <div class="h-1 w-5/6 rounded bg-white/10"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="mt-auto">
      <h3 class="text-xl font-medium tracking-tight font-geist mb-2" style="">Creative Consulting</h3>
      <p class="text-sm font-geist text-neutral-400" style="">Partner with our creative strategists to develop
        comprehensive brand strategies and innovative creative solutions.</p>
    </div>
  </div>
</div>