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 }}&nbsp;:&nbsp;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>
  75.         <div class="flex justify-center px-5 pt-[20px] ">
  76.             <div class="text-[16px] w-[1160px]">
  77.                 <a href="https://www.lesbonsprofs.com/" class="text-bleu">
  78.                     <span class="text-[21px]">⌂</span> Accueil</a> »
  79.                 <a href="{{ base_url_front }}/nos-cours/{{ course.slug }}" class="text-bleu">{{ course.title|capitalize }}</a> » {{ find.dTitle|capitalize }}
  80.             </div>
  81.         </div>
  83.         <!-- Bloc Contenu -->
  84.         <section class="flex justify-center mt-[20px] px-5">
  86.             <div class="flex flex-col md:flex-row w-[1160px] relative">
  87.                 <!-- Menu gauche -->
  88.                 <aside id="menu-gauche" class="w-full md:w-[275px] absolute bg-rose md:bg-inherit mb-5 md:mb-0">
  90.                     {% include 'dashboard_free/menu-gauche.html.twig' %}
  92.                     <div class="hidden md:block mt-5">
  93.                         <a href="https://www.lesbonsprofs.com/stages/ete"><img class="rounded-lg" src="{{ base_url }}/static/img/dashboard-free/stages-ete.webp" alt="Les bons profs - Stage ÉTÉ 2025" /></a>
  94.                     </div>
  96.                     <div class="hidden md:flex justify-center pb-5">
  97.                         <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="https://www.lesbonsprofs.com/stages/ete">
  98.                             J'en profite
  99.                         </a>
  100.                     </div>
  102.                 </aside>
  105.                 <!-- Partie droite -->
  106.                 {% if find %}
  107.                     <section class="md:ml-[300px]">
  109.                         <h3 class="font-muller text-bleu text-3xl font-bold text-center sm:text-left pb-4">
  110.                             Comment réussir en {{ find.dTitle }} en {{ course.title }} ?
  111.                         </h3>
  113.                         <div class="description-discipline">
  114.                             {{ find.content|raw }}
  115.                         </div>
  117.                         <h3 class="font-muller text-bleu text-3xl font-bold text-center sm:text-left mt-12 mb-4">
  118.                             Exemples de cours en vidéo en {{ find.dTitle }} {{ course.title }}
  119.                         </h3>
  121.                         {% for key,data in listActivity %}
  123.                             <h4 class="inline-flex bg-grenat text-white font-bold text-[20px] rounded-lg px-4 py-3 -mb-5">{{ key }}</h4>
  125.                             <div class="bg-vanille rounded-lg mb-10 ">
  127.                                 <ul class="list-disc list-outside p-5 list-activity">
  128.                                     {% for row in data %}
  129.                                         <li style="margin-left: 1.2em;">
  130.                                             {% if row.videoSlug is not null and row.videoSlug is not empty %}
  131.                                                 <a style="text-decoration: underline" href="/nos-cours/{{ course.slug }}/{{ row.dSlug }}/{{ row.actSlug }}">
  132.                                                     {{ row.notionTitle }}</a>
  133.                                             {% else %}
  134.                                                 <span class="cursor-pointer" @click.prevent="open = true">{{ row.notionTitle }}</span>
  135.                                             {% endif %}
  136.                                         </li>
  137.                                     {% endfor %}
  138.                                 </ul>
  139.                             </div>
  140.                         {% endfor %}
  142.                     </section>
  143.                 {% endif %}
  145.             </div>
  147.         </section>
  150.         <!-- Bloc offres -->
  151.         <section class="flex justify-center bg-miel px-5 py-12">
  153.             <div class="flex flex-col w-[1160px]">
  155.                 <h3 class="font-muller text-bleu text-3xl font-bold text-center sm:text-left mb-5">
  156.                     Nos offres de soutien scolaire en ligne
  157.                 </h3>
  159.                 <div class="flex flex-wrap justify-around lg:justify-between gap-4">
  161.                     <div class="flex flex-col items-center justify-between bg-white border-orange border-2 rounded-xl w-[330px]">
  162.                         <h4 class="text-orange font-bold text-3xl pt-3">Autonomie</h4>
  163.                         <p class="text-orange">Abonnement</p>
  164.                         <p>À partir de <span class="text-orange font-bold text-3xl">6,99€</span> / mois</p>
  165.                         <p class="text-grenat font-bold text-[19px]">Réussir tous ses contrôles</p>
  166.                         <div class="flex items-end gap-4">
  167.                             <img src="{{ base_url }}/static/img/dashboard-free/offre-autonomie.webp" alt="Les bons profs - Autonomie" class="object-contain w-[115px] rounded-bl-lg"/>
  168.                             <div>
  169.                                 <ul class="list-disc text-[12px]">
  170.                                     <li>+ 4000 cours en vidéo</li>
  171.                                     <li>Fiches et QCM</li>
  172.                                     <li>Exercices corrigés</li>
  173.                                     <li>Remise à niveau</li>
  174.                                     <li>Stages vacances scolaires</li>
  175.                                     <li>Annales BAC<br /><span>(Inclus dans offres 12 et 24 mois)</span></li>
  176.                                 </ul>
  177.                                 <div class="flex justify-center my-2">
  178.                                     <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="{{ url('choix-formule-step',{'offre':'autonomie'}) }}">
  179.                                         7 jours d'essai gratuit
  180.                                     </a>
  181.                                 </div>
  182.                             </div>
  183.                         </div>
  184.                     </div>
  186.                     <div class="flex flex-col items-center justify-between bg-white border-azur border-2 rounded-xl w-[330px]">
  187.                         <h4 class="text-azur font-bold text-3xl pt-3">Assistance Visio</h4>
  188.                         <p class="text-azur">Abonnement</p>
  189.                         <p>À partir de <span class="text-azur font-bold text-3xl">14,99€</span> / mois</p>
  190.                         <p class="text-grenat font-bold text-[19px]">Être aidé dans ses devoirs</p>
  191.                         <div class="flex items-end gap-4">
  192.                             <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"/>
  193.                             <div>
  194.                                 <ul class="list-disc text-[12px]">
  195.                                     <li>Tous les services de l'<span class="text-orange font-bold">offre Autonomie</span><br />
  196.                                         <span class="text-azur font-bold text-2xl pl-8 block -my-2">+</span> </li>
  197.                                     <li>Aide aux devoirs</li>
  198.                                     <li class="ml-5">Profs en visio</li>
  199.                                     <li class="ml-5">de 17h à 20h</li>
  200.                                     <li class="ml-5">6 jours / 7</li>
  201.                                 </ul>
  202.                                 <div class="flex justify-center my-2">
  203.                                     <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="{{ url('choix-formule-step',{'offre':'assistance-visio'}) }}">
  204.                                         7 jours d'essai gratuit
  205.                                     </a>
  206.                                 </div>
  207.                             </div>
  208.                         </div>
  209.                     </div>
  211.                     <div class="flex flex-col items-center justify-between bg-white border-fushia border-2 rounded-xl w-[330px]">
  212.                         <h4 class="text-fushia font-bold text-3xl pt-3">Mission Bac</h4>
  213.                         <p class="text-fushia">Achat unique</p>
  214.                         <p>À partir de <span class="text-fushia font-bold text-3xl">16,99€</span> / mois</p>
  215.                         <p class="text-grenat font-bold text-[19px]">Avoir son Bac et viser la mention</p>
  216.                         <div class="flex items-end gap-4">
  217.                             <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"/>
  218.                             <div>
  219.                                 <ul class="list-disc text-[12px]">
  220.                                     <li>En philo et dans toutes les spécialités</li>
  221.                                     <li>Annales Bac corrigées en vidéo</li>
  222.                                     <li>Cours, fiches et quiz</li>
  223.                                     <li>Méthodologie et conseils de profs</li>
  224.                                     <li>Préparation au grand oral</li>
  225.                                 </ul>
  226.                                 <div class="flex justify-center my-2">
  227.                                     <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="{{ url('choice-mission',{'mission':'bac'}) }}">
  228.                                         J'en profite
  229.                                     </a>
  230.                                 </div>
  231.                             </div>
  232.                         </div>
  233.                     </div>
  235.                 </div>
  237.             </div>
  239.         </section>
  241.         <!-- Popup -->
  242.         <div x-cloak>
  243.             <!-- Fond noir transparent flouté -->
  244.             <div  x-show="open"
  245.                   x-transition:enter="transition ease-out duration-300"
  246.                   x-transition:enter-start="opacity-0"
  247.                   x-transition:enter-end="opacity-100"
  248.                   x-transition:leave="transition ease-in duration-200"
  249.                   x-transition:leave-start="opacity-100"
  250.                   x-transition:leave-end="opacity-0"
  251.                   class="fixed inset-0 bg-black/50 backdrop-blur-sm z-40"
  252.                   @click="open = false">
  254.                 <!-- Contenu du popup -->
  255.                 <div class="fixed inset-0 z-50 flex items-center justify-center">
  256.                     <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>
  257.                         <!-- Contenu à personnaliser -->
  258.                         <p class="text-xl font-bold text-center mb-4">Ce contenu est réservé à nos inscrits</p>
  259.                         <img src="{{ base_url }}/static/img/dashboard-free/hibou-popup2.webp" alt="Tous nos cours en ligne en accès gratuit" class="w-24">
  260.                         <p class="text-lg sm:text-2xl text-bleu text-center font-bold mt-4">
  261.                             Inscrivez-vous gratuitement
  262.                         </p>
  263.                         <p class="text-lg sm:text-xl text-center">
  264.                             pour accéder à tous nos cours en ligne
  265.                         </p>
  266.                         <p class="flex text-lg sm:text-xl text-bleu font-bold mb-2">
  267.                             pendant 7 jours <img src="{{ base_url }}/static/img/dashboard-free/emphase-miel-dr.webp" alt="Inscrivez-vous gratuitement" class="w-[24px] mt-[12px]">
  268.                         </p>
  269.                         <p class="text-base sm:text-lg text-center">
  270.                             Vidéos / Fiches / Exercices corrigés /<br />QCM / Méthodologie
  271.                         </p>
  272.                         <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">
  273.                             S'inscrire gratuitement
  274.                         </a>
  275.                         <p class="text-base sm:text-xl mt-4">Déjà un compte ?
  276.                             <a href="{{ url("app_login") }}" class="text-bleu hover:text-grenat">Je me connecte</a>
  277.                         </p>
  278.                     </div>
  279.                 </div>
  280.             </div>
  281.         </div>
  282.     </section>
  284. {% endblock %}