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

Open in your IDE?
  1. {% extends 'vitrine/base.html.twig' %}
  2. {% import 'vitrine/macros/svg_illustration_macros.twig' as svg %}
  4. {% block title %}{% trans %}Franchise{% endtrans %}{% endblock %}
  5. {% block description %}{% trans %}Plongez avec nous dans l'aventure !{% endtrans %}{% endblock %}
  7. {% block stylesheets %}
  8.     {{ parent() }}
  9.     <link href="https://cdn.jsdelivr.net/npm/daisyui@4.12.10/dist/full.min.css" rel="stylesheet" type="text/css" />
  10. {% endblock %}
  12. {% block main %}
  13.     <section class="max-w-none relative h-max pt-28 overflow-hidden -z-50">
  14.         <div class="w-full h-[70vh] md:top-28 top-24 inset-0 z-0">
  15.             <img src="{{asset('/vitrine/images/heros/franchise.jpg')}}"
  16.                  class="w-full h-full object-cover image-brightness" alt="{% trans %}Equipe Taaka Strasbourg{% endtrans %}">
  17.             <div class="absolute w-full h-full top-0 pt-28 left-0 flex justify-center items-end">
  18.                 <div class="h-full p-4 mb-3 flex justify-center items-center flex-col gap-8">
  19.                     <h3
  20.                             class="animate-text lg:text-5xl md:text-4xl font-openSans text-3xl font-semibold text-center flexcol gap-2">
  21.                     <span class="text-center font-thin tracking-wider">
  22.                         {% trans %} Plongez avec nous {% endtrans %}<br>
  23.                     </span>
  24.                     <span>
  25.                         -
  26.                     </span>
  27.                     {% trans %}DANS L'AVENTURE{% endtrans %}
  28.                 </h3>
  29.             </div>
  30.         </div>
  31.     </div>
  32. </section>
  34. <div class="w-full flexcol gap-0 items-center z-10 relative ">
  35.     <section class="flexcol gap-20 md:mt-0 mt-8">
  36.         <div class="flex gap-6 sm:flex-row flex-col">
  37.             <h2 class="animate-text lg:text-5xl md:text-4xl text-3xl text-center md:text-left flexcol gap-0 flex-1">
  38.                 <span class="text-2xl font-thin tracking-wider ">
  39.                     {% trans %}Rejoignez{% endtrans %}
  40.                 </span>
  41.                 {% trans %}Le premier spa à la bière de France !{% endtrans %}
  42.             </h2>
  43.             <div class="bg-vitrineOrange animateBubble flex justify-around items-center flex-1 p-4">
  44.                 <div class="flexcol gap-0">
  45.                     <span class="font-semibold text-xl flex gap-2 items-center">
  46.                         4,9/5 
  47.                         <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-star-fill" viewBox="0 0 16 16">
  48.                             <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"/>
  49.                         </svg>
  50.                     </span>
  51.                     <p class="font-extralight">
  52.                         {% trans %}de satisfaction client{% endtrans %}
  53.                     </p>
  54.                 </div>
  55.                 <div class="flexcol gap-0">
  56.                     <span class="font-semibold text-xl">
  57.                         86%
  58.                     </span>
  59.                     <p class="font-extralight">
  60.                         {% trans %}de taux de remplissage{% endtrans %}
  61.                     </p>
  62.                 </div>
  63.             </div>
  64.         </div>
  65.         <div class="flexcol gap-6">
  66.             <div class="flex gap-6 flex-col md:flex-row">
  67.                 <div class="flex-1 border-in p-10 h-auto">
  68.                     <h4 class="text-xl mb-4">
  69.                         {% trans %}1. Premier SPA à la bière de France !{% endtrans %}
  70.                     </h4>
  71.                     <p>
  72.                         {% trans %}Ouvert en 2022, le Taaka Beer Spa est le premier établissement en son genre en France.{% endtrans %}
  73.                     </p>
  74.                 </div>
  75.                 <div class="flex-1 border-in p-10 h-auto">
  76.                     <h4 class="text-xl mb-4">
  77.                         {% trans %}2. Un concept atypique et novateur{% endtrans %}
  78.                     </h4>
  79.                     <p>
  80.                         {% trans %}Notre concept combine les bienfaits traditionnels des soins spa avec les propriétés naturelles de la bière. Cette expérience unique permet de se détendre tout en savourant des bières artisanales, offrant ainsi un moment de bien-être original.{% endtrans %}
  81.                     </p>
  82.                 </div>
  83.                 <div class="flex-1 border-in p-10 h-auto">
  84.                     <h4 class="text-xl mb-4">
  85.                         {% trans %}3. Un parcours privatif élaboré en 3 étapes{% endtrans %}
  86.                     </h4>
  87.                     <p>
  88.                         {% trans %}Chaque espace permet une bulle privative pour que le client s'y sente bien. Grâce à notre logiciel de réservation sur mesure, tous les espaces sont optimisés pour un meilleur rendement.{% endtrans %}
  89.                     </p>
  90.                 </div>
  91.             </div>
  92.             <div class="flex gap-6 flex-col md:flex-row">
  93.                 <div class="flex-1 border-in p-10 h-auto">
  94.                     <h4 class="text-xl mb-4">
  95.                         {% trans %}4. Des ingrédients naturels aux propriétés bénéfiques{% endtrans %}
  96.                     </h4>
  97.                     <p>
  98.                         {% trans %}Houblon, Malt et Levure de bière. Notre recette secrète, testée et approuvée, ravira vos clients.{% endtrans %}
  99.                     </p>
  100.                 </div>
  101.                 <div class="flex-1 border-in p-10 h-auto">
  102.                     <h4 class="text-xl mb-4">
  103.                         {% trans %}5. Des valeurs locales pour partager un moment convivial{% endtrans %}
  104.                     </h4>
  105.                     <p>
  106.                         {% trans %}Des planchettes de dégustation, aux bières artisanales proposées, faites découvrir des produits en circuit court qui sont gages de qualité.{% endtrans %}
  107.                     </p>
  108.                 </div>
  109.                 <div class="flex-1 border-in p-10 h-auto">
  110.                     <h4 class="text-xl mb-4">
  111.                         {% trans %}6. Une équipe chaleureuse et attentive{% endtrans %}
  112.                     </h4>
  113.                     <p>
  114.                         {% trans %}Construisons ensemble une bulle de bien-être dans votre ville, pour le plaisir des passionnés de détente et de convivialité.{% endtrans %}
  115.                     </p>
  116.                 </div>
  117.             </div>
  118.         </div>
  119.     </section>
  120.     <section class="relative h-[700px] overflow-hidden">
  121.         <img src="{{asset('/vitrine/images/global/franchise/franchise.jpg')}}"
  122.             class="w-full h-full object-cover image-brightness" alt="{% trans %}Personnes dans un bain{% endtrans %}">
  123.         <div class="absolute w-full h-full flex justify-center items-center top-0 left-0">
  124.             <img src="{{asset('/vitrine/logo/logo-k-white.png')}}" class="w-28 h-auto" alt="Logo K">
  125.         </div>
  126.     </section>
  127.     <section>
  128.         <ul class="timeline timeline-vertical ">
  129.             <li class="not-animate middle-target">
  130.                 <div class="timeline-middle p-2">
  131.                     <svg class="w-10 h-10" width="27" height="28" viewBox="0 0 27 28" fill="none"
  132.                         xmlns="http://www.w3.org/2000/svg">
  133.                         <path
  134.                             d="M0.228782 15.6781C1.02103 22.237 7.59757 27.6767 14.7366 26.9698C18.2767 26.6429 21.7844 24.8788 24.0934 21.9719C26.3641 18.9826 27.3861 15.1126 26.8678 11.3546C26.1727 7.62603 23.9756 4.25382 20.8802 2.15982C17.7702 0.11293 13.8825 -0.455483 10.422 0.354436C3.42722 1.96544 -1.09065 9.20464 0.228782 15.6781ZM13.1786 22.5226C13.1963 22.4961 13.2346 22.4461 13.2552 22.4431C17.9439 21.6833 21.4104 16.8738 20.677 12.2028C20.6652 12.138 20.677 12.0673 20.7448 12.0556C20.7889 12.0497 20.8184 12.0879 20.8449 12.1086L20.9009 12.1675C21.8374 13.213 22.3234 14.6709 22.2321 16.0639C22.2232 17.5335 21.6784 18.9089 20.8567 20.1282C19.9849 21.3092 18.8098 22.2694 17.4609 22.7347C16.1238 23.2678 14.61 23.2648 13.2965 22.6876L13.2258 22.6758C13.2022 22.6552 13.161 22.5492 13.1786 22.5226Z"
  135.                             fill="#FFFFFF" />
  136.                     </svg>
  137.                 </div>
  138.                 <div class="timeline-end my-10 timeline-box border-none bg-transparent w-full">
  139.                     <div class="flex justify-between md:gap-8 gap-2 sm:flex-row flex-col flex-1 mb-10">
  140.                         <h4 class=" md:text-2xl font-semibold text-3xl sm:w-1/3 text-center sm:text-left flexcol gap-0">
  141.                             {% trans %}Août 2021{% endtrans %}
  142.                             <span class="md:text-5xl text-4xl font-thin tracking-wider text-vitrineWhiteOpacity">
  143.                                 {% trans %}Création de la société{% endtrans %}
  144.                             </span>
  145.                         </h4>
  146.                         <p class="text-center sm:text-left text-white text-wrap max-w-96 w-full md:pt-8">
  147.                             {% trans %}Création juridique de la SAS <b>Taaka Beer Spa.</b>{% endtrans %}
  148.                         </p>
  149.                     </div>
  150.                 </div>
  151.                 <hr class="bg-white" />
  152.             </li>
  153.             <li class="not-animate middle-target">
  154.                 <hr class="bg-white" />
  155.                 <div class="timeline-middle p-2">
  156.                     <svg class="w-10 h-10" width="27" height="28" viewBox="0 0 27 28" fill="none"
  157.                         xmlns="http://www.w3.org/2000/svg">
  158.                         <path
  159.                             d="M0.228782 15.6781C1.02103 22.237 7.59757 27.6767 14.7366 26.9698C18.2767 26.6429 21.7844 24.8788 24.0934 21.9719C26.3641 18.9826 27.3861 15.1126 26.8678 11.3546C26.1727 7.62603 23.9756 4.25382 20.8802 2.15982C17.7702 0.11293 13.8825 -0.455483 10.422 0.354436C3.42722 1.96544 -1.09065 9.20464 0.228782 15.6781ZM13.1786 22.5226C13.1963 22.4961 13.2346 22.4461 13.2552 22.4431C17.9439 21.6833 21.4104 16.8738 20.677 12.2028C20.6652 12.138 20.677 12.0673 20.7448 12.0556C20.7889 12.0497 20.8184 12.0879 20.8449 12.1086L20.9009 12.1675C21.8374 13.213 22.3234 14.6709 22.2321 16.0639C22.2232 17.5335 21.6784 18.9089 20.8567 20.1282C19.9849 21.3092 18.8098 22.2694 17.4609 22.7347C16.1238 23.2678 14.61 23.2648 13.2965 22.6876L13.2258 22.6758C13.2022 22.6552 13.161 22.5492 13.1786 22.5226Z"
  160.                             fill="#FFFFFF" />
  161.                     </svg>
  162.                 </div>
  163.                 <div class="timeline-end my-10 timeline-box border-none bg-transparent w-full">
  164.                     <div class="flex justify-between md:gap-8 gap-2 flex-1 sm:flex-row flex-col mb-10">
  165.                         <h4 class=" md:text-2xl font-semibold text-3xl sm:w-1/3 text-center sm:text-left flexcol gap-0">
  166.                             {% trans %}Décembre 2021{% endtrans %}
  167.                             <span class="md:text-5xl text-4xl font-thin tracking-wider text-vitrineWhiteOpacity">
  168.                                 {% trans %}Campagne de Crowdfunding{% endtrans %}
  169.                             </span>
  170.                         </h4>
  171.                         <p class="text-center sm:text-left text-white text-wrap max-w-96 w-full md:pt-8 pt-4">
  172.                             {% trans %}Campagne réalisée avec un objectif de 3000€ qui se termine à 35 400€ soit 1180% de
  173.                             l'objectif. Cette campagne débouche sur une quarantaines d'articles web et presse, dont des
  174.                             interviews à la radio et TV.{% endtrans %}
  175.                         </p>
  176.                     </div>
  177.                 </div>
  178.                 <hr class="bg-white" />
  179.             </li>
  180.             <li class="not-animate middle-target">
  181.                 <hr class="bg-white" />
  182.                 <div class="timeline-middle p-2">
  183.                     <svg class="w-10 h-10" width="27" height="28" viewBox="0 0 27 28" fill="none"
  184.                         xmlns="http://www.w3.org/2000/svg">
  185.                         <path
  186.                             d="M0.228782 15.6781C1.02103 22.237 7.59757 27.6767 14.7366 26.9698C18.2767 26.6429 21.7844 24.8788 24.0934 21.9719C26.3641 18.9826 27.3861 15.1126 26.8678 11.3546C26.1727 7.62603 23.9756 4.25382 20.8802 2.15982C17.7702 0.11293 13.8825 -0.455483 10.422 0.354436C3.42722 1.96544 -1.09065 9.20464 0.228782 15.6781ZM13.1786 22.5226C13.1963 22.4961 13.2346 22.4461 13.2552 22.4431C17.9439 21.6833 21.4104 16.8738 20.677 12.2028C20.6652 12.138 20.677 12.0673 20.7448 12.0556C20.7889 12.0497 20.8184 12.0879 20.8449 12.1086L20.9009 12.1675C21.8374 13.213 22.3234 14.6709 22.2321 16.0639C22.2232 17.5335 21.6784 18.9089 20.8567 20.1282C19.9849 21.3092 18.8098 22.2694 17.4609 22.7347C16.1238 23.2678 14.61 23.2648 13.2965 22.6876L13.2258 22.6758C13.2022 22.6552 13.161 22.5492 13.1786 22.5226Z"
  187.                             fill="#FFFFFF" />
  188.                     </svg>
  189.                 </div>
  190.                 <div class="timeline-end my-10 timeline-box border-none bg-transparent w-full">
  191.                     <div class="flex justify-between md:gap-8 gap-2 flex-1 sm:flex-row flex-col mb-10">
  192.                         <h4 class=" md:text-2xl font-semibold text-3xl sm:w-1/3 text-center sm:text-left flexcol gap-0">
  193.                             {% trans %}Février 2022{% endtrans %}
  194.                             <span class="md:text-5xl text-4xl font-thin tracking-wider text-vitrineWhiteOpacity">
  195.                                {% trans %} Ouverture du Taaka Beer Spa{% endtrans %}
  196.                             </span>
  197.                         </h4>
  198.                         <p class="text-center sm:text-left text-white text-wrap max-w-96 w-full md:pt-8">
  199.                             {% trans %}Après plusieurs mois de travaux, le spa ouvre ses portes le 10 février 2022.{% endtrans %}
  200.                         </p>
  201.                     </div>
  202.                 </div>
  203.                 <hr class="bg-white" />
  204.             </li>
  205.             <li class="not-animate middle-target">
  206.                 <hr class="bg-white" />
  207.                 <div class="timeline-middle p-2">
  208.                     <svg class="w-10 h-10" width="27" height="28" viewBox="0 0 27 28" fill="none"
  209.                         xmlns="http://www.w3.org/2000/svg">
  210.                         <path
  211.                             d="M0.228782 15.6781C1.02103 22.237 7.59757 27.6767 14.7366 26.9698C18.2767 26.6429 21.7844 24.8788 24.0934 21.9719C26.3641 18.9826 27.3861 15.1126 26.8678 11.3546C26.1727 7.62603 23.9756 4.25382 20.8802 2.15982C17.7702 0.11293 13.8825 -0.455483 10.422 0.354436C3.42722 1.96544 -1.09065 9.20464 0.228782 15.6781ZM13.1786 22.5226C13.1963 22.4961 13.2346 22.4461 13.2552 22.4431C17.9439 21.6833 21.4104 16.8738 20.677 12.2028C20.6652 12.138 20.677 12.0673 20.7448 12.0556C20.7889 12.0497 20.8184 12.0879 20.8449 12.1086L20.9009 12.1675C21.8374 13.213 22.3234 14.6709 22.2321 16.0639C22.2232 17.5335 21.6784 18.9089 20.8567 20.1282C19.9849 21.3092 18.8098 22.2694 17.4609 22.7347C16.1238 23.2678 14.61 23.2648 13.2965 22.6876L13.2258 22.6758C13.2022 22.6552 13.161 22.5492 13.1786 22.5226Z"
  212.                             fill="#FFFFFF" />
  213.                     </svg>
  214.                 </div>
  215.                 <div class="timeline-end my-10 timeline-box border-none bg-transparent w-full">
  216.                     <div class="flex justify-between md:gap-8 gap-2 flex-1 sm:flex-row flex-col mb-10">
  217.                         <h4 class=" md:text-2xl font-semibold text-3xl sm:w-1/3 text-center sm:text-left flexcol gap-0">
  218.                             {% trans %}Juillet 2022{% endtrans %}
  219.                             <span class="md:text-5xl text-4xl font-thin tracking-wider text-vitrineWhiteOpacity">
  220.                                {% trans %} Prix Commerce Design{% endtrans %}
  221.                             </span>
  222.                         </h4>
  223.                         <p class="text-center sm:text-left text-white text-wrap max-w-96 w-full md:pt-8">
  224.                             {% trans %}Le Taaka Beer Spa remporte le prix commerce design de l'Eurométropole de Strasbourg pour les
  225.                             rénovations réalisées au sein de son établissement.{% endtrans %}
  226.                         </p>
  227.                     </div>
  228.                 </div>
  229.                 <hr class="bg-white" />
  230.             </li>
  231.             <li class="not-animate middle-target">
  232.                 <hr class="bg-white" />
  233.                 <div class="timeline-middle p-2">
  234.                     <svg class="w-10 h-10" width="27" height="28" viewBox="0 0 27 28" fill="none"
  235.                         xmlns="http://www.w3.org/2000/svg">
  236.                         <path
  237.                             d="M0.228782 15.6781C1.02103 22.237 7.59757 27.6767 14.7366 26.9698C18.2767 26.6429 21.7844 24.8788 24.0934 21.9719C26.3641 18.9826 27.3861 15.1126 26.8678 11.3546C26.1727 7.62603 23.9756 4.25382 20.8802 2.15982C17.7702 0.11293 13.8825 -0.455483 10.422 0.354436C3.42722 1.96544 -1.09065 9.20464 0.228782 15.6781ZM13.1786 22.5226C13.1963 22.4961 13.2346 22.4461 13.2552 22.4431C17.9439 21.6833 21.4104 16.8738 20.677 12.2028C20.6652 12.138 20.677 12.0673 20.7448 12.0556C20.7889 12.0497 20.8184 12.0879 20.8449 12.1086L20.9009 12.1675C21.8374 13.213 22.3234 14.6709 22.2321 16.0639C22.2232 17.5335 21.6784 18.9089 20.8567 20.1282C19.9849 21.3092 18.8098 22.2694 17.4609 22.7347C16.1238 23.2678 14.61 23.2648 13.2965 22.6876L13.2258 22.6758C13.2022 22.6552 13.161 22.5492 13.1786 22.5226Z"
  238.                             fill="#FFFFFF" />
  239.                     </svg>
  240.                 </div>
  241.                 <div class="timeline-end my-10 timeline-box border-none bg-transparent w-full">
  242.                     <div class="flex justify-between md:gap-8 gap-2 flex-1 sm:flex-row flex-col mb-10">
  243.                         <h4 class=" md:text-2xl font-semibold text-3xl sm:w-1/3 text-center sm:text-left flexcol gap-0">
  244.                             {% trans %}Octobre 2022{% endtrans %}
  245.                             <span class="md:text-5xl text-4xl font-thin tracking-wider text-vitrineWhiteOpacity">
  246.                                 {% trans %}Constitution de l'équipe{% endtrans %}
  247.                             </span>
  248.                         </h4>
  249.                         <p class="text-center sm:text-left text-white text-wrap max-w-96 w-full md:pt-8">
  250.                             {% trans %}Après la fin de contrat des stagiaires, Naomie et
  251.                             Paul décident de constituer l'équipe Taaka en recrutant deux CDD.{% endtrans %}
  252.                         </p>
  253.                     </div>
  254.                 </div>
  255.                 <hr class="bg-white" />
  256.             </li>
  257.             <li class="not-animate middle-target">
  258.                 <hr class="bg-white" />
  259.                 <div class="timeline-middle p-2">
  260.                     <svg class="w-10 h-10" width="27" height="28" viewBox="0 0 27 28" fill="none"
  261.                         xmlns="http://www.w3.org/2000/svg">
  262.                         <path
  263.                             d="M0.228782 15.6781C1.02103 22.237 7.59757 27.6767 14.7366 26.9698C18.2767 26.6429 21.7844 24.8788 24.0934 21.9719C26.3641 18.9826 27.3861 15.1126 26.8678 11.3546C26.1727 7.62603 23.9756 4.25382 20.8802 2.15982C17.7702 0.11293 13.8825 -0.455483 10.422 0.354436C3.42722 1.96544 -1.09065 9.20464 0.228782 15.6781ZM13.1786 22.5226C13.1963 22.4961 13.2346 22.4461 13.2552 22.4431C17.9439 21.6833 21.4104 16.8738 20.677 12.2028C20.6652 12.138 20.677 12.0673 20.7448 12.0556C20.7889 12.0497 20.8184 12.0879 20.8449 12.1086L20.9009 12.1675C21.8374 13.213 22.3234 14.6709 22.2321 16.0639C22.2232 17.5335 21.6784 18.9089 20.8567 20.1282C19.9849 21.3092 18.8098 22.2694 17.4609 22.7347C16.1238 23.2678 14.61 23.2648 13.2965 22.6876L13.2258 22.6758C13.2022 22.6552 13.161 22.5492 13.1786 22.5226Z"
  264.                             fill="#FFFFFF" />
  265.                     </svg>
  266.                 </div>
  267.                 <div class="timeline-end my-10 timeline-box border-none bg-transparent w-full">
  268.                     <div class="flex justify-between md:gap-8 gap-2 flex-1 sm:flex-row flex-col mb-10">
  269.                         <h4 class=" md:text-2xl font-semibold text-3xl sm:w-1/3 text-center sm:text-left flexcol gap-0">
  270.                             {% trans %}Novembre 2022{% endtrans %}
  271.                             <span class="md:text-5xl text-4xl font-thin tracking-wider text-vitrineWhiteOpacity">
  272.                                 {% trans %}Reportage 50min Inside{% endtrans %}
  273.                             </span>
  274.                         </h4>
  275.                         <p class="text-center sm:text-left text-white text-wrap max-w-96 w-full md:pt-8">
  276.                            {% trans %} Après plusieurs mois de travaux, le spa ouvre ses portes le 10 février 2022.{% endtrans %}
  277.                         </p>
  278.                     </div>
  279.                 </div>
  280.                 <hr class="bg-white" />
  281.             </li>
  282.             <li class="not-animate middle-target">
  283.                 <hr class="bg-white" />
  284.                 <div class="timeline-middle p-2">
  285.                     <svg class="w-10 h-10" width="27" height="28" viewBox="0 0 27 28" fill="none"
  286.                         xmlns="http://www.w3.org/2000/svg">
  287.                         <path
  288.                             d="M0.228782 15.6781C1.02103 22.237 7.59757 27.6767 14.7366 26.9698C18.2767 26.6429 21.7844 24.8788 24.0934 21.9719C26.3641 18.9826 27.3861 15.1126 26.8678 11.3546C26.1727 7.62603 23.9756 4.25382 20.8802 2.15982C17.7702 0.11293 13.8825 -0.455483 10.422 0.354436C3.42722 1.96544 -1.09065 9.20464 0.228782 15.6781ZM13.1786 22.5226C13.1963 22.4961 13.2346 22.4461 13.2552 22.4431C17.9439 21.6833 21.4104 16.8738 20.677 12.2028C20.6652 12.138 20.677 12.0673 20.7448 12.0556C20.7889 12.0497 20.8184 12.0879 20.8449 12.1086L20.9009 12.1675C21.8374 13.213 22.3234 14.6709 22.2321 16.0639C22.2232 17.5335 21.6784 18.9089 20.8567 20.1282C19.9849 21.3092 18.8098 22.2694 17.4609 22.7347C16.1238 23.2678 14.61 23.2648 13.2965 22.6876L13.2258 22.6758C13.2022 22.6552 13.161 22.5492 13.1786 22.5226Z"
  289.                             fill="#FFFFFF" />
  290.                     </svg>
  291.                 </div>
  292.                 <div class="timeline-end my-10 timeline-box border-none bg-transparent w-full">
  293.                     <div class="flex justify-between md:gap-8 gap-2 flex-1 sm:flex-row flex-col mb-10">
  294.                         <h4 class=" md:text-2xl font-semibold text-3xl sm:w-1/3 text-center sm:text-left flexcol gap-0">
  295.                             {% trans %}Mars 2023{% endtrans %}
  296.                             <span class="md:text-5xl text-4xl font-thin tracking-wider text-vitrineWhiteOpacity">
  297.                                 {% trans %}Kick off Franchise{% endtrans %}
  298.                             </span>
  299.                         </h4>
  300.                         <p class="text-center sm:text-left text-white text-wrap max-w-96 w-full md:pt-8">
  301.                             {% trans %}Naomie et Paul décident de se faire accompagner dans la création un réseau de franchise par
  302.                             le cabinet spécialisé Franchise Management. Ils entament une première étape décisive: Un
  303.                             audit pour évaluer si Taaka Beer Spa est prêt pour se lancer en réseau.{% endtrans %}
  304.                         </p>
  305.                     </div>
  306.                 </div>
  307.                 <hr class="bg-white" />
  308.             </li>
  309.             <li class="not-animate middle-target">
  310.                 <hr class="bg-white" />
  311.                 <div class="timeline-middle p-2">
  312.                     <svg class="w-10 h-10" width="27" height="28" viewBox="0 0 27 28" fill="none"
  313.                         xmlns="http://www.w3.org/2000/svg">
  314.                         <path
  315.                             d="M0.228782 15.6781C1.02103 22.237 7.59757 27.6767 14.7366 26.9698C18.2767 26.6429 21.7844 24.8788 24.0934 21.9719C26.3641 18.9826 27.3861 15.1126 26.8678 11.3546C26.1727 7.62603 23.9756 4.25382 20.8802 2.15982C17.7702 0.11293 13.8825 -0.455483 10.422 0.354436C3.42722 1.96544 -1.09065 9.20464 0.228782 15.6781ZM13.1786 22.5226C13.1963 22.4961 13.2346 22.4461 13.2552 22.4431C17.9439 21.6833 21.4104 16.8738 20.677 12.2028C20.6652 12.138 20.677 12.0673 20.7448 12.0556C20.7889 12.0497 20.8184 12.0879 20.8449 12.1086L20.9009 12.1675C21.8374 13.213 22.3234 14.6709 22.2321 16.0639C22.2232 17.5335 21.6784 18.9089 20.8567 20.1282C19.9849 21.3092 18.8098 22.2694 17.4609 22.7347C16.1238 23.2678 14.61 23.2648 13.2965 22.6876L13.2258 22.6758C13.2022 22.6552 13.161 22.5492 13.1786 22.5226Z"
  316.                             fill="#FFFFFF" />
  317.                     </svg>
  318.                 </div>
  319.                 <div class="timeline-end my-10 timeline-box border-none bg-transparent w-full">
  320.                     <div class="flex justify-between md:gap-8 gap-2 flex-1 sm:flex-row flex-col mb-10">
  321.                         <h4 class=" md:text-2xl font-semibold text-3xl sm:w-1/3 text-center sm:text-left flexcol gap-0">
  322.                             {% trans %}Avril 2023{% endtrans %}
  323.                             <span class="md:text-5xl text-4xl font-thin tracking-wider text-vitrineWhiteOpacity">
  324.                                {% trans %} Premiers CDI{% endtrans %}
  325.                             </span>
  326.                         </h4>
  327.                         <p class="text-center sm:text-left text-white text-wrap max-w-96 w-full md:pt-8">
  328.                             {% trans %}Après 6 mois de CDD, Adylene Schmidt et Lucas Schmidt signent leur CDI au Taaka Beer Spa.{% endtrans %}
  329.                         </p>
  330.                     </div>
  331.                 </div>
  332.                 <hr class="bg-white" />
  333.             </li>
  334.             <li class="not-animate middle-target">
  335.                 <hr class="bg-white" />
  336.                 <div class="timeline-middle p-2">
  337.                     <svg class="w-10 h-10" width="27" height="28" viewBox="0 0 27 28" fill="none"
  338.                         xmlns="http://www.w3.org/2000/svg">
  339.                         <path
  340.                             d="M0.228782 15.6781C1.02103 22.237 7.59757 27.6767 14.7366 26.9698C18.2767 26.6429 21.7844 24.8788 24.0934 21.9719C26.3641 18.9826 27.3861 15.1126 26.8678 11.3546C26.1727 7.62603 23.9756 4.25382 20.8802 2.15982C17.7702 0.11293 13.8825 -0.455483 10.422 0.354436C3.42722 1.96544 -1.09065 9.20464 0.228782 15.6781ZM13.1786 22.5226C13.1963 22.4961 13.2346 22.4461 13.2552 22.4431C17.9439 21.6833 21.4104 16.8738 20.677 12.2028C20.6652 12.138 20.677 12.0673 20.7448 12.0556C20.7889 12.0497 20.8184 12.0879 20.8449 12.1086L20.9009 12.1675C21.8374 13.213 22.3234 14.6709 22.2321 16.0639C22.2232 17.5335 21.6784 18.9089 20.8567 20.1282C19.9849 21.3092 18.8098 22.2694 17.4609 22.7347C16.1238 23.2678 14.61 23.2648 13.2965 22.6876L13.2258 22.6758C13.2022 22.6552 13.161 22.5492 13.1786 22.5226Z"
  341.                             fill="#FFFFFF" />
  342.                     </svg>
  343.                 </div>
  344.                 <div class="timeline-end my-10 timeline-box border-none bg-transparent w-full">
  345.                     <div class="flex justify-between md:gap-8 gap-2 flex-1 sm:flex-row flex-col mb-10">
  346.                         <h4 class=" md:text-2xl font-semibold text-3xl sm:w-1/3 text-center sm:text-left flexcol gap-0">
  347.                             {% trans %}Novembre 2023{% endtrans %}
  348.                             <span class="md:text-5xl text-4xl font-thin tracking-wider text-vitrineWhiteOpacity">
  349.                                 {% trans %}Création de Taaka Development{% endtrans %}
  350.                             </span>
  351.                         </h4>
  352.                         <p class="text-center sm:text-left text-white text-wrap max-w-96 w-full md:pt-8">
  353.                             {% trans %}Création juridique de la société encadrant la nouvelle activité de franchiseur.{% endtrans %}
  354.                         </p>
  355.                     </div>
  356.                 </div>
  357.                 <hr class="bg-white" />
  358.             </li>
  359.             <li class="not-animate middle-target">
  360.                 <hr class="bg-white" />
  361.                 <div class="timeline-middle p-2">
  362.                     <svg class="w-10 h-10" width="27" height="28" viewBox="0 0 27 28" fill="none"
  363.                         xmlns="http://www.w3.org/2000/svg">
  364.                         <path
  365.                             d="M0.228782 15.6781C1.02103 22.237 7.59757 27.6767 14.7366 26.9698C18.2767 26.6429 21.7844 24.8788 24.0934 21.9719C26.3641 18.9826 27.3861 15.1126 26.8678 11.3546C26.1727 7.62603 23.9756 4.25382 20.8802 2.15982C17.7702 0.11293 13.8825 -0.455483 10.422 0.354436C3.42722 1.96544 -1.09065 9.20464 0.228782 15.6781ZM13.1786 22.5226C13.1963 22.4961 13.2346 22.4461 13.2552 22.4431C17.9439 21.6833 21.4104 16.8738 20.677 12.2028C20.6652 12.138 20.677 12.0673 20.7448 12.0556C20.7889 12.0497 20.8184 12.0879 20.8449 12.1086L20.9009 12.1675C21.8374 13.213 22.3234 14.6709 22.2321 16.0639C22.2232 17.5335 21.6784 18.9089 20.8567 20.1282C19.9849 21.3092 18.8098 22.2694 17.4609 22.7347C16.1238 23.2678 14.61 23.2648 13.2965 22.6876L13.2258 22.6758C13.2022 22.6552 13.161 22.5492 13.1786 22.5226Z"
  366.                             fill="#FFFFFF" />
  367.                     </svg>
  368.                 </div>
  369.                 <div class="timeline-end my-10 timeline-box border-none bg-transparent w-full">
  370.                     <div class="flex justify-between md:gap-8 gap-2 flex-1 sm:flex-row flex-col mb-10">
  371.                         <h4 class=" md:text-2xl font-semibold text-3xl sm:w-1/3 text-center sm:text-left flexcol gap-0">
  372.                             {% trans %}Septembre 2024{% endtrans %}
  373.                             <span class="md:text-5xl text-4xl font-thin tracking-wider text-vitrineWhiteOpacity">
  374.                                {% trans %}Refonte de la charte{% endtrans %}
  375.                             </span>
  376.                         </h4>
  377.                         <p class="text-center sm:text-left text-white text-wrap max-w-96 w-full md:pt-8">
  378.                             {% trans %}Taaka Beer Spa fait peau neuve pour son lancement en réseau de franchise ET REFONT COMPLETEMENT SA CHARTE GRAPHIQUE.{% endtrans %}
  379.                         </p>
  380.                     </div>
  381.                 </div>
  382.             </li>
  383.         </ul>
  384.     </section>
  385.     <section class="flexcol gap-8">
  386.         <h2 class="animate-text md:text-2xl font-semibold text-3xl sm:text-left flexcol gap-0">
  387.             {% trans %}Chiffres{% endtrans %}
  388.             <span class="md:text-5xl text-4xl font-thin tracking-wider">
  389.                 {% trans %}Quelques Chiffres{% endtrans %}
  390.             </span>
  391.         </h2>
  393.         <div class="bg-vitrineOrange animateBubble flex justify-around items-center flex-1">
  394.             <div class="flexcol p-8 w-full">
  395.                 <h3 class="md:text-3xl text-2xl md:mb-0 mb-8 text-center font-thin text-vitrineWhiteOpacity">
  396.                     {% trans %}Une franchise innovante : <b>Le spa à la bière qui fait mousse !</b>{% endtrans %}
  397.                 </h3>
  398.                 <div class="flexcol w-full sm:p-6 p-0 md:gap-16 gap-8">
  399.                     <div class="flex md:gap-6 gap-4 md:justify-between flex-wrap justify-center">
  400.                         <div class="flexcol gap-0 sm:text-left text-center">
  401.                             <span class="font-semibold text-2xl">
  402.                                 305 000+
  403.                             </span>
  404.                             <p class="font-extralight xl">
  405.                                 {% trans %}De chiffre d'affaires atteignable <br> la 1ère année{% endtrans %}
  406.                             </p>
  407.                         </div>
  408.                         <div class="flexcol gap-0 sm:text-left text-center">
  409.                             <span class="font-semibold text-2xl">
  410.                                 400 000+
  411.                             </span>
  412.                             <p class="font-extralight xl">
  413.                                 {% trans %}De chiffre d'affaires réalisable <br> dès la 2ème année{% endtrans %}
  414.                             </p>
  415.                         </div>
  416.                         <div class="flexcol gap-0 sm:text-left text-center">
  417.                             <span class="font-semibold text-2xl">
  418.                                 83%
  419.                             </span>
  420.                             <p class="font-extralight xl">
  421.                                 {% trans %}De marge brute{% endtrans %}
  422.                             </p>
  423.                         </div>
  424.                         <div class="flexcol gap-0 sm:text-left text-center">
  425.                             <span class="font-semibold text-2xl">
  426.                                 23,85%
  427.                             </span>
  428.                             <p class="font-extralight xl">
  429.                                 {% trans %}De Ratio Brut d'Exploitation{% endtrans %}
  430.                             </p>
  431.                         </div>
  432.                     </div>
  433.                     <div class="flex md:gap-6 gap-4 md:justify-between flex-wrap justify-center">
  434.                         <div class="flexcol gap-0 sm:text-left text-center">
  435.                             <span class="font-semibold text-2xl">
  436.                                 21%
  437.                             </span>
  438.                             <p class="font-extralight xl">
  439.                                 {% trans %}De clients reviennent <br> ou achètent un bon cadeau{% endtrans %}
  440.                             </p>
  441.                         </div>
  442.                         <div class="flexcol gap-0 sm:text-left text-center">
  443.                             <span class="font-semibold text-2xl">
  444.                                 23488+
  445.                             </span>
  446.                             <p class="font-extralight xl">
  447.                                 {% trans %}Participants depuis l'ouverture{% endtrans %}
  448.                             </p>
  449.                         </div>
  450.                         <div class="flexcol gap-0 sm:text-left text-center">
  451.                             <span class="font-semibold text-2xl">
  452.                                 12855+
  453.                             </span>
  454.                             <p class="font-extralight xl">
  455.                                 {% trans %}Baignoires remplies{% endtrans %}
  456.                             </p>
  457.                         </div>
  458.                         <div class="flexcol gap-0 sm:text-left text-center">
  459.                             <span class="font-semibold text-2xl">
  460.                                 6161+
  461.                             </span>
  462.                             <p class="font-extralight xl">
  463.                                 {% trans %}Planchettes servies{% endtrans %}
  464.                             </p>
  465.                         </div>
  468.                     </div>
  469.                 </div>
  470.             </div>
  471.         </div>
  472.     </section>
  473.     <section class="flexcol gap-12">
  474.         <h2 class="animate-text md:text-2xl font-semibold text-3xl sm:text-left flexcol gap-0">
  475.             {% trans %}Nous rejoindre{% endtrans %}
  476.             <span class="md:text-5xl text-4xl font-thin tracking-wider">
  477.                 {% trans %}Conditions d'accès{% endtrans %}
  478.             </span>
  479.         </h2>
  480.         <div class="flexcol gap-12 items-center">
  481.             <div class="md:w-5/6 flex flex-col items-center">
  482.                 <hr class="border border-white horizontal-hr">
  483.                 <div class="flex gap-6 md:justify-between flex-wrap justify-center p-6 md:w-5/6">
  484.                     <div class="flexcol gap-0 sm:text-left text-center">
  485.                         <span class="font-semibold text-2xl text-center">
  486.                             300 000€
  487.                         </span>
  488.                         <p class="font-extralight xl">
  489.                             {% trans %}Investissement global{% endtrans %}
  490.                         </p>
  491.                     </div>
  492.                     <div class="flexcol gap-0 sm:text-left text-center">
  493.                         <span class="font-semibold text-2xl text-center">
  494.                             20 000€
  495.                         </span>
  496.                         <p class="font-extralight xl">
  497.                             {% trans %}Droit d'entrée{% endtrans %}
  498.                         </p>
  499.                     </div>
  500.                     <div class="flexcol gap-0 sm:text-left text-center">
  501.                         <span class="font-semibold text-2xl text-center">
  502.                             60 000€
  503.                         </span>
  504.                         <p class="font-extralight xl">
  505.                             {% trans %}Apport minimum{% endtrans %}
  506.                         </p>
  507.                     </div>
  508.                     <div class="flexcol gap-0 sm:text-left text-center">
  509.                         <span class="font-semibold text-2xl text-center">
  510.                             120m²
  511.                         </span>
  512.                         <p class="font-extralight xl">
  513.                             {% trans %}Minimum pour les locaux{% endtrans %}
  514.                         </p>
  515.                     </div>
  516.                 </div>
  517.                 <hr class="border border-white horizontal-hr">
  518.             </div>
  519.             <div class="md:w-5/6 flex flex-col items-center">
  520.                 <hr class="border border-white horizontal-hr">
  521.                 <div class="flex gap-6 md:justify-around flex-wrap justify-center p-6 md:w-5/6">
  522.                     <div class="flexcol gap-0 sm:text-left text-center">
  523.                         <span class="font-semibold text-2xl text-center">
  524.                             6%
  525.                         </span>
  526.                         <p class="font-extralight xl">
  527.                             {% trans %}Redevance de marque{% endtrans %}
  528.                         </p>
  529.                     </div>
  530.                     <div class="flexcol gap-0 sm:text-left text-center">
  531.                         <span class="font-semibold text-2xl text-center">
  532.                             2%
  533.                         </span>
  534.                         <p class="font-extralight xl">
  535.                             {% trans %}Redevance de communication{% endtrans %}
  536.                         </p>
  537.                     </div>
  538.                     <div class="flexcol gap-0 sm:text-left text-center">
  539.                         <span class="font-semibold text-2xl text-center">
  540.                             7 ans
  541.                         </span>
  542.                         <p class="font-extralight xl">
  543.                             {% trans %}Durée du contrat{% endtrans %}
  544.                         </p>
  545.                     </div>
  546.                 </div>
  547.                 <hr class="border border-white horizontal-hr">
  548.             </div>
  549.         </div>
  550.     </section>
  551.     <section  class="flexcol gap-12">
  552.         <h2 class="animate-text md:text-2xl font-semibold text-3xl sm:text-left flexcol gap-0">
  553.             {% trans %}Processus{% endtrans %}
  554.             <span class="md:text-5xl text-4xl font-thin tracking-wider">
  555.                 {% trans %}Notre offre{% endtrans %}
  556.             </span>
  557.         </h2>
  558.         <div id="processus-container">
  559.             <div id="processus" class="h-[calc(100vh-96px)]">
  560.                 <div id="processus-svg-container" class="h-2/4">
  561.                     {{ svg.illustration('processus') }}
  562.                 </div>
  563.                 <div class="flex justify-center h-2/3">
  564.                     <div class="flex justify-start -mt-20 gap-4 w-full max-w-[950px]">
  565.                         <div id="concassage" class="flexcol gap-2 flex-1 md:max-w-60 w-full">
  566.                             <div class="flexcol gap-2 w-max">
  567.                             <span class="text-2xl font-poppins">
  568.                                 O1
  569.                             </span>
  570.                                 <hr class="border-t-2 border-vitrineOrange ">
  571.                             </div>
  572.     
  573.                             <h3 class="text-vitrineOrange font-bold text-2xl">
  574.                                 {% trans %}Concassage{% endtrans %}
  575.                             </h3>
  576.                             <div class="border p-6 flexcol gap-2 items-center max-h-64 h-full overflow-y-scroll no-scrollbar">
  577.                                 <p class="text-center not-animate">
  578.                                     {% trans %}Prise d'informations sur notre site internet via le formulaire{% endtrans %}
  579.                                 </p>
  580.                                 <hr class="w-16 border-t border-vitrineWhiteOpacity">
  581.                                 <p class="text-center not-animate">
  582.                                     {% trans %}On se recontacte en visio ou par téléphone{% endtrans %}
  583.                                 </p>
  584.                             </div>
  585.                         </div>
  586.                         <div id="empatage" class="flexcol gap-2 flex-1 hidden md:max-w-60 w-full">
  587.                             <div class="flexcol gap-2 w-max">
  588.                             <span class="text-2xl font-poppins">
  589.                                 O2
  590.                             </span>
  591.                                 <hr class="border-t-2 border-vitrineOrange ">
  592.                             </div>
  593.     
  594.                             <h3 class="text-vitrineOrange font-bold text-2xl">
  595.                                 {% trans %}Empatage{% endtrans %}
  596.                             </h3>
  597.                             <div class="border p-6 flexcol gap-2 items-center max-h-64 h-full overflow-y-scroll no-scrollbar">
  598.                                 <p class="text-center not-animate">
  599.                                     {% trans %}Première rencontre{% endtrans %}
  600.                                 </p>
  601.                                 <hr class="w-16 border-t border-vitrineWhiteOpacity">
  602.                                 <p class="text-center not-animate">
  603.                                     {% trans %}Notre équipe analyse la faisabilité de votre dossier{% endtrans %}
  604.                                 </p>
  605.                                 <hr class="w-16 border-t border-vitrineWhiteOpacity">
  606.                                 <p class="text-center not-animate">
  607.                                     {% trans %}On organise une journée de découverte au spa et on fait le point{% endtrans %}
  608.                                 </p>
  609.                             </div>
  610.                         </div>
  611.                         <div id="ebullition" class="flexcol gap-2 flex-1 hidden md:max-w-60 w-full">
  612.                             <div class="flexcol gap-2 w-max">
  613.                             <span class="text-2xl font-poppins">
  614.                                 O3
  615.                             </span>
  616.                                 <hr class="border-t-2 border-vitrineOrange ">
  617.                             </div>
  618.     
  619.                             <h3 class="text-vitrineOrange font-bold text-2xl">
  620.                                 {% trans %}Ebullition{% endtrans %}
  621.                             </h3>
  622.                             <div class="border p-6 flexcol gap-2 items-center max-h-64 h-full overflow-y-scroll no-scrollbar">
  623.                                 <p class="text-center not-animate">
  624.                                     {% trans %}On valide votre candidature et on signe le DIP{% endtrans %}
  625.                                 </p>
  626.                                 <hr class="w-16 border-t border-vitrineWhiteOpacity">
  627.                                 <p class="text-center not-animate">
  628.                                     {% trans %}Recherche de locaux pour créer une nouvelle bulle dans votre région{% endtrans %}
  629.                                 </p>
  630.                                 <hr class="w-16 border-t border-vitrineWhiteOpacity">
  631.                                 <p class="text-center not-animate">
  632.                                     {% trans %}On vous accompagne pendant la période de travaux{% endtrans %}
  633.                                 </p>
  634.                             </div>
  635.                         </div>
  636.                         <div id="fermentation" class="flexcol gap-2 flex-1 hidden md:max-w-60 w-full">
  637.                             <div class="flexcol gap-2 w-max">
  638.                             <span class="text-2xl font-poppins">
  639.                                 O4
  640.                             </span>
  641.                                 <hr class="border-t-2 border-vitrineOrange ">
  642.                             </div>
  643.     
  644.                             <h3 class="text-vitrineOrange font-bold text-2xl">
  645.                                 {% trans %}Fermentation{% endtrans %}
  646.                             </h3>
  647.                             <div class="border p-6 flexcol gap-2 items-center max-h-64 h-full overflow-y-scroll no-scrollbar">
  648.                                 <p class="text-center not-animate">
  649.                                     {% trans %}La période de formation démarre pour vous et vos équipes{% endtrans %}
  650.                                 </p>
  651.                                 <hr class="w-16 border-t border-vitrineWhiteOpacity">
  652.                                 <p class="text-center not-animate">
  653.                                     {% trans %}Sélection de vos futurs partenaires et préparation de l’ouverture du spa{% endtrans %}
  654.                                 </p>
  655.                                 <hr class="w-16 border-t border-vitrineWhiteOpacity">
  656.                                 <p class="text-center not-animate">
  657.                                     {% trans %}On s’ouvre une bière à votre inauguration{% endtrans %}
  658.                                 </p>
  659.                             </div>
  660.                         </div>
  661.                     </div>
  662.                 </div>
  663.             </div>
  664.         </div>
  665.     </section>
  666.     <section class="flexcol gap-12">
  667.         <h2 class="animate-text md:text-2xl font-semibold text-3xl sm:text-left flexcol gap-0">
  668.             {% trans %}Première prise de contact{% endtrans %}
  669.             <span class="md:text-5xl text-4xl font-thin tracking-wider">
  670.             {% trans %}Dites-nous tout !{% endtrans %}
  671.         </span>
  672.         </h2>
  673.         <form action="{{path('franchise_form')}}" method="POST" class="flexcol gap-8">
  674.             <div class="bg-vitrineOrange animateBubble flexcol gap-6 justify-around items-center flex-1 py-16 md:px-16 px-4">
  675.                 <div class="flex gap-6 w-full flex-wrap justify-evenly">
  676.                     <input required type="text" name="lastname" placeholder="{% trans %}Nom (obligatoire){% endtrans %}" class="bg-transparent border-b py-2 outline-none placeholder:text-white placeholder:opacity-60 flex-1 min-w-56 max-w-96">
  677.                     <input required type="text" name="firstname" placeholder="{% trans %}Prénom (obligatoire){% endtrans %}" class="bg-transparent border-b py-2 outline-none placeholder:text-white placeholder:opacity-60 flex-1 min-w-56 max-w-96">
  678.                 </div>
  679.                 <div class="flex gap-6 w-full flex-wrap justify-evenly">
  680.                     <input required type="text" name="city" placeholder="{% trans %}Ville (obligatoire){% endtrans %}" class="bg-transparent border-b py-2 outline-none placeholder:text-white placeholder:opacity-60 flex-1 min-w-56 max-w-96">
  681.                     <input required type="text" name="postal_code" placeholder="{% trans %}Code postal (obligatoire){% endtrans %}" class="bg-transparent border-b py-2 outline-none placeholder:text-white placeholder:opacity-60 flex-1 min-w-56 max-w-96">
  682.                 </div>
  683.                 <div class="flex gap-6 w-full flex-wrap justify-evenly">
  684.                     <input required type="email" name="email" placeholder="{% trans %}Email (obligatoire){% endtrans %}" class="bg-transparent border-b py-2 outline-none placeholder:text-white placeholder:opacity-60 flex-1 min-w-56 max-w-96">
  685.                     <input required type="tel" name="phone" placeholder="{% trans %}Téléphone (obligatoire){% endtrans %}" class="bg-transparent border-b py-2 outline-none placeholder:text-white placeholder:opacity-60 flex-1 min-w-56 max-w-96">
  686.                 </div>
  687.             </div>
  688.             <div class="flexcol items-start gap-6">
  689.                 <div class="w-full flexcol justify-end relative">
  690.                     <label for="favorite" class="flex items-center gap-2">
  691.                         <span class="text-white bg-vitrineOrange rounded-full flex items-center justify-center p-1 w-5 h-5">
  692.                             1
  693.                         </span>
  694.                         {% trans %}Aimez-vous plus la bière ou le spa ?{% endtrans %}
  695.                     </label>
  696.                     <select name="favorite" class="custom-select">
  697.                         <option value="">{% trans %}--Choisir--{% endtrans %}</option>
  698.                         <option value="aucun">{% trans %}Aucun des deux{% endtrans %}</option>
  699.                         <option value="biere">{% trans %}Bière{% endtrans %}</option>
  700.                         <option value="spa">{% trans %}Spa{% endtrans %}</option>
  701.                         <option value="biere">{% trans %}Les deux !!!{% endtrans %}</option>
  702.                     </select>
  703.                 </div>
  704.                 <div class="w-full flexcol justify-end relative">
  705.                     <label for="source" class="flex items-center gap-2">
  706.                         <span class="text-white bg-vitrineOrange rounded-full flex items-center justify-center p-1 w-5 h-5">
  707.                             2
  708.                         </span>
  709.                         {% trans %}Comment avez-vous connu Taaka Beer Spa ?{% endtrans %}
  710.                     </label>
  711.                     <select name="source" class="custom-select">
  712.                         <option value="">{% trans %}--Choisir--{% endtrans %}</option>
  713.                         <option value="bouche à oreille">{% trans %}Bouche à oreille{% endtrans %}</option>
  714.                         <option value="instagram">{% trans %}Instagram{% endtrans %}</option>
  715.                         <option value="linkedin">{% trans %}Linkedin{% endtrans %}</option>
  716.                         <option value="facebook">{% trans %}Facebook{% endtrans %}</option>
  717.                         <option value="portail franchise">{% trans %}Portail Franchise{% endtrans %}</option>
  718.                         <option value="trip advisor">{% trans %}Trip Advisor{% endtrans %}</option>
  719.                         <option value="office du tourisme">{% trans %}Office du tourisme{% endtrans %}</option>
  720.                         <option value="google">{% trans %}Google{% endtrans %}</option>
  721.                         <option value="autre">{% trans %}Autre{% endtrans %}</option>
  722.                     </select>
  723.                 </div>
  724.                 <div class="w-full flexcol justify-end relative">
  725.                     <label for="invest" class="flex items-center gap-2">
  726.                         <span class="text-white bg-vitrineOrange rounded-full flex items-center justify-center p-1 w-5 h-5">
  727.                             3
  728.                         </span>
  729.                         {% trans %}Quel apport personnel êtes-vous prêt à investir ?{% endtrans %}
  730.                     </label>
  731.                     <select name="invest" class="custom-select">
  732.                         <option value="">{% trans %}--Choisir--{% endtrans %}</option>
  733.                         <option value="-50k">{% trans %}-50K{% endtrans %}</option>
  734.                         <option value="50k-100k">{% trans %}50K - 100k{% endtrans %}</option>
  735.                         <option value="100k-150k">{% trans %}100K - 150K{% endtrans %}</option>
  736.                         <option value="+150k">{% trans %}+150K{% endtrans %}</option>
  737.                     </select>
  738.                 </div>
  739.                 <div class="w-full flexcol justify-end relative">
  740.                     <label for="location" class="flex items-center gap-2">
  741.                         <span class="text-white bg-vitrineOrange rounded-full flex items-center justify-center p-1 w-5 h-5">
  742.                             4
  743.                         </span>
  744.                         {% trans %}Où souhaitez-vous ouvrir votre Taaka Beer Spa ?{% endtrans %}
  745.                     </label>
  746.                     <input name="location" class="bg-vitrineBlackOpacity border-none outline-none focus:outline-none px-4 py-4 w-full" placeholder="{% trans %}Strasbourg, Colmar ...{% endtrans %}">
  747.                 </div>
  748.                 <div class="w-full flexcol justify-end relative">
  749.                     <label for="date" class="flex items-center gap-2">
  750.                         <span class="text-white bg-vitrineOrange rounded-full flex items-center justify-center p-1 w-5 h-5">
  751.                             5
  752.                         </span>
  753.                         {% trans %}Quand envisagez-vous de démarrer votre projet entrepreneurial ?{% endtrans %}
  754.                     </label>
  755.                     <input name="date" class="bg-vitrineBlackOpacity border-none outline-none focus:outline-none px-4 py-4 w-full" placeholder="{% trans %}Dans 1 an, le 20/04/2025 ...{% endtrans %}">
  756.                 </div>
  757.                 <div class="w-full flexcol justify-end relative">
  758.                     <label for="operative" class="flex items-center gap-2">
  759.                         <span class="text-white bg-vitrineOrange rounded-full flex items-center justify-center p-1 w-5 h-5">
  760.                             6
  761.                         </span>
  762.                         {% trans %}Serez-vous opérationnel dans votre Spa ?{% endtrans %}
  763.                     </label>
  764.                     <select name="operative" class="custom-select">
  765.                         <option value="">{% trans %}--Choisir--{% endtrans %}</option>
  766.                         <option value="oui">{% trans %}oui{% endtrans %}</option>
  767.                         <option value="non">{% trans %}non{% endtrans %}</option>
  768.                     </select>
  769.                 </div>
  770.                 <div class="w-full flexcol justify-end relative">
  771.                     <label for="partner" class="flex items-center gap-2">
  772.                         <span class="text-white bg-vitrineOrange rounded-full flex items-center justify-center p-1 w-5 h-5">
  773.                             7
  774.                         </span>
  775.                         {% trans %}Avez-vous des partenaires pour monter ce projet ?{% endtrans %}
  776.                     </label>
  777.                     <select name="partner" class="custom-select">
  778.                         <option value="">{% trans %}--Choisir--{% endtrans %}</option>
  779.                         <option value="oui avec un ou plusieurs">{% trans %}Oui avec un ou plusieurs{% endtrans %}</option>
  780.                         <option value="avec votre conjoint associé(e)s">{% trans %}Avec votre conjoint associé(e)s{% endtrans %}</option>
  781.                         <option value="non">{% trans %}non{% endtrans %}</option>
  782.                     </select>
  783.                 </div>
  785.                 <div class="w-full flexcol justify-end relative">
  786.                     <label for="textwhy" class="flex items-center gap-2">
  787.                         <span class="text-white bg-vitrineOrange rounded-full flex items-center justify-center p-1 w-5 h-5">
  788.                             8
  789.                         </span>
  790.                         {% trans %}Pourquoi Taaka Beer Spa ?{% endtrans %}
  791.                     </label>
  792.                     <textarea name="textwhy" class="bg-vitrineBlackOpacity border-none outline-none focus:outline-none px-4 py-4 w-full resize-none" placeholder="{% trans %}Parce que ...{% endtrans %}"></textarea>
  793.                 </div>
  794.                 <div class="w-full flexcol justify-end relative">
  795.                     <label for="textabout" class="flex items-center gap-2">
  796.                         <span class="text-white bg-vitrineOrange rounded-full flex items-center justify-center p-1 w-5 h-5">
  797.                             9
  798.                         </span>
  799.                         {% trans %}À propos de vous ?{% endtrans %}
  800.                     </label>
  801.                     <textarea name="textabout" class="bg-vitrineBlackOpacity border-none outline-none focus:outline-none px-4 py-4 w-full resize-none" placeholder="{% trans %}À propos de moi ...{% endtrans %}"></textarea>
  802.                 </div>
  803.             </div>
  804.             <label for="confidentiality" class="flex gap-2 text-white">
  805.                 <input type="checkbox" name="confidentiality" class="accent-vitrineOrange" required>
  806.                 <p class="">{% trans %}Oui, j'ai bien pris connaissance de la {% endtrans %}<a onclick='window.open("{{ path('privacy-policy') }}");return false;' href="#" class="underline clickable">{% trans %} politique de confidentialité{% endtrans %}</a> {% trans %}légale et j'accepte que mes données soient collectées et traitées conformément à celle-ci.{% endtrans %}</p>
  807.             </label>
  808.             <div class="h-captcha" data-sitekey="{{siteKeyHcaptcha}}"></div>
  809.             <input type="hidden" name="_token" value="{{ csrf_token('franchise_form') }}">
  810.             {% include 'form/components/rgpd.html.twig' with {'sujet': 'demande'} %}
  811.             <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">
  812.                 {% trans %}Envoyer{% endtrans %}
  813.             </button>
  814.         </form>
  815.     </section>
  816.     {% include "vitrine/layout/footer.html.twig" %}
  817. </div>
  818. <script src="https://hcaptcha.com/1/api.js" async defer></script>
  819. <script type="module" src="{{asset('js/vitrine/processusAnimation.js')}}"></script>
  820. {% endblock %}