Responsive Feature Card Grid with Hover Effects

<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
  <div
    class="scroll-reveal stagger-1 group sm:p-8 cursor-pointer transition-all duration-500 hover:scale-105 hover:bg-zinc-800/80 hover:shadow-xl bg-zinc-900 border-zinc-800 border rounded-3xl mt-8 pt-6 pr-6 pb-6 pl-6 revealed">
    <div
      class="sm:p-6 md:p-8 bg-white/5 border-white/10 border rounded-2xl pt-5 pr-5 pb-5 pl-5 transition-all duration-300 group-hover:bg-white/10 group-hover:border-white/20">
      <h3 class="text-xl font-medium text-white mb-3">Intelligent Communication</h3>
      <p class="text-gray-400 leading-relaxed">AI-powered conversation flows that understand context, sentiment, and
        respond with human-like intelligence across all communication channels.</p>
      <div
        class="mt-4 rounded-lg overflow-hidden border border-white/10 transition-all duration-300 group-hover:border-white/20">
        <img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/70c9e818-8e08-4e5c-ae2f-4fc0f3b2b30e_800w.jpg" alt="Private dining room" class="aspect-video w-full object-cover transition-transform duration-500 group-hover:scale-110">
      </div>
    </div>

    <div class="flex text-sm text-[#ffffff] mt-6 items-center">
      <span class="">Learn more</span>
      <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="w-4 h-4 ml-2 group-hover:translate-x-1 transition-transform">
        <path d="M5 12h14" class=""></path>
        <path d="m12 5 7 7-7 7" class=""></path>
      </svg>
    </div>
  </div>

  <div
    class="scroll-reveal stagger-2 group sm:p-8 bg-zinc-900 border-zinc-800 border rounded-3xl mt-8 pt-6 pr-6 pb-6 pl-6 cursor-pointer transition-all duration-500 hover:scale-105 hover:bg-zinc-800/80 hover:shadow-xl revealed">
    <div
      class="sm:p-6 md:p-8 bg-white/5 border-white/10 border rounded-2xl pt-5 pr-5 pb-5 pl-5 transition-all duration-300 group-hover:bg-white/10 group-hover:border-white/20">
      <h3 class="text-xl font-medium text-white mb-3">Smart Data Intelligence</h3>
      <p class="leading-relaxed text-gray-400">Transform raw data into actionable insights with AI that identifies
        patterns, predicts outcomes, and uncovers hidden business opportunities.</p>
      <div
        class="mt-4 rounded-lg overflow-hidden border border-white/10 transition-all duration-300 group-hover:border-white/20">
        <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/40da0c82-6e2f-4b70-a7b5-0498f0e7f525_800w.jpg" alt="Private dining room" class="aspect-video w-full object-cover transition-transform duration-500 group-hover:scale-110">
      </div>
    </div>

    <div class="flex text-sm text-[#ffffff] mt-6 items-center">
      <span class="">Learn more</span>
      <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="w-4 h-4 ml-2 group-hover:translate-x-1 transition-transform">
        <path d="M5 12h14" class=""></path>
        <path d="m12 5 7 7-7 7" class=""></path>
      </svg>
    </div>
  </div>

  <div
    class="scroll-reveal stagger-3 group sm:p-8 cursor-pointer transition-all duration-500 hover:scale-105 hover:bg-zinc-800/80 hover:shadow-xl revealed bg-zinc-900 border-zinc-800 border rounded-3xl mt-8 pt-6 pr-6 pb-6 pl-6">
    <div
      class="sm:p-6 md:p-8 bg-white/5 border-white/10 border rounded-2xl pt-5 pr-5 pb-5 pl-5 transition-all duration-300 group-hover:bg-white/10 group-hover:border-white/20">
      <h3 class="text-xl font-medium text-white mb-3">Lightning Performance</h3>
      <p class="leading-relaxed text-gray-400">Experience sub-200ms response times with our optimized AI processing
        engines and edge computing infrastructure worldwide.</p>
      <div
        class="mt-4 rounded-lg overflow-hidden border border-white/10 transition-all duration-300 group-hover:border-white/20">
        <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/562ccd5e-2c33-4a35-9897-6bc64b012fca_800w.jpg" alt="Private dining room" class="aspect-video w-full object-cover transition-transform duration-500 group-hover:scale-110">
      </div>
    </div>

    <div class="flex text-sm text-[#ffffff] mt-6 items-center">
      <span class="">Learn more</span>
      <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="w-4 h-4 ml-2 group-hover:translate-x-1 transition-transform">
        <path d="M5 12h14" class=""></path>
        <path d="m12 5 7 7-7 7" class=""></path>
      </svg>
    </div>
  </div>
</div>