<section id="products" class="bg-light-bg dark:bg-dark-bg py-20">
    <div class="container mx-auto px-6 lg:px-10">
        <div class="text-center mb-16" data-aos="fade-up">
            <p class="text-sm font-medium text-primary text-transparent bg-clip-text 
    bg-gradient-to-r from-blue-300 via-purple-300 tracking-[3px]">PRODUCTS</p>
            <h2 class="text-4xl md:text-5xl font-bold text-light-headings dark:text-dark-headings mt-4">Explore My Creations</h2>
        </div>

        <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
            <!-- Product Card 1: E-tech Sansar -->
            <div data-aos="fade-up" class="group p-6 rounded-2xl bg-light-card dark:bg-dark-card shadow-soft transition-all duration-300 hover:-translate-y-2 hover:shadow-xl">
                <div class="flex flex-col h-full">
                    <div class="mb-4 flex justify-center"><img src="images/products/etech.png" alt="E-tech Sansar" class="w-24 h-24 object-contain rounded-lg"></div>
                    <h3 class="text-xl font-bold text-light-headings dark:text-dark-headings group-hover:text-primary transition-colors text-center">E-tech Sansar</h3>
                    <p class="text-light-text dark:text-dark-text text-base leading-relaxed flex-grow mt-2 text-center">E-tech Sansar is a website that provides complete information about technology.</p>
                    <a href="#" class="mt-4 px-6 py-3 rounded-lg bg-light-bg dark:bg-dark-bg text-primary font-semibold shadow-light-neumorphic dark:shadow-dark-neumorphic group-hover:text-white hover:bg-gradient-to-br from-[#c812d6] via-primary to-[#ff6a00] hover:shadow-hire-glow transition-all duration-300 text-center">Learn More</a>
                </div>
            </div>

            <!-- Product Card 2: Nepali Quotes -->
            <div data-aos="fade-up" class="group p-6 rounded-2xl bg-light-card dark:bg-dark-card shadow-soft transition-all duration-300 hover:-translate-y-2 hover:shadow-xl">
                <div class="flex flex-col h-full">
                    <div class="mb-4 flex justify-center"><img src="images/products/nepaliquotes.png" alt="Nepali Quotes" class="w-24 h-24 object-contain rounded-lg"></div>
                    <h3 class="text-xl font-bold text-light-headings dark:text-dark-headings group-hover:text-primary transition-colors text-center">Nepali Quotes</h3>
                    <p class="text-light-text dark:text-dark-text text-base leading-relaxed flex-grow mt-2 text-center">Nepali Quotes is one of the site that provides news about all the things that are happening in Nepalese film industry.</p>
                    <a href="#" class="mt-4 px-6 py-3 rounded-lg bg-light-bg dark:bg-dark-bg text-primary font-semibold shadow-light-neumorphic dark:shadow-dark-neumorphic group-hover:text-white hover:bg-gradient-to-br from-[#c812d6] via-primary to-[#ff6a00] hover:shadow-hire-glow transition-all duration-300 text-center">Learn More</a>
                </div>
            </div>

            <!-- Product Card 3: Biddhya Battle -->
            <div data-aos="fade-up" class="group p-6 rounded-2xl bg-light-card dark:bg-dark-card shadow-soft transition-all duration-300 hover:-translate-y-2 hover:shadow-xl">
                <div class="flex flex-col h-full">
                    <div class="mb-4 flex justify-center"><img src="images/products/bidhyabattle.png" alt="Biddhya Battle" class="w-24 h-24 object-contain rounded-lg"></div>
                    <h3 class="text-xl font-bold text-light-headings dark:text-dark-headings group-hover:text-primary transition-colors text-center">Biddhya Battle</h3>
                    <p class="text-light-text dark:text-dark-text text-base leading-relaxed flex-grow mt-2 text-center">Biddhya Battle is one of the site that provides a quiz about different type programming language</p>
                    <a href="#" class="mt-4 px-6 py-3 rounded-lg bg-light-bg dark:bg-dark-bg text-primary font-semibold shadow-light-neumorphic dark:shadow-dark-neumorphic group-hover:text-white hover:bg-gradient-to-br from-[#c812d6] via-primary to-[#ff6a00] hover:shadow-hire-glow transition-all duration-300 text-center">Learn More</a>
                </div>
            </div>
        </div>
    </div>
</section><?php /**PATH /home2/kcashok/public_html/portfolio/resources/views/components/products-section.blade.php ENDPATH**/ ?>