Init Project

public/assets/js/main.js

@@ -0,0 +1,886 @@
+/*=============== SHOW MENU ===============*/
+const navMenu = document.getElementById('nav-menu'),
+    navToggle = document.getElementById('nav-toggle'),
+    navClose = document.getElementById('nav-close')
+
+/* Menu show */
+if(navToggle) {
+    navToggle.addEventListener('click', () =>{
+        navMenu.classList.add('show-menu')
+    })
+}
+
+/* Menu hidden */
+if(navClose) {
+    navClose.addEventListener('click', () =>{
+        navMenu.classList.remove('show-menu')
+    })
+}
+
+/*=============== SHOW AGENCY DROPDOWN MENU ===============*/
+const agencyDropdownItems = document.querySelectorAll('.dropdownagency__item')
+
+// 1. Select each dropdown item.
+agencyDropdownItems.forEach((item) =>{
+    const dropdownButton = item.querySelector('.dropdown__button')
+
+    // 2. Select each button click.
+    dropdownButton.addEventListener('click', () =>{
+
+        // 7. Select the current show-dropdown class.
+        const showDropdown = document.querySelector('.show-dropdown')
+        
+        // 5. Call the toggleItem function.
+        agencyToggleItem(item)
+
+        // 8. Remove the show-dropdown class from other items.
+        if(showDropdown && showDropdown != item) {
+            toggleItem(showDropdown)
+        }
+    })
+})
+
+// 3. Create a function to display the dropdown.
+const agencyToggleItem = (item) =>{
+
+    // 3.1. Select each dropdown content.
+    const agencyDropdownContainer = item.querySelector('.dropdownagency__container')
+
+    // 6. If the same item contains the show-dropdown class, remove.
+    if(item.classList.contains('show-dropdown')) {
+        agencyDropdownContainer.removeAttribute('style')
+        item.classList.remove('show-dropdown')
+    } else {
+        // 4. Add the maximum height to dropdown content and add the show-dropdown class.
+        agencyDropdownContainer.style.height = agencyDropdownContainer.scrollHeight + 'px'
+        item.classList.add('show-dropdown')
+    }
+}
+
+/*=============== SHOW PRODUCTS DROPDOWN MENU ===============*/
+const dropdownItems = document.querySelectorAll('.dropdown__item')
+
+// 1. Select each dropdown item.
+dropdownItems.forEach((item) =>{
+    const dropdownButton = item.querySelector('.dropdown__button')
+
+    // 2. Select each button click.
+    dropdownButton.addEventListener('click', () =>{
+
+        // 7. Select the current show-dropdown class.
+        const showDropdown = document.querySelector('.show-dropdown')
+        
+        // 5. Call the toggleItem function.
+        toggleItem(item)
+
+        // 8. Remove the show-dropdown class from other items.
+        if(showDropdown && showDropdown != item) {
+            agencyToggleItem(showDropdown)
+        }
+    })
+})
+
+// 3. Create a function to display the dropdown.
+const toggleItem = (item) =>{
+
+    // 3.1. Select each dropdown content.
+    const dropdownContainer = item.querySelector('.dropdown__container')
+
+    // 6. If the same item contains the show-dropdown class, remove.
+    if(item.classList.contains('show-dropdown')) {
+        dropdownContainer.removeAttribute('style')
+        item.classList.remove('show-dropdown')
+    } else {
+        // 4. Add the maximum height to dropdown content and add the show-dropdown class.
+        dropdownContainer.style.height = dropdownContainer.scrollHeight + 'px'
+        item.classList.add('show-dropdown')
+    }
+}
+
+/*=============== DELETE DROPDOWN STYLES ===============*/
+const mediaQuery = matchMedia('(min-width: 1150px)'),
+      dropdownContainer = document.querySelectorAll('.dropdown__container')
+
+// Function to remove dropdown styles in mobile mode when browser resizes
+const removeStyle = () =>{
+    // Validate if the media query reaches 1118px
+    if(mediaQuery.matches){
+        // Remove the dropdown container height style
+        dropdownContainer.forEach((e) =>{
+            e.removeAttribute('style')
+        })
+
+        // Remove the show-dropdown class from dropdown item
+        dropdownItems.forEach((e) =>{
+            e.classList.remove('show-dropdown')
+        })
+    }
+}
+
+addEventListener('resize', removeStyle)
+
+/*=============== LOGIN ===============*/
+const loginButton = document.getElementById('login-button'),
+    loginClose = document.getElementById('login-close'),
+    loginContent = document.getElementById('login-content')
+
+/* Login show */
+if(loginButton) {
+    loginButton.addEventListener('click', () =>{
+        loginContent.classList.add('show-login')
+    })
+}
+
+/* Login hidden */
+if(loginClose) {
+    loginClose.addEventListener('click', () =>{
+        loginContent.classList.remove('show-login')
+    })
+}
+
+/*=============== PELLETEUSE BOOKING LOGIN ===============*/
+const pelleteuseBooking = document.getElementById('pelleteuse-booking'),
+    pelleteuseBookingClose = document.getElementById('login-close'),
+    pelleteuseBookingContent = document.getElementById('login-content')
+
+/* Modal show */
+if(pelleteuseBooking) {
+    pelleteuseBooking.addEventListener('click', () =>{
+        pelleteuseBookingContent.classList.add('show-login')
+    })
+}
+
+/* Modal hidden */
+if(pelleteuseBookingClose) {
+    pelleteuseBookingClose.addEventListener('click', () =>{
+        pelleteuseBookingContent.classList.remove('show-login')
+    })
+}
+
+/*=============== PELLETEUSE BOOKING BY PHONE ===============*/
+const pelleteuseBookingPhone = document.getElementById('pelleteuse-booking-phone'),
+    pelleteuseBookingPhoneClose = document.getElementById('modal-close'),
+    pelleteuseBookingPhoneContent = document.getElementById('modal-content')
+
+/* Modal show */
+if(pelleteuseBookingPhone) {
+    pelleteuseBookingPhone.addEventListener('click', () =>{
+        pelleteuseBookingPhoneContent.classList.add('show-modal')
+    })
+}
+
+/* Modal hidden */
+if(pelleteuseBookingPhoneClose) {
+    pelleteuseBookingPhoneClose.addEventListener('click', () =>{
+        pelleteuseBookingPhoneContent.classList.remove('show-modal')
+    })
+}
+
+/*=============== MARTEAU PIQUEUR BOOKING LOGIN ===============*/
+const marteauPiqueurBooking = document.getElementById('marteau-piqueur-booking'),
+    marteauPiqueurBookingClose = document.getElementById('login-close'),
+    marteauPiqueurBookingContent = document.getElementById('login-content')
+
+/* Login show */
+if(marteauPiqueurBooking) {
+    marteauPiqueurBooking.addEventListener('click', () =>{
+        marteauPiqueurBookingContent.classList.add('show-login')
+    })
+}
+
+/* Login hidden */
+if(marteauPiqueurBookingClose) {
+    marteauPiqueurBookingClose.addEventListener('click', () =>{
+        marteauPiqueurBookingContent.classList.remove('show-login')
+    })
+}
+
+/*=============== MARTEAU PIQUEUR BOOKING BY PHONE ===============*/
+const marteauPiqueurBookingPhone = document.getElementById('marteau-piqueur-booking-phone'),
+    marteauPiqueurBookingPhoneClose = document.getElementById('modal-close'),
+    marteauPiqueurBookingPhoneContent = document.getElementById('modal-content')
+
+/* Modal show */
+if(marteauPiqueurBookingPhone) {
+    marteauPiqueurBookingPhone.addEventListener('click', () =>{
+        pelleteuseBookingPhoneContent.classList.add('show-modal')
+    })
+}
+
+/* Modal hidden */
+if(marteauPiqueurBookingPhoneClose) {
+    pelleteuseBookingPhoneClose.addEventListener('click', () =>{
+        pelleteuseBookingPhoneContent.classList.remove('show-modal')
+    })
+}
+
+/*=============== BENNE A BETON BOOKING LOGIN ===============*/
+const benneBetonBooking = document.getElementById('benne-beton'),
+    benneBetonBookingClose = document.getElementById('login-close'),
+    benneBetonBookingContent = document.getElementById('login-content')
+
+/* Login show */
+if(benneBetonBooking) {
+    benneBetonBooking.addEventListener('click', () =>{
+        benneBetonBookingContent.classList.add('show-login')
+    })
+}
+
+/* Login hidden */
+if(benneBetonBookingClose) {
+    benneBetonBookingClose.addEventListener('click', () =>{
+        benneBetonBookingContent.classList.remove('show-login')
+    })
+}
+
+/*=============== BENNE A BETON BOOKING BY PHONE ===============*/
+const benneBetonBookingPhone = document.getElementById('benne-beton-phone'),
+    benneBetonBookingPhoneClose = document.getElementById('modal-close'),
+    benneBetonBookingPhoneContent = document.getElementById('modal-content')
+
+/* Modal show */
+if(benneBetonBookingPhone) {
+    benneBetonBookingPhone.addEventListener('click', () =>{
+        benneBetonBookingPhoneContent.classList.add('show-modal')
+    })
+}
+
+/* Modal hidden */
+if(benneBetonBookingPhoneClose) {
+    benneBetonBookingPhoneClose.addEventListener('click', () =>{
+        benneBetonBookingPhoneContent.classList.remove('show-modal')
+    })
+}
+
+/*=============== GOULOTTE BOOKING LOGIN ===============*/
+const goulotteBooking = document.getElementById('goulotte'),
+    goulotteBookingClose = document.getElementById('login-close'),
+    goulotteBookingContent = document.getElementById('login-content')
+
+/* Login show */
+if(goulotteBooking) {
+    goulotteBooking.addEventListener('click', () =>{
+        goulotteBookingContent.classList.add('show-login')
+    })
+}
+
+/* Login hidden */
+if(goulotteBookingClose) {
+    goulotteBookingClose.addEventListener('click', () =>{
+        goulotteBookingContent.classList.remove('show-login')
+    })
+}
+
+/*=============== GOULOTTE BOOKING BY PHONE ===============*/
+const goulotteBookingPhone = document.getElementById('goulotte-phone'),
+    goulotteBookingPhoneClose = document.getElementById('modal-close'),
+    goulotteBookingPhoneContent = document.getElementById('modal-content')
+
+/* Modal show */
+if(goulotteBookingPhone) {
+    goulotteBookingPhone.addEventListener('click', () =>{
+        goulotteBookingPhoneContent.classList.add('show-modal')
+    })
+}
+
+/* Modal hidden */
+if(goulotteBookingPhoneClose) {
+    goulotteBookingPhoneClose.addEventListener('click', () =>{
+        goulotteBookingPhoneContent.classList.remove('show-modal')
+    })
+}
+
+/*=============== DISCOUNT LOGIN ===============*/
+const discountLogin = document.getElementById('discount-login'),
+    discountLoginClose = document.getElementById('login-close'),
+    discountLoginContent = document.getElementById('login-content')
+
+/* Login show */
+if(discountLogin) {
+    discountLogin.addEventListener('click', () =>{
+        discountLoginContent.classList.add('show-login')
+    })
+}
+
+/* Login hidden */
+if(discountLoginClose) {
+    discountLoginClose.addEventListener('click', () =>{
+        discountLoginContent.classList.remove('show-login')
+    })
+}
+
+
+
+/*=============== REMOVE MENU MOBILE ===============*/
+const navLink = document.querySelectorAll('.nav__link')
+
+const linkAction = () =>{
+    const navMenu = document.getElementById('nav-menu')
+    navMenu.classList.remove('show-menu')
+}
+navLink.forEach(n => n.addEventListener('click', linkAction))
+
+/*=============== ADD SHADOW HEADER ===============*/
+/*const shadowHeader = ()=>{
+    const header = document.getElementById('header')
+    this.scrollY >= 50 ? header.classList.add('shadow-header')
+        : header.classList.remove('shadow-header')
+}
+window.addEventListener('scroll', shadowHeader)*/
+
+/*=============== SWIPER HOME ===============*/
+let swiperHome = new Swiper('.home__swiper', {
+    loop: true,
+    spaceBetween: -24,
+    grabCursor: true,
+    slidesPerView: 'auto',
+    centeredSlides: 'auto',
+
+    autoplay: {
+        delay: 3000,
+        disableOnInteraction: false,
+    },
+
+    breakpoints: {
+        1220: {
+            spaceBetween: -32,
+            slidesPerView: 3,
+        }
+    }
+})
+
+/*=============== FARMLAND SWIPER ===============*/
+let swiperFarmland = new Swiper('.farmland__swiper', {
+    loop: true,
+    spaceBetween: 16,
+    grabCursor: true,
+    slidesPerView: 'auto',
+    centeredSlides: 'auto',
+
+    navigation: {
+        nextEl: '.swiper-button-next',
+        prevEl: '.swiper-button-prev',
+    },
+
+    breakpoints: {
+        1150: {
+            slidesPerView: 4,
+            centeredSlides: false,
+        }
+    }
+})
+
+/*=============== FARMLAND ATTECOUBÉ BOOKING BY PHONE ===============*/
+const farmlandAttecoubePhoneClose = document.getElementById('modal-close'),
+    farmlandAttecoubePhoneContent = document.getElementById('modal-content')
+function farmlandAttecoubeByPhone() {
+    farmlandAttecoubePhoneContent.classList.add('show-modal');
+}
+
+/*=============== FARMLAND ATTECOUBÉ  BOOKING LOGIN ===============*/
+const farmlandAttecoubeClose = document.getElementById('login-close'),
+    farmlandAttecoubeContent = document.getElementById('login-content')
+function farmlandAttecoube() {
+    farmlandAttecoubeContent.classList.add('show-login');
+}
+
+/*=============== FARMLAND TREICHVILLE BOOKING BY PHONE ===============*/
+const farmlandTreichvillePhoneClose = document.getElementById('modal-close'),
+    farmlandTreichvillePhoneContent = document.getElementById('modal-content')
+function farmlandTreichvilleByPhone() {
+    farmlandTreichvillePhoneContent.classList.add('show-modal');
+}
+
+/*=============== FARMLAND TREICHVILLE  BOOKING LOGIN ===============*/
+const farmlandTreichvilleClose = document.getElementById('login-close'),
+    farmlandTreichvilleContent = document.getElementById('login-content')
+function farmlandTreichville() {
+    farmlandTreichvilleContent.classList.add('show-login');
+}
+
+/*=============== FARMLAND MARCORY BOOKING BY PHONE ===============*/
+const farmlandMarcoryPhoneClose = document.getElementById('modal-close'),
+    farmlandMarcoryPhoneContent = document.getElementById('modal-content')
+function farmlandMarcoryByPhone() {
+    farmlandMarcoryPhoneContent.classList.add('show-modal');
+}
+
+/*=============== FARMLAND MARCORY  BOOKING LOGIN ===============*/
+const farmlandMarcoryClose = document.getElementById('login-close'),
+    farmlandMarcoryContent = document.getElementById('login-content')
+function farmlandMarcory() {
+    farmlandMarcoryContent.classList.add('show-login');
+}
+
+/*=============== FARMLAND BRACODI BOOKING BY PHONE ===============*/
+const farmlandBracodiPhoneClose = document.getElementById('modal-close'),
+    farmlandBracodiPhoneContent = document.getElementById('modal-content')
+function farmlandBracodiByPhone() {
+    farmlandBracodiPhoneContent.classList.add('show-modal');
+}
+
+/*=============== FARMLAND BRACODI  BOOKING LOGIN ===============*/
+const farmlandBracodiClose = document.getElementById('login-close'),
+    farmlandBracodiContent = document.getElementById('login-content')
+function farmlandBracodi() {
+    farmlandBracodiContent.classList.add('show-login');
+}
+
+/*=============== FARMLAND SIKASSO BOOKING BY PHONE ===============*/
+const farmlandSikassoPhoneClose = document.getElementById('modal-close'),
+    farmlandSikassoPhoneContent = document.getElementById('modal-content')
+function farmlandSikassoByPhone() {
+    farmlandSikassoPhoneContent.classList.add('show-modal');
+}
+
+/*=============== FARMLAND SIKASSO  BOOKING LOGIN ===============*/
+const farmlandSikassoClose = document.getElementById('login-close'),
+    farmlandSikassoContent = document.getElementById('login-content')
+function farmlandSikasso() {
+    farmlandSikassoContent.classList.add('show-login');
+}
+
+/*=============== BUILDING PELLETEUSE BOOKING BY PHONE ===============*/
+const buildingPelleteusePhoneClose = document.getElementById('modal-close'),
+    buildingPelleteusePhoneContent = document.getElementById('modal-content')
+function buildingPelleteuseByPhone() {
+    buildingPelleteusePhoneContent.classList.add('show-modal');
+}
+
+/*=============== BUILDING PELLETEUSE  BOOKING LOGIN ===============*/
+const buildingPelleteuseClose = document.getElementById('login-close'),
+    buildingPelleteuseContent = document.getElementById('login-content')
+function buildingPelleteuse() {
+    buildingPelleteuseContent.classList.add('show-login');
+}
+
+/*=============== BUILDING MARTEAU BOOKING BY PHONE ===============*/
+const buildingMarteauPhoneClose = document.getElementById('modal-close'),
+    buildingMarteauPhoneContent = document.getElementById('modal-content')
+function buildingMarteauByPhone() {
+    buildingMarteauPhoneContent.classList.add('show-modal');
+}
+
+/*=============== BUILDING MARTEAU  BOOKING LOGIN ===============*/
+const buildingMarteauClose = document.getElementById('login-close'),
+    buildingMarteauContent = document.getElementById('login-content')
+function buildingMarteau() {
+    buildingMarteauContent.classList.add('show-login');
+}
+
+/*=============== BUILDING BENNE BOOKING BY PHONE ===============*/
+const buildingBennePhoneClose = document.getElementById('modal-close'),
+    buildingBennePhoneContent = document.getElementById('modal-content')
+function buildingBenneByPhone() {
+    buildingBennePhoneContent.classList.add('show-modal');
+}
+
+/*=============== BUILDING BENNE  BOOKING LOGIN ===============*/
+const buildingBenneClose = document.getElementById('login-close'),
+    buildingBenneContent = document.getElementById('login-content')
+function buildingBenne() {
+    buildingBenneContent.classList.add('show-login');
+}
+
+/*=============== BUILDING GOULOTTE BOOKING BY PHONE ===============*/
+const buildingGoulottePhoneClose = document.getElementById('modal-close'),
+    buildingGoulottePhoneContent = document.getElementById('modal-content')
+function buildingGoulotteByPhone() {
+    buildingGoulottePhoneContent.classList.add('show-modal');
+}
+
+/*=============== BUILDING GOULOTTE  BOOKING LOGIN ===============*/
+const buildingGoulotteClose = document.getElementById('login-close'),
+    buildingGoulotteContent = document.getElementById('login-content')
+function buildingGoulotte() {
+    buildingGoulotteContent.classList.add('show-login');
+}
+
+/*=============== SONGON BY PHONE ===============*/
+const songonPhoneClose = document.getElementById('modal-close'),
+    songonPhoneContent = document.getElementById('modal-content')
+function songonPhone() {
+    songonPhoneContent.classList.add('show-modal');
+}
+
+function explore() {
+    setTimeout(function () {
+        location.reload();
+    }, 3000);
+}
+
+function zoneSongon() {
+    setTimeout(function () {
+        location.reload();
+    }, 3000);
+}
+
+function deposerAnnonce() {
+    setTimeout(function () {
+        location.reload();
+    }, 10);
+}
+
+/*=============== DEPOSER ANNONCE LOGIN ===============*/
+const deposerAnnonceClose = document.getElementById('login-close'),
+    deposerAnnonceContent = document.getElementById('login-content')
+function deposerAnnonceToLogin() {
+    deposerAnnonceContent.classList.add('show-login');
+}
+
+/*=============== INSCRIPTION ANNONCE ===============*/
+function inscriptionAnnonce() {
+    setTimeout(function () {
+        location.reload();
+    }, 10);
+}
+
+/*=============== EVENTROOM SALLE A BY PHONE ===============*/
+const eventroomSalleAPhoneClose = document.getElementById('modal-close'),
+    eventroomSalleAPhoneContent = document.getElementById('modal-content')
+function eventroomSalleAPhone() {
+    eventroomSalleAPhoneContent.classList.add('show-modal');
+}
+
+/*=============== EVENTROOM SALLE A LOGIN ===============*/
+const eventroomSalleAClose = document.getElementById('login-close'),
+    eventroomSalleAContent = document.getElementById('login-content')
+function eventroomSalleA() {
+    eventroomSalleAContent.classList.add('show-login');
+}
+
+/*=============== EVENTROOM SALLE B BY PHONE ===============*/
+const eventroomSalleBPhoneClose = document.getElementById('modal-close'),
+    eventroomSalleBPhoneContent = document.getElementById('modal-content')
+function eventroomSalleBPhone() {
+    eventroomSalleBPhoneContent.classList.add('show-modal');
+}
+
+/*=============== EVENTROOM SALLE B LOGIN ===============*/
+const eventroomSalleBClose = document.getElementById('login-close'),
+    eventroomSalleBContent = document.getElementById('login-content')
+function eventroomSalleB() {
+    eventroomSalleBContent.classList.add('show-login');
+}
+
+/*=============== EVENTROOM SALLE C BY PHONE ===============*/
+const eventroomSalleCPhoneClose = document.getElementById('modal-close'),
+    eventroomSalleCPhoneContent = document.getElementById('modal-content')
+function eventroomSalleCPhone() {
+    eventroomSalleCPhoneContent.classList.add('show-modal');
+}
+
+/*=============== EVENTROOM SALLE C LOGIN ===============*/
+const eventroomSalleCClose = document.getElementById('login-close'),
+    eventroomSalleCContent = document.getElementById('login-content')
+function eventroomSalleC() {
+    eventroomSalleCContent.classList.add('show-login');
+}
+
+/*=============== EVENTROOM SALLE D BY PHONE ===============*/
+const eventroomSalleDPhoneClose = document.getElementById('modal-close'),
+    eventroomSalleDPhoneContent = document.getElementById('modal-content')
+function eventroomSalleDPhone() {
+    eventroomSalleDPhoneContent.classList.add('show-modal');
+}
+
+/*=============== EVENTROOM SALLE D LOGIN ===============*/
+const eventroomSalleDClose = document.getElementById('login-close'),
+    eventroomSalleDContent = document.getElementById('login-content')
+function eventroomSalleD() {
+    eventroomSalleDContent.classList.add('show-login');
+}
+
+/*=============== TARPAULIN BACHE STRUCTURE A BY PHONE ===============*/
+const tarpaulinBacheAPhoneClose = document.getElementById('modal-close'),
+    tarpaulinBacheAPhoneContent = document.getElementById('modal-content')
+function tarpaulinBacheAPhone() {
+    tarpaulinBacheAPhoneContent.classList.add('show-modal');
+}
+
+/*=============== TARPAULIN BACHE STRUCTURE A LOGIN ===============*/
+const tarpaulinBacheAClose = document.getElementById('login-close'),
+    tarpaulinBacheAContent = document.getElementById('login-content')
+function tarpaulinBacheA() {
+    tarpaulinBacheAContent.classList.add('show-login');
+}
+
+/*=============== TARPAULIN BACHE STRUCTURE B BY PHONE ===============*/
+const tarpaulinBacheBPhoneClose = document.getElementById('modal-close'),
+    tarpaulinBacheBPhoneContent = document.getElementById('modal-content')
+function tarpaulinBacheBPhone() {
+    tarpaulinBacheBPhoneContent.classList.add('show-modal');
+}
+
+/*=============== TARPAULIN BACHE STRUCTURE B LOGIN ===============*/
+const tarpaulinBacheBClose = document.getElementById('login-close'),
+    tarpaulinBacheBContent = document.getElementById('login-content')
+function tarpaulinBacheB() {
+    tarpaulinBacheBContent.classList.add('show-login');
+}
+
+/*=============== TARPAULIN BACHE STRUCTURE C BY PHONE ===============*/
+const tarpaulinBacheCPhoneClose = document.getElementById('modal-close'),
+    tarpaulinBacheCPhoneContent = document.getElementById('modal-content')
+function tarpaulinBacheCPhone() {
+    tarpaulinBacheCPhoneContent.classList.add('show-modal');
+}
+
+/*=============== TARPAULIN BACHE STRUCTURE C LOGIN ===============*/
+const tarpaulinBacheCClose = document.getElementById('login-close'),
+    tarpaulinBacheCContent = document.getElementById('login-content')
+function tarpaulinBacheC() {
+    tarpaulinBacheCContent.classList.add('show-login');
+}
+
+/*=============== TARPAULIN BACHE STRUCTURE D BY PHONE ===============*/
+const tarpaulinBacheDPhoneClose = document.getElementById('modal-close'),
+    tarpaulinBacheDPhoneContent = document.getElementById('modal-content')
+function tarpaulinBacheDPhone() {
+    tarpaulinBacheDPhoneContent.classList.add('show-modal');
+}
+
+/*=============== TARPAULIN BACHE STRUCTURE D LOGIN ===============*/
+const tarpaulinBacheDClose = document.getElementById('login-close'),
+    tarpaulinBacheDContent = document.getElementById('login-content')
+function tarpaulinBacheD() {
+    tarpaulinBacheDContent.classList.add('show-login');
+}
+
+/*=============== SPOTLIGHT CHAISE BY PHONE ===============*/
+const spotlightChaisePhoneClose = document.getElementById('modal-close'),
+    spotlightChaisePhoneContent = document.getElementById('modal-content')
+function spotlightChaisePhone() {
+    spotlightChaisePhoneContent.classList.add('show-modal');
+}
+
+/*=============== SPOTLIGHT BATEAU BY PHONE ===============*/
+const spotlightBateauPhoneClose = document.getElementById('modal-close'),
+    spotlightBateauPhoneContent = document.getElementById('modal-content')
+function spotlightBateauPhone() {
+    spotlightBateauPhoneContent.classList.add('show-modal');
+}
+
+/*=============== SPOTLIGHT VAISSELLE BY PHONE ===============*/
+const spotlightVaissellePhoneClose = document.getElementById('modal-close'),
+    spotlightVaissellePhoneContent = document.getElementById('modal-content')
+function spotlightVaissellePhone() {
+    spotlightVaissellePhoneContent.classList.add('show-modal');
+}
+
+/*=============== SPOTLIGHT BACHE BY PHONE ===============*/
+const spotlightBachePhoneClose = document.getElementById('modal-close'),
+    spotlightBachePhoneContent = document.getElementById('modal-content')
+function spotlightBachePhone() {
+    spotlightBachePhoneContent.classList.add('show-modal');
+}
+
+/*=============== SPOTLIGHT TERRAIN ATTECOUBE BY PHONE ===============*/
+const spotlightTerrainAttecoubePhoneClose = document.getElementById('modal-close'),
+    spotlightTerrainAttecoubePhoneContent = document.getElementById('modal-content')
+function spotlightTerrainAttecoubePhone() {
+    spotlightTerrainAttecoubePhoneContent.classList.add('show-modal');
+}
+
+/*=============== SPOTLIGHT TERRAIN TREICHVILLE BY PHONE ===============*/
+const spotlightTerrainTreichvillePhoneClose = document.getElementById('modal-close'),
+    spotlightTerrainTreichvillePhoneContent = document.getElementById('modal-content')
+function spotlightTerrainTreichvillePhone() {
+    spotlightTerrainTreichvillePhoneContent.classList.add('show-modal');
+}
+
+/*=============== SPOTLIGHT TERRAIN MARCORY BY PHONE ===============*/
+const spotlightTerrainMarcoryPhoneClose = document.getElementById('modal-close'),
+    spotlightTerrainMarcoryPhoneContent = document.getElementById('modal-content')
+function spotlightTerrainMarcoryPhone() {
+    spotlightTerrainMarcoryPhoneContent.classList.add('show-modal');
+}
+
+/*=============== SPOTLIGHT TERRAIN BRACODI BY PHONE ===============*/
+const spotlightTerrainBracodyPhoneClose = document.getElementById('modal-close'),
+    spotlightTerrainBracodiPhoneContent = document.getElementById('modal-content')
+function spotlightTerrainBracodiPhone() {
+    spotlightTerrainBracodiPhoneContent.classList.add('show-modal');
+}
+
+/*=============== SPOTLIGHT RENAULT BY PHONE ===============*/
+const spotlightRenaultPhoneClose = document.getElementById('modal-close'),
+    spotlightRenaultPhoneContent = document.getElementById('modal-content')
+function spotlightRenaultPhone() {
+    spotlightRenaultPhoneContent.classList.add('show-modal');
+}
+
+/*=============== SPOTLIGHT MAZDA BY PHONE ===============*/
+const spotlightMazdaPhoneClose = document.getElementById('modal-close'),
+    spotlightMazdaPhoneContent = document.getElementById('modal-content')
+function spotlightMazdaPhone() {
+    spotlightMazdaPhoneContent.classList.add('show-modal');
+}
+
+/*=============== SPOTLIGHT AUDI BY PHONE ===============*/
+const spotlightAudiPhoneClose = document.getElementById('modal-close'),
+    spotlightAudiPhoneContent = document.getElementById('modal-content')
+function spotlightAudiPhone() {
+    spotlightAudiPhoneContent.classList.add('show-modal');
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+/*=============== BUILDING SWIPER ===============*/
+let swiperBuilding = new Swiper('.building__swiper', {
+    loop: true,
+    spaceBetween: 16,
+    grabCursor: true,
+    slidesPerView: 'auto',
+    centeredSlides: 'auto',
+
+    navigation: {
+        nextEl: '.swiper-button-next',
+        prevEl: '.swiper-button-prev',
+    },
+
+    breakpoints: {
+        1150: {
+            slidesPerView: 4,
+            centeredSlides: false,
+        }
+    }
+})
+
+/*=============== VEHICLE SWIPER ===============*/
+let swiperVehicle = new Swiper('.vehicle__swiper', {
+    loop: true,
+    spaceBetween: 16,
+    slidesPerView: 'auto',
+
+    breakpoints: {
+        1150: {
+            slidesPerView: 3,
+        }
+    }
+})
+
+/*=============== TESTIMONIAL SWIPER ===============*/
+let swiperTestimonial = new Swiper('.testimonial__swiper', {
+    loop: true,
+    spaceBetween: 16,
+    grabCursor: true,
+    slidesPerView: 'auto',
+    centeredSlides: 'auto',
+
+    breakpoints: {
+        1150: {
+            slidesPerView: 3,
+            centeredSlides: false,
+        }
+    }
+})
+
+/*=============== EVENTROOMS SWIPER ===============*/
+let swiperEventrooms = new Swiper('.eventrooms__swiper', {
+    loop: true,
+    spaceBetween: 16,
+    grabCursor: true,
+    slidesPerView: 'auto',
+    centeredSlides: 'auto',
+
+    navigation: {
+        nextEl: '.swiper-button-next',
+        prevEl: '.swiper-button-prev',
+    },
+
+    breakpoints: {
+        1150: {
+            slidesPerView: 4,
+            centeredSlides: false,
+        }
+    }
+})
+
+/*=============== TARPAULIN SWIPER ===============*/
+let swiperTarpaulin = new Swiper('.tarpaulin__swiper', {
+    loop: true,
+    spaceBetween: 16,
+    grabCursor: true,
+    slidesPerView: 'auto',
+    centeredSlides: 'auto',
+
+    navigation: {
+        nextEl: '.swiper-button-next',
+        prevEl: '.swiper-button-prev',
+    },
+
+    breakpoints: {
+        1150: {
+            slidesPerView: 4,
+            centeredSlides: false,
+        }
+    }
+})
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+/*=============== SHOW SCROLL UP ===============*/ 
+const scrollUp = () => {
+    const scrollUp = document.getElementById('scroll-up')
+    this.scrollY >= 350 ? scrollUp.classList.add('show-scroll') 
+        :scrollUp.classList.remove('show-scroll')
+}
+window.addEventListener('scroll', scrollUp)
+
+/*=============== SCROLL REVEAL ANIMATION ===============*/
+const sr = ScrollReveal({
+    origin: 'top',
+    distance: '60px',
+    duration: 2500,
+    delay: 400,
+    reset: true, // Repeat
+})
+
+sr.reveal(`.home__data, .building__container, .vehicle__container,
+    .join__data, .testimonial__container, .footer`)
+sr.reveal(`.home__images`, {delay: 600})
+sr.reveal(`.services__card`, {interval: 100})
+sr.reveal(`.discount__data`, {origin: 'left'})
+sr.reveal(`.discount__images`, {origin: 'right'})
+

public/templates/agency/about.html

@@ -0,0 +1,10 @@
+{{define "about"}}
+<div class="card">
+  <h1>About Us</h1>
+  <p>
+    We believe in keeping things simple. No complex JavaScript frameworks, just
+    pure HTML and hypermedia controls.
+  </p>
+  <p>This page was rendered at: <strong>{{.Time}}</strong></p>
+</div>
+{{end}}

public/templates/agency/contact.html

@@ -0,0 +1,21 @@
+{{define "contact"}}
+<div class="card">
+  <h1>Contact</h1>
+  <form hx-post="/contact" hx-swap="outerHTML">
+    <p>Send us a message (Mock form):</p>
+    <div style="margin-bottom: 1rem">
+      <input
+        type="email"
+        placeholder="Email"
+        style="
+          width: 100%;
+          padding: 0.5rem;
+          border: 1px solid #ccc;
+          border-radius: 4px;
+        "
+      />
+    </div>
+    <button type="submit" class="btn">Submit</button>
+  </form>
+</div>
+{{end}}

public/templates/agency/deposer-annonce.html

@@ -0,0 +1,47 @@
+{{define "deposer-annonce"}}
+<!--==================== DÉPOSER ANNONCE ====================-->
+<section class="depannonce section" id="depannonce">
+  <form action="" class="depannonce__form grid">
+    <h3 class="depannonce__title">Ensemble, déposons <br>votre première annonce.</h3>
+
+    <div class="depannonce__group grid">
+      <div>
+        <label for="depannonce-email" class="depannonce__label">Votre email</label>
+        <input
+          type="email"
+          placeholder="nom@email.com"
+          id="depannonce-email"
+          class="depannonce__input"
+        required/>
+      </div>
+    </div>
+
+    <div>
+      <button 
+        hx-get="/inscription"
+        hx-target="#view"
+        hx-push-url="true"
+        class="depannonce__button button"
+        onclick="inscriptionAnnonce()">
+        Valider
+      </button>
+    </div>
+
+    <div class="depannonce__member">
+      <p>Rejoignez les membres de la communauté Toutaloué</p>
+    </div>
+    <div class="depannonce__bring">
+      <p>Une annonce peut vous rapporter en moyenne</p>
+      <p class="depannonce__amount">120€/mois</p>
+      <p class="depannonce__rental">5 locations/mois</p>
+
+      <p>Vous avez déjà un compte ?</p>
+      <a onclick="deposerAnnonceToLogin()" class="depannonce__login">
+        Connectez-vous
+      </a>
+    </div>
+
+    
+  </form>
+</section>
+{{ end }}

public/templates/agency/explore.html

@@ -0,0 +1,262 @@
+{{define "explore"}}
+<!--==================== EXPLORE ====================-->
+<section class="explore section">
+    <div class="container explore-content">
+        <h1>Location de matériel pour <br> <span class="highlight">Professionnels et Partculiers</span></h1>
+        <p>Plus de 1000 références disponibles immédiatement.</p>
+        <a href="#" class="btn-primary">Catalogue</a>
+    </div>
+</section>
+
+<!--==================== CATEGORIES ====================-->
+<section class="explore-categories bg-light">
+    <div class="container">
+        <h2 class="section-title">Les catégories populaires</h2>
+
+        <div class="category-grid">
+            <!-- Cat 1 -->
+            <div class="cat-card">
+                <div class="cat-icon"><i class="ri-building-2-fill"></i></div>
+                <h3>Matériels de construction</h3>
+            </div>
+            <!-- Cat 2 -->
+            <div class="cat-card">
+                <div class="cat-icon"><i class="ri-tv-fill"></i></div>
+                <h3>Électroménagers</h3>
+            </div>
+            <!-- Cat 3 -->
+            <div class="cat-card">
+                <div class="cat-icon"><i class="ri-roadster-fill"></i></div>
+                <h3>Véhicules</h3>
+            </div>
+            <!-- Cat 4 -->
+            <div class="cat-card">
+                <div class="cat-icon"><i class="ri-home-9-fill"></i></div>
+                <h3>Salles événementielles</h3>
+            </div>
+            <!-- Cat 5 -->
+            <div class="cat-card">
+                <div class="cat-icon"><i class="ri-ship-2-fill"></i></div>
+                <h3>Bateaux</h3>
+            </div>
+        </div>
+    </div>
+</section>
+
+ <!--==================== PRODUCT SPOTLIGHT ====================-->
+<section class="product-spotlight">
+    <div class="container">
+        <div class="flex-row-between mb-2">
+            <h2 class="section-title">Les locations de la semaine</h2>
+            <a href="#" class="see-all">Tous les produits<i class="ri-arrow-right-line"></i></a>
+        </div>
+
+        <div class="product-grid">
+            <!-- Product 1 -->
+            <article class="product-card">
+                <div class="tag">Top</div>
+                <div class="prod-image">
+                    <img src="/public/assets/img/chaise.jpg" alt="chair">
+                </div>
+                <div class="prod-details">
+                    <span class="category">Chaise</span>
+                    <h4>Chaise événementielle</h4>
+                    <div class="price-block">
+                        <span class="label">À partir de</span>
+                        <span class="price">20.00€</span>
+                        <span class="per">/ jour</span>
+                    </div>
+                    <button class="btn-add" onclick="spotlightChaisePhone()">Contacter l'agence</button>
+                </div>
+            </article>
+
+            <!-- Product 2 -->
+            <article class="product-card">
+                <div class="prod-image">
+                    <img src="/public/assets/img/bateau.jpg" alt="boat">
+                </div>
+                <div class="prod-details">
+                    <span class="category">Bateau</span>
+                    <h4>Bateau de plaisance</h4>
+                    <div class="price-block">
+                        <span class="label">À partir de</span>
+                        <span class="price">185.00€</span>
+                        <span class="per">/ jour</span>
+                    </div>
+                    <button class="btn-add" onclick="spotlightBateauPhone()">Contacter l'agence</button>
+                </div>
+            </article>
+
+            <!-- Product 3 -->
+            <article class="product-card">
+                <div class="tag promo">-15%</div>
+                <div class="prod-image">
+                    <img src="/public/assets/img/vaisselle.jpg" alt="dishes">
+                </div>
+                <div class="prod-details">
+                    <span class="category">Vaisselle</span>
+                    <h4>Vaisselle haut de gamme</h4>
+                    <div class="price-block">
+                        <span class="label">À partir de</span>
+                        <span class="price">35.00€</span>
+                        <span class="per">/ jour</span>
+                    </div>
+                    <button class="btn-add" onclick="spotlightVaissellePhone()">Contacter l'agence</button>
+                </div>
+            </article>
+            <!-- Product 4 -->
+            <article class="product-card">
+                <div class="prod-image">
+                    <img src="/public/assets/img/bache-structure-evenement-2.png" alt="tarp">
+                </div>
+                <div class="prod-details">
+                    <span class="category">Bâche</span>
+                    <h4>Bâche événementielle</h4>
+                    <div class="price-block">
+                        <span class="label">À partir</span>
+                        <span class="price">70.00€</span>
+                        <span class="per">/ jour</span>
+                    </div>
+                    <button class="btn-add" onclick="spotlightBachePhone()">Contacter l'agence</button>
+                </div>
+            </article>
+
+            <!-- Product 5 -->
+            <article class="product-card">
+                <div class="prod-image">
+                    <img src="/public/assets/img/farmlands/terrain-attecoube.jpg" alt="tarp">
+                </div>
+                <div class="prod-details">
+                    <span class="category">Terre agricole</span>
+                    <h4>Terrain Attecoubé</h4>
+                    <div class="price-block">
+                        <span class="label">À partir</span>
+                        <span class="price">180.00€</span>
+                        <span class="per">/ hectare</span>
+                    </div>
+                    <button class="btn-add" onclick="spotlightTerrainAttecoubePhone()">Contacter l'agence</button>
+                </div>
+            </article>
+
+            <!-- Product 6 -->
+            <article class="product-card">
+                <div class="prod-image">
+                    <img src="/public/assets/img/farmlands/terrain-treichville.jpeg" alt="tarp">
+                </div>
+                <div class="prod-details">
+                    <span class="category">Terre agricole</span>
+                    <h4>Terrain Treichville</h4>
+                    <div class="price-block">
+                        <span class="label">À partir</span>
+                        <span class="price">180.00€</span>
+                        <span class="per">/ hectare</span>
+                    </div>
+                    <button class="btn-add" onclick="spotlightTerrainTreichvillePhone()">Contacter l'agence</button>
+                </div>
+            </article>
+
+            <!-- Product 7 -->
+            <article class="product-card">
+                <div class="prod-image">
+                    <img src="/public/assets/img/farmlands/terrain-marcory.jpg" alt="tarp">
+                </div>
+                <div class="prod-details">
+                    <span class="category">Terre agricole</span>
+                    <h4>Terrain Marcory</h4>
+                    <div class="price-block">
+                        <span class="label">À partir</span>
+                        <span class="price">180.00€</span>
+                        <span class="per">/ hectare</span>
+                    </div>
+                    <button class="btn-add" onclick="spotlightTerrainMarcoryPhone()">Contacter l'agence</button>
+                </div>
+            </article>
+
+            <!-- Product 8 -->
+            <article class="product-card">
+                <div class="prod-image">
+                    <img src="/public/assets/img/farmlands/terrain-bracodi.avif" alt="tarp">
+                </div>
+                <div class="prod-details">
+                    <span class="category">Terre agricole</span>
+                    <h4>Terrain Bracodi</h4>
+                    <div class="price-block">
+                        <span class="label">À partir</span>
+                        <span class="price">180.00€</span>
+                        <span class="per">/ hectare</span>
+                    </div>
+                    <button class="btn-add" onclick="spotlightTerrainBracodiPhone()">Contacter l'agence</button>
+                </div>
+            </article>
+
+            <!-- Product 9 -->
+            <article class="product-card">
+                <div class="prod-image">
+                    <img src="/public/assets/img/tools/car-product-1.jpg" alt="tarp">
+                </div>
+                <div class="prod-details">
+                    <span class="category">Véhicule</span>
+                    <h4>Renault megane</h4>
+                    <div class="price-block">
+                        <span class="label">À partir</span>
+                        <span class="price">78.43€</span>
+                        <span class="per">/ jour</span>
+                    </div>
+                    <button class="btn-add" onclick="spotlightRenaultPhone()">Contacter l'agence</button>
+                </div>
+            </article>
+
+            <!-- Product 10 -->
+            <article class="product-card">
+                <div class="prod-image">
+                    <img src="/public/assets/img/tools/car-product-2.jpeg" alt="tarp">
+                </div>
+                <div class="prod-details">
+                    <span class="category">Véhicule</span>
+                    <h4>Mazda</h4>
+                    <div class="price-block">
+                        <span class="label">À partir</span>
+                        <span class="price">78.43€</span>
+                        <span class="per">/ jour</span>
+                    </div>
+                    <button class="btn-add" onclick="spotlightMazdaPhone()">Contacter l'agence</button>
+                </div>
+            </article>
+
+            <!-- Product 11 -->
+            <article class="product-card">
+                <div class="prod-image">
+                    <img src="/public/assets/img/tools/car-product-3.avif" alt="tarp">
+                </div>
+                <div class="prod-details">
+                    <span class="category">Véhicule</span>
+                    <h4>Audi</h4>
+                    <div class="price-block">
+                        <span class="label">À partir</span>
+                        <span class="price">78.43€</span>
+                        <span class="per">/ jour</span>
+                    </div>
+                    <button class="btn-add" onclick="spotlightAudiPhone()">Contacter l'agence</button>
+                </div>
+            </article>
+
+            <!-- Product 12 -->
+            <article class="product-card">
+                <div class="prod-image">
+                    <img src="/public/assets/img/tools/car-product-1.jpg" alt="tarp">
+                </div>
+                <div class="prod-details">
+                    <span class="category">Véhicule</span>
+                    <h4>Renault megane</h4>
+                    <div class="price-block">
+                        <span class="label">À partir</span>
+                        <span class="price">78.43€</span>
+                        <span class="per">/ jour</span>
+                    </div>
+                    <button class="btn-add" onclick="spotlightRenaultPhone()">Contacter l'agence</button>
+                </div>
+            </article>
+        </div>
+    </div>
+</section>
+{{ end }}

public/templates/agency/home.html

@@ -0,0 +1,760 @@
+{{define "home"}}
+<!--==================== BOOKING ====================-->
+<section class="booking">
+  <div class="booking-content container">
+    <h1>Location des produits et services</h1>
+    <p>Des prix imbattables, des réservations flexibles.</p>
+    <form class="booking-form" id="booking-form">
+      <div class="form-group">
+        <i class="ri-map-pin-fill"></i>
+        <input type="text" placeholder="Localisation" required />
+      </div>
+      <div class="form-group">
+        <i class="ri-calendar-fill"></i>
+        <input type="text" onfocus="(this.type='date')" onblur="(this.type='text')" placeholder="Date de départ" required />
+      </div>
+      <div class="form-group">
+        <i class="ri-calendar-fill"></i>
+        <input type="text" onfocus="(this.type='date')" onblur="(this.type='text')" placeholder="Date de retour" required />
+      </div>
+      <button type="submit" class="btn btn-primary">Recherche</button>
+    </form>
+  </div>
+</section>
+
+<!--==================== SERVICES ====================-->
+<section class="services section">
+  <div class="services__container container grid">
+    <article class="services__card">
+      <i class="ri-truck-line"></i>
+      <h3 class="services__title">Livraison gratuite</h3>
+      <p class="services__description">Pour plus de 1000€ de locations</p>
+    </article>
+    <article class="services__card">
+      <i class="ri-truck-line"></i>
+      <h3 class="services__title">Paiements sécurisés</h3>
+      <p class="services__description">100% de paiements sécurisés</p>
+    </article>
+    <article class="services__card">
+      <i class="ri-truck-line"></i>
+      <h3 class="services__title">Support 24/7</h3>
+      <p class="services__description">Nous contacter au 01 84 21 13 96</p>
+    </article>
+  </div>
+</section>
+
+<!--==================== HOME ====================-->
+<section class="home" id="home">
+  <div class="home__container container" id="grid">
+    <div class="home__data">
+      <h1 class="home__title">
+        Nos catégories <br>
+        de produits
+      </h1>
+      <p class="home__description">
+        Trouve les meilleurs produits de tes catégories préférées,
+        explore des centaines de produits avec toutes les catégories
+        possibles, profite d’une réduction de 15% et bien plus encore.
+      </p>
+      <a hx-get="/explore" hx-target="#view" hx-push-url="true" class="button" onclick="explore()">Découvrir maintenant</a>
+    </div>
+    <div class="home__images">
+      <div class="home__swiper swiper">
+        <div class="swiper-wrapper">
+          <article class="home__article swiper-slide">
+            <img src="/public/assets/img/tools/terres-agricoles.jpg" alt="image" class="home__img">
+          </article>
+          <article class="home__article swiper-slide">
+            <img src="/public/assets/img/tools/mat-construction.jpg" alt="image" class="home__img">
+          </article>
+          <article class="home__article swiper-slide">
+            <img src="/public/assets/img/tools/electromenagers.avif" alt="image" class="home__img">
+          </article>
+          <article class="home__article swiper-slide">
+            <img src="/public/assets/img/tools/vehicules.jpg" alt="image" class="home__img">
+          </article>
+          <article class="home__article swiper-slide">
+            <img src="/public/assets/img/tools/salles-evenementielles.jpg" alt="image" class="home__img">
+          </article>
+          <article class="home__article swiper-slide">
+            <img src="/public/assets/img/tools/logements-meubles.jpg" alt="image" class="home__img">
+          </article>
+        </div>
+      </div>
+    </div>
+  </div>
+</section>
+
+<!--==================== FARMLANDS ====================-->
+<section class="farmland section" id="farmland">
+  <h2 class="section__title">Nos terres agricoles</h2>
+  <div class="farmland__container container">
+    <div class="farmland__swiper swiper">
+      <div class="swiper-wrapper">
+
+        <article class="farmland__card swiper-slide">
+          <img src="/public/assets/img/farmlands/terrain-attecoube.jpg" alt="image" class="farmland__img">
+          <h2 class="farmland__title">Terrain Nord</h2>
+          <div class="farmland__prices">
+            <span class="farmland__discount">180€/hectare</span>
+            <span class="farmland__price">250€/hectare</span>
+          </div>
+          <button class="skinny__border__button" onclick="farmlandAttecoubeByPhone()">
+            <i class="ri-phone-fill"></i>Réserver par téléphone
+          </button>
+          <button class="skinny__button" onclick="farmlandAttecoube()">
+            <i class="ri-shopping-cart-fill"></i>Réserver en ligne
+          </button>
+          <div class="farmland__actions">
+            <button><i class="ri-search-line"></i></button>
+            <button><i class="ri-heart-3-line"></i></button>
+            <button><i class="ri-eye-line"></i></button>
+          </div>
+        </article>
+
+        <article class="farmland__card swiper-slide">
+          <img src="/public/assets/img/farmlands/terrain-treichville.jpeg" alt="image" class="farmland__img">
+          <h2 class="farmland__title">Terrain Sud</h2>
+          <div class="farmland__prices">
+            <span class="farmland__discount">180€/hectare</span>
+            <span class="farmland__price">250€/hectare</span>
+          </div>
+          <button class="skinny__border__button" onclick="farmlandTreichvilleByPhone()">
+            <i class="ri-phone-fill"></i>Réserver par téléphone
+          </button>
+          <button class="skinny__button" onclick="farmlandTreichville()">
+            <i class="ri-shopping-cart-fill"></i>Réserver en ligne
+          </button>
+          <div class="farmland__actions">
+            <button><i class="ri-search-line"></i></button>
+            <button><i class="ri-heart-3-line"></i></button>
+            <button><i class="ri-eye-line"></i></button>
+          </div>
+        </article>
+
+        <article class="farmland__card swiper-slide">
+          <img src="/public/assets/img/farmlands/terrain-marcory.jpg" alt="image" class="farmland__img">
+          <h2 class="farmland__title">Terrain Ouest</h2>
+          <div class="farmland__prices">
+            <span class="farmland__discount">180€/hectare</span>
+            <span class="farmland__price">250€/hectare</span>
+          </div>
+          <button class="skinny__border__button" onclick="farmlandMarcoryByPhone()">
+            <i class="ri-phone-fill"></i>Réserver par téléphone
+          </button>
+          <button class="skinny__button" onclick="farmlandMarcory()">
+            <i class="ri-shopping-cart-fill"></i>Réserver en ligne
+          </button>
+          <div class="farmland__actions">
+            <button><i class="ri-search-line"></i></button>
+            <button><i class="ri-heart-3-line"></i></button>
+            <button><i class="ri-eye-line"></i></button>
+          </div>
+        </article>
+
+        <article class="farmland__card swiper-slide">
+          <img src="/public/assets/img/farmlands/terrain-bracodi.avif" alt="image" class="farmland__img">
+          <h2 class="farmland__title">Terrain Est</h2>
+          <div class="farmland__prices">
+            <span class="farmland__discount">180€/hectare</span>
+            <span class="farmland__price">250€/hectare</span>
+          </div>
+          <button class="skinny__border__button" onclick="farmlandBracodiByPhone()">
+            <i class="ri-phone-fill"></i>Réserver par téléphone
+          </button>
+          <button class="skinny__button" onclick="farmlandBracodi()">
+            <i class="ri-shopping-cart-fill"></i>Réserver en ligne
+          </button>
+          <div class="farmland__actions">
+            <button><i class="ri-search-line"></i></button>
+            <button><i class="ri-heart-3-line"></i></button>
+            <button><i class="ri-eye-line"></i></button>
+          </div>
+        </article>
+
+        <article class="farmland__card swiper-slide">
+          <img src="/public/assets/img/farmlands/terrain-sikasso.jpeg" alt="image" class="farmland__img">
+          <h2 class="farmland__title">Terrain Sud</h2>
+          <div class="farmland__prices">
+            <span class="farmland__discount">180€/hectare</span>
+            <span class="farmland__price">250€/hectare</span>
+          </div>
+          <button class="skinny__border__button" onclick="farmlandSikassoByPhone()">
+            <i class="ri-phone-fill"></i>Réserver par téléphone
+          </button>
+          <button class="skinny__button" onclick="farmlandSikasso()">
+            <i class="ri-shopping-cart-fill"></i>Réserver en ligne
+          </button>
+          <div class="farmland__actions">
+            <button><i class="ri-search-line"></i></button>
+            <button><i class="ri-heart-3-line"></i></button>
+            <button><i class="ri-eye-line"></i></button>
+          </div>
+        </article>
+        
+      </div>
+      <div class="swiper-button-prev">
+        <i class="ri-arrow-left-s-line"></i>
+      </div>
+      <div class="swiper-button-next">
+        <i class="ri-arrow-right-s-line"></i>
+      </div>
+    </div>
+  </div>
+</section>
+
+<!--==================== BUILDING ====================-->
+<section class="building section" id="building">
+  <h2 class="section__title">Matériels de construction</h2>
+  <div class="building__container container">
+    <div class="building__swiper swiper">
+      <div class="swiper-wrapper">
+        <article class="building__card swiper-slide">
+          <img src="/public/assets/img/tools/pelleteuse.avif" alt="image" class="building__img">
+          <h2 class="building__title">Pelleteuse</h2>
+          <div class="building__prices">
+            <span class="building__discount">12.50€/jour</span>
+            <span class="building__price">19.50€/jour</span>
+          </div>
+          <button class="skinny__border__button" onclick="buildingPelleteuseByPhone()">
+            <i class="ri-phone-fill"></i>Réserver par téléphone
+          </button>
+          <button class="skinny__button" onclick="buildingPelleteuse()">
+            <i class="ri-shopping-cart-fill"></i>Réserver en ligne
+          </button>
+          <div class="building__actions">
+            <button><i class="ri-search-line"></i></button>
+            <button><i class="ri-heart-3-line"></i></button>
+            <button><i class="ri-eye-line"></i></button>
+          </div>
+        </article>
+        <article class="building__card swiper-slide">
+          <img src="/public/assets/img/tools/marteau_piqueur.avif" alt="image" class="building__img">
+          <h2 class="building__title">Marteau piqueur</h2>
+          <div class="building__prices">
+            <span class="building__discount">12.50€/jour</span>
+            <span class="building__price">19.50€/jour</span>
+          </div>
+          <button class="skinny__border__button" onclick="buildingMarteauByPhone()">
+            <i class="ri-phone-fill"></i>Réserver par téléphone
+          </button>
+          <button class="skinny__button" onclick="buildingMarteau()">
+            <i class="ri-shopping-cart-fill"></i>Réserver en ligne
+          </button>
+          <div class="building__actions">
+            <button><i class="ri-search-line"></i></button>
+            <button><i class="ri-heart-3-line"></i></button>
+            <button><i class="ri-eye-line"></i></button>
+          </div>
+        </article>
+        <article class="building__card swiper-slide">
+          <img src="/public/assets/img/tools/benne_beton.avif" alt="image" class="building__img">
+          <h2 class="building__title">Benne à béton</h2>
+          <div class="building__prices">
+            <span class="building__discount">12.50€/jour</span>
+            <span class="building__price">19.50€/jour</span>
+          </div>
+          <button class="skinny__border__button" onclick="buildingBenneByPhone()">
+            <i class="ri-phone-fill"></i>Réserver par téléphone
+          </button>
+          <button class="skinny__button" onclick="buildingBenne()">
+            <i class="ri-shopping-cart-fill"></i>Réserver en ligne
+          </button>
+          <div class="building__actions">
+            <button><i class="ri-search-line"></i></button>
+            <button><i class="ri-heart-3-line"></i></button>
+            <button><i class="ri-eye-line"></i></button>
+          </div>
+        </article>
+        <article class="building__card swiper-slide">
+          <img src="/public/assets/img/tools/goulotte_materiaux.avif" alt="image" class="building__img">
+          <h2 class="building__title">Goulotte à matériaux</h2>
+          <div class="building__prices">
+            <span class="building__discount">12.50€/jour</span>
+            <span class="building__price">19.50€/jour</span>
+          </div>
+          <button class="skinny__border__button" onclick="buildingGoulotteByPhone()">
+            <i class="ri-phone-fill"></i>Réserver par téléphone
+          </button>
+          <button class="skinny__button" onclick="buildingGoulotte()">
+            <i class="ri-shopping-cart-fill"></i>Réserver en ligne
+          </button>
+          <div class="building__actions">
+            <button><i class="ri-search-line"></i></button>
+            <button><i class="ri-heart-3-line"></i></button>
+            <button><i class="ri-eye-line"></i></button>
+          </div>
+        </article>
+      </div>
+      <div class="swiper-button-prev">
+        <i class="ri-arrow-left-s-line"></i>
+      </div>
+      <div class="swiper-button-next">
+        <i class="ri-arrow-right-s-line"></i>
+      </div>
+    </div>
+  </div>
+</section>
+
+<!--==================== DISCOUNT ====================-->
+<section class="discount section" id="discount">
+  <div class="discount__container container grid">
+    <div class="discount__data">
+      <h2 class="discount__title section__title">Jusqu'à 50% de réduction</h2>
+      <p class="discount__description">
+        Profitez des jours de réduction que nous avons pour vous,
+        louez vos produits préférés, plus vous louez, plus nous avons
+        de réductions pour vous.
+      </p>
+      <a href="#" class="button" id="discount-login">Louez maintenant</a>
+    </div>
+    <div class="discount__images">
+      <img src="/public/assets/img/tools/benne_beton.avif" alt="image" class="discount__img-1">
+      <img src="/public/assets/img/tools/boulonneuse.avif" alt="image" class="discount__img-2">
+    </div>
+  </div>
+</section>
+
+<!--==================== VEHICLE ====================-->
+<section class="vehicle section" id="vehicle">
+  <h2 class="section__title">Véhicules</h2>
+  <div class="vehicle__container container">
+    <div class="vehicle__swiper swiper">
+      <div class="swiper-wrapper">
+        <a href="#" class="vehicle__card swiper-slide">
+          <img src="/public/assets/img/tools/car-product-1.jpg" alt="image" class="vehicle__img">
+          <div>
+            <h2 class="vehicle__title">Renault megane</h2>
+            <div class="vehicle__prices">
+              <span class="vehicle__discount">78.43€</span>
+              <span class="vehicle__price">56.67€</span>
+            </div>
+            <div class="vehicle__stars">
+              <i class="ri-star-fill"></i>
+              <i class="ri-star-fill"></i>
+              <i class="ri-star-fill"></i>
+              <i class="ri-star-fill"></i>
+              <i class="ri-star-half-fill"></i>
+            </div>
+          </div>
+        </a>
+        <a href="#" class="vehicle__card swiper-slide">
+          <img src="/public/assets/img/tools/car-product-2.jpeg" alt="image" class="vehicle__img">
+          <div>
+            <h2 class="vehicle__title">Mazda</h2>
+            <div class="vehicle__prices">
+              <span class="vehicle__discount">78.43€</span>
+              <span class="vehicle__price">56.67€</span>
+            </div>
+            <div class="vehicle__stars">
+              <i class="ri-star-fill"></i>
+              <i class="ri-star-fill"></i>
+              <i class="ri-star-fill"></i>
+              <i class="ri-star-fill"></i>
+              <i class="ri-star-half-fill"></i>
+            </div>
+          </div>
+        </a>
+        <a href="#" class="vehicle__card swiper-slide">
+          <img src="/public/assets/img/tools/car-product-3.avif" alt="image" class="vehicle__img">
+          <div>
+            <h2 class="vehicle__title">Audi</h2>
+            <div class="vehicle__prices">
+              <span class="vehicle__discount">78.43€</span>
+              <span class="vehicle__price">56.67€</span>
+            </div>
+            <div class="vehicle__stars">
+              <i class="ri-star-fill"></i>
+              <i class="ri-star-fill"></i>
+              <i class="ri-star-fill"></i>
+              <i class="ri-star-fill"></i>
+              <i class="ri-star-half-fill"></i>
+            </div>
+          </div>
+        </a>
+        <a href="#" class="vehicle__card swiper-slide">
+          <img src="/public/assets/img/tools/car-product-1.jpg" alt="image" class="vehicle__img">
+          <div>
+            <h2 class="vehicle__title">Renault megane</h2>
+            <div class="vehicle__prices">
+              <span class="vehicle__discount">78.43€</span>
+              <span class="vehicle__price">56.67€</span>
+            </div>
+            <div class="vehicle__stars">
+              <i class="ri-star-fill"></i>
+              <i class="ri-star-fill"></i>
+              <i class="ri-star-fill"></i>
+              <i class="ri-star-fill"></i>
+              <i class="ri-star-half-fill"></i>
+            </div>
+          </div>
+        </a>
+        <a href="#" class="vehicle__card swiper-slide">
+          <img src="/public/assets/img/tools/car-product-2.jpeg" alt="image" class="vehicle__img">
+          <div>
+            <h2 class="vehicle__title">Mazda</h2>
+            <div class="vehicle__prices">
+              <span class="vehicle__discount">78.43€</span>
+              <span class="vehicle__price">56.67€</span>
+            </div>
+            <div class="vehicle__stars">
+              <i class="ri-star-fill"></i>
+              <i class="ri-star-fill"></i>
+              <i class="ri-star-fill"></i>
+              <i class="ri-star-fill"></i>
+              <i class="ri-star-half-fill"></i>
+            </div>
+          </div>
+        </a>
+        <a href="#" class="vehicle__card swiper-slide">
+          <img src="/public/assets/img/tools/car-product-3.avif" alt="image" class="vehicle__img">
+          <div>
+            <h2 class="vehicle__title">Audi</h2>
+            <div class="vehicle__prices">
+              <span class="vehicle__discount">78.43€</span>
+              <span class="vehicle__price">56.67€</span>
+            </div>
+            <div class="vehicle__stars">
+              <i class="ri-star-fill"></i>
+              <i class="ri-star-fill"></i>
+              <i class="ri-star-fill"></i>
+              <i class="ri-star-fill"></i>
+              <i class="ri-star-half-fill"></i>
+            </div>
+          </div>
+        </a>
+        <a href="#" class="vehicle__card swiper-slide">
+          <img src="/public/assets/img/tools/car-product-1.jpg" alt="image" class="vehicle__img">
+          <div>
+            <h2 class="vehicle__title">Renault megane</h2>
+            <div class="vehicle__prices">
+              <span class="vehicle__discount">78.43€</span>
+              <span class="vehicle__price">56.67€</span>
+            </div>
+            <div class="vehicle__stars">
+              <i class="ri-star-fill"></i>
+              <i class="ri-star-fill"></i>
+              <i class="ri-star-fill"></i>
+              <i class="ri-star-fill"></i>
+              <i class="ri-star-half-fill"></i>
+            </div>
+          </div>
+        </a>
+        <a href="#" class="vehicle__card swiper-slide">
+          <img src="/public/assets/img/tools/car-product-2.jpeg" alt="image" class="vehicle__img">
+          <div>
+            <h2 class="vehicle__title">Mazda</h2>
+            <div class="vehicle__prices">
+              <span class="vehicle__discount">78.43€</span>
+              <span class="vehicle__price">56.67€</span>
+            </div>
+            <div class="vehicle__stars">
+              <i class="ri-star-fill"></i>
+              <i class="ri-star-fill"></i>
+              <i class="ri-star-fill"></i>
+              <i class="ri-star-fill"></i>
+              <i class="ri-star-half-fill"></i>
+            </div>
+          </div>
+        </a>
+        <a href="#" class="vehicle__card swiper-slide">
+          <img src="/public/assets/img/tools/car-product-3.avif" alt="image" class="vehicle__img">
+          <div>
+            <h2 class="vehicle__title">Audi</h2>
+            <div class="vehicle__prices">
+              <span class="vehicle__discount">78.43€</span>
+              <span class="vehicle__price">56.67€</span>
+            </div>
+            <div class="vehicle__stars">
+              <i class="ri-star-fill"></i>
+              <i class="ri-star-fill"></i>
+              <i class="ri-star-fill"></i>
+              <i class="ri-star-fill"></i>
+              <i class="ri-star-half-fill"></i>
+            </div>
+          </div>
+        </a>
+        <a href="#" class="vehicle__card swiper-slide">
+          <img src="/public/assets/img/tools/car-product-1.jpg" alt="image" class="vehicle__img">
+          <div>
+            <h2 class="vehicle__title">Renault megane</h2>
+            <div class="vehicle__prices">
+              <span class="vehicle__discount">78.43€</span>
+              <span class="vehicle__price">56.67€</span>
+            </div>
+            <div class="vehicle__stars">
+              <i class="ri-star-fill"></i>
+              <i class="ri-star-fill"></i>
+              <i class="ri-star-fill"></i>
+              <i class="ri-star-fill"></i>
+              <i class="ri-star-half-fill"></i>
+            </div>
+          </div>
+        </a>
+      </div>
+    </div>
+    <div class="vehicle__swiper swiper">
+      <div class="swiper-wrapper">
+        <a href="#" class="vehicle__card swiper-slide">
+          <img src="/public/assets/img/tools/car-product-2.jpeg" alt="image" class="vehicle__img">
+          <div>
+            <h2 class="vehicle__title">Mazda</h2>
+            <div class="vehicle__prices">
+              <span class="vehicle__discount">78.43€</span>
+              <span class="vehicle__price">56.67€</span>
+            </div>
+            <div class="vehicle__stars">
+              <i class="ri-star-fill"></i>
+              <i class="ri-star-fill"></i>
+              <i class="ri-star-fill"></i>
+              <i class="ri-star-fill"></i>
+              <i class="ri-star-half-fill"></i>
+            </div>
+          </div>
+        </a>
+        <a href="#" class="vehicle__card swiper-slide">
+          <img src="/public/assets/img/tools/car-product-3.avif" alt="image" class="vehicle__img">
+          <div>
+            <h2 class="vehicle__title">Audi</h2>
+            <div class="vehicle__prices">
+              <span class="vehicle__discount">78.43€</span>
+              <span class="vehicle__price">56.67€</span>
+            </div>
+            <div class="vehicle__stars">
+              <i class="ri-star-fill"></i>
+              <i class="ri-star-fill"></i>
+              <i class="ri-star-fill"></i>
+              <i class="ri-star-fill"></i>
+              <i class="ri-star-half-fill"></i>
+            </div>
+          </div>
+        </a>
+        <a href="#" class="vehicle__card swiper-slide">
+          <img src="/public/assets/img/tools/car-product-1.jpg" alt="image" class="vehicle__img">
+          <div>
+            <h2 class="vehicle__title">Renault megane</h2>
+            <div class="vehicle__prices">
+              <span class="vehicle__discount">78.43€</span>
+              <span class="vehicle__price">56.67€</span>
+            </div>
+            <div class="vehicle__stars">
+              <i class="ri-star-fill"></i>
+              <i class="ri-star-fill"></i>
+              <i class="ri-star-fill"></i>
+              <i class="ri-star-fill"></i>
+              <i class="ri-star-half-fill"></i>
+            </div>
+          </div>
+        </a>
+        <a href="#" class="vehicle__card swiper-slide">
+          <img src="/public/assets/img/tools/car-product-2.jpeg" alt="image" class="vehicle__img">
+          <div>
+            <h2 class="vehicle__title">Mazda</h2>
+            <div class="vehicle__prices">
+              <span class="vehicle__discount">78.43€</span>
+              <span class="vehicle__price">56.67€</span>
+            </div>
+            <div class="vehicle__stars">
+              <i class="ri-star-fill"></i>
+              <i class="ri-star-fill"></i>
+              <i class="ri-star-fill"></i>
+              <i class="ri-star-fill"></i>
+              <i class="ri-star-half-fill"></i>
+            </div>
+          </div>
+        </a>
+        <a href="#" class="vehicle__card swiper-slide">
+          <img src="/public/assets/img/tools/car-product-3.avif" alt="image" class="vehicle__img">
+          <div>
+            <h2 class="vehicle__title">Audi</h2>
+            <div class="vehicle__prices">
+              <span class="vehicle__discount">78.43€</span>
+              <span class="vehicle__price">56.67€</span>
+            </div>
+            <div class="vehicle__stars">
+              <i class="ri-star-fill"></i>
+              <i class="ri-star-fill"></i>
+              <i class="ri-star-fill"></i>
+              <i class="ri-star-fill"></i>
+              <i class="ri-star-half-fill"></i>
+            </div>
+          </div>
+        </a>
+        <a href="#" class="vehicle__card swiper-slide">
+          <img src="/public/assets/img/tools/car-product-1.jpg" alt="image" class="vehicle__img">
+          <div>
+            <h2 class="vehicle__title">Renault megane</h2>
+            <div class="vehicle__prices">
+              <span class="vehicle__discount">78.43€</span>
+              <span class="vehicle__price">56.67€</span>
+            </div>
+            <div class="vehicle__stars">
+              <i class="ri-star-fill"></i>
+              <i class="ri-star-fill"></i>
+              <i class="ri-star-fill"></i>
+              <i class="ri-star-fill"></i>
+              <i class="ri-star-half-fill"></i>
+            </div>
+          </div>
+        </a>
+        <a href="#" class="vehicle__card swiper-slide">
+          <img src="/public/assets/img/tools/car-product-2.jpeg" alt="image" class="vehicle__img">
+          <div>
+            <h2 class="vehicle__title">Mazda</h2>
+            <div class="vehicle__prices">
+              <span class="vehicle__discount">78.43€</span>
+              <span class="vehicle__price">56.67€</span>
+            </div>
+            <div class="vehicle__stars">
+              <i class="ri-star-fill"></i>
+              <i class="ri-star-fill"></i>
+              <i class="ri-star-fill"></i>
+              <i class="ri-star-fill"></i>
+              <i class="ri-star-half-fill"></i>
+            </div>
+          </div>
+        </a>
+        <a href="#" class="vehicle__card swiper-slide">
+          <img src="/public/assets/img/tools/car-product-3.avif" alt="image" class="vehicle__img">
+          <div>
+            <h2 class="vehicle__title">Audi</h2>
+            <div class="vehicle__prices">
+              <span class="vehicle__discount">78.43€</span>
+              <span class="vehicle__price">56.67€</span>
+            </div>
+            <div class="vehicle__stars">
+              <i class="ri-star-fill"></i>
+              <i class="ri-star-fill"></i>
+              <i class="ri-star-fill"></i>
+              <i class="ri-star-fill"></i>
+              <i class="ri-star-half-fill"></i>
+            </div>
+          </div>
+        </a>
+        <a href="#" class="vehicle__card swiper-slide">
+          <img src="/public/assets/img/tools/car-product-1.jpg" alt="image" class="vehicle__img">
+          <div>
+            <h2 class="vehicle__title">Renault megane</h2>
+            <div class="vehicle__prices">
+              <span class="vehicle__discount">78.43€</span>
+              <span class="vehicle__price">56.67€</span>
+            </div>
+            <div class="vehicle__stars">
+              <i class="ri-star-fill"></i>
+              <i class="ri-star-fill"></i>
+              <i class="ri-star-fill"></i>
+              <i class="ri-star-fill"></i>
+              <i class="ri-star-half-fill"></i>
+            </div>
+          </div>
+        </a>
+        <a href="#" class="vehicle__card swiper-slide">
+          <img src="/public/assets/img/tools/car-product-2.jpeg" alt="image" class="vehicle__img">
+          <div>
+            <h2 class="vehicle__title">Mazda</h2>
+            <div class="vehicle__prices">
+              <span class="vehicle__discount">78.43€</span>
+              <span class="vehicle__price">56.67€</span>
+            </div>
+            <div class="vehicle__stars">
+              <i class="ri-star-fill"></i>
+              <i class="ri-star-fill"></i>
+              <i class="ri-star-fill"></i>
+              <i class="ri-star-fill"></i>
+              <i class="ri-star-half-fill"></i>
+            </div>
+          </div>
+        </a>
+      </div>
+    </div>
+  </div>
+</section>
+
+<!--==================== JOIN ====================-->
+<section class="join section">
+  <div class="join__container">
+    <img src="/public/assets/img/tools/join-bg.avif" alt="image" class="join__bg">
+    <div class="join__data container grid">
+      <h2 class="join__title section__title">
+        Abonnez-vous pour recevoir <br>
+        les dernières mises à jour
+      </h2>
+      <form action="" class="join__form">
+        <input type="email" placeholder="Entrez votre email" class="join__input">
+        <button type="submit" class="join__button button">Abonnez-vous</button>
+      </form>
+    </div>
+  </div>
+</section>
+
+<!--==================== TESTIMONIAL ====================-->
+<section class="testimonial section" id="testimonial">
+  <h2 class="section__title">Opinions des clients</h2>
+  <div class="testimonial__container container">
+    <div class="testimonial__swiper swiper">
+      <div class="swiper-wrapper">
+        <article class="testimonial__card swiper-slide">
+          <i class="ri-user-fill"></i>
+          <h2 class="testimonial__title">Alain Doumbia</h2>
+          <p class="testimonial__description">
+            La meilleure plateforme pour louer des produits, 
+            la location est très facile à faire et offre de grandes réductions.
+          </p>
+          <div class="testimonial__stars">
+            <i class="ri-star-fill"></i>
+            <i class="ri-star-fill"></i>
+            <i class="ri-star-fill"></i>
+            <i class="ri-star-fill"></i>
+            <i class="ri-star-half-fill"></i>
+          </div>
+        </article>
+        <article class="testimonial__card swiper-slide">
+          <i class="ri-user-fill"></i>
+          <h2 class="testimonial__title">Quentin Loz</h2>
+          <p class="testimonial__description">
+            La meilleure plateforme pour louer des produits, 
+            la location est très facile à faire et offre de grandes réductions.
+          </p>
+          <div class="testimonial__stars">
+            <i class="ri-star-fill"></i>
+            <i class="ri-star-fill"></i>
+            <i class="ri-star-fill"></i>
+            <i class="ri-star-fill"></i>
+            <i class="ri-star-half-fill"></i>
+          </div>
+        </article>
+        <article class="testimonial__card swiper-slide">
+          <i class="ri-user-fill"></i>
+          <h2 class="testimonial__title">Karim Sissoko</h2>
+          <p class="testimonial__description">
+            La meilleure plateforme pour louer des produits, 
+            la location est très facile à faire et offre de grandes réductions.
+          </p>
+          <div class="testimonial__stars">
+            <i class="ri-star-fill"></i>
+            <i class="ri-star-fill"></i>
+            <i class="ri-star-fill"></i>
+            <i class="ri-star-fill"></i>
+            <i class="ri-star-half-fill"></i>
+          </div>              
+        </article>
+        <article class="testimonial__card swiper-slide">
+          <i class="ri-user-fill"></i>
+          <h2 class="testimonial__title">Abou Traoré</h2>
+          <p class="testimonial__description">
+            La meilleure plateforme pour louer des produits, 
+            la location est très facile à faire et offre de grandes réductions.
+          </p>
+          <div class="testimonial__stars">
+            <i class="ri-star-fill"></i>
+            <i class="ri-star-fill"></i>
+            <i class="ri-star-fill"></i>
+            <i class="ri-star-fill"></i>
+            <i class="ri-star-half-fill"></i>
+          </div>              
+        </article>
+      </div>
+    </div>
+  </div>
+</section>
+{{end}}

public/templates/agency/inscription.html

@@ -0,0 +1,29 @@
+{{define "inscription"}}
+<!--==================== INSCRIPTION ANNONCE ====================-->
+<section class="inscription section" id="inscription">
+    <h2 class="section__title">Quel compte souhaitez-vous créer ?</h2>
+    <div class="inscription__container container">
+        <div class="inscription__swiper">
+            <div class="inscription__wrapper">
+                <article class="inscription__card">
+                    <i class="ri-user-2-fill"></i>
+                    <h2 class="inscription__title">
+                        PROFESSIONNEL<i class="ri-arrow-right-line"></i>
+                    </h2>
+                    <p>Idéal pour les sociétés, associations</p>
+                    <p>Ou auto-entreprenneurs</p>
+                </article>
+
+                <article class="inscription__card">
+                    <i class="ri-user-fill"></i>
+                    <h2 class="inscription__title">
+                        PARTICULIER<i class="ri-arrow-right-line"></i>
+                    </h2>
+                    <p>Inscription simplifiée</p>
+                    <p>Louez vos outils sans forme juridique</p>
+                </article>
+            </div>
+        </div>
+    </div>
+</section>
+{{ end }}

public/templates/agency/songon.html

@@ -0,0 +1,210 @@
+{{define "songon"}}
+<!--==================== SONGON ====================-->
+<section class="songon section" id="songon">
+  <div class="songon__container container grid">
+    <div class="songon__data">
+      <h2 class="songon__title section__title">Songon</h2>
+      <p class="songon__description">
+        Une commune et une sous-préfecture située dans le district 
+        autonome d'Abidjan. Elle fait partie des communes de la région côtière 
+        et longe la lagune Ebrié à l'ouest.
+      </p>
+      <a href="#" class="button" onclick="songonPhone()">Contactez-nous</a>
+    </div>
+    <div class="songon__images">
+      <img src="/public/assets/img/worldmap.png" alt="image" class="songon__img-1">
+      <div class="pin sp">
+        <span>Songon</span>
+      </div>
+    </div>
+  </div>
+
+</section>
+
+<!--==================== EVENT ROOMS ====================-->
+<section class="eventrooms section" id="eventrooms">
+  <h2 class="section__title">Salles évenementielles</h2>
+  <div class="eventrooms__container container">
+    <div class="eventrooms__swiper swiper">
+      <div class="swiper-wrapper">
+        <article class="eventrooms__card swiper-slide">
+          <img src="/public/assets/img/salle-evenementielle-1.jpg" alt="image" class="eventrooms__img">
+          <h2 class="eventrooms__title">Salle A</h2>
+          <div class="eventrooms__prices">
+            <span class="eventrooms__discount">12.50€/jour</span>
+            <span class="eventrooms__price">19.50€/jour</span>
+          </div>
+          <button class="skinny__border__button" onclick="eventroomSalleAPhone()">
+            <i class="ri-phone-fill"></i>Réserver par téléphone
+          </button>
+          <button class="skinny__button" onclick="eventroomSalleA()">
+            <i class="ri-shopping-cart-fill"></i>Réserver en ligne
+          </button>
+          <div class="eventrooms__actions">
+            <button><i class="ri-search-line"></i></button>
+            <button><i class="ri-heart-3-line"></i></button>
+            <button><i class="ri-eye-line"></i></button>
+          </div>
+        </article>
+        <article class="eventrooms__card swiper-slide">
+          <img src="/public/assets/img/salle-evenementielle-2.jpg" alt="image" class="eventrooms__img">
+          <h2 class="eventrooms__title">Salle B</h2>
+          <div class="eventrooms__prices">
+            <span class="eventrooms__discount">12.50€/jour</span>
+            <span class="eventrooms__price">19.50€/jour</span>
+          </div>
+          <button class="skinny__border__button" onclick="eventroomSalleBPhone()">
+            <i class="ri-phone-fill"></i>Réserver par téléphone
+          </button>
+          <button class="skinny__button" onclick="eventroomSalleB()">
+            <i class="ri-shopping-cart-fill"></i>Réserver en ligne
+          </button>
+          <div class="eventrooms__actions">
+            <button><i class="ri-search-line"></i></button>
+            <button><i class="ri-heart-3-line"></i></button>
+            <button><i class="ri-eye-line"></i></button>
+          </div>
+        </article>
+        <article class="eventrooms__card swiper-slide">
+          <img src="/public/assets/img/salle-evenementielle-3.jpg" alt="image" class="eventrooms__img">
+          <h2 class="eventrooms__title">Salle C</h2>
+          <div class="eventrooms__prices">
+            <span class="eventrooms__discount">12.50€/jour</span>
+            <span class="eventrooms__price">19.50€/jour</span>
+          </div>
+          <button class="skinny__border__button" onclick="eventroomSalleCPhone()">
+            <i class="ri-phone-fill"></i>Réserver par téléphone
+          </button>
+          <button class="skinny__button" onclick="eventroomSalleC()">
+            <i class="ri-shopping-cart-fill"></i>Réserver en ligne
+          </button>
+          <div class="eventrooms__actions">
+            <button><i class="ri-search-line"></i></button>
+            <button><i class="ri-heart-3-line"></i></button>
+            <button><i class="ri-eye-line"></i></button>
+          </div>
+        </article>
+        <article class="eventrooms__card swiper-slide">
+          <img src="/public/assets/img/salle-evenementielle-4.jpg" alt="image" class="eventrooms__img">
+          <h2 class="eventrooms__title">Salle D</h2>
+          <div class="eventrooms__prices">
+            <span class="eventrooms__discount">12.50€/jour</span>
+            <span class="eventrooms__price">19.50€/jour</span>
+          </div>
+          <button class="skinny__border__button" onclick="eventroomSalleDPhone()">
+            <i class="ri-phone-fill"></i>Réserver par téléphone
+          </button>
+          <button class="skinny__button" onclick="eventroomSalleD()">
+            <i class="ri-shopping-cart-fill"></i>Réserver en ligne
+          </button>
+          <div class="eventrooms__actions">
+            <button><i class="ri-search-line"></i></button>
+            <button><i class="ri-heart-3-line"></i></button>
+            <button><i class="ri-eye-line"></i></button>
+          </div>
+        </article>
+      </div>
+      <div class="swiper-button-prev">
+        <i class="ri-arrow-left-s-line"></i>
+      </div>
+      <div class="swiper-button-next">
+        <i class="ri-arrow-right-s-line"></i>
+      </div>
+    </div>
+  </div>
+</section>
+
+<!--==================== TARPAULIN ====================-->
+<section class="tarpaulin section" id="tarpaulin">
+  <h2 class="section__title">Bâches structure événement</h2>
+  <div class="tarpaulin__container container">
+    <div class="tarpaulin__swiper swiper">
+      <div class="swiper-wrapper">
+        <article class="tarpaulin__card swiper-slide">
+          <img src="/public/assets/img/bache-structure-evenement-1.png" alt="image" class="tarpaulin__img">
+          <h2 class="tarpaulin__title">Bâche structure A</h2>
+          <div class="tarpaulin__prices">
+            <span class="tarpaulin__discount">11.50€/jour</span>
+            <span class="tarpaulin__price">19.30€/jour</span>
+          </div>
+          <button class="skinny__border__button" onclick="tarpaulinBacheAPhone()">
+            <i class="ri-phone-fill"></i>Réserver par téléphone
+          </button>
+          <button class="skinny__button" onclick="tarpaulinBacheA()">
+            <i class="ri-shopping-cart-fill"></i>Réserver en ligne
+          </button>
+          <div class="tarpaulin__actions">
+            <button><i class="ri-search-line"></i></button>
+            <button><i class="ri-heart-3-line"></i></button>
+            <button><i class="ri-eye-line"></i></button>
+          </div>
+        </article>
+        <article class="tarpaulin__card swiper-slide">
+          <img src="/public/assets/img/bache-structure-evenement-1.png" alt="image" class="tarpaulin__img">
+          <h2 class="tarpaulin__title">Bâche structure B</h2>
+          <div class="tarpaulin__prices">
+            <span class="tarpaulin__discount">12.10€/jour</span>
+            <span class="tarpaulin__price">19.20€/jour</span>
+          </div>
+          <button class="skinny__border__button" onclick="tarpaulinBacheBPhone()">
+            <i class="ri-phone-fill"></i>Réserver par téléphone
+          </button>
+          <button class="skinny__button" onclick="tarpaulinBacheB()">
+            <i class="ri-shopping-cart-fill"></i>Réserver en ligne
+          </button>
+          <div class="tarpaulin__actions">
+            <button><i class="ri-search-line"></i></button>
+            <button><i class="ri-heart-3-line"></i></button>
+            <button><i class="ri-eye-line"></i></button>
+          </div>
+        </article>
+        <article class="tarpaulin__card swiper-slide">
+          <img src="/public/assets/img/bache-structure-evenement-1.png" alt="image" class="tarpaulin__img">
+          <h2 class="tarpaulin__title">Bâche structure C</h2>
+          <div class="tarpaulin__prices">
+            <span class="tarpaulin__discount">12.50€/jour</span>
+            <span class="tarpaulin__price">19.50€/jour</span>
+          </div>
+          <button class="skinny__border__button" onclick="tarpaulinBacheCPhone()">
+            <i class="ri-phone-fill"></i>Réserver par téléphone
+          </button>
+          <button class="skinny__button" onclick="tarpaulinBacheC()">
+            <i class="ri-shopping-cart-fill"></i>Réserver en ligne
+          </button>
+          <div class="tarpaulin__actions">
+            <button><i class="ri-search-line"></i></button>
+            <button><i class="ri-heart-3-line"></i></button>
+            <button><i class="ri-eye-line"></i></button>
+          </div>
+        </article>
+        <article class="tarpaulin__card swiper-slide">
+          <img src="/public/assets/img/bache-structure-evenement-1.png" alt="image" class="tarpaulin__img">
+          <h2 class="tarpaulin__title">Bâche structure D</h2>
+          <div class="tarpaulin__prices">
+            <span class="tarpaulin__discount">12.50€/jour</span>
+            <span class="tarpaulin__price">19.50€/jour</span>
+          </div>
+          <button class="skinny__border__button" onclick="tarpaulinBacheDPhone()">
+            <i class="ri-phone-fill"></i>Réserver par téléphone
+          </button>
+          <button class="skinny__button" onclick="tarpaulinBacheD()">
+            <i class="ri-shopping-cart-fill"></i>Réserver en ligne
+          </button>
+          <div class="tarpaulin__actions">
+            <button><i class="ri-search-line"></i></button>
+            <button><i class="ri-heart-3-line"></i></button>
+            <button><i class="ri-eye-line"></i></button>
+          </div>
+        </article>
+        
+      </div>
+      <div class="swiper-button-prev">
+        <i class="ri-arrow-left-s-line"></i>
+      </div>
+      <div class="swiper-button-next">
+        <i class="ri-arrow-right-s-line"></i>
+      </div>
+    </div>
+  </div>
+</section>
+{{end}}

public/templates/index.html

@@ -0,0 +1,538 @@
+{{define "index"}}
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+
+    <!--=============== FAVICON ===============-->
+    <link rel="shortcut icon" href="/public/assets/img/toutaloue-logo.jpg" type="image/x-icon" />
+
+    <!--=============== REMIXICONS ===============-->
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/remixicon/4.5.0/remixicon.css"
+    />
+
+    <title>{{.Title}} - Toutaloue</title>
+
+    <!--=============== SWIPER CSS ===============-->
+    <link rel="stylesheet" href="/public/assets/css/swiper-bundle.min.css" />
+
+    <!--=============== CSS ===============-->
+    <link rel="stylesheet" href="/public/assets/css/style.css" />
+
+    <!--=============== HTMX ===============-->
+    <script src="https://unpkg.com/htmx.org@2.0.8"></script>
+
+    <title>Toutaloue | {{.Title}}</title>
+  </head>
+
+  <body>
+    <!--==================== HEADER ====================-->
+    <header class="header">
+      <nav class="nav container">
+        <!--<a href="/" class="nav__logo">Toutaloué</a>-->
+        <a href="/" class="nav__logo"><img src="/public/assets/img/toutaloue-logo.jpg" alt="logo"></a>
+
+        <div class="nav__menu" id="nav-menu">
+          <ul class="nav__list">
+            <li class="dropdownagency__item">
+              <div class="dropdown__button">
+                Nos agences
+                <img
+                  src="/public/assets/img/arrow-dropdown.png"
+                  alt="image"
+                  class="dropdown__arrow"
+                />
+              </div>
+              <div class="dropdownagency__container">
+                <div class="dropdownagency__content">
+                  <div class="dropdown__group">
+                    <span class="dropdown__title">Zones géographiques</span>
+                    <ul class="dropdown__list">
+                      <li>
+                        <a
+                          hx-get="/songon"
+                          hx-target="#view"
+                          hx-push-url="true"
+                          class="dropdown__link"
+                          onclick="zoneSongon()"
+                          >Songon</a
+                        >
+                      </li>
+                      <li>
+                        <a href="#" class="dropdown__link">Yopougon</a>
+                      </li>
+                      <li>
+                        <a href="#" class="dropdown__link">Dabou</a>
+                      </li>
+                    </ul>
+                  </div>
+                </div>
+              </div>
+            </li>
+
+            <li class="dropdown__item">
+              <div class="dropdown__button">
+                Nos produits
+                <img
+                  src="/public/assets/img/arrow-dropdown.png"
+                  alt="image"
+                  class="dropdown__arrow"
+                />
+              </div>
+              <div class="dropdown__container">
+                <div class="dropdown__content">
+
+                  <div class="dropdown__group">
+                    <div class="dropdown__icon">
+                      <img
+                        src="/public/assets/img/tools/terres-agricoles.jpg"
+                        alt="image"
+                      />
+                    </div>
+                    <span class="dropdown__title"
+                      >Terres agricoles</span
+                    >
+                    <ul class="dropdown__list">
+                      <li>
+                        <a href="#" class="dropdown__link">Terrain Nord</a>
+                      </li>
+                      <li>
+                        <a href="#" class="dropdown__link">Terrain Sud</a>
+                      </li>
+                      <li>
+                        <a href="#" class="dropdown__link">Terrain Ouest</a>
+                      </li>
+                      <li>
+                        <a href="#" class="dropdown__link"
+                          >Terrain Est</a
+                        >
+                      </li>
+                    </ul>
+                  </div>
+                  
+                  <div class="dropdown__group">
+                    <div class="dropdown__icon">
+                      <img
+                        src="/public/assets/img/tools/mat-construction.jpg"
+                        alt="image"
+                      />
+                    </div>
+                    <span class="dropdown__title"
+                      >Matériels de construction</span
+                    >
+                    <ul class="dropdown__list">
+                      <li>
+                        <a href="#" class="dropdown__link">Pelleteuses</a>
+                      </li>
+                      <li>
+                        <a href="#" class="dropdown__link">Marteaux-piqueurs</a>
+                      </li>
+                      <li>
+                        <a href="#" class="dropdown__link">Bennes à béton</a>
+                      </li>
+                      <li>
+                        <a href="#" class="dropdown__link"
+                          >Goulottes à matériaux</a
+                        >
+                      </li>
+                      <li>
+                        <a href="#" class="dropdown__link">Bétonnières</a>
+                      </li>
+                      <li>
+                        <a href="#" class="dropdown__link">Burineurs</a>
+                      </li>
+                      <li>
+                        <a href="#" class="dropdown__link">Débroussailleuses</a>
+                      </li>
+                      <li>
+                        <a href="#" class="dropdown__link">Échafaudage</a>
+                      </li>
+                      <li>
+                        <a href="#" class="dropdown__link">Échelle</a>
+                      </li>
+                    </ul>
+                  </div>
+
+                  <div class="dropdown__group">
+                    <div class="dropdown__icon">
+                      <img
+                        src="/public/assets/img/tools/electromenagers.avif"
+                        alt="image"
+                      />
+                    </div>
+                    <span class="dropdown__title">Électroménagers</span>
+                    <ul class="dropdown__list">
+                      <li>
+                        <a href="#" class="dropdown__link"
+                          >Robots aspirateurs laveur</a
+                        >
+                      </li>
+                      <li>
+                        <a href="#" class="dropdown__link"
+                          >Télévisions 4K UHD</a
+                        >
+                      </li>
+                      <li>
+                        <a href="#" class="dropdown__link"
+                          >Réfrigérateurs multi portes</a
+                        >
+                      </li>
+                      <li>
+                        <a href="#" class="dropdown__link"
+                          >Laves linges séchant</a
+                        >
+                      </li>
+                      <li>
+                        <a href="#" class="dropdown__link">Sèches linges</a>
+                      </li>
+                      <li>
+                        <a href="#" class="dropdown__link"
+                          >Fours encastrables</a
+                        >
+                      </li>
+                      <li>
+                        <a href="#" class="dropdown__link"
+                          >Expressos Broyeurs</a
+                        >
+                      </li>
+                      <li>
+                        <a href="#" class="dropdown__link">Robots pâtissiers</a>
+                      </li>
+                      <li>
+                        <a href="#" class="dropdown__link"
+                          >Cuisinières à cuisson</a
+                        >
+                      </li>
+                    </ul>
+                  </div>
+
+                  <div class="dropdown__group">
+                    <div class="dropdown__icon">
+                      <img
+                        src="/public/assets/img/tools/vehicules.jpg"
+                        alt="image"
+                      />
+                    </div>
+                    <span class="dropdown__title">Véhicules</span>
+                    <ul class="dropdown__list">
+                      <li>
+                        <a href="#" class="dropdown__link"
+                          >Voitures électriques</a
+                        >
+                      </li>
+                      <li>
+                        <a href="#" class="dropdown__link">Utilitaires</a>
+                      </li>
+                      <li>
+                        <a href="#" class="dropdown__link">Camions bennes</a>
+                      </li>
+                      <li>
+                        <a href="#" class="dropdown__link">Motos</a>
+                      </li>
+                      <li>
+                        <a href="#" class="dropdown__link"
+                          >Chariots élévateurs</a
+                        >
+                      </li>
+                      <li>
+                        <a href="#" class="dropdown__link">Camions</a>
+                      </li>
+                      <li>
+                        <a href="#" class="dropdown__link">Bateaux moteurs</a>
+                      </li>
+                    </ul>
+                  </div>
+
+                  <div class="dropdown__group">
+                    <div class="dropdown__icon">
+                      <img
+                        src="/public/assets/img/tools/salles-evenementielles.jpg"
+                        alt="image"
+                      />
+                    </div>
+                    <span class="dropdown__title">Salles événementielles</span>
+                    <ul class="dropdown__list">
+                      <li>
+                        <a href="#" class="dropdown__link"
+                          >Vêtements d'événementiel</a
+                        >
+                      </li>
+                      <li>
+                        <a href="#" class="dropdown__link">Barres son</a>
+                      </li>
+                      <li>
+                        <a href="#" class="dropdown__link">Chaises</a>
+                      </li>
+                      <li>
+                        <a href="#" class="dropdown__link">Vaisselles</a>
+                      </li>
+                      <li>
+                        <a href="#" class="dropdown__link">Lots de lumières</a>
+                      </li>
+                      <li>
+                        <a href="#" class="dropdown__link"
+                          >Tables personnalisées</a
+                        >
+                      </li>
+                      <li>
+                        <a href="#" class="dropdown__link">Bâches sur mesure</a>
+                      </li>
+                      <li>
+                        <a href="#" class="dropdown__link"
+                          >Groupes électrogènes</a
+                        >
+                      </li>
+                      <li>
+                        <a href="#" class="dropdown__link">Lieux privatisés</a>
+                      </li>
+                    </ul>
+                  </div>
+
+                  <div class="dropdown__group">
+                    <div class="dropdown__icon">
+                      <img
+                        src="/public/assets/img/tools/logements-meubles.jpg"
+                        alt="image"
+                      />
+                    </div>
+                    <span class="dropdown__title"
+                      >Logements meublés</span
+                    >
+                    <ul class="dropdown__list">
+                      <li>
+                        <a href="#" class="dropdown__link">Appartement 3 pièces</a>
+                      </li>
+                      <li>
+                        <a href="#" class="dropdown__link">Appartement 2 pièces</a>
+                      </li>
+                      <li>
+                        <a href="#" class="dropdown__link">Studio</a>
+                      </li>
+                      <li>
+                        <a href="#" class="dropdown__link"
+                          >Appartement 4 pièces</a
+                        >
+                      </li>
+                      <li>
+                        <a href="#" class="dropdown__link">Appartement 5 pièces</a>
+                      </li>
+                      <li>
+                        <a href="#" class="dropdown__link">Appartement duplex 3 pièces</a>
+                      </li>
+                      <li>
+                        <a href="#" class="dropdown__link">Appartement duplex 4 pièces</a>
+                      </li>
+                    </ul>
+                  </div>
+                </div>
+              </div>
+            </li>
+
+            <li>
+              <a 
+                hx-get="/deposer-annonce" 
+                hx-target="#view" 
+                hx-push-url="true" 
+                class="nav__link slim-button" 
+                onclick="deposerAnnonce()">
+                Déposer une annonce
+              </a>
+            </li>
+          </ul>
+
+          <!-- Close button -->
+          <div class="nav__close" id="nav-close">
+            <i class="ri-close-large-line"></i>
+          </div>
+        </div>
+
+        <div class="nav__actions">
+          <!-- Login button -->
+          <i class="ri-user-line login-button" id="login-button"></i>
+        </div>
+
+        <!-- Toggle button -->
+        <div class="nav__toggle" id="nav-toggle">
+          <i class="ri-menu-5-line"></i>
+        </div>
+      </nav>
+    </header>
+
+    <!--==================== LOGIN ====================-->
+    <div class="login grid" id="login-content">
+      <form action="" class="login__form grid">
+        <h3 class="login__title">Me connecter</h3>
+        <div class="login__group grid">
+          <div>
+            <label for="login-email" class="login__label">Email</label>
+            <input
+              type="email"
+              placeholder="Entrez votre email"
+              id="login-email"
+              class="login__input"
+            />
+          </div>
+
+          <div>
+            <label for="login-pass" class="login__label">Mot de passe</label>
+            <input
+              type="password"
+              placeholder="Entrez votre mot de passe"
+              id="login-pass"
+              class="login__input"
+            />
+          </div>
+        </div>
+        <div>
+          <span class="login__signup">
+            Vous n'avez pas de mot de passe ? <a href="#">S'enregistrer</a>
+          </span>
+          <a href="#" class="login__forgot"> Mot de passe oublié </a>
+          <button type="submit" class="login__button button">
+            Se connecter
+          </button>
+        </div>
+      </form>
+      <i class="ri-close-line login__close" id="login-close"></i>
+    </div>
+
+    <!--==================== BOOKING BY PHONE MODAL ====================-->
+    <div class="modal grid" id="modal-content">
+      <form action="" class="modal__form grid">
+        <h3 class="modal__title">Bienvenue chez Toutaloué</h3>
+        <p>Nous contacter au 01 84 21 13 96</p>
+      </form>
+      <i class="ri-close-line modal__close" id="modal-close"></i>
+    </div>
+
+    <!-- The container where HTMX will swap content -->
+    <!--==================== MAIN ====================-->
+    <main class="main" id="view">
+      <!-- Server-side conditional for Full Page Load -->
+      {{if eq .Page "home"}} {{template "home" .}} {{end}} {{if eq .Page
+      "explore"}} {{template "explore" .}} {{end}} {{if eq .Page "songon"}}
+      {{template "songon" .}} {{end}} {{if eq .Page "contact"}} {{template
+      "contact" .}} {{end}}
+      {{if eq .Page "deposer-annonce"}}
+      {{template "deposer-annonce" .}} {{end}}
+      {{if eq .Page "inscription"}}
+      {{template "inscription" .}} {{end}}
+    </main>
+
+    <!--=============== FOOTER ===============-->
+    <footer class="footer">
+      <div class="footer__container container grid">
+        <div>
+          <a href="#" class="footer__logo">Toutaloué</a>
+          <p class="footer__description">
+            Trouve et explore les <br />
+            meilleurs produits
+          </p>
+        </div>
+        <div class="footer__data grid">
+          <div>
+            <h3 class="footer__title">À propos</h3>
+            <ul class="footer__links">
+              <li>
+                <a href="#" class="footer__link">Récompenses</a>
+              </li>
+              <li>
+                <a href="#" class="footer__link">FAQs</a>
+              </li>
+              <li>
+                <a href="#" class="footer__link"
+                  >Politique de confidentialité</a
+                >
+              </li>
+              <li>
+                <a href="#" class="footer__link">Conditions d'utilisation</a>
+              </li>
+            </ul>
+          </div>
+
+          <div>
+            <h3 class="footer__title">Entreprise</h3>
+            <ul class="footer__links">
+              <li>
+                <a href="#" class="footer__link">Blogs</a>
+              </li>
+              <li>
+                <a href="#" class="footer__link">Communauté</a>
+              </li>
+              <li>
+                <a href="#" class="footer__link">Notre équipe</a>
+              </li>
+              <li>
+                <a href="#" class="footer__link">Aide</a>
+              </li>
+            </ul>
+          </div>
+
+          <div>
+            <h3 class="footer__title">Contact</h3>
+            <ul class="footer__links">
+              <li>
+                <address class="footer__info">
+                  BASSAM MOOSSOU <br />
+                  RÉSIDENTIEL LOT 393
+                </address>
+              </li>
+              <li>
+                <address class="footer__info">
+                  contact@toutaloue.com <br />
+                  0987-654-321
+                </address>
+              </li>
+            </ul>
+          </div>
+
+          <div>
+            <h3 class="footer__title">Social</h3>
+            <div class="footer__social">
+              <a
+                href="https://www.facebook.com/"
+                target="_blank"
+                class="footer__social-link"
+              >
+                <i class="ri-facebook-circle-line"></i>
+              </a>
+              <a
+                href="https://www.instagram.com/"
+                target="_blank"
+                class="footer__social-link"
+              >
+                <i class="ri-instagram-line"></i>
+              </a>
+              <a
+                href="https://twitter.com/"
+                target="_blank"
+                class="footer__social-link"
+              >
+                <i class="ri-twitter-x-line"></i>
+              </a>
+            </div>
+          </div>
+        </div>
+      </div>
+      <span class="footer__copy"> &#169; Tous Droits Réservés par JKI </span>
+    </footer>
+
+    <!--=============== SCROLLUP ===============-->
+    <a href="#" class="scrollup" id="scroll-up">
+      <i class="ri-arrow-up-line"></i>
+    </a>
+
+    <!--=============== SCROLLREVEAL JS ===============-->
+    <script src="/public/assets/js/scrollreveal.min.js"></script>
+
+    <!--=============== SWIPER JS ===============-->
+    <script src="/public/assets/js/swiper-bundle.min.js"></script>
+
+    <!--=============== MAIN JS ===============-->
+    <script src="/public/assets/js/main.js"></script>
+  </body>
+</html>
+{{end}}