templates/dashboard_free/lesson-free.html.twig line 1

Open in your IDE?
  1. {% extends 'dashboard_free/layout.html.twig' %}
  2. {% block head %}
  3.     <meta name="description" content="{% if find %}{{ find.metadescription }}{% else %}{% endif %}" />
  4.     <title>{{ find.dTitle }} - Les Bons Profs</title>
  5.     <link rel="canonical" href="{{ base_url_front }}{{ path(app.request.attributes.get('_route'), app.request.attributes.get('_route_params')) }}" />
  7.     <!--Tags Facebook-->
  8.     <meta property="og:url"                content="{{ base_url_front }}{{ path(app.request.attributes.get('_route'), app.request.attributes.get('_route_params')) }}" />
  9.     <meta property="og:type"               content="website" />
  10.     <meta property="og:title"              content="{{ find.dTitle }} - Les Bons Profs" />
  11.     <meta property="og:description"        content="{% if find %}{{ find.metadescription }}{% else %}Les Bons Profs aident votre enfant avec un soutien scolaire en ligne de la sixième à la terminale : cours vidéos, fiches de révision et QCM.{% endif %}" />
  12.     <meta property="og:image"              content="{{ base_url_front }}static/img/dashboard-free/eleve-cours-gratuit.webp" />
  14.     <script type="application/ld+json">
  15.         {
  16.             "@context": "https://schema.org",
  17.             "@type": "Course",
  18.             "name": "Soutien scolaire en Philosophie Terminale : cours et exercices",
  19.             "description": "{% if find %}{{ find.metadescription }}{% else %}Cours de {% if find %}{{ find.dTitle }}{% endif %} gratuits pour {{ course.title }} : vidéos, fiches, exercices, méthodologie de dissertation et explication de texte. Préparez le bac avec Les Bons Profs."{% endif %},
  20.             "provider": {
  21.                 "@type": "EducationalOrganization",
  22.                 "name": "Les Bons Profs",
  23.                 "url": "https://lesbonsprofs.com",
  24.                 "logo": {
  25.                     "@type": "ImageObject",
  26.                     "url": "https://lesbonsprofs.com/static/img/dashboard-free/les-bons-profs-logo.svg"
  27.                 },
  28.                 "contactPoint": {
  29.                     "@type": "ContactPoint",
  30.                     "telephone": "+33-1-86-95-72-01",
  31.                     "contactType": "Customer Support",
  32.                     "availableLanguage": ["fr"]
  33.                 }
  34.             },
  35.             "educationalLevel": "{{ course.title|capitalize }}",
  36.             "inLanguage": "fr",
  37.             "category": "{% if find %}{{ find.dTitle|capitalize }}{% endif %}",
  38.             "hasCourseInstance": {
  39.                 "@type": "CourseInstance",
  40.                 "courseMode": "online",
  41.                 "isAccessibleForFree": true,
  42.                 "startDate": "2025-06-16",
  43.                 "endDate": "2025-06-16",
  44.                 "location": {
  45.                     "@type": "VirtualLocation"
  46.                 },
  47.                 "courseWorkload": "P4H",
  48.                 "offers": {
  49.                     "@type": "Offer",
  50.                     "price": "0",
  51.                     "category": "{% if find %}{{ find.dTitle|capitalize }}{% endif %}",
  52.                     "priceCurrency": "EUR",
  53.                     "availability": "https://schema.org/InStock",
  54.                     "url": "https://lesbonsprofs.com"
  55.                 }
  56.             }
  57.         }
  58.     </script>
  59. {% endblock %}
  60. {% block content %}
  61.     <section>
  62.         <!-- Bloc Tête -->
  63.         <section class="flex justify-center bg-bleu text-white pt-[100px]">
  65.             <div class="flex justify-between items-center w-[1160px] px-5 xl:px-0">
  66.                 <h1 class="font-muller text-[6vw] lg:text-[55px] w-8/12">
  67.                     Soutien scolaire en {% if find %}{{ find.dTitle }}{% endif %} {{ course.title|capitalize }} : cours et exercices
  68.                 </h1>
  69.                 <img src="{{ base_url }}/static/img/dashboard-free/eleve-cours-gratuit.webp" alt="Les bons profs - Cours gratuits" class="w-[30%] lg:w-3/12 mt-2"/>
  70.             </div>
  73.         </section>
  76.         <!-- Bloc Contenu -->
  77.         <section class="flex justify-center pt-10 px-5">
  79.             <div class="flex flex-col md:flex-row w-[1160px] relative">
  80.                 <!-- Menu gauche -->
  81.                 <aside id="menu-gauche" class="w-full md:w-[275px] absolute bg-rose md:bg-inherit mb-5 md:mb-0">
  83.                     {% include 'dashboard_free/menu-gauche.html.twig' %}
  85.                     <div class="hidden md:block mt-5">
  86.                         <a href=""><img src="{{ base_url }}/static/img/dashboard-free/annales-bac-2025.webp" alt="Les bons profs - Annales BAC 2025" /></a>
  87.                     </div>
  89.                     <div class="hidden md:flex justify-center pb-5">
  90.                         <a class="bg-fushia hover:bg-bleu text-white font-bold py-2 px-3 rounded-full text-[15px] hover:bg-rouge transition-all ease-in-out duration-300 mt-5" href="">
  91.                             J'en profite
  92.                         </a>
  93.                     </div>
  95.                 </aside>
  98.                 <!-- Partie droite -->
  99.                 {% if find %}
  100.                     <section class="md:ml-[300px]">
  102.                         <h3 class="font-muller text-bleu text-3xl font-bold text-center sm:text-left pb-4">
  103.                             Comment réussir en {{ find.dTitle }} en {{ course.title }} ?
  104.                         </h3>
  106.                         <div>
  107.                             {{ find.content|raw }}
  108.                         </div>
  110.                         <h3 class="font-muller text-bleu text-3xl font-bold text-center sm:text-left mt-12 mb-4">
  111.                             Exemples de cours en vidéo en {{ find.dTitle }} {{ course.title }}
  112.                         </h3>
  114.                         {% for key,data in listActivity %}
  115.                             {% set itemsPerColumn = 6 %}
  116.                             {% set columns = data|batch(itemsPerColumn) %}
  117.                             <h4 class="inline-flex bg-grenat text-white font-bold text-[20px] rounded-lg px-4 py-3 -mb-5">{{ key }}</h4>
  119.                             <div class="bg-vanille rounded-lg mb-10 {% if columns|length > 1 %}grid grid-cols-1 md:grid-cols-3 gap-6 {% endif %}">
  120.                                 {% for column in columns %}
  121.                                     <ul class="list-disc list-outside p-5">
  122.                                         {% for row in column %}
  123.                                             <li style="margin-left: 1.2em;">
  124.                                                 {% if row.videoSlug is not null and row.videoSlug is not empty %}
  125.                                                     <a style="text-decoration: underline" href="/nos-cours/{{ course.slug }}/{{ row.dSlug }}/{{ row.actSlug }}">
  126.                                                         {{ row.notionTitle }}</a>
  127.                                                 {% else %}
  128.                                                     <span class="cursor-pointer" @click.prevent="open = true">{{ row.notionTitle }}</span>
  129.                                                 {% endif %}
  130.                                             </li>
  131.                                         {% endfor %}
  132.                                     </ul>
  134.                                 {% endfor %}
  135.                             </div>
  136.                         {% endfor %}
  138.                     </section>
  139.                 {% endif %}
  141.             </div>
  143.         </section>
  146.         <!-- Bloc offres -->
  147.         <section class="flex justify-center bg-miel px-5 py-12">
  149.             <div class="flex flex-col w-[1160px]">
  151.                 <h3 class="font-muller text-bleu text-3xl font-bold text-center sm:text-left mb-5">
  152.                     Nos offres de soutien scolaire en ligne
  153.                 </h3>
  155.                 <div class="flex flex-wrap justify-around lg:justify-between gap-4">
  157.                     <div class="flex flex-col items-center justify-between bg-white border-orange border-2 rounded-xl w-[330px]">
  158.                         <h4 class="text-orange font-bold text-3xl pt-3">Autonomie</h4>
  159.                         <p class="text-orange">Abonnement</p>
  160.                         <p>À partir de <span class="text-orange font-bold text-3xl">6,99€</span> / mois</p>
  161.                         <p class="text-grenat font-bold text-[19px]">Réussir tous ses contrôles</p>
  162.                         <div class="flex items-end gap-4">
  163.                             <img src="{{ base_url }}/static/img/dashboard-free/offre-autonomie.webp" alt="Les bons profs - Autonomie" class="object-contain w-[115px] rounded-bl-lg"/>
  164.                             <div>
  165.                                 <ul class="list-disc text-[12px]">
  166.                                     <li>+ 4000 cours en vidéo</li>
  167.                                     <li>Fiches et QCM</li>
  168.                                     <li>Exercices corrigés</li>
  169.                                     <li>Remise à niveau</li>
  170.                                     <li>Stages vacances scolaires</li>
  171.                                     <li>Annales BAC<br /><span>(Inclus dans offres 12 et 24 mois)</span></li>
  172.                                 </ul>
  173.                                 <div class="flex justify-center my-2">
  174.                                     <a class="bg-orange hover:bg-bleu text-white text-[12px] font-bold py-2 px-3 rounded-full hover:bg-rouge transition-all ease-in-out duration-300" href="">
  175.                                         7 jours d'essai gratuit
  176.                                     </a>
  177.                                 </div>
  178.                             </div>
  179.                         </div>
  180.                     </div>
  182.                     <div class="flex flex-col items-center justify-between bg-white border-azur border-2 rounded-xl w-[330px]">
  183.                         <h4 class="text-azur font-bold text-3xl pt-3">Assistance Visio</h4>
  184.                         <p class="text-azur">Abonnement</p>
  185.                         <p>À partir de <span class="text-azur font-bold text-3xl">14,99€</span> / mois</p>
  186.                         <p class="text-grenat font-bold text-[19px]">Être aidé dans ses devoirs</p>
  187.                         <div class="flex items-end gap-4">
  188.                             <img src="{{ base_url }}/static/img/dashboard-free/offre-assistance-visio.webp" alt="Les bons profs - Assistance Visio" class="object-contain w-[115px] rounded-bl-lg"/>
  189.                             <div>
  190.                                 <ul class="list-disc text-[12px]">
  191.                                     <li>Tous les services de l'<span class="text-orange font-bold">offre Autonomie</span><br />
  192.                                         <span class="text-azur font-bold text-2xl pl-8 block -my-2">+</span> </li>
  193.                                     <li>Aide aux devoirs</li>
  194.                                     <li class="ml-5">Profs en visio</li>
  195.                                     <li class="ml-5">de 17h à 20h</li>
  196.                                     <li class="ml-5">6 jours / 7</li>
  197.                                 </ul>
  198.                                 <div class="flex justify-center my-2">
  199.                                     <a class="bg-azur hover:bg-bleu text-white text-[12px] font-bold py-2 px-3 rounded-full hover:bg-rouge transition-all ease-in-out duration-300" href="">
  200.                                         7 jours d'essai gratuit
  201.                                     </a>
  202.                                 </div>
  203.                             </div>
  204.                         </div>
  205.                     </div>
  207.                     <div class="flex flex-col items-center justify-between bg-white border-fushia border-2 rounded-xl w-[330px]">
  208.                         <h4 class="text-fushia font-bold text-3xl pt-3">Mission Bac</h4>
  209.                         <p class="text-fushia">Achat unique</p>
  210.                         <p>À partir de <span class="text-fushia font-bold text-3xl">16,99€</span> / mois</p>
  211.                         <p class="text-grenat font-bold text-[19px]">Avoir son Bac et viser la mention</p>
  212.                         <div class="flex items-end gap-4">
  213.                             <img src="{{ base_url }}/static/img/dashboard-free/offre-mission-bac.webp" alt="Les bons profs - Mission Bac" class="object-contain w-[115px] rounded-bl-lg"/>
  214.                             <div>
  215.                                 <ul class="list-disc text-[12px]">
  216.                                     <li>En philo et dans toutes les spécialités</li>
  217.                                     <li>Annales Bac corrigées en vidéo</li>
  218.                                     <li>Cours, fiches et quiz</li>
  219.                                     <li>Méthodologie et conseils de profs</li>
  220.                                     <li>Préparation au grand oral</li>
  221.                                 </ul>
  222.                                 <div class="flex justify-center my-2">
  223.                                     <a class="bg-fushia hover:bg-bleu text-white text-[12px] font-bold py-2 px-3 rounded-full hover:bg-rouge transition-all ease-in-out duration-300" href="">
  224.                                         J'en profite
  225.                                     </a>
  226.                                 </div>
  227.                             </div>
  228.                         </div>
  229.                     </div>
  231.                 </div>
  233.             </div>
  235.         </section>
  237.         <!-- Popup -->
  238.         <div x-cloak>
  239.             <!-- Fond noir transparent flouté -->
  240.             <div  x-show="open"
  241.                   x-transition:enter="transition ease-out duration-300"
  242.                   x-transition:enter-start="opacity-0"
  243.                   x-transition:enter-end="opacity-100"
  244.                   x-transition:leave="transition ease-in duration-200"
  245.                   x-transition:leave-start="opacity-100"
  246.                   x-transition:leave-end="opacity-0"
  247.                   class="fixed inset-0 bg-black/50 backdrop-blur-sm z-40"
  248.                   @click="open = false">
  250.                 <!-- Contenu du popup -->
  251.                 <div class="fixed inset-0 z-50 flex items-center justify-center">
  252.                     <div class="flex flex-col items-center bg-white border-8 border-miel rounded-lg p-2 sm:p-6 max-w-lg mx-4" @click.stop>
  253.                         <!-- Contenu à personnaliser -->
  254.                         <p class="text-xl font-bold text-center mb-4">Ce contenu est réservé à nos inscrits</p>
  255.                         <img src="{{ base_url }}/static/img/dashboard-free/hibou-popup2.webp" alt="Tous nos cours en ligne en accès gratuit" class="w-24">
  256.                         <p class="text-lg sm:text-2xl text-bleu text-center font-bold mt-4">
  257.                             Inscrivez-vous gratuitement
  258.                         </p>
  259.                         <p class="text-lg sm:text-xl text-center">
  260.                             pour accéder à tous nos cours en ligne
  261.                         </p>
  262.                         <p class="flex text-lg sm:text-xl text-bleu font-bold mb-2">
  263.                             pendant 7 jours <img src="{{ base_url }}/static/img/dashboard-free/emphase-miel-dr.webp" alt="Inscrivez-vous gratuitement" class="w-[24px] mt-[12px]">
  264.                         </p>
  265.                         <p class="text-base sm:text-lg text-center">
  266.                             Vidéos / Fiches / Exercices corrigés /<br />QCM / Méthodologie
  267.                         </p>
  268.                         <a href="{{ base_url_front }}/nos-offres/" class="bg-miel hover:bg-grenat text-bleu hover:text-white text-lg sm:text-xl font-bold py-2 px-4 rounded-full transition-colors mt-4">
  269.                             S'inscrire gratuitement
  270.                         </a>
  271.                         <p class="text-base sm:text-xl mt-4">Déjà un compte ?
  272.                             <a href="{{ url("app_login") }}" class="text-bleu hover:text-grenat">Je me connecte</a>
  273.                         </p>
  274.                     </div>
  275.                 </div>
  276.             </div>
  277.         </div>
  278.     </section>
  280. {% endblock %}