Responsive Feature Card Grid with CTAs

<div class="lg:p-8 ring-1 ring-white/5 shadow-black/40 bg-gradient-to-b from-white/5 to-transparent border-white/10 border rounded-[2rem] pt-6 pr-6 pb-6 pl-6 shadow-2xl">
            <div class="grid grid-cols-1 gap-6 lg:gap-8 md:grid-cols-2 lg:grid-cols-3">
              <!-- Feature 1 -->
              <article class="group relative overflow-hidden rounded-2xl border border-white/10 bg-gradient-to-b from-white/8 to-white/4 p-6 backdrop-blur-xl hover:from-white/12 hover:to-white/6 transition-all duration-500">
                <div class="relative h-48 lg:h-52 overflow-hidden rounded-xl ring-1 ring-white/10 mb-6">
                  <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/1a8a6a2b-b092-45fa-8841-49e21aad6579_800w.jpg" alt="Neural Networks" class="h-full w-full object-cover transition-transform duration-700 group-hover:scale-105">
                  <div class="absolute inset-0 bg-gradient-to-t from-black/60 via-black/20 to-transparent"></div>
                  <div class="absolute top-3 right-3">
                    <button class="inline-flex h-9 w-9 items-center justify-center rounded-lg bg-white/15 ring-1 ring-white/20 backdrop-blur-xl hover:bg-white/25 transition-colors">
                      <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="h-4 w-4 stroke-[1.5]"><path d="M12 5a3 3 0 1 0-5.997.125 4 4 0 0 0-2.526 5.77 4 4 0 0 0 .556 6.588A4 4 0 1 0 12 18Z" class=""></path><path d="M9 13a4.5 4.5 0 0 0 3-4" class=""></path><path d="M6.003 5.125A3 3 0 0 0 6.401 6.5" class=""></path><path d="M3.477 10.896a4 4 0 0 1 .585-.396" class=""></path><path d="M6 18a4 4 0 0 1-1.967-.516" class=""></path><path d="M12 13h4" class=""></path><path d="M12 18h6a2 2 0 0 1 2 2v1" class=""></path><path d="M12 8h8" class=""></path><path d="M16 8V5a2 2 0 0 1 2-2" class=""></path><circle cx="16" cy="13" r=".5" class=""></circle><circle cx="18" cy="3" r=".5" class=""></circle><circle cx="20" cy="21" r=".5" class=""></circle><circle cx="20" cy="8" r=".5" class=""></circle></svg>
                    </button>
                  </div>
                </div>
                <div>
                  <h3 class="text-xl font-display font-semibold tracking-tight mb-3" style="">Neural Networks</h3>
                  <p class="text-white/70 leading-relaxed mb-6" style="">Advanced deep learning models trained on millions of artistic masterpieces to understand style, composition, and creative intent.</p>
                  <button class="inline-flex items-center gap-2 rounded-xl border border-white/15 bg-white/5 px-5 py-3 text-sm font-medium text-white/90 hover:bg-white/10 hover:border-white/20 transition-all duration-200" style="">
                    <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="h-4 w-4 stroke-[1.5]"><path d="M5 12h14" class=""></path><path d="m12 5 7 7-7 7" class=""></path></svg>
                    Explore Models
                  </button>
                </div>
              </article>

              <!-- Feature 2 -->
              <article class="group relative overflow-hidden hover:from-white/12 hover:to-white/6 transition-all duration-500 bg-gradient-to-b from-white/8 to-white/4 border-white/10 border rounded-2xl pt-6 pr-6 pb-6 pl-6 backdrop-blur-xl">
                <div class="relative h-48 lg:h-52 overflow-hidden rounded-xl ring-1 ring-white/10 mb-6">
                  <img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/91128fd1-ca2a-44e1-b4e8-678711b5c5f4_800w.jpg" alt="Real-time Collaboration" class="h-full w-full object-cover transition-transform duration-700 group-hover:scale-105">
                  <div class="absolute inset-0 bg-gradient-to-t from-black/60 via-black/20 to-transparent"></div>
                  <div class="absolute top-3 right-3">
                    <button class="inline-flex h-9 w-9 items-center justify-center rounded-lg bg-white/15 ring-1 ring-white/20 backdrop-blur-xl hover:bg-white/25 transition-colors">
                      <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="h-4 w-4 stroke-[1.5]"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" class=""></path><path d="M16 3.128a4 4 0 0 1 0 7.744" class=""></path><path d="M22 21v-2a4 4 0 0 0-3-3.87" class=""></path><circle cx="9" cy="7" r="4" class=""></circle></svg>
                    </button>
                  </div>
                </div>
                <div class="">
                  <h3 class="text-xl font-display font-semibold tracking-tight mb-3" style="">Team Collaboration</h3>
                  <p class="text-white/70 leading-relaxed mb-6" style="">Work together seamlessly with real-time collaboration tools, version control, and instant feedback loops for creative teams.</p>
                  <button class="inline-flex items-center gap-2 rounded-xl border border-white/15 bg-white/5 px-5 py-3 text-sm font-medium text-white/90 hover:bg-white/10 hover:border-white/20 transition-all duration-200" style="">
                    <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="h-4 w-4 stroke-[1.5]"><path d="M18 21a8 8 0 0 0-16 0" class=""></path><circle cx="10" cy="8" r="5" class=""></circle><path d="M22 20c0-3.37-2-6.5-4-8a5 5 0 0 0-.45-8.3" class=""></path></svg>
                    Join Workspace
                  </button>
                </div>
              </article>

              <!-- Feature 3 -->
              <article class="group relative overflow-hidden rounded-2xl border border-white/10 bg-gradient-to-b from-white/8 to-white/4 p-6 backdrop-blur-xl hover:from-white/12 hover:to-white/6 transition-all duration-500">
                <div class="relative h-48 lg:h-52 overflow-hidden rounded-xl ring-1 ring-white/10 mb-6">
                  <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/a63e1c25-72f0-45b9-bdc0-c52907914b49_800w.jpg" alt="Advanced Tools" class="h-full w-full object-cover transition-transform duration-700 group-hover:scale-105">
                  <div class="absolute inset-0 bg-gradient-to-t from-black/60 via-black/20 to-transparent"></div>
                  <div class="absolute top-3 right-3">
                    <button class="inline-flex h-9 w-9 items-center justify-center rounded-lg bg-white/15 ring-1 ring-white/20 backdrop-blur-xl hover:bg-white/25 transition-colors">
                      <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="h-4 w-4 stroke-[1.5]"><path d="M9.671 4.136a2.34 2.34 0 0 1 4.659 0 2.34 2.34 0 0 0 3.319 1.915 2.34 2.34 0 0 1 2.33 4.033 2.34 2.34 0 0 0 0 3.831 2.34 2.34 0 0 1-2.33 4.033 2.34 2.34 0 0 0-3.319 1.915 2.34 2.34 0 0 1-4.659 0 2.34 2.34 0 0 0-3.32-1.915 2.34 2.34 0 0 1-2.33-4.033 2.34 2.34 0 0 0 0-3.831A2.34 2.34 0 0 1 6.35 6.051a2.34 2.34 0 0 0 3.319-1.915" class=""></path><circle cx="12" cy="12" r="3" class=""></circle></svg>
                    </button>
                  </div>
                </div>
                <div class="">
                  <h3 class="text-xl font-display font-semibold tracking-tight mb-3" style="">Advanced Tools</h3>
                  <p class="text-white/70 leading-relaxed mb-6" style="">Professional-grade editing suite with precision controls, custom brushes, and intelligent automation for pixel-perfect results.</p>
                  <button class="inline-flex items-center gap-2 rounded-xl border border-white/15 bg-white/5 px-5 py-3 text-sm font-medium text-white/90 hover:bg-white/10 hover:border-white/20 transition-all duration-200" style="">
                    <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="h-4 w-4 stroke-[1.5]"><path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.106-3.105c.32-.322.863-.22.983.218a6 6 0 0 1-8.259 7.057l-7.91 7.91a1 1 0 0 1-2.999-3l7.91-7.91a6 6 0 0 1 7.057-8.259c.438.12.54.662.219.984z" class=""></path></svg>
                    View Toolkit
                  </button>
                </div>
              </article>
            </div>
          </div>