templates/vitrine/pages/about.html.twig line 1

Open in your IDE?
  1. {% extends 'vitrine/base.html.twig' %}
  3. {% block title %}{% trans %}A propos{% endtrans %}{% endblock %}
  4. {% block description %}{% trans %}Découvrez tout l'univers du spa à la bière{% endtrans %}{% endblock %}
  6. {% block stylesheets %}
  7.     {{ parent() }}
  8.     <style>
  9.         .swiper-partner .swiper-slide {
  10.             display: flex !important;
  11.             justify-content: center;
  12.             align-items: center;
  13.         }
  14.     </style>
  15. {% endblock %}
  17. {% block main %}
  18.     {# Hero #}
  19.     <section class="max-w-none relative h-max pt-28 overflow-hidden -z-50">
  20.         <div class="w-full h-[70vh] md:top-28 top-24 inset-0 z-0">
  21.             <img loading="lazy" src="{{asset('/vitrine/images/equipe.jpg')}}" class="w-full h-full object-cover image-brightness" alt="{% trans %}Equipe Taaka Strasbourg{% endtrans %}">
  22.             <div class="absolute w-full h-full top-0 pt-28 left-0 flex justify-center items-end">
  23.                 <div class="h-full p-4 mb-3 flex justify-center items-center flex-col gap-8">
  24.                     <h1 class="font-semibold text-center font-openSans md:text-7xl text-5xl text-white">
  25.                         {% trans %}QUI SOMMES-NOUS ?{% endtrans %}
  26.                     </h1>
  27.                 </div>
  28.             </div>
  29.         </div>
  30.     </section>
  31.     <div class=" overflow-hidden w-full flexcol items-center z-10 relative">
  32.         {# Section FAQ #}
  33.         <section class="flex md:flex-row flex-col gap-10 md:gap-20 md:mt-0 mt-8">
  34.             <div class="flexcol gap-8 md:w-2/5">
  35.                 <h2 class="animate-text lg:text-7xl md:text-5xl text-4xl text-center md:text-left flexcol gap-0">
  36.                     <span class="text-2xl font-thin tracking-wider">
  37.                         {% trans %}Un duo{% endtrans %}
  38.                     </span>
  39.                     {% trans %}Fondateurs{% endtrans %}
  40.                 </h2>
  41.                 <p>
  42.                     <span class="font-bold text-2xl">NAOMIE</span>, {% trans %}la co-fondatrice du spa, est le rayon de soleil de notre équipe. Toujours souriante, elle gère toute la Logistique et la Finance de Taaka. De double nationalité franco-anglaise, elle est adepte de thé et de carrot cake. C'est une amoureuse du cocooning, des soins bien-être et des voyages.{% endtrans %}
  43.                 </p>
  44.                 <p>
  45.                     <span class="font-bold text-2xl">PAUL</span>, {% trans %}est un passionné de bière. Notre co-fondateur est chargé des volets Marketing et Commercial de Taaka. Epicurien, il aime cuisiner et les soirées entre copains. Il ne dira jamais non à une petite bière en terrasse... C'est lors d'un voyage à Prague en amoureux qu'il découvre le concept de Spa à la Bière et le moyen d'allier ses 2 passions : la bière et faire plaisir à Naomie. Une idée était née...{% endtrans %}
  46.                 </p>
  47.             </div>
  48.             <div class="flex gap-8 md:w-3/5">
  49.                 <div class="flexcol">
  50.                     <img loading="lazy" src="{{asset('vitrine/images/naomie.jpg')}}" alt="Naomie" class="w-full h-full object-cover">
  51.                     <p>
  52.                         <span class="font-semibold text-2xl font-poppins">Naomie</span>
  53.                     </p>
  54.                 </div>
  55.                 <div class="flexcol">
  56.                     <img loading="lazy" src="{{asset('vitrine/images/paul.jpg')}}" alt="Paul" class="w-full h-full object-cover">
  57.                     <p>
  58.                         <span class="font-semibold text-2xl font-poppins">Paul</span>
  59.                     </p>
  60.                 </div>
  61.             </div>
  62.         </section>
  63.         <section class="overflow-hidden">
  64.             <div class="flex justify-center mb-8">
  65.                 <h3 class="animate-text md:text-4xl font-semibold text-3xl text-center md:text-left flexcol gap-0">
  66.                     {% trans %}Ils parlent de nous{% endtrans %}
  67.                     <span class="md:text-2xl text-xl text-center font-thin tracking-wider">
  68.                         {% trans %}En bien, ouf{% endtrans %}
  69.                     </span>
  70.                 </h3>
  71.             </div>
  72.             <div class="border-y flex items-center border-y-vitrineWhiteOpacity px-16 relative">
  73.                 <div class="swiper-button-prev hover:opacity-70"></div>
  74.                 {# Swiper #}
  75.                 <div class="swiper-partner flex items-center relative overflow-hidden py-16">
  76.                     <div class="h-max swiper-wrapper">
  77.                         <a class="swiper-slide flex items-center text-center w-1/5 gap-2 font-bold text-3xl text-vitrineWhiteOpacity" href="https://www.youtube.com/watch?v=g6p4Hn8Q7eI&ab_channel=TaakaBeerSpa" target="_blank">
  78.                             <img class="max-h-24" loading="lazy" src="{{asset('vitrine/logo-companies/channel4.svg')}}" alt="Channel 4 logo">
  79.                         </a>
  80.                         <a class="swiper-slide flex items-center text-center w-1/5 gap-2 font-bold text-3xl text-vitrineWhiteOpacity" href="https://www.youtube.com/watch?v=PcTZ2f9pyvc&ab_channel=TaakaBeerSpa" target="_blank">
  81.                             <img class="max-h-24" loading="lazy" src="{{asset('vitrine/logo-companies/tf1-50inside.svg')}}" alt="tf1 50inside logo">
  82.                         </a>
  83.                         <a class="swiper-slide flex items-center text-center w-1/5 gap-2 font-bold text-3xl text-vitrineWhiteOpacity" href="https://www.lesechos.fr/pme-regions/grand-est/strasbourg-accueille-le-premier-spa-a-la-biere-de-france-1390341" target="_blank">
  84.                             <img class="max-h-24" loading="lazy" src="{{asset('vitrine/logo-companies/les-echos.svg')}}" alt="les echos logo">
  85.                         </a>
  86.                         <a class="swiper-slide flex items-center text-center w-1/5 gap-2 font-bold text-3xl text-vitrineWhiteOpacity" href="https://www.leparisien.fr/bas-rhin-67/a-strasbourg-deux-jeunes-entrepreneurs-ouvrent-un-spa-a-la-biere-25-02-2022-MCD6BMPDQFCFHCEXSZM4XTBHRE.php" target="_blank">
  87.                             <img class="max-h-24" loading="lazy" src="{{asset('vitrine/logo-companies/le-parisien.svg')}}" alt="le parisien logo">
  88.                         </a>
  89.                         <a class="swiper-slide flex items-center text-center w-1/5 gap-2 font-bold text-3xl text-vitrineWhiteOpacity" href="https://www.youtube.com/watch?v=ZQa9XSo05kk&ab_channel=euronews" target="_blank">
  90.                             <img class="max-h-24" loading="lazy" src="{{asset('vitrine/logo-companies/euronews.svg')}}" alt="euronews logo">
  91.                         </a>
  92.                         <a class="swiper-slide flex items-center text-center w-1/5 gap-2 font-bold text-3xl text-vitrineWhiteOpacity" href="https://www.cnews.fr/france/2021-11-04/strasbourg-le-premier-spa-la-biere-de-france-sur-le-point-douvrir-1145763" target="_blank">
  93.                             <img class="max-h-24" loading="lazy" src="{{asset('vitrine/logo-companies/c-news.svg')}}" alt="c news logo">
  94.                         </a>
  95.                         <a class="swiper-slide flex items-center text-center w-1/5 gap-2 font-bold text-3xl text-vitrineWhiteOpacity" href="https://www.youtube.com/watch?v=VQ0JCXwyW6g&ab_channel=TaakaBeerSpa" target="_blank">
  96.                             <img class="max-h-24" loading="lazy" src="{{asset('vitrine/logo-companies/c8.svg')}}" alt="c8 logo">
  97.                         </a>
  98.                         <a class="swiper-slide flex items-center text-center w-1/5 gap-2 font-bold text-3xl text-vitrineWhiteOpacity" href="https://www.20minutes.fr/strasbourg/3169671-20211113-strasbourg-biere-deux-coups-nouveau-spa-biere-ouvre-bientot-portes-pays-cigognes" target="_blank">
  99.                             <img class="max-h-24" loading="lazy" src="{{asset('vitrine/logo-companies/20minutes.svg')}}" alt="20 minutes logo">
  100.                         </a>
  101.                         <a class="swiper-slide flex items-center text-center w-1/5 gap-2 font-bold text-3xl text-vitrineWhiteOpacity" href="https://parissecret.com/insolite-premier-spa-a-la-biere-france/" target="_blank">
  102.                             <img class="max-h-24" loading="lazy" src="{{asset('vitrine/logo-companies/paris-secret.svg')}}" alt="paris secret logo">
  103.                         </a>
  104.                         <a class="swiper-slide flex items-center text-center w-1/5 gap-2 font-bold text-3xl text-vitrineWhiteOpacity" href="https://www.geo.fr/voyage/alsace-le-premier-spa-a-la-biere-de-france-va-ouvrir-a-strasbourg-207567" target="_blank">
  105.                             <img class="max-h-24" loading="lazy" src="{{asset('vitrine/logo-companies/geo.svg')}}" alt="geo logo">
  106.                         </a>
  107.                         <a class="swiper-slide flex items-center text-center w-1/5 gap-2 font-bold text-3xl text-vitrineWhiteOpacity" href="https://www.europe1.fr/insolite/houblon-levure-et-pression-le-premier-spa-a-biere-va-bientot-ouvrir-en-france-4074864" target="_blank">
  108.                             <img class="max-h-24" loading="lazy" src="{{asset('vitrine/logo-companies/europe1.svg')}}" alt="europe1 logo">
  109.                         </a>
  110.                         <a class="swiper-slide flex items-center text-center w-1/5 gap-2 font-bold text-3xl text-vitrineWhiteOpacity" href="https://www.demotivateur.fr/food/le-premier-spa-a-la-biere-va-bientot-ouvrir-ses-portes-en-france-26711" target="_blank">
  111.                             <img class="max-h-24" loading="lazy" src="{{asset('vitrine/logo-companies/demotivateur.svg')}}" alt="demotivateur logo">
  112.                         </a>
  113.                         <a class="swiper-slide flex items-center text-center w-1/5 gap-2 font-bold text-3xl text-vitrineWhiteOpacity" href="https://france3-regions.francetvinfo.fr/grand-est/alsace/insolite-strasbourg-le-premier-spa-a-la-biere-de-france-ouvrira-en-decembre-2310673.html" target="_blank">
  114.                             <img class="max-h-24" loading="lazy" src="{{asset('vitrine/logo-companies/france3-grand-est.svg')}}" alt="france3 grand est logo">
  115.                         </a>
  116.                         <a class="swiper-slide flex items-center text-center w-1/5 gap-2 font-bold text-3xl text-vitrineWhiteOpacity" href="https://www.topmusic.fr/actu/4493-pour-un-spa-a-la-biere-a-strasbourg-une-campagne-de-financement-participatif.html" target="_blank">
  117.                             <img class="max-h-24" loading="lazy" src="{{asset('vitrine/logo-companies/top-music.svg')}}" alt="top music logo">
  118.                         </a>
  119.                         <a class="swiper-slide flex items-center text-center w-1/5 gap-2 font-bold text-3xl text-vitrineWhiteOpacity" href="https://www.lepoint.fr/societe/strasbourg-un-etonnant-spa-alcoolise-va-ouvrir-ses-portes-31-10-2021-2450019_23.php" target="_blank">
  120.                             <img class="max-h-24" loading="lazy" src="{{asset('vitrine/logo-companies/le-point.svg')}}" alt="le point logo">
  121.                         </a>
  122.                         <a class="swiper-slide flex items-center text-center w-1/5 gap-2 font-bold text-3xl text-vitrineWhiteOpacity" href="https://www.voyagespirates.fr/autres/le-premier-beer-spa-en-france" target="_blank">
  123.                             <img class="max-h-24" loading="lazy" src="{{asset('vitrine/logo-companies/voyages-pirates.svg')}}" alt="voyages pirates logo">
  124.                         </a>
  125.                         <a class="swiper-slide flex items-center text-center w-1/5 gap-2 font-bold text-3xl text-vitrineWhiteOpacity" href="https://www.lebonbon.fr/strasbourg/good-news/strasbourg-spa-biere-ouverture-taaka-beer-spa/" target="_blank">
  126.                             <img class="max-h-24" loading="lazy" src="{{asset('vitrine/logo-companies/le-bonbon.svg')}}" alt="le bonbon logo">
  127.                         </a>
  128.                         <a class="swiper-slide flex items-center text-center w-1/5 gap-2 font-bold text-3xl text-vitrineWhiteOpacity" href="https://www.dna.fr/culture-loisirs/2021/10/26/de-la-biere-dans-le-verre-et-dans-la-baignoire" target="_blank">
  129.                             <img class="max-h-24" loading="lazy" src="{{asset('vitrine/logo-companies/dna.svg')}}" alt="dna logo">
  130.                         </a>
  131.                         <a class="swiper-slide flex items-center text-center w-1/5 gap-2 font-bold text-3xl text-vitrineWhiteOpacity" href="https://actu.fr/grand-est/strasbourg_67482/strasbourg-bientot-il-sera-possible-de-prendre-des-bains-de-bieres_45945642.html" target="_blank">
  132.                             <img class="max-h-24" loading="lazy" src="{{asset('vitrine/logo-companies/actu.svg')}}" alt="actu logo">
  133.                         </a>
  134.                         <a class="swiper-slide flex items-center text-center w-1/5 gap-2 font-bold text-3xl text-vitrineWhiteOpacity" href="https://www.ledauphine.com/insolite/2021/11/04/des-bains-de-malt-et-de-houblon-dans-le-premier-spa-a-la-biere-de-france" target="_blank">
  135.                             <img class="max-h-24" loading="lazy" src="{{asset('vitrine/logo-companies/le-dauphine.svg')}}" alt="le dauphine logo">
  136.                         </a>
  137.                         <a class="swiper-slide flex items-center text-center w-1/5 gap-2 font-bold text-3xl text-vitrineWhiteOpacity" href="https://www.youtube.com/watch?v=XXATrCAYq9o&t=4s&ab_channel=France3GrandEst" target="_blank">
  138.                             <img class="max-h-24" loading="lazy" src="{{asset('vitrine/logo-companies/francetv.svg')}}" alt="France TV logo">
  139.                         </a>
  140.                     </div>
  141.                 </div>
  142.                 <div class="swiper-button-next hover:opacity-70"></div>
  143.             </div>
  144.         </section>
  145.         <section class="overflow-hidden">
  146.             <div class="w-full h-full relative">
  147.                 <video id="video" class="w-full min-h-[70px] object-cover z-10" loop muted>
  148.                     <source src="{{ asset('vitrine/videos/old-video-taaka.mp4') }}" type="video/mp4">
  149.                 </video>
  150.                 <div class="text-video absolute w-full h-full top-0 flex-col md:gap-8 gap-0 left-0 flex justify-center ">
  151.                     <div class="flex justify-center">
  152.                         <div id="videoPlayer" class="rounded-full cursor-pointer hover:opacity-70 w-max h-max flex justify-center p-2 bg-vitrineWhiteOpacity border border-white transition duration-100">
  153.                             <svg class="pl-2 w-10 h-10 md:w-20 md:h-20 lg:w-24 lg:h-24" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-play-fill" viewBox="0 0 16 16">
  154.                                 <path d="m11.596 8.697-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393"/>
  155.                             </svg>
  156.                         </div>
  157.                     </div>
  158.                 </div>
  159.             </div>
  160.         </section>
  161.         <section>
  162.                 <div class="relative flex gap-8 justify-between items-end flex-wrap">
  163.                     <h2 class="animate-text md:text-4xl font-semibold text-3xl text-center md:text-left flexcol gap-0">
  164.                         {% trans %}Nos valeurs{% endtrans %}
  165.                         <span class="lg:text-7xl md:text-5xl text-4xl text-center font-thin tracking-wider text-vitrineWhiteOpacity">
  166.                             Made in <span class="font-semibold">{% trans %}Alsace{% endtrans %}</span>
  167.                         </span>
  168.                     </h2>
  169.                     {# Boutons Swiper #}
  170.                     <div class="md:w-max w-full h-12 flex justify-center">
  171.                         <div class="flex gap-4 flex-row-reverse w-56 relative">
  172.                             <div class="swiper-button-prev hover:opacity-70"></div>
  173.                             <div class="swiper-button-next hover:opacity-70"></div>
  174.                         </div>
  175.                     </div>
  176.                 </div>
  177.                 <div class="flex items-center relative">
  178.                     {# Swiper #}
  179.                     <div class="swiper-values flex items-center relative overflow-hidden py-16">
  180.                         <div class="h-max swiper-wrapper">
  181.                             <div class="swiper-slide max-h-[600px] overflow-hidden">
  182.                                 <img loading="lazy" class="w-full h-full object-cover image-brightness" src="{{asset('vitrine/images/about/mainsons-colombage-couche-de-soleil.jpg')}}" alt="{% trans %}Mainsons Colombage Couche de Soleil{% endtrans %}">
  183.                             </div>
  184.                             <div class="swiper-slide max-h-[600px] overflow-hidden">
  185.                                 <img loading="lazy" class="w-full h-full object-cover image-brightness" src="{{asset('vitrine/images/about/houblon.jpg')}}" alt="{% trans %}Houblon{% endtrans %}">
  186.                             </div>
  187.                             <div class="swiper-slide max-h-[600px] overflow-hidden">
  188.                                 <img loading="lazy" class="w-full h-full object-cover image-brightness" src="{{asset('vitrine/images/about/vignes-alsace.jpg')}}" alt="{% trans %}Vignes d'Alsace{% endtrans %}">
  189.                             </div>
  190.                             <div class="swiper-slide max-h-[600px] overflow-hidden">
  191.                                 <img loading="lazy" class="w-full h-full object-cover image-brightness" src="{{asset('vitrine/images/about/cathedrale-strasbourg.jpg')}}" alt="{% trans %}Cathédrale de Strasbourg{% endtrans %}">
  192.                             </div>
  193.                         </div>
  194.                     </div>
  195.                 </div>
  196.                 <div>
  197.                     <p class="text-center text-xl">
  198.                         {% trans %}Défendre les <b>valeurs</b> de la culture brassicole <b>alsacienne</b> est <b>au cœur</b> de notre concept. C'est pourquoi, des matières premières au linge de bain, sans oublier la bière et la limonade de dégustation, nous avons sélectionné de <b>petits partenaires locaux aux prestations de grande qualité</b>. Passer un moment <b>convivial</b> est la définition même de l'univers de la bière et c'est ce que nous mettons en avant dans notre SPA, tout en ajoutant ce côté <b>inoubliable</b> et <b>premium</b>, grâce à nos prestations <b>inédites</b> et de <b>qualité</b>.{% endtrans %}
  199.                         <br><br>
  200.                         {% trans %}Évidemment, bien-être et relaxation sont de rigueur grâce aux <b>vertus naturelles</b> du <b>malt</b>, du <b>houblon</b> et de la <b>levure de bière</b> sur notre corps. À la fois <b>purifiants</b> et <b>revitalisants</b>, les ingrédients de la bière agissent positivement sur nos organismes, <b>améliorant notre sommeil et la qualité de notre peau, ongles et cheveux</b>.{% endtrans %}
  201.                     </p>
  202.                 </div>
  203.         </section>
  204.         <section class="flexcol gap-8">
  205.             <div class="w-full flex justify-center">
  206.                 <hr class="border border-white horizontal-hr">
  207.             </div>
  208.             <div class="relative">
  209.                 <img loading="lazy" class="w-full h-96 object-cover image-brightness" src="{{ asset('vitrine/images/cigogne.webp') }}" alt="{% trans %}Cigogne en plein vol{% endtrans %}">
  210.                 <div class="absolute top-0 left-0 w-full h-full flexcol justify-center items-center gap-4 p-4 z-20">
  211.                     <h3 class="animate-text lg:text-5xl md:text-4xl text-3xl font-semibold text-center flexcol gap-2">
  212.                         <span class="text-center font-thin tracking-wider">
  213.                             {% trans %}- Pourquoi Taaka ? -{% endtrans %}
  214.                         </span>
  215.                         {% trans %}CIGOGNE EN MAORI - SYMBOLE DE L'ALSACE{% endtrans %}
  216.                     </h3>
  217.                 </div>
  218.             </div>
  219.         </section>
  220.         <section class="flexcol gap-8">
  221.             <h2 class="animate-text md:text-4xl font-semibold text-3xl text-center md:text-left flexcol gap-0">
  222.                 {% trans %}Nos recommandations{% endtrans %}
  223.                 <span class="lg:text-7xl md:text-5xl text-4xl text-center font-thin tracking-wider text-vitrineWhiteOpacity">
  224.                     {% trans %}Après le spa ?{% endtrans %}
  225.                 </span>
  226.             </h2>
  227.             <div class="animateBubble bg-vitrineOrange w-full flexcol gap-10 p-12 relative">
  228.                 
  229.                 <div class="flex gap-8 relative flex-wrap items-center">
  230.                     <a href="{% if app.request.locale == 'de' %}{{ asset('empfehlungen_taaka.pdf') }}{% elseif app.request.locale == 'en' %}{{ asset('recommendations_taaka.pdf') }}{% else %}{{ asset('recommandations_taaka.pdf') }}{% endif %}" target="_blank" class="px-12 py-3 font-semibold text-sm md:w-max w-full border border-white hover:opacity-100 hover:text-vitrineOrange hover:bg-white transition duration-100 relative inline-block text-center">
  231.                         {% trans %}TÉLÉCHARGER LA LISTE{% endtrans %}
  232.                     </a>
  233.                     {# Boutons Swiper #}
  234.                     <div class="md:w-max w-full flex justify-center">
  235.                         <div class="flex gap-4 flex-row-reverse w-28 relative white-swiper-btn">
  236.                             <div class="swiper-button-prev"></div>
  237.                             <div class="swiper-button-next"></div>
  238.                         </div>
  239.                     </div>
  240.                 </div>
  241.                 
  242.                 {# Swiper #}
  243.                 <div class="swiper swiper-recommendation w-full relative">
  244.                     <div class="flex h-max swiper-wrapper">
  245.                         {# Slide #}
  246.                         <div class="swiper-slide w-1/2 bg-[#ffffff20] h-max gap-2 p-2 rounded-xl">
  247.                             <div class="flex md:flex-row flex-col gap-2 md:max-h-40 md:w-full">
  248.                                 <div class="h-full md:max-h-40 max-h-28 md:w-40 w-full md:aspect-square overflow-hidden rounded-md">
  249.                                     <img loading="lazy" class="object-cover h-full w-full object-center image-brightness" src="https://cf.bstatic.com/xdata/images/hotel/max1024x768/473421190.jpg?k=4950297f7c929bad1372232ce6f06883bf204cfbeab925a1bb8c1acf2c2f8ac4&o=&hp=1" alt="{% trans %}Jardin avec une piscine{% endtrans %}">
  250.                                 </div>
  251.                                 <a target="_blank" href="https://www.maison-rouge.com/" class="flexcol h-full gap-2 justify-between text-white">
  252.                                     <h4 class="font-openSans font-semibold">
  253.                                         Maison Rouge Strasbourg
  254.                                     </h4>
  255.                                     <p class="text-lg">
  256.                                         4, rue des Francs-Bourgeois, <br> 67000 Strasbourg
  257.                                     </p>
  258.                                     <p class="font-semibold text-white text-lg leading-5">
  259.                                         {% trans %}Offre : Une surprise <br> en chambre{% endtrans %}
  260.                                     </p>
  261.                                 </a>
  262.                             </div>
  263.                         </div>
  264.                         <div class="swiper-slide w-1/2 bg-[#ffffff20] h-max gap-2 p-2 rounded-xl">
  265.                             <div class="flex md:flex-row flex-col gap-2 md:max-h-40 md:w-full">
  266.                                 <div class="h-full md:max-h-40 max-h-28 md:w-40 w-full md:aspect-square overflow-hidden rounded-md">
  267.                                     <img loading="lazy" class="object-cover h-full w-full object-center image-brightness" src="{{asset('vitrine/images/gallery/gite.jpg')}}" alt="{% trans %}Jardin avec une piscine{% endtrans %}">
  268.                                 </div>
  269.                                 <a target="_blank" href="https://www.tripadvisor.fr/Attraction_Review-g187075-d23907673-Reviews-Taaka_Beer_Spa-Strasbourg_Bas_Rhin_Grand_Est.html" class="flexcol h-full gap-2 justify-between text-white">
  270.                                     <h4 class="font-openSans font-semibold">
  271.                                         Gîte des dix vins
  272.                                     </h4>
  273.                                     <p class="text-lg">
  274.                                         5 Rue du village, <br> 67310 Dangolsheim
  275.                                     </p>
  276.                                     <p class="font-semibold text-white text-lg leading-5">
  277.                                         {% trans %}Offre : Une surprise <br> en chambre{% endtrans %}
  278.                                     </p>
  279.                                 </a>
  280.                             </div>
  281.                         </div>
  282.                         <div class="swiper-slide w-1/2 bg-[#ffffff20] h-max gap-2 p-2 rounded-xl">
  283.                             <div class="flex md:flex-row flex-col gap-2 md:max-h-40 md:w-full">
  284.                                 <div class="h-full md:max-h-40 max-h-28 md:w-40 w-full md:aspect-square overflow-hidden rounded-md">
  285.                                     <img loading="lazy" class="object-cover h-full w-full object-center image-brightness" src="https://cf.bstatic.com/xdata/images/hotel/max1024x768/297492310.jpg?k=06a2772b81ef80cc4c667de65b782ffff802267d4218566ae0e7ccb4e788232a&o=&hp=1" alt="{% trans %}Jardin avec une piscine{% endtrans %}">
  286.                                 </div>
  287.                                 <a target="_blank" href="https://terredhelene.com/" class="flexcol h-full gap-2 justify-between text-white">
  288.                                     <h4 class="font-openSans font-semibold">
  289.                                         Gîte Terre d'Helene
  290.                                     </h4>
  291.                                     <p class="text-lg">
  292.                                         25 rue des Prairies, <br> 67370 Berstett
  293.                                     </p>
  294.                                     <p class="font-semibold text-white text-lg leading-5">
  295.                                         {% trans %}Offre : 5% sur le prix du séjour{% endtrans %}
  296.                                     </p>
  297.                                 </a>
  298.                             </div>
  299.                         </div>
  300.                         <div class="swiper-slide w-1/2 bg-[#ffffff20] h-max gap-2 p-2 rounded-xl">
  301.                             <div class="flex md:flex-row flex-col gap-2 md:max-h-40 md:w-full">
  302.                                 <div class="h-full md:max-h-40 max-h-28 md:w-40 w-full md:aspect-square overflow-hidden rounded-md">
  303.                                     <img loading="lazy" class="object-cover h-full w-full object-center image-brightness" src="https://o3-zonehiitstudio.fr/wp-content/uploads/E5A0187.jpg-nggid0549187-ngg0dyn-2433x1622x100-00f0w010c010r110f110r010t010-min-768x512.jpg" alt="{% trans %}Jardin avec une piscine{% endtrans %}">
  304.                                 </div>
  305.                                 <a target="_blank" href="https://o3-zonehiitstudio.fr/" class="flexcol h-full gap-2 justify-between text-white">
  306.                                     <h4 class="font-openSans font-semibold">
  307.                                         O'Zone Hiit Studio
  308.                                     </h4>
  309.                                     <p class="text-lg">
  310.                                         27 boulevard de Nancy, <br> 67000 Strasbourg
  311.                                     </p>
  312.                                     <p class="font-semibold text-white text-lg leading-5">
  313.                                         {% trans %}Offre : -10%{% endtrans %}
  314.                                     </p>
  315.                                 </a>
  316.                             </div>
  317.                         </div>
  318.                     </div>
  319.                 </div>
  320.             </div>
  321.         </section>
  322.         {% include "vitrine/layout/footer.html.twig" %}
  323.     </div>
  324.     <script>
  325.         document.addEventListener('DOMContentLoaded', function() {
  327.             //*** Swiper ***//
  328.             const swiperPartner = new Swiper('.swiper-partner', {
  329.                 spaceBetween: 56,
  330.                 loop: true,
  331.                 speed: 1000,
  332.                 autoplay: {
  333.                     delay: 7000,
  334.                     pauseOnMouseEnter: true,
  335.                 },
  336.                 navigation: {
  337.                     nextEl: ".swiper-button-next",
  338.                     prevEl: ".swiper-button-prev",
  339.                 },
  340.                 breakpoints: {
  341.                     400: {
  342.                         slidesPerView: 1,
  343.                     },
  344.                     810: {
  345.                         slidesPerView: 3,
  346.                     },
  347.                     1160: {
  348.                         slidesPerView: 5,
  349.                     },
  350.                 },
  351.             });
  353.             const swiperValues = new Swiper('.swiper-values', {
  354.                 spaceBetween: 32,
  355.                 loop: true,
  356.                 speed: 1000,
  357.                 autoplay: {
  358.                     delay: 5000,
  359.                     pauseOnMouseEnter: true,
  360.                 },
  361.                 slidesPerView: 1.4,
  362.                 navigation: {
  363.                     nextEl: ".swiper-button-next",
  364.                     prevEl: ".swiper-button-prev",
  365.                 }
  366.             });
  368.             const swiperRecommandation = new Swiper('.swiper-recommendation', {
  369.                 spaceBetween: 16,
  370.                 loop: true,
  371.                 speed: 1000,
  372.                 autoplay: {
  373.                     delay: 5000,
  374.                     pauseOnMouseEnter: true,
  375.                 },
  376.                 breakpoints: {
  377.                     768: {
  378.                         slidesPerView: 1,
  379.                     },
  380.                     1024: {
  381.                         slidesPerView: 2,
  382.                     },
  383.                 },
  384.                 navigation: {
  385.                     nextEl: ".swiper-button-next",
  386.                     prevEl: ".swiper-button-prev",
  387.                 }
  388.             });
  390.             const video = document.getElementById('video');
  391.             const videoPlayer = document.getElementById('videoPlayer');
  392.             const textVideo = document.querySelector('.text-video');
  394.             // Play
  395.             videoPlayer.addEventListener('click', () => {
  396.                 video.play();
  397.                 textVideo.style.display = 'none';
  398.             });
  400.             // Pause
  401.             video.addEventListener('click', () => {
  402.                 video.pause();
  403.                 textVideo.style.display = 'flex';
  404.             });
  405.         });
  406.     </script>
  407. {% endblock %}