templates/distance_coaching/Preparation.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  2. {% block title %}Coaching à distance préparation à un challenge sportif
  3. {% endblock %}
  4. {% block body %}
  5.     <header>
  6.         <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/n20.jpg') center center / cover no-repeat fixed">
  7.             <h1 class="text-white flex justify-center lg:text-[60px] text-[30px] font-bold">Coaching à distance</h1>
  8.         </div>
  9.         <div class="relative">
  10.             <div class="borderDesc p-4 flex flex-col justify-center items-center bg-black borderSpaceBottom">
  11.                 <h2 class="flex justify-center fontTitleLeo font-bold underline text-white text-center">Se préparer à un challenge sportif</h2>
  12.                 <br>
  13.                 <div class="flex justify-center font3 text-center pb-4">
  14.                     <p class="text-white">Ce coaching est conçu sur mesure pour vous aider à atteindre le ou les objectifs que vous vous êtes fixé(s) pour votre challenge. Il a pour but de vous préparer physiquement afin que vous soyez dans les meilleures conditions physiques le jour J.</p>
  15.                 </div>
  16.                 <br>
  17.                 <div class="borderDesc2  flex flex-col justify-center bg-black text-white p-[0.65rem]">
  18.                     <a class="cursor-pointer flex justify-center fontBorderDesc2 z-50" href="#PreparationFormules">Je choisis mon coaching</a>
  19.                 </div>
  20.             </div>
  21.             <br>
  22.         </div>
  23.     </header>
  24.     <section class="flex flex-col items-center pt-[7rem] pb-[7rem] lg:pt-[10rem] lg:pb-[10rem]">
  25.         <h2 class="fontTitleLeo font-bold underline">Quel est votre objectif ?</h2>
  26.         <div class="md:grid md:grid-cols-2 gap-16 pt-10">
  27.             <div class="flex flex-col items-center grid-span-1">
  28.                 <div class="flex items-center">
  29.                     <i class="fa-solid fa-person-running fa-2x"></i>
  30.                     <p class="TextGoalClamp pt-10 pb-10 font-semibold pl-4">Finisher d’un challenge sportif</p>
  31.                 </div>
  32.                 <div class="flex items-center">
  33.                     <i class="fa-solid fa-dumbbell fa-2x"></i>
  34.                     <p class="TextGoalClamp pt-10 pb-10 font-semibold pl-4">Explorer mes limites</p>
  35.                 </div>
  36.             </div>
  37.             <div class="flex flex-col items-center grid-span-1">
  38.                 <div class="flex items-center">
  39.                     <i class="fa-solid fa-fire fa-2x"></i>
  40.                     <p class="TextGoalClamp pt-10 pb-10 font-semibold pl-4">Sport, santé & performance</p>
  41.                 </div>
  42.                 <div class="flex items-center">
  43.                     <i class="fa-solid fa-heart-pulse fa-2x"></i>
  44.                     <p class="TextGoalClamp pt-10 pb-10 font-semibold pl-4">Prendre du plaisir</p>
  45.                 </div>
  46.             </div>
  47.         </div>
  48.     </section>
  49.     <section class=''>
  50.         <div class="bg-black pb-12 ">
  51.             <h2 class="fontTitleLeo underline font-bold flex justify-center pt-8 md:text-5xl text-white pb-10">Où en êtes vous ?</h2>
  52.             <div class="grid grid-cols-1 md:grid-cols-2 pt-10 ">
  53.                 <div class="flex justify-center "><img class="w-[65%] md-w-full" src="import/images/Trail.jpg" alt=""></div>
  54.                 <div class="flex justify-center items-start">
  55.                     <div class="flex flex-col justify-center borderWhereYouAt2 rounded-[0.5rem] mt-10 mx-1 md:mx-4 py-6 w-[85%px]">
  56.                         <div class="flex flex-col justify-center md-w[80%]">
  57.                             <div class="flex justify-around items-center pb-3 w-full relative lg:h-[80%] xl:h-[70%]">
  58.                                 <div></div>
  59.                                 <h2 class="underline font-bold clampTitleWhereYouAt">Je ne veux plus</h2>
  60.                                 <div>
  61.                                     <i class="positionXmarkWhere fa-solid fa-circle-xmark fa-2x" style="color: #ff0a0a;"></i>
  62.                                 </div>
  63.                             </div>
  64.                             <div>
  65.                                 <p class="py-3 clampTextWhereYouAt2 text-justify px-3 lg:px-7">. Ne pas savoir par où commencer.</p>
  66.                                 <p class="py-3 clampTextWhereYouAt2 text-justify px-3 lg:px-7">. Manquer de motivation.</p>
  67.                                 <p class="py-3 clampTextWhereYouAt2 text-justify px-3 lg:px-7">. Ecouter mes appréhensions et renoncer.</p>
  68.                                 <p class="py-3 clampTextWhereYouAt2 text-justify px-3 lg:px-7">. Douter de mes capacités.</p>
  69.                                 <p class="py-3 clampTextWhereYouAt2 text-justify px-3 lg:px-7">. Être irrégulier.ière dans ma préparation et avoir des difficultés à planifier mes entraînements.</p>
  70.                                 <p class="pt-3 clampTextWhereYouAt2 text-justify px-3 lg:px-7 mb-3 md:mb-6">. Faire d’erreur dans la planification de mes entraînements. J’ai peur d’en faire trop ou pas assez.</p>
  71.                             </div>
  72.                         </div>
  73.                     </div>
  74.                 </div>
  75.             </div>
  76.             <div class="pt-20 p-10 flex justify-center">
  77.                 <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">
  78.                     <div class="flex flex-col">
  79.                         <div class="flex justify-around items-center pt-5 relative">
  80.                             <div></div>
  81.                             <h2 class="underline font-bold clampTitleWhereYouAt">Aujourd'hui je veux :</h2>
  82.                             <div>
  83.                                 <i class="positionCheck fa-solid fa-circle-check fa-2x" style="color: #12e60f;"></i>
  84.                             </div>
  85.                         </div>
  86.                         <div>
  87.                             <p class="pt-3 pb-2 lg:py-4 clampTextWhereYouAt2 px-4 lg:px-7">
  88.                                 <strong>. Passer réellement à l’action</strong>
  89.                                 pour atteindre l’objectif que je me suis fixé depuis si longtemps.</p>
  90.                             <p class="py-2 lg:py-4 clampTextWhereYouAt2 px-4 lg:px-7">
  91.                                 <strong>. Développer une motivation d’acier</strong>
  92.                                 pour me dépasser.</p>
  93.                             <p class="py-2 lg:py-4 clampTextWhereYouAt2 px-4 lg:px-7">
  94.                                 <strong>. Vivre une expérience de coaching</strong>
  95.                                 pour la première fois.</p>
  96.                             <p class="py-2 lg:py-4 clampTextWhereYouAt2 px-4 lg:px-7">
  97.                                 <strong>. Affronter mes appréhensions</strong>
  98.                                 et aller au bout du challenge.</p>
  99.                             <p class="py-2 lg:py-4 clampTextWhereYouAt2 px-4 lg:px-7">
  100.                                 <strong>. Être régulier.ère et flexible,</strong>
  101.                                 réussir à lâcher-prise lorsque ma routine est interrompue.</p>
  102.                             <p class="pt-2 mb-10 lg:py-4 clampTextWhereYouAt2 px-4 lg:px-7">
  103.                                 <strong>. Être capable de me remobiliser rapidement</strong>
  104.                                 pour continuer à avancer vers mon objectif.</p>
  105.                         </div>
  106.                     </div>
  107.                 </div>
  108.             </div>
  109.         </div>
  110.     </section>
  111.     {# *********************************************** #}
  112.     {# ******************** Cards ******************** #}
  113.     {# *********************************************** #}
  114.     <h1 class="flex justify-center fontTitleLeo font-bold underline pt-10" id="PreparationFormules">Nos formules</h1>
  115.     <section class="flex justify-center bg-gray-200 py-10 border-solid border-black">
  116.         <div class="grid grid-cols-1 xl:grid-cols-2">
  117.             <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]">
  118.                 <div class="flex items-center justify-end">
  119.                     <p><strong>50€</strong>/mois</p>
  120.                 </div>
  121.                 <a href="#">
  122.                     <h5 class="mb-6 text-[1.5rem] lg:text-[2rem] font-bold tracking-tight text-gray-900 flex justify-center underline">Coaching</h5>
  123.                 </a>
  124.                 <p class="mb-3 text-[16px] lg:text-[23.5px] text-gray-700 ">
  125.                     <strong>Sans suivi hebdomadaire</strong>
  126.                 </p>
  127.                 <div class="pb-10 h-[225px] lg:h-[318px] text-[16px] lg:text-[22px]">
  128.                     <div class="flex items-center p-2">
  129.                         <i class="fa-solid fa-check"></i>
  130.                         <p class="pl-2">Bilan téléphonique gratuit</p>
  131.                     </div>
  132.                     <div class="flex items-center p-2">
  133.                         <i class="fa-solid fa-check"></i>
  134.                         <p class="pl-2">Séances pratiquées en autonomie</p>
  135.                     </div>
  136.                     <div class="flex items-center p-2">
  137.                         <i class="fa-solid fa-check"></i>
  138.                         <p class="pl-2">Nombre de séances par semaine: à définir</p>
  139.                     </div>
  140.                     <div class="flex items-center p-2">
  141.                         <i class="fa-solid fa-check"></i>
  142.                         <p class="pl-2">Durée minimale d’un coaching: 1 mois</p>
  143.                     </div>
  144.                 </div>
  145.                 <div>
  146.                     <h2 class="underline font-semibold pb-4 text-[16px] lg:text-[22px]">Accès privé sur notre plateforme :</h2>
  147.                     <p class="text-justify text-[12px] lg:text-[22px]">Bénéficiez d’un accès privé à notre vidéothèque de démonstration d’exercices sur votre espace personnel pour pratiquer en toute sécurité.</p>
  148.                 </div>
  149.                 <div class="flex justify-center pt-5">
  150.                     <a href="#PreparationDistanceCoachingHowItWorks" class="buttonFormule text-center">Je me lance !</a>
  151.                 </div>
  152.             </div>
  153.             <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]">
  154.                 <div class="text-end">
  155.                     <p><strong>70€</strong>/mois</p>
  156.                 </div>
  157.                 <a href="#">
  158.                     <h5 class="mb-6 text-[1.5rem] lg:text-[2rem] font-bold tracking-tight text-gray-900 flex justify-center underline">Coaching</h5>
  159.                 </a>
  160.                 <p class="mb-3 text-[16px] lg:text-[23.5px] text-gray-700 ">
  161.                     <strong>Avec suivi hebdomadaire</strong>
  162.                 </p>
  163.                 <div class="pb-10 text-[16px] lg:text-[22px]">
  164.                     <div class="flex items-center p-2">
  165.                         <i class="fa-solid fa-check"></i>
  166.                         <p class="pl-2">Bilan téléphonique gratuit</p>
  167.                     </div>
  168.                     <div class="flex items-center p-2">
  169.                         <i class="fa-solid fa-check"></i>
  170.                         <p class="pl-2">Séances pratiquées en autonomie</p>
  171.                     </div>
  172.                     <div class="flex items-center p-2">
  173.                         <i class="fa-solid fa-check"></i>
  174.                         <p class="pl-2">Nombre de séances par semaine: à définir</p>
  175.                     </div>
  176.                     <div class="flex items-center p-2">
  177.                         <i class="fa-solid fa-check"></i>
  178.                         <p class="pl-2">Durée minimale d’un coaching: 1 mois</p>
  179.                     </div>
  180.                     <div class="flex items-center p-2">
  181.                         <i class="fa-solid fa-check"></i>
  182.                         <p class="pl-2">1 conseil sport santé & performance adapté à votre objectif chaque semaine</p>
  183.                     </div>
  184.                 </div>
  185.                 <div>
  186.                     <h2 class="underline font-semibold pb-4 text-[16px] lg:text-[22px]">Accès privé sur notre plateforme :</h2>
  187.                     <p class="text-justify text-[12px] lg:text-[22px]">Bénéficiez d’un accès privé à notre vidéothèque de démonstration d’exercices sur votre espace personnel pour pratiquer en toute sécurité.</p>
  188.                 </div>
  189.                 <div class="flex justify-center pt-5">
  190.                     <a href="#PreparationDistanceCoachingHowItWorks" class="buttonFormule text-center ">Je me lance !</a>
  191.                 </div>
  192.             </div>
  193.         </div>
  194.     </section>
  195.     {# <iframe style = "border:0; height:600px; width:100%;" src="https://fr.resaclick.net/features/pro/proPublic/iframe/agenda.php?v=6651_3XwG1SMWKbxY5iVuPen4&bgColor=white"></iframe> #}
  196.     <section class="lg:pt-16 pt-0 pb-20" id="PreparationDistanceCoachingHowItWorks">
  197.         <div class="bg-gray-200 pb-16">
  198.             <h1 class="mx-8 underline fontTitleLeo font-bold flex justify-center pt-8 text-center">Comment ça marche ?</h1>
  199.             <div class="grid lg:grid-cols-8 gap-4">
  200.                 <br>
  201.                 <div class="lg:col-span-5 lg:col-end-7 lg:col-start-1 px-7 text-justify lg:pt-8">
  202.                     <div class="px-5 md:px-[5.5rem] pb-12">
  203.                         <div class="font-bold clampTitleHow flex justify-start pb-5 ">Coaching à distance.
  204.                         </div>
  205.                         <p class="clampTextHow">
  206.                             1.
  207.                             <span class="text-justify">
  208.                                 Remplissez le formulaire. Ce formulaire est important pour moi, il me permettra de mieux vous accompagner lors de notre premier rendez-vous téléphonique et de vérifier que vos besoins correspondent bien à ce que je propose dans mes coachings.
  209.                             </span>
  210.                         </p>
  211.                         <br>
  212.                         <p class="clampTextHow">2. Choisissez votre premier rendez-vous téléphonique entièrement gratuit parmi les créneaux disponibles. Cette prise de contact me permettra d’apprendre à mieux vous connaître et de mieux cerner vos attentes. Pour pouvoir en bénéficier, vous devez remplir le formulaire de contact et avoir un réel objectif à atteindre.
  213.                         </p>
  214.                         <br>
  215.                         <p class="clampTextHow">3. A la fin de notre appel, si la prise de contact est concluante des deux côtés et que vous souhaitez vous investir dans un coaching, alors je vous enverrai une proposition de devis. Celle-ci comprend la périodicité, le nombre de séances par semaine, le tarif global et les instructions pour procéder au paiement du coaching.
  216.                         </p>
  217.                         <br>
  218.                         <p class="clampTextHow">4. Le coaching à distance commence une fois que vous avez effectué le paiement de l’acompte et renvoyé le devis signé.
  219.                         </p>
  220.                         <br>
  221.                     </div>
  222.                 </div>
  223.                 <div class="lg:col-start-7 lg:col-span-2 flex flex-col justify-center items-center">
  224.                     <img class="w-[80%]" src="./import/images/EVA.jpg" alt="">
  225.                 </div>
  226.             </div>
  227.             <div class="flex justify-center relative">
  228.                 <a href="{{path('app_reservation')}}" class="buttonHow  fontButtonHow text-center w-42 buttonPhoto ">Prendre rendez-vous</a>
  229.             </div>
  230.             {# rajouter image ( une formulare une rendez vous ) #}
  231.         </div>
  232.         {# Titre sur image quand tu rentres sur la page / le carré juste apres le titre et l'image en section  #}
  233.     </section>
  234. {% endblock %}