Interactive Testimonial, About & Contact Card Grid

<section class="max-w-7xl sm:px-8 md:mt-16 mt-12 mr-auto ml-auto pr-6 pb-16 pl-6">
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 md:gap-8">
          <!-- Testimonial / Copy -->
          <article class="relative bg-neutral-900/30 backdrop-blur-xl border border-neutral-700/50 rounded-xl flex flex-col md:min-h-[420px] lg:min-h-[480px] hover:bg-neutral-800/40 hover:border-neutral-600/60 transition-all duration-500 group animate-scale-in animate-delay-600 shadow-2xl">
            <div class="p-8 sm:p-10 grow">
              <h3 class="text-lg sm:text-4xl tracking-tight text-neutral-100 group-hover:text-cyan-400 transition-colors duration-300 font-geist" style="">
                Design that moves. Results you can measure.
              </h3>
              <p class="mt-5 text-neutral-300 group-hover:text-neutral-200 transition-colors duration-300 font-geist">
                "Kinetic translated our ethos into an experience that feels sharp, emotive, and unmistakably effective."
              </p>

              <!-- micro-metrics -->
              <div class="mt-6 flex flex-wrap items-center gap-3 text-xs text-neutral-400">
                <span class="inline-flex items-center gap-1.5 rounded-md border border-neutral-700/50 bg-neutral-800/30 backdrop-blur-sm px-2 py-1 hover:border-cyan-500/50 hover:bg-cyan-500/10 transition-all duration-300 cursor-default font-geist">
                  <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" data-lucide="sparkles" class="lucide lucide-sparkles w-3.5 h-3.5 text-cyan-400"><path d="M11.017 2.814a1 1 0 0 1 1.966 0l1.051 5.558a2 2 0 0 0 1.594 1.594l5.558 1.051a1 1 0 0 1 0 1.966l-5.558 1.051a2 2 0 0 0-1.594 1.594l-1.051 5.558a1 1 0 0 1-1.966 0l-1.051-5.558a2 2 0 0 0-1.594-1.594l-5.558-1.051a1 1 0 0 1 0-1.966l5.558-1.051a2 2 0 0 0 1.594-1.594z" class=""></path><path d="M20 2v4" class=""></path><path d="M22 4h-4" class=""></path><circle cx="4" cy="20" r="2" class=""></circle></svg>
                  Brand lift +18%
                </span>
                <span class="inline-flex items-center gap-1.5 rounded-md border border-neutral-700/50 bg-neutral-800/30 backdrop-blur-sm px-2 py-1 hover:border-pink-500/50 hover:bg-pink-500/10 transition-all duration-300 cursor-default font-geist">
                  <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" data-lucide="heart" class="lucide lucide-heart w-3.5 h-3.5 text-pink-400"><path d="M2 9.5a5.5 5.5 0 0 1 9.591-3.676.56.56 0 0 0 .818 0A5.49 5.49 0 0 1 22 9.5c0 2.29-1.5 4-3 5.5l-5.492 5.313a2 2 0 0 1-3 .019L5 15c-1.5-1.5-3-3.2-3-5.5" class=""></path></svg>
                  Save rate +27%
                </span>
              </div>
            </div>
            <div class="px-8 sm:px-10">
              <div class="border-t border-neutral-700/50"></div>
            </div>
            <div class="p-8 sm:p-10">
              <div class="flex items-center gap-3">
                <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/76672c59-0193-4795-ba6b-96fe356d9cab_320w.jpg" alt="Portrait of the client" class="h-10 w-10 rounded-md object-cover ring-1 ring-neutral-700/50 hover:ring-cyan-500/50 transition-all duration-300">
                <div>
                  <p class="text-sm font-semibold text-neutral-100 font-geist">Iris M.</p>
                  <p class="text-sm text-neutral-400 font-geist">Creative Lead</p>
                </div>
                <div class="ml-auto text-neutral-500">
                  <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" data-lucide="quote" class="lucide lucide-quote w-4 h-4"><path d="M16 3a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2 1 1 0 0 1 1 1v1a2 2 0 0 1-2 2 1 1 0 0 0-1 1v2a1 1 0 0 0 1 1 6 6 0 0 0 6-6V5a2 2 0 0 0-2-2z" class=""></path><path d="M5 3a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2 1 1 0 0 1 1 1v1a2 2 0 0 1-2 2 1 1 0 0 0-1 1v2a1 1 0 0 0 1 1 6 6 0 0 0 6-6V5a2 2 0 0 0-2-2z" class=""></path></svg>
                </div>
              </div>
            </div>
          </article>

          <!-- Feature Image -->
          

          <!-- Contact Card -->
          <aside class="relative sm:p-10 flex flex-col md:min-h-[420px] lg:min-h-[480px] group hover:border-neutral-600/60 transition-all duration-500 animate-scale-in animate-delay-800 text-neutral-200 bg-[url(https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/4cbc60a4-4fe9-4076-aa9f-780d9db024b5_800w.jpg)] bg-cover border-neutral-700/50 rounded-xl pt-8 pr-8 pb-8 pl-8 shadow-2xl backdrop-blur-xl">
  <div class="relative z-10">
    <div class="flex items-start justify-between">
      <h3 class="sm:text-5xl group-hover:text-cyan-400 transition-colors duration-300 text-3xl tracking-tight font-geist" style="">About Us</h3>
      <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" data-lucide="arrow-up-right" class="lucide lucide-arrow-up-right w-4 h-4 text-neutral-300 group-hover:text-cyan-400 group-hover:translate-x-1 group-hover:-translate-y-1 transition-all duration-300"><path d="M7 7h10v10" class=""></path><path d="M7 17 17 7" class=""></path></svg>
    </div>
    <p class="text-neutral-neutral-200 transition-colors duration-300 text-xl font-geist mt-4" style="">
      We're a collective of designers, strategists, and builders who believe great digital experiences should feel both human and limitless.
    </p>

    
  </div>
</aside><aside class="relative sm:p-10 flex flex-col md:min-h-[420px] lg:min-h-[480px] group hover:border-neutral-600/60 transition-all duration-500 animate-scale-in animate-delay-800 text-neutral-200 bg-[url(https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/587704f8-5e00-4904-b740-9c240e358d12_800w.jpg)] bg-cover border-neutral-700/50 rounded-xl pt-8 pr-8 pb-8 pl-8 shadow-2xl backdrop-blur-xl">
            <div class="relative z-10">
              <div class="flex items-start justify-between">
                <h3 class="sm:text-5xl group-hover:text-cyan-400 transition-colors duration-300 text-lg tracking-tight font-geist" style="">Contact</h3>
                <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" data-lucide="arrow-up-right" class="lucide lucide-arrow-up-right w-4 h-4 text-neutral-300 group-hover:text-cyan-400 group-hover:translate-x-1 group-hover:-translate-y-1 transition-all duration-300"><path d="M7 7h10v10" class=""></path><path d="M7 17 17 7" class=""></path></svg>
              </div>
              <p class="group-hover:text-neutral-200 transition-colors duration-300 text-xl text-neutral-300 font-geist mt-4" style="">
                Let's start a conversation — whether you've got a brief, a bold idea, or just curiosity, we're here to help shape what's next.
              </p>

              <div class="text-sm mt-auto pt-10 space-y-3">
                <a href="mailto:hello@kinetic.studio" class="flex items-center gap-3 hover:text-cyan-400 hover:translate-x-1 transition-all duration-300 group/link font-geist">
                  <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" data-lucide="mail" class="lucide lucide-mail w-4 h-4 group-hover/link:scale-110 transition-transform duration-300"><path d="m22 7-8.991 5.727a2 2 0 0 1-2.009 0L2 7" class=""></path><rect x="2" y="4" width="20" height="16" rx="2" class=""></rect></svg>
                  hello@kinetic.studio
                </a>
                <a href="tel:+3598987201" class="flex items-center gap-3 hover:text-cyan-400 hover:translate-x-1 transition-all duration-300 group/link font-geist">
                  <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" data-lucide="phone" class="lucide lucide-phone w-4 h-4 group-hover/link:scale-110 transition-transform duration-300"><path d="M13.832 16.568a1 1 0 0 0 1.213-.303l.355-.465A2 2 0 0 1 17 15h3a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2A18 18 0 0 1 2 4a2 2 0 0 1 2-2h3a2 2 0 0 1 2 2v3a2 2 0 0 1-.8 1.6l-.468.351a1 1 0 0 0-.292 1.233 14 14 0 0 0 6.392 6.384" class=""></path></svg>
                  +359 898 72 01
                </a>
                <a href="https://kinetic.studio" class="flex items-center gap-3 hover:text-cyan-400 hover:translate-x-1 transition-all duration-300 group/link font-geist">
                  <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" data-lucide="globe" class="lucide lucide-globe w-4 h-4 group-hover/link:scale-110 transition-transform duration-300"><circle cx="12" cy="12" r="10" class=""></circle><path d="M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20" class=""></path><path d="M2 12h20" class=""></path></svg>
                  www.kinetic.studio
                </a>
                <div class="pt-4 flex items-center gap-2 text-xs text-neutral-500 font-geist">
                  <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" data-lucide="clock" class="lucide lucide-clock w-3.5 h-3.5"><path d="M12 6v6l4 2" class=""></path><circle cx="12" cy="12" r="10" class=""></circle></svg>
                  GMT+1 · Typically replies in 1–2 hrs
                </div>
              </div>
            </div>
          </aside>
        </div>
      </section>