templates/individual_coaching/Senior.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  3. {% block title %}Coaching individuel senior
  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/n13.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">Sénior</h2>
  14.                 <br>
  15.                 <div class="flex justify-center font3 text-center pb-4">
  16.                     <p class="text-white">Ce coaching personnalisé est là pour vous permettre de reprendre confiance en votre corps et vieillir sereinement. Il a pour but de vous aider à dépasser vos appréhensions et à gagner en qualité de vie.</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="#SeniorFormules">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">Se redécouvrir et oser</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">Remise en forme</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">Prévention équilibre</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">Maintien de l’autonomie</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/n14.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-[84%]">
  58.                         <div class="flex flex-col justify-center">
  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">. <strong>Appréhender</strong> mes pertes d'équilibre.</p>
  68.                                 <p class="py-3 clampTextWhereYouAt2 text-justify px-3 lg:px-7">. <strong>Douter</strong> de mon corps.</p>
  69.                                 <p class="py-3 clampTextWhereYouAt2 text-justify px-3 lg:px-7">. <strong>Ne pas savoir</strong> comment me relever.</p>
  70.                                 <p class="pt-3 clampTextWhereYouAt2 text-justify px-3 lg:px-7 mb-3 md:mb-6">. <strong>Avoir peur</strong> de perdre mon autonomie.</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>. Maintenir</strong>
  89.                                 mon autonomie et mon indépendance le plus longtemps possible.</p>
  90.                             <p class="py-2 lg:py-4 clampTextWhereYouAt2 px-4 lg:px-7">
  91.                                 <strong>. Retrouver</strong>
  92.                                 confiance en mon corps, ma force et ma motricité.</p>
  93.                             <p class="py-2 lg:py-4 clampTextWhereYouAt2 px-4 lg:px-7">
  94.                                 <strong>. Apprendre les techniques</strong>
  95.                                 pour me relever du sol en sécurité.</p>
  96.                             <p class="pt-2 mb-10  lg:py-4 clampTextWhereYouAt2 px-4 lg:px-7">
  97.                                 <strong>. Être capable</strong>
  98.                                 d’aller au sol et de me relever en toute sécurité.</p>
  99.                         </div>
  100.                     </div>
  101.                 </div>
  102.             </div>
  103.         </div>
  104.     </section>
  105.     {# *********************************************** #}
  106.     {# ******************** Cards ******************** #}
  107.     {# *********************************************** #}
  108.     <h1 class="flex justify-center fontTitleLeo font-bold underline pt-10" id="SeniorFormules">Nos formules</h1>
  109.     <section class="flex justify-center bg-gray-200 py-10 border-solid border-black">
  110.         <div class="grid grid-cols-1 xl:grid-cols-2">
  111.             <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]">
  112.                 <div class="flex items-center justify-end">
  113.                     <p><strong>80€</strong></p>
  114.                 </div>
  115.                 <a href="#">
  116.                     <h5 class="mb-6 text-[1.5rem] lg:text-[2rem] font-bold tracking-tight text-gray-900 flex justify-center underline">Ma Pause découverte</h5>
  117.                 </a>
  118.                 <div class="pb-10 text-[16px] lg:text-[22px]">
  119.                     <div class="flex items-center p-2">
  120.                         <i class="fa-solid fa-check"></i>
  121.                         <p class="pl-2">Bilan sport-santé offert</p>
  122.                     </div>
  123.                     <div class="flex items-center p-2">
  124.                         <i class="fa-solid fa-check"></i>
  125.                         <p class="pl-2">2 séances de 1h15</p>
  126.                     </div>
  127.                     <div class="flex items-center p-2">
  128.                         <i class="fa-solid fa-check"></i>
  129.                         <p class="pl-2">Choix des activités sur demande</p>
  130.                     </div>
  131.                     <div class="flex items-center p-2">
  132.                         <i class="fa-solid fa-check"></i>
  133.                         <p class="pl-2">Activités proposées :</p>
  134.                     </div>
  135.                     <div class="grid grid-cols-2 p-2 px-[50px]">
  136.                         <div class="grid-span-1 flex flex-col items-start">
  137.                             <div class="flex items-center pt-4 pb-4">
  138.                                 <i class="fa-solid fa-dumbbell pr-2"></i><p>Gym douce</p>
  139.                             </div>
  140.                             <div class="flex items-center pt-4 pb-4">
  141.                                 <i class="fa-solid fa-scale-balanced pr-2"></i><p>Équilibre</p>
  142.                             </div>
  143.                         </div>
  144.                         <div class="grid-span-1 flex flex-col items-start">
  145.                             <div class="flex items-center pt-4 pb-4">
  146.                                 <i class="fa-solid fa-child-reaching pr-2"></i><p>Stretching</p>
  147.                             </div>
  148.                             <div class="flex items-center pt-4 pb-4">
  149.                                 <i class="fa-solid fa-hand-sparkles pr-2"></i><p>Automassage</p>
  150.                             </div>
  151.                         </div>
  152.                     </div>
  153.                 </div>
  154.                 <div class="flex justify-center pt-5">
  155.                     <a href="#SeniorHowItWorks" class="buttonFormule text-center">Je me lance !</a>
  156.                 </div>
  157.             </div>
  158.             <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]">
  159.                 <div class="flex items-center justify-end">
  160.                         <p><strong>160€</strong></p>
  161.                 </div>
  162.                 <a href="#">
  163.                     <h5 class="mb-6 text-[1.5rem] lg:text-[2rem] font-bold tracking-tight text-gray-900 flex justify-center underline">Ma Pause équilibre</h5>
  164.                 </a>
  165.                 <div class="pb-10 text-[16px] lg:text-[22px]">
  166.                     <div class="flex items-center p-2">
  167.                         <i class="fa-solid fa-check"></i>
  168.                         <p class="pl-2">Bilan sport-santé offert</p>
  169.                     </div>
  170.                     <div class="flex items-center p-2">
  171.                         <i class="fa-solid fa-check"></i>
  172.                         <p class="pl-2">4 séances de 1h15</p>
  173.                     </div>
  174.                     <div class="flex items-center p-2">
  175.                         <i class="fa-solid fa-check"></i>
  176.                         <p class="pl-2">Choix des activités sur demande</p>
  177.                     </div>
  178.                     <div class="flex items-center p-2">
  179.                         <i class="fa-solid fa-check"></i>
  180.                         <p class="pl-2">Activités proposées :</p>
  181.                     </div>
  182.                     <div class="grid grid-cols-2 p-2 px-[50px]">
  183.                         <div class="grid-span-1 flex flex-col items-start">
  184.                             <div class="flex items-center pt-4 pb-4">
  185.                                 <i class="fa-solid fa-scale-balanced pr-2"></i><p>Équilibre</p>
  186.                             </div>
  187.                             <div class="flex items-center pt-4 pb-4">
  188.                                 <i class="fa-solid fa-dumbbell pr-2"></i><p>Gym douce</p>
  189.                             </div>
  190.                         </div>
  191.                         <div class="grid-span-1 flex flex-col items-start">
  192.                             <div class="flex items-center pt-4 pb-4">
  193.                                 <i class="fa-solid fa-person-walking pr-2"></i><p>Motricité</p>
  194.                             </div>
  195.                             <div class="flex items-center pt-4 pb-4">
  196.                                 <i class="fa-solid fa-child-reaching pr-2"></i><p>Stretching</p>
  197.                             </div>
  198.                         </div>
  199.                     </div>
  200.                 </div>
  201.                 <div class="flex justify-center pt-5">
  202.                     <a href="#SeniorHowItWorks" class="buttonFormule text-center ">Je me lance !</a>
  203.                 </div>
  204.             </div>
  205.         </div>
  206.     </section>
  207.     <section class="lg:pt-16 pt-0 pb-20">
  208.         <div class="bg-gray-200 pb-16">
  209.             <h1 class="mx-8 underline fontTitleLeo font-bold flex justify-center pt-8 text-center" id="SeniorHowItWorks">Comment ça marche ?</h1>
  210.             <div class="grid lg:grid-cols-8 gap-4">
  211.                 <br>
  212.                 <div class="lg:col-span-5 lg:col-end-7 lg:col-start-1 px-7 text-justify lg:pt-8">
  213.                     <div class="px-5 md:px-[5.5rem] pb-12">
  214.                         <div class="font-bold clampTitleHow flex justify-start pb-5 ">Coaching individuel à domicile ou en extérieur.
  215.                         </div>
  216.                         <p class="clampTextHow">
  217.                             1.
  218.                             <span class="text-justify">
  219.                                 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.
  220.                             </span>
  221.                         </p>
  222.                         <br>
  223.                         <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 à un coaching. Dans le cas contraire, le bilan coaching est de 30 euros HT (TVA non applicable, art 293 B du CGI).
  224.                         </p>
  225.                         <br>
  226.                         <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.
  227.                         </p>
  228.                         <br>
  229.                         <p class="clampTextHow">4. Le coaching commence une fois que vous avez effectué le paiement de l’acompte et renvoyé le devis signé.
  230.                         </p>
  231.                         <br>
  232.                         <p class="clampTextHow">5. Enfin, nous programmons ensemble la première séance de coaching qui marque le début de votre accompagnement.
  233.                         </p>
  234.                         <br>
  235.                     </div>
  236.                 </div>
  237.                 <div class="lg:col-start-7 lg:col-span-2 flex flex-col justify-center items-center ">
  238.                     <img class="w-[80%]" src="import/images/n15.jpg" alt="">
  239.                 </div>
  240.             </div>
  241.             <div class="flex justify-center relative">
  242.                 <a href="{{path('app_reservation')}}" class="buttonHow  fontButtonHow text-center w-42 buttonPhoto ">Prendre rendez-vous</a>
  243.             </div>
  244.         </div>
  245.     </section>
  246. {% endblock %}