{# templates/faq/index.html.twig #}{% extends 'vitrine/base.html.twig' %}{% import 'vitrine/macros/svg_illustration_macros.twig' as svg %}{% block title %}{% trans %}Contact{% endtrans %}{% endblock %}{% block description %}{% trans %}Découvrez tout l'univers du spa à la bière{% endtrans %}{% endblock %}{% block stylesheets %} {{ parent() }} <link href="https://api.mapbox.com/mapbox-gl-js/v3.5.1/mapbox-gl.css" rel="stylesheet">{% endblock %}{% block javascripts %} {{ parent() }} <script src="https://api.mapbox.com/mapbox-gl-js/v3.5.1/mapbox-gl.js"></script>{% endblock %}{% block main %}{# Section Video #} <section class="max-w-none relative h-max pt-28 overflow-hidden -z-50"> <div class="w-full h-[70vh] md:top-28 top-24 inset-0 z-0"> <img loading="lazy" src="{{asset('/vitrine/images/contact-hero.jpg')}}" alt="{% trans %}Planche de charcuterie{% endtrans %}" class="w-full h-full object-cover"> <div class="absolute w-full h-full top-0 pt-28 left-0 flex justify-center items-end"> <div class="h-full p-4 mb-3 flex justify-center items-center flex-col gap-4"> <h1 class="font-light font-openSans text-4xl md:text-7xl text-white text-center"> {% trans %}Contact{% endtrans %} </h1> <hr class="border-t border-vitrineWhiteOpacity w-6"> <p class="font-semibold text-4xl md:text-7xl text-white text-wrap w-full text-center"> {% trans %}L'ÉQUIPE VOUS RÉPOND{% endtrans %} </p> </div> </div> </div> </section> <div class="w-full overflow-hidden flexcol gap-0 items-center z-10 relative "> {# Section Contact et Accès #} <section class="flexcol gap-20 md:mt-0 mt-8"> <div class="flexcol gap-10"> <h2> {% trans %}Contact & Accès{% endtrans %} </h2> <div class="flex flex-col md:flex-row gap-10 "> <div class="flex-1 flexcol gap-4"> <p> {% trans %}10 minutes à pied de la gare et à 2h30 de Paris en TGV{% endtrans %} </p> <p> +33 3 88 96 54 34 </p> <p> contact@taakabeerspa.com </p> <div class="flex gap-2"> <a href="https://www.facebook.com/taakabeerspa" target="_blank" class="bg-vitrineOrange p-2 rounded-full"> <img class="w-6" src="{{asset('vitrine/icon/facebook-icon.svg')}}" alt="{% trans %}logo facebook{% endtrans %}"> </a> <a href="https://www.tripadvisor.fr/Attraction_Review-g187075-d23907673-Reviews-Taaka_Beer_Spa-Strasbourg_Bas_Rhin_Grand_Est.html" target="_blank" class="bg-vitrineOrange p-2 rounded-full"> <img class="w-6" src="{{asset('vitrine/icon/tripadvisor-icon.svg')}}" alt="{% trans %}logo tripadvisor{% endtrans %}"> </a> <a href="https://www.instagram.com/taakabeerspa/" target="_blank" class="bg-vitrineOrange p-2 rounded-full"> <img class="w-6" src="{{asset('vitrine/icon/instagram-icon.svg')}}" alt="{% trans %}logo instagram{% endtrans %}"> </a> </div> <p> {% trans %}Si vous n’avez pas de réponse dans les 24h, vérifiez attentivement votre boîte Mail y compris le dossier spam.{% endtrans %} </p> </div> <div class="w-full flex justify-center md:hidden "> <hr class="border-r border-white h-auto w-auto horizontal-hr"> </div> <hr class="border-r hidden md:flex border-white h-auto w-auto"> <div class="flex-1"> <form action="{{path('contact_form')}}" method="post" class="flexcol gap-8"> <div class="flex gap-8"> <div class="flex-1 flexcol gap-8 w-full"> <input name="name" class="bg-vitrineBlackOpacity border-none outline-none focus:outline-none px-4 py-4 w-full" type="text" placeholder="{% trans %}Prénom, Nom{% endtrans %}" required> <input name="email" class="bg-vitrineBlackOpacity border-none outline-none focus:outline-none px-4 py-4 w-full" type="text" placeholder="{% trans %}Email{% endtrans %}" required> </div> <div class="flex-1 flexcol gap-8 w-full"> <input name="phone" class="bg-vitrineBlackOpacity border-none outline-none focus:outline-none px-4 py-4 w-full" type="text" placeholder="{% trans %}Téléphone{% endtrans %}" required> <input name="city" class="bg-vitrineBlackOpacity border-none outline-none focus:outline-none px-4 py-4 w-full" type="text" placeholder="{% trans %}Ville, Code postal{% endtrans %}" required> </div> </div> <textarea name="message" class="bg-vitrineBlackOpacity border-none outline-none focus:outline-none px-4 py-4 w-full" placeholder="{% trans %}Votre message{% endtrans %}" style="resize: none;" required></textarea> <div class="h-captcha" data-sitekey="{{siteKeyHcaptcha}}"></div> <input type="hidden" name="_token" value="{{ csrf_token('contact_form') }}"> <button type="submit" class="bg-vitrineOrange px-12 py-3 font-semibold text-sm w-max hover:opacity-100 hover:bg-white hover:text-vitrineOrange relative fade-in"> {% trans %}Envoyer{% endtrans %} </button> </form> </div> </div> </div> <div id="map" class="w-full h-96"></div> </section> <section> <div class="flexcol gap-8"> <div class="w-full flex justify-center"> <hr class="border-t border-white horizontal-hr"> </div> <div class="relative w-full h-max"> <img loading="lazy" class="w-full h-48 object-cover" src="{{asset('vitrine/images/contact-bandeau.jpg')}}" alt="{% trans %}Personnes dans un bain avec des bières{% endtrans %}"> <div class="absolute top-0 w-full h-full flexcol justify-center items-center"> <h2 class="md:text-4xl font-thin text-center w-full text-3xl text-wrap"> - {% trans %}Accès{% endtrans %} - </h2> <span class="md:text-5xl text-2xl font-semibold"> {% trans %}Comment nous rejoindre{% endtrans %} </span> </div> </div> <div class="flex flex-col md:flex-row gap-10"> <div class="flex-1 flexcol items-center text-center"> <h3 class="text-vitrineOrange"> {% trans %}Transport en commun{% endtrans %} </h3> <ul class="flexcol justify-center"> <li> <h4 class="font-normal"> {% trans %}TRAMWAY{% endtrans %} </h4> <p> {% trans %}Station{% endtrans %} Homme de Fer <br> {% trans %}3min à pied{% endtrans %} </p> </li> <li> <h4 class="font-normal"> {% trans %}BUS{% endtrans %} </h4> <p> {% trans %}Lignes{% endtrans %} N1, L3, L6 <br> Les Halles - Pont de Paris {% trans %}(3min à pied){% endtrans %} </p> </li> <li> <p> {% trans %}Lignes{% endtrans %} 41, 71, 75, 76 <br> Les Halles Sébastopole {% trans %}(4min à pied){% endtrans %} </p> </li> <li> <p> {% trans %}Lignes{% endtrans %} 4 <br> Les Halles - Pont de Saverne {% trans %}(5min à pied){% endtrans %} </p> </li> </ul> </div> <div class="w-full flex justify-center md:hidden "> <hr class="border-r border-white h-auto w-auto horizontal-hr"> </div> <div class="py-4 h-auto hidden md:block"> <hr class="border-r border-white h-full"> </div> <div class="flex-1 flexcol items-center text-center"> <h3 class="text-vitrineOrange"> {% trans %}Voiture{% endtrans %} </h3> <ul class="flexcol justify-center"> <li> <h4 class="font-normal"> 01 </h4> <p> {% trans %}Prenez la sortie 51 vers{% endtrans %} <br> Avenue des Vosges, Robertsau </p> </li> <li> <h4 class="font-normal"> 02 </h4> <p> {% trans %}Tournez à droite sur rue{% endtrans %} d'Haguenau </p> </li> <li> <h4 class="font-normal"> 03 </h4> <p> {% trans %}Tournez à droite sur{% endtrans %} Quai Kellermann </p> </li> <li> <h4 class="font-normal"> 04 </h4> <p> {% trans %}Tournez à gauche sur{% endtrans %} Rue Marbach </p> </li> </ul> </div> </div> </div> </section> {# Horaires #} <section class="pb-0"> <div class="bg-vitrineOrange animateBubble flexcol px-8 pb-12 pt-8"> <h3 class="w-full font-normal text-center"> {% trans %}Heures d'ouverture{% endtrans %} </h3> <div class="flex gap-8 flex-col md:flex-row w-full justify-around"> <div class="flexcol items-center "> <p class="text-4xl text-white"> {% trans %}11h - 21h30{% endtrans %} </p> <p> {% trans %}Lundi{% endtrans %} </p> </div> <div class="flexcol items-center "> <p class="text-4xl text-white"> {% trans %}Fermé{% endtrans %} </p> <p> {% trans %}Mardi{% endtrans %} </p> </div> <div class="flexcol items-center "> <p class="text-4xl text-white"> {% trans %}11h - 21h30{% endtrans %} </p> <p> {% trans %}Mercredi, Jeudi{% endtrans %} </p> </div> <div class="flexcol items-center "> <p class="text-4xl text-white"> {% trans %}11h - 21h30{% endtrans %} </p> <p> {% trans %}Vendredi, Samedi, Dimanche{% endtrans %} </p> </div> </div> </div> </section> {# FAQ #} <section class="md:pt-0 pt-8 pb-0 px-0 md:px-12"> <div class="overflow-hidden h-dvh md:h-[55dvh] relative"> <div class="h-[70dvh] object-cover absolute top-44 md:-top-32 -left-80 md:left-56 -z-10"> {{ svg.illustration('people-in-bath', true) }} </div> <div class=" flexcol pt-8 md:items-start items-center"> <div class="flexcol items-center h-max w-auto max-w-sm px-4"> <h3 class="font-thin text-4xl text-center"> - {% trans %}FAQ{% endtrans %} - </h3> <p class="text-center text-wrap text-white"> {% trans %}Explorez notre Foire Aux Questions pour découvrir toutes les informations utiles et vivre une expérience spa exceptionnelle !{% endtrans %} </p> <div class="w-full flex justify-center"> {% include "vitrine/components/white-btn.html.twig" with { 'path': path('faq'), 'text': 'FAQ'} %} </div> </div> </div> </div> </section> {% include "vitrine/layout/footer.html.twig" %} </div> <script src="https://hcaptcha.com/1/api.js" async defer></script> <script> mapboxgl.accessToken = '{{ mapbox_dev_token }}'; const map = new mapboxgl.Map({ container: 'map', style: 'mapbox://styles/mapbox/streets-v9', zoom: 18, minZoom: 15, maxZoom: 18, center: [7.7449547, 48.5852229], }); map.scrollZoom.disable(); map.boxZoom.disable(); map.doubleClickZoom.disable(); map.touchZoomRotate.disableRotation(); // Activer uniquement les contrôles de zoom map.addControl(new mapboxgl.NavigationControl({ showCompass: false, showZoom: true })); const isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent); if (isMobile) { map.dragPan.disable(); } const el = document.createElement('div'); el.className = 'custom-marker'; el.style.backgroundImage = 'url("{{asset('vitrine/images/Map/pin-map.png')}}")'; el.style.width = '50px'; el.style.height = '68px'; el.style.backgroundSize = '100%'; el.style.transformOrigin = 'bottom'; el.style.backgroundRepeat = 'no-repeat'; el.style.transform = 'translate(-50%, 0)'; // Ajouter le marqueur personnalisé new mapboxgl.Marker(el) .setLngLat([7.7449547, 48.5852229]) .addTo(map); </script>{% endblock %}