<!doctype html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>projet marketing</title>
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-100">
    <%- include('../components/navbar'); -%>
    <div>
        <div class="mx-auto max-w-2xl px-4 py-16 sm:px-6 sm:py-24 lg:max-w-7xl lg:px-8">
            <h2 class="text-2xl font-bold tracking-tight text-gray-900">Nos produits populaires</h2>
            <div class="mt-6 grid grid-cols-1 gap-x-6 gap-y-10 sm:grid-cols-2 lg:grid-cols-4 xl:gap-x-8">
                <% for (let j = 0; j < 4; j++) { %>
                    <div class="group relative">
                        <div class="aspect-h-1 aspect-w-1 w-full overflow-hidden rounded-md bg-gray-200 lg:aspect-none group-hover:opacity-75 lg:h-80">
                            <img src="<%- recommandations[j].image %>" alt="<%- recommandations[j].nom %>" class="h-full w-full object-cover object-center lg:h-full lg:w-full">
                        </div>
                        <div class="mt-4 flex justify-between">
                            <div>
                                <h3 class="text-sm text-gray-700">
                                    <a href="/produit/<%- recommandations[j].id %>">
                                        <span aria-hidden="true" class="absolute inset-0"></span>
                                        <%- recommandations[j].nom %>
                                    </a>
                                </h3>
                            </div>
                            <p class="text-sm font-medium text-gray-900"><%- recommandations[j].prix %> €</p>
                        </div>
                    </div>
                <% } %>
            </div>

            </div>
        </div>
    </div>
    <div>
        <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
            <div class="mx-auto max-w-2xl py-16 sm:py-24 lg:max-w-none lg:py-32">
                <h2 class="text-2xl font-bold text-gray-900">Bonbons par textures</h2>
                <div class="mt-6 space-y-12 lg:grid lg:grid-cols-3 lg:gap-x-6 lg:space-y-0">
                    <div class="group relative">
                        <div class="relative h-80 w-full overflow-hidden rounded-lg bg-white sm:aspect-h-1 sm:aspect-w-2 lg:aspect-h-1 lg:aspect-w-1 group-hover:opacity-75 sm:h-64">
                            <img src="https://cdn.shopify.com/s/files/1/0695/1672/2493/products/BannerLokum-TurkishDelightShopAphaeaBazaar_2_53970beb-4998-46a6-83ff-7e8b0e0ccdc0.jpg?v=1675245768&width=1946" alt="Desk with leather desk pad, walnut desk organizer, wireless keyboard and mouse, and porcelain mug." class="h-full w-full object-cover object-center">
                        </div>
                        <h3 class="mt-6 text-sm text-gray-500">
                            <a href="/produits/Molle">
                                <span class="absolute inset-0"></span>
                               Tout les bonbons à texture molle
                            </a>
                        </h3>
                        <p class="text-base font-semibold text-gray-900">Bonbons mou</p>
                    </div>
                    <div class="group relative">
                        <div class="relative h-80 w-full overflow-hidden rounded-lg bg-white sm:aspect-h-1 sm:aspect-w-2 lg:aspect-h-1 lg:aspect-w-1 group-hover:opacity-75 sm:h-64">
                            <img src="https://m.media-amazon.com/images/I/91ChIRBJl7L._AC_UF1000,1000_QL80_.jpg" alt="Bonbons dure" class="h-full w-full object-cover object-center">
                        </div>
                        <h3 class="mt-6 text-sm text-gray-500">
                            <a href="/produits/Dure">
                                <span class="absolute inset-0"></span>
                                tout les bonbons à texture dur
                            </a>
                        </h3>
                        <p class="text-base font-semibold text-gray-900">Bonbons dur</p>
                    </div>
                    <div class="group relative">
                        <div class="relative h-80 w-full overflow-hidden rounded-lg bg-white sm:aspect-h-1 sm:aspect-w-2 lg:aspect-h-1 lg:aspect-w-1 group-hover:opacity-75 sm:h-64">
                            <img src="https://cdn.media.amplience.net/i/marsmmsprod/ct1045_img_01_1000110874_4010001278_4010001279?%24i%24=&w=992" alt="Bonbons  croquant" class="h-full w-full object-cover object-center">
                        </div>
                        <h3 class="mt-6 text-sm text-gray-500">
                            <a href="/produits/Croquant">
                                <span class="absolute inset-0"></span>
                                Tout les bonbons à texture croquante
                            </a>
                        </h3>
                        <p class="text-base font-semibold text-gray-900">Bonbons croquant</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <%- include('../components/footer'); -%>
</body>
</html>