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

Open in your IDE?
  1. {% extends 'vitrine/base.html.twig' %}
  3. {% block title %}{% trans %} | 1er spa à la bière de France{% endtrans %}{% endblock %}
  4. {% block description %}{% trans %}Découvrez tout l'univers du spa à la bière{% endtrans %}{% endblock %}
  6. {% block main %}
  7. {# {% include "/vitrine/components/loading/loading.html.twig" %} #}
  9.     <div class="w-full flexcol items-center z-10 relative">
  10.         {# Section Video #}
  11.         <section class="max-w-none relative h-[101vh] overflow-hidden -z-50 p-0">
  12.             <div id="overlay-video" class="w-full h-full inset-0 z-0">
  13.                 <video id="video" class="w-full h-full object-cover" playsinline muted autoplay loop >
  14.                     <source src="{{ asset('vitrine/video-entree.mp4') }}" type="video/mp4">
  15.                 </video>
  16.                 <div class="absolute w-full h-full top-0 left-0 flex justify-center items-end">
  17.                     <div class="min-h-2/5 p-8 mb-3 flex justify-center items-center flex-col gap-4">
  18.                         <div class="flexcol items-center gap-2">
  19.                             <img class="h-28 hero-logo" alt="Logo Taaka" src="{{ asset('vitrine/logo/logo-full-white.png') }}">
  20.                         </div>
  21.                     </div>
  22.                 </div>
  23.                 <div class="w-full flex justify-center flex-col mt-8 gap-8">
  24.                     <div class="hero-btn flex justify-center">
  25.                         <a href="{{ path('reservation_tunnel') }}" class="btnBubbleAnimation block h-11 primary-btn relative border-in-first-btn">
  26.                             {% trans %}RÉSERVER{% endtrans %}
  27.                         </a>
  28.                     </div>
  29.                     <div class="flex w-full justify-center">
  30.                         <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
  31.                             <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 13.5 12 21m0 0-7.5-7.5M12 21V3" />
  32.                         </svg>
  33.                     </div>
  34.                 </div>
  35.             </div>
  36.         </section>
  38.         {# Section A Propos #}
  39.         <section class="flex justify-between flex-wrap-reverse gap-8 text-vitrineWhiteOpacity">
  40.             <div class="flexcol gap-6 md:w-2/5">
  41.                 <div class="flexcol md:items-start items-center w-full font-poppins gap-2 text-white transition duration-300">
  42.                     <span class="text-2xl font-thin tracking-wider">
  43.                         (01)
  44.                     </span>
  45.                     <h1 class="animate-text text-center w-full md:text-left flexcol gap-0 text-3xl">
  46.                         {% trans %}Premier Spa à la bière de France{% endtrans %}
  47.                     </h1>
  48.                 </div>
  49.                 <p class="animate-longtext text-justify md:text-left min-w-72 w-full fade-in">
  50.                     {% trans %}
  51.                     Bienvenue dans notre univers où détente et convivialité se marient dans nos baignoires houblonnées !
  52.                     Imaginez-vous plonger dans une baignoire en bois balnéo où se mêlent houblon, malt et levure
  53.                     de bière, tout en savourant des boissons locales de micro-brasseries.
  54.                     Notre Spa à la bière offre une expérience unique, alliant relaxation et moments privilégiés
  55.                     entre amis ou en famille.<br>
  56.                     <br>
  57.                     Prêt à découvrir une activité  insolite et rare en France ? Vous êtes au bon endroit.
  58.                     {% endtrans %}
  59.                 </p>
  60.             </div>
  61.             <div class="w-full md:w-1/2 flexcol justify-between md:items-start gap-6 mt-16">
  62.                 <h3 class="h-36 md:text-6xl text-4xl">
  63.                     <div class="typewrite font-thin" data-period="2000" 
  64.                         data-type='[ 
  65.                             "{% trans %}Plongez dans{% endtrans %}<br><span class=\"font-bold\">{% trans %}un bain de douceur{% endtrans %}</span>", 
  66.                             "{% trans %}Une expérience{% endtrans %}<br><span class=\"font-bold\">{% trans %}inoubliable en France{% endtrans %}</span>" 
  67.                         ]'
  68.                     >
  69.                         <span class="wrap"></span>
  70.                     </div>
  71.                 </h3>            
  72.                 <div class="hidden md:block">
  73.                     {% include "vitrine/components/white-btn.html.twig" with {'path': path('reservation_tunnel'), 'text': 'RÉSERVER'} %}
  74.                 </div>
  75.             </div>
  76.         </section>
  78.         {# Section Avis #}
  79.         <section class="flex justify-between gap-4 text-vitrineWhiteOpacity">
  80.             <div class="flexcol w-full gap-6">
  81.                 <div class="flexcol md:items-start items-center md:w-max w-full font-poppins gap-2 text-white transition duration-300">
  82.                     <h2 class="animate-text text-center md:text-left flexcol gap-0">
  83.                         <span class="text-2xl font-thin tracking-wider">
  84.                             (02)
  85.                         </span>
  86.                         {% trans %}Vous en parlez mieux que nous !{% endtrans %}
  87.                     </h2>
  88.                 </div>
  89.                 <div class="animateBubble bg-vitrineOrange w-full flex items-center justify-center md:flex-nowrap flex-wrap gap-10 md:p-12 p-4 md:pb-12 pb-20 relative">
  90.                     <div class="md:h-max h-52">
  91.                         <img loading="lazy" class="md:h-max h-52 w-full md:min-w-[190px]" src="{{asset('vitrine/logo/tripadvisor.svg')}}" alt="{% trans %}Tripadvisor logo{% endtrans %}">
  92.                     </div>
  93.                     {# Swiper #}
  94.                     <div class="swiper swiper-advice relative">
  95.                         <div class="flex h-max swiper-wrapper">
  96.                             {% for review in reviews %}
  97.                                 <div class="swiper-slide bg-[#ffffff20] h-full min-w-[220px] w-1/2 gap-2 p-2 rounded-xl">
  98.                                     <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">
  99.                                         <div class="flexcol gap-2 text-white">
  100.                                             <div class="flex items-center gap-4">
  101.                                                 <img loading="lazy" class="rounded-full w-8 h-8 object-cover" src="{{ review.image }}" alt="">
  102.                                                 <h6 class="font-openSans font-semibold">{{ review.name }}</h6>
  103.                                                 <div class="flex items-center gap-1">
  104.                                                     <div class="bg-white h-4 w-4 rounded-full"></div>
  105.                                                     <div class="bg-white h-4 w-4 rounded-full"></div>
  106.                                                     <div class="bg-white h-4 w-4 rounded-full"></div>
  107.                                                     <div class="bg-white h-4 w-4 rounded-full"></div>
  108.                                                     <div class="bg-white h-4 w-4 rounded-full"></div>
  109.                                                 </div>
  110.                                             </div>
  111.                                             <p class="text-white text-base">
  112.                                                 {% if review.comment|length > 120 %}
  113.                                                     {{ review.comment[:120] ~ '...' }} <span class="font font-bold">{% trans %}Lire la suite{% endtrans %}</span>
  114.                                                 {% else %}
  115.                                                     {{ review.comment }}
  116.                                                 {% endif %}
  117.                                             </p>
  118.                                         </div>
  119.                                         <p class="text-sm">{% trans %}Source{% endtrans %} : tripadvisor</p>
  120.                                     </a>
  121.                                 </div>
  122.                             {% endfor %}
  123.                         </div>
  124.                     </div>
  125.                     {# Boutons Swiper #}
  126.                     <div class="white-swiper-btn flex gap-4 flex-row-reverse absolute md:left-[55%] left-1/2 md:-translate-x-0 -translate-x-1/2  bottom-10 w-28">
  127.                         <div class="swiper-button-prev"></div>
  128.                         <div class="swiper-button-next"></div>
  129.                     </div>
  130.                 </div>
  131.             </div>
  132.         </section>
  134.         {# Section Image 1er spa #}
  135.         <section>
  136.             <div class="flexcol ">
  137.                 <div class="w-full flex justify-center">
  138.                     <hr class="border border-white horizontal-hr">
  139.                 </div>
  140.                 <div class="relative w-full h-max">
  141.                     <img loading="lazy" class="w-full h-48 object-cover" src="{{asset('vitrine/images/bandeau.jpg')}}" alt="{% trans %}Personnes dans un bain avec des bières{% endtrans %}">
  142.                     <div class="absolute top-0 w-full h-full flexcol justify-center items-center">
  143.                         <h2 class="md:text-4xl text-center w-full text-3xl text-wrap">
  144.                             {% trans %}1er Spa à la bière de France{% endtrans %}
  145.                         </h2>
  146.                         <span class="md:text-5xl text-2xl font-extralight">
  147.                         - {% trans %}Depuis 2022{% endtrans %} -
  148.                         </span>
  149.                     </div>
  150.                 </div>
  151.             </div>
  152.         </section>
  154.         {# Section Offres #}
  155.         <section class="flexcol justify-between gap-20 text-vitrineWhiteOpacity">
  156.             <div class="flex gap-4 w-full flex-wrap justify-between">
  157.                 <div class="flexcol flex-1 w-1/2 gap-6">
  158.                     <div class="flexcol md:items-start items-center md:w-max w-full font-poppins gap-2 text-white transition duration-300">
  159.                         <h2 class="animate-text text-center md:text-left flexcol gap-0 max-w-md">
  160.                             <span class="text-2xl font-thin tracking-wider">
  161.                                 (03)
  162.                             </span>
  163.                             {% trans %}Découvrez notre parcours en 3 étapes{% endtrans %}
  164.                         </h2>
  165.                     </div>
  166.                 </div>
  167.                 <div class="flexcol gap-6 hidden md:block w-max">
  168.                     <p class="mb-8 min-w-[240px] max-w-lg w-full">
  169.                         {% trans %}
  170.                             Dans chaque espace, vous serez exclusivement avec la ou les personnes avec lesquelles vous avez effectué la réservation.
  171.                             Nos baignoires sont positionnées côte à côte dans la même pièce et conçues pour accueillir confortablement 2 personnes.
  172.                         {% endtrans %}
  173.                     </p>
  174.                 </div>
  175.             </div>
  176.             <div class="flex flex-col md:flex-row items-center justify-between md:gap-4 gap-8">
  177.                 {# Etape 1 #}
  178.                 <div class="flexcol items-center text-white hover:text-vitrineOrange transition duration-300">
  179.                     <div class="h-[446px] rounded-t-full overflow-hidden relative">
  180.                         <img loading="lazy" class="w-full hover:scale-100 scale-110 transition duration-300 h-full object-cover max-w-xs mb-4 illustration-fade-in image-brightness" src="{{asset('vitrine/images/global/home/alcove-1.jpg')}}" alt="{% trans %}Image d'un sauna avec une femme dedans{% endtrans %}">
  181.                         <div class="absolute md:opacity-0 md:hover:opacity-100 transition duration-200 w-full h-full top-0 left-0 bg-vitrineOrangeOpacity flexcol gap-4 justify-center text-center p-8 z-20">
  182.                             <p class="text-white">
  183.                                 {% trans %}
  184.                                 15 minutes de sauna permettent une <strong>détente optimale</strong> et de préparer votre corps à profiter pleinement <strong>des bienfaits</strong> du bain.
  185.                                 {% endtrans %}
  186.                             </p>
  187.                         </div>
  188.                     </div>
  189.                     <div class="flexcol items-center gap-0">
  190.                         <h3 class="text-2xl font-normal text-center">
  191.                             {% trans %}SAUNA{% endtrans %}
  192.                         </h3>
  193.                         <span>
  194.                             {% trans %}étape 1{% endtrans %}
  195.                         </span>
  196.                     </div>
  197.                 </div>
  198.                 {# Etape 2 #}
  199.                 <div class="flexcol items-center text-white hover:text-vitrineOrange transition duration-300">
  200.                     <div class="h-[446px] rounded-t-full overflow-hidden relative">
  201.                         <img loading="lazy" class="w-full hover:scale-100 scale-110 transition duration-300 h-full object-cover max-w-xs mb-4 illustration-fade-in image-brightness" src="{{asset('vitrine/images/global/home/alcove-2.jpg')}}" alt="{% trans %}Image d'un bain de bière avec une femme dedans et une bière posée sur une planche centrale{% endtrans %}">
  202.                         <div class="absolute md:opacity-0 md:hover:opacity-100 transition duration-200 w-full h-full top-0 left-0 bg-vitrineOrangeOpacity flexcol gap-4 justify-center text-center p-8 z-20">
  203.                             <p class="text-white">
  204.                                 {% trans %}
  205.                                     Plongez dans nos baignoires de bois, imprégnées d'ingrédients <strong>entièrement naturels</strong> utilisés pour brasser la bière, tout en savourant des boissons issues de <strong>micro-brasseries locales</strong> !
  206.                                 {% endtrans %}
  207.                             </p>
  208.                         </div>
  209.                     </div>
  210.                     <div class="flexcol items-center gap-0">
  211.                         <h3 class="text-2xl font-normal text-center">
  212.                             {% trans %}BAIN{% endtrans %}
  213.                         </h3>
  214.                         <span>
  215.                             {% trans %}étape 2{% endtrans %}
  216.                         </span>
  217.                     </div>
  218.                 </div>
  219.                 {# Etape 3 #}
  220.                 <div class="flexcol items-center text-white hover:text-vitrineOrange transition duration-300">
  221.                     <div class="h-[446px] rounded-t-full overflow-hidden relative">
  222.                         <img loading="lazy" class="w-full hover:scale-100 scale-110 transition duration-300 h-full object-cover max-w-xs mb-4 illustration-fade-in image-brightness" src="{{asset('vitrine/images/global/home/alcove-3.jpg')}}" alt="{% trans %}Image d'une femme et d'un homme se reposant avec un masque sur le visage{% endtrans %}">
  223.                         <div class="absolute md:opacity-0 md:hover:opacity-100 transition duration-200 w-full h-full top-0 left-0 bg-vitrineOrangeOpacity flexcol gap-4 justify-center text-center p-8 z-20">
  224.                             <p class="text-white">
  225.                                 {% trans %}
  226.                                     Le parcours se conclut par 15 minutes de relaxation, idéales pour <strong>imprégner en douceur les bienfaits</strong> de notre bain houblonné.
  227.                                 {% endtrans %}
  228.                             </p>
  229.                         </div>
  230.                     </div>
  231.                     <div class="flexcol items-center gap-0">
  232.                         <h3 class="text-2xl font-normal text-center">
  233.                             {% trans %}RELAXATION{% endtrans %}
  234.                         </h3>
  235.                         <span>
  236.                             {% trans %}étape 3{% endtrans %}
  237.                         </span>
  238.                     </div>
  239.                 </div>
  240.             </div>
  241.         </section>
  243.         {# Section Offres #}
  244.         <section id="offres" class="pt-24">
  245.             <div class="flexcol gap-8">
  246.                 <div class="flexcol flex-1 w-full gap-6">
  247.                     <div class="flexcol md:items-start items-center md:w-max w-full font-poppins gap-2 text-white transition duration-300">
  248.                         <h2 class="animate-text text-center md:text-left flexcol gap-0 w-full">
  249.                             <span class="text-2xl font-thin tracking-wider">
  250.                                 (04)
  251.                             </span>
  252.                             {% trans %}Nos offres{% endtrans %}
  253.                         </h2>
  254.                     </div>
  255.                 </div>
  256.                 <div class="font-poppins flex flex-col md:flex-row gap-20 w-full justify-between mt-8">
  257.                     {# La bulle #}
  258.                     <div class="flexcol items-center gap-14 h-full">
  259.                         <div class="relative">
  260.                             <img loading="lazy" src="{{asset('vitrine/images/labulle.svg')}}" class="h-60 w-auto illustration-fade-in" alt="{% trans %}illustration fait main d'un homme et d'une femme dans un bain{% endtrans %}">
  261.                             <div class="h-28 w-auto absolute -bottom-12 left-1/2 -translate-x-1/2">
  262.                                 <h3 class="flexcol gap-0 mt-3">
  263.                                     <span class="font-bold text-5xl font-poppins leading-10">la</span>
  264.                                     <span class="font-bold text-5xl ml-[33px] font-poppins leading-10">bulle</span>
  265.                                 </h3>
  266.                             </div>
  267.                             <div class="bubble-wrapper absolute top-0 left-0 w-full h-full">
  268.                                 <img loading="lazy" src="{{asset('vitrine/images/bulles/moyenne-bulle.svg')}}" class="bubble opacity-0 absolute -top-3 right-7" alt="{% trans %}bulle qui flotte{% endtrans %}">
  269.                                 <img loading="lazy" src="{{asset('vitrine/images/bulles/grande-bulle.svg')}}" class="bubble opacity-0 absolute top-8 -right-8" alt="{% trans %}bulle qui flotte{% endtrans %}">
  270.                             </div>
  271.                         </div>
  273.                         <div class="flexcol flex-1 items-center w-full">
  274.                             <p class="text-center text-base font-medium h-16 flex flex-col justify-center my-4">
  275.                                 {% trans %}À partir de{% endtrans %} <br>
  276.                                 <span class="font-bold text-5xl text-white">60€</span>
  277.                                 {% trans %}En solo{% endtrans %} <br>
  278.                             </p>
  279.                             <hr class="border border-white w-full max-w-sm">
  280.                             <div class="flexcol gap-4 text-vitrineWhiteOpacity max-w-sm w-full">
  281.                                 <div class="flex gap-4 justify-between w-full">
  282.                                     <p>
  283.                                         {% trans %}Sauna{% endtrans %}
  284.                                     </p>
  285.                                     <p class="text-white font-semibold">
  286.                                         15min
  287.                                     </p>
  288.                                 </div>
  289.                                 <div class="flex gap-4 justify-between w-full">
  290.                                     <p>
  291.                                         {% trans %}Bain{% endtrans %}
  292.                                     </p>
  293.                                     <p class="text-white font-semibold">
  294.                                         30min
  295.                                     </p>
  296.                                 </div>
  297.                                 <div class="flex gap-4 justify-between w-full">
  298.                                     <p>
  299.                                         {% trans %}Relaxation{% endtrans %}
  300.                                     </p>
  301.                                     <p class="text-white font-semibold">
  302.                                         15min
  303.                                     </p> 
  304.                                 </div>
  305.                                 <a href="{{ path('reservation_tunnel') }}" class="btnBubbleAnimation text-center w-full primary-btn relative fade-in h-max">
  306.                                     {% trans %}CHOISIR{% endtrans %}
  307.                                 </a>
  308.                             </div>
  309.                         </div>
  310.                     </div>
  311.                     
  312.                     {# Grande bulle #}
  313.                     <div class="flexcol items-center gap-14 h-full">
  314.                         <div class="relative">
  315.                             <img loading="lazy" src="{{asset('vitrine/images/grandebulle.svg')}}" class="h-60 w-auto illustration-fade-in" alt="{% trans %}illustration fait main d'un homme et d'une femme dans un bain{% endtrans %}">
  316.                             <div class="h-28 w-auto absolute -bottom-12 left-1/2 -translate-x-1/2 z-30">
  317.                                 <h3 class="flexcol gap-0 mt-3">
  318.                                     <span class="font-bold text-5xl font-poppins mr-14 leading-10">grande</span>
  319.                                     <span class="font-bold text-5xl ml-[136px] font-poppins leading-10">bulle</span>
  320.                                 </h3>
  321.                             </div> 
  322.                             <div class="bubble-wrapper absolute top-0 left-0 w-full h-full">
  323.                                 <img loading="lazy" src="{{asset('vitrine/images/bulles/moyenne-bulle.svg')}}" class="bubble opacity-0 absolute -top-6 left-16" alt="{% trans %}bulle qui flotte{% endtrans %}">
  324.                                 <img loading="lazy" src="{{asset('vitrine/images/bulles/grande-bulle.svg')}}" class="bubble opacity-0 absolute -bottom-3 right-3" alt="{% trans %}bulle qui flotte{% endtrans %}">
  325.                             </div>
  326.                         </div>
  328.                         <div class="flexcol flex-1 items-center w-full">
  329.                             <p class="text-center text-base font-medium h-16 flex flex-col justify-center my-4">
  330.                                 {% trans %}À partir de{% endtrans %} <br>
  331.                                 <span class="font-bold text-5xl text-white">90€</span>
  332.                                 {% trans %}En solo{% endtrans %}
  333.                             </p>
  334.                             <hr class="border border-white w-full max-w-sm">
  335.                             <div class="flexcol gap-4 text-vitrineWhiteOpacity max-w-sm w-full">
  336.                                 <div class="flex gap-4 justify-between w-full">
  337.                                     <p>
  338.                                         {% trans %}Sauna{% endtrans %}
  339.                                     </p>
  340.                                     <p class="text-white font-semibold">
  341.                                         15min
  342.                                     </p>
  343.                                 </div>
  344.                                 <div class="flex gap-4 justify-between w-full">
  345.                                     <p>
  346.                                         {% trans %}Bain{% endtrans %}
  347.                                     </p>
  348.                                     <p class="text-white font-semibold">
  349.                                         60min
  350.                                     </p>
  351.                                 </div>
  352.                                 <div class="flex gap-4 justify-between w-full">
  353.                                     <p>
  354.                                         {% trans %}Relaxation{% endtrans %}
  355.                                     </p>
  356.                                     <p class="text-white font-semibold">
  357.                                         15min
  358.                                     </p> 
  359.                                 </div>
  360.                                 <a href="{{ path('reservation_tunnel') }}" class="btnBubbleAnimation text-center w-full primary-btn relative fade-in h-max">
  361.                                     {% trans %}CHOISIR{% endtrans %}
  362.                                 </a>
  363.                             </div>
  364.                         </div>
  365.                     </div>
  366.                     
  367.                     {# L'effervescence #}
  368.                     <div class="flexcol items-center gap-14">
  369.                         <div class="relative">
  370.                             <img loading="lazy" src="{{asset('vitrine/images/effervescence.svg')}}" class="h-60 w-auto illustration-fade-in" alt="{% trans %}illustration fait main d'un groupe d'amis dans une salle avec plusieurs bains{% endtrans %}">
  371.                             <div class="h-28 w-auto absolute -bottom-12 left-1/2 -translate-x-1/2 z-30">
  372.                                 <h3 class="flexcol gap-0 mt-3">
  373.                                     <span class="font-bold text-5xl font-poppins mr-14 leading-10">l'éfferve-</span>
  374.                                     <span class="font-bold text-5xl ml-[100px] font-poppins leading-10">scence</span>
  375.                                 </h3>
  376.                             </div> 
  377.                             <div class="bubble-wrapper absolute top-0 left-0 w-full h-full">
  378.                                 <img loading="lazy" src="{{asset('vitrine/images/bulles/moyenne-bulle.svg')}}" class="bubble opacity-0 absolute top-11 -left-1" alt="{% trans %}bulle qui flotte{% endtrans %}">
  379.                                 <img loading="lazy" src="{{asset('vitrine/images/bulles/grande-bulle.svg')}}" class="bubble opacity-0 absolute -top-8 left-12" alt="{% trans %}bulle qui flotte{% endtrans %}">
  380.                             </div>
  381.                         </div>
  383.                         <div class="flexcol justify-end flex-1 items-center w-full h-full">
  384.                             <p class="text-center text-base font-medium  flex flex-col pb-2">
  385.                                 {% trans %}Demande{% endtrans %} <br>
  386.                                 <span class="font-bold text-5xl text-white">{% trans %}sur devis{% endtrans %}</span>
  387.                             </p>
  388.                             <hr class="border border-white w-full max-w-sm">
  389.                             <div class="flexcol justify-between gap-4 text-vitrineWhiteOpacity max-w-sm w-full h-[164px]">
  390.                                 <div class="flexcol gap-4 text-vitrineWhiteOpacity max-w-sm w-full">
  391.                                     <div class="flex gap-4 justify-between w-full">
  392.                                         <p>
  393.                                             {% trans %}Privatisation totale{% endtrans %}
  394.                                         </p>
  395.                                         <p class="text-white font-semibold">
  396.                                             2h {% trans %}ou{% endtrans %} 3h
  397.                                         </p>
  398.                                     </div>
  399.                                     <div class="flex gap-4 justify-between w-full">
  400.                                         <p>
  401.                                             {% trans %}Nombre de personnes{% endtrans %}
  402.                                         </p>
  403.                                         <p class="text-white font-semibold">
  404.                                             4 {% trans %}à{% endtrans %} 16
  405.                                         </p>
  406.                                     </div>
  407.                                 </div>
  408.                                 <a href="{{ path('privatisation_tunnel') }}" class="btnBubbleAnimation text-center w-full primary-btn relative fade-in h-max">
  409.                                     {% trans %}DEMANDER UN DEVIS{% endtrans %}
  410.                                 </a>
  411.                             </div>
  412.                         </div>
  413.                     </div>
  414.                 </div>
  415.             </div>
  416.         </section>
  418.         {# Section Bienfaits #}
  419.         <section class="flexcol gap-20">
  420.             <div class="flex md:flex-row flex-col md:items-end gap-6 w-full h-max">
  421.                 <div class="flexcol flex-1 md:items-start items-center md:w-max w-full font-poppins gap-2 text-white transition duration-300">
  422.                     <h2 class="animate-text text-center md:text-left flexcol gap-0">
  423.                         <span class="text-2xl font-thin tracking-wider">
  424.                             (05)
  425.                         </span>
  426.                         {% trans %}Bienfaits{% endtrans %}
  427.                     </h2>
  428.                     <p class="mt-4 w-full md:max-w-sm md:text-left text-center">
  429.                         {% trans %}
  430.                         Le bouillonnement continu du bain favorise la dissolution des ingrédients, libérant ainsi des <b>vitamines</b>, <b>glucides</b> et <b>protéines</b>.
  431.                         {% endtrans %}
  432.                     </p>
  433.                 </div>
  434.                 <div class="h-full flex-1 flex justify-center items-end">
  435.                     {% include "vitrine/components/white-btn.html.twig" with {'path': path('faq'), 'text': 'Foire Aux Questions'} %}
  436.                 </div>
  437.             </div>
  438.             <div class="md:accordion flex flex-col md:flex-row gap-4 w-full">
  439.                 <div class="aspect-square h-96 overflow-hidden transition duration-1000 relative">
  440.                     <img loading="lazy" class="w-full h-full object-cover  image-brightness" src="{{asset('vitrine/images/global/home/houblon.jpg')}}" alt="{% trans %}Image de houblon{% endtrans %}">
  441.                     <div class="absolute md:opacity-0 md:hover:opacity-100 transition duration-200 w-full h-full top-0 left-0 bg-vitrineOrangeOpacity flexcol gap-4 justify-center items-center text-center p-4 z-20">
  442.                         <h3 class="text-2xl font-semibold text-white text-center w-full">
  443.                             {% trans %}Houblon{% endtrans %}
  444.                         </h3>
  445.                         <p class="text-white max-w-xs">
  446.                             {% trans %}
  447.                             Le houblon a des propriétés antiseptiques et bactéricides naturelles qui contribuent à nettoyer, adoucir et assouplir la peau. De plus, étant issu de la famille des Cannabinacées, il offre une sensation de bien-être qui se diffuse dans tout votre corps.
  448.                             {% endtrans %}
  449.                         </p>
  450.                     </div>
  451.                 </div>
  452.                 <div class="aspect-square h-96 overflow-hidden relative">
  453.                     <img loading="lazy" class="w-full h-full object-cover  image-brightness" src="{{asset('vitrine/images/global/home/malt.jpg')}}" alt="{% trans %}Image de grains{% endtrans %}">
  454.                     <div class="absolute md:opacity-0 md:hover:opacity-100 transition duration-200 w-full h-full top-0 left-0 bg-vitrineOrangeOpacity flexcol gap-4 justify-center items-center text-center p-4 z-20">
  455.                         <h3 class="text-2xl font-semibold text-white text-center w-full">
  456.                             {% trans %}Malt{% endtrans %}
  457.                         </h3>
  458.                         <p class="text-white max-w-xs">
  459.                             {% trans %}
  460.                             Le malt est riche en antioxydants, contribuant à améliorer la texture de la peau, la rendant à la fois plus tonique et plus nette.
  461.                             {% endtrans %}
  462.                         </p>
  463.                     </div>
  464.                 </div>
  465.                 <div class="aspect-square h-96 overflow-hidden relative">
  466.                     <img loading="lazy" class="w-full h-full object-cover  image-brightness" src="{{asset('vitrine/images/global/home/levure.jpg')}}" alt="{% trans %}Image de levure{% endtrans %}">
  467.                     <div class="absolute md:opacity-0 md:hover:opacity-100 transition duration-200 w-full h-full top-0 left-0 bg-vitrineOrangeOpacity flexcol gap-4 justify-center items-center text-center p-4 z-20">
  468.                         <h3 class="text-2xl font-semibold text-white text-center w-full">
  469.                             {% trans %}Levure{% endtrans %}
  470.                         </h3>
  471.                         <p class="text-white max-w-xs">
  472.                             {% trans %}
  473.                             La levure de bière regorge de vitamines, constituant un véritable concentré de beauté pour vos cheveux, ongles et peau.
  474.                             {% endtrans %}
  475.                         </p>
  476.                     </div>
  477.                 </div>
  478.             </div>
  479.         </section>
  481.         {# Informations #}
  482.         <section id="informations" class="flexcol gap-10">
  483.             <h2 class="animate-text text-center md:text-left flexcol gap-0">
  484.                 <span class="text-2xl font-thin tracking-wider">
  485.                     (06)
  486.                 </span>
  487.                 {% trans %}Où nous trouver ?{% endtrans %}
  488.             </h2>
  489.             <div class="flex flex-col md:flex-row gap-4">
  490.                 <div class="flex-1 border-in p-10">
  491.                     <h4 class="text-base mb-4">
  492.                         {% trans %}Localisation{% endtrans %}
  493.                     </h4>
  494.                     <div class="flexcol">
  495.                         <div class="flexcol gap-1">
  496.                             <h5 class="text-2xl text-vitrineOrange">
  497.                                 {% trans %}Adresse{% endtrans %}
  498.                             </h5>
  499.                             <a href="https://www.google.com/maps/place/Taaka+Beer+Spa/@48.5851755,7.7449667,17z/data=!3m1!4b1!4m6!3m5!1s0x4796c96b36e3dfe9:0xbac2808dce45d639!8m2!3d48.5851755!4d7.7449667!16s%2Fg%2F11pcvh7hxz?entry=ttu&g_ep=EgoyMDI0MDkxMS4wIKXMDSoASAFQAw%3D%3D" target="_blank" class="z-20 clickable">
  500.                                 6 rue Marbach, <br>
  501.                                 67000 Strasbourg
  502.                             </a>
  503.                         </div>
  504.                         <div class="flexcol gap-1">
  505.                             <h5 class="text-2xl text-vitrineOrange">
  506.                                 {% trans %}Téléphone{% endtrans %}
  507.                             </h5>
  508.                             <a href="tel:+33388965434" class="z-20 clickable">
  509.                                 +33 3 88 96 54 34
  510.                             </a>
  511.                         </div>
  512.                         <div class="flexcol gap-1">
  513.                             <h5 class="text-2xl text-vitrineOrange">
  514.                                 {% trans %}Email{% endtrans %}
  515.                             </h5>
  516.                             <a href="mailto:contact@taakabeerspa.com" class="z-20 clickable">
  517.                                 contact@taakabeerspa.com
  518.                             </a>
  519.                         </div>
  520.                     </div>
  521.                 </div>
  522.                 <div class="flex-1 border-in p-10 animateBubble">
  523.                     <h4 class="text-base mb-4">
  524.                         {% trans %}Venez nous voir{% endtrans %}
  525.                     </h4>
  526.                     <div class="flexcol">
  527.                         <h5 class="text-2xl text-vitrineOrange">
  528.                             {% trans %}Horaires{% endtrans %}
  529.                         </h5>
  530.                         <div class="w-full flexcol gap-8">
  531.                             <div class="flex items-center gap-2 w-full font-semibold">
  532.                                 <p class="whitespace-nowrap text-white">
  533.                                     {% trans %}Lundi{% endtrans %}
  534.                                 </p>
  535.                                 <hr class="border border-t-0 border-vitrineWhiteOpacity w-full">
  536.                                 <p class="whitespace-nowrap text-white">
  537.                                     11h - 21h30
  538.                                 </p>
  539.                             </div>
  540.                             <div class="flex items-center gap-2 w-full font-semibold">
  541.                                 <p class="whitespace-nowrap text-white">
  542.                                     {% trans %}Mardi{% endtrans %}
  543.                                 </p>
  544.                                 <hr class="border border-t-0 border-vitrineWhiteOpacity w-full">
  545.                                 <p class="whitespace-nowrap text-vitrineOrange">
  546.                                     {% trans %}Fermé{% endtrans %}
  547.                                 </p>
  548.                             </div>
  549.                             <div class="flex items-center gap-2 w-full font-semibold">
  550.                                 <p class="whitespace-nowrap text-white">
  551.                                     {% trans %}Mercredi, Jeudi{% endtrans %}
  552.                                 </p>
  553.                                 <hr class="border border-t-0 border-vitrineWhiteOpacity w-full">
  554.                                 <p class="whitespace-nowrap text-white">
  555.                                     11h - 21h30
  556.                                 </p>
  557.                             </div>
  558.                             <div class="flex items-center gap-2 w-full font-semibold">
  559.                                 <p class="sm:whitespace-nowrap text-white flex-1">
  560.                                     {% trans %}Vendredi, Samedi, Dimanche{% endtrans %}
  561.                                 </p>
  562.                                 <hr class="border border-t-0 border-vitrineWhiteOpacity w-full">
  563.                                 <p class="whitespace-nowrap text-white">
  564.                                     11h - 21h30
  565.                                 </p>
  566.                             </div>
  567.                         </div>
  568.                     </div>
  569.                 </div>
  570.             </div>
  571.         </section>
  573.         {% include "vitrine/layout/footer.html.twig" %}
  574.     </div>
  575. <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
  576. <script type="module">
  577.     import { initTypewriter } from '../../../js/vitrine/main.js';
  579.     document.addEventListener('DOMContentLoaded', function () {
  581.         //*** Typewriter ***//
  582.         initTypewriter();
  584.         //*** Swiper ***//
  585.         const swiper = new Swiper('.swiper', {
  586.             spaceBetween: 10,
  587.             loop: true,
  588.             speed: 1000,
  589.             autoplay: {
  590.                 delay: 5000,
  591.                 pauseOnMouseEnter: true,
  592.             },
  593.             navigation: {
  594.                 nextEl: ".swiper-button-next",
  595.                 prevEl: ".swiper-button-prev",
  596.             },
  597.             breakpoints: {
  598.                 768: {
  599.                     slidesPerView: 1,
  600.                 },
  601.                 1024: {
  602.                     slidesPerView: 2,
  603.                 },
  604.             },
  605.         });
  606.     });
  607. </script>
  608. {% endblock %}