Main

<div x-data="{ showProducts: false }" class="w-[1440px] h-[392px] flex justify-center">
    <div class="flex flex-col gap-6">
        <div class="w-[960px] h-8 flex items-center justify-between">
            <div class="flex items-center justify-between " @click="showProducts = true">
                <svg class=" shrink-0" width="32" height="32" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path fill-rule="evenodd" clip-rule="evenodd" d="M11 3.75C6.99594 3.75 3.75 6.99594 3.75 11C3.75 15.0041 6.99594 18.25 11 18.25C15.0041 18.25 18.25 15.0041 18.25 11C18.25 6.99594 15.0041 3.75 11 3.75ZM2.25 11C2.25 6.16751 6.16751 2.25 11 2.25C15.8325 2.25 19.75 6.16751 19.75 11C19.75 13.1462 18.9773 15.112 17.6949 16.6342L21.5303 20.4697C21.8232 20.7626 21.8232 21.2374 21.5303 21.5303C21.2374 21.8232 20.7626 21.8232 20.4697 21.5303L16.6342 17.6949C15.112 18.9773 13.1462 19.75 11 19.75C6.16751 19.75 2.25 15.8325 2.25 11Z" fill="currentColor" />
                </svg>
                <label>
                    <input x-show="!showProducts" class="w-[824px] border-none bg-transparent focus:ring-0 placeholder:text-neutral-700" placeholder="Rechercher un modèle, une marque, une référence, …">
                </label>
                <label>
                    <input x-show="showProducts" class="w-[824px] border-none bg-transparent focus:ring-0 placeholder:text-neutral-700" placeholder="Magic">
                </label>
            </div>
            <div class="flex flex-row items-center gap-4">
                <div class="cursor-pointer hover:scale-105" x-show="showProducts" x-transition class="transition-opacity duration-150" @click="showProducts = false">
                    <svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path fill-rule="evenodd" clip-rule="evenodd" d="M8.15205 4.96349C8.65799 4.50438 9.3167 4.25004 9.9999 4.25H19.9999C20.7293 4.25 21.4288 4.53973 21.9445 5.05546C22.4602 5.57118 22.7499 6.27066 22.7499 7V17C22.7499 17.7293 22.4602 18.4288 21.9445 18.9445C21.4288 19.4603 20.7293 19.75 19.9999 19.75H9.99994C9.31668 19.75 8.65786 19.4956 8.1519 19.0364L1.824 13.2955C1.64326 13.1314 1.49873 12.9313 1.39989 12.7081C1.30106 12.485 1.25 12.2436 1.25 11.9995C1.25 11.7554 1.30106 11.514 1.39989 11.2909C1.49873 11.0677 1.64316 10.8677 1.8239 10.7036L8.15205 4.96349ZM9.99994 5.75C9.68938 5.75003 9.38996 5.86566 9.15999 6.07438L2.83199 11.8144C2.80624 11.8378 2.78551 11.8664 2.77141 11.8983C2.75729 11.9301 2.75 11.9646 2.75 11.9995C2.75 12.0344 2.75729 12.0689 2.77141 12.1007C2.78551 12.1326 2.80611 12.1611 2.83188 12.1845C2.83185 12.1845 2.83192 12.1846 2.83188 12.1845L9.15988 17.9255C9.38985 18.1342 9.68938 18.25 9.99994 18.25C9.99993 18.25 9.99996 18.25 9.99994 18.25H19.9999C20.3315 18.25 20.6494 18.1183 20.8838 17.8839C21.1182 17.6495 21.2499 17.3315 21.2499 17V7C21.2499 6.66848 21.1182 6.35054 20.8838 6.11612C20.6494 5.8817 20.3315 5.75 19.9999 5.75H9.99994C9.99996 5.75 9.99993 5.75 9.99994 5.75ZM11.4696 8.46967C11.7625 8.17678 12.2374 8.17678 12.5303 8.46967L14.9999 10.9393L17.4696 8.46967C17.7625 8.17678 18.2374 8.17678 18.5303 8.46967C18.8232 8.76256 18.8232 9.23744 18.5303 9.53033L16.0606 12L18.5303 14.4697C18.8232 14.7626 18.8232 15.2374 18.5303 15.5303C18.2374 15.8232 17.7625 15.8232 17.4696 15.5303L14.9999 13.0607L12.5303 15.5303C12.2374 15.8232 11.7625 15.8232 11.4696 15.5303C11.1767 15.2374 11.1767 14.7626 11.4696 14.4697L13.9393 12L11.4696 9.53033C11.1767 9.23744 11.1767 8.76256 11.4696 8.46967Z" fill="currentColor" />
                    </svg>
                </div>
                <div class="cursor-pointer p-3 bg-neutral-150 hover:bg-dark-10 active:bg-dark-20 disabled:text-dark-40 disabled:bg-dark-5 rounded-full" @click="showProducts = false">
                    <svg class=" shrink-0" width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path fill-rule="evenodd" clip-rule="evenodd" d="M8.99469 7.9047C8.70179 7.6118 8.22692 7.6118 7.93403 7.9047C7.64113 8.19759 7.64113 8.67246 7.93403 8.96536L10.9392 11.9706L7.93403 14.9758C7.64114 15.2687 7.64114 15.7435 7.93403 16.0364C8.22693 16.3293 8.7018 16.3293 8.99469 16.0364L11.9999 13.0312L15.0051 16.0364C15.298 16.3293 15.7729 16.3293 16.0658 16.0364C16.3586 15.7435 16.3586 15.2687 16.0658 14.9758L13.0606 11.9706L16.0658 8.96536C16.3587 8.67246 16.3587 8.19759 16.0658 7.9047C15.7729 7.6118 15.298 7.6118 15.0051 7.9047L11.9999 10.9099L8.99469 7.9047Z" fill="currentColor" />
                    </svg>
                </div>
            </div>
        </div>
        <div x-show="!showProducts">

            <div class="inline-flex flex-col gap-4  text-neutral-500">
                <h2 class="font-semibold">Les recherches les plus populaires</h2>
                <div class="inline-flex flex-col gap-2">
                    <div class="inline-flex gap-2 items-center text-neutral-800 ">
                        <svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path fill-rule="evenodd" clip-rule="evenodd" d="M19.5336 11.473C19.6039 11.5441 19.657 11.6258 19.6931 11.7129L19.5336 11.473ZM19.5299 11.4693L15.5303 7.46967C15.2374 7.17678 14.7626 7.17678 14.4697 7.46967C14.1768 7.76256 14.1768 8.23744 14.4697 8.53033L17.1893 11.25H5C4.58579 11.25 4.25 11.5858 4.25 12C4.25 12.4142 4.58579 12.75 5 12.75H17.1893L14.4697 15.4697C14.1768 15.7626 14.1768 16.2374 14.4697 16.5303C14.7626 16.8232 15.2374 16.8232 15.5303 16.5303L19.5303 12.5303C19.6022 12.4584 19.6565 12.3755 19.6931 12.2871C19.7298 12.1987 19.75 12.1017 19.75 12C19.75 11.8983 19.7298 11.8013 19.6931 11.7129" fill="currentColor" />
                        </svg>
                        <a href="#" class=" text-base">
                            Prendre rendez-vous
                        </a>
                    </div>
                    <div class="inline-flex gap-2 items-center text-neutral-800 ">
                        <svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path fill-rule="evenodd" clip-rule="evenodd" d="M19.5336 11.473C19.6039 11.5441 19.657 11.6258 19.6931 11.7129L19.5336 11.473ZM19.5299 11.4693L15.5303 7.46967C15.2374 7.17678 14.7626 7.17678 14.4697 7.46967C14.1768 7.76256 14.1768 8.23744 14.4697 8.53033L17.1893 11.25H5C4.58579 11.25 4.25 11.5858 4.25 12C4.25 12.4142 4.58579 12.75 5 12.75H17.1893L14.4697 15.4697C14.1768 15.7626 14.1768 16.2374 14.4697 16.5303C14.7626 16.8232 15.2374 16.8232 15.5303 16.5303L19.5303 12.5303C19.6022 12.4584 19.6565 12.3755 19.6931 12.2871C19.7298 12.1987 19.75 12.1017 19.75 12C19.75 11.8983 19.7298 11.8013 19.6931 11.7129" fill="currentColor" />
                        </svg>
                        <a href="#" class=" text-base">
                            Magic Montures
                        </a>
                    </div>
                    <div class="inline-flex gap-2 items-center text-neutral-800 ">
                        <svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path fill-rule="evenodd" clip-rule="evenodd" d="M19.5336 11.473C19.6039 11.5441 19.657 11.6258 19.6931 11.7129L19.5336 11.473ZM19.5299 11.4693L15.5303 7.46967C15.2374 7.17678 14.7626 7.17678 14.4697 7.46967C14.1768 7.76256 14.1768 8.23744 14.4697 8.53033L17.1893 11.25H5C4.58579 11.25 4.25 11.5858 4.25 12C4.25 12.4142 4.58579 12.75 5 12.75H17.1893L14.4697 15.4697C14.1768 15.7626 14.1768 16.2374 14.4697 16.5303C14.7626 16.8232 15.2374 16.8232 15.5303 16.5303L19.5303 12.5303C19.6022 12.4584 19.6565 12.3755 19.6931 12.2871C19.7298 12.1987 19.75 12.1017 19.75 12C19.75 11.8983 19.7298 11.8013 19.6931 11.7129" fill="currentColor" />
                        </svg>
                        <a href="#" class=" text-base">
                            Magic clips
                        </a>
                    </div>
                    <div class="inline-flex gap-2 items-center text-neutral-800 ">
                        <svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path fill-rule="evenodd" clip-rule="evenodd" d="M19.5336 11.473C19.6039 11.5441 19.657 11.6258 19.6931 11.7129L19.5336 11.473ZM19.5299 11.4693L15.5303 7.46967C15.2374 7.17678 14.7626 7.17678 14.4697 7.46967C14.1768 7.76256 14.1768 8.23744 14.4697 8.53033L17.1893 11.25H5C4.58579 11.25 4.25 11.5858 4.25 12C4.25 12.4142 4.58579 12.75 5 12.75H17.1893L14.4697 15.4697C14.1768 15.7626 14.1768 16.2374 14.4697 16.5303C14.7626 16.8232 15.2374 16.8232 15.5303 16.5303L19.5303 12.5303C19.6022 12.4584 19.6565 12.3755 19.6931 12.2871C19.7298 12.1987 19.75 12.1017 19.75 12C19.75 11.8983 19.7298 11.8013 19.6931 11.7129" fill="currentColor" />
                        </svg>
                        <a href="#" class=" text-base">
                            Aides auditives
                        </a>
                    </div>
                    <div class="inline-flex gap-2 items-center text-neutral-800 ">
                        <svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path fill-rule="evenodd" clip-rule="evenodd" d="M19.5336 11.473C19.6039 11.5441 19.657 11.6258 19.6931 11.7129L19.5336 11.473ZM19.5299 11.4693L15.5303 7.46967C15.2374 7.17678 14.7626 7.17678 14.4697 7.46967C14.1768 7.76256 14.1768 8.23744 14.4697 8.53033L17.1893 11.25H5C4.58579 11.25 4.25 11.5858 4.25 12C4.25 12.4142 4.58579 12.75 5 12.75H17.1893L14.4697 15.4697C14.1768 15.7626 14.1768 16.2374 14.4697 16.5303C14.7626 16.8232 15.2374 16.8232 15.5303 16.5303L19.5303 12.5303C19.6022 12.4584 19.6565 12.3755 19.6931 12.2871C19.7298 12.1987 19.75 12.1017 19.75 12C19.75 11.8983 19.7298 11.8013 19.6931 11.7129" fill="currentColor" />
                        </svg>
                        <a href="#" class=" text-base">
                            Test auditif gratuit
                        </a>
                    </div>
                    <div class="inline-flex gap-2 items-center text-neutral-800 ">
                        <svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path fill-rule="evenodd" clip-rule="evenodd" d="M19.5336 11.473C19.6039 11.5441 19.657 11.6258 19.6931 11.7129L19.5336 11.473ZM19.5299 11.4693L15.5303 7.46967C15.2374 7.17678 14.7626 7.17678 14.4697 7.46967C14.1768 7.76256 14.1768 8.23744 14.4697 8.53033L17.1893 11.25H5C4.58579 11.25 4.25 11.5858 4.25 12C4.25 12.4142 4.58579 12.75 5 12.75H17.1893L14.4697 15.4697C14.1768 15.7626 14.1768 16.2374 14.4697 16.5303C14.7626 16.8232 15.2374 16.8232 15.5303 16.5303L19.5303 12.5303C19.6022 12.4584 19.6565 12.3755 19.6931 12.2871C19.7298 12.1987 19.75 12.1017 19.75 12C19.75 11.8983 19.7298 11.8013 19.6931 11.7129" fill="currentColor" />
                        </svg>
                        <a href="#" class=" text-base">
                            Test de vue gratuit
                        </a>
                    </div>
                </div>

            </div>
        </div>
        <div x-show="showProducts">
            <div class="flex flex-col gap-6 w-[960px] mx-auto">
                <span class="text-neutral-500 font-medium">Produits correspondant à votre recherche</span>
                <div class="flex flex-row gap-3">

                    <div class="search-product-cards w-[179px] h-[279px] border rounded-lg">
                        <div class="flex flex-col justify-center h-1/2 rounded-lg text-xs p-1 bg-neutral-150">En attente de la création des vignettes produits</div>
                    </div>
                    <div class="search-product-cards w-[179px] h-[279px] border rounded-lg">
                        <div class="flex flex-col justify-center h-1/2 rounded-lg text-xs p-1 bg-neutral-150">En attente de la création des vignettes produits</div>
                    </div>
                    <div class="search-product-cards w-[179px] h-[279px] border rounded-lg">
                        <div class="flex flex-col justify-center h-1/2 rounded-lg text-xs p-1 bg-neutral-150">En attente de la création des vignettes produits</div>
                    </div>
                    <div class="search-product-cards w-[179px] h-[279px] border rounded-lg">
                        <div class="flex flex-col justify-center h-1/2 rounded-lg text-xs p-1 bg-neutral-150">En attente de la création des vignettes produits</div>
                    </div>
                    <div class="search-product-cards w-[179px] h-[279px] border rounded-lg">
                        <div class="flex flex-col justify-center h-1/2 rounded-lg text-xs p-1 bg-neutral-150">En attente de la création des vignettes produits</div>
                    </div>
                </div>
                <div class="flex justify-center">
                    <button type="button" class=" btn btn-dark btn-size-sm">
                        Voir tous les produits

                    </button>
                </div>
            </div>
            <div class="flex gap-40 mt-10">

                <div class="inline-flex flex-col gap-4 text-neutral-500">
                    <h2 class="font-semibold">Catégories correspondants à votre recherche</h2>
                    <div x-data="searchHighlighter()" x-init="highlightSearchedTerm()" class="inline-flex flex-col gap-2">
                        <div class="inline-flex gap-2 items-center text-neutral-500 ">
                            <span class="text-base text-neutral-400 link-content">
                                <a href="#" class=" text-base">
                                    Optique / Magic / Montures Magic
                                </a>
                            </span>
                        </div>
                        <div class="inline-flex gap-2 items-center text-neutral-500 ">
                            <span class="text-base text-neutral-400 link-content">
                                <a href="#" class=" text-base">
                                    Optique / Magic / Magic clips
                                </a>
                            </span>
                        </div>
                    </div>

                </div>

                <!-- These script is here to highlight the search term in categories results. You need to change 'Magic' with the dynamic search term. -->
                <script>
                    function searchHighlighter() {
                        return {
                            highlightSearchedTerm() {
                                const links = document.querySelectorAll('.link-content');
                                links.forEach(link => {
                                    link.innerHTML = link.innerHTML.replace(/(Magic)/g, '<span class="font-semibold">$1</span>');
                                });
                            }
                        };
                    }
                </script>

                <div class="inline-flex flex-col gap-4  text-neutral-500">
                    <h2 class="font-semibold">Pages pouvant vous intéresser </h2>
                    <div class="inline-flex flex-col gap-2">
                        <div class="inline-flex gap-2 items-center text-neutral-800 ">
                            <svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path fill-rule="evenodd" clip-rule="evenodd" d="M19.5336 11.473C19.6039 11.5441 19.657 11.6258 19.6931 11.7129L19.5336 11.473ZM19.5299 11.4693L15.5303 7.46967C15.2374 7.17678 14.7626 7.17678 14.4697 7.46967C14.1768 7.76256 14.1768 8.23744 14.4697 8.53033L17.1893 11.25H5C4.58579 11.25 4.25 11.5858 4.25 12C4.25 12.4142 4.58579 12.75 5 12.75H17.1893L14.4697 15.4697C14.1768 15.7626 14.1768 16.2374 14.4697 16.5303C14.7626 16.8232 15.2374 16.8232 15.5303 16.5303L19.5303 12.5303C19.6022 12.4584 19.6565 12.3755 19.6931 12.2871C19.7298 12.1987 19.75 12.1017 19.75 12C19.75 11.8983 19.7298 11.8013 19.6931 11.7129" fill="currentColor" />
                            </svg>
                            <a href="#" class=" text-base">
                                Quels couleur de verres choisir ?
                            </a>
                        </div>
                        <div class="inline-flex gap-2 items-center text-neutral-800 ">
                            <svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path fill-rule="evenodd" clip-rule="evenodd" d="M19.5336 11.473C19.6039 11.5441 19.657 11.6258 19.6931 11.7129L19.5336 11.473ZM19.5299 11.4693L15.5303 7.46967C15.2374 7.17678 14.7626 7.17678 14.4697 7.46967C14.1768 7.76256 14.1768 8.23744 14.4697 8.53033L17.1893 11.25H5C4.58579 11.25 4.25 11.5858 4.25 12C4.25 12.4142 4.58579 12.75 5 12.75H17.1893L14.4697 15.4697C14.1768 15.7626 14.1768 16.2374 14.4697 16.5303C14.7626 16.8232 15.2374 16.8232 15.5303 16.5303L19.5303 12.5303C19.6022 12.4584 19.6565 12.3755 19.6931 12.2871C19.7298 12.1987 19.75 12.1017 19.75 12C19.75 11.8983 19.7298 11.8013 19.6931 11.7129" fill="currentColor" />
                            </svg>
                            <a href="#" class=" text-base">
                                Trouver la forme de lunettes qui me va
                            </a>
                        </div>
                    </div>

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