E-commerce Hero Section with Animated Hover CTA

<section class="sm:px-8 max-w-7xl mt-24 mr-auto mb-24 ml-auto pr-6 pl-6">
        <div class="">
            <div class="grid lg:grid-cols-2 gap-12 lg:gap-16 items-center">
                <div class="">
                    <div class="grid grid-cols-1 sm:grid-cols-3 gap-3 animate-fade-in-delay-3 w-fit mb-2">
    <div class="flex gap-2 bg-white/5 border-white/5 border rounded-full pt-2 pr-3 pb-2 pl-3 backdrop-blur items-center">
        
        <span class="text-xs text-white/70 font-geist">New Store Opening</span>
    </div>
    
    
</div><h1 class="sm:text-7xl lg:text-8xl leading-[1.02] animate-fade-in text-5xl font-medium text-white tracking-tighter font-geist" style="">Professional gear for bold creators</h1>
                    <p class="sm:text-2xl leading-relaxed text-xl mt-6 text-white/60 animate-fade-in-delay-1 tracking-tighter font-geist font-medium" style="">Premium equipment. Expert advice. Delivered globally.</p>
                    
                    <div class="flex flex-wrap gap-4 mt-10 items-center animate-fade-in-delay-2">
                        <button class="group relative inline-flex min-w-[120px] cursor-pointer transition-all duration-[1000ms] ease-[cubic-bezier(0.15,0.83,0.66,1)] hover:-translate-y-[3px] hover:text-white overflow-hidden font-semibold text-white/70 tracking-tight bg-white/5 border-white/10 border rounded-xl pt-[12px] pr-[20px] pb-[12px] pl-[20px] shadow-[0_2.8px_2.2px_rgba(0,0,0,0.3),_0_6.7px_5.3px_rgba(0,0,0,0.35),_0_12.5px_10px_rgba(0,0,0,0.4)] items-center justify-center">
  <!-- Original text (slides down on hover) -->
  <span class="relative z-10 font-medium transition-all duration-500 ease-out group-hover:transform group-hover:translate-y-8 group-hover:opacity-0 group-hover:blur-md rounded-xl font-geist">Shop cameras</span>
  
  <!-- Clone text (slides in from top on hover) -->
  <span class="absolute inset-0 z-10 flex items-center justify-center transition-all duration-300 ease-in-out transform -translate-y-8 group-hover:translate-y-0 group-hover:opacity-100 group-hover:blur-none font-medium opacity-0 blur-md rounded-xl font-geist">Shop cameras</span>

  <!-- replaces the old ::before underline -->
  <span aria-hidden="true" class="absolute bottom-0 left-1/2 h-[1px] w-[70%] -translate-x-1/2 transition-all duration-[1000ms] ease-[cubic-bezier(0.15,0.83,0.66,1)] group-hover:opacity-80 bg-gradient-to-r from-transparent via-white/40 to-transparent blur-[2px] rounded-xl"></span>
  
  <!-- bottom light gradient on hover -->
  <span aria-hidden="true" class="absolute bottom-0 left-0 right-0 h-[100%] group-hover:opacity-60 transition-all duration-[1000ms] ease-[cubic-bezier(0.15,0.83,0.66,1)] pointer-events-none bg-gradient-to-t from-white/10 via-white/5 to-transparent rounded-xl"></span>
</button>
                        <a href="#featured" class="inline-flex items-center gap-2 text-sm transition text-white/70 hover:text-white font-geist" style="">
                            View featured gear
                            <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"><path d="M7 7h10v10" class=""></path><path d="M7 17 17 7" class=""></path></svg>
                        </a>
                    </div>

                    <div class="flex gap-2 text-white/40 mt-6 items-center">
        <span class="text-base font-geist">+</span>
        <div class="h-px flex-1 bg-white/10"></div>
        <span class="text-base font-geist">+</span>
      </div><div class="grid grid-cols-1 sm:grid-cols-3 gap-3 animate-fade-in-delay-3 w-fit mt-2">
    <div class="flex gap-2 bg-white/5 border-white/5 border rounded-full pt-2 pr-3 pb-2 pl-3 backdrop-blur items-center">
        <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="w-4 h-4"><path d="m7.5 4.27 9 5.15" class=""></path><path d="M21 8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z" class=""></path><path d="m3.3 7 8.7 5 8.7-5" class=""></path><path d="M12 22V12" class=""></path></svg>
        <span class="text-xs text-white/70 font-geist">Free shipping</span>
    </div>
    <div class="flex gap-2 bg-white/5 border-white/5 border rounded-full pt-2 pr-3 pb-2 pl-3 backdrop-blur items-center">
        <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="w-4 h-4"><path d="M3.85 8.62a4 4 0 0 1 4.78-4.77 4 4 0 0 1 6.74 0 4 4 0 0 1 4.78 4.78 4 4 0 0 1 0 6.74 4 4 0 0 1-4.77 4.78 4 4 0 0 1-6.75 0 4 4 0 0 1-4.78-4.77 4 4 0 0 1 0-6.76Z" class=""></path><path d="m9 12 2 2 4-4" class=""></path></svg>
        <span class="text-xs text-white/70 font-geist">Authorized dealer</span>
    </div>
    <div class="flex gap-2 bg-white/5 border-white/5 border rounded-full pt-2 pr-3 pb-2 pl-3 backdrop-blur items-center">
        <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="w-4 h-4"><path d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z" class=""></path></svg>
        <span class="text-xs text-white/70 font-geist">2-year warranty</span>
    </div>
</div>
                </div>

                
            </div>
        </div>
    </section>