<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Écolodge - Poutpout</title>
<link rel="icon" href="assets/images/icons/logo.svg" type="image/svg">
<link rel="stylesheet" href="node_modules/@glidejs/glide/dist/css/glide.core.min.css">
<!-- <script type="module" src="utils/petite-vue-app.ts"></script> -->
<script defer src="bundle.js"></script><link href="styles.css" rel="stylesheet"></head>
<body v-scope @vue:mounted="init" class="home_class_id">
<div id="header"></div>
<section class="h-[50vh] header_cust flex flex-col lg:h-[103vh] bh relative p-5"
:class="{ 'animate-pulse !bg-gray-400': !header_home?.[0]?.image }"
:style="{ backgroundImage: `url('${header_home?.[0]?.image || 'assets/images/bh.jpg'}')`}">
<p class="text-center m-auto self-center text-white uppercase text-2xl lg:text-5xl relative z-20"
v-if="header_home?.[0]">
<span v-html="header_home?.[0]?.libelle" class="ftrm">Un refuge entre </span><br> <span class="ftrm font-bold"
v-html="header_home?.[0]?.sous_titre">ciel, mer & terre.</span>
</p>
<video loop muted autoplay v-if="header_home?.[0]" class="absolute top-0 left-0 w-full h-full object-cover">
<source :src="header_home?.[0]?.image">
</video>
<div v-else class="m-auto w-full self-center text-white uppercase text-2xl lg:text-5xl">
<div
class="m-auto self-center text-white uppercase text-2xl lg:text-5xl bg-gray-300 animate-pulse w-[50%] h-[30px] rounded-full"
v-else></div>
<div
class="m-auto mt-5 self-center text-white uppercase text-2xl lg:text-5xl bg-gray-300 animate-pulse w-[40%] h-[30px] rounded-full"
v-else></div>
</div>
<!-- <div class="relative -translate-y-20">
<div class="relative flex items-center justify-center">
<div class="simple-spin absolute w-[30px] h-[30px] lg:w-[40px] lg:h-[40px]"></div>
<img class="absolute w-3 lg:w-4" src="assets/images/icons/ard.svg" alt="" srcset="">
</div>
</div> -->
<img src="assets/images/bkline.svg" class="absolute w-full -bottom-[10px] translate-y-[50%] h-[35px] left-0" alt=""
srcset="" />
</div>
</section>
<section class="">
<div class="limit py-5 md:py-10 lg:py-20 pt-14">
<div class="pile_title">
<p v-html="getMessageField('accueil_chambres_titre')" class="ftrm text-primary">Les chambres de l'Écolodge</p>
<span v-html="getMessageField('accueil_chambres_slogan')" class="!text-primary2">Éveillez vos sens,
reconnectez-vous à
l’essentiel.</span>
<div style=" background: no-repeat center/cover url('assets/images/shape/line.svg');"></div>
<label class="w-[80%] mx-auto text-center text-black font-light text-xs md:text-lg"
v-html="getMessageField('accueil_intro')">L’Écolodge Poutpout vous invite à
une expérience authentique de l’art de vivre à la sénégalaise, dans un cadre
contemporain et apaisant. C’est l’endroit idéal pour se ressourcer, en famille, en amoureux ou entre
amis.</label>
</div>
<div class="glide_skeleton glide_long mt-5 w-full" v-if="slider_chambre?.length < 1">
<div data-glide-el="track" class="glide__track">
<ul class="glide__slides">
<li class="glide__slide">
<div class="w-full h-[600px] mt-5 animate-pulse bg-gray-100 rounded-lg"></div>
</li>
<li class="glide__slide">
<div class="w-full h-[600px] mt-5 animate-pulse bg-gray-100 rounded-lg"></div>
</li>
<li class="glide__slide">
<div class="w-full h-[600px] mt-5 animate-pulse bg-gray-100 rounded-lg"></div>
</li>
</ul>
</div>
</div>
<div class="glide glide_long mt-5 w-full relative" v-else>
<div data-glide-el="track" class="glide__track">
<ul class="glide__slides">
<li class="glide__slide glide__slide__video" v-for="item in slider_chambre?.[0]?.images" :key="item.id">
<img :src="item.url" :alt="item.name" class="w-full h-auto" />
</li>
</ul>
</div>
<div class="glide__arrows flex w-[95%] absolute justify-between top-[50%] left-[50%] -translate-x-[50%]"
data-glide-el="controls" v-if="slider_chambre?.[0]?.images?.length > 0">
<button
class="glide__arrow glide__arrow--left rotate-90 h-5 w-5 flex items-center justify-center rounded-full"
data-glide-dir="<">
<img src="assets/images/shape/arb.svg" class="!w-5" alt="" srcset="">
</button>
<button
class="glide__arrow glide__arrow--right h-5 w-5 -rotate-90 flex items-center justify-center rounded-full"
data-glide-dir=">">
<img src="assets/images/shape/arb.svg" class="!w-5" alt="" srcset="">
</button>
</div>
</div>
<a class="btn w-max border-none flex items-center mx-auto mt-10 text-white btn_cmp !bg-[#edb477]" target="_blank"
href="https://aerodrome-poutpout.com/">
<span class="uppercase text-xs font-medium" v-html="getMessageField('decouvrir_nos_chambre')">Découvrir nos chambres </span>
<!-- <img src="assets/images/shape/arl.svg" alt="" srcset=""> -->
</a>
</div>
<section class="secion_trans1 h-max p-5 md:p-10 flex justify-end"
:style="{ backgroundImage: `url('assets/images/brb3.png')`}">
<div class="secion_trans h-max w-full md:w-[100%] lg:w-[40%]" :class="{ '!bg-primary ': !header_middle?.[0]?.image }">
<div class="w-full h-full flex flex-col justify-start gap-5 p-10">
<div class="pile_title">
<p class="!text-white text-left w-full font-bold !text-lg" style="text-transform: initial !important;"
v-html="header_middle?.[0]?.libelle"></p>
</div>
<p class="mx-auto text-left text-white text-xs md:text-base font-light" v-if="header_middle?.[0]"
v-html="header_middle?.[0]?.sous_titre">Dans le Sine Saloum, un
passionné donne vie à un rêve : un aérodrome niché entre bolongs et savane. Partez à l’aventure en pirogue
ou
en charrette, et laissez-vous envoûter par la beauté sauvage de la région.</p>
<div v-else class="w-full self-center text-white uppercase text-2xl lg:text-5xl">
<div
class="m-auto self-center text-white uppercase text-2xl lg:text-5xl bg-gray-300 animate-pulse w-[50%] h-[20px] rounded-full">
</div>
<div
class="m-auto mt-2 self-center text-white uppercase text-2xl lg:text-5xl bg-gray-300 animate-pulse w-[40%] h-[20px] rounded-full">
</div>
</div>
<a href="region-activites.html" id="link-region-activites" class="flex items-center btn_cmp text-center mx-auto lg:mx-0 w-auto sm:w-max whitespace-pre-wrap">
<span class="uppercase text-xs font-medium text-white"
v-html="getMessageField('accueil_region_activites_titre')">Région & les activités</span>
</a>
</div>
</div>
</section>
<div class="limit py-5 md:pt-10 lg:pt-20">
<div class="pile_title">
<p class="!text-primary ftrm" v-html="getMessageField('accueil_restaurant_titre')">le restaurant de l'Écolodge
</p>
<span class="!text-[#88BAB2]" v-html="getMessageField('accueil_restaurant_slogan')">Une cuisine aux produits
locaux</span>
<div style=" background: no-repeat center/cover url('assets/images/shape/line.svg');"></div>
<label class="w-[80%] mx-auto text-center text-black text-xs md:text-lg font-light"
v-html="getMessageField('accueil_restaurant_slogan2')">Une cuisine authentique qui met à
l’honneur les saveurs du terroir, avec des produits frais, locaux et de saison.</label>
</div>
<div class="glide_skeleton glide_long mt-5 w-full" v-if="!slider_restaurant?.[0]?.images?.length">
<div data-glide-el="track" class="glide__track">
<ul class="glide__slides">
<li class="glide__slide">
<div class="w-full h-[600px] mt-5 animate-pulse bg-primary2 rounded-lg"></div>
</li>
<li class="glide__slide">
<div class="w-full h-[600px] mt-5 animate-pulse bg-primary2 rounded-lg"></div>
</li>
<li class="glide__slide">
<div class="w-full h-[600px] mt-5 animate-pulse bg-primary2 rounded-lg"></div>
</li>
</ul>
</div>
</div>
<div class="glide glide_long mt-5 w-full relative" v-else>
<div data-glide-el="track" class="glide__track">
<ul class="glide__slides">
<li class="glide__slide glide__slide__video" v-for="item in slider_restaurant?.[0]?.images" :key="item.id">
<img :src="item.url" :alt="item.name" class="w-full h-auto" />
</li>
</ul>
</div>
<div class="glide__arrows flex w-[95%] absolute justify-between top-[50%] left-[50%] -translate-x-[50%]"
data-glide-el="controls" v-if="slider_restaurant?.[0]?.images?.length > 0">
<button
class="glide__arrow glide__arrow--left rotate-90 h-5 w-5 flex items-center justify-center rounded-full"
data-glide-dir="<">
<img src="assets/images/shape/arb.svg" class="!w-5" alt="" srcset="">
</button>
<button
class="glide__arrow glide__arrow--right h-5 w-5 -rotate-90 flex items-center justify-center rounded-full"
data-glide-dir=">">
<img src="assets/images/shape/arb.svg" class="!w-5" alt="" srcset="">
</button>
</div>
</div>
<a href="restaurant-bar.html" id="link-restaurant-bar"
class="btn w-max flex items-center text-white btn_cmp mt-10 mx-auto">
<span class="uppercase text-xs font-medium" v-html="getMessageField('accueil_restaurant_bouton')">Découvrez le
restaurant</span>
<!-- <img src="assets/images/icons/go.svg" class="w-4" alt="" srcset=""> -->
</a>
</div>
</section>
<section class="bg-[#fefdf6]">
<div class="limit py-5 md:py-10 w-full h-full flex flex-col justify-center gap-5">
<div class="pile_title">
<p class="!text-primary ftrm" v-html="getMessageField('nos_engagements_ecologiques')">Nos engagements
écologiques</p>
<span class="!text-[#88BAB2]" v-html="getMessageField('au_coeur_de_la_nature_senegalaise')">Au coeur de la
nature sénégalaise</span>
<div style="background: no-repeat center/cover url('assets/images/shape/line.svg');"></div>
<label class="w-[80%] mx-auto text-center text-black text-xs md:text-lg font-light"
v-html="getMessageField('nos_engagements_ecologiques_slogan2')">L’Ecolodge vous propose une cuisine à
la
fois familiale et variée, mêlant des recettes sénégalaises authentiques à des spécialités du monde. Du
petit-déjeuner au dîner en passant par le déjeuner, le restaurant vous propose de bons petits plats, à
savourer
en toute simplicité !</label>
</div>
<div class="flex w-full items-stretch gap-4">
<div class="space-y-4 w-full md:w-1/2">
<div v-for="(item, idx) in informationcomplementaires" :key="item.id"
class="collapse collapse-arrow bgb100 border bb300 bg-white">
<input type="radio" name="my-accordion-2" :checked="activeInfoIndex === idx"
@change="activeInfoIndex = idx" />
<div class="collapse-title font-semibold text-primary2" v-html="item.titre"></div>
<div class="collapse-content text-sm border-t pt-3 text-black" v-html="item.description"></div>
</div>
<div v-effect="refreshGlide()"></div>
</div>
<div class="hidden md:block w-full h-[500px] md:w-1/2" v-if="informationcomplementaires?.[0]?.images?.length">
<!-- <img :src="informationcomplementaires?.[0]?.images?.[0]?.url" class="w-full object-cover h-full rounded-lg" alt="" srcset=""> -->
<div class="glide_info w-full" v-if="!informationcomplementaires?.[activeInfoIndex]?.images?.length">
<div data-glide-el="track" class="glide__track">
<ul class="glide__slides">
<li class="glide__slide">
<div class="w-full h-[500px] animate-pulse bg-primary2 rounded-lg"></div>
</li>
</ul>
</div>
</div>
<div class="w-full" v-else>
<img :src="informationcomplementaires[activeInfoIndex]?.images[0]?.url"
class="w-full h-[430px] object-cover rounded-lg" />
</div>
</div>
</div>
</div>
</section>
<section class="bg-primary my-5 md:my-10">
<div class="limit pt-10">
<div class="pile_title">
<p class="!text-white mb-3 !text-xl" v-html="getMessageField('picto_section')">Lorem ipsum dolor sit amet,
consectetur
adipiscing elit.</p>
<!-- <div style="background: no-repeat center/cover url('assets/images/shape/line.svg');"></div> -->
<span class="!text-white md:w-[70%] w-full" v-html="getMessageField('picto_section_desc')">Au coeur de la
nature sénégalaise</span>
</div>
</div>
<div
class="limit py-5 grid text-center ftrm grid-cols-2 md:flex justify-center items-center gap-2 md:gap-10 uppercase">
<div class="case_b">
<img src="assets/images/shape/shb5.svg" alt="" srcset="">
<p v-html="getMessageField('nature_sauvage')" class="text-[#edb477]">Nature sauvage</p>
</div>
<div class="case_b">
<img src="assets/images/shape/shb3.svg" alt="" srcset="">
<p v-html="getMessageField('chambre_tout_confort')" class="text-[#edb477]">Chambre tout confort</p>
</div>
<div class="case_b">
<img src="assets/images/shape/shb2.svg" alt="" srcset="">
<p v-html="getMessageField('piscine_vue_sur_bolongs')" class="text-[#edb477]">Piscine vue sur bolongs</p>
</div>
<div class="case_b">
<img src="assets/images/shape/shb1.svg" alt="" srcset="">
<p v-html="getMessageField('restaurant_bar')" class="text-[#edb477]">Restaurant et bar</p>
</div>
<div class="case_b col-span-2">
<img src="assets/images/shape/shb4.svg" alt="" srcset="">
<p class="text-[#edb477]">Kid's friendly</p>
</div>
</div>
</section>
<section class="mb-5">
<svg xmlns="http://www.w3.org/2000/svg" class="w-full hidden h-[15px] text-[#edb477] rotate-180"
viewbox="0 0 1000 100" preserveaspectratio="none">
<path class="elementor-shape-fill" opacity="0.33"
d="M473,67.3c-203.9,88.3-263.1-34-320.3,0C66,119.1,0,59.7,0,59.7V0h1000v59.7 c0,0-62.1,26.1-94.9,29.3c-32.8,3.3-62.8-12.3-75.8-22.1C806,49.6,745.3,8.7,694.9,4.7S492.4,59,473,67.3z"
fill="currentColor"></path>
<path class="elementor-shape-fill" opacity="0.66"
d="M734,67.3c-45.5,0-77.2-23.2-129.1-39.1c-28.6-8.7-150.3-10.1-254,39.1 s-91.7-34.4-149.2,0C115.7,118.3,0,39.8,0,39.8V0h1000v36.5c0,0-28.2-18.5-92.1-18.5C810.2,18.1,775.7,67.3,734,67.3z"
fill="currentColor"></path>
<path class="elementor-shape-fill"
d="M766.1,28.9c-200-57.5-266,65.5-395.1,19.5C242,1.8,242,5.4,184.8,20.6C128,35.8,132.3,44.9,89.9,52.5C28.6,63.7,0,0,0,0 h1000c0,0-9.9,40.9-83.6,48.1S829.6,47,766.1,28.9z"
fill="currentColor"></path>
</svg>
<section class="">
<section class="limit">
<div class="py-5 w-full h-full flex flex-col justify-center gap-5">
<div class="flex flex-col items-center justify-center gap-3 text-primary">
<div class="pile_title">
<p class="ftrm !text-2xl text-primary" v-html="getMessageField('rejoignez_notre_communaute')">Rejoignez
notre
communauté :</p>
</div>
<div class="flex items-center justify-center gap-2 text-primary">
<span class="text-lg">@ecolodgepoutpout</span>
<span>|</span>
<a target='_blank' :href="getPreferenceValue('facebook')"><img class='w-[25px]'
src='assets/images/icons/fbk.svg' alt="Facebook" /></a>
<a target='_blank' :href="getPreferenceValue('instagram')"><img class='w-[27px]'
src='assets/images/icons/ist.svg' alt="Instagram" /></a>
</div>
</div>
</div>
</section>
</section>
<svg xmlns="http://www.w3.org/2000/svg" class="w-full hidden h-[15px] text-[#edb477]" viewbox="0 0 1000 100"
preserveaspectratio="none">
<path class="elementor-shape-fill" opacity="0.33"
d="M473,67.3c-203.9,88.3-263.1-34-320.3,0C66,119.1,0,59.7,0,59.7V0h1000v59.7 c0,0-62.1,26.1-94.9,29.3c-32.8,3.3-62.8-12.3-75.8-22.1C806,49.6,745.3,8.7,694.9,4.7S492.4,59,473,67.3z"
fill="currentColor"></path>
<path class="elementor-shape-fill" opacity="0.66"
d="M734,67.3c-45.5,0-77.2-23.2-129.1-39.1c-28.6-8.7-150.3-10.1-254,39.1 s-91.7-34.4-149.2,0C115.7,118.3,0,39.8,0,39.8V0h1000v36.5c0,0-28.2-18.5-92.1-18.5C810.2,18.1,775.7,67.3,734,67.3z"
fill="currentColor"></path>
<path class="elementor-shape-fill"
d="M766.1,28.9c-200-57.5-266,65.5-395.1,19.5C242,1.8,242,5.4,184.8,20.6C128,35.8,132.3,44.9,89.9,52.5C28.6,63.7,0,0,0,0 h1000c0,0-9.9,40.9-83.6,48.1S829.6,47,766.1,28.9z"
fill="currentColor"></path>
</svg>
</section>
<!--
<section class=" bg-[#fefdf6]">
<div class="py-5 md:py-10 w-full h-full flex flex-col justify-center gap-5">
<div class="pile_title">
<p class="!text-primary ftrm" v-html="getMessageField('autres_activites_titre')">Autres activités</p>
<span class="!text-[#88BAB2]" v-html="getMessageField('autres_activites_slogan')">Un rêve devenu réalité dans le
Sine Saloum.</span>
<div style="background: no-repeat center/cover url('assets/images/shape/line.svg');"></div>
<label class=" w-[80%] mx-auto text-center text-black text-xs md:text-lg font-light font-light "
v-html="getMessageField('autres_activites_slogan2')">Un lieu unique où ciel et nature se
rencontrent, invitant à l’évasion entre mangroves, savane et bolongs.</label>
</div>
<div class="flex flex-col w-full md:flex-row md:min-h-[350px]">
<div class="w-full md:w-1/2 relative">
<img src="assets/images/ad1.jpg" alt="" class="w-full h-full object-cover bg-bottom absolute top-0 z-0" ˜
srcset="">
<div class="gardient_section_w relative md:absolute bottom-0 z-10 p-10 md:p-16 w-full space-y-5">
<img src="assets/images/icons/logoad2.svg" class="w-[120px]" alt="" srcset="">
<a class="btn w-max border-none flex items-center text-white btn_cmp !bg-[#edb477]" target="_blank"
href="https://aerodrome-poutpout.com/">
<span class="uppercase text-xs font-medium" v-html="getMessageField('decouverte_aerodrome')">Découvrez
notre Aérodrome</span>
</a>
</div>
</div>
<div class="w-full md:w-1/2 relative">
<img src="assets/images/ad2.jpg" alt="" class="w-full h-full object-cover bg-bottom absolute top-0 z-0"
srcset="">
<div class="gardient_section_w relative md:absolute bottom-0 z-10 p-10 md:p-16 w-full space-y-5">
<img src="assets/images/icons/logosk.png" class="w-[100px]" alt="" srcset="">
<a class="btn w-max border-none flex items-center text-white btn_cmp !bg-[#edb477]" target="_blank"
href="https://skydivesenegal-poutpout.com/">
<span class="uppercase text-xs font-medium" v-html="getMessageField('decouverte_skydive')">Découvrez notre
Skydive</span>
</a>
</div>
</div>
</div>
</div>
</section>
-->
<section class="limit" v-if="temoignages?.length >0">
<div class="pile_title">
<p class="!text-primary ftrm" v-html="getMessageField('ils_parlent_de_nous_titre')">Ils parlent de nous !</p>
<span class="!text-[#88BAB2]" v-html="getMessageField('ils_parlent_de_nous_slogan')">Des témoignages de la part de
nos clients</span>
</div>
<div class="testymony relative" v-if="temoignages?.length > 0">
<div data-glide-el="track" class="glide__track">
<ul class="glide__slides py-5">
<li class="glide__slide p-2" v-for="temoignage in temoignages">
<div class="min-h-[200px] flex flex-col gap-5 w-full shadow-lg rounded-xl p-10 bg-white">
<div class="flex items-center gap-3">
<img :src="temoignage.image" class="w-10 h-10 rounded-full" alt="" srcset="">
<p class="font-bold text-primary">{{temoignage.title}}</p>
</div>
<p class="" v-html="temoignage.description"></p>
<p class="text-primary2">{{temoignage.created_at}}</p>
</div>
</li>
</ul>
</div>
<div class="glide__arrows flex w-[105%] absolute justify-between top-[50%] -translate-x-[2.5%]"
data-glide-el="controls" v-if="temoignages?.length > 2">
<button
class="glide__arrow glide__arrow--left rotate-180 h-10 w-10 !bg-slate-950 flex items-center justify-center btn_cmp rounded-lg"
data-glide-dir="<">
</button>
<button
class="glide__arrow glide__arrow--right h-10 w-10 !bg-slate-950 flex items-center justify-center btn_cmp rounded-lg"
data-glide-dir=">">
</button>
</div>
</div>
<!-- <div v-else class="flex flex-col md:flex-row gap-4 py-5">
<div class="min-h-[200px] flex flex-col gap-5 w-full shadow-lg rounded-xl p-10 bg-white">
<div class="flex items-center gap-3 ">
<div class="w-10 h-10 rounded-full bg-gray-100 animate-pulse" alt="" srcset=""></div>
<p class="font-bold h-5 w-20 text-primary animate-pulse"></p>
</div>
<p class="animate-pulse h-10 w-1/2 bg-gray-100 "></p>
<p class="text-primary2 bg-gray-100 animate-pulse h-5 w-20"></p>
</div>
<div class="min-h-[200px] flex flex-col gap-5 w-full shadow-lg rounded-xl p-10 bg-white">
<div class="flex items-center gap-3 ">
<div class="w-10 h-10 rounded-full bg-gray-100 animate-pulse" alt="" srcset=""></div>
<p class="font-bold h-5 w-20 text-primary animate-pulse"></p>
</div>
<p class="animate-pulse h-10 w-1/2 bg-gray-100 "></p>
<p class="text-primary2 bg-gray-100 animate-pulse h-5 w-20"></p>
</div>
</div> -->
</section>
<div id="footer"></div>
</body>
<script>
// Vérifie si on est sur la version test
const basePath = window.location.pathname.includes("front_test") ? "/front_test" : "";
// Récupère tous les liens du menu
const menuLinks = [
{ selector: '#link-nos-chambres', href: '/nos-chambres.html' },
{ selector: '#link-restaurant-bar', href: '/restaurant-bar.html' },
{ selector: '#link-region-activites', href: '/region-activites.html' },
// { selector: '#link-faq', href: '/faq.html' }
];
menuLinks.forEach(link => {
const el = document.querySelector(link.selector);
if (el) {
el.setAttribute('href', basePath + link.href);
}
});
const basePathAssets = window.location.pathname.includes("front_test") ? "../" : "";
const adjustImages = () => {
document.querySelectorAll('img[src^="assets/"]').forEach(img => {
const src = img.getAttribute('src');
if (!src.startsWith(basePathAssets)) {
img.src = basePathAssets + src;
}
});
};
// appliquer immédiatement
adjustImages();
// vérifier toutes les secondes
setInterval(adjustImages, 1000);
(() => {
const basePath = window.location.pathname.includes("front_test") ? "../" : "";
const style = document.createElement("style");
style.innerHTML = `
@font-face {
font-family: 'Ramona';
src: url('${basePath}assets/fonts/Ramona-Light.ttf') format('truetype');
font-weight: normal;
font-style: normal;
font-display: swap;
}
.ftrm{
font-family: "Ramona", sans-serif;
}
`;
document.head.appendChild(style);
})();
</script>
</html>
