templates/individual_coaching/index.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  3. {% block title %}Coaching individuel transformation physique
  4. {% endblock %}
  6. {% block body %}
  7.     <header>
  8.         <div class="borderDesc flex justify-center items-center mt-10 pt-[10rem] pb-[10rem] sm:pt-[17rem] sm:pb-[17rem] p-4 borderSpaceTop" style="background: url('import/images/n12.jpg') center center / cover no-repeat fixed">
  9.             <h1 class="text-white flex justify-center lg:text-[60px] text-[30px] font-bold">Coaching individuel</h1>
  10.         </div>
  11.         <div class="relative">
  12.             <div class="borderDesc p-4 flex flex-col justify-center items-center bg-black borderSpaceBottom">
  13.                 <h2 class="flex justify-center fontTitleLeo font-bold underline text-white text-center">Transformation physique</h2>
  14.                 <br>
  15.                 <div class="flex justify-center font3 text-center pb-4">
  16.                     <p class="text-white">Ce coaching personnalisé est conçu pour vous permettre de reprendre le contrôle de votre corps et gagner en qualité de vie de façon durable.</p>
  17.                 </div>
  18.                 <br>
  19.                 <div class="borderDesc2 flex flex-col justify-center bg-black text-white p-[0.65rem]">
  20.                     <a class="cursor-pointer flex justify-center fontBorderDesc2 z-50" href="#formulesIndividualCoaching">Je choisis mon coaching</a>
  21.                 </div>
  22.             </div>
  23.             <br>
  24.         </div>
  25.     </header>
  26.     <section class="flex flex-col items-center pt-[7rem] pb-[7rem] lg:pt-[10rem] lg:pb-[10rem]">
  27.         <h2 class="fontTitleLeo font-bold underline">Quel est votre objectif ?</h2>
  28.         <div class="md:grid md:grid-cols-2 gap-16 pt-10">
  29.             <div class="flex flex-col items-center grid-span-1">
  30.                 <div class="flex items-center">
  31.                     <i class="fa-solid fa-person-running fa-2x"></i>
  32.                     <p class="TextGoalClamp pt-10 pb-10 font-semibold pl-4">Remise en forme</p>
  33.                 </div>
  34.                 <div class="flex items-center">
  35.                     <i class="fa-solid fa-dumbbell fa-2x"></i>
  36.                     <p class="TextGoalClamp pt-10 pb-10 font-semibold pl-4">Prise de masse</p>
  37.                 </div>
  38.             </div>
  39.             <div class="flex flex-col items-center grid-span-1">
  40.                 <div class="flex items-center">
  41.                     <i class="fa-solid fa-fire fa-2x"></i>
  42.                     <p class="TextGoalClamp pt-10 pb-10 font-semibold pl-4">Perte de poids</p>
  43.                 </div>
  44.                 <div class="flex items-center">
  45.                     <i class="fa-solid fa-heart-pulse fa-2x"></i>
  46.                     <p class="TextGoalClamp pt-10 pb-10 font-semibold pl-4">Sport-santé</p>
  47.                 </div>
  48.             </div>
  49.         </div>
  50.     </section>
  51.     <section class=''>
  52.         <div class="bg-black pb-12 ">
  53.             <h2 class="fontTitleLeo underline font-bold flex justify-center pt-8 md:text-5xl text-white pb-10">Où en êtes vous ?</h2>
  54.             <div class="grid grid-cols-1 md:grid-cols-2 pt-10 ">
  55.                 <div class="flex justify-center "><img class="w-[65%] md-w-full" src="import/images/n11.jpg" alt=""></div>
  56.                 <div class="flex justify-center items-start">
  57.                     <div class="flex flex-col justify-center borderWhereYouAt2 rounded-[0.5rem] mt-10 mx-1 md:mx-4 py-6 w-[85%px]">
  58.                         <div class="flex flex-col justify-center md-w[80%]">
  59.                             <div class="flex justify-around items-center pb-3 w-full relative lg:h-[80%] xl:h-[70%]">
  60.                                 <div></div>
  61.                                 <h2 class="underline font-bold clampTitleWhereYouAt">Je ne veux plus</h2>
  62.                                 <div>
  63.                                     <i class="positionXmarkWhere fa-solid fa-circle-xmark fa-2x" style="color: #ff0a0a;"></i>
  64.                                 </div>
  65.                             </div>
  66.                             <div>
  67.                                 <p class="py-3 clampTextWhereYouAt2 text-justify px-3 lg:px-7">. Je ne sais pas par où commencer.</p>
  68.                                 <p class="py-3 clampTextWhereYouAt2  text-justify  px-3 lg:px-7">. Je ne veux plus me laisser aller et culpabiliser.</p>
  69.                                 <p class="py-3 clampTextWhereYouAt2 text-justify px-3 lg:px-7">. Je ne veux plus me juger et douter de mon corps.</p>
  70.                                 <p class="py-3 clampTextWhereYouAt2 text-justify px-3 lg:px-7">. Je n’arrive pas à passer à l’action.</p>
  71.                                 <p class="py-3 clampTextWhereYouAt2 text-justify px-3 lg:px-7">. Je n’arrive pas être régulier.ière sur la durée.</p>
  72.                                 <p class="pt-3 clampTextWhereYouAt2 text-justify  px-3 lg:px-7 mb-3 md:mb-6">. Je suis régulier.ière, mais je ne progresse pas ou plus.</p>
  73.                             </div>
  74.                         </div>
  75.                     </div>
  76.                 </div>
  77.             </div>
  78.             <div class="pt-20 p-10 flex justify-center">
  79.                 <div class="flex justify-center borderWhereYouAt rounded-[0.5rem] mx-1 md:mx-4 lg:mx-6 h-[100%] md:h-[90%] lg:h-[80%] xl:h-[70%] try2">
  80.                     <div class="flex flex-col">
  81.                         <div class="flex justify-around items-center pt-5 relative">
  82.                             <div></div>
  83.                             <h2 class="underline font-bold clampTitleWhereYouAt">Aujourd'hui je veux :</h2>
  84.                             <div>
  85.                                 <i class="positionCheck fa-solid fa-circle-check fa-2x" style="color: #12e60f;"></i>
  86.                             </div>
  87.                         </div>
  88.                         <div>
  89.                             <p class="pt-3 pb-2 lg:py-4 clampTextWhereYouAt2 px-4 lg:px-7">
  90.                                 <strong>. Renouer avec mon corps</strong>
  91.                                 que j’ai mis de côté depuis peu ou beaucoup de temps.</p>
  92.                             <p class="py-2 lg:py-4 clampTextWhereYouAt2 px-4 lg:px-7">
  93.                                 <strong>. Prendre soin de mon corps</strong>
  94.                                 et pouvoir parfois lâcher-prise sans culpabiliser.</p>
  95.                             <p class="py-2 lg:py-4 clampTextWhereYouAt2 px-4 lg:px-7">
  96.                                 <strong>. Retrouver confiance en mon corps,</strong>
  97.                                 ma force et ma capacité à me dépasser.</p>
  98.                             <p class="py-2 lg:py-4 clampTextWhereYouAt2 px-4 lg:px-7">
  99.                                 <strong>. Passer réellement à l’action</strong>
  100.                                 pour atteindre l’objectif que je me suis fixée depuis si longtemps.</p>
  101.                             <p class="py-2 lg:py-4 clampTextWhereYouAt2 px-4 lg:px-7">
  102.                                 <strong>. Je veux découvrir et apprendre</strong>
  103.                                 de nouvelles méthodes d’entraînement pour me dépasser et progresser.</p>
  104.                             <p class="pt-2 mb-10  lg:py-4 clampTextWhereYouAt2 px-4 lg:px-7">
  105.                                 <strong>. Être régulière et flexible,</strong>
  106.                                 c’est-à-dire réussir à lâcher-prise lorsque ma routine est interrompue, et être capable de me remobiliser rapidement pour continuer à avancer vers mon objectif.</p>
  107.                         </div>
  108.                     </div>
  109.                 </div>
  110.             </div>
  111.         </div>
  112.     </section>
  113.     {# *********************************************** #}
  114.     {# ******************** Cards ******************** #}
  115.     {# *********************************************** #}
  116.     <h1 class="flex justify-center fontTitleLeo font-bold underline pt-10" id="formulesIndividualCoaching">Nos formules</h1>
  117.     <section class="flex justify-center bg-gray-200 py-10 border-solid border-black">
  118.         <div class="grid grid-cols-1 xl:grid-cols-2">
  119.             <div class="grid-span-1 w-[25rem] lg:w-[31rem] p-4 shad bg-white border border-gray-200 rounded-lg shadow md:mx-5 py-10 my-10 lg:my-0 xl:mx-6 mediaMargin text-[22px]">
  120.                 <div class="flex items-center justify-end">
  121.                     <p><strong>250€</strong></p>
  122.                 </div>
  123.                 <a href="#">
  124.                     <h5 class="mb-6 text-[1.5rem] lg:text-[2rem] font-bold tracking-tight text-gray-900 flex justify-center underline">Ma Pause</h5>
  125.                 </a>
  126.                 <p class="mb-3 text-[16px] lg:text-[23.5px] text-gray-700 ">
  127.                     <strong>Reprise en main</strong>
  128.                 </p>
  129.                 <div class="pb-10 h-[225px] lg:h-[318px] text-[16px] lg:text-[22px]">
  130.                     <div class="flex items-center p-2">
  131.                         <i class="fa-solid fa-check"></i>
  132.                         <p class="pl-2">Bilan forme offert</p>
  133.                     </div>
  134.                     <div class="flex items-center p-2">
  135.                         <i class="fa-solid fa-check"></i>
  136.                         <p class="pl-2">5 séances coaching de 1h</p>
  137.                     </div>
  138.                     <div class="flex items-center p-2">
  139.                         <i class="fa-solid fa-check"></i>
  140.                         <p class="pl-2">2 mois de programme personnalisé</p>
  141.                     </div>
  142.                     <div class="flex items-center p-2">
  143.                         <i class="fa-solid fa-check"></i>
  144.                         <p class="pl-2">Suivi hebdomadaire pendant 2 mois</p>
  145.                     </div>
  146.                     <div class="flex items-center p-2">
  147.                         <i class="fa-solid fa-check"></i>
  148.                         <p class="pl-2">1 challenge transformation physique personnalisé chaque semaine</p>
  149.                     </div>
  150.                 </div>
  151.                 <div>
  152.                     <h2 class="underline font-semibold pb-4 text-[16px] lg:text-[22px]">Bonus offert</h2>
  153.                     <p class="text-justify text-[12px] lg:text-[22px]">E-book challenge « Sport, santé & bien-être : 15 challenges à partager avec mes proches. »</p>
  154.                 </div>
  155.                 <div class="flex justify-center pt-5">
  156.                     <a href="#IndividualCoachingHowItWorks" class="buttonFormule text-center">Je me lance !</a>
  157.                 </div>
  158.             </div>
  159.             <div class="grid-span-1 w-[25rem] lg:w-[31rem] p-4 shad bg-white border border-gray-200 rounded-lg shadow md:mx-5 py-10 my-10 lg:my-0 xl:mx-6 mediaMargin text-[22px]">
  160.                 <div class="flex items-center justify-end">
  161.                         <p><strong>450€</strong></p>
  162.                 </div>
  163.                 <a href="#">
  164.                     <h5 class="mb-6 text-[1.5rem] lg:text-[2rem] font-bold tracking-tight text-gray-900 flex justify-center underline">Ma Pause</h5>
  165.                 </a>
  166.                 <p class="mb-3 text-[16px] lg:text-[23.5px] text-gray-700 ">
  167.                     <strong>Complète & durable</strong>
  168.                 </p>
  169.                 <div class="pb-10 text-[16px] lg:text-[22px]">
  170.                     <div class="flex items-center p-2">
  171.                         <i class="fa-solid fa-check"></i>
  172.                         <p class="pl-2">Bilan forme offert</p>
  173.                     </div>
  174.                     <div class="flex items-center p-2">
  175.                         <i class="fa-solid fa-check"></i>
  176.                         <p class="pl-2">9 séances coaching de 1h</p>
  177.                     </div>
  178.                     <div class="flex items-center p-2">
  179.                         <i class="fa-solid fa-check"></i>
  180.                         <p class="pl-2">3 mois de programme personnalisé</p>
  181.                     </div>
  182.                     <div class="flex items-center p-2">
  183.                         <i class="fa-solid fa-check"></i>
  184.                         <p class="pl-2">Suivi hebdomadaire pendant 3 mois</p>
  185.                     </div>
  186.                     <div class="flex items-center p-2">
  187.                         <i class="fa-solid fa-check"></i>
  188.                         <p class="pl-2">1 challenge santé & bien-être personnalisé chaque semaine</p>
  189.                     </div>
  190.                 </div>
  191.                 <div>
  192.                     <h2 class="underline font-semibold pb-4 text-[16px] lg:text-[22px]">Bonus offert</h2>
  193.                     <p class="text-justify text-[12px] lg:text-[22px]">E-book challenge « Sport, santé & bien-être : 30 challenges à partager avec mes proches. »</p>
  194.                 </div>
  195.                 <div class="flex justify-center pt-5">
  196.                     <a href="#IndividualCoachingHowItWorks" class="buttonFormule text-center ">Je me lance !</a>
  197.                 </div>
  198.             </div>
  199.         </div>
  200.     </section>
  201.     <section class="lg:pt-16 pt-0 pb-20" id="IndividualCoachingHowItWorks">
  202.         <div class="bg-gray-200 pb-16">
  203.             <h1 class="mx-8 underline fontTitleLeo font-bold flex justify-center pt-8 text-center">Comment ça marche ?</h1>
  204.             <div class="grid lg:grid-cols-8 gap-4">
  205.                 <br>
  206.                 <div class="lg:col-span-5 lg:col-end-7 lg:col-start-1 px-7 text-justify lg:pt-8">
  207.                     <div class="px-5 md:px-[5.5rem] pb-12">
  208.                         <div class="font-bold clampTitleHow flex justify-start pb-5 ">Coaching individuel à domicile ou en extérieur.
  209.                         </div>
  210.                         <p class="clampTextHow">
  211.                             1.
  212.                             <span class="text-justify">
  213.                                 Remplissez le formulaire. Ce formulaire est important pour moi, il me permettra de mieux vous accompagner lors du bilan forme et de vérifier que vos besoins correspondent bien à ce que je propose dans mes coachings.
  214.                             </span>
  215.                         </p>
  216.                         <br>
  217.                         <p class="clampTextHow">2. Prenez rendez-vous pour votre bilan forme en sélectionnant le créneau qui vous convient. Pour pouvoir en bénéficier, vous devez remplir le formulaire de contact et avoir un réel objectif à atteindre. Le bilan forme est entièrement gratuit s’il aboutit à la souscription d'un coaching. Dans le cas contraire, le bilan coaching est de 30 euros HT (TVA non applicable, art 293 B du CGI).
  218.                         </p>
  219.                         <br>
  220.                         <p class="clampTextHow">3. A la fin du rendez-vous, si notre rencontre est concluante des deux côtés et que vous souhaitez vous investir dans un coaching, je vous enverrai une proposition de devis. Celle-ci comprend la formule choisie, le tarif global et les instructions pour procéder au paiement du coaching.
  221.                         </p>
  222.                         <br>
  223.                         <p class="clampTextHow">4. Le coaching commence une fois que vous avez effectué le paiement de l’acompte et renvoyé le devis signé.
  224.                         </p>
  225.                         <br>
  226.                         <p class="clampTextHow">5. Enfin, nous programmons ensemble votre première séance de coaching qui marque le début de votre transformation.
  227.                         </p>
  228.                         <br>
  229.                     </div>
  230.                 </div>
  231.                 <div class="lg:col-start-7 lg:col-span-2 flex flex-col justify-center items-center ">
  232.                     <img class="w-[80%]" src="import/images/EvaHowItWorks.jpg" alt="">
  233.                 </div>
  234.             </div>
  235.             <div class="flex justify-center relative">
  236.                 <a href="{{path('app_reservation')}}" class="buttonHow  fontButtonHow text-center w-42 buttonPhoto ">Prendre rendez-vous</a>
  237.             </div>
  238.         </div>
  239.     </section>
  240. {% endblock %}