ldc-le-gaulois-pro/resources/views/fo/partials/header.blade.php

<header class="sticky-top">
    <div class="container-fluid position-relative px-0">
        <div class="row all-navbar position-relative">
            <nav class="navbar col d-flex justify-content-start">
                <button class="navbar-toggler border-0 ps-5" type="button" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <button class="search-butn position-relative d-none d-md-block ms-4">
                    <img src="{{ asset('build/assets/images/header/icon-recherche.svg') }}" alt="Bouton de recherche">
                    <input id="search-input" class="black-square position-absolute top-50 start-0 translate-middle-y p-2" type="search" name="search-input" placeholder="Rechercher">
                </button>
            </nav>
            <div class="logo-wrapper mw-50"></div>
            <nav class="navbar navbar-contact-desktop col d-none d-lg-flex justify-content-center">
                <div class="butn-wrap">
                    <a href="{{ route('products.index') }}" class="butn-prim header">Nos solutions produits</a>
                </div>
                <div class="butn-wrap">
                    <a href="{{ route('contact') }}" class="butn-prim header position-relative">
                        &Eacute;crivez-nous
                        <p class="counter-wrapper nb-interest position-absolute top-0 start-100 translate-middle justify-content-center align-items-center ff-poppins-regular fs-md rounded-circle my-0">0</p>
                    </a>
                </div>
            </nav>
            <nav class="navbar navbar-contact-mobile col justify-content-end d-lg-none pe-5">
                <a class="position-relative" href="{{ route('contact') }}">
                    <img src="{{ asset('build/assets/images/header/contact.png') }}" alt="Lettre">
                    <p class="counter-wrapper nb-interest position-absolute top-0 start-100 translate-middle justify-content-center align-items-center ff-poppins-regular fs-md rounded-circle my-0">2</p>
                </a>
            </nav>
        </div>

        <div class="container-fluid navbar-details position-absolute w-100 d-flex opacity-0 px-0">
            <div class="row w-100 flex-column flex-xl-row flex-nowrap flex-xl-wrap">
                <div class="col menu-wrapper d-flex align-items-stretch position-sm-relative w-xl-50 pt-6 pb-4 py-sm-6">
                    <ul class="navbar-nav position-relative top-0 d-flex flex-column justify-content-sm-evenly">
                        <li class="nav-item position-relative ff-poppins-medium fs-header-menu">
                            <a href="{{ route('adn.adn') }}" class="nav-anchor position-relative d-inline-block mb-4 pe-4">Notre ADN</a>
                            <ul class="dropdwn-menu position-sm-absolute d-none opacity-0 top-0 ff-poppins-regular fs-header-submenu">
                                <li class="mb-4"><a href="{{ route('adn.story') }}" class="dropdwn-item">Notre histoire</a></li>
                                <li class="mb-4"><a href="{{ route('adn.btob') }}" class="dropdwn-item">Les services B to B</a></li>
                                <li class="mb-4"><a href="#" class="dropdwn-item">Volailles 100% française</a></li>
                                <li class="mb-4"><a href="{{ route('adn.breeder') }}" class="dropdwn-item">Le métier d'éleveur de volaille</a></li>
                            </ul>
                        </li>
                        <li class="nav-item position-relative ff-poppins-medium fs-header-menu">
                            <a href="{{ route('engagments.francais') }}" class="nav-anchor position-relative d-inline-block mb-4 pe-4">Nos engagements</a>
                            <ul class="dropdwn-menu position-sm-absolute d-none opacity-0 top-0 ff-poppins-regular fs-header-submenu">
                                <li class="mb-4"><a href="{{ route('engagments.francais') }}" class="dropdwn-item">100% Française</a></li>
                                <li class="mb-4"><a href="{{ route('engagments.eleverdurablement') }}" class="dropdwn-item">&Eacute;lever durablement</a></li>
                                <li class="mb-4"><a href="{{ route('engagments.biennourrir') }}" class="dropdwn-item">Bien nourrir</a></li>
                                <li class="mb-4"><a href="{{ route('engagments.respecterlaterre') }}" class="dropdwn-item">Respecter la Terre</a></li>
                                <li class="mb-4"><a href="{{ route('engagments.vivreensemble') }}" class="dropdwn-item">Mieux vivre ensemble</a></li>
                            </ul>
                        </li>
                        <li class="nav-item position-relative ff-poppins-medium fs-header-menu">
                            <a href="{{ route('products.index') }}" class="d-inline-block mb-4">Nos solutions produits</a>
                        </li>
                        <li class="nav-item position-relative ff-poppins-medium fs-header-menu">
                            <a href="{{ route('expertise.poulet') }}" class="d-inline-block mb-4">Notre expertise volaillère</a>
                        </li>
                        <li class="nav-item position-relative ff-poppins-medium fs-header-menu">
                            <a href="{{ route('ideas.ideas') }}" class="nav-anchor position-relative d-inline-block mb-4 pe-4">Générateur d'idées, <br>révélateur de talents</a>
                            <ul class="dropdwn-menu position-sm-absolute d-none opacity-0 top-0 ff-poppins-regular fs-header-submenu">
                                <li class="mb-4"><a href="{{ route('ideas.nosastuces') }}" class="dropdwn-item">Nos astuces volaille</a></li>
                                <li class="mb-4"><a href="{{ route('ideas.nosrecettes') }}" class="dropdwn-item">Nos recettes</a></li>
                            </ul>
                        </li>
                        <li class="nav-item position-relative ff-poppins-medium fs-header-menu">
                            <a href="{{ route('news.index') }}" class="d-inline-block mb-4">Nos actualités</a>
                        </li>
                    </ul>
                </div>
                <div class="col banner-wrapper d-flex justify-content-center align-items-center w-xl-50 p-5">
                    @include('fo.partials.banner-infos')
                </div>
            </div>
        </div>
    </div>
    <a href="{{ route('home') }}" class="nav-brand position-absolute top-0 start-50 translate-middle-x mw-50">
        <img src="{{ asset('build/assets/images/header/logo-lgp-header.png') }}" class="w-100" alt="Logo de Le Gaulois Professionnel">
    </a>
</header>