templates/dashboard_free/layout.html.twig line 1

Open in your IDE?
  1. <!doctype html>
  2. <html lang="fr">
  4. <head>
  5.     {% set base_url = app.request.schemeAndHttpHost %}
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  8.     <meta http-equiv="Content-Language" content="fr" />
  9.     <meta name="viewport" content="width=device-width, initial-scale=1">
  11.     {% block head %}
  12.     {% endblock %}
  16.     <!--Favicon-->
  17.     <link rel="icon" type="image/png" href="{{ base_url }}/static/img/dashboard-free/favicon.webp" />
  19.     <!--CSS-->
  20.     <link rel="preload" href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap" as="style" />
  21.     <link rel="preload" href="https://fonts.googleapis.com/css2?family=Gloria+Hallelujah&display=swap" as="style" />
  22.     <link rel="preload" href="https://fonts.cdnfonts.com/css/muller-narrow" as="style" />
  23.     <link rel="preload" type="text/css" title="Style" href="{{ base_url }}/styles.css" as="style" />
  24.     <link rel="stylesheet" type="text/css" title="Style" href="{{ base_url }}/styles.css" />
  26.     <!--JS-->
  27.   {#  <script src="{{ base_url }}/js/custom.js" type="text/javascript"></script>#}
  29.     <script src="https://unpkg.com/alpinejs" defer></script>
  31.     {% for file in encore_entry_css_files('free') %}
  32.         <link href="{{ absolute_url(asset(file)) }}" rel="stylesheet" />
  33.     {% endfor %}
  34.     {#{{ encore_entry_link_tags('free',null,'/') }}#}
  37. </head>
  40. <body class="font-poppins" x-data="{ open: false, mobileMenuOpen: false, dropdownOpen: false }" @keydown.escape.window="open = false">
  42. <!-- Header -->
  43.     <header class="flex bg-white fixed w-full z-10 border-bleu border-b-[1px] px-4 py-4  justify-between flex-wrap items-center" x-data="{ mobileMenuOpen: false, dropdownOpen: false }">
  44.         <div class="flex flex-wrap items-center">
  45.             <a href="https://lesbonsprofs.com" target="_blank" aria-label="Les Bons Profs"><img src="{{ base_url }}/static/img/dashboard-free/les-bons-profs-logo.svg" alt="Les bons profs - Cours gratuits" class="w-48 md:w-56 lg:w-auto"/></a>
  46.             <div class="hidden lg:flex text-nowrap font-bold text-bleu text-[15px]"><img src="{{ base_url }}/static/img/dashboard-free/phone.svg" alt="télephone" class="pl-3 pr-1" /> 01 86 95 72 01</div>
  47.         </div>
  49.         <div class="flex">
  50.             <!-- Menu -->
  51.             <div x-data="{ mobileMenuOpen: false, dropdownOpen: false }" class="w-full md:w-auto">
  52.                 <!-- Bouton Menu Mobile -->
  53.                 <button @click="mobileMenuOpen = !mobileMenuOpen" class="md:hidden text-bleu">
  54.                     <svg x-show="!mobileMenuOpen" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
  55.                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/>
  56.                     </svg>
  57.                     <svg x-show="mobileMenuOpen" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
  58.                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
  59.                     </svg>
  60.                 </button>
  62.                 <!-- Navigation Links (partagé entre Desktop et Mobile) -->
  63.                 <nav :class="{'hidden': !mobileMenuOpen, 'absolute left-0 right-0 bg-white z-50': mobileMenuOpen}"
  64.                      class="md:block md:relative">
  65.                     <ul class="md:flex md:items-center xl:gap-8">
  66.                         <!-- Nos offres -->
  67.                         <li>
  68.                             <a href="{{ base_url_front~'/nos-offres' }}" class="block px-4 py-2 text-black hover:text-grenat font-bold transition-colors">Nos offres</a>
  69.                         </li>
  71.                         <!-- Dropdown Nos cours -->
  72.                         <li class="relative">
  73.                             <button
  74.                                     @mouseover="dropdownOpen = true"
  75.                                     @click="dropdownOpen = !dropdownOpen"
  76.                                     class="flex items-center w-full px-4 py-2 text-black hover:text-grenat font-bold transition-colors">
  77.                                 <span>Nos cours</span>
  78.                                 <svg class="w-4 h-4 ml-1 transition-transform" :class="{'rotate-180': dropdownOpen}" fill="currentColor" viewBox="0 0 20 20">
  79.                                     <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"/>
  80.                                 </svg>
  81.                             </button>
  83.                             <!-- Sous-menu (même contenu pour Desktop et Mobile) -->
  84.                             <div x-show="dropdownOpen"
  85.                                  @click.away="dropdownOpen = false"
  86.                                  @mouseleave="dropdownOpen = false"
  87.                                  x-transition:enter="transition ease-out duration-200"
  88.                                  x-transition:enter-start="opacity-0"
  89.                                  x-transition:enter-end="opacity-100"
  90.                                  x-transition:leave="transition ease-in duration-150"
  91.                                  x-transition:leave-start="opacity-100"
  92.                                  x-transition:leave-end="opacity-0"
  93.                                  class="md:absolute md:left-0 md:mt-2 md:w-48 bg-white md:border-2 md:rounded-lg md:shadow-lg z-50">
  94.                                 <div class="py-2 text-[14px]">
  95.                                     {% for al in allCourses %}
  96.                                     <a href="{{ base_url_front }}/nos-cours/{{ al.slug }}" class="block px-8 md:px-4 py-2 text-black hover:text-grenat transition-colors">{{ al.title|capitalize }}</a>
  97.                                     {% endfor %}
  98.                                 </div>
  99.                             </div>
  100.                         </li>
  102.                         <!-- Blog -->
  103.                         <li>
  104.                             <a href="{{ base_url_front~'/blog/' }}" class="block px-4 py-2 text-black hover:text-grenat font-bold transition-colors">Blog</a>
  105.                         </li>
  106.                         <li>
  107.                             <a href="https://app.lesbonsprofs.com/connexion" class="block px-4 py-2 text-bleu hover:text-grenat font-bold transition-colors">Connexion</a>
  108.                         </li>
  110.                         <!-- Bouton Essayer gratuitement -->
  111.                         <li class="px-4 md:px-0 py-2">
  112.                             <a href="{{ base_url_front~'/nos-offres/' }}" class="block bg-bleu hover:bg-grenat text-white md:text-[12px] lg:text-[16px] font-bold py-2 px-4 rounded-full text-center transition-colors">
  113.                                 Essayer gratuitement
  114.                             </a>
  115.                         </li>
  116.                     </ul>
  117.                 </nav>
  118.             </div>
  119.         </div>
  120.     </header>
  121.     {% block content %}
  122.     {% endblock %}
  123.     <footer class="bg-bleu bg-[url('{{ base_url }}/static/img/dashboard-free/logo-bleu-transparent.png')] bg-no-repeat bg-right-bottom bg-[size:250px] text-white py-12 px-4" x-data="{
  124.       openSection: null,
  125.       toggleSection(section) {
  126.         this.openSection = this.openSection === section ? null : section
  127.       }
  128.     }">
  129.         <div class="max-w-[1160px] mx-auto">
  130.             <!-- Logo -->
  131.             <a href="https://lesbonsprofs.com" target="_blank" aria-label="Les Bons Profs" class="block mb-8">
  132.                 <img src="{{ base_url }}/static/img/dashboard-free/logo-blanc.svg" alt="Les bons profs - Cours gratuits" class="w-[285px]"/>
  133.             </a>
  135.             <!-- Navigation -->
  136.             <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-8 text-[15px]">
  137.                 <!-- Nos cours -->
  138.                 <div>
  139.                     <button
  140.                             @click="toggleSection('cours')"
  141.                             class="font-bold text-xl md:text-2xl mb-4 md:cursor-default inline-flex items-center gap-2"
  142.                     >
  143.                         <span>Nos cours</span>
  144.                         <svg
  145.                                 class="w-4 h-4 transition-transform md:hidden"
  146.                                 :class="{'rotate-180': openSection === 'cours'}"
  147.                                 fill="none"
  148.                                 stroke="currentColor"
  149.                                 viewBox="0 0 24 24"
  150.                         >
  151.                             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
  152.                         </svg>
  153.                     </button>
  154.                     <ul
  155.                             class="space-y-2 overflow-hidden transition-all duration-300 md:block"
  156.                             :class="{'hidden': openSection !== 'cours'}"
  157.                     >
  158.                         {% for al in allCourses %}
  159.                         <li><a href="{{ base_url_front~'/nos-cours/'~al.slug }}" class="hover:text-peche transition-colors">{{ al.title }}</a></li>
  160.                         {% endfor %}
  161.                     </ul>
  162.                 </div>
  164.                 <!-- Nos pages -->
  165.                 <div class="sm:col-start-1 md:col-start-2 sm:-mt-16 md:mt-0">
  166.                     <button
  167.                             @click="toggleSection('pages')"
  168.                             class="font-bold text-xl md:text-2xl mb-4 md:cursor-default inline-flex items-center gap-2"
  169.                     >
  170.                         <span>Nos pages</span>
  171.                         <svg
  172.                                 class="w-4 h-4 transition-transform md:hidden"
  173.                                 :class="{'rotate-180': openSection === 'pages'}"
  174.                                 fill="none"
  175.                                 stroke="currentColor"
  176.                                 viewBox="0 0 24 24"
  177.                         >
  178.                             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
  179.                         </svg>
  180.                     </button>
  181.                     <ul
  182.                             class="space-y-2 overflow-hidden transition-all duration-300 md:block"
  183.                             :class="{'hidden': openSection !== 'pages'}"
  184.                     >
  185.                         <li><a href="{{ base_url_front }}" class="hover:text-peche transition-colors">Les Bons Profs</a></li>
  186.                         <li><a href="{{ base_url_front }}/nos-offres" class="hover:text-peche transition-colors">Nos offres</a></li>
  187.                         <li><a href="{{ base_url_front }}/blog" class="hover:text-peche transition-colors">Blog</a></li>
  188.                         <li><a href="#" class="hover:text-peche transition-colors">Conditions générales d'utilisation</a></li>
  189.                         <li><a href="#" class="hover:text-peche transition-colors">Mentions légales</a></li>
  190.                     </ul>
  191.                 </div>
  193.                 <!-- Réseaux sociaux et Contact -->
  194.                 <div class="grid sm:col-start-2 sm:row-start-1 md:col-start-3">
  195.                     <span class="hidden md:block font-bold text-xl md:text-2xl md:-mb-8">Nous suivre</span>
  196.                     <div class="flex space-x-4">
  197.                         <a href="https://www.facebook.com/lesbonsprofs" target="_blank" class="hover:opacity-75 transition-opacity">
  198.                             <img src="{{ base_url }}/static/img/dashboard-free/facebook.svg" alt="Facebook" class="w-8 h-8">
  199.                         </a>
  200.                         <a href="https://www.instagram.com/lesbonsprofs/" target="_blank" class="hover:opacity-75 transition-opacity">
  201.                             <img src="{{ base_url }}/static/img/dashboard-free/instagram.svg" alt="Instagram" class="w-8 h-8">
  202.                         </a>
  203.                         <a href="https://fr.linkedin.com/company/lesbonsprofs" target="_blank" class="hover:opacity-75 transition-opacity">
  204.                             <img src="{{ base_url }}/static/img/dashboard-free/linkedin.svg" alt="Linkedin" class="w-8 h-8">
  205.                         </a>
  206.                         <a href="https://www.youtube.com/user/lesbonsprofs" target="_blank" class="hover:opacity-75 transition-opacity">
  207.                             <img src="{{ base_url }}/static/img/dashboard-free/youtube.svg" alt="Linkedin" class="w-8 h-8">
  208.                         </a>
  209.                     </div>
  210.                     <span class="font-bold text-xl md:text-2xl row-start-1 md:row-start-3 mb-8 md:mb-0">Contactez-nous</span>
  211.                 </div>
  212.             </div>
  213.         </div>
  214.     </footer>
  215. {% for file in encore_entry_js_files('free') %}
  216.     <script src="{{ absolute_url(asset(file)) }}" ></script>
  217. {% endfor %}
  219. </body>
  221. </html>