index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- Google Font (Roboto) -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link
        href="https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap"
        rel="stylesheet">

    <!-- CSS -->
    <link rel="stylesheet" href="index.css">

    <!-- Tailwind CSS  -->
    <script src="https://cdn.tailwindcss.com"></script>

    <!-- Favicon standard -->
    <link rel="icon" href="assets/logos/logo-favicon.png" type="image/x-icon">

    <title>Andrea's Cart</title>
</head>

<body class="font-['Open_Sans'] bg-zinc-200">

    <!-- Header -->
    <header class="bg-gray-800 h-full max-h-24 flex items-center py-4">
        <!-- Header container -->
        <div class="flex h-full w-full justify-between container mx-auto px-4 items-center">

            <!-- Logo -->
            <div class="flex h-full items-center h-20">
                <a href="" class="flex h-12 w-44">
                    <img src="./assets/logos/andreas-cart-logo-orange.png" alt="" class="h-full w-full">
                </a>
            </div>

            <!-- Right Navbar -->
            <div class="flex items-center">
                <div class="h-8 flex gap-x-4 items-center">

                    <!-- Searchbar -->
                    <div
                        class="hidden md:flex h-full items-center py-4  h-full overflow-hidden rounded-full gap-2 bg-white">
                        <div class="flex bg-orange-500 px-4 py-4 cursor-pointer rounded-l-full w-full">
                            <img src="./assets/icons/search.png"
                                class="h-4 cursor-pointer rounded-l hover:scale-110 transition-all duration-5" alt="">
                        </div>

                        <input type="text" placeholder="Search for a product" class="bg-transparent outline-none">
                    </div>

                    <!-- Favorite -->
                    <img src="./assets/icons/star-gold-favorite.png"
                        class="hidden md:flex h-full cursor-pointer hover:scale-110 transition-all duration-5" alt="">

                    <!-- Cart -->
                    <img src="./assets/icons/cart.png"
                        class="h-full  cursor-pointer hover:scale-110 transition-all duration-5" alt="">

                    <!-- User -->
                    <img src="./assets/icons/user.png"
                        class="h-full cursor-pointer hover:scale-110 transition-all duration-5" alt="">

                    <!-- Dropdown -->
                    <img src="./assets/icons/menu.png"
                        class="h-full xl:hidden cursor-pointer hover:scale-110 transition-all duration-5" alt="">
                </div>
            </div>
        </div>
    </header>

    <!-- Hero Section plus background-image -->
    <section class="bg-sky-600 justify-center mx-auto bg-cover bg-center h-96 flex items-center justify-center"
        id="hero-section">
        <div class="container">
            <div class="text-center px-4 sm:px-0 flex flex-col">
                <h1 class="text-3xl sm:text-4xl md:text-5xl font-bold text-zinc-50">Explore the Best Deals</h1>

                <p class="text-lg text-gray-200 mt-4">Shop top-rated products with incredible discounts</p>

                <!-- Large Search Bar in Hero Section -->
                <div class="mt-4 flex items-center bg-white rounded-full mx-auto w-full max-w-md md:max-w-lg ">
                    <div
                        class="bg-orange-500 p-4 py-3  h-full cursor-pointer rounded-l-full flex items-center justify-center">
                        <img src="assets/icons/search.png" alt="Search Icon"
                            class="h-6 w-7 hover:scale-110 transition-all duration-5">
                    </div>

                    <input type="text" placeholder="Search for product..."
                        class="bg-transparent w-full focus:outline-none text-lg text-gray-800 px-2">
                </div>

                <button type="button" href="#"
                    class="mt-8 inline-flex px-6 py-2 max-w-32 mx-auto rounded-full font-semibold text-zinc-50 bg-orange-500 hover:bg-orange-600 transition-all duration-300">Shop
                    Now</button>
            </div>
        </div>
    </section>

    <!-- Black Friday Deals Section -->
    <section id="black-friday-deals"
        class="bg-gradient-to-r from-yellow-600 via-red-600 to-zinc-900 mx-auto px-2 sm:px-6 py-6 border-t border-t-zinc-400">

        <!-- Overlay Banner -->
        <div class="bg-white bg-opacity-10 rounded-lg p-6 sm:p-8 shadow-lg">
            <div class="relative container mx-auto text-center flex flex-col gap-y-6">

                <!-- Section Header -->
                <div class="flex items-center flex-col sm:flex-row justify-between gap-x-4">

                    <!-- Best-selling Title -->
                    <h2 class="text-zinc-50 text-2xl font-bold text-left hover:underline">Black
                        Friday
                        Deals</h2>

                    <!-- See More Products Link -->
                    <a href="#all-products"
                        class="text-zinc-50 hover:text-zinc-300 text-sm font-medium underline cursor-pointer transition duration-300">See
                        more products</a>
                </div>

                <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4 2xl:gap-8">

                    <!-- Black Friday Deals Card 1 -->
                    <div
                        class="relative bg-white shadow-lg rounded-lg overflow-hidden flex flex-col transition-transform duration-300 cursor-pointer py-1">
                        <!-- Discount Badge -->
                        <span
                            class="absolute top-2 right-2 bg-red-600 text-zinc-50 text-sm font-bold px-2 py-1 rounded-lg">
                            50% OFF
                        </span>

                        <!-- Product Image -->
                        <div class="flex h-full w-full max-h-28 max-w-28 overflow-hidden mx-auto">
                            <img src="assets/images/black-friday-deals/jbl_headphone.jpg"
                                alt="JBL Tune 660NC Wireless On-Ear Headphones Bluetooth"
                                class="h-full w-full object-cover cursor-pointer">
                        </div>

                        <!-- Product Details -->
                        <div
                            class="p-2 sm:p-4 lg:p-2 xl:px-4 pt-2 pb-1 flex flex-col gap-y-1 sm:gap-y-2 lg:gap-y-1 xl:gap-y-2">
                            <!-- Title Product -->
                            <h3
                                class="text-base text-left font-medium line-clamp-1 min-[400px]:line-clamp-2 xl:line-clamp-3 cursor-pointer text-gray-800 hover:text-blue-500 transition duration-300 cursor-pointer">
                                Original JBL Tune 660NC Wireless On-Ear Headphones Bluetooth Noise Cancelling Earphone
                                Gaming Sport Headset Handsfree T660NC</h3>

                            <!-- Rating and Sales -->
                            <div class="hidden sm:flex items-center justify-left cursor-pointer gap-x-2">
                                <!-- Numerical Rating -->
                                <span class="text-sm lg:hidden xl:inline font-medium text-blue-500">4.5</span>

                                <div class="flex">
                                    <!-- Star Rating Images (6 stars) -->
                                    <img src="assets/icons/star-gold-favorite.png" alt="Star" class="w-4 h-4">
                                    <img src="assets/icons/star-gold-favorite.png" alt="Star" class="w-4 h-4">
                                    <img src="assets/icons/star-gold-favorite.png" alt="Star" class="w-4 h-4">
                                    <img src="assets/icons/star-gold-favorite.png" alt="Star" class="w-4 h-4">
                                    <img src="assets/icons/half-gold-star.png" alt="Star" class="w-4 h-4">
                                </div>

                                <span class="text-gray-600 text-sm">(1058)</span>
                            </div>

                            <!-- Price -->
                            <div
                                class="flex flex-col-reverse min-[400px]:flex-row lg:flex-col-reverse xl:flex-row items-start min-[400px]:items-center lg:items-start xl:items-center justify-left flex gap-y-1 min-[400px]:gap-x-2">
                                <span class="text-xl md:text-xl font-semibold text-red-600 ">$60.00</span>
                                <span class="text-sm line-through text-gray-400">$120.00</span>
                            </div>
                        </div>
                    </div>

                    <!-- Black Friday Deals Card 2 -->
                    <div
                        class="relative bg-white shadow-lg rounded-lg overflow-hidden flex flex-col transition-transform duration-300 cursor-pointer py-1">
                        <!-- Discount Badge -->
                        <span
                            class="absolute top-2 right-2 bg-red-600 text-zinc-50 text-sm font-bold px-2 py-1 rounded-lg">
                            40% OFF
                        </span>

                        <!-- Product Image -->
                        <div class="flex h-full w-full max-h-28 max-w-28 overflow-hidden mx-auto">
                            <img src="assets/images/black-friday-deals/kitchenaid.jpg" alt="Kitchen Aid mixes"
                                class="h-full w-full object-cover cursor-pointer">
                        </div>

                        <!-- Product Details -->
                        <div
                            class="p-2 sm:p-4 lg:p-2 xl:px-4 pt-2 pb-1 flex flex-col gap-y-1 sm:gap-y-2 lg:gap-y-1 xl:gap-y-2">
                            <!-- Title Product -->
                            <h3
                                class="text-base text-left font-medium line-clamp-1 min-[400px]:line-clamp-2 xl:line-clamp-3 cursor-pointer text-gray-800 hover:text-blue-500 transition duration-300 cursor-pointer">
                                Kitchen Aid mixes with three accessories home appliances kitchen aid machine stand mixer
                                device good home use</h3>

                            <!-- Rating and Sales -->
                            <div class="hidden sm:flex items-center justify-left cursor-pointer gap-x-2">
                                <!-- Numerical Rating -->
                                <span class="text-sm lg:hidden xl:inline font-medium text-blue-500">4.4</span>

                                <div class="flex">
                                    <!-- Star Rating Images (6 stars) -->
                                    <img src="assets/icons/star-gold-favorite.png" alt="Star" class="w-4 h-4">
                                    <img src="assets/icons/star-gold-favorite.png" alt="Star" class="w-4 h-4">
                                    <img src="assets/icons/star-gold-favorite.png" alt="Star" class="w-4 h-4">
                                    <img src="assets/icons/star-gold-favorite.png" alt="Star" class="w-4 h-4">
                                    <img src="assets/icons/outline-gold-star.png" alt="Star" class="w-4 h-4">
                                </div>

                                <span class="text-gray-600 text-sm">(852)</span>
                            </div>

                            <!-- Price -->
                            <div
                                class="flex flex-col-reverse min-[400px]:flex-row lg:flex-col-reverse xl:flex-row items-start min-[400px]:items-center lg:items-start xl:items-center justify-left flex gap-y-1 min-[400px]:gap-x-2">
                                <span class="text-xl md:text-xl font-semibold text-red-600 ">$180.00</span>
                                <span class="text-sm line-through text-gray-400">$300.00</span>
                            </div>
                        </div>
                    </div>

                    <!-- Black Friday Deals Card 3 -->
                    <div
                        class="relative bg-white shadow-lg rounded-lg overflow-hidden flex flex-col transition-transform duration-300 cursor-pointer py-1">
                        <!-- Discount Badge -->
                        <span
                            class="absolute top-2 right-2 bg-red-600 text-zinc-50 text-sm font-bold px-2 py-1 rounded-lg">
                            30% OFF
                        </span>

                        <!-- Product Image -->
                        <div class="flex h-full w-full max-h-28 max-w-28 overflow-hidden mx-auto">
                            <img src="assets/images/black-friday-deals/samsungqled8k.jpg"
                                alt="amsung 55 QN700C Neo QLED 8K Smart TV"
                                class="h-full w-full object-cover cursor-pointer">
                        </div>

                        <!-- Product Details -->
                        <div
                            class="p-2 sm:p-4 lg:p-2 xl:px-4 pt-2 pb-1 flex flex-col gap-y-1 sm:gap-y-2 lg:gap-y-1 xl:gap-y-2">
                            <!-- Title Product -->
                            <h3
                                class="text-base text-left font-medium line-clamp-1 min-[400px]:line-clamp-2 xl:line-clamp-3 cursor-pointer text-gray-800 hover:text-blue-500 transition duration-300 cursor-pointer">
                                Samsung 55" QN700C Neo QLED
                                8K
                                Smart TV QA55QN700CUXZN</h3>

                            <!-- Rating and Sales -->
                            <div class="hidden sm:flex items-center justify-left cursor-pointer gap-x-2">
                                <!-- Numerical Rating -->
                                <span class="text-sm lg:hidden xl:inline font-medium text-blue-500">4.5</span>

                                <div class="flex">
                                    <!-- Star Rating Images (6 stars) -->
                                    <img src="assets/icons/star-gold-favorite.png" alt="Star" class="w-4 h-4">
                                    <img src="assets/icons/star-gold-favorite.png" alt="Star" class="w-4 h-4">
                                    <img src="assets/icons/star-gold-favorite.png" alt="Star" class="w-4 h-4">
                                    <img src="assets/icons/star-gold-favorite.png" alt="Star" class="w-4 h-4">
                                    <img src="assets/icons/half-gold-star.png" alt="Star" class="w-4 h-4">
                                </div>

                                <span class="text-gray-600 text-sm">(553)</span>
                            </div>

                            <!-- Price -->
                            <div
                                class="flex flex-col-reverse min-[400px]:flex-row lg:flex-col-reverse xl:flex-row items-start min-[400px]:items-center lg:items-start xl:items-center justify-left flex gap-y-1 min-[400px]:gap-x-2">
                                <span class="text-xl md:text-xl font-semibold text-red-600 ">$817.00</span>
                                <span class="text-sm line-through text-gray-400">$1,167</span>
                            </div>
                        </div>
                    </div>

                    <!-- Black Friday Deals Card 4 -->
                    <div
                        class="relative bg-white shadow-lg rounded-lg overflow-hidden flex flex-col transition-transform duration-300 cursor-pointer py-1">
                        <!-- Discount Badge -->
                        <span
                            class="absolute top-2 right-2 bg-red-600 text-zinc-50 text-sm font-bold px-2 py-1 rounded-lg">
                            20% OFF
                        </span>

                        <!-- Product Image -->
                        <div class="flex h-full w-full max-h-28 max-w-28 overflow-hidden mx-auto">
                            <img src="assets/images/black-friday-deals/montblancperfume.jpg"
                                alt="Montblanc Legend Eau de Toilette 100 ml for men"
                                class="h-full w-full object-cover cursor-pointer">
                        </div>

                        <!-- Product Details -->
                        <div
                            class="p-2 sm:p-4 lg:p-2 xl:px-4 pt-2 pb-1 flex flex-col gap-y-1 sm:gap-y-2 lg:gap-y-1 xl:gap-y-2">
                            <!-- Title Product -->
                            <h3
                                class="text-base text-left font-medium line-clamp-1 min-[400px]:line-clamp-2 xl:line-clamp-3 cursor-pointer text-gray-800 hover:text-blue-500 transition duration-300 cursor-pointer">
                                Montblanc Legend Eau de Toilette 100 ml for Men, blends freshness and depth, opening
                                with a bright, aromatic citrus burst that transitions into a woody, floral heart, and
                                settles into a warm, sensual base.</h3>

                            <!-- Rating and Sales -->
                            <div class="hidden sm:flex items-center justify-left cursor-pointer gap-x-2">
                                <!-- Numerical Rating -->
                                <span class="text-sm lg:hidden xl:inline font-medium text-blue-500">4.4</span>

                                <div class="flex">
                                    <!-- Star Rating Images (6 stars) -->
                                    <img src="assets/icons/star-gold-favorite.png" alt="Star" class="w-4 h-4">
                                    <img src="assets/icons/star-gold-favorite.png" alt="Star" class="w-4 h-4">
                                    <img src="assets/icons/star-gold-favorite.png" alt="Star" class="w-4 h-4">
                                    <img src="assets/icons/star-gold-favorite.png" alt="Star" class="w-4 h-4">
                                    <img src="assets/icons/outline-gold-star.png" alt="Star" class="w-4 h-4">
                                </div>

                                <span class="text-gray-600 text-sm">(397)</span>
                            </div>

                            <!-- Price -->
                            <div
                                class="flex flex-col-reverse min-[400px]:flex-row lg:flex-col-reverse xl:flex-row items-start min-[400px]:items-center lg:items-start xl:items-center justify-left flex gap-y-1 min-[400px]:gap-x-2">
                                <span class="text-xl md:text-xl font-semibold text-red-600 ">$84.00</span>
                                <span class="text-sm line-through text-gray-400">$105.00</span>
                            </div>
                        </div>
                    </div>

                    <!-- Black Friday Deals Card 5 -->
                    <div
                        class="relative bg-white shadow-lg rounded-lg overflow-hidden flex flex-col transition-transform duration-300 cursor-pointer py-1">
                        <!-- Discount Badge -->
                        <span
                            class="absolute top-2 right-2 bg-red-600 text-zinc-50 text-sm font-bold px-2 py-1 rounded-lg">
                            25% OFF
                        </span>

                        <!-- Product Image -->
                        <div class="flex h-full w-full max-h-28 max-w-28 overflow-hidden mx-auto">
                            <img src="assets/images/black-friday-deals/galaxyzfold6.jpeg" alt="Samsung Galaxy Z Fold 6 "
                                class="h-full w-full object-cover cursor-pointer">
                        </div>

                        <!-- Product Details -->
                        <div
                            class="p-2 sm:p-4 lg:p-2 xl:px-4 pt-2 pb-1 flex flex-col gap-y-1 sm:gap-y-2 lg:gap-y-1 xl:gap-y-2">
                            <!-- Title Product -->
                            <h3
                                class="text-base text-left font-medium line-clamp-1 min-[400px]:line-clamp-2 xl:line-clamp-3 cursor-pointer text-gray-800 hover:text-blue-500 transition duration-300 cursor-pointer">
                                Samsung Galaxy Z Fold 6, 512GB with Snapdragon 8 Gen 3 processor </h3>

                            <!-- Rating and Sales -->
                            <div class="hidden sm:flex items-center justify-left cursor-pointer gap-x-2">
                                <!-- Numerical Rating -->
                                <span class="text-sm lg:hidden xl:inline font-medium text-blue-500">5.0</span>

                                <div class="flex">
                                    <!-- Star Rating Images (6 stars) -->
                                    <img src="assets/icons/star-gold-favorite.png" alt="Star" class="w-4 h-4">
                                    <img src="assets/icons/star-gold-favorite.png" alt="Star" class="w-4 h-4">
                                    <img src="assets/icons/star-gold-favorite.png" alt="Star" class="w-4 h-4">
                                    <img src="assets/icons/star-gold-favorite.png" alt="Star" class="w-4 h-4">
                                    <img src="assets/icons/star-gold-favorite.png" alt="Star" class="w-4 h-4">
                                </div>

                                <span class="text-gray-600 text-sm">(1124)</span>
                            </div>

                            <!-- Price -->
                            <div
                                class="flex flex-col-reverse min-[400px]:flex-row lg:flex-col-reverse xl:flex-row items-start min-[400px]:items-center lg:items-start xl:items-center justify-left flex gap-y-1 min-[400px]:gap-x-2">
                                <span class="text-xl md:text-xl font-semibold text-red-600 ">$900.00</span>
                                <span class="text-sm line-through text-gray-400">$1,200</span>
                            </div>
                        </div>
                    </div>

                    <!-- Black Friday Deals Card 6 -->
                    <div
                        class="relative bg-white shadow-lg rounded-lg overflow-hidden flex flex-col transition-transform duration-300 cursor-pointer py-1">
                        <!-- Discount Badge -->
                        <span
                            class="absolute top-2 right-2 bg-red-600 text-zinc-50 text-sm font-bold px-2 py-1 rounded-lg">
                            15% OFF
                        </span>

                        <!-- Product Image -->
                        <div class="flex h-full w-full max-h-28 max-w-28 overflow-hidden mx-auto">
                            <img src="assets/images/black-friday-deals/wisky.png"
                                alt="Singleton of Dufftown 25 Year Old Single Malt, Scotch Whisky"
                                class="h-full w-full object-cover cursor-pointer">
                        </div>

                        <!-- Product Details -->
                        <div
                            class="p-2 sm:p-4 lg:p-2 xl:px-4 pt-2 pb-1 flex flex-col gap-y-1 sm:gap-y-2 lg:gap-y-1 xl:gap-y-2">
                            <!-- Title Product -->
                            <h3
                                class="text-base text-left font-medium line-clamp-1 min-[400px]:line-clamp-2 xl:line-clamp-3 cursor-pointer text-gray-800 hover:text-blue-500 transition duration-300 cursor-pointer">
                                Singleton of Dufftown 25 Year Old Single Malt, Scotch Whisky</h3>

                            <!-- Rating and Sales -->
                            <div class="hidden sm:flex items-center justify-left cursor-pointer gap-x-2">
                                <!-- Numerical Rating -->
                                <span class="text-sm lg:hidden xl:inline font-medium text-blue-500">3.5</span>

                                <div class="flex">
                                    <!-- Star Rating Images (6 stars) -->
                                    <img src="assets/icons/star-gold-favorite.png" alt="Star" class="w-4 h-4">
                                    <img src="assets/icons/star-gold-favorite.png" alt="Star" class="w-4 h-4">
                                    <img src="assets/icons/star-gold-favorite.png" alt="Star" class="w-4 h-4">
                                    <img src="assets/icons/half-gold-star.png" alt="Star" class="w-4 h-4">
                                    <img src="assets/icons/outline-gold-star.png" alt="Star" class="w-4 h-4">
                                </div>

                                <span class="text-gray-600 text-sm">(426)</span>
                            </div>

                            <!-- Price -->
                            <div
                                class="flex flex-col-reverse min-[400px]:flex-row lg:flex-col-reverse xl:flex-row items-start min-[400px]:items-center lg:items-start xl:items-center justify-left flex gap-y-1 min-[400px]:gap-x-2">
                                <span class="text-xl md:text-xl font-semibold text-red-600 ">$595.00</span>
                                <span class="text-sm line-through text-gray-400">$700.00</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
    </section>

    <!-- Shop by Categories Section -->
    <section id="categories-section" class="flex items-center justify-center">
        <div class="container flex flex-col gap-y-4 w-full rounded-lg px-2 py-4 sm:px-4 md:py-6 lg:py-8">
            <!-- Section Header -->
            <header class="flex flex-col sm:flex-row items-center justify-between gap-x-4">
                <!-- Best-selling Title -->
                <h2 class="text-2xl font-bold text-zinc-950 text-left hover:underline">Shop by Categories</h2>

                <!-- See More Products Link -->
                <a href="#all-products"
                    class="text-blue-500 hover:text-blue-700 text-sm font-semibold underline cursor-pointer transition duration-300">See
                    more categories</a>
            </header>

            <main class="grid grid-cols-2 md:grid-cols-4 gap-2 sm:gap-6 md:gap-4 lg:gap-6 text-center">

                <!-- Electronics & Devices -->
                <div
                    class="group flex flex-col max-h-52 gap-y-2 bg-white p-2 rounded-lg shadow-lg transition-transform duration-500 cursor-pointer hover:scale-105">
                    <!-- Category Image -->
                    <div class="min-h-24 h-full w-full flex items-center justify-center overflow-hidden mx-auto">
                        <img src="assets/images/shop-by-categories/eletronics.jpg" alt="Electronics & Devices Category "
                            class="h-full w-full object-cover rounded-md ">
                    </div>

                    <!-- Category Title -->
                    <div class="flex items-center justify-center">
                        <span
                            class="text-lg text-center font-semibold group-hover:text-indigo-500 transition-all duration-300 line-clamp-1">Electronics
                            & Devices</span>
                    </div>
                </div>

                <!-- Fashion -->
                <div
                    class="group flex flex-col max-h-52 gap-y-2 bg-white p-2 rounded-lg shadow-lg transition-transform duration-500 cursor-pointer hover:scale-105">
                    <!-- Category Image -->
                    <div class="min-h-24 h-full w-full flex items-center justify-center overflow-hidden mx-auto">
                        <img src="assets/images/shop-by-categories/fashion.jpeg" alt="Fashion"
                            class="h-full w-full object-cover rounded-md ">
                    </div>

                    <!-- Category Title -->
                    <div class="flex items-center justify-center">
                        <span
                            class="text-lg text-center font-semibold group-hover:text-indigo-500 transition-all duration-300 line-clamp-1">Fashion</span>
                    </div>
                </div>

                <!-- Home & Living -->
                <div
                    class="group flex flex-col max-h-52 gap-y-2 bg-white p-2 rounded-lg shadow-lg transition-transform duration-500 cursor-pointer hover:scale-105">
                    <!-- Category Image -->
                    <div class="min-h-24 h-full w-full flex items-center justify-center overflow-hidden mx-auto">
                        <img src="assets/images/shop-by-categories/home_and_living.jpg" alt="Home & Living"
                            class="h-full w-full object-cover rounded-md ">
                    </div>

                    <!-- Category Title -->
                    <div class="flex items-center justify-center">
                        <span
                            class="text-lg text-center font-semibold group-hover:text-indigo-500 transition-all duration-300 line-clamp-1">Home
                            & Living</span>
                    </div>
                </div>

                <!-- Sports -->
                <div
                    class="group flex flex-col max-h-52 gap-y-2 bg-white p-2 rounded-lg shadow-lg transition-transform duration-500 cursor-pointer hover:scale-105">
                    <!-- Category Image -->
                    <div class="min-h-24 h-full w-full flex items-center justify-center overflow-hidden mx-auto">
                        <img src="assets/images/shop-by-categories/sports.jpg" alt="Sports"
                            class="h-full w-full object-cover rounded-md ">
                    </div>

                    <!-- Category Title -->
                    <div class="flex items-center justify-center">
                        <span
                            class="text-lg text-center font-semibold group-hover:text-indigo-500 transition-all duration-300 line-clamp-1">Sports</span>
                    </div>
                </div>

                <!-- Books & e-Books -->
                <div
                    class="group flex flex-col max-h-52 gap-y-2 bg-white p-2 rounded-lg shadow-lg transition-transform duration-500 cursor-pointer hover:scale-105">
                    <!-- Category Image -->
                    <div class="min-h-24 h-full w-full flex items-center justify-center overflow-hidden mx-auto">
                        <img src="assets/images/shop-by-categories/books.jpg" alt="Books & e-Books"
                            class="h-full w-full object-cover rounded-md ">
                    </div>

                    <!-- Category Title -->
                    <div class="flex items-center justify-center">
                        <span
                            class="text-lg text-center font-semibold group-hover:text-indigo-500 transition-all duration-300 line-clamp-1">Books
                            & e-Books</span>
                    </div>
                </div>

                <!-- Pets -->
                <div
                    class="group flex flex-col max-h-52 gap-y-2 bg-white p-2 rounded-lg shadow-lg transition-transform duration-500 cursor-pointer hover:scale-105">
                    <!-- Category Image -->
                    <div class="min-h-24 h-full w-full flex items-center justify-center overflow-hidden mx-auto">
                        <img src="assets/images/shop-by-categories/pet.jpg" alt="Pets"
                            class="h-full w-full object-cover rounded-md ">
                    </div>

                    <!-- Category Title -->
                    <div class="flex items-center justify-center">
                        <span
                            class="text-lg text-center font-semibold group-hover:text-indigo-500 transition-all duration-300 line-clamp-1">Pets</span>
                    </div>
                </div>

                <!-- Beauty & Health -->
                <div
                    class="group flex flex-col max-h-52 gap-y-2 bg-white p-2 rounded-lg shadow-lg transition-transform duration-500 cursor-pointer hover:scale-105">
                    <!-- Category Image -->
                    <div class="min-h-24 h-full w-full flex items-center justify-center overflow-hidden mx-auto">
                        <img src="assets/images/shop-by-categories/health&care.jpg" alt="Beauty & Health"
                            class="h-full w-full object-cover rounded-md ">
                    </div>

                    <!-- Category Title -->
                    <div class="flex items-center justify-center">
                        <span
                            class="text-lg text-center font-semibold group-hover:text-indigo-500 transition-all duration-300 line-clamp-1">Beauty
                            & Health</span>
                    </div>
                </div>

                <!-- Food & Drinks -->
                <div
                    class="group flex flex-col max-h-52 gap-y-2 bg-white p-2 rounded-lg shadow-lg transition-transform duration-500 cursor-pointer hover:scale-105">
                    <!-- Category Image -->
                    <div class="min-h-24 h-full w-full flex items-center justify-center overflow-hidden mx-auto">
                        <img src="assets/images/shop-by-categories/food_and_drinks_2.jpg" alt="Food & Drinks"
                            class="h-full w-full object-cover rounded-md ">
                    </div>

                    <!-- Category Title -->
                    <div class="flex items-center justify-center">
                        <span
                            class="text-lg text-center font-semibold group-hover:text-indigo-500 transition-all duration-300 line-clamp-1">Food
                            & Drinks</span>
                    </div>
                </div>
            </main>
        </div>
    </section>

    <!-- Best Selling Section -->
    <section id="best-selling-section"
        class="relative bg-gradient-to-r from-violet-800 via-blue-600 to-sky-500 mx-auto px-2 sm:px-6 py-8">

        <!-- Overlay Banner -->
        <div class="bg-white bg-opacity-10 rounded-lg p-4 sm:p-8 shadow-lg">
            <div class="relative container mx-auto text-center flex flex-col gap-y-6">
                <!-- Section Header -->
                <div class="flex flex-col sm:flex-row items-center justify-between gap-x-4">
                    <!-- Best-selling Title -->
                    <h2 class="text-2xl font-bold text-zinc-50 text-left hover:underline">Best Selling</h2>

                    <!-- See More Products Link -->
                    <a href="#all-products"
                        class="text-zinc-50 hover:text-zinc-300 text-sm font-medium underline cursor-pointer transition duration-300">See
                        more products</a>
                </div>

                <!-- Section Products -->
                <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4 2xl:gap-8">

                    <!-- Best Selling Card 1 -->
                    <div
                        class="relative bg-white shadow-lg rounded-lg overflow-hidden flex flex-col transition-transform duration-500 cursor-pointer py-1">

                        <!-- Product Image -->
                        <div class="flex h-full w-full max-h-28 max-w-28 overflow-hidden mx-auto">
                            <img src="assets/images/best-selling/airpods4.jpg" alt="Apple AirPods 4"
                                class="h-full w-full object-cover cursor-pointer">
                        </div>

                        <!-- Product Details -->
                        <div
                            class="p-2 sm:p-4 lg:p-2 xl:px-4 pt-2 pb-1 flex flex-col gap-y-1 sm:gap-y-2 lg:gap-y-1 xl:gap-y-2">
                            <!-- Title Product -->
                            <h3
                                class="text-base text-left font-medium line-clamp-1 min-[400px]:line-clamp-2 xl:line-clamp-3 cursor-pointer text-gray-800 hover:text-blue-500 transition duration-300 cursor-pointer">
                                Apple AirPods 4 offer advanced features like Personalized Spatial Audio, Active Noise
                                Cancellation
                            </h3>

                            <!-- Rating and Sales -->
                            <div class="hidden sm:flex items-center justify-left cursor-pointer gap-x-2">
                                <!-- Numerical Rating -->
                                <span class="text-sm lg:hidden xl:inline font-medium text-blue-500">4.5</span>

                                <div class="flex">
                                    <!-- Star Rating Images (5 stars) -->
                                    <img src="assets/icons/star-gold-favorite.png" alt="Star" class="w-4 h-4">
                                    <img src="assets/icons/star-gold-favorite.png" alt="Star" class="w-4 h-4">
                                    <img src="assets/icons/star-gold-favorite.png" alt="Star" class="w-4 h-4">
                                    <img src="assets/icons/star-gold-favorite.png" alt="Star" class="w-4 h-4">
                                    <img src="assets/icons/half-gold-star.png" alt="Star" class="w-4 h-4">
                                </div>

                                <span class="text-gray-600 text-sm">(5490)</span>
                            </div>

                            <!-- Price and Free Shipping -->
                            <div
                                class="flex flex-col min-[480px]:flex-row md:flex-col gap-y-2 min-[480px]:gap-x-2 md:gap-y-2 justify-left min-[480px]:justify-between md:justify-left items-start min-[480px]:items-center md:items-start">

                                <!-- Price -->
                                <span class="text-xl md:text-xl font-semibold text-green-600">$129.00</span>

                                <!-- Free Shipping Icon with Text -->
                                <div class="flex items-center gap-x-2 text-sm text-gray-600">
                                    <img src="assets/icons/delivery.png" alt="Free Shipping" class="w-5 h-5">
                                    <span class="font-bold text-green-600">Free Shipping</span>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Best Selling Card 2 -->
                    <div
                        class="relative bg-white shadow-lg rounded-lg overflow-hidden flex flex-col transition-transform duration-500 cursor-pointer py-1">

                        <!-- Product Image -->
                        <div class="flex h-full w-full max-h-28 max-w-28 overflow-hidden mx-auto">
                            <img src="assets/images/best-selling/odissey-G3.jpg"
                                alt="SAMSUNG 24-Inch Odyssey G3 (G30D) Series FHD Gaming Monitor, 1ms, 180Hz, AMD FreeSync, Adjustable Stand, Black Equalizer, Virtual Aim Point, Eye Saver Mode, Flicker-Free"
                                class="h-full w-full object-cover cursor-pointer">
                        </div>

                        <!-- Product Details -->
                        <div
                            class="p-2 sm:p-4 lg:p-2 xl:px-4 pt-2 pb-1 flex flex-col gap-y-1 sm:gap-y-2 lg:gap-y-1 xl:gap-y-2">
                            <!-- Title Product -->
                            <h3
                                class="text-base text-left font-medium line-clamp-1 min-[400px]:line-clamp-2 xl:line-clamp-3 cursor-pointer text-gray-800 hover:text-blue-500 transition duration-300 cursor-pointer">
                                SAMSUNG 24-Inch Odyssey G3 (G30D) Series FHD Gaming Monitor, 1ms, 180Hz, AMD FreeSync,
                                Adjustable Stand, Black Equalizer, Virtual Aim Point, Eye Saver Mode, Flicker-Free
                            </h3>

                            <!-- Rating and Sales -->
                            <div class="hidden sm:flex items-center justify-left cursor-pointer gap-x-2">
                                <!-- Numerical Rating -->
                                <span class="text-sm lg:hidden xl:inline font-medium text-blue-500">4.6</span>

                                <div class="flex">
                                    <!-- Star Rating Images (5 stars) -->
                                    <img src="assets/icons/star-gold-favorite.png" alt="Star" class="w-4 h-4">
                                    <img src="assets/icons/star-gold-favorite.png" alt="Star" class="w-4 h-4">
                                    <img src="assets/icons/star-gold-favorite.png" alt="Star" class="w-4 h-4">
                                    <img src="assets/icons/star-gold-favorite.png" alt="Star" class="w-4 h-4">
                                    <img src="assets/icons/half-gold-star.png" alt="Star" class="w-4 h-4">
                                </div>

                                <span class="text-gray-600 text-sm">(3463)</span>
                            </div>

                            <!-- Price and Free Shipping -->
                            <div
                                class="flex flex-col min-[480px]:flex-row md:flex-col gap-y-2 min-[480px]:gap-x-2 md:gap-y-2 justify-left min-[480px]:justify-between md:justify-left items-start min-[480px]:items-center md:items-start">

                                <!-- Price -->
                                <span class="text-xl md:text-xl font-semibold text-green-600">$114.99</span>

                                <!-- Free Shipping Icon with Text -->
                                <div class="flex items-center gap-x-2 text-sm text-gray-600">
                                    <img src="assets/icons/delivery.png" alt="Free Shipping" class="w-5 h-5">
                                    <span class="font-bold text-green-600">Free Shipping</span>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Best Selling Card 3 -->
                    <div
                        class="relative bg-white shadow-lg rounded-lg overflow-hidden flex flex-col transition-transform duration-500 cursor-pointer py-1">

                        <!-- Product Image -->
                        <div class="flex h-full w-full max-h-28 max-w-28 overflow-hidden mx-auto">
                            <img src="assets/images/best-selling/Instant_Pot_Vortex_Plus_6QT.jpg"
                                alt="Instant Pot Vortex Plus 6QT ClearCook Air Fryer, Clear Windows, Custom Program Options, 6-in-1 Functions, Crisps, Broils, Roasts, Dehydrates, Bakes, Reheats, from the Makers of Instant Pot, Black"
                                class="h-full w-full object-cover cursor-pointer">
                        </div>

                        <!-- Product Details -->
                        <div
                            class="p-2 sm:p-4 lg:p-2 xl:px-4 pt-2 pb-1 flex flex-col gap-y-1 sm:gap-y-2 lg:gap-y-1 xl:gap-y-2">
                            <!-- Title Product -->
                            <h3
                                class="text-base text-left font-medium line-clamp-1 min-[400px]:line-clamp-2 xl:line-clamp-3 cursor-pointer text-gray-800 hover:text-blue-500 transition duration-300 cursor-pointer">
                                Instant Pot Vortex Plus 6QT ClearCook Air Fryer, Clear Windows, Custom Program Options,
                                6-in-1 Functions, Crisps, Broils, Roasts, Dehydrates, Bakes, Reheats, from the Makers of
                                Instant Pot, Black
                            </h3>

                            <!-- Rating and Sales -->
                            <div class="hidden sm:flex items-center justify-left cursor-pointer gap-x-2">
                                <!-- Numerical Rating -->
                                <span class="text-sm lg:hidden xl:inline font-medium text-blue-500">4.7</span>

                                <div class="flex">
                                    <!-- Star Rating Images (5 stars) -->
                                    <img src="assets/icons/star-gold-favorite.png" alt="Star" class="w-4 h-4">
                                    <img src="assets/icons/star-gold-favorite.png" alt="Star" class="w-4 h-4">
                                    <img src="assets/icons/star-gold-favorite.png" alt="Star" class="w-4 h-4">
                                    <img src="assets/icons/star-gold-favorite.png" alt="Star" class="w-4 h-4">
                                    <img src="assets/icons/half-gold-star.png" alt="Star" class="w-4 h-4">
                                </div>

                                <span class="text-gray-600 text-sm">(7004)</span>
                            </div>

                            <!-- Price and Free Shipping -->
                            <div
                                class="flex flex-col min-[480px]:flex-row md:flex-col gap-y-2 min-[480px]:gap-x-2 md:gap-y-2 justify-left min-[480px]:justify-between md:justify-left items-start min-[480px]:items-center md:items-start">

                                <!-- Price -->
                                <span class="text-xl md:text-xl font-semibold text-green-600">$79.95</span>

                                <!-- Free Shipping Icon with Text -->
                                <div class="flex items-center gap-x-2 text-sm text-gray-600">
                                    <img src="assets/icons/delivery.png" alt="Free Shipping" class="w-5 h-5">
                                    <span class="font-bold text-green-600">Free Shipping</span>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Best Selling Card 4 -->
                    <div
                        class="relative bg-white shadow-lg rounded-lg overflow-hidden flex flex-col transition-transform duration-500 cursor-pointer py-1">

                        <!-- Product Image -->
                        <div class="flex h-full w-full max-h-28 max-w-28 overflow-hidden mx-auto">
                            <img src="assets/images/best-selling/ipadpro11.jpg"
                                alt="Apple iPad Pro 11-Inch (M4): Built for Apple Intelligence, Ultra Retina XDR Display, 256GB, 12MP Front/Back Camera, LiDAR Scanner, Wi-Fi 6E + 5G Cellular, All-Day Battery Life — Space Black"
                                class="h-full w-full object-cover cursor-pointer">
                        </div>

                        <!-- Product Details -->
                        <div
                            class="p-2 sm:p-4 lg:p-2 xl:px-4 pt-2 pb-1 flex flex-col gap-y-1 sm:gap-y-2 lg:gap-y-1 xl:gap-y-2">
                            <!-- Title Product -->
                            <h3
                                class="text-base text-left font-medium line-clamp-1 min-[400px]:line-clamp-2 xl:line-clamp-3 cursor-pointer text-gray-800 hover:text-blue-500 transition duration-300 cursor-pointer">
                                Apple iPad Pro 11-Inch (M4): Built for Apple Intelligence, Ultra Retina XDR Display,
                                256GB, 12MP Front/Back Camera, LiDAR Scanner, Wi-Fi 6E + 5G Cellular, All-Day Battery
                                Life — Space Black
                            </h3>

                            <!-- Rating and Sales -->
                            <div class="hidden sm:flex items-center justify-left cursor-pointer gap-x-2">
                                <!-- Numerical Rating -->
                                <span class="text-sm lg:hidden xl:inline font-medium text-blue-500">4.7</span>

                                <div class="flex">
                                    <!-- Star Rating Images (5 stars) -->
                                    <img src="assets/icons/star-gold-favorite.png" alt="Star" class="w-4 h-4">
                                    <img src="assets/icons/star-gold-favorite.png" alt="Star" class="w-4 h-4">
                                    <img src="assets/icons/star-gold-favorite.png" alt="Star" class="w-4 h-4">
                                    <img src="assets/icons/star-gold-favorite.png" alt="Star" class="w-4 h-4">
                                    <img src="assets/icons/half-gold-star.png" alt="Star" class="w-4 h-4">
                                </div>

                                <span class="text-gray-600 text-sm">(3512)</span>
                            </div>

                            <!-- Price and Free Shipping -->
                            <div
                                class="flex flex-col min-[480px]:flex-row md:flex-col gap-y-2 min-[480px]:gap-x-2 md:gap-y-2 justify-left min-[480px]:justify-between md:justify-left items-start min-[480px]:items-center md:items-start">

                                <!-- Price -->
                                <span class="text-xl md:text-xl font-semibold text-green-600">$2,118</span>

                                <!-- Free Shipping Icon with Text -->
                                <div class="flex items-center gap-x-2 text-sm text-gray-600">
                                    <img src="assets/icons/delivery.png" alt="Free Shipping" class="w-5 h-5">
                                    <span class="font-bold text-green-600">Free Shipping</span>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Best Selling Card 5 -->
                    <div
                        class="relative bg-white shadow-lg rounded-lg overflow-hidden flex flex-col transition-transform duration-500 cursor-pointer py-1">

                        <!-- Product Image -->
                        <div class="flex h-full w-full max-h-28 max-w-28 overflow-hidden mx-auto">
                            <img src="assets/images/best-selling/PS5PRO.jpg"
                                alt="PlayStation 5 Pro 2TB Experience ultra-fast loading times and seamless gameplay with a powerful upgraded GPU and SSD,With 2TB of storage, there's ample space for your favorite games, updates, and DLCs."
                                class="h-full w-full object-cover cursor-pointer">
                        </div>

                        <!-- Product Details -->
                        <div
                            class="p-2 sm:p-4 lg:p-2 xl:px-4 pt-2 pb-1 flex flex-col gap-y-1 sm:gap-y-2 lg:gap-y-1 xl:gap-y-2">
                            <!-- Title Product -->
                            <h3
                                class="text-base text-left font-medium line-clamp-1 min-[400px]:line-clamp-2 xl:line-clamp-3 cursor-pointer text-gray-800 hover:text-blue-500 transition duration-300 cursor-pointer">
                                PlayStation 5 Pro 2TB Experience ultra-fast loading times and seamless gameplay with a
                                powerful upgraded GPU and SSD,With 2TB of storage, there's ample space for your favorite
                                games, updates, and DLCs.
                            </h3>

                            <!-- Rating and Sales -->
                            <div class="hidden sm:flex items-center justify-left cursor-pointer gap-x-2">
                                <!-- Numerical Rating -->
                                <span class="text-sm lg:hidden xl:inline font-medium text-blue-500">4.3</span>

                                <div class="flex">
                                    <!-- Star Rating Images (5 stars) -->
                                    <img src="assets/icons/star-gold-favorite.png" alt="Star" class="w-4 h-4">
                                    <img src="assets/icons/star-gold-favorite.png" alt="Star" class="w-4 h-4">
                                    <img src="assets/icons/star-gold-favorite.png" alt="Star" class="w-4 h-4">
                                    <img src="assets/icons/star-gold-favorite.png" alt="Star" class="w-4 h-4">
                                    <img src="assets/icons/outline-gold-star.png" alt="Star" class="w-4 h-4">
                                </div>

                                <span class="text-gray-600 text-sm">(1637)</span>
                            </div>

                            <!-- Price and Free Shipping -->
                            <div
                                class="flex flex-col min-[480px]:flex-row md:flex-col gap-y-2 min-[480px]:gap-x-2 md:gap-y-2 justify-left min-[480px]:justify-between md:justify-left items-start min-[480px]:items-center md:items-start">

                                <!-- Price -->
                                <span class="text-xl md:text-xl font-semibold text-green-600">$529.98</span>

                                <!-- Free Shipping Icon with Text -->
                                <div class="flex items-center gap-x-2 text-sm text-gray-600">
                                    <img src="assets/icons/delivery.png" alt="Free Shipping" class="w-5 h-5">
                                    <span class="font-bold text-green-600">Free Shipping</span>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Best Selling Card 6 -->
                    <div
                        class="relative bg-white shadow-lg rounded-lg overflow-hidden flex flex-col transition-transform duration-500 cursor-pointer py-1">

                        <!-- Product Image -->
                        <div class="flex h-full w-full max-h-28 max-w-28 overflow-hidden mx-auto">
                            <img src="assets/images/best-selling/samsungqled.jpg"
                                alt="SAMSUNG 32-Inch Class QLED 4K Q60D Series Quantum HDR Smart TV w/Object Tracking Sound Lite, Motion Xcelerator, Slim Design, Gaming Hub, Alexa Built-in (QN32Q60D, 2024 Model)"
                                class="h-full w-full object-cover cursor-pointer">
                        </div>

                        <!-- Product Details -->
                        <div
                            class="p-2 sm:p-4 lg:p-2 xl:px-4 pt-2 pb-1 flex flex-col gap-y-1 sm:gap-y-2 lg:gap-y-1 xl:gap-y-2">
                            <!-- Title Product -->
                            <h3
                                class="text-base text-left font-medium line-clamp-1 min-[400px]:line-clamp-2 xl:line-clamp-3 cursor-pointer text-gray-800 hover:text-blue-500 transition duration-300 cursor-pointer">
                                SAMSUNG 32-Inch Class QLED 4K Q60D Series Quantum HDR Smart TV w/Object Tracking Sound
                                Lite, Motion Xcelerator, Slim Design, Gaming Hub, Alexa Built-in (QN32Q60D, 2024 Model)
                            </h3>

                            <!-- Rating and Sales -->
                            <div class="hidden sm:flex items-center justify-left cursor-pointer gap-x-2">
                                <!-- Numerical Rating -->
                                <span class="text-sm lg:hidden xl:inline font-medium text-blue-500">4.3</span>

                                <div class="flex">
                                    <!-- Star Rating Images (5 stars) -->
                                    <img src="assets/icons/star-gold-favorite.png" alt="Star" class="w-4 h-4">
                                    <img src="assets/icons/star-gold-favorite.png" alt="Star" class="w-4 h-4">
                                    <img src="assets/icons/star-gold-favorite.png" alt="Star" class="w-4 h-4">
                                    <img src="assets/icons/star-gold-favorite.png" alt="Star" class="w-4 h-4">
                                    <img src="assets/icons/outline-gold-star.png" alt="Star" class="w-4 h-4">
                                </div>

                                <span class="text-gray-600 text-sm">(569)</span>
                            </div>

                            <!-- Price and Free Shipping -->
                            <div
                                class="flex flex-col min-[480px]:flex-row md:flex-col gap-y-2 min-[480px]:gap-x-2 md:gap-y-2 justify-left min-[480px]:justify-between md:justify-left items-start min-[480px]:items-center md:items-start">

                                <!-- Price -->
                                <span class="text-xl md:text-xl font-semibold text-green-600">$397.99</span>

                                <!-- Free Shipping Icon with Text -->
                                <div class="flex items-center gap-x-2 text-sm text-gray-600">
                                    <img src="assets/icons/delivery.png" alt="Free Shipping" class="w-5 h-5">
                                    <span class="font-bold text-green-600">Free Shipping</span>
                                </div>
                            </div>

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

    <!-- Deal of the Day and Banner Deals Section  -->
    <section id="deals-of-the-day-section-1" class="flex items-center justify-center">
        <div
            class="container grid grid-cols-1 lg:grid-cols-[3fr,9fr] gap-y-4 lg:gap-y-0 gap-x-4 xl:gap-x-6 p-2 py-6 sm:px-4 md:py-6 lg:py-8 ">

            <!-- Featured Deal Card -->
            <div class="flex flex-col gap-y-2 lg:gap-y-4 bg-white rounded-lg shadow-lg p-4 2xl:p-6 relative cursor-pointer">
                <h2 class="text-xl 2xl:text-2xl font-bold text-left text-zinc-950 hover:underline">Deal of the Day</h2>

                <!-- Product Image -->
                <div class="flex max-w-72 max-h-72 lg:w-full lg:h-full mx-auto ">
                    <img src="./assets/images/smartphones-trendings/iphone-16-pro.jpg" alt="Apple iPhone 16 Pro 1TB"
                        class="h-full w-full">
                </div>

                <!-- Product Details -->
                <div class="flex flex-col gap-y-2">

                    <!-- Product Title -->
                    <h3
                        class="text-base text-xl line-clamp-3 lg:line-clamp-1 font-semibold hover:text-blue-500 transition duration-300 cursor-pointer">
                        Apple
                        iPhone 16 Pro 1TB
                    </h3>

                    <!-- Rating -->
                    <div class="flex gap-x-2 items-center text-sm">
                        <!-- Numerical Rating -->
                        <div class="">
                            <span class="font-semibold text-blue-500 text-sm 2xl:text-base">4.5</span>
                        </div>

                        <!-- Stars Count -->
                        <div class="flex">
                            <img src="./assets/icons/star-gold-favorite.png" alt="star filled with yellow"
                                class="w-4 h-4">
                            <img src="./assets/icons/star-gold-favorite.png" alt="star filled with yellow"
                                class="w-4 h-4">
                            <img src="./assets/icons/star-gold-favorite.png" alt="star filled with yellow"
                                class="w-4 h-4">
                            <img src="./assets/icons/star-gold-favorite.png" alt="star filled with yellow"
                                class="w-4 h-4">
                            <img src="./assets/icons/star-gold-favorite.png" alt="star filled with yellow"
                                class="w-4 h-4">
                        </div>

                        <!-- Sales -->
                        <span class="text-sm 2xl:text-base">(4567)</span>
                    </div>

                    <footer class="flex justify-between lg:flex-col lg:gap-y-2">

                        <!-- Pricing -->
                        <div class="flex items-center justify-between">
                            <!-- Old Price -->
                            <div class="flex gap-x-2 items-center">
                                <span
                                    class="font-semibold text-xl sm:text-2xl lg:text-xl 2xl:text-2xl text-red-600">$799.50</span>
                                <span
                                    class="font-medium text-xs sm:text-sm lg:text-base text-zinc-400 line-through">$1.599</span>
                            </div>

                            <div
                                class="text-sm sm:text-base lg:text-xs 2xl:text-sm rounded-lg absolute lg:static top-4 right-4 px-2 py-1  font-semibold text-base bg-red-700 text-zinc-50">
                                50%
                                OFF
                            </div>
                        </div>

                        <!-- Free Shipping -->
                        <div class="flex gap-x-2 items-center">
                            <img src="./assets/icons/delivery.png" alt="" class="h-5 sm:h-8 lg:h-5 2xl:h-6">
                            <span class="text-green-600 text-xs sm:text-base lg:text-sm font-bold">Free Shipping</span>
                        </div>
                    </footer>
                </div>
            </div>

            <div class="grid grid-rows-2 gap-y-8 lg:gap-y-4 bg-white rounded-lg shadow-lg p-4 xl:p-6">

                <!-- Smartphones Treding Section -->
                <div class="flex flex-col gap-y-2">
                    <!-- Title Section -->
                    <header class="flex flex-col sm:flex-row items-center sm:justify-between">
                        <h3 class="text-zinc-950 font-bold text-xl cursor-pointer hover:underline">Smartphones Trending
                        </h3>

                        <a href="#"
                            class="text-sm font-semibold underline text-blue-500 hover:text-blue-700 transition-all duration-300">See
                            more
                            products</a>
                    </header>

                    <!-- Products -->
                    <div
                        class="grid grid-cols-2 sm:grid-cols-4 lg:grid-cols-6 gap-2 sm:gap-y-0 xl:gap-x-4 h-full w-full">

                        <!-- Card 1 -->
                        <div class="bg-white flex flex-col gap-y-2 rounded-lg shadow-lg cursor-pointer">

                            <!-- Product Image -->
                            <div
                                class="flex h-full w-full max-w-32 max-h-32 lg:max-w-20 lg:max-h-20 xl:max-w-24 xl:max-h-24 overflow-hidden mx-auto">
                                <img src="assets/images/smartphones-trendings/samsunga15.jpg"
                                    alt="Samsung Galaxy A15 5G, 128GB 6GB RAM"
                                    class="h-full w-full object-cover rounded">
                            </div>

                            <div class="p-2 text-zinc-50">
                                <!-- Product Title -->
                                <span
                                    class="text-base lg:text-sm text-zinc-950 font-semibold hover:text-blue-500 transition duration-300 cursor-pointer line-clamp-2 lg:line-clamp-1">Samsung
                                    Galaxy A15 5G, 128GB 6GB RAM</span>

                                <!-- Rating and Sales -->
                                <div
                                    class="flex lg:hidden 2xl:flex items-center justify-left cursor-pointer gap-x-2 sm:gap-x-1 md:gap-x-2">
                                    <!-- Numerical Rating -->
                                    <span class="text-sm lg:hidden xl:inline font-medium text-blue-500">4.2</span>

                                    <div class="flex">
                                        <!-- Star Rating Images (5 stars) -->
                                        <img src="assets/icons/star-gold-favorite.png" alt="Star" class="w-3 h-3">
                                        <img src="assets/icons/star-gold-favorite.png" alt="Star" class="w-3 h-3">
                                        <img src="assets/icons/star-gold-favorite.png" alt="Star" class="w-3 h-3">
                                        <img src="assets/icons/star-gold-favorite.png" alt="Star" class="w-3 h-3">
                                        <img src="assets/icons/outline-gold-star.png" alt="Star" class="w-3 h-3">
                                    </div>

                                    <span
                                        class="hidden min-[400px]:inline text-gray-600 text-xs 2xl:text-sm">(1568)</span>
                                </div>

                                <!-- Pricing -->
                                <div
                                    class="flex flex-col-reverse min-[400px]:flex-row lg:flex-col-reverse xl:flex-row gap-x-2 items-start min-[400px]:items-center lg:items-start xl:items-center ">
                                    <!-- New Price -->
                                    <span class="font-semibold text-lg lg:text-base text-green-600">$187.99</span>

                                    <!-- Old Price -->
                                    <span
                                        class="font-medium text-sm lg:text-xs text-zinc-400 line-through">$299.99</span>
                                </div>

                                <!-- Free Shipping -->
                                <div class="hidden xl:flex gap-x-2 items-center">
                                    <img src="./assets/icons/delivery.png" alt="" class="h-4">
                                    <span class="text-green-600 text-xs font-bold">Free Shipping</span>
                                </div>
                            </div>
                        </div>

                        <!-- Card 2 -->
                        <div class="bg-white flex flex-col gap-y-2 rounded-lg shadow-lg cursor-pointer">

                            <!-- Product Image -->
                            <div
                                class="flex h-full w-full max-w-32 max-h-32 lg:max-w-20 lg:max-h-20 xl:max-w-24 xl:max-h-24 overflow-hidden mx-auto">
                                <img src="assets/images/smartphones-trendings/samsungs24ultra.jpg"
                                    alt="Samsung Galaxy S24 Ultra, 12GB RAM" class="h-full w-full object-cover rounded">
                            </div>

                            <div class="p-2 text-zinc-50">
                                <!-- Product Title -->
                                <span
                                    class="text-base lg:text-sm text-zinc-950 font-semibold hover:text-blue-500 transition duration-300 cursor-pointer line-clamp-2 lg:line-clamp-1">Samsung
                                    Galaxy S24 Ultra, 12GB RAM</span>

                                <!-- Rating and Sales -->
                                <div
                                    class="flex lg:hidden 2xl:flex items-center justify-left cursor-pointer gap-x-2 sm:gap-x-1 md:gap-x-2">
                                    <!-- Numerical Rating -->
                                    <span class="text-sm lg:hidden xl:inline font-medium text-blue-500">4.5</span>

                                    <div class="flex">
                                        <!-- Star Rating Images (5 stars) -->
                                        <img src="assets/icons/star-gold-favorite.png" alt="Star" class="w-3 h-3">
                                        <img src="assets/icons/star-gold-favorite.png" alt="Star" class="w-3 h-3">
                                        <img src="assets/icons/star-gold-favorite.png" alt="Star" class="w-3 h-3">
                                        <img src="assets/icons/star-gold-favorite.png" alt="Star" class="w-3 h-3">
                                        <img src="assets/icons/half-gold-star.png" alt="Star" class="w-3 h-3">
                                    </div>

                                    <span
                                        class="hidden min-[400px]:inline text-gray-600 text-xs 2xl:text-sm">(3401)</span>
                                </div>

                                <!-- Pricing -->
                                <div
                                    class="flex flex-col-reverse min-[400px]:flex-row lg:flex-col-reverse xl:flex-row gap-x-2 items-start min-[400px]:items-center lg:items-start xl:items-center ">
                                    <!-- New Price -->
                                    <span class="font-semibold text-lg lg:text-base text-green-600">$949.99</span>

                                    <!-- Old Price -->
                                    <span
                                        class="font-medium text-sm lg:text-xs text-zinc-400 line-through">$1.299</span>
                                </div>

                                <!-- Free Shipping -->
                                <div class="hidden xl:flex gap-x-2 items-center">
                                    <img src="./assets/icons/delivery.png" alt="" class="h-4">
                                    <span class="text-green-600 text-xs font-bold">Free Shipping</span>
                                </div>
                            </div>
                        </div>

                        <!-- Card 3 -->
                        <div class="bg-white flex flex-col gap-y-2 rounded-lg shadow-lg cursor-pointer">

                            <!-- Product Image -->
                            <div
                                class="flex h-full w-full max-w-32 max-h-32 lg:max-w-20 lg:max-h-20 xl:max-w-24 xl:max-h-24 overflow-hidden mx-auto">
                                <img src="assets/images/smartphones-trendings/iphone13_pro_max.jpg"
                                    alt="Apple iPhone 13 Pro Max 256GB" class="h-full w-full object-cover rounded">
                            </div>

                            <div class="p-2 text-zinc-50">
                                <!-- Product Title -->
                                <span
                                    class="text-base lg:text-sm text-zinc-950 font-semibold hover:text-blue-500 transition duration-300 cursor-pointer line-clamp-2 lg:line-clamp-1">Apple
                                    iPhone 13 Pro Max 256GB</span>

                                <!-- Rating and Sales -->
                                <div
                                    class="flex lg:hidden 2xl:flex items-center justify-left cursor-pointer gap-x-2 sm:gap-x-1 md:gap-x-2">
                                    <!-- Numerical Rating -->
                                    <span class="text-sm lg:hidden xl:inline font-medium text-blue-500">3.5</span>

                                    <div class="flex">
                                        <!-- Star Rating Images (5 stars) -->
                                        <img src="assets/icons/star-gold-favorite.png" alt="Star" class="w-3 h-3">
                                        <img src="assets/icons/star-gold-favorite.png" alt="Star" class="w-3 h-3">
                                        <img src="assets/icons/star-gold-favorite.png" alt="Star" class="w-3 h-3">
                                        <img src="assets/icons/outline-gold-star.png" alt="Star" class="w-3 h-3">
                                        <img src="assets/icons/outline-gold-star.png" alt="Star" class="w-3 h-3">
                                    </div>

                                    <span
                                        class="hidden min-[400px]:inline text-gray-600 text-xs 2xl:text-sm">(1360)</span>
                                </div>

                                <!-- Pricing -->
                                <div
                                    class="flex flex-col-reverse min-[400px]:flex-row lg:flex-col-reverse xl:flex-row gap-x-2 items-start min-[400px]:items-center lg:items-start xl:items-center ">
                                    <!-- New Price -->
                                    <span class="font-semibold text-lg lg:text-base text-green-600">$158.99</span>

                                    <!-- Old Price -->
                                    <span
                                        class="font-medium text-sm lg:text-xs text-zinc-400 line-through">$320.99</span>
                                </div>

                                <!-- Free Shipping -->
                                <div class="hidden xl:flex gap-x-2 items-center">
                                    <img src="./assets/icons/delivery.png" alt="" class="h-4">
                                    <span class="text-green-600 text-xs font-bold">Free Shipping</span>
                                </div>
                            </div>
                        </div>

                        <!-- Card 4 -->
                        <div class="bg-white flex flex-col gap-y-2 rounded-lg shadow-lg cursor-pointer">

                            <!-- Product Image -->
                            <div
                                class="flex h-full w-full max-w-32 max-h-32 lg:max-w-20 lg:max-h-20 xl:max-w-24 xl:max-h-24 overflow-hidden mx-auto">
                                <img src="assets/images/smartphones-trendings/xiaomiredmi13pro.jpeg" alt="Xiaomi
                                Redmi Note 13 Pro 5G, 256GB" class="h-full w-full object-cover rounded">
                            </div>

                            <div class="p-2 text-zinc-50">
                                <!-- Product Title -->
                                <span
                                    class="text-base lg:text-sm text-zinc-950 font-semibold hover:text-blue-500 transition duration-300 cursor-pointer line-clamp-2 lg:line-clamp-1">Xiaomi
                                    Redmi Note 13 Pro 5G, 256GB</span>

                                <!-- Rating and Sales -->
                                <div
                                    class="flex lg:hidden 2xl:flex items-center justify-left cursor-pointer gap-x-2 sm:gap-x-1 md:gap-x-2">
                                    <!-- Numerical Rating -->
                                    <span class="text-sm lg:hidden xl:inline font-medium text-blue-500">4.6</span>

                                    <div class="flex">
                                        <!-- Star Rating Images (5 stars) -->
                                        <img src="assets/icons/star-gold-favorite.png" alt="Star" class="w-3 h-3">
                                        <img src="assets/icons/star-gold-favorite.png" alt="Star" class="w-3 h-3">
                                        <img src="assets/icons/star-gold-favorite.png" alt="Star" class="w-3 h-3">
                                        <img src="assets/icons/star-gold-favorite.png" alt="Star" class="w-3 h-3">
                                        <img src="assets/icons/half-gold-star.png" alt="Star" class="w-3 h-3">
                                    </div>

                                    <span
                                        class="hidden min-[400px]:inline text-gray-600 text-xs 2xl:text-sm">(3125)</span>
                                </div>

                                <!-- Pricing -->
                                <div
                                    class="flex flex-col-reverse min-[400px]:flex-row lg:flex-col-reverse xl:flex-row gap-x-2 items-start min-[400px]:items-center lg:items-start xl:items-center ">
                                    <!-- New Price -->
                                    <span class="font-semibold text-lg lg:text-base text-green-600">$284.99</span>

                                    <!-- Old Price -->
                                    <span
                                        class="font-medium text-sm lg:text-xs text-zinc-400 line-through">$350.99</span>
                                </div>

                                <!-- Free Shipping -->
                                <div class="hidden xl:flex gap-x-2 items-center">
                                    <img src="./assets/icons/delivery.png" alt="" class="h-4">
                                    <span class="text-green-600 text-xs font-bold">Free Shipping</span>
                                </div>
                            </div>
                        </div>

                        <!-- Card 5 -->
                        <div class="flex bg-white sm:hidden lg:flex flex-col gap-y-2 rounded-lg shadow-lg cursor-pointer">

                            <!-- Product Image -->
                            <div
                                class="flex h-full w-full max-w-32 max-h-32 lg:max-w-20 lg:max-h-20 xl:max-w-24 xl:max-h-24 overflow-hidden mx-auto">
                                <img src="assets/images/smartphones-trendings/pocox6.jpg" alt="Xiaomi
                                Poco X6 Pro 5G, 512GB" class="h-full w-full object-cover rounded">
                            </div>

                            <div class="p-2 text-zinc-50">
                                <!-- Product Title -->
                                <span
                                    class="text-base lg:text-sm text-zinc-950 font-semibold hover:text-blue-500 transition duration-300 cursor-pointer line-clamp-2 lg:line-clamp-1">Xiaomi
                                    Poco X6 Pro 5G, 512GB</span>

                                <!-- Rating and Sales -->
                                <div
                                    class="flex lg:hidden 2xl:flex items-center justify-left cursor-pointer gap-x-2 sm:gap-x-1 md:gap-x-2">
                                    <!-- Numerical Rating -->
                                    <span class="text-sm lg:hidden xl:inline font-medium text-blue-500">4.4</span>

                                    <div class="flex">
                                        <!-- Star Rating Images (5 stars) -->
                                        <img src="assets/icons/star-gold-favorite.png" alt="Star" class="w-3 h-3">
                                        <img src="assets/icons/star-gold-favorite.png" alt="Star" class="w-3 h-3">
                                        <img src="assets/icons/star-gold-favorite.png" alt="Star" class="w-3 h-3">
                                        <img src="assets/icons/star-gold-favorite.png" alt="Star" class="w-3 h-3">
                                        <img src="assets/icons/half-gold-star.png" alt="Star" class="w-3 h-3">
                                    </div>

                                    <span
                                        class="hidden min-[400px]:inline text-gray-600 text-xs 2xl:text-sm">(2160)</span>
                                </div>

                                <!-- Pricing -->
                                <div
                                    class="flex flex-col-reverse min-[400px]:flex-row lg:flex-col-reverse xl:flex-row gap-x-2 items-start min-[400px]:items-center lg:items-start xl:items-center ">
                                    <!-- New Price -->
                                    <span class="font-semibold text-lg lg:text-base text-green-600">$322.00</span>

                                    <!-- Old Price -->
                                    <span
                                        class="font-medium text-sm lg:text-xs text-zinc-400 line-through">$400.00</span>
                                </div>

                                <!-- Free Shipping -->
                                <div class="hidden xl:flex gap-x-2 items-center">
                                    <img src="./assets/icons/delivery.png" alt="" class="h-4">
                                    <span class="text-green-600 text-xs font-bold">Free Shipping</span>
                                </div>
                            </div>
                        </div>

                        <!-- Card 6 -->
                        <div class="flex bg-white sm:hidden lg:flex flex-col gap-y-2 rounded-lg shadow-lg cursor-pointer">

                            <!-- Product Image -->
                            <div
                                class="flex h-full w-full max-w-32 max-h-32 lg:max-w-20 lg:max-h-20 xl:max-w-24 xl:max-h-24 overflow-hidden mx-auto">
                                <img src="assets/images/smartphones-trendings/motog34.jpg"
                                    alt="Motorola Moto G34 5G, 256GB" class="h-full w-full object-cover rounded">
                            </div>

                            <div class="p-2 text-zinc-50">
                                <!-- Product Title -->
                                <span
                                    class="text-base lg:text-sm text-zinc-950 font-semibold hover:text-blue-500 transition duration-300 cursor-pointer line-clamp-2 lg:line-clamp-1">Motorola
                                    Moto G34 5G, 256GB</span>

                                <!-- Rating and Sales -->
                                <div
                                    class="flex lg:hidden 2xl:flex items-center justify-left cursor-pointer gap-x-2 sm:gap-x-1 md:gap-x-2">
                                    <!-- Numerical Rating -->
                                    <span class="text-sm lg:hidden xl:inline font-medium text-blue-500">4.4</span>

                                    <div class="flex">
                                        <!-- Star Rating Images (5 stars) -->
                                        <img src="assets/icons/star-gold-favorite.png" alt="Star" class="w-3 h-3">
                                        <img src="assets/icons/star-gold-favorite.png" alt="Star" class="w-3 h-3">
                                        <img src="assets/icons/star-gold-favorite.png" alt="Star" class="w-3 h-3">
                                        <img src="assets/icons/star-gold-favorite.png" alt="Star" class="w-3 h-3">
                                        <img src="assets/icons/outline-gold-star.png" alt="Star" class="w-3 h-3">
                                    </div>

                                    <span
                                        class="hidden min-[400px]:inline text-gray-600 text-xs 2xl:text-sm">(1060)</span>
                                </div>

                                <!-- Pricing -->
                                <div
                                    class="flex flex-col-reverse min-[400px]:flex-row lg:flex-col-reverse xl:flex-row gap-x-2 items-start min-[400px]:items-center lg:items-start xl:items-center ">
                                    <!-- New Price -->
                                    <span class="font-semibold text-lg lg:text-base text-green-600">$169.99</span>

                                    <!-- Old Price -->
                                    <span
                                        class="font-medium text-sm lg:text-xs text-zinc-400 line-through">$200.00</span>
                                </div>

                                <!-- Free Shipping -->
                                <div class="hidden xl:flex gap-x-2 items-center">
                                    <img src="./assets/icons/delivery.png" alt="" class="h-4">
                                    <span class="text-green-600 text-xs font-bold">Free Shipping</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Notebooks Trending -->
                <div class="flex flex-col gap-y-2">
                    <!-- Title Section -->
                    <header class="flex items-center flex-col sm:flex-row sm:justify-between">
                        <h3 class="text-zinc-950 font-bold text-xl cursor-pointer hover:underline">Notebook Trending
                        </h3>

                        <a href="#"
                            class="text-sm font-semibold underline text-blue-500 hover:text-blue-700 transition-all duration-300">See
                            more
                            products</a>
                    </header>

                    <!-- Products -->
                    <div
                        class="grid grid-cols-2 sm:grid-cols-4 lg:grid-cols-6 gap-2 sm:gap-y-0 xl:gap-x-4 h-full w-full">

                        <!-- Card 1 -->
                        <div class="bg-white flex flex-col gap-y-2 rounded-lg shadow-lg cursor-pointer">

                            <!-- Product Image -->
                            <div
                                class="flex h-full w-full max-w-32 max-h-32 lg:max-w-20 lg:max-h-20 xl:max-w-24 xl:max-h-24 overflow-hidden mx-auto">
                                <img src="assets/images/notebook-trendings/dell-i15.jpg" alt="Dell
                                Latitude 14 5000 14 Touchscreen FHD" class="h-full w-full object-cover rounded">
                            </div>

                            <div class="p-2 text-zinc-50">
                                <!-- Product Title -->
                                <span
                                    class="text-base lg:text-sm text-zinc-950 font-semibold hover:text-blue-500 transition duration-300 cursor-pointer line-clamp-2 lg:line-clamp-1">Dell
                                    Latitude 14 5000 14" Touchscreen FHD</span>

                                <!-- Rating and Sales -->
                                <div
                                    class="flex lg:hidden 2xl:flex items-center justify-left cursor-pointer gap-x-2 sm:gap-x-1 md:gap-x-2">
                                    <!-- Numerical Rating -->
                                    <span class="text-sm lg:hidden xl:inline font-medium text-blue-500">4.4</span>

                                    <div class="flex">
                                        <!-- Star Rating Images (5 stars) -->
                                        <img src="assets/icons/star-gold-favorite.png" alt="Star" class="w-3 h-3">
                                        <img src="assets/icons/star-gold-favorite.png" alt="Star" class="w-3 h-3">
                                        <img src="assets/icons/star-gold-favorite.png" alt="Star" class="w-3 h-3">
                                        <img src="assets/icons/star-gold-favorite.png" alt="Star" class="w-3 h-3">
                                        <img src="assets/icons/outline-gold-star.png" alt="Star" class="w-3 h-3">
                                    </div>

                                    <span
                                        class="hidden min-[400px]:inline text-gray-600 text-xs 2xl:text-sm">(2378)</span>
                                </div>

                                <!-- Pricing -->
                                <div
                                    class="flex flex-col-reverse min-[400px]:flex-row lg:flex-col-reverse xl:flex-row gap-x-2 items-start min-[400px]:items-center lg:items-start xl:items-center ">
                                    <!-- New Price -->
                                    <span class="font-semibold text-lg lg:text-base text-green-600">$769.00</span>

                                    <!-- Old Price -->
                                    <span
                                        class="font-medium text-sm lg:text-xs text-zinc-400 line-through">$968.00</span>
                                </div>

                                <!-- Free Shipping -->
                                <div class="hidden xl:flex gap-x-2 items-center">
                                    <img src="./assets/icons/delivery.png" alt="" class="h-4">
                                    <span class="text-green-600 text-xs font-bold">Free Shipping</span>
                                </div>
                            </div>
                        </div>

                        <!-- Card 2 -->
                        <div class="bg-white flex flex-col gap-y-2 rounded-lg shadow-lg cursor-pointer">

                            <!-- Product Image -->
                            <div
                                class="flex h-full w-full max-w-32 max-h-32 lg:max-w-20 lg:max-h-20 xl:max-w-24 xl:max-h-24 overflow-hidden mx-auto">
                                <img src="assets/images/notebook-trendings/galaxy-book-4.jpg" alt="SAMSUNG
                                14' Galaxy Book4 Pro Laptop PC Computer, Intel Core 7 "
                                    class="h-full w-full object-cover rounded">
                            </div>

                            <div class="p-2 text-zinc-50">
                                <!-- Product Title -->
                                <span
                                    class="text-base lg:text-sm text-zinc-950 font-semibold hover:text-blue-500 transition duration-300 cursor-pointer line-clamp-2 lg:line-clamp-1">Samsung
                                    14' Galaxy Book4 Pro Laptop PC Computer, Intel Core 7</span>

                                <!-- Rating and Sales -->
                                <div
                                    class="flex lg:hidden 2xl:flex items-center justify-left cursor-pointer gap-x-2 sm:gap-x-1 md:gap-x-2">
                                    <!-- Numerical Rating -->
                                    <span class="text-sm lg:hidden xl:inline font-medium text-blue-500">4.5</span>

                                    <div class="flex">
                                        <!-- Star Rating Images (5 stars) -->
                                        <img src="assets/icons/star-gold-favorite.png" alt="Star" class="w-3 h-3">
                                        <img src="assets/icons/star-gold-favorite.png" alt="Star" class="w-3 h-3">
                                        <img src="assets/icons/star-gold-favorite.png" alt="Star" class="w-3 h-3">
                                        <img src="assets/icons/star-gold-favorite.png" alt="Star" class="w-3 h-3">
                                        <img src="assets/icons/half-gold-star.png" alt="Star" class="w-3 h-3">
                                    </div>

                                    <span
                                        class="hidden min-[400px]:inline text-gray-600 text-xs 2xl:text-sm">(3320)</span>
                                </div>

                                <!-- Pricing -->
                                <div
                                    class="flex flex-col-reverse min-[400px]:flex-row lg:flex-col-reverse xl:flex-row gap-x-2 items-start min-[400px]:items-center lg:items-start xl:items-center ">
                                    <!-- New Price -->
                                    <span class="font-semibold text-lg lg:text-base text-green-600">$1000</span>

                                    <!-- Old Price -->
                                    <span
                                        class="font-medium text-sm lg:text-xs text-zinc-400 line-through">$1.440</span>
                                </div>

                                <!-- Free Shipping -->
                                <div class="hidden xl:flex gap-x-2 items-center">
                                    <img src="./assets/icons/delivery.png" alt="" class="h-4">
                                    <span class="text-green-600 text-xs font-bold">Free Shipping</span>
                                </div>
                            </div>
                        </div>

                        <!-- Card 3 -->
                        <div class="bg-white flex flex-col gap-y-2 rounded-lg shadow-lg cursor-pointer">

                            <!-- Product Image -->
                            <div
                                class="flex h-full w-full max-w-32 max-h-32 lg:max-w-20 lg:max-h-20 xl:max-w-24 xl:max-h-24 overflow-hidden mx-auto">
                                <img src="assets/images/notebook-trendings/acer-nitro.jpg" alt="acer
                                Nitro V Gaming Laptop | Intel Core i5-13420H"
                                    class="h-full w-full object-cover rounded">
                            </div>

                            <div class="p-2 text-zinc-50">
                                <!-- Product Title -->
                                <span
                                    class="text-base lg:text-sm text-zinc-950 font-semibold hover:text-blue-500 transition duration-300 cursor-pointer line-clamp-2 lg:line-clamp-1">Acer
                                    Nitro V Gaming Laptop Intel Core i5-13420H </span>

                                <!-- Rating and Sales -->
                                <div
                                    class="flex lg:hidden 2xl:flex items-center justify-left cursor-pointer gap-x-2 sm:gap-x-1 md:gap-x-2">
                                    <!-- Numerical Rating -->
                                    <span class="text-sm lg:hidden xl:inline font-medium text-blue-500">4.5</span>

                                    <div class="flex">
                                        <!-- Star Rating Images (5 stars) -->
                                        <img src="assets/icons/star-gold-favorite.png" alt="Star" class="w-3 h-3">
                                        <img src="assets/icons/star-gold-favorite.png" alt="Star" class="w-3 h-3">
                                        <img src="assets/icons/star-gold-favorite.png" alt="Star" class="w-3 h-3">
                                        <img src="assets/icons/star-gold-favorite.png" alt="Star" class="w-3 h-3">
                                        <img src="assets/icons/half-gold-star.png" alt="Star" class="w-3 h-3">
                                    </div>

                                    <span
                                        class="hidden min-[400px]:inline text-gray-600 text-xs 2xl:text-sm">(1871)</span>
                                </div>

                                <!-- Pricing -->
                                <div
                                    class="flex flex-col-reverse min-[400px]:flex-row lg:flex-col-reverse xl:flex-row gap-x-2 items-start min-[400px]:items-center lg:items-start xl:items-center ">
                                    <!-- New Price -->
                                    <span class="font-semibold text-lg lg:text-base text-green-600">$599.99</span>

                                    <!-- Old Price -->
                                    <span
                                        class="font-medium text-sm lg:text-xs text-zinc-400 line-through">$799.99</span>
                                </div>

                                <!-- Free Shipping -->
                                <div class="hidden xl:flex gap-x-2 items-center">
                                    <img src="./assets/icons/delivery.png" alt="" class="h-4">
                                    <span class="text-green-600 text-xs font-bold">Free Shipping</span>
                                </div>
                            </div>
                        </div>

                        <!-- Card 4 -->
                        <div class="bg-white flex flex-col gap-y-2 rounded-lg shadow-lg cursor-pointer">

                            <!-- Product Image -->
                            <div
                                class="flex h-full w-full max-w-32 max-h-32 lg:max-w-20 lg:max-h-20 xl:max-w-24 xl:max-h-24 overflow-hidden mx-auto">
                                <img src="assets/images/notebook-trendings/dell-g15.jpg" alt="Dell
                                Inspiron 15 Touchscreen Laptop, 15.6 FHD" class="h-full w-full object-cover rounded">
                            </div>

                            <div class="p-2 text-zinc-50">
                                <!-- Product Title -->
                                <span
                                    class="text-base lg:text-sm text-zinc-950 font-semibold hover:text-blue-500 transition duration-300 cursor-pointer line-clamp-2 lg:line-clamp-1">Dell
                                    Inspiron 15 Touchscreen Laptop, 15.6" FHD</span>

                                <!-- Rating and Sales -->
                                <div
                                    class="flex lg:hidden 2xl:flex items-center justify-left cursor-pointer gap-x-2 sm:gap-x-1 md:gap-x-2">
                                    <!-- Numerical Rating -->
                                    <span class="text-sm lg:hidden xl:inline font-medium text-blue-500">4.4</span>

                                    <div class="flex">
                                        <!-- Star Rating Images (5 stars) -->
                                        <img src="assets/icons/star-gold-favorite.png" alt="Star" class="w-3 h-3">
                                        <img src="assets/icons/star-gold-favorite.png" alt="Star" class="w-3 h-3">
                                        <img src="assets/icons/star-gold-favorite.png" alt="Star" class="w-3 h-3">
                                        <img src="assets/icons/star-gold-favorite.png" alt="Star" class="w-3 h-3">
                                        <img src="assets/icons/outline-gold-star.png" alt="Star" class="w-3 h-3">
                                    </div>

                                    <span
                                        class="hidden min-[400px]:inline text-gray-600 text-xs 2xl:text-sm">(1014)</span>
                                </div>

                                <!-- Pricing -->
                                <div
                                    class="flex flex-col-reverse min-[400px]:flex-row lg:flex-col-reverse xl:flex-row gap-x-2 items-start min-[400px]:items-center lg:items-start xl:items-center ">
                                    <!-- New Price -->
                                    <span class="font-semibold text-lg lg:text-base text-green-600">$479.99</span>

                                    <!-- Old Price -->
                                    <span
                                        class="font-medium text-sm lg:text-xs text-zinc-400 line-through">$509.99</span>
                                </div>

                                <!-- Free Shipping -->
                                <div class="hidden xl:flex gap-x-2 items-center">
                                    <img src="./assets/icons/delivery.png" alt="" class="h-4">
                                    <span class="text-green-600 text-xs font-bold">Free Shipping</span>
                                </div>
                            </div>
                        </div>

                        <!-- Card 5 -->
                        <div class="flex bg-white sm:hidden lg:flex flex-col gap-y-2 rounded-lg shadow-lg cursor-pointer">

                            <!-- Product Image -->
                            <div
                                class="flex h-full w-full max-w-32 max-h-32 lg:max-w-20 lg:max-h-20 xl:max-w-24 xl:max-h-24 overflow-hidden mx-auto">
                                <img src="assets/images/notebook-trendings/lenovo-ideapad-gaming.jpg" alt="Lenovo
                                15ARH7, Ideapad Gaming 3 15.6 FHD" class="h-full w-full object-cover rounded">
                            </div>

                            <div class="p-2 text-zinc-50">
                                <!-- Product Title -->
                                <span
                                    class="text-base lg:text-sm text-zinc-950 font-semibold hover:text-blue-500 transition duration-300 cursor-pointer line-clamp-2 lg:line-clamp-1">Lenovo
                                    15ARH7, Ideapad Gaming 3 15.6" FHD</span>

                                <!-- Rating and Sales -->
                                <div
                                    class="flex lg:hidden 2xl:flex items-center justify-left cursor-pointer gap-x-2 sm:gap-x-1 md:gap-x-2">
                                    <!-- Numerical Rating -->
                                    <span class="text-sm lg:hidden xl:inline font-medium text-blue-500">4.5</span>

                                    <div class="flex">
                                        <!-- Star Rating Images (5 stars) -->
                                        <img src="assets/icons/star-gold-favorite.png" alt="Star" class="w-3 h-3">
                                        <img src="assets/icons/star-gold-favorite.png" alt="Star" class="w-3 h-3">
                                        <img src="assets/icons/star-gold-favorite.png" alt="Star" class="w-3 h-3">
                                        <img src="assets/icons/star-gold-favorite.png" alt="Star" class="w-3 h-3">
                                        <img src="assets/icons/half-gold-star.png" alt="Star" class="w-3 h-3">
                                    </div>

                                    <span
                                        class="hidden min-[400px]:inline text-gray-600 text-xs 2xl:text-sm">(3170)</span>
                                </div>

                                <!-- Pricing -->
                                <div
                                    class="flex flex-col-reverse min-[400px]:flex-row lg:flex-col-reverse xl:flex-row gap-x-2 items-start min-[400px]:items-center lg:items-start xl:items-center ">
                                    <!-- New Price -->
                                    <span class="font-semibold text-lg lg:text-base text-green-600">$859.00</span>

                                    <!-- Old Price -->
                                    <span class="font-medium text-sm lg:text-xs text-zinc-400 line-through">$1000</span>
                                </div>

                                <!-- Free Shipping -->
                                <div class="hidden xl:flex gap-x-2 items-center">
                                    <img src="./assets/icons/delivery.png" alt="" class="h-4">
                                    <span class="text-green-600 text-xs font-bold">Free Shipping</span>
                                </div>
                            </div>
                        </div>

                        <!-- Card 6 -->
                        <div class="flex bg-white sm:hidden lg:flex flex-col gap-y-2 rounded-lg shadow-lg cursor-pointer">

                            <!-- Product Image -->
                            <div
                                class="flex h-full w-full max-w-32 max-h-32 lg:max-w-20 lg:max-h-20 xl:max-w-24 xl:max-h-24 overflow-hidden mx-auto">
                                <img src="assets/images/notebook-trendings/asus-vivobook-go-15.jpg" alt="ASUS
                                Vivobook Go 15.6” FHD Slim Laptop" class="h-full w-full object-cover rounded">
                            </div>

                            <div class="p-2 text-zinc-50">
                                <!-- Product Title -->
                                <span
                                    class="text-base lg:text-sm text-zinc-950 font-semibold hover:text-blue-500 transition duration-300 cursor-pointer line-clamp-2 lg:line-clamp-1">ASUS
                                    Vivobook Go 15.6” FHD Slim Laptop</span>

                                <!-- Rating and Sales -->
                                <div
                                    class="flex lg:hidden 2xl:flex items-center justify-left cursor-pointer gap-x-2 sm:gap-x-1 md:gap-x-2">
                                    <!-- Numerical Rating -->
                                    <span class="text-sm lg:hidden xl:inline font-medium text-blue-500">4.4</span>

                                    <div class="flex">
                                        <!-- Star Rating Images (5 stars) -->
                                        <img src="assets/icons/star-gold-favorite.png" alt="Star" class="w-3 h-3">
                                        <img src="assets/icons/star-gold-favorite.png" alt="Star" class="w-3 h-3">
                                        <img src="assets/icons/star-gold-favorite.png" alt="Star" class="w-3 h-3">
                                        <img src="assets/icons/star-gold-favorite.png" alt="Star" class="w-3 h-3">
                                        <img src="assets/icons/outline-gold-star.png" alt="Star" class="w-3 h-3">
                                    </div>

                                    <span
                                        class="hidden min-[400px]:inline text-gray-600 text-xs 2xl:text-sm">(2160)</span>
                                </div>

                                <!-- Pricing -->
                                <div
                                    class="flex flex-col-reverse min-[400px]:flex-row lg:flex-col-reverse xl:flex-row gap-x-2 items-start min-[400px]:items-center lg:items-start xl:items-center ">
                                    <!-- New Price -->
                                    <span class="font-semibold text-lg lg:text-base text-green-600">$319.99</span>

                                    <!-- Old Price -->
                                    <span
                                        class="font-medium text-sm lg:text-xs text-zinc-400 line-through">$499.99</span>
                                </div>

                                <!-- Free Shipping -->
                                <div class="hidden xl:flex gap-x-2 items-center">
                                    <img src="./assets/icons/delivery.png" alt="" class="h-4">
                                    <span class="text-green-600 text-xs font-bold">Free Shipping</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
    </section>

    <!-- Up To 50% OFF section 1 -->
    <section id="up-to-50-off-section-1" class="flex items-center justify-center">
        <!-- Container div cards -->
        <div
            class="container flex flex-col lg:grid lg:grid-cols-2 lg:grid-rows-2 gap-4 2xl:gap-6 w-full h-full px-2 sm:px-4">
            <!-- CARD 1 -->
            <div class="flex justify-center items-center shadow-lg rounded-lg overflow-hidden bg-white">
                <div
                    class="h-full w-full flex flex-col gap-y-4 min-[400px]:gap-y-2 min-[600px]:gap-y-4 p-4 min-[400px]:p-4 min-[500px]:px-6 xl:p-6  justify-center">
                    <!-- Card Title -->
                    <h4 class="text-lg min-[400px]:text-xs font-medium xl:text-xs tracking-widest uppercase">
                        Home
                        Makeover</h4>

                    <!-- Card Description -->
                    <p
                        class="max-[399px]:hidden text-base min-[480px]:text-lg min-[500px]:text-xl md:text-2xl lg:text-xl xl:text-2xl uppercase font-medium">
                        Up to 50%
                        OFF<br>Activate Your
                        Coupons
                    </p>

                    <!-- See More button -->
                    <button
                        class="max-[399px]:w-full inline-flex self-start shrink-0 items-center justify-center p-2 min-[400px]:px-4 min-[400px]:py-2 xl:px-6 xl:py-2 rounded text-xs min-[500px]:text-sm font-medium text-zinc-50 bg-sky-500 hover:bg-sky-700 transtion-all duration-300"
                        type="button">See More</button>
                </div>

                <!-- Image Card -->
                <div
                    class="shrink-0 max-h-36 max-w-36 min-[400px]:max-h-44 min-[400px]:max-w-44  min-[500px]:max-h-52 min-[500px]:max-w-52 min-[600px]:max-h-56 min-[600px]:max-w-56 md:max-h-64 md:md:max-w-64 lg:max-h-52 lg:max-w-52 xl:max-w-56 xl:max-h-56 2xl:max-h-60 2xl:max-w-60 h-full w-full  text-zinc-950 bg-white">
                    <img src="assets/images/up-to-50-off/pans-and-pots.jpg" alt="kit-pans-and-pots">
                </div>
            </div>

            <!-- CARD 2 -->
            <div class="flex justify-center items-center shadow-lg rounded-lg overflow-hidden bg-white">
                <div
                    class="h-full w-full flex flex-col gap-y-4 min-[400px]:gap-y-2 min-[600px]:gap-y-4 p-4 min-[400px]:p-4 min-[500px]:px-6 xl:p-6  justify-center">
                    <!-- Card Title -->
                    <h4 class="text-lg min-[400px]:text-xs font-medium xl:text-xs tracking-widest uppercase">
                        Sports Essentials</h4>

                    <!-- Card Description -->
                    <p
                        class="max-[399px]:hidden text-base min-[480px]:text-lg min-[500px]:text-xl md:text-2xl lg:text-xl xl:text-2xl uppercase font-medium">
                        Up to 50%
                        OFF<br>Free Shipping
                    </p>

                    <!-- See More button -->
                    <button
                        class="max-[399px]:w-full inline-flex self-start shrink-0 items-center justify-center p-2 min-[400px]:px-4 min-[400px]:py-2 xl:px-6 xl:py-2 rounded text-xs min-[500px]:text-sm font-medium text-zinc-50 bg-sky-500 hover:bg-sky-700 transtion-all duration-300"
                        type="button">See More</button>
                </div>

                <!-- Image Card -->
                <div
                    class="shrink-0 max-h-36 max-w-36 min-[400px]:max-h-44 min-[400px]:max-w-44  min-[500px]:max-h-52 min-[500px]:max-w-52 min-[600px]:max-h-56 min-[600px]:max-w-56 md:max-h-64 md:md:max-w-64 lg:max-h-52 lg:max-w-52 xl:max-w-56 xl:max-h-56 2xl:max-h-60 2xl:max-w-60 h-full w-full  text-zinc-950 bg-white">
                    <img src="assets/images/up-to-50-off/bicycle.jpg" alt="cyclist">
                </div>
            </div>

            <!-- CARD 3 -->
            <div class="flex justify-center items-center shadow-lg rounded-lg overflow-hidden bg-white">
                <div
                    class="h-full w-full flex flex-col gap-y-4 min-[400px]:gap-y-2 min-[600px]:gap-y-4 p-4 min-[400px]:p-4 min-[500px]:px-6 xl:p-6  justify-center">
                    <!-- Card Title -->
                    <h4 class="text-lg min-[400px]:text-xs font-medium xl:text-xs tracking-widest uppercase">
                        Men's Fragrances</h4>

                    <!-- Card Description -->
                    <p
                        class="max-[399px]:hidden text-base min-[480px]:text-lg min-[500px]:text-xl md:text-2xl lg:text-xl xl:text-2xl uppercase font-medium">
                        Up to 60% OFF<br>Free Shipping</p>

                    <!-- See More button -->
                    <button
                        class="max-[399px]:w-full inline-flex self-start shrink-0 items-center justify-center p-2 min-[400px]:px-4 min-[400px]:py-2 xl:px-6 xl:py-2 rounded text-xs min-[500px]:text-sm font-medium text-zinc-50 bg-sky-500 hover:bg-sky-700 transtion-all duration-300"
                        type="button">See More</button>
                </div>

                <!-- Image Card -->
                <div
                    class="shrink-0 max-h-36 max-w-36 min-[400px]:max-h-44 min-[400px]:max-w-44  min-[500px]:max-h-52 min-[500px]:max-w-52 min-[600px]:max-h-56 min-[600px]:max-w-56 md:max-h-64 md:md:max-w-64 lg:max-h-52 lg:max-w-52 xl:max-w-56 xl:max-h-56 2xl:max-h-60 2xl:max-w-60 h-full w-full  text-zinc-950 bg-white">
                    <img src="assets/images/up-to-50-off/men-s-fragrance.jpg" alt="mens-fragrance">
                </div>
            </div>

            <!-- CARD 4 -->
            <div class="flex justify-center items-center shadow-lg rounded-lg overflow-hidden bg-white">
                <div
                    class="h-full w-full flex flex-col gap-y-4 min-[400px]:gap-y-2 min-[600px]:gap-y-4 p-4 min-[400px]:p-4 min-[500px]:px-6 xl:p-6  justify-center">
                    <!-- Card Title -->
                    <h4 class="text-lg min-[400px]:text-xs font-medium xl:text-xs tracking-widest uppercase">
                        Sneakers</h4>

                    <!-- Card Description -->
                    <p
                        class="max-[399px]:hidden text-base min-[480px]:text-lg min-[500px]:text-xl md:text-2xl lg:text-xl xl:text-2xl uppercase font-medium">
                        Up to 50% OFF<br>Activate Your Coupons
                    </p>

                    <!-- See More button -->
                    <button
                        class="max-[399px]:w-full inline-flex self-start shrink-0 items-center justify-center p-2 min-[400px]:px-4 min-[400px]:py-2 xl:px-6 xl:py-2 rounded text-xs min-[500px]:text-sm font-medium text-zinc-50 bg-sky-500 hover:bg-sky-700 transtion-all duration-300"
                        type="button">See More</button>
                </div>

                <!-- Image Card -->
                <div
                    class="shrink-0 max-h-36 max-w-36 min-[400px]:max-h-44 min-[400px]:max-w-44  min-[500px]:max-h-52 min-[500px]:max-w-52 min-[600px]:max-h-56 min-[600px]:max-w-56 md:max-h-64 md:md:max-w-64 lg:max-h-52 lg:max-w-52 xl:max-w-56 xl:max-h-56 2xl:max-h-60 2xl:max-w-60 h-full w-full  text-zinc-950 bg-white">
                    <img src="assets/images/up-to-50-off/puma_sneaker.jpg" alt="puma_sneaker">
                </div>
            </div>
        </div>
    </section>

    <!-- Christmas Decorations Section -->
    <section id="christmas-decorations-section" class="flex items-center justify-center">

        <div class="container flex flex-col gap-y-6 w-full rounded-lg p-2 py-6 sm:px-4 md:py-6 lg:py-8 ">

            <!-- Section Title and Link -->
            <header class="flex flex-col sm:flex-row items-center sm:justify-between">
                <h3 class="text-zinc-950 font-bold text-2xl cursor-pointer hover:underline">
                    Christmas
                    Decorations
                </h3>

                <a href="#"
                    class="text-sm font-semibold underline text-blue-500 hover:text-blue-700 transition-all duration-300">See
                    more
                    products</a>
            </header>

            <!-- Products List -->
            <div class="grid grid-cols-2 gap-2 min-[400px]:gap-4 lg:gap-2 xl:gap-4 md:grid-cols-3 lg:grid-cols-6">

                <!-- Product Card 1 -->
                <div class="bg-white rounded-lg flex flex-col gap-y-2 p-1 shadow-lg cursor-pointer">

                    <!-- Product Image -->
                    <div class="h-32 min-[400px]:h-40 lg:h-32 xl:h-40 overflow-hidden flex items-center justify-center">

                        <!-- Image Card -->
                        <div class="h-full w-full max-w-32 min-[400px]:max-w-40 lg:w-32 xl:w-40 ">
                            <img src="assets/images/christmas-decoration/xmas-tree.jpg" alt="Christmas-tree"
                                class="rounded h-full w-full object-cover">
                        </div>
                    </div>

                    <!-- Product Details -->
                    <div class="flex flex-col sm:gap-y-1 p-1">
                        <!-- Product Title -->
                        <h4
                            class="text-base font-semibold line-clamp-2 hover:text-blue-500 transition duration-300 cursor-pointer">
                            Christmas tree size 150 cm made with recycled materials</h4>

                        <!-- Ratings -->
                        <div class="flex gap-x-2 items-center ">

                            <!-- Rating Number -->
                            <span class="text-sm text-blue-500 font-semibold">4.4</span>

                            <!-- Star Rating -->
                            <div class="flex">
                                <img src="./assets/icons/star-gold-favorite.png" class="h-3 sm:h-4 w-3 sm:w-4"
                                    alt="star gold filled">
                                <img src="./assets/icons/star-gold-favorite.png" class="h-3 sm:h-4 w-3 sm:w-4"
                                    alt="star gold filled">
                                <img src="./assets/icons/star-gold-favorite.png" class="h-3 sm:h-4 w-3 sm:w-4"
                                    alt="star gold filled">
                                <img src="./assets/icons/star-gold-favorite.png" class="h-3 sm:h-4 w-3 sm:w-4"
                                    alt="star gold filled">
                                <img src="./assets/icons/half-gold-star.png" class="h-3 sm:h-4 w-3 sm:w-4"
                                    alt="star gold filled">
                            </div>

                            <!-- Sales Number -->
                            <span class="max-[399px]:hidden text-xs text-zinc-800">(3571)</span>
                        </div>

                        <footer class=" flex justify-between lg:flex-col lg:gap-y-2">

                            <!-- Pricing -->
                            <div
                                class="flex w-full flex-col-reverse min-[400px]:flex-row lg:flex-col-reverse gap-x-2 items-start min-[400px]:items-center lg:items-start ">

                                <!-- New Price -->
                                <span
                                    class="font-semibold text-xl sm:text-2xl lg:text-xl 2xl:text-2xl text-green-600">$119.99</span>

                                <!-- Old Price -->
                                <span
                                    class="font-medium text-xs sm:text-sm lg:text-sm xl:text-base text-zinc-400 line-through">$129.99</span>
                            </div>
                        </footer>
                    </div>
                </div>

                <!-- Product Card 2 -->
                <div class="bg-white rounded-lg flex flex-col gap-y-2 p-1 shadow-lg cursor-pointer">

                    <!-- Product Image -->
                    <div class="h-32 min-[400px]:h-40 lg:h-32 xl:h-40 overflow-hidden flex items-center justify-center">

                        <!-- Image Card -->
                        <div class="h-full w-full max-w-32 min-[400px]:max-w-40 lg:w-32 xl:w-40 ">
                            <img src="assets/images/christmas-decoration/santa-claus.jpg" alt="santa-claus"
                                class="rounded h-full w-full object-cover">
                        </div>
                    </div>

                    <!-- Product Details -->
                    <div class="flex flex-col sm:gap-y-1 p-1">
                        <!-- Product Title -->
                        <h4
                            class="text-base font-semibold line-clamp-2 hover:text-blue-500 transition duration-300 cursor-pointer">
                            Uten 18" Santa Claus Decorations, Standing Christmas Santa Claus Figurine Figure Decor
                            Christmas Sock and Gifts Bag Christmas Decoration Indoor, Birthday Gifts (Red)</h4>

                        <!-- Ratings -->
                        <div class="flex gap-x-2 items-center ">

                            <!-- Rating Number -->
                            <span class="text-sm text-blue-500 font-semibold">4.6</span>

                            <!-- Star Rating -->
                            <div class="flex">
                                <img src="./assets/icons/star-gold-favorite.png" class="h-3 sm:h-4 w-3 sm:w-4"
                                    alt="star gold filled">
                                <img src="./assets/icons/star-gold-favorite.png" class="h-3 sm:h-4 w-3 sm:w-4"
                                    alt="star gold filled">
                                <img src="./assets/icons/star-gold-favorite.png" class="h-3 sm:h-4 w-3 sm:w-4"
                                    alt="star gold filled">
                                <img src="./assets/icons/star-gold-favorite.png" class="h-3 sm:h-4 w-3 sm:w-4"
                                    alt="star gold filled">
                                <img src="./assets/icons/half-gold-star.png" class="h-3 sm:h-4 w-3 sm:w-4"
                                    alt="star gold filled">
                            </div>

                            <!-- Sales Number -->
                            <span class="max-[399px]:hidden text-xs text-zinc-800">(1081)</span>
                        </div>

                        <footer class=" flex justify-between lg:flex-col lg:gap-y-2">

                            <!-- Pricing -->
                            <div
                                class="flex w-full flex-col-reverse min-[400px]:flex-row lg:flex-col-reverse gap-x-2 items-start min-[400px]:items-center lg:items-start ">

                                <!-- New Price -->
                                <span
                                    class="font-semibold text-xl sm:text-2xl lg:text-xl 2xl:text-2xl text-green-600">$23.99</span>

                                <!-- Old Price -->
                                <span
                                    class="font-medium text-xs sm:text-sm lg:text-sm xl:text-base text-zinc-400 line-through">$43.99</span>
                            </div>
                        </footer>
                    </div>
                </div>

                <!-- Product Card 3 -->
                <div class="bg-white rounded-lg flex flex-col gap-y-2 p-1 shadow-lg cursor-pointer">

                    <!-- Product Image -->
                    <div class="h-32 min-[400px]:h-40 lg:h-32 xl:h-40 overflow-hidden flex items-center justify-center">

                        <!-- Image Card -->
                        <div class="h-full w-full max-w-32 min-[400px]:max-w-40 lg:w-32 xl:w-40 ">
                            <img src="assets/images/christmas-decoration/snow-ball-glass.jpg" alt="snow-ball-glass"
                                class="rounded h-full w-full object-cover">
                        </div>
                    </div>

                    <!-- Product Details -->
                    <div class="flex flex-col sm:gap-y-1 p-1">
                        <!-- Product Title -->
                        <h4
                            class="text-base font-semibold line-clamp-2 hover:text-blue-500 transition duration-300 cursor-pointer">
                            Christmas Music Box Snow Globe Gift, Musical Rotating Santa Claus Flying Over Village
                            Glitter,Gift for Girls Wife Girlfriend Daughter Son Granddaughter, Xmas Present Plays 14
                            Christmas Songs</h4>

                        <!-- Ratings -->
                        <div class="flex gap-x-2 items-center ">

                            <!-- Rating Number -->
                            <span class="text-sm text-blue-500 font-semibold">4.3</span>

                            <!-- Star Rating -->
                            <div class="flex">
                                <img src="./assets/icons/star-gold-favorite.png" class="h-3 sm:h-4 w-3 sm:w-4"
                                    alt="star gold filled">
                                <img src="./assets/icons/star-gold-favorite.png" class="h-3 sm:h-4 w-3 sm:w-4"
                                    alt="star gold filled">
                                <img src="./assets/icons/star-gold-favorite.png" class="h-3 sm:h-4 w-3 sm:w-4"
                                    alt="star gold filled">
                                <img src="./assets/icons/star-gold-favorite.png" class="h-3 sm:h-4 w-3 sm:w-4"
                                    alt="star gold filled">
                                <img src="./assets/icons/outline-gold-star.png" class="h-3 sm:h-4 w-3 sm:w-4"
                                    alt="star gold filled">
                            </div>

                            <!-- Sales Number -->
                            <span class="max-[399px]:hidden text-xs text-zinc-800">(2381)</span>
                        </div>

                        <footer class=" flex justify-between lg:flex-col lg:gap-y-2">

                            <!-- Pricing -->
                            <div
                                class="flex w-full flex-col-reverse min-[400px]:flex-row lg:flex-col-reverse gap-x-2 items-start min-[400px]:items-center lg:items-start ">

                                <!-- New Price -->
                                <span
                                    class="font-semibold text-xl sm:text-2xl lg:text-xl 2xl:text-2xl text-green-600">$47.99</span>

                                <!-- Old Price -->
                                <span
                                    class="font-medium text-xs sm:text-sm lg:text-sm xl:text-base text-zinc-400 line-through">$64.99</span>
                            </div>
                        </footer>
                    </div>
                </div>

                <!-- Product Card 4 -->
                <div class="bg-white rounded-lg flex flex-col gap-y-2 p-1 shadow-lg cursor-pointer">

                    <!-- Product Image -->
                    <div class="h-32 min-[400px]:h-40 lg:h-32 xl:h-40 overflow-hidden flex items-center justify-center">

                        <!-- Image Card -->
                        <div class="h-full w-full max-w-32 min-[400px]:max-w-40 lg:w-32 xl:w-40 ">
                            <img src="assets/images/christmas-decoration/star-decoration.jpg" alt="star-tree-decoratiom"
                                class="rounded h-full w-full object-cover">
                        </div>
                    </div>

                    <!-- Product Details -->
                    <div class="flex flex-col sm:gap-y-1 p-1">
                        <!-- Product Title -->
                        <h4
                            class="text-base font-semibold line-clamp-2 hover:text-blue-500 transition duration-300 cursor-pointer">
                            Christmas Star Tree Topper with Built-in Led Snowflake Projector Lights Hollowed Pentagram
                            Tree Topper,Plug in Christmas Tree Ornament for Indoor Office Xmas New Year Holiday Tree
                            Decoration</h4>

                        <!-- Ratings -->
                        <div class="flex gap-x-2 items-center ">

                            <!-- Rating Number -->
                            <span class="text-sm text-blue-500 font-semibold">4.4</span>

                            <!-- Star Rating -->
                            <div class="flex">
                                <img src="./assets/icons/star-gold-favorite.png" class="h-3 sm:h-4 w-3 sm:w-4"
                                    alt="star gold filled">
                                <img src="./assets/icons/star-gold-favorite.png" class="h-3 sm:h-4 w-3 sm:w-4"
                                    alt="star gold filled">
                                <img src="./assets/icons/star-gold-favorite.png" class="h-3 sm:h-4 w-3 sm:w-4"
                                    alt="star gold filled">
                                <img src="./assets/icons/star-gold-favorite.png" class="h-3 sm:h-4 w-3 sm:w-4"
                                    alt="star gold filled">
                                <img src="./assets/icons/half-gold-star.png" class="h-3 sm:h-4 w-3 sm:w-4"
                                    alt="star gold filled">
                            </div>

                            <!-- Sales Number -->
                            <span class="max-[399px]:hidden text-xs text-zinc-800">(3502)</span>
                        </div>

                        <footer class=" flex justify-between lg:flex-col lg:gap-y-2">

                            <!-- Pricing -->
                            <div
                                class="flex w-full flex-col-reverse min-[400px]:flex-row lg:flex-col-reverse gap-x-2 items-start min-[400px]:items-center lg:items-start ">

                                <!-- New Price -->
                                <span
                                    class="font-semibold text-xl sm:text-2xl lg:text-xl 2xl:text-2xl text-green-600">$25.99</span>

                                <!-- Old Price -->
                                <span
                                    class="font-medium text-xs sm:text-sm lg:text-sm xl:text-base text-zinc-400 line-through">$50.99</span>
                            </div>
                        </footer>
                    </div>
                </div>

                <!-- Product Card 5 -->
                <div class="bg-white rounded-lg flex flex-col gap-y-2 p-1 shadow-lg cursor-pointer">

                    <!-- Product Image -->
                    <div class="h-32 min-[400px]:h-40 lg:h-32 xl:h-40 overflow-hidden flex items-center justify-center">

                        <!-- Image Card -->
                        <div class="h-full w-full max-w-32 min-[400px]:max-w-40 lg:w-32 xl:w-40 ">
                            <img src="assets/images/christmas-decoration/decoration-front-door.jpg"
                                alt="24 Inch Christmas Wreath Front Door" class="rounded h-full w-full object-cover">
                        </div>
                    </div>

                    <!-- Product Details -->
                    <div class="flex flex-col sm:gap-y-1 p-1">
                        <!-- Product Title -->
                        <h4
                            class="text-base font-semibold line-clamp-2 hover:text-blue-500 transition duration-300 cursor-pointer">
                            24 Inch Christmas Wreath Front Door, Artificial Christmas Wreath Decorated with Holly
                            Berries, podocarpus, Bells, Cypress Leaves, Christmas Flowers for Indoor and Outdoor
                            Christmas Decoration</h4>

                        <!-- Ratings -->
                        <div class="flex gap-x-2 items-center ">

                            <!-- Rating Number -->
                            <span class="text-sm text-blue-500 font-semibold">4.3</span>

                            <!-- Star Rating -->
                            <div class="flex">
                                <img src="./assets/icons/star-gold-favorite.png" class="h-3 sm:h-4 w-3 sm:w-4"
                                    alt="star gold filled">
                                <img src="./assets/icons/star-gold-favorite.png" class="h-3 sm:h-4 w-3 sm:w-4"
                                    alt="star gold filled">
                                <img src="./assets/icons/star-gold-favorite.png" class="h-3 sm:h-4 w-3 sm:w-4"
                                    alt="star gold filled">
                                <img src="./assets/icons/star-gold-favorite.png" class="h-3 sm:h-4 w-3 sm:w-4"
                                    alt="star gold filled">
                                <img src="./assets/icons/outline-gold-star.png" class="h-3 sm:h-4 w-3 sm:w-4"
                                    alt="star gold filled">
                            </div>

                            <!-- Sales Number -->
                            <span class="max-[399px]:hidden text-xs text-zinc-800">(2544)</span>
                        </div>

                        <footer class=" flex justify-between lg:flex-col lg:gap-y-2">

                            <!-- Pricing -->
                            <div
                                class="flex w-full flex-col-reverse min-[400px]:flex-row lg:flex-col-reverse gap-x-2 items-start min-[400px]:items-center lg:items-start ">

                                <!-- New Price -->
                                <span
                                    class="font-semibold text-xl sm:text-2xl lg:text-xl 2xl:text-2xl text-green-600">$39.99</span>

                                <!-- Old Price -->
                                <span
                                    class="font-medium text-xs sm:text-sm lg:text-sm xl:text-base text-zinc-400 line-through">$59.99</span>
                            </div>
                        </footer>
                    </div>
                </div>

                <!-- Product Card 6 -->
                <div class="bg-white rounded-lg flex flex-col gap-y-2 p-1 shadow-lg cursor-pointer">

                    <!-- Product Image -->
                    <div class="h-32 min-[400px]:h-40 lg:h-32 xl:h-40 overflow-hidden flex items-center justify-center">

                        <!-- Image Card -->
                        <div class="h-full w-full max-w-32 min-[400px]:max-w-40 lg:w-32 xl:w-40 ">
                            <img src="assets/images/christmas-decoration/balls_decoration.jpg"
                                alt="christmas-ball-ornaments" class="rounded h-full w-full object-cover">
                        </div>
                    </div>

                    <!-- Product Details -->
                    <div class="flex flex-col sm:gap-y-1 p-1">
                        <!-- Product Title -->
                        <h4
                            class="text-base font-semibold line-clamp-2 hover:text-blue-500 transition duration-300 cursor-pointer">
                            Christmas Ball Ornaments,3.15in 80mm Red and Gold Christmas Tree Hanging Ornaments Ball,16
                            Pcs Shatterproof Plastic Balls for Xmas Tree Decor Holiday Party Wedding Decoration</h4>

                        <!-- Ratings -->
                        <div class="flex gap-x-2 items-center ">

                            <!-- Rating Number -->
                            <span class="text-sm text-blue-500 font-semibold">4.4</span>

                            <!-- Star Rating -->
                            <div class="flex">
                                <img src="./assets/icons/star-gold-favorite.png" class="h-3 sm:h-4 w-3 sm:w-4"
                                    alt="star gold filled">
                                <img src="./assets/icons/star-gold-favorite.png" class="h-3 sm:h-4 w-3 sm:w-4"
                                    alt="star gold filled">
                                <img src="./assets/icons/star-gold-favorite.png" class="h-3 sm:h-4 w-3 sm:w-4"
                                    alt="star gold filled">
                                <img src="./assets/icons/star-gold-favorite.png" class="h-3 sm:h-4 w-3 sm:w-4"
                                    alt="star gold filled">
                                <img src="./assets/icons/half-gold-star.png" class="h-3 sm:h-4 w-3 sm:w-4"
                                    alt="star gold filled">
                            </div>

                            <!-- Sales Number -->
                            <span class="max-[399px]:hidden text-xs text-zinc-800">(1091)</span>
                        </div>

                        <footer class=" flex justify-between lg:flex-col lg:gap-y-2">

                            <!-- Pricing -->
                            <div
                                class="flex w-full flex-col-reverse min-[400px]:flex-row lg:flex-col-reverse gap-x-2 items-start min-[400px]:items-center lg:items-start ">

                                <!-- New Price -->
                                <span
                                    class="font-semibold text-xl sm:text-2xl lg:text-xl 2xl:text-2xl text-green-600">$24.99</span>

                                <!-- Old Price -->
                                <span
                                    class="font-medium text-xs sm:text-sm lg:text-sm xl:text-base text-zinc-400 line-through">$32.99</span>
                            </div>
                        </footer>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Categories deals Section -->
    <section id="categories-deals-section"
        class="bg-gradient-to-r from-emerald-600 via-teal-400 to-cyan-500 mx-auto border-t border-t-zinc-400">

        <div class="container mx-auto text-center flex p-2  sm:px-4 lg:py-8">
            <!-- Products Grid -->
            <div class="flex flex-col sm:flex-row items-center gap-y-4 sm:gap-y-0 w-full sm:justify-between sm:gap-x-4">

                <!-- Card Category 1 -->
                <div
                    class="h-full w-full sm:max-w-[500px] bg-white flex flex-col cursor-pointer group rounded-lg shadow-lg overflow-hidden">
                    <div class="py-1 lg:py-2">

                        <!-- Category Title -->
                        <h3
                            class="text-lg sm:font-normal uppercase tracking-widest md:text-lg lg:text-xl  group-hover:text-blue-500 transition-all duration-300">
                            Fit
                            Essentials</h3>
                    </div>

                    <!-- Category Image  -->
                    <div class="h-full w-full max-h-[200px] sm:max-h-[250px] overflow-hidden">
                        <img src="./assets/images/categories-deals/gym.jpg " alt="man doing lifting weights"
                            class="h-full w-full object-cover hover:scale-110 transition-all duration-300">
                    </div>
                </div>

                <!-- Card Category 2 -->
                <div
                    class="h-full w-full sm:max-w-[500px] bg-white flex flex-col cursor-pointer group rounded-lg shadow-lg overflow-hidden">
                    <div class="py-1 lg:py-2">

                        <!-- Category Title -->
                        <h3
                            class="text-lg sm:font-normal uppercase tracking-widest md:text-lg lg:text-xl  group-hover:text-blue-500 transition-all duration-300">
                            Jingle
                            Deals</h3>
                    </div>

                    <!-- Category Image  -->
                    <div class="h-full w-full max-h-[200px] sm:max-h-[250px] overflow-hidden">
                        <img src="./assets/images/categories-deals//christmas.jpg" alt="Christmas gifts and candles"
                            class="h-full w-full object-cover hover:scale-110 transition-all duration-300">
                    </div>
                </div>

                <!-- Card Category 3 -->
                <div
                    class="h-full w-full sm:max-w-[500px] bg-white flex flex-col cursor-pointer group rounded-lg shadow-lg overflow-hidden">
                    <div class="py-1 lg:py-2">

                        <!-- Category Title -->
                        <h3
                            class="text-lg sm:font-normal uppercase tracking-widest md:text-lg lg:text-xl  group-hover:text-blue-500 transition-all duration-300">
                            Glow Up</h3>
                    </div>

                    <!-- Category Image  -->
                    <div class="h-full w-full max-h-[200px] sm:max-h-[250px] overflow-hidden">
                        <img src="./assets/images/categories-deals//makeup.jpeg" alt="make-up kit"
                            class="h-full w-full object-cover hover:scale-110 transition-all duration-300">
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Top Picks in Women's Section -->
    <section id="top-picks-womans-section" class="flex items-center justify-center">
        <div class="container flex flex-col gap-y-6 w-full rounded-lg p-2 py-6 sm:px-4 md:py-6 lg:py-8 ">

            <!-- Section Title and Link -->
            <header class="flex flex-col sm:flex-row items-center sm:justify-between">
                <h3 class="text-zinc-950 font-bold text-2xl cursor-pointer hover:underline">
                    Top Picks in Women's
                </h3>

                <a href="#"
                    class="text-sm font-semibold underline text-blue-500 hover:text-blue-700 transition-all duration-300">See
                    more
                    products</a>
            </header>

            <!-- Products List -->
            <div class="grid grid-cols-2 gap-2 min-[400px]:gap-4 lg:gap-2 xl:gap-4 md:grid-cols-3 lg:grid-cols-6 ">

                <!-- Product Card 1 -->
                <div class="bg-white rounded-lg flex flex-col gap-y-2 p-1 shadow-lg cursor-pointer">

                    <!-- Product Image -->
                    <div class="h-32 min-[400px]:h-40 lg:h-32 xl:h-40 overflow-hidden flex items-center justify-center">

                        <!-- Image Card -->
                        <div class="h-full w-full max-w-32 min-[400px]:max-w-40 lg:w-32 xl:w-40 ">
                            <img src="assets/images/woman-best-seller/nikewoman.jpg" alt="Nike Air Zoom Pegasus 39"
                                class="rounded h-full w-full object-cover">
                        </div>
                    </div>

                    <!-- Product Details -->
                    <div class="flex flex-col sm:gap-y-1 p-1">
                        <!-- Product Title -->
                        <h4
                            class="text-base font-semibold line-clamp-2 hover:text-blue-500 transition duration-300 cursor-pointer">
                            Nike Air Zoom Pegasus 39 is a versatile running shoe designed for both beginners.</h4>

                        <!-- Ratings -->
                        <div class="flex gap-x-2 items-center ">

                            <!-- Rating Number -->
                            <span class="text-sm text-blue-500 font-semibold">4.4</span>

                            <!-- Star Rating -->
                            <div class="flex">
                                <img src="./assets/icons/star-gold-favorite.png" class="h-3 sm:h-4 w-3 sm:w-4"
                                    alt="star gold filled">
                                <img src="./assets/icons/star-gold-favorite.png" class="h-3 sm:h-4 w-3 sm:w-4"
                                    alt="star gold filled">
                                <img src="./assets/icons/star-gold-favorite.png" class="h-3 sm:h-4 w-3 sm:w-4"
                                    alt="star gold filled">
                                <img src="./assets/icons/star-gold-favorite.png" class="h-3 sm:h-4 w-3 sm:w-4"
                                    alt="star gold filled">
                                <img src="./assets/icons/half-gold-star.png" class="h-3 sm:h-4 w-3 sm:w-4"
                                    alt="star gold filled">
                            </div>

                            <!-- Sales Number -->
                            <span class="max-[399px]:hidden text-xs text-zinc-800">(3571)</span>
                        </div>

                        <footer class=" flex justify-between lg:flex-col lg:gap-y-2">

                            <!-- Pricing -->
                            <div
                                class="flex w-full flex-col-reverse min-[400px]:flex-row lg:flex-col-reverse gap-x-2 items-start min-[400px]:items-center lg:items-start ">

                                <!-- New Price -->
                                <span
                                    class="font-semibold text-xl sm:text-2xl lg:text-xl 2xl:text-2xl text-green-600">$114.00</span>

                                <!-- Old Price -->
                                <span
                                    class="font-medium text-xs sm:text-sm lg:text-sm xl:text-base text-zinc-400 line-through">$130.00</span>
                            </div>
                        </footer>
                    </div>
                </div>

                <!-- Product Card 2 -->
                <div class="bg-white rounded-lg flex flex-col gap-y-2 p-1 shadow-lg cursor-pointer">

                    <!-- Product Image -->
                    <div class="h-32 min-[400px]:h-40 lg:h-32 xl:h-40 overflow-hidden flex items-center justify-center">

                        <!-- Image Card -->
                        <div class="h-full w-full max-w-32 min-[400px]:max-w-40 lg:w-32 xl:w-40 ">
                            <img src="assets/images/woman-best-seller/michealkorsbags.jpg"
                                alt="Michael Kors Jet Set Tote" class="rounded h-full w-full object-cover">
                        </div>
                    </div>

                    <!-- Product Details -->
                    <div class="flex flex-col sm:gap-y-1 p-1">
                        <!-- Product Title -->
                        <h4
                            class="text-base font-semibold line-clamp-2 hover:text-blue-500 transition duration-300 cursor-pointer">
                            Michael Kors Jet Set Tote is a chic and functional handbag, crafted from durable saffiano leather.</h4>

                        <!-- Ratings -->
                        <div class="flex gap-x-2 items-center ">

                            <!-- Rating Number -->
                            <span class="text-sm text-blue-500 font-semibold">4.6</span>

                            <!-- Star Rating -->
                            <div class="flex">
                                <img src="./assets/icons/star-gold-favorite.png" class="h-3 sm:h-4 w-3 sm:w-4"
                                    alt="star gold filled">
                                <img src="./assets/icons/star-gold-favorite.png" class="h-3 sm:h-4 w-3 sm:w-4"
                                    alt="star gold filled">
                                <img src="./assets/icons/star-gold-favorite.png" class="h-3 sm:h-4 w-3 sm:w-4"
                                    alt="star gold filled">
                                <img src="./assets/icons/star-gold-favorite.png" class="h-3 sm:h-4 w-3 sm:w-4"
                                    alt="star gold filled">
                                <img src="./assets/icons/half-gold-star.png" class="h-3 sm:h-4 w-3 sm:w-4"
                                    alt="star gold filled">
                            </div>

                            <!-- Sales Number -->
                            <span class="max-[399px]:hidden text-xs text-zinc-800">(1081)</span>
                        </div>

                        <footer class=" flex justify-between lg:flex-col lg:gap-y-2">

                            <!-- Pricing -->
                            <div
                                class="flex w-full flex-col-reverse min-[400px]:flex-row lg:flex-col-reverse gap-x-2 items-start min-[400px]:items-center lg:items-start ">

                                <!-- New Price -->
                                <span
                                    class="font-semibold text-xl sm:text-2xl lg:text-xl 2xl:text-2xl text-green-600">$289.99</span>

                                <!-- Old Price -->
                                <span
                                    class="font-medium text-xs sm:text-sm lg:text-sm xl:text-base text-zinc-400 line-through">$398.99</span>
                            </div>
                        </footer>
                    </div>
                </div>

                <!-- Product Card 3 -->
                <div class="bg-white rounded-lg flex flex-col gap-y-2 p-1 shadow-lg cursor-pointer">

                    <!-- Product Image -->
                    <div class="h-32 min-[400px]:h-40 lg:h-32 xl:h-40 overflow-hidden flex items-center justify-center">

                        <!-- Image Card -->
                        <div class="h-full w-full max-w-32 min-[400px]:max-w-40 lg:w-32 xl:w-40 ">
                            <img src="assets/images/woman-best-seller/chanelperfume5.jpg"
                                alt="Chanel No. 5 Eau de Parfum" class="rounded h-full w-full object-cover">
                        </div>
                    </div>

                    <!-- Product Details -->
                    <div class="flex flex-col sm:gap-y-1 p-1">
                        <!-- Product Title -->
                        <h4
                            class="text-base font-semibold line-clamp-2 hover:text-blue-500 transition duration-300 cursor-pointer">
                            Chanel No. 5 Eau de Parfum s a timeless and iconic fragrance, blending floral and aldehydic notes with a warm, sensual base of vanilla and sandalwood</h4>

                        <!-- Ratings -->
                        <div class="flex gap-x-2 items-center ">

                            <!-- Rating Number -->
                            <span class="text-sm text-blue-500 font-semibold">4.3</span>

                            <!-- Star Rating -->
                            <div class="flex">
                                <img src="./assets/icons/star-gold-favorite.png" class="h-3 sm:h-4 w-3 sm:w-4"
                                    alt="star gold filled">
                                <img src="./assets/icons/star-gold-favorite.png" class="h-3 sm:h-4 w-3 sm:w-4"
                                    alt="star gold filled">
                                <img src="./assets/icons/star-gold-favorite.png" class="h-3 sm:h-4 w-3 sm:w-4"
                                    alt="star gold filled">
                                <img src="./assets/icons/star-gold-favorite.png" class="h-3 sm:h-4 w-3 sm:w-4"
                                    alt="star gold filled">
                                <img src="./assets/icons/outline-gold-star.png" class="h-3 sm:h-4 w-3 sm:w-4"
                                    alt="star gold filled">
                            </div>

                            <!-- Sales Number -->
                            <span class="max-[399px]:hidden text-xs text-zinc-800">(2381)</span>
                        </div>

                        <footer class=" flex justify-between lg:flex-col lg:gap-y-2">

                            <!-- Pricing -->
                            <div
                                class="flex w-full flex-col-reverse min-[400px]:flex-row lg:flex-col-reverse gap-x-2 items-start min-[400px]:items-center lg:items-start ">

                                <!-- New Price -->
                                <span
                                    class="font-semibold text-xl sm:text-2xl lg:text-xl 2xl:text-2xl text-green-600">$110.00</span>

                                <!-- Old Price -->
                                <span
                                    class="font-medium text-xs sm:text-sm lg:text-sm xl:text-base text-zinc-400 line-through">$130.00</span>
                            </div>
                        </footer>
                    </div>
                </div>

                <!-- Product Card 4 -->
                <div class="bg-white rounded-lg flex flex-col gap-y-2 p-1 shadow-lg cursor-pointer">

                    <!-- Product Image -->
                    <div class="h-32 min-[400px]:h-40 lg:h-32 xl:h-40 overflow-hidden flex items-center justify-center">

                        <!-- Image Card -->
                        <div class="h-full w-full max-w-32 min-[400px]:max-w-40 lg:w-32 xl:w-40 ">
                            <img src="assets/images/woman-best-seller/louboutin.jpg"
                                alt="Christian Louboutin So Kate Pumps" class="rounded h-full w-full object-cover">
                        </div>
                    </div>

                    <!-- Product Details -->
                    <div class="flex flex-col sm:gap-y-1 p-1">
                        <!-- Product Title -->
                        <h4
                            class="text-base font-semibold line-clamp-2 hover:text-blue-500 transition duration-300 cursor-pointer">
                            Christian Louboutin So Kate is an iconic stiletto pump, crafted with sleek patent leather and featuring an ultra-high 120mm heel</h4>

                        <!-- Ratings -->
                        <div class="flex gap-x-2 items-center ">

                            <!-- Rating Number -->
                            <span class="text-sm text-blue-500 font-semibold">4.4</span>

                            <!-- Star Rating -->
                            <div class="flex">
                                <img src="./assets/icons/star-gold-favorite.png" class="h-3 sm:h-4 w-3 sm:w-4"
                                    alt="star gold filled">
                                <img src="./assets/icons/star-gold-favorite.png" class="h-3 sm:h-4 w-3 sm:w-4"
                                    alt="star gold filled">
                                <img src="./assets/icons/star-gold-favorite.png" class="h-3 sm:h-4 w-3 sm:w-4"
                                    alt="star gold filled">
                                <img src="./assets/icons/star-gold-favorite.png" class="h-3 sm:h-4 w-3 sm:w-4"
                                    alt="star gold filled">
                                <img src="./assets/icons/half-gold-star.png" class="h-3 sm:h-4 w-3 sm:w-4"
                                    alt="star gold filled">
                            </div>

                            <!-- Sales Number -->
                            <span class="max-[399px]:hidden text-xs text-zinc-800">(3502)</span>
                        </div>

                        <footer class=" flex justify-between lg:flex-col lg:gap-y-2">

                            <!-- Pricing -->
                            <div
                                class="flex w-full flex-col-reverse min-[400px]:flex-row lg:flex-col-reverse gap-x-2 items-start min-[400px]:items-center lg:items-start ">

                                <!-- New Price -->
                                <span
                                    class="font-semibold text-xl sm:text-2xl lg:text-xl 2xl:text-2xl text-green-600">$699.99</span>

                                <!-- Old Price -->
                                <span
                                    class="font-medium text-xs sm:text-sm lg:text-sm xl:text-base text-zinc-400 line-through">$795.99</span>
                            </div>
                        </footer>
                    </div>
                </div>

                <!-- Product Card 5 -->
                <div class="bg-white rounded-lg flex flex-col gap-y-2 p-1 shadow-lg cursor-pointer">

                    <!-- Product Image -->
                    <div class="h-32 min-[400px]:h-40 lg:h-32 xl:h-40 overflow-hidden flex items-center justify-center">

                        <!-- Image Card -->
                        <div class="h-full w-full max-w-32 min-[400px]:max-w-40 lg:w-32 xl:w-40 ">
                            <img src="assets/images/woman-best-seller/lipstickYSL.jpg"
                                alt="Yves Saint Laurent Rouge Slim Lipstick" class="rounded h-full w-full object-cover">
                        </div>
                    </div>

                    <!-- Product Details -->
                    <div class="flex flex-col sm:gap-y-1 p-1">
                        <!-- Product Title -->
                        <h4
                            class="text-base font-semibold line-clamp-2 hover:text-blue-500 transition duration-300 cursor-pointer">
                            Yves Saint Laurent Rouge Lipstick is a luxurious and highly pigmented lip color, enriched with hydrating oils for a smooth, creamy texture and a comfortable, long-lasting finish.</h4>

                        <!-- Ratings -->
                        <div class="flex gap-x-2 items-center ">

                            <!-- Rating Number -->
                            <span class="text-sm text-blue-500 font-semibold">4.3</span>

                            <!-- Star Rating -->
                            <div class="flex">
                                <img src="./assets/icons/star-gold-favorite.png" class="h-3 sm:h-4 w-3 sm:w-4"
                                    alt="star gold filled">
                                <img src="./assets/icons/star-gold-favorite.png" class="h-3 sm:h-4 w-3 sm:w-4"
                                    alt="star gold filled">
                                <img src="./assets/icons/star-gold-favorite.png" class="h-3 sm:h-4 w-3 sm:w-4"
                                    alt="star gold filled">
                                <img src="./assets/icons/star-gold-favorite.png" class="h-3 sm:h-4 w-3 sm:w-4"
                                    alt="star gold filled">
                                <img src="./assets/icons/outline-gold-star.png" class="h-3 sm:h-4 w-3 sm:w-4"
                                    alt="star gold filled">
                            </div>

                            <!-- Sales Number -->
                            <span class="max-[399px]:hidden text-xs text-zinc-800">(2544)</span>
                        </div>

                        <footer class=" flex justify-between lg:flex-col lg:gap-y-2">

                            <!-- Pricing -->
                            <div
                                class="flex w-full flex-col-reverse min-[400px]:flex-row lg:flex-col-reverse gap-x-2 items-start min-[400px]:items-center lg:items-start ">

                                <!-- New Price -->
                                <span
                                    class="font-semibold text-xl sm:text-2xl lg:text-xl 2xl:text-2xl text-green-600">$32.99</span>

                                <!-- Old Price -->
                                <span
                                    class="font-medium text-xs sm:text-sm lg:text-sm xl:text-base text-zinc-400 line-through">$39.99</span>
                            </div>
                        </footer>
                    </div>
                </div>

                <!-- Product Card 6 -->
                <div class="bg-white rounded-lg flex flex-col gap-y-2 p-1 shadow-lg cursor-pointer">

                    <!-- Product Image -->
                    <div class="h-32 min-[400px]:h-40 lg:h-32 xl:h-40 overflow-hidden flex items-center justify-center">

                        <!-- Image Card -->
                        <div class="h-full w-full max-w-32 min-[400px]:max-w-40 lg:w-32 xl:w-40 ">
                            <img src="assets/images/woman-best-seller/olaycream.jpg" alt="Olay Regenerist Night Cream"
                                class="rounded h-full w-full object-cover">
                        </div>
                    </div>

                    <!-- Product Details -->
                    <div class="flex flex-col sm:gap-y-1 p-1">
                        <!-- Product Title -->
                        <h4
                            class="text-base font-semibold line-clamp-2 hover:text-blue-500 transition duration-300 cursor-pointer">
                            Olay Regenerist Night Cream is a deeply hydrating, anti-aging moisturizer formulated with amino peptides, niacinamide, and hyaluronic acid to boost skin cell regeneration overnight.</h4>

                        <!-- Ratings -->
                        <div class="flex gap-x-2 items-center ">

                            <!-- Rating Number -->
                            <span class="text-sm text-blue-500 font-semibold">4.4</span>

                            <!-- Star Rating -->
                            <div class="flex">
                                <img src="./assets/icons/star-gold-favorite.png" class="h-3 sm:h-4 w-3 sm:w-4"
                                    alt="star gold filled">
                                <img src="./assets/icons/star-gold-favorite.png" class="h-3 sm:h-4 w-3 sm:w-4"
                                    alt="star gold filled">
                                <img src="./assets/icons/star-gold-favorite.png" class="h-3 sm:h-4 w-3 sm:w-4"
                                    alt="star gold filled">
                                <img src="./assets/icons/star-gold-favorite.png" class="h-3 sm:h-4 w-3 sm:w-4"
                                    alt="star gold filled">
                                <img src="./assets/icons/half-gold-star.png" class="h-3 sm:h-4 w-3 sm:w-4"
                                    alt="star gold filled">
                            </div>

                            <!-- Sales Number -->
                            <span class="max-[399px]:hidden text-xs text-zinc-800">(1091)</span>
                        </div>

                        <footer class=" flex justify-between lg:flex-col lg:gap-y-2">

                            <!-- Pricing -->
                            <div
                                class="flex w-full flex-col-reverse min-[400px]:flex-row lg:flex-col-reverse gap-x-2 items-start min-[400px]:items-center lg:items-start ">

                                <!-- New Price -->
                                <span
                                    class="font-semibold text-xl sm:text-2xl lg:text-xl 2xl:text-2xl text-green-600">$29.99</span>

                                <!-- Old Price -->
                                <span
                                    class="font-medium text-xs sm:text-sm lg:text-sm xl:text-base text-zinc-400 line-through">$35.99</span>
                            </div>
                        </footer>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Up To 50% OFF section 2 -->
    <section id="up-to-50-off-section-2" class="flex items-center justify-center">
        <!-- Container div cards -->
        <div
            class="container flex flex-col lg:grid lg:grid-cols-2 lg:grid-rows-2 gap-4 2xl:gap-6 w-full h-full px-2 sm:px-4">
            <!-- CARD 1 -->
            <div class="flex justify-center items-center shadow-lg rounded-lg overflow-hidden bg-white">
                <div
                    class="h-full w-full flex flex-col gap-y-4 min-[400px]:gap-y-2 min-[600px]:gap-y-4 p-4 min-[400px]:p-4 min-[500px]:px-6 xl:p-6  justify-center">
                    <!-- Card Title -->
                    <h4 class="text-lg min-[400px]:text-xs font-medium xl:text-xs tracking-widest uppercase">
                        Stylish Glasses</h4>

                    <!-- Card Description -->
                    <p
                        class="max-[399px]:hidden text-base min-[480px]:text-lg min-[500px]:text-xl md:text-2xl lg:text-xl xl:text-2xl uppercase font-medium">
                        Up to 50%
                        OFF<br>Free Shipping
                    </p>

                    <!-- See More button -->
                    <button
                        class="max-[399px]:w-full inline-flex self-start shrink-0 items-center justify-center p-2 min-[400px]:px-4 min-[400px]:py-2 xl:px-6 xl:py-2 rounded text-xs min-[500px]:text-sm font-medium text-zinc-50 bg-sky-600 hover:bg-sky-700 transtion-all duration-300"
                        type="button">See More</button>
                </div>

                <!-- Image Card -->
                <div
                    class="shrink-0 max-h-36 max-w-36 min-[400px]:max-h-44 min-[400px]:max-w-44  min-[500px]:max-h-52 min-[500px]:max-w-52 min-[600px]:max-h-56 min-[600px]:max-w-56 md:max-h-64 md:md:max-w-64 lg:max-h-52 lg:max-w-52 xl:max-w-56 xl:max-h-56 2xl:max-h-60 2xl:max-w-60 h-full w-full  text-zinc-950 bg-white">
                    <img src="assets/images/up-to-50-off/glasses.jpeg" alt="glasses">
                </div>
            </div>

            <!-- CARD 2 -->
            <div class="flex justify-center items-center shadow-lg rounded-md overflow-hidden bg-white">
                <div
                    class="h-full w-full flex flex-col gap-y-4 min-[400px]:gap-y-2 min-[600px]:gap-y-4 p-4 min-[400px]:p-4 min-[500px]:px-6 xl:p-6  justify-center">
                    <!-- Card Title -->
                    <h4 class="text-lg min-[400px]:text-xs font-medium xl:text-xs tracking-widest uppercase">
                        Pet Lovers' Corner</h4>

                    <!-- Card Description -->
                    <p
                        class="max-[399px]:hidden text-base min-[480px]:text-lg min-[500px]:text-xl md:text-2xl lg:text-xl xl:text-2xl uppercase font-medium">
                        Up to 60%
                        OFF<br>Activate Your
                        Coupons
                    </p>

                    <!-- See More button -->
                    <button
                        class="max-[399px]:w-full inline-flex self-start shrink-0 items-center justify-center p-2 min-[400px]:px-4 min-[400px]:py-2 xl:px-6 xl:py-2 rounded text-xs min-[500px]:text-sm font-medium text-zinc-50 bg-sky-600 hover:bg-sky-700 transtion-all duration-300"
                        type="button">See More</button>
                </div>

                <!-- Image Card -->
                <div
                    class="shrink-0 max-h-36 max-w-36 min-[400px]:max-h-44 min-[400px]:max-w-44  min-[500px]:max-h-52 min-[500px]:max-w-52 min-[600px]:max-h-56 min-[600px]:max-w-56 md:max-h-64 md:md:max-w-64 lg:max-h-52 lg:max-w-52 xl:max-w-56 xl:max-h-56 2xl:max-h-60 2xl:max-w-60 h-full w-full  text-zinc-950 bg-white">
                    <img src="assets/images/up-to-50-off/pets.jpg" alt="pets">
                </div>
            </div>

            <!-- CARD 3 -->
            <div class="flex justify-center items-center shadow-lg rounded-md overflow-hidden bg-white">
                <div
                    class="h-full w-full flex flex-col gap-y-4 min-[400px]:gap-y-2 min-[600px]:gap-y-4 p-4 min-[400px]:p-4 min-[500px]:px-6 xl:p-6  justify-center">
                    <!-- Card Title -->
                    <h4 class="text-lg min-[400px]:text-xs font-medium xl:text-xs tracking-widest uppercase">
                        Wines & Spirits</h4>

                    <!-- Card Description -->
                    <p
                        class="max-[399px]:hidden text-base min-[480px]:text-lg min-[500px]:text-xl md:text-2xl lg:text-xl xl:text-2xl uppercase font-medium">
                        Up to 50%
                        OFF<br>Activate Your
                        Coupons
                    </p>

                    <!-- See More button -->
                    <button
                        class="max-[399px]:w-full inline-flex self-start shrink-0 items-center justify-center p-2 min-[400px]:px-4 min-[400px]:py-2 xl:px-6 xl:py-2 rounded text-xs min-[500px]:text-sm font-medium text-zinc-50 bg-sky-600 hover:bg-sky-700 transtion-all duration-300"
                        type="button">See More</button>
                </div>

                <!-- Image Card -->
                <div
                    class="shrink-0 max-h-36 max-w-36 min-[400px]:max-h-44 min-[400px]:max-w-44  min-[500px]:max-h-52 min-[500px]:max-w-52 min-[600px]:max-h-56 min-[600px]:max-w-56 md:max-h-64 md:md:max-w-64 lg:max-h-52 lg:max-w-52 xl:max-w-56 xl:max-h-56 2xl:max-h-60 2xl:max-w-60 h-full w-full  text-zinc-950 bg-white">
                    <img src="assets/images/up-to-50-off/wine.jpg" alt="wine">
                </div>
            </div>

            <!-- CARD 4 -->
            <div class="flex justify-center items-center shadow-lg rounded-md overflow-hidden bg-white">
                <div
                    class="h-full w-full flex flex-col gap-y-4 min-[400px]:gap-y-2 min-[600px]:gap-y-4 p-4 min-[400px]:p-4 min-[500px]:px-6 xl:p-6  justify-center">
                    <!-- Card Title -->
                    <h4 class="text-lg min-[400px]:text-xs font-medium xl:text-xs tracking-widest uppercase">
                        Beauty Cream </h4>

                    <!-- Card Description -->
                    <p
                        class="max-[399px]:hidden text-base min-[480px]:text-lg min-[500px]:text-xl md:text-2xl lg:text-xl xl:text-2xl uppercase font-medium">
                        Up to 50%
                        OFF<br>Free Shipping
                    </p>

                    <!-- See More button -->
                    <button
                        class="max-[399px]:w-full inline-flex self-start shrink-0 items-center justify-center p-2 min-[400px]:px-4 min-[400px]:py-2 xl:px-6 xl:py-2 rounded text-xs min-[500px]:text-sm font-medium text-zinc-50 bg-sky-600 hover:bg-sky-700 transtion-all duration-300"
                        type="button">See More</button>
                </div>

                <!-- Image Card -->
                <div
                    class="shrink-0 max-h-36 max-w-36 min-[400px]:max-h-44 min-[400px]:max-w-44  min-[500px]:max-h-52 min-[500px]:max-w-52 min-[600px]:max-h-56 min-[600px]:max-w-56 md:max-h-64 md:md:max-w-64 lg:max-h-52 lg:max-w-52 xl:max-w-56 xl:max-h-56 2xl:max-h-60 2xl:max-w-60 h-full w-full  text-zinc-950 bg-white">
                    <img src="assets/images/up-to-50-off/beauty-cream.jpg" alt="beauty-cream">
                </div>
            </div>
        </div>
    </section>

    <!-- Latest Tech Bestsellers Section -->
    <section id="latest-tech-section" class="flex items-center justify-center">
        <div class="container flex flex-col gap-y-6 w-full rounded-lg p-2 py-6 sm:px-4 md:py-6 lg:py-8 ">

            <!-- Section Title and Link -->
            <header class="flex flex-col sm:flex-row items-center sm:justify-between">
                <h3 class="text-zinc-950 font-bold text-2xl cursor-pointer hover:underline">
                    Latest Tech Bestsellers
                </h3>

                <a href="#"
                    class="text-sm font-semibold underline text-blue-500 hover:text-blue-700 transition-all duration-300">See
                    more
                    products</a>
            </header>

            <!-- Products List -->
            <div class="grid grid-cols-2 gap-2 min-[400px]:gap-4 lg:gap-2 xl:gap-4 md:grid-cols-3 lg:grid-cols-6">

                <!-- Product Card 1 -->
                <div class="bg-white rounded-lg flex flex-col gap-y-2 p-1 shadow-lg cursor-pointer">

                    <!-- Product Image -->
                    <div class="h-32 min-[400px]:h-40 lg:h-32 xl:h-40 overflow-hidden flex items-center justify-center">

                        <!-- Image Card -->
                        <div class="h-full w-full max-w-32 min-[400px]:max-w-40 lg:w-32 xl:w-40 ">
                            <img src="assets/images/latest-tech/MacBook-Pro-Retina-14.jpg" alt="Apple MacBook Pro 14-inch
                                M2 Pro" class="rounded h-full w-full object-cover">
                        </div>
                    </div>

                    <!-- Product Details -->
                    <div class="flex flex-col sm:gap-y-1 p-1">
                        <!-- Product Title -->
                        <h4
                            class="text-base font-semibold line-clamp-2 hover:text-blue-500 transition duration-300 cursor-pointer">
                            Apple MacBook Pro 14-inch
                            M2 Pro</h4>

                        <!-- Ratings -->
                        <div class="flex gap-x-2 items-center ">

                            <!-- Rating Number -->
                            <span class="text-sm text-blue-500 font-semibold">4.4</span>

                            <!-- Star Rating -->
                            <div class="flex">
                                <img src="./assets/icons/star-gold-favorite.png" class="h-3 sm:h-4 w-3 sm:w-4"
                                    alt="star gold filled">
                                <img src="./assets/icons/star-gold-favorite.png" class="h-3 sm:h-4 w-3 sm:w-4"
                                    alt="star gold filled">
                                <img src="./assets/icons/star-gold-favorite.png" class="h-3 sm:h-4 w-3 sm:w-4"
                                    alt="star gold filled">
                                <img src="./assets/icons/star-gold-favorite.png" class="h-3 sm:h-4 w-3 sm:w-4"
                                    alt="star gold filled">
                                <img src="./assets/icons/half-gold-star.png" class="h-3 sm:h-4 w-3 sm:w-4"
                                    alt="star gold filled">
                            </div>

                            <!-- Sales Number -->
                            <span class="max-[399px]:hidden text-xs text-zinc-800">(3571)</span>
                        </div>

                        <footer class=" flex justify-between lg:flex-col lg:gap-y-2">

                            <!-- Pricing -->
                            <div
                                class="flex w-full flex-col-reverse min-[400px]:flex-row lg:flex-col-reverse gap-x-2 items-start min-[400px]:items-center lg:items-start ">

                                <!-- New Price -->
                                <span
                                    class="font-semibold text-xl sm:text-2xl lg:text-xl 2xl:text-2xl text-green-600">$1,799</span>

                                <!-- Old Price -->
                                <span
                                    class="font-medium text-xs sm:text-sm lg:text-sm xl:text-base text-zinc-400 line-through">$1,999</span>
                            </div>
                        </footer>
                    </div>
                </div>

                <!-- Product Card 2 -->
                <div class="bg-white rounded-lg flex flex-col gap-y-2 p-1 shadow-lg cursor-pointer">

                    <!-- Product Image -->
                    <div class="h-32 min-[400px]:h-40 lg:h-32 xl:h-40 overflow-hidden flex items-center justify-center">

                        <!-- Image Card -->
                        <div class="h-full w-full max-w-32 min-[400px]:max-w-40 lg:w-32 xl:w-40 ">
                            <img src="assets/images/latest-tech/iphone15pro.jpg" alt="Apple iPhone 15 Pro 256GB"
                                class="rounded h-full w-full object-cover">
                        </div>
                    </div>

                    <!-- Product Details -->
                    <div class="flex flex-col sm:gap-y-1 p-1">
                        <!-- Product Title -->
                        <h4
                            class="text-base font-semibold line-clamp-2 hover:text-blue-500 transition duration-300 cursor-pointer">
                            Apple iPhone 15 Pro 256GB, Titanium Gray color</h4>

                        <!-- Ratings -->
                        <div class="flex gap-x-2 items-center ">

                            <!-- Rating Number -->
                            <span class="text-sm text-blue-500 font-semibold">4.6</span>

                            <!-- Star Rating -->
                            <div class="flex">
                                <img src="./assets/icons/star-gold-favorite.png" class="h-3 sm:h-4 w-3 sm:w-4"
                                    alt="star gold filled">
                                <img src="./assets/icons/star-gold-favorite.png" class="h-3 sm:h-4 w-3 sm:w-4"
                                    alt="star gold filled">
                                <img src="./assets/icons/star-gold-favorite.png" class="h-3 sm:h-4 w-3 sm:w-4"
                                    alt="star gold filled">
                                <img src="./assets/icons/star-gold-favorite.png" class="h-3 sm:h-4 w-3 sm:w-4"
                                    alt="star gold filled">
                                <img src="./assets/icons/half-gold-star.png" class="h-3 sm:h-4 w-3 sm:w-4"
                                    alt="star gold filled">
                            </div>

                            <!-- Sales Number -->
                            <span class="max-[399px]:hidden text-xs text-zinc-800">(1081)</span>
                        </div>

                        <footer class=" flex justify-between lg:flex-col lg:gap-y-2">

                            <!-- Pricing -->
                            <div
                                class="flex w-full flex-col-reverse min-[400px]:flex-row lg:flex-col-reverse gap-x-2 items-start min-[400px]:items-center lg:items-start ">

                                <!-- New Price -->
                                <span
                                    class="font-semibold text-xl sm:text-2xl lg:text-xl 2xl:text-2xl text-green-600">$289.99</span>

                                <!-- Old Price -->
                                <span
                                    class="font-medium text-xs sm:text-sm lg:text-sm xl:text-base text-zinc-400 line-through">$398.99</span>
                            </div>
                        </footer>
                    </div>
                </div>

                <!-- Product Card 3 -->
                <div class="bg-white rounded-lg flex flex-col gap-y-2 p-1 shadow-lg cursor-pointer">

                    <!-- Product Image -->
                    <div class="h-32 min-[400px]:h-40 lg:h-32 xl:h-40 overflow-hidden flex items-center justify-center">

                        <!-- Image Card -->
                        <div class="h-full w-full max-w-32 min-[400px]:max-w-40 lg:w-32 xl:w-40 ">
                            <img src="assets/images/latest-tech/samsung-galaxy-tab-s9.jpg"
                                alt="Samsung Galaxy Tab S9 256GB" class="rounded h-full w-full object-cover">
                        </div>
                    </div>

                    <!-- Product Details -->
                    <div class="flex flex-col sm:gap-y-1 p-1">
                        <!-- Product Title -->
                        <h4
                            class="text-base font-semibold line-clamp-2 hover:text-blue-500 transition duration-300 cursor-pointer">
                            Samsung Galaxy Tab S9 256GB</h4>

                        <!-- Ratings -->
                        <div class="flex gap-x-2 items-center ">

                            <!-- Rating Number -->
                            <span class="text-sm text-blue-500 font-semibold">4.3</span>

                            <!-- Star Rating -->
                            <div class="flex">
                                <img src="./assets/icons/star-gold-favorite.png" class="h-3 sm:h-4 w-3 sm:w-4"
                                    alt="star gold filled">
                                <img src="./assets/icons/star-gold-favorite.png" class="h-3 sm:h-4 w-3 sm:w-4"
                                    alt="star gold filled">
                                <img src="./assets/icons/star-gold-favorite.png" class="h-3 sm:h-4 w-3 sm:w-4"
                                    alt="star gold filled">
                                <img src="./assets/icons/star-gold-favorite.png" class="h-3 sm:h-4 w-3 sm:w-4"
                                    alt="star gold filled">
                                <img src="./assets/icons/outline-gold-star.png" class="h-3 sm:h-4 w-3 sm:w-4"
                                    alt="star gold filled">
                            </div>

                            <!-- Sales Number -->
                            <span class="max-[399px]:hidden text-xs text-zinc-800">(2381)</span>
                        </div>

                        <footer class=" flex justify-between lg:flex-col lg:gap-y-2">

                            <!-- Pricing -->
                            <div
                                class="flex w-full flex-col-reverse min-[400px]:flex-row lg:flex-col-reverse gap-x-2 items-start min-[400px]:items-center lg:items-start ">

                                <!-- New Price -->
                                <span
                                    class="font-semibold text-xl sm:text-2xl lg:text-xl 2xl:text-2xl text-green-600">$809.99</span>

                                <!-- Old Price -->
                                <span
                                    class="font-medium text-xs sm:text-sm lg:text-sm xl:text-base text-zinc-400 line-through">$899.99</span>
                            </div>
                        </footer>
                    </div>
                </div>

                <!-- Product Card 4 -->
                <div class="bg-white rounded-lg flex flex-col gap-y-2 p-1 shadow-lg cursor-pointer">

                    <!-- Product Image -->
                    <div class="h-32 min-[400px]:h-40 lg:h-32 xl:h-40 overflow-hidden flex items-center justify-center">

                        <!-- Image Card -->
                        <div class="h-full w-full max-w-32 min-[400px]:max-w-40 lg:w-32 xl:w-40 ">
                            <img src="assets/images/latest-tech/happrun_projector_.jpg"
                                alt="HAPPRUN Projector, Google TV Projector with WiFi and Bluetooth, 4K Support"
                                class="rounded h-full w-full object-cover">
                        </div>
                    </div>

                    <!-- Product Details -->
                    <div class="flex flex-col sm:gap-y-1 p-1">
                        <!-- Product Title -->
                        <h4
                            class="text-base font-semibold line-clamp-2 hover:text-blue-500 transition duration-300 cursor-pointer">
                            HAPPRUN Projector, Google TV Projector with WiFi and Bluetooth, 4K Support</h4>

                        <!-- Ratings -->
                        <div class="flex gap-x-2 items-center ">

                            <!-- Rating Number -->
                            <span class="text-sm text-blue-500 font-semibold">4.4</span>

                            <!-- Star Rating -->
                            <div class="flex">
                                <img src="./assets/icons/star-gold-favorite.png" class="h-3 sm:h-4 w-3 sm:w-4"
                                    alt="star gold filled">
                                <img src="./assets/icons/star-gold-favorite.png" class="h-3 sm:h-4 w-3 sm:w-4"
                                    alt="star gold filled">
                                <img src="./assets/icons/star-gold-favorite.png" class="h-3 sm:h-4 w-3 sm:w-4"
                                    alt="star gold filled">
                                <img src="./assets/icons/star-gold-favorite.png" class="h-3 sm:h-4 w-3 sm:w-4"
                                    alt="star gold filled">
                                <img src="./assets/icons/half-gold-star.png" class="h-3 sm:h-4 w-3 sm:w-4"
                                    alt="star gold filled">
                            </div>

                            <!-- Sales Number -->
                            <span class="max-[399px]:hidden text-xs text-zinc-800">(3502)</span>
                        </div>

                        <footer class=" flex justify-between lg:flex-col lg:gap-y-2">

                            <!-- Pricing -->
                            <div
                                class="flex w-full flex-col-reverse min-[400px]:flex-row lg:flex-col-reverse gap-x-2 items-start min-[400px]:items-center lg:items-start ">

                                <!-- New Price -->
                                <span
                                    class="font-semibold text-xl sm:text-2xl lg:text-xl 2xl:text-2xl text-green-600">$332.00</span>

                                <!-- Old Price -->
                                <span
                                    class="font-medium text-xs sm:text-sm lg:text-sm xl:text-base text-zinc-400 line-through">$369.00</span>
                            </div>
                        </footer>
                    </div>
                </div>

                <!-- Product Card 5 -->
                <div class="bg-white rounded-lg flex flex-col gap-y-2 p-1 shadow-lg cursor-pointer">

                    <!-- Product Image -->
                    <div class="h-32 min-[400px]:h-40 lg:h-32 xl:h-40 overflow-hidden flex items-center justify-center">

                        <!-- Image Card -->
                        <div class="h-full w-full max-w-32 min-[400px]:max-w-40 lg:w-32 xl:w-40 ">
                            <img src="assets/images/latest-tech/apple_vision_pro.jpg"
                                alt="The Apple Vision Pro 1TB model offers cutting-edge mixed reality experiences with a sleek design, powered by Apple's M2 chip and R1 chip for ultra-low latency"
                                class="rounded h-full w-full object-cover">
                        </div>
                    </div>

                    <!-- Product Details -->
                    <div class="flex flex-col sm:gap-y-1 p-1">
                        <!-- Product Title -->
                        <h4
                            class="text-base font-semibold line-clamp-2 hover:text-blue-500 transition duration-300 cursor-pointer">
                            The Apple Vision Pro 1TB model offers cutting-edge mixed reality experiences with a sleek
                            design, powered by Apple's M2 chip and R1 chip for ultra-low latency</h4>

                        <!-- Ratings -->
                        <div class="flex gap-x-2 items-center ">

                            <!-- Rating Number -->
                            <span class="text-sm text-blue-500 font-semibold">4.3</span>

                            <!-- Star Rating -->
                            <div class="flex">
                                <img src="./assets/icons/star-gold-favorite.png" class="h-3 sm:h-4 w-3 sm:w-4"
                                    alt="star gold filled">
                                <img src="./assets/icons/star-gold-favorite.png" class="h-3 sm:h-4 w-3 sm:w-4"
                                    alt="star gold filled">
                                <img src="./assets/icons/star-gold-favorite.png" class="h-3 sm:h-4 w-3 sm:w-4"
                                    alt="star gold filled">
                                <img src="./assets/icons/star-gold-favorite.png" class="h-3 sm:h-4 w-3 sm:w-4"
                                    alt="star gold filled">
                                <img src="./assets/icons/outline-gold-star.png" class="h-3 sm:h-4 w-3 sm:w-4"
                                    alt="star gold filled">
                            </div>

                            <!-- Sales Number -->
                            <span class="max-[399px]:hidden text-xs text-zinc-800">(2544)</span>
                        </div>

                        <footer class=" flex justify-between lg:flex-col lg:gap-y-2">

                            <!-- Pricing -->
                            <div
                                class="flex w-full flex-col-reverse min-[400px]:flex-row lg:flex-col-reverse gap-x-2 items-start min-[400px]:items-center lg:items-start ">

                                <!-- New Price -->
                                <span
                                    class="font-semibold text-xl sm:text-2xl lg:text-xl 2xl:text-2xl text-green-600">$3,509</span>

                                <!-- Old Price -->
                                <span
                                    class="font-medium text-xs sm:text-sm lg:text-sm xl:text-base text-zinc-400 line-through">$3,899</span>
                            </div>
                        </footer>
                    </div>
                </div>

                <!-- Product Card 6 -->
                <div class="bg-white rounded-lg flex flex-col gap-y-2 p-1 shadow-lg cursor-pointer">

                    <!-- Product Image -->
                    <div class="h-32 min-[400px]:h-40 lg:h-32 xl:h-40 overflow-hidden flex items-center justify-center">

                        <!-- Image Card -->
                        <div class="h-full w-full max-w-32 min-[400px]:max-w-40 lg:w-32 xl:w-40 ">
                            <img src="assets/images/latest-tech/samsung_galaxy_fold_6.jpg"
                                alt="SAMSUNG Galaxy Z Flip 6 AI Cell Phone, 512GB Unlocked Android Smartphone, FlexCam, Photo Assist, Camcorder Mode, Live Interpreter, Foldable Design, 2024, US 1 Yr Manufacturer Warranty"
                                class="rounded h-full w-full object-cover">
                        </div>
                    </div>

                    <!-- Product Details -->
                    <div class="flex flex-col sm:gap-y-1 p-1">
                        <!-- Product Title -->
                        <h4
                            class="text-base font-semibold line-clamp-2 hover:text-blue-500 transition duration-300 cursor-pointer">
                            SAMSUNG Galaxy Z Flip 6 AI Cell Phone, 512GB Unlocked Android Smartphone, FlexCam, Photo
                            Assist, Camcorder Mode, Live Interpreter, Foldable Design, 2024, US 1 Yr Manufacturer
                            Warranty</h4>

                        <!-- Ratings -->
                        <div class="flex gap-x-2 items-center ">

                            <!-- Rating Number -->
                            <span class="text-sm text-blue-500 font-semibold">4.4</span>

                            <!-- Star Rating -->
                            <div class="flex">
                                <img src="./assets/icons/star-gold-favorite.png" class="h-3 sm:h-4 w-3 sm:w-4"
                                    alt="star gold filled">
                                <img src="./assets/icons/star-gold-favorite.png" class="h-3 sm:h-4 w-3 sm:w-4"
                                    alt="star gold filled">
                                <img src="./assets/icons/star-gold-favorite.png" class="h-3 sm:h-4 w-3 sm:w-4"
                                    alt="star gold filled">
                                <img src="./assets/icons/star-gold-favorite.png" class="h-3 sm:h-4 w-3 sm:w-4"
                                    alt="star gold filled">
                                <img src="./assets/icons/half-gold-star.png" class="h-3 sm:h-4 w-3 sm:w-4"
                                    alt="star gold filled">
                            </div>

                            <!-- Sales Number -->
                            <span class="max-[399px]:hidden text-xs text-zinc-800">(1091)</span>
                        </div>

                        <footer class=" flex justify-between lg:flex-col lg:gap-y-2">

                            <!-- Pricing -->
                            <div
                                class="flex w-full flex-col-reverse min-[400px]:flex-row lg:flex-col-reverse gap-x-2 items-start min-[400px]:items-center lg:items-start ">

                                <!-- New Price -->
                                <span
                                    class="font-semibold text-xl sm:text-2xl lg:text-xl 2xl:text-2xl text-green-600">$1,097</span>

                                <!-- Old Price -->
                                <span
                                    class="font-medium text-xs sm:text-sm lg:text-sm xl:text-base text-zinc-400 line-through">$1,219</span>
                            </div>
                        </footer>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Deal of the Day 2 and Banner Deals 2 Section  -->
    <section id="deals-of-the-day-section-2" class="flex items-center justify-center">
        <div
            class="container grid grid-cols-1 lg:grid-cols-[3fr,9fr] gap-y-4 lg:gap-y-0 gap-x-4 xl:gap-x-6 p-2 py-6 sm:px-4 md:py-6 lg:py-8 ">

            <!-- Featured Deal Card -->
            <div class="flex flex-col gap-y-2 lg:gap-y-4 bg-white rounded-lg shadow-lg p-4 2xl:p-6 relative cursor-pointer">
                <h2 class="text-xl 2xl:text-2xl font-bold text-left text-zinc-950 hover:underline">Deal of the Day</h2>

                <!-- Product Image -->
                <div class="flex max-w-72 max-h-72 lg:w-full lg:h-full mx-auto ">
                    <img src="./assets/images/headphones-trending/airpods_max.jpg" alt="Apple AirPods Max"
                        class="h-full w-full">
                </div>

                <!-- Product Details -->
                <div class="flex flex-col gap-y-2">

                    <!-- Product Title -->
                    <h3
                        class="text-base text-xl line-clamp-3 lg:line-clamp-1 font-semibold hover:text-blue-500 transition duration-300 cursor-pointer">
                        Apple AirPods Max</h3>

                    <!-- Rating -->
                    <div class="flex gap-x-2 items-center text-sm">
                        <!-- Numerical Rating -->
                        <div class="">
                            <span class="font-semibold text-blue-500 text-sm 2xl:text-base">4.5</span>
                        </div>

                        <!-- Stars Count -->
                        <div class="flex">
                            <img src="./assets/icons/star-gold-favorite.png" alt="star filled with yellow"
                                class="w-4 h-4">
                            <img src="./assets/icons/star-gold-favorite.png" alt="star filled with yellow"
                                class="w-4 h-4">
                            <img src="./assets/icons/star-gold-favorite.png" alt="star filled with yellow"
                                class="w-4 h-4">
                            <img src="./assets/icons/star-gold-favorite.png" alt="star filled with yellow"
                                class="w-4 h-4">
                            <img src="./assets/icons/half-gold-star.png" alt="star filled with yellow" class="w-4 h-4">
                        </div>

                        <!-- Sales -->
                        <span class="text-sm 2xl:text-base">(4237)</span>
                    </div>

                    <footer class="flex justify-between lg:flex-col lg:gap-y-2">

                        <!-- Pricing -->
                        <div class="flex items-center justify-between">
                            <!-- Old Price -->
                            <div class="flex gap-x-2 items-center">
                                <span
                                    class="font-semibold text-xl sm:text-2xl lg:text-xl 2xl:text-2xl text-red-600">$250.00</span>
                                <span
                                    class="font-medium text-xs sm:text-sm lg:text-base text-zinc-400 line-through">$500.00</span>
                            </div>

                            <div
                                class="text-sm sm:text-base lg:text-xs 2xl:text-sm rounded-lg absolute lg:static top-4 right-4 px-2 py-1  font-semibold text-base bg-red-700 text-zinc-50">
                                50%
                                OFF
                            </div>
                        </div>

                        <!-- Free Shipping -->
                        <div class="flex gap-x-2 items-center">
                            <img src="./assets/icons/delivery.png" alt="" class="h-5 sm:h-8 lg:h-5 2xl:h-6">
                            <span class="text-green-600 text-xs sm:text-base lg:text-sm font-bold">Free Shipping</span>
                        </div>
                    </footer>
                </div>
            </div>

            <div class="grid grid-rows-2 gap-y-8 lg:gap-y-4 bg-white rounded-lg shadow-lg p-4 xl:p-6">

                <!-- Headphones Treding -->
                <div class="flex flex-col gap-y-2">
                    <!-- Title Section -->
                    <header class="flex flex-col sm:flex-row items-center sm:justify-between">
                        <h3 class="text-zinc-950 font-bold text-xl cursor-pointer hover:underline">Headphones Trending
                        </h3>

                        <a href="#"
                            class="text-sm font-semibold underline text-blue-500 hover:text-blue-700 transition-all duration-300">See
                            more
                            products</a>
                    </header>

                    <!-- Products -->
                    <div
                        class="grid grid-cols-2 sm:grid-cols-4 lg:grid-cols-6 gap-2 sm:gap-y-0 xl:gap-x-4 h-full w-full">

                        <!-- Card 1 -->
                        <div class="bg-white flex flex-col gap-y-2 rounded-lg shadow-lg cursor-pointer">

                            <!-- Product Image -->
                            <div
                                class="flex h-full w-full max-w-32 max-h-32 lg:max-w-20 lg:max-h-20 xl:max-w-24 xl:max-h-24 overflow-hidden mx-auto">
                                <img src="assets/images/headphones-trending/anker_soundcore.jpg"
                                    alt="Anker Soundcore Space Q45" class="h-full w-full object-cover rounded">
                            </div>

                            <div class="p-2 text-zinc-50">
                                <!-- Product Title -->
                                <span
                                    class="text-base lg:text-sm text-zinc-950 font-semibold hover:text-blue-500 transition duration-300 cursor-pointer line-clamp-2 lg:line-clamp-1">Anker
                                    Soundcore Space Q45</span>

                                <!-- Rating and Sales -->
                                <div
                                    class="flex lg:hidden 2xl:flex items-center justify-left cursor-pointer gap-x-2 sm:gap-x-1 md:gap-x-2">
                                    <!-- Numerical Rating -->
                                    <span class="text-sm lg:hidden xl:inline font-medium text-blue-500">4.5</span>

                                    <div class="flex">
                                        <!-- Star Rating Images (5 stars) -->
                                        <img src="assets/icons/star-gold-favorite.png" alt="Star" class="w-3 h-3">
                                        <img src="assets/icons/star-gold-favorite.png" alt="Star" class="w-3 h-3">
                                        <img src="assets/icons/star-gold-favorite.png" alt="Star" class="w-3 h-3">
                                        <img src="assets/icons/star-gold-favorite.png" alt="Star" class="w-3 h-3">
                                        <img src="assets/icons/half-gold-star.png" alt="Star" class="w-3 h-3">
                                    </div>

                                    <span
                                        class="hidden min-[400px]:inline text-gray-600 text-xs 2xl:text-sm">(3160)</span>
                                </div>

                                <!-- Pricing -->
                                <div
                                    class="flex flex-col-reverse min-[400px]:flex-row lg:flex-col-reverse xl:flex-row gap-x-2 items-start min-[400px]:items-center lg:items-start xl:items-center ">
                                    <!-- New Price -->
                                    <span class="font-semibold text-lg lg:text-base text-green-600">$89.99</span>

                                    <!-- Old Price -->
                                    <span
                                        class="font-medium text-sm lg:text-xs text-zinc-400 line-through">$100.00</span>
                                </div>

                                <!-- Free Shipping -->
                                <div class="hidden xl:flex gap-x-2 items-center">
                                    <img src="./assets/icons/delivery.png" alt="" class="h-4">
                                    <span class="text-green-600 text-xs font-bold">Free Shipping</span>
                                </div>

                            </div>
                        </div>

                        <!-- Card 2 -->
                        <div class="bg-white flex flex-col gap-y-2 rounded-lg shadow-lg cursor-pointer">

                            <!-- Product Image -->
                            <div
                                class="flex h-full w-full max-w-32 max-h-32 lg:max-w-20 lg:max-h-20 xl:max-w-24 xl:max-h-24 overflow-hidden mx-auto">
                                <img src="assets/images/headphones-trending/bose_quiet_comfort.jpg"
                                    alt="Bose QuietComfort Ultra Headphones" class="h-full w-full object-cover rounded">
                            </div>

                            <div class="p-2 text-zinc-50">
                                <!-- Product Title -->
                                <span
                                    class="text-base lg:text-sm text-zinc-950 font-semibold hover:text-blue-500 transition duration-300 cursor-pointer line-clamp-2 lg:line-clamp-1">Bose
                                    QuietComfort Ultra</span>

                                <!-- Rating and Sales -->
                                <div
                                    class="flex lg:hidden 2xl:flex items-center justify-left cursor-pointer gap-x-2 sm:gap-x-1 md:gap-x-2">
                                    <!-- Numerical Rating -->
                                    <span class="text-sm lg:hidden xl:inline font-medium text-blue-500">4.3</span>

                                    <div class="flex">
                                        <!-- Star Rating Images (5 stars) -->
                                        <img src="assets/icons/star-gold-favorite.png" alt="Star" class="w-3 h-3">
                                        <img src="assets/icons/star-gold-favorite.png" alt="Star" class="w-3 h-3">
                                        <img src="assets/icons/star-gold-favorite.png" alt="Star" class="w-3 h-3">
                                        <img src="assets/icons/star-gold-favorite.png" alt="Star" class="w-3 h-3">
                                        <img src="assets/icons/half-gold-star.png" alt="Star" class="w-3 h-3">
                                    </div>

                                    <span
                                        class="hidden min-[400px]:inline text-gray-600 text-xs 2xl:text-sm">(2142)</span>
                                </div>

                                <!-- Pricing -->
                                <div
                                    class="flex flex-col-reverse min-[400px]:flex-row lg:flex-col-reverse xl:flex-row gap-x-2 items-start min-[400px]:items-center lg:items-start xl:items-center ">
                                    <!-- New Price -->
                                    <span class="font-semibold text-lg lg:text-base text-green-600">$299.80</span>

                                    <!-- Old Price -->
                                    <span
                                        class="font-medium text-sm lg:text-xs text-zinc-400 line-through">399.00</span>
                                </div>

                                <!-- Free Shipping -->
                                <div class="hidden xl:flex gap-x-2 items-center">
                                    <img src="./assets/icons/delivery.png" alt="" class="h-4">
                                    <span class="text-green-600 text-xs font-bold">Free Shipping</span>
                                </div>

                            </div>
                        </div>

                        <!-- Card 3 -->
                        <div class="bg-white flex flex-col gap-y-2 rounded-lg shadow-lg cursor-pointer">

                            <!-- Product Image -->
                            <div
                                class="flex h-full w-full max-w-32 max-h-32 lg:max-w-20 lg:max-h-20 xl:max-w-24 xl:max-h-24 overflow-hidden mx-auto">
                                <img src="assets/images/headphones-trending/jbl_tour_pro3.jpg" alt="JBL Tour Pro 3"
                                    class="h-full w-full object-cover rounded">
                            </div>

                            <div class="p-2 text-zinc-50">
                                <!-- Product Title -->
                                <span
                                    class="text-base lg:text-sm text-zinc-950 font-semibold hover:text-blue-500 transition duration-300 cursor-pointer line-clamp-2 lg:line-clamp-1">JBL
                                    Tour Pro 3 Smart Charging Case</span>

                                <!-- Rating and Sales -->
                                <div
                                    class="flex lg:hidden 2xl:flex items-center justify-left cursor-pointer gap-x-2 sm:gap-x-1 md:gap-x-2">
                                    <!-- Numerical Rating -->
                                    <span class="text-sm lg:hidden xl:inline font-medium text-blue-500">4.5</span>

                                    <div class="flex">
                                        <!-- Star Rating Images (5 stars) -->
                                        <img src="assets/icons/star-gold-favorite.png" alt="Star" class="w-3 h-3">
                                        <img src="assets/icons/star-gold-favorite.png" alt="Star" class="w-3 h-3">
                                        <img src="assets/icons/star-gold-favorite.png" alt="Star" class="w-3 h-3">
                                        <img src="assets/icons/star-gold-favorite.png" alt="Star" class="w-3 h-3">
                                        <img src="assets/icons/half-gold-star.png" alt="Star" class="w-3 h-3">
                                    </div>

                                    <span
                                        class="hidden min-[400px]:inline text-gray-600 text-xs 2xl:text-sm">(3170)</span>
                                </div>

                                <!-- Pricing -->
                                <div
                                    class="flex flex-col-reverse min-[400px]:flex-row lg:flex-col-reverse xl:flex-row gap-x-2 items-start min-[400px]:items-center lg:items-start xl:items-center ">
                                    <!-- New Price -->
                                    <span class="font-semibold text-lg lg:text-base text-green-600">$249.95</span>

                                    <!-- Old Price -->
                                    <span
                                        class="font-medium text-sm lg:text-xs text-zinc-400 line-through">$299.95</span>
                                </div>

                                <!-- Free Shipping -->
                                <div class="hidden xl:flex gap-x-2 items-center">
                                    <img src="./assets/icons/delivery.png" alt="" class="h-4">
                                    <span class="text-green-600 text-xs font-bold">Free Shipping</span>
                                </div>

                            </div>
                        </div>

                        <!-- Card 4 -->
                        <div class="bg-white flex flex-col gap-y-2 rounded-lg shadow-lg cursor-pointer">

                            <!-- Product Image -->
                            <div
                                class="flex h-full w-full max-w-32 max-h-32 lg:max-w-20 lg:max-h-20 xl:max-w-24 xl:max-h-24 overflow-hidden mx-auto">
                                <img src="assets/images/headphones-trending/sennheiser_momentum4.jpg"
                                    alt="Sennheiser Momentum 4 Wireless" class="h-full w-full object-cover rounded">
                            </div>

                            <div class="p-2 text-zinc-50">
                                <!-- Product Title -->
                                <span
                                    class="text-base lg:text-sm text-zinc-950 font-semibold hover:text-blue-500 transition duration-300 cursor-pointer line-clamp-2 lg:line-clamp-1">Sennheiser
                                    Momentum 4</span>

                                <!-- Rating and Sales -->
                                <div
                                    class="flex lg:hidden 2xl:flex items-center justify-left cursor-pointer gap-x-2 sm:gap-x-1 md:gap-x-2">
                                    <!-- Numerical Rating -->
                                    <span class="text-sm lg:hidden xl:inline font-medium text-blue-500">5.0</span>

                                    <div class="flex">
                                        <!-- Star Rating Images (5 stars) -->
                                        <img src="assets/icons/star-gold-favorite.png" alt="Star" class="w-3 h-3">
                                        <img src="assets/icons/star-gold-favorite.png" alt="Star" class="w-3 h-3">
                                        <img src="assets/icons/star-gold-favorite.png" alt="Star" class="w-3 h-3">
                                        <img src="assets/icons/star-gold-favorite.png" alt="Star" class="w-3 h-3">
                                        <img src="assets/icons/star-gold-favorite.png" alt="Star" class="w-3 h-3">
                                    </div>

                                    <span
                                        class="hidden min-[400px]:inline text-gray-600 text-xs 2xl:text-sm">(4160)</span>
                                </div>

                                <!-- Pricing -->
                                <div
                                    class="flex flex-col-reverse min-[400px]:flex-row lg:flex-col-reverse xl:flex-row gap-x-2 items-start min-[400px]:items-center lg:items-start xl:items-center ">
                                    <!-- New Price -->
                                    <span class="font-semibold text-lg lg:text-base text-green-600">$299.95</span>

                                    <!-- Old Price -->
                                    <span
                                        class="font-medium text-sm lg:text-xs text-zinc-400 line-through">$379.95</span>
                                </div>

                                <!-- Free Shipping -->
                                <div class="hidden xl:flex gap-x-2 items-center">
                                    <img src="./assets/icons/delivery.png" alt="" class="h-4">
                                    <span class="text-green-600 text-xs font-bold">Free Shipping</span>
                                </div>
                            </div>
                        </div>

                        <!-- Card 5 -->
                        <div class="flex bg-white sm:hidden lg:flex flex-col gap-y-2 rounded-lg shadow-lg cursor-pointer">

                            <!-- Product Image -->
                            <div
                                class="flex h-full w-full max-w-32 max-h-32 lg:max-w-20 lg:max-h-20 xl:max-w-24 xl:max-h-24 overflow-hidden mx-auto">
                                <img src="assets/images/headphones-trending/technics_premium.jpg"
                                    alt="Technics Premium Hi-Fi True Wireless"
                                    class="h-full w-full object-cover rounded">
                            </div>

                            <div class="p-2 text-zinc-50">
                                <!-- Product Title -->
                                <span
                                    class="text-base lg:text-sm text-zinc-950 font-semibold hover:text-blue-500 transition duration-300 cursor-pointer line-clamp-2 lg:line-clamp-1">Technics
                                    Premium Hi-Fi</span>

                                <!-- Rating and Sales -->
                                <div
                                    class="flex lg:hidden 2xl:flex items-center justify-left cursor-pointer gap-x-2 sm:gap-x-1 md:gap-x-2">
                                    <!-- Numerical Rating -->
                                    <span class="text-sm lg:hidden xl:inline font-medium text-blue-500">4.4</span>

                                    <div class="flex">
                                        <!-- Star Rating Images (5 stars) -->
                                        <img src="assets/icons/star-gold-favorite.png" alt="Star" class="w-3 h-3">
                                        <img src="assets/icons/star-gold-favorite.png" alt="Star" class="w-3 h-3">
                                        <img src="assets/icons/star-gold-favorite.png" alt="Star" class="w-3 h-3">
                                        <img src="assets/icons/star-gold-favorite.png" alt="Star" class="w-3 h-3">
                                        <img src="assets/icons/outline-gold-star.png" alt="Star" class="w-3 h-3">
                                    </div>

                                    <span
                                        class="hidden min-[400px]:inline text-gray-600 text-xs 2xl:text-sm">(680)</span>
                                </div>

                                <!-- Pricing -->
                                <div
                                    class="flex flex-col-reverse min-[400px]:flex-row lg:flex-col-reverse xl:flex-row gap-x-2 items-start min-[400px]:items-center lg:items-start xl:items-center ">
                                    <!-- New Price -->
                                    <span class="font-semibold text-lg lg:text-base text-green-600">$197.99</span>

                                    <!-- Old Price -->
                                    <span
                                        class="font-medium text-sm lg:text-xs text-zinc-400 line-through">$297.99</span>
                                </div>

                                <!-- Free Shipping -->
                                <div class="hidden xl:flex gap-x-2 items-center">
                                    <img src="./assets/icons/delivery.png"
                                        alt="Wireless Earbuds, Bluetooth 5.4 Headphones Bass Stereo" class="h-4">
                                    <span class="text-green-600 text-xs font-bold">Free Shipping</span>
                                </div>
                            </div>
                        </div>

                        <!-- Card 6 -->
                        <div class="flex bg-white sm:hidden lg:flex flex-col gap-y-2 rounded-lg shadow-lg cursor-pointer">

                            <!-- Product Image -->
                            <div
                                class="flex h-full w-full max-w-32 max-h-32 lg:max-w-20 lg:max-h-20 xl:max-w-24 xl:max-h-24 overflow-hidden mx-auto">
                                <img src="assets/images/headphones-trending/tws_wireless.jpg"
                                    alt="Wireless Earbuds, Bluetooth 5.4 Headphones Bass Stereo"
                                    class="h-full w-full object-cover rounded">
                            </div>

                            <div class="p-2 text-zinc-50">
                                <!-- Product Title -->
                                <span
                                    class="text-base lg:text-sm text-zinc-950 font-semibold hover:text-blue-500 transition duration-300 cursor-pointer line-clamp-2 lg:line-clamp-1">TWS
                                    Wireless Earbuds</span>

                                <!-- Rating and Sales -->
                                <div
                                    class="flex lg:hidden 2xl:flex items-center justify-left cursor-pointer gap-x-2 sm:gap-x-1 md:gap-x-2">
                                    <!-- Numerical Rating -->
                                    <span class="text-sm lg:hidden xl:inline font-medium text-blue-500">3.5</span>

                                    <div class="flex">
                                        <!-- Star Rating Images (5 stars) -->
                                        <img src="assets/icons/star-gold-favorite.png" alt="Star" class="w-3 h-3">
                                        <img src="assets/icons/star-gold-favorite.png" alt="Star" class="w-3 h-3">
                                        <img src="assets/icons/star-gold-favorite.png" alt="Star" class="w-3 h-3">
                                        <img src="assets/icons/half-gold-star.png" alt="Star" class="w-3 h-3">
                                        <img src="assets/icons/outline-gold-star.png" alt="Star" class="w-3 h-3">
                                    </div>

                                    <span
                                        class="hidden min-[400px]:inline text-gray-600 text-xs 2xl:text-sm">(158)</span>
                                </div>

                                <!-- Pricing -->
                                <div
                                    class="flex flex-col-reverse min-[400px]:flex-row lg:flex-col-reverse xl:flex-row gap-x-2 items-start min-[400px]:items-center lg:items-start xl:items-center ">
                                    <!-- New Price -->
                                    <span class="font-semibold text-lg lg:text-base text-green-600">$26.99</span>

                                    <!-- Old Price -->
                                    <span
                                        class="font-medium text-sm lg:text-xs text-zinc-400 line-through">$129.99</span>
                                </div>

                                <!-- Free Shipping -->
                                <div class="hidden xl:flex gap-x-2 items-center">
                                    <img src="./assets/icons/delivery.png" alt="" class="h-4">
                                    <span class="text-green-600 text-xs font-bold">Free Shipping</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Smartwatches Trending -->
                <div class="flex flex-col gap-y-2">
                    <!-- Title Section -->
                    <header class="flex items-center flex-col sm:flex-row sm:justify-between">
                        <h3 class="text-zinc-950 font-bold text-xl cursor-pointer hover:underline">Smartwatches Trending
                        </h3>

                        <a href="#"
                            class="text-sm font-semibold underline text-blue-500 hover:text-blue-700 transition-all duration-300">See
                            more
                            products</a>
                    </header>

                    <!-- Products -->
                    <div
                        class="grid grid-cols-2 sm:grid-cols-4 lg:grid-cols-6 gap-2 sm:gap-y-0 xl:gap-x-4 h-full w-full">

                        <!-- Card 1 -->
                        <div class="bg-white flex flex-col gap-y-2 rounded-lg shadow-lg cursor-pointer">

                            <!-- Product Image -->
                            <div
                                class="flex h-full w-full max-w-32 max-h-32 lg:max-w-20 lg:max-h-20 xl:max-w-24 xl:max-h-24 overflow-hidden mx-auto">
                                <img src="assets/images/smartwatches-trending/samsung_galaxy_pro.jpg"
                                    alt="Samsung Galaxy Watch 5 Pro 45mm Smartwatch with GPS"
                                    class="h-full w-full object-cover rounded">
                            </div>

                            <div class="p-2 text-zinc-50">
                                <!-- Product Title -->
                                <span
                                    class="text-base lg:text-sm text-zinc-950 font-semibold hover:text-blue-500 transition duration-300 cursor-pointer line-clamp-2 lg:line-clamp-1">Samsung
                                    Galaxy Watch 5</span>

                                <!-- Rating and Sales -->
                                <div
                                    class="flex lg:hidden 2xl:flex items-center justify-left cursor-pointer gap-x-2 sm:gap-x-1 md:gap-x-2">
                                    <!-- Numerical Rating -->
                                    <span class="text-sm lg:hidden xl:inline font-medium text-blue-500">4.5</span>

                                    <div class="flex">
                                        <!-- Star Rating Images (5 stars) -->
                                        <img src="assets/icons/star-gold-favorite.png" alt="Star" class="w-3 h-3">
                                        <img src="assets/icons/star-gold-favorite.png" alt="Star" class="w-3 h-3">
                                        <img src="assets/icons/star-gold-favorite.png" alt="Star" class="w-3 h-3">
                                        <img src="assets/icons/star-gold-favorite.png" alt="Star" class="w-3 h-3">
                                        <img src="assets/icons/half-gold-star.png" alt="Star" class="w-3 h-3">
                                    </div>

                                    <span
                                        class="hidden min-[400px]:inline text-gray-600 text-xs 2xl:text-sm">(2670)</span>
                                </div>

                                <!-- Pricing -->
                                <div
                                    class="flex flex-col-reverse min-[400px]:flex-row lg:flex-col-reverse xl:flex-row gap-x-2 items-start min-[400px]:items-center lg:items-start xl:items-center ">
                                    <!-- New Price -->
                                    <span class="font-semibold text-lg lg:text-base text-green-600">$299.00</span>

                                    <!-- Old Price -->
                                    <span
                                        class="font-medium text-sm lg:text-xs text-zinc-400 line-through">$449.99</span>
                                </div>

                                <!-- Free Shipping -->
                                <div class="hidden xl:flex gap-x-2 items-center">
                                    <img src="./assets/icons/delivery.png" alt="" class="h-4">
                                    <span class="text-green-600 text-xs font-bold">Free Shipping</span>
                                </div>
                            </div>
                        </div>

                        <!-- Card 2 -->
                        <div class="bg-white flex flex-col gap-y-2 rounded-lg shadow-lg cursor-pointer">

                            <!-- Product Image -->
                            <div
                                class="flex h-full w-full max-w-32 max-h-32 lg:max-w-20 lg:max-h-20 xl:max-w-24 xl:max-h-24 overflow-hidden mx-auto">
                                <img src="assets/images/smartwatches-trending/google_pixel_2.jpg"
                                    alt="Google Pixel Watch 2" class="h-full w-full object-cover rounded">
                            </div>

                            <div class="p-2 text-zinc-50">
                                <!-- Product Title -->
                                <span
                                    class="text-base lg:text-sm text-zinc-950 font-semibold hover:text-blue-500 transition duration-300 cursor-pointer line-clamp-2 lg:line-clamp-1">Google
                                    Pixel Watch 2</span>

                                <!-- Rating and Sales -->
                                <div
                                    class="flex lg:hidden 2xl:flex items-center justify-left cursor-pointer gap-x-2 sm:gap-x-1 md:gap-x-2">
                                    <!-- Numerical Rating -->
                                    <span class="text-sm lg:hidden xl:inline font-medium text-blue-500">4.2</span>

                                    <div class="flex">
                                        <!-- Star Rating Images (5 stars) -->
                                        <img src="assets/icons/star-gold-favorite.png" alt="Star" class="w-3 h-3">
                                        <img src="assets/icons/star-gold-favorite.png" alt="Star" class="w-3 h-3">
                                        <img src="assets/icons/star-gold-favorite.png" alt="Star" class="w-3 h-3">
                                        <img src="assets/icons/star-gold-favorite.png" alt="Star" class="w-3 h-3">
                                        <img src="assets/icons/outline-gold-star.png" alt="Star" class="w-3 h-3">
                                    </div>

                                    <span
                                        class="hidden min-[400px]:inline text-gray-600 text-xs 2xl:text-sm">(1280)</span>
                                </div>

                                <!-- Pricing -->
                                <div
                                    class="flex flex-col-reverse min-[400px]:flex-row lg:flex-col-reverse xl:flex-row gap-x-2 items-start min-[400px]:items-center lg:items-start xl:items-center ">
                                    <!-- New Price -->
                                    <span class="font-semibold text-lg lg:text-base text-green-600">$159.35</span>

                                    <!-- Old Price -->
                                    <span
                                        class="font-medium text-sm lg:text-xs text-zinc-400 line-through">$200.00</span>
                                </div>

                                <!-- Free Shipping -->
                                <div class="hidden xl:flex gap-x-2 items-center">
                                    <img src="./assets/icons/delivery.png" alt="" class="h-4">
                                    <span class="text-green-600 text-xs font-bold">Free Shipping</span>
                                </div>
                            </div>
                        </div>

                        <!-- Card 3 -->
                        <div class="bg-white flex flex-col gap-y-2 rounded-lg shadow-lg cursor-pointer">

                            <!-- Product Image -->
                            <div
                                class="flex h-full w-full max-w-32 max-h-32 lg:max-w-20 lg:max-h-20 xl:max-w-24 xl:max-h-24 overflow-hidden mx-auto">
                                <img src="assets/images/smartwatches-trending/garmin_fenix_7.jpg"
                                    alt="Garmin Fenix 7 Pro" class="h-full w-full object-cover rounded">
                            </div>

                            <div class="p-2 text-zinc-50">
                                <!-- Product Title -->
                                <span
                                    class="text-base lg:text-sm text-zinc-950 font-semibold hover:text-blue-500 transition duration-300 cursor-pointer line-clamp-2 lg:line-clamp-1">Garmin
                                    Fenix 7 Pro</span>

                                <!-- Rating and Sales -->
                                <div
                                    class="flex lg:hidden 2xl:flex items-center justify-left cursor-pointer gap-x-2 sm:gap-x-1 md:gap-x-2">
                                    <!-- Numerical Rating -->
                                    <span class="text-sm lg:hidden xl:inline font-medium text-blue-500">4.5</span>

                                    <div class="flex">
                                        <!-- Star Rating Images (5 stars) -->
                                        <img src="assets/icons/star-gold-favorite.png" alt="Star" class="w-3 h-3">
                                        <img src="assets/icons/star-gold-favorite.png" alt="Star" class="w-3 h-3">
                                        <img src="assets/icons/star-gold-favorite.png" alt="Star" class="w-3 h-3">
                                        <img src="assets/icons/star-gold-favorite.png" alt="Star" class="w-3 h-3">
                                        <img src="assets/icons/half-gold-star.png" alt="Star" class="w-3 h-3">
                                    </div>

                                    <span
                                        class="hidden min-[400px]:inline text-gray-600 text-xs 2xl:text-sm">(950)</span>
                                </div>

                                <!-- Pricing -->
                                <div
                                    class="flex flex-col-reverse min-[400px]:flex-row lg:flex-col-reverse xl:flex-row gap-x-2 items-start min-[400px]:items-center lg:items-start xl:items-center ">
                                    <!-- New Price -->
                                    <span class="font-semibold text-lg lg:text-base text-green-600">$749.99</span>

                                    <!-- Old Price -->
                                    <span
                                        class="font-medium text-sm lg:text-xs text-zinc-400 line-through">$999.99</span>
                                </div>

                                <!-- Free Shipping -->
                                <div class="hidden xl:flex gap-x-2 items-center">
                                    <img src="./assets/icons/delivery.png" alt="" class="h-4">
                                    <span class="text-green-600 text-xs font-bold">Free Shipping</span>
                                </div>
                            </div>
                        </div>

                        <!-- Card 4 -->
                        <div class="bg-white flex flex-col gap-y-2 rounded-lg shadow-lg cursor-pointer">

                            <!-- Product Image -->
                            <div
                                class="flex h-full w-full max-w-32 max-h-32 lg:max-w-20 lg:max-h-20 xl:max-w-24 xl:max-h-24 overflow-hidden mx-auto">
                                <img src="assets/images/smartwatches-trending/one_plus_2.jpg" alt="OnePlus Watch 2"
                                    class="h-full w-full object-cover rounded">
                            </div>

                            <div class="p-2 text-zinc-50">
                                <!-- Product Title -->
                                <span
                                    class="text-base lg:text-sm text-zinc-950 font-semibold hover:text-blue-500 transition duration-300 cursor-pointer line-clamp-2 lg:line-clamp-1">OnePlus
                                    Watch 2</span>

                                <!-- Rating and Sales -->
                                <div
                                    class="flex lg:hidden 2xl:flex items-center justify-left cursor-pointer gap-x-2 sm:gap-x-1 md:gap-x-2">
                                    <!-- Numerical Rating -->
                                    <span class="text-sm lg:hidden xl:inline font-medium text-blue-500">4.6</span>

                                    <div class="flex">
                                        <!-- Star Rating Images (5 stars) -->
                                        <img src="assets/icons/star-gold-favorite.png" alt="Star" class="w-3 h-3">
                                        <img src="assets/icons/star-gold-favorite.png" alt="Star" class="w-3 h-3">
                                        <img src="assets/icons/star-gold-favorite.png" alt="Star" class="w-3 h-3">
                                        <img src="assets/icons/star-gold-favorite.png" alt="Star" class="w-3 h-3">
                                        <img src="assets/icons/half-gold-star.png" alt="Star" class="w-3 h-3">
                                    </div>

                                    <span
                                        class="hidden min-[400px]:inline text-gray-600 text-xs 2xl:text-sm">(1058)</span>
                                </div>

                                <!-- Pricing -->
                                <div
                                    class="flex flex-col-reverse min-[400px]:flex-row lg:flex-col-reverse xl:flex-row gap-x-2 items-start min-[400px]:items-center lg:items-start xl:items-center ">
                                    <!-- New Price -->
                                    <span class="font-semibold text-lg lg:text-base text-green-600">$249.95</span>

                                    <!-- Old Price -->
                                    <span
                                        class="font-medium text-sm lg:text-xs text-zinc-400 line-through">$299.99</span>
                                </div>

                                <!-- Free Shipping -->
                                <div class="hidden xl:flex gap-x-2 items-center">
                                    <img src="./assets/icons/delivery.png" alt="" class="h-4">
                                    <span class="text-green-600 text-xs font-bold">Free Shipping</span>
                                </div>
                            </div>
                        </div>

                        <!-- Card 5 -->
                        <div class="flex bg-white sm:hidden lg:flex flex-col gap-y-2 rounded-lg shadow-lg cursor-pointer">

                            <!-- Product Image -->
                            <div
                                class="flex h-full w-full max-w-32 max-h-32 lg:max-w-20 lg:max-h-20 xl:max-w-24 xl:max-h-24 overflow-hidden mx-auto">
                                <img src="assets/images/smartwatches-trending/fitbit_sense2.jpg" alt="Fitbit Sense 2"
                                    class="h-full w-full object-cover rounded">
                            </div>

                            <div class="p-2 text-zinc-50">
                                <!-- Product Title -->
                                <span
                                    class="text-base lg:text-sm text-zinc-950 font-semibold hover:text-blue-500 transition duration-300 cursor-pointer line-clamp-2 lg:line-clamp-1">Fitbit
                                    Sense 2</span>

                                <!-- Rating and Sales -->
                                <div
                                    class="flex lg:hidden 2xl:flex items-center justify-left cursor-pointer gap-x-2 sm:gap-x-1 md:gap-x-2">
                                    <!-- Numerical Rating -->
                                    <span class="text-sm lg:hidden xl:inline font-medium text-blue-500">4.2</span>

                                    <div class="flex">
                                        <!-- Star Rating Images (5 stars) -->
                                        <img src="assets/icons/star-gold-favorite.png" alt="Star" class="w-3 h-3">
                                        <img src="assets/icons/star-gold-favorite.png" alt="Star" class="w-3 h-3">
                                        <img src="assets/icons/star-gold-favorite.png" alt="Star" class="w-3 h-3">
                                        <img src="assets/icons/star-gold-favorite.png" alt="Star" class="w-3 h-3">
                                        <img src="assets/icons/outline-gold-star.png" alt="Star" class="w-3 h-3">
                                    </div>

                                    <span
                                        class="hidden min-[400px]:inline text-gray-600 text-xs 2xl:text-sm">(4432)</span>
                                </div>

                                <!-- Pricing -->
                                <div
                                    class="flex flex-col-reverse min-[400px]:flex-row lg:flex-col-reverse xl:flex-row gap-x-2 items-start min-[400px]:items-center lg:items-start xl:items-center ">
                                    <!-- New Price -->
                                    <span class="font-semibold text-lg lg:text-base text-green-600">$179.95</span>

                                    <!-- Old Price -->
                                    <span
                                        class="font-medium text-sm lg:text-xs text-zinc-400 line-through">$249.95</span>
                                </div>

                                <!-- Free Shipping -->
                                <div class="hidden xl:flex gap-x-2 items-center">
                                    <img src="./assets/icons/delivery.png" alt="" class="h-4">
                                    <span class="text-green-600 text-xs font-bold">Free Shipping</span>
                                </div>
                            </div>
                        </div>

                        <!-- Card 6 -->
                        <div class="flex bg-white sm:hidden lg:flex flex-col gap-y-2 rounded-lg shadow-lg cursor-pointer">

                            <!-- Product Image -->
                            <div
                                class="flex h-full w-full max-w-32 max-h-32 lg:max-w-20 lg:max-h-20 xl:max-w-24 xl:max-h-24 overflow-hidden mx-auto">
                                <img src="assets/images/smartwatches-trending/apple_watch9.jpg"
                                    alt="Apple Watch Series 9" class="h-full w-full object-cover rounded">
                            </div>

                            <div class="p-2 text-zinc-50">
                                <!-- Product Title -->
                                <span
                                    class="text-base lg:text-sm text-zinc-950 font-semibold hover:text-blue-500 transition duration-300 cursor-pointer line-clamp-2 lg:line-clamp-1">Apple
                                    Watch Series 9</span>

                                <!-- Rating and Sales -->
                                <div
                                    class="flex lg:hidden 2xl:flex items-center justify-left cursor-pointer gap-x-2 sm:gap-x-1 md:gap-x-2">
                                    <!-- Numerical Rating -->
                                    <span class="text-sm lg:hidden xl:inline font-medium text-blue-500">4.7</span>

                                    <div class="flex">
                                        <!-- Star Rating Images (5 stars) -->
                                        <img src="assets/icons/star-gold-favorite.png" alt="Star" class="w-3 h-3">
                                        <img src="assets/icons/star-gold-favorite.png" alt="Star" class="w-3 h-3">
                                        <img src="assets/icons/star-gold-favorite.png" alt="Star" class="w-3 h-3">
                                        <img src="assets/icons/star-gold-favorite.png" alt="Star" class="w-3 h-3">
                                        <img src="assets/icons/half-gold-star.png" alt="Star" class="w-3 h-3">
                                    </div>

                                    <span
                                        class="hidden min-[400px]:inline text-gray-600 text-xs 2xl:text-sm">(3142)</span>
                                </div>

                                <!-- Pricing -->
                                <div
                                    class="flex flex-col-reverse min-[400px]:flex-row lg:flex-col-reverse xl:flex-row gap-x-2 items-start min-[400px]:items-center lg:items-start xl:items-center ">
                                    <!-- New Price -->
                                    <span class="font-semibold text-lg lg:text-base text-green-600">$720.00</span>

                                    <!-- Old Price -->
                                    <span
                                        class="font-medium text-sm lg:text-xs text-zinc-400 line-through">$878.00</span>
                                </div>

                                <!-- Free Shipping -->
                                <div class="hidden xl:flex gap-x-2 items-center">
                                    <img src="./assets/icons/delivery.png" alt="" class="h-4">
                                    <span class="text-green-600 text-xs font-bold">Free Shipping</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
    </section>

    <!-- Browsing History Section -->
    <section id="browsing-history-section" class="flex items-center justify-center">
        <div class="container flex flex-col gap-y-6 w-full rounded-lg p-2 py-6 sm:px-4 md:py-6 lg:py-8 ">

            <!-- Section Title and Link -->
            <header class="flex flex-col sm:flex-row items-center sm:justify-between">
                <h3 class="text-zinc-950 font-bold text-2xl cursor-pointer hover:underline">
                    Your Browsing History
                </h3>

                <a href="#"
                    class="text-sm font-semibold underline text-blue-500 hover:text-blue-700 transition-all duration-300">See
                    more
                    products</a>
            </header>

            <!-- Products List -->
            <div class="grid grid-cols-2 gap-2 min-[400px]:gap-4 lg:gap-2 xl:gap-4 md:grid-cols-3 lg:grid-cols-6">

                <!-- Product Card 1 -->
                <div class="bg-white rounded-lg flex flex-col gap-y-2 p-1 shadow-lg cursor-pointer">

                    <!-- Product Image -->
                    <div class="h-32 min-[400px]:h-40 lg:h-32 xl:h-40 overflow-hidden flex items-center justify-center">

                        <!-- Image Card -->
                        <div class="h-full w-full max-w-32 min-[400px]:max-w-40 lg:w-32 xl:w-40 ">
                            <img src="assets/images/browsing-history/amazon_echo_8.jpg" alt="Amazon Echo Show 5"
                                class="rounded h-full w-full object-cover">
                        </div>
                    </div>

                    <!-- Product Details -->
                    <div class="flex flex-col sm:gap-y-1 p-1">
                        <!-- Product Title -->
                        <h4
                            class="text-base font-semibold line-clamp-2 hover:text-blue-500 transition duration-300 cursor-pointer">
                            Amazon Echo Show 8 (newest model), Smart display with 2x the bass and clearer sound,
                            Charcoal</h4>

                        <!-- Ratings -->
                        <div class="flex gap-x-2 items-center ">

                            <!-- Rating Number -->
                            <span class="text-sm text-blue-500 font-semibold">4.4</span>

                            <!-- Star Rating -->
                            <div class="flex">
                                <img src="./assets/icons/star-gold-favorite.png" class="h-3 sm:h-4 w-3 sm:w-4"
                                    alt="star gold filled">
                                <img src="./assets/icons/star-gold-favorite.png" class="h-3 sm:h-4 w-3 sm:w-4"
                                    alt="star gold filled">
                                <img src="./assets/icons/star-gold-favorite.png" class="h-3 sm:h-4 w-3 sm:w-4"
                                    alt="star gold filled">
                                <img src="./assets/icons/star-gold-favorite.png" class="h-3 sm:h-4 w-3 sm:w-4"
                                    alt="star gold filled">
                                <img src="./assets/icons/half-gold-star.png" class="h-3 sm:h-4 w-3 sm:w-4"
                                    alt="star gold filled">
                            </div>

                            <!-- Sales Number -->
                            <span class="max-[399px]:hidden text-xs text-zinc-800">(3571)</span>
                        </div>

                        <footer class=" flex justify-between lg:flex-col lg:gap-y-2">

                            <!-- Pricing -->
                            <div
                                class="flex w-full flex-col-reverse min-[400px]:flex-row lg:flex-col-reverse gap-x-2 items-start min-[400px]:items-center lg:items-start ">

                                <!-- New Price -->
                                <span
                                    class="font-semibold text-xl sm:text-2xl lg:text-xl 2xl:text-2xl text-green-600">$80.99</span>

                                <!-- Old Price -->
                                <span
                                    class="font-medium text-xs sm:text-sm lg:text-sm xl:text-base text-zinc-400 line-through">$89.99</span>
                            </div>
                        </footer>
                    </div>
                </div>

                <!-- Product Card 2 -->
                <div class="bg-white rounded-lg flex flex-col gap-y-2 p-1 shadow-lg cursor-pointer">

                    <!-- Product Image -->
                    <div class="h-32 min-[400px]:h-40 lg:h-32 xl:h-40 overflow-hidden flex items-center justify-center">

                        <!-- Image Card -->
                        <div class="h-full w-full max-w-32 min-[400px]:max-w-40 lg:w-32 xl:w-40 ">
                            <img src="assets/images/browsing-history/nikeair270.jpg" alt="nike air 270"
                                class="rounded h-full w-full object-cover">
                        </div>
                    </div>

                    <!-- Product Details -->
                    <div class="flex flex-col sm:gap-y-1 p-1">
                        <!-- Product Title -->
                        <h4
                            class="text-base font-semibold line-clamp-2 hover:text-blue-500 transition duration-300 cursor-pointer">
                            Nike Air Max 270 is a stylish and comfortable sneaker designed for everyday wear</h4>

                        <!-- Ratings -->
                        <div class="flex gap-x-2 items-center ">

                            <!-- Rating Number -->
                            <span class="text-sm text-blue-500 font-semibold">4.6</span>

                            <!-- Star Rating -->
                            <div class="flex">
                                <img src="./assets/icons/star-gold-favorite.png" class="h-3 sm:h-4 w-3 sm:w-4"
                                    alt="star gold filled">
                                <img src="./assets/icons/star-gold-favorite.png" class="h-3 sm:h-4 w-3 sm:w-4"
                                    alt="star gold filled">
                                <img src="./assets/icons/star-gold-favorite.png" class="h-3 sm:h-4 w-3 sm:w-4"
                                    alt="star gold filled">
                                <img src="./assets/icons/star-gold-favorite.png" class="h-3 sm:h-4 w-3 sm:w-4"
                                    alt="star gold filled">
                                <img src="./assets/icons/half-gold-star.png" class="h-3 sm:h-4 w-3 sm:w-4"
                                    alt="star gold filled">
                            </div>

                            <!-- Sales Number -->
                            <span class="max-[399px]:hidden text-xs text-zinc-800">(1081)</span>
                        </div>

                        <footer class=" flex justify-between lg:flex-col lg:gap-y-2">

                            <!-- Pricing -->
                            <div
                                class="flex w-full flex-col-reverse min-[400px]:flex-row lg:flex-col-reverse gap-x-2 items-start min-[400px]:items-center lg:items-start ">

                                <!-- New Price -->
                                <span
                                    class="font-semibold text-xl sm:text-2xl lg:text-xl 2xl:text-2xl text-green-600">$144.00</span>

                                <!-- Old Price -->
                                <span
                                    class="font-medium text-xs sm:text-sm lg:text-sm xl:text-base text-zinc-400 line-through">$160.00</span>
                            </div>
                        </footer>
                    </div>
                </div>

                <!-- Product Card 3 -->
                <div class="bg-white rounded-lg flex flex-col gap-y-2 p-1 shadow-lg cursor-pointer">

                    <!-- Product Image -->
                    <div class="h-32 min-[400px]:h-40 lg:h-32 xl:h-40 overflow-hidden flex items-center justify-center">

                        <!-- Image Card -->
                        <div class="h-full w-full max-w-32 min-[400px]:max-w-40 lg:w-32 xl:w-40 ">
                            <img src="assets/images/browsing-history/Xbox-Series-X.jpg" alt="Xbox-Series-X"
                                class="rounded h-full w-full object-cover">
                        </div>
                    </div>

                    <!-- Product Details -->
                    <div class="flex flex-col sm:gap-y-1 p-1">
                        <!-- Product Title -->
                        <h4
                            class="text-base font-semibold line-clamp-2 hover:text-blue-500 transition duration-300 cursor-pointer">
                            The Xbox Series X features an 8-core Zen 2 CPU, 12 teraflops RDNA 2 GPU, 16 GB GDDR6 RAM,
                            and 1 TB SSD storage. It supports 4K gaming up to 120 FPS, with ray tracing and Dolby Vision
                        </h4>

                        <!-- Ratings -->
                        <div class="flex gap-x-2 items-center ">

                            <!-- Rating Number -->
                            <span class="text-sm text-blue-500 font-semibold">4.3</span>

                            <!-- Star Rating -->
                            <div class="flex">
                                <img src="./assets/icons/star-gold-favorite.png" class="h-3 sm:h-4 w-3 sm:w-4"
                                    alt="star gold filled">
                                <img src="./assets/icons/star-gold-favorite.png" class="h-3 sm:h-4 w-3 sm:w-4"
                                    alt="star gold filled">
                                <img src="./assets/icons/star-gold-favorite.png" class="h-3 sm:h-4 w-3 sm:w-4"
                                    alt="star gold filled">
                                <img src="./assets/icons/star-gold-favorite.png" class="h-3 sm:h-4 w-3 sm:w-4"
                                    alt="star gold filled">
                                <img src="./assets/icons/outline-gold-star.png" class="h-3 sm:h-4 w-3 sm:w-4"
                                    alt="star gold filled">
                            </div>

                            <!-- Sales Number -->
                            <span class="max-[399px]:hidden text-xs text-zinc-800">(2381)</span>
                        </div>

                        <footer class=" flex justify-between lg:flex-col lg:gap-y-2">

                            <!-- Pricing -->
                            <div
                                class="flex w-full flex-col-reverse min-[400px]:flex-row lg:flex-col-reverse gap-x-2 items-start min-[400px]:items-center lg:items-start ">

                                <!-- New Price -->
                                <span
                                    class="font-semibold text-xl sm:text-2xl lg:text-xl 2xl:text-2xl text-green-600">$399.99</span>

                                <!-- Old Price -->
                                <span
                                    class="font-medium text-xs sm:text-sm lg:text-sm xl:text-base text-zinc-400 line-through">$499.99</span>
                            </div>
                        </footer>
                    </div>
                </div>

                <!-- Product Card 4 -->
                <div class="bg-white rounded-lg flex flex-col gap-y-2 p-1 shadow-lg cursor-pointer">

                    <!-- Product Image -->
                    <div class="h-32 min-[400px]:h-40 lg:h-32 xl:h-40 overflow-hidden flex items-center justify-center">

                        <!-- Image Card -->
                        <div class="h-full w-full max-w-32 min-[400px]:max-w-40 lg:w-32 xl:w-40 ">
                            <img src="assets/images/browsing-history/applewatch.jpg" alt="Apple Watch Series 8 (GPS)"
                                class="rounded h-full w-full object-cover">
                        </div>
                    </div>

                    <!-- Product Details -->
                    <div class="flex flex-col sm:gap-y-1 p-1">
                        <!-- Product Title -->
                        <h4
                            class="text-base font-semibold line-clamp-2 hover:text-blue-500 transition duration-300 cursor-pointer">
                            Apple Watch Series 8 (GPS) Midnight color</h4>

                        <!-- Ratings -->
                        <div class="flex gap-x-2 items-center ">

                            <!-- Rating Number -->
                            <span class="text-sm text-blue-500 font-semibold">4.4</span>

                            <!-- Star Rating -->
                            <div class="flex">
                                <img src="./assets/icons/star-gold-favorite.png" class="h-3 sm:h-4 w-3 sm:w-4"
                                    alt="star gold filled">
                                <img src="./assets/icons/star-gold-favorite.png" class="h-3 sm:h-4 w-3 sm:w-4"
                                    alt="star gold filled">
                                <img src="./assets/icons/star-gold-favorite.png" class="h-3 sm:h-4 w-3 sm:w-4"
                                    alt="star gold filled">
                                <img src="./assets/icons/star-gold-favorite.png" class="h-3 sm:h-4 w-3 sm:w-4"
                                    alt="star gold filled">
                                <img src="./assets/icons/half-gold-star.png" class="h-3 sm:h-4 w-3 sm:w-4"
                                    alt="star gold filled">
                            </div>

                            <!-- Sales Number -->
                            <span class="max-[399px]:hidden text-xs text-zinc-800">(3502)</span>
                        </div>

                        <footer class=" flex justify-between lg:flex-col lg:gap-y-2">

                            <!-- Pricing -->
                            <div
                                class="flex w-full flex-col-reverse min-[400px]:flex-row lg:flex-col-reverse gap-x-2 items-start min-[400px]:items-center lg:items-start ">

                                <!-- New Price -->
                                <span
                                    class="font-semibold text-xl sm:text-2xl lg:text-xl 2xl:text-2xl text-green-600">$359.00</span>

                                <!-- Old Price -->
                                <span
                                    class="font-medium text-xs sm:text-sm lg:text-sm xl:text-base text-zinc-400 line-through">$399.00</span>
                            </div>
                        </footer>
                    </div>
                </div>

                <!-- Product Card 5 -->
                <div class="bg-white rounded-lg flex flex-col gap-y-2 p-1 shadow-lg cursor-pointer">

                    <!-- Product Image -->
                    <div class="h-32 min-[400px]:h-40 lg:h-32 xl:h-40 overflow-hidden flex items-center justify-center">

                        <!-- Image Card -->
                        <div class="h-full w-full max-w-32 min-[400px]:max-w-40 lg:w-32 xl:w-40 ">
                            <img src="assets/images/browsing-history/rayban.jpg" alt="Ray-Ban Sunglasses old-style"
                                class="rounded h-full w-full object-cover">
                        </div>
                    </div>

                    <!-- Product Details -->
                    <div class="flex flex-col sm:gap-y-1 p-1">
                        <!-- Product Title -->
                        <h4
                            class="text-base font-semibold line-clamp-2 hover:text-blue-500 transition duration-300 cursor-pointer">
                            Ray-Ban Sunglasses black color old-style</h4>

                        <!-- Ratings -->
                        <div class="flex gap-x-2 items-center ">

                            <!-- Rating Number -->
                            <span class="text-sm text-blue-500 font-semibold">4.3</span>

                            <!-- Star Rating -->
                            <div class="flex">
                                <img src="./assets/icons/star-gold-favorite.png" class="h-3 sm:h-4 w-3 sm:w-4"
                                    alt="star gold filled">
                                <img src="./assets/icons/star-gold-favorite.png" class="h-3 sm:h-4 w-3 sm:w-4"
                                    alt="star gold filled">
                                <img src="./assets/icons/star-gold-favorite.png" class="h-3 sm:h-4 w-3 sm:w-4"
                                    alt="star gold filled">
                                <img src="./assets/icons/star-gold-favorite.png" class="h-3 sm:h-4 w-3 sm:w-4"
                                    alt="star gold filled">
                                <img src="./assets/icons/outline-gold-star.png" class="h-3 sm:h-4 w-3 sm:w-4"
                                    alt="star gold filled">
                            </div>

                            <!-- Sales Number -->
                            <span class="max-[399px]:hidden text-xs text-zinc-800">(2544)</span>
                        </div>

                        <footer class=" flex justify-between lg:flex-col lg:gap-y-2">

                            <!-- Pricing -->
                            <div
                                class="flex w-full flex-col-reverse min-[400px]:flex-row lg:flex-col-reverse gap-x-2 items-start min-[400px]:items-center lg:items-start ">

                                <!-- New Price -->
                                <span
                                    class="font-semibold text-xl sm:text-2xl lg:text-xl 2xl:text-2xl text-green-600">$144.99</span>

                                <!-- Old Price -->
                                <span
                                    class="font-medium text-xs sm:text-sm lg:text-sm xl:text-base text-zinc-400 line-through">$160.99</span>
                            </div>
                        </footer>
                    </div>
                </div>

                <!-- Product Card 6 -->
                <div class="bg-white rounded-lg flex flex-col gap-y-2 p-1 shadow-lg cursor-pointer">

                    <!-- Product Image -->
                    <div class="h-32 min-[400px]:h-40 lg:h-32 xl:h-40 overflow-hidden flex items-center justify-center">

                        <!-- Image Card -->
                        <div class="h-full w-full max-w-32 min-[400px]:max-w-40 lg:w-32 xl:w-40 ">
                            <img src="assets/images/browsing-history/sonyheadphones.jpg"
                                alt="Sony WH-1000XM5 Headphones" class="rounded h-full w-full object-cover">
                        </div>
                    </div>

                    <!-- Product Details -->
                    <div class="flex flex-col sm:gap-y-1 p-1">
                        <!-- Product Title -->
                        <h4
                            class="text-base font-semibold line-clamp-2 hover:text-blue-500 transition duration-300 cursor-pointer">
                            Sony WH-1000XM5 Headphones are premium over-ear wireless</h4>

                        <!-- Ratings -->
                        <div class="flex gap-x-2 items-center ">

                            <!-- Rating Number -->
                            <span class="text-sm text-blue-500 font-semibold">4.4</span>

                            <!-- Star Rating -->
                            <div class="flex">
                                <img src="./assets/icons/star-gold-favorite.png" class="h-3 sm:h-4 w-3 sm:w-4"
                                    alt="star gold filled">
                                <img src="./assets/icons/star-gold-favorite.png" class="h-3 sm:h-4 w-3 sm:w-4"
                                    alt="star gold filled">
                                <img src="./assets/icons/star-gold-favorite.png" class="h-3 sm:h-4 w-3 sm:w-4"
                                    alt="star gold filled">
                                <img src="./assets/icons/star-gold-favorite.png" class="h-3 sm:h-4 w-3 sm:w-4"
                                    alt="star gold filled">
                                <img src="./assets/icons/half-gold-star.png" class="h-3 sm:h-4 w-3 sm:w-4"
                                    alt="star gold filled">
                            </div>

                            <!-- Sales Number -->
                            <span class="max-[399px]:hidden text-xs text-zinc-800">(1091)</span>
                        </div>

                        <footer class=" flex justify-between lg:flex-col lg:gap-y-2">

                            <!-- Pricing -->
                            <div
                                class="flex w-full flex-col-reverse min-[400px]:flex-row lg:flex-col-reverse gap-x-2 items-start min-[400px]:items-center lg:items-start ">

                                <!-- New Price -->
                                <span
                                    class="font-semibold text-xl sm:text-2xl lg:text-xl 2xl:text-2xl text-green-600">$314.00</span>

                                <!-- Old Price -->
                                <span
                                    class="font-medium text-xs sm:text-sm lg:text-sm xl:text-base text-zinc-400 line-through">$349.00</span>
                            </div>
                        </footer>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Footer -->
    <footer id="#contact" class="bg-gray-800 text-gray-200 py-8">
        <div class="container mx-auto px-6">
            <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                <div>
                    <img src="assets/logos/andreas-cart-logo-orange.png" alt="Andrea's cart logo"
                        class="h-12 sm:h-10 lg:h-12">
                    <p class="mt-4 text-gray-400">The best online store for quality products<br>at unbeatable prices.</p>
                </div>
                <div>
                    <h3 class="font-semibold text-lg">Customer Service:</h3>
                    <ul class="mt-4 space-y-2">
                        <li><a href="#" class="hover:text-yellow-600 transition-all duration-300">Contact Us</a></li>
                        <li><a href="#" class="hover:text-yellow-600 transition-all duration-300">Returns</a></li>
                        <li><a href="#" class="hover:text-yellow-600 transition-all duration-300">Shipping</a></li>
                    </ul>
                </div>
                <div>
                    <h3 class="font-semibold text-lg">Follow Us:</h3>
                    <div class="mt-4 flex space-x-4">
                        <a href="https://facebook.com" target="_blank"
                            class="hover:scale-110 transition-transform duration-300">
                            <img src="assets/icons/facebook-icon.png" title="Facebook" alt="Facebook Logo"
                                class="h-8 hover:filter hover:brightness-150">
                        </a>
                        <a href="https://instagram.com" target="_blank"
                            class="hover:scale-110 transition-transform duration-300">
                            <img src="assets/icons/instagram-icon.png" title="Instagram" alt="Instagram Logo"
                                class="h-8 hover:filter hover:brightness-150">
                        </a>
                        <a href="https://twitter.com" target="_blank"
                            class="hover:scale-110 transition-transform duration-300">
                            <img src="assets/icons/x-icon.png" title="X" alt="Twitter Logo"
                                class="h-8 hover:filter hover:brightness-150">
                        </a>
                    </div>
                </div>
            </div>

            <div class="container mx-auto text-center">
                <!-- Development Logo Image -->
                <img src="assets/logos/andrea-g-logo-text-white.png" alt="Logo di Andrea Guarneri"
                    class="mx-auto h-8 w-auto mb-4 mt-8">
                <!-- Development Credit -->
                <p class="text-sm text-gray-400 mb-2">Developed by Andrea Guarneri</p>
                <p>&copy; 2024 Andrea's Cart. All Rights Reserved.</p>
            </div>
        </div>
    </footer>

</body>

</html>