Interactive Product Card Gallery with Hover Reveal

<div class="pt-8 pr-8 pb-8 pl-8 space-y-16">
        <h2 class="text-4xl font-medium text-gray-900 tracking-tight font-playfair mb-6" style="">Fashion Gallery</h2>

        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
            <div
                class="card relative overflow-hidden cursor-pointer transition-all duration-[600ms] hover:rotate-[-5deg] hover:scale-110 hover:shadow-[0_10px_20px_rgba(0,0,0,0.2)] w-72 h-48 rounded-xl">
                <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/5fe82ca0-ec91-4df3-b0fb-d97b643f2178_800w.jpg" alt="Red Evening Dress" class="card__image w-full h-full object-cover transition-all duration-[600ms]">
                <div
                    class="card__content absolute top-0 left-0 w-full h-full p-5 bg-white opacity-0 transition-all duration-[600ms] flex flex-col justify-center">
                    <p class="text-xl text-gray-800 m-0 font-geist font-semibold" style="">Red Evening Dress</p>
                    <p class="text-sm text-gray-600 mt-3 leading-relaxed font-geist font-light" style="">Elegant red
                        evening dress perfect for special occasions. Made with premium materials and designed for
                        comfort and style.</p>
                    <div class="mt-4">
                        <span class="text-lg font-semibold text-gray-900 font-geist" style="">$299</span>
                        <span class="text-sm text-gray-500 ml-2 font-geist font-light" style="">Available in S, M, L</span>
                    </div>
                </div>
            </div>

            <div
                class="card relative overflow-hidden cursor-pointer transition-all duration-[600ms] hover:rotate-[-5deg] hover:scale-110 hover:shadow-[0_10px_20px_rgba(0,0,0,0.2)] w-72 h-48 rounded-xl">
                <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/f87790a7-b96f-42cd-8534-21f5ff708ac2_800w.jpg" alt="Pink Casual Wear" class="card__image w-full h-full object-cover transition-all duration-[600ms]">
                <div
                    class="card__content absolute top-0 left-0 transition-all duration-[600ms] flex flex-col bg-white opacity-0 w-full h-full pt-5 pr-5 pb-5 pl-5 justify-center">
                    <p class="text-xl text-gray-800 m-0 font-geist font-semibold" style="">Pink Casual Wear</p>
                    <p class="text-sm text-gray-600 mt-3 leading-relaxed font-geist font-light" style="">Comfortable and
                        stylish casual wear in soft pink tones. Perfect for everyday activities with a touch of
                        elegance.</p>
                    <div class="mt-4">
                        <span class="text-lg font-semibold text-gray-900 font-geist" style="">$149</span>
                        <span class="text-sm text-gray-500 ml-2 font-geist font-light" style="">Available in XS, S, M</span>
                    </div>
                </div>
            </div>

            <div
                class="card relative overflow-hidden cursor-pointer transition-all duration-[600ms] hover:rotate-[-5deg] hover:scale-110 hover:shadow-[0_10px_20px_rgba(0,0,0,0.2)] w-72 h-48 rounded-xl">
                <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/31996fe3-f9da-42d7-bf65-2cc5d5417271_800w.jpg" alt="Summer Collection" class="card__image w-full h-full object-cover transition-all duration-[600ms]">
                <div
                    class="card__content absolute top-0 left-0 w-full h-full p-5 bg-white opacity-0 transition-all duration-[600ms] flex flex-col justify-center">
                    <p class="text-xl text-gray-800 m-0 font-geist font-semibold" style="">Summer Collection</p>
                    <p class="text-sm text-gray-600 mt-3 leading-relaxed font-geist font-light" style="">Fresh summer
                        styles with vibrant colors and lightweight fabrics. Designed for comfort in warm weather.</p>
                    <div class="mt-4">
                        <span class="text-lg font-semibold text-gray-900 font-geist" style="">$199</span>
                        <span class="text-sm text-gray-500 ml-2 font-geist font-light" style="">Available in S, M, L, XL</span>
                    </div>
                </div>
            </div>

            <div
                class="card relative overflow-hidden cursor-pointer transition-all duration-[600ms] hover:rotate-[-5deg] hover:scale-110 hover:shadow-[0_10px_20px_rgba(0,0,0,0.2)] w-72 h-48 rounded-xl">
                <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/6c1ffade-fbe6-4060-98f2-105b42f86509_800w.jpg" alt="Blue Modern Look" class="card__image w-full h-full object-cover transition-all duration-[600ms]">
                <div
                    class="card__content absolute top-0 left-0 w-full h-full p-5 bg-white opacity-0 transition-all duration-[600ms] flex flex-col justify-center">
                    <p class="text-xl text-gray-800 m-0 font-geist font-semibold" style="">Blue Modern Look</p>
                    <p class="text-sm text-gray-600 mt-3 leading-relaxed font-geist font-light" style="">Contemporary
                        blue fashion pieces that blend modern design with classic sophistication. Perfect for
                        professional settings.</p>
                    <div class="mt-4">
                        <span class="text-lg font-semibold text-gray-900 font-geist" style="">$249</span>
                        <span class="text-sm text-gray-500 ml-2 font-geist font-light" style="">Available in S, M, L</span>
                    </div>
                </div>
            </div>

            <div
                class="card relative overflow-hidden cursor-pointer transition-all duration-[600ms] hover:rotate-[-5deg] hover:scale-110 hover:shadow-[0_10px_20px_rgba(0,0,0,0.2)] w-72 h-48 rounded-xl">
                <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/1798060b-f297-4981-a4f3-745854800fb8_800w.jpg" alt="Purple Luxury" class="card__image w-full h-full object-cover transition-all duration-[600ms]">
                <div
                    class="card__content absolute top-0 left-0 w-full h-full p-5 bg-white opacity-0 transition-all duration-[600ms] flex flex-col justify-center">
                    <p class="text-xl text-gray-800 m-0 font-geist font-semibold" style="">Purple Luxury</p>
                    <p class="text-sm text-gray-600 mt-3 leading-relaxed font-geist font-light" style="">Luxurious
                        purple ensemble crafted with attention to detail. Featuring premium materials and exquisite
                        tailoring.</p>
                    <div class="mt-4">
                        <span class="text-lg font-semibold text-gray-900 font-geist" style="">$399</span>
                        <span class="text-sm text-gray-500 ml-2 font-geist font-light" style="">Available in M, L, XL</span>
                    </div>
                </div>
            </div>

            <div
                class="card relative overflow-hidden cursor-pointer transition-all duration-[600ms] hover:rotate-[-5deg] hover:scale-110 hover:shadow-[0_10px_20px_rgba(0,0,0,0.2)] w-72 h-48 rounded-xl">
                <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/30e37a1d-2863-42c9-8f13-7fae66fd1ca6_800w.jpg" alt="Ocean Breeze" class="card__image w-full h-full object-cover transition-all duration-[600ms]">
                <div
                    class="card__content absolute top-0 left-0 w-full h-full p-5 bg-white opacity-0 transition-all duration-[600ms] flex flex-col justify-center">
                    <p class="text-xl text-gray-800 m-0 font-geist font-semibold" style="">Ocean Breeze</p>
                    <p class="text-sm text-gray-600 mt-3 leading-relaxed font-geist font-light" style="">Fresh
                        ocean-inspired designs with flowing fabrics and cooling colors. Perfect for beach getaways and
                        summer events.</p>
                    <div class="mt-4">
                        <span class="text-lg font-semibold text-gray-900 font-geist" style="">$179</span>
                        <span class="text-sm text-gray-500 ml-2 font-geist font-light" style="">Available in XS, S, M, L</span>
                    </div>
                </div>
            </div>
        </div>

        <p class="text-sm text-gray-600 mt-8 text-center font-geist font-light" style="">Hover over cards to reveal
            fashion details</p>
    </div>

    <style style="">
        .card:hover .card__content {
            opacity: 1;
        }

        .card:hover .card__image {
            transform: scale(1.1);
            opacity: 0.3;
        }
    </style>

    <script style="">
        lucide.createIcons();
    </script>