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">
  10.     <meta name="robots" content="noindex, nofollow">
  12.     {% block head %}
  13.     {% endblock %}
  17.     <!--Favicon-->
  18.     <link rel="icon" type="image/png" href="{{ base_url }}/static/img/dashboard-free/favicon.webp" />
  20.     <!--CSS-->
  21.     <link rel="preload" href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap" as="style" />
  22.     <link rel="preload" href="https://fonts.googleapis.com/css2?family=Gloria+Hallelujah&display=swap" as="style" />
  23.     <link rel="preload" href="https://fonts.cdnfonts.com/css/muller-narrow" as="style" />
  24.     <link rel="preload" type="text/css" title="Style" href="{{ base_url }}/styles.css" as="style" />
  25.     <link rel="stylesheet" type="text/css" title="Style" href="{{ base_url }}/styles.css" />
  27.     <!--JS-->
  28.     <script src="{{ base_url }}/js/custom.js" type="text/javascript"></script>
  30.     <script src="https://unpkg.com/alpinejs" defer></script>
  32.     {% for file in encore_entry_css_files('free') %}
  33.         <link href="{{ absolute_url(asset(file)) }}" rel="stylesheet" />
  34.     {% endfor %}
  35.     {#{{ encore_entry_link_tags('free',null,'/') }}#}
  38. </head>
  41. <body class="font-poppins" x-data="{ open: false, mobileMenuOpen: false, dropdownOpen: false }" @keydown.escape.window="open = false">
  43. <!-- Header -->
  44.     <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 }">
  45.         <div class="flex flex-wrap items-center">
  46.             <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>
  47.             <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>
  48.         </div>
  50.         <div class="flex">
  51.             <!-- Menu -->
  52.             <div x-data="{ mobileMenuOpen: false, dropdownOpen: false }" class="w-full md:w-auto">
  53.                 <!-- Bouton Menu Mobile -->
  54.                 <button @click="mobileMenuOpen = !mobileMenuOpen" class="md:hidden text-bleu">
  55.                     <svg x-show="!mobileMenuOpen" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
  56.                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/>
  57.                     </svg>
  58.                     <svg x-show="mobileMenuOpen" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
  59.                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
  60.                     </svg>
  61.                 </button>
  63.                 <!-- Navigation Links (partagé entre Desktop et Mobile) -->
  64.                 <nav :class="{'hidden': !mobileMenuOpen, 'absolute left-0 right-0 bg-white z-50': mobileMenuOpen}"
  65.                      class="md:block md:relative">
  66.                     <ul class="md:flex md:items-center xl:gap-8">
  67.                         <!-- Nos offres -->
  68.                         <li>
  69.                             <a href="{{ base_url_front~'/nos-offres' }}" class="block px-4 py-2 text-bleu hover:text-grenat font-bold transition-colors">Nos offres</a>
  70.                         </li>
  72.                         <!-- Dropdown Nos cours -->
  73.                         <li class="relative">
  74.                             <button @click="dropdownOpen = !dropdownOpen"
  75.                                     class="flex items-center w-full px-4 py-2 text-bleu hover:text-grenat font-bold transition-colors">
  76.                                 <span>Nos cours</span>
  77.                                 <svg class="w-4 h-4 ml-1 transition-transform" :class="{'rotate-180': dropdownOpen}" fill="currentColor" viewBox="0 0 20 20">
  78.                                     <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"/>
  79.                                 </svg>
  80.                             </button>
  82.                             <!-- Sous-menu (même contenu pour Desktop et Mobile) -->
  83.                             <div x-show="dropdownOpen"
  84.                                  @click.away="dropdownOpen = false"
  85.                                  x-transition:enter="transition ease-out duration-200"
  86.                                  x-transition:enter-start="opacity-0"
  87.                                  x-transition:enter-end="opacity-100"
  88.                                  x-transition:leave="transition ease-in duration-150"
  89.                                  x-transition:leave-start="opacity-100"
  90.                                  x-transition:leave-end="opacity-0"
  91.                                  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">
  92.                                 <div class="py-2 text-[14px]">
  93.                                     {% for al in allCourses %}
  94.                                     <a href="{{ base_url_front }}/nos-cours/{{ al.slug }}" class="block px-8 md:px-4 py-2 text-bleu hover:text-grenat transition-colors">{{ al.title|capitalize }}</a>
  95.                                     {% endfor %}
  96.                                 </div>
  97.                             </div>
  98.                         </li>
  100.                         <!-- Blog -->
  101.                         <li>
  102.                             <a href="#" class="block px-4 py-2 text-bleu hover:text-grenat font-bold transition-colors">Blog</a>
  103.                         </li>
  105.                         <!-- Bouton Essayer gratuitement -->
  106.                         <li class="px-4 md:px-0 py-2">
  107.                             <a href="#" 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">
  108.                                 Essayer gratuitement
  109.                             </a>
  110.                         </li>
  111.                     </ul>
  112.                 </nav>
  113.             </div>
  114.         </div>
  115.     </header>
  116.     {% block content %}
  117.     {% endblock %}
  118.     <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="{
  119.       openSection: null,
  120.       toggleSection(section) {
  121.         this.openSection = this.openSection === section ? null : section
  122.       }
  123.     }">
  124.         <div class="max-w-[1160px] mx-auto">
  125.             <!-- Logo -->
  126.             <a href="https://lesbonsprofs.com" target="_blank" aria-label="Les Bons Profs" class="block mb-8">
  127.                 <img src="{{ base_url }}/static/img/dashboard-free/logo-blanc.svg" alt="Les bons profs - Cours gratuits" class="w-[285px]"/>
  128.             </a>
  130.             <!-- Navigation -->
  131.             <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-8 text-[15px]">
  132.                 <!-- Nos cours -->
  133.                 <div>
  134.                     <button
  135.                             @click="toggleSection('cours')"
  136.                             class="font-bold text-xl md:text-2xl mb-4 md:cursor-default inline-flex items-center gap-2"
  137.                     >
  138.                         <span>Nos cours</span>
  139.                         <svg
  140.                                 class="w-4 h-4 transition-transform md:hidden"
  141.                                 :class="{'rotate-180': openSection === 'cours'}"
  142.                                 fill="none"
  143.                                 stroke="currentColor"
  144.                                 viewBox="0 0 24 24"
  145.                         >
  146.                             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
  147.                         </svg>
  148.                     </button>
  149.                     <ul
  150.                             class="space-y-2 overflow-hidden transition-all duration-300 md:block"
  151.                             :class="{'hidden': openSection !== 'cours'}"
  152.                     >
  153.                         {% for al in allCourses %}
  154.                         <li><a href="{{ base_url_front~'/nos-cours/'~al.slug }}" class="hover:text-peche transition-colors">{{ al.title }}</a></li>
  155.                         {% endfor %}
  156.                     </ul>
  157.                 </div>
  159.                 <!-- Nos pages -->
  160.                 <div class="sm:col-start-1 md:col-start-2 sm:-mt-16 md:mt-0">
  161.                     <button
  162.                             @click="toggleSection('pages')"
  163.                             class="font-bold text-xl md:text-2xl mb-4 md:cursor-default inline-flex items-center gap-2"
  164.                     >
  165.                         <span>Nos pages</span>
  166.                         <svg
  167.                                 class="w-4 h-4 transition-transform md:hidden"
  168.                                 :class="{'rotate-180': openSection === 'pages'}"
  169.                                 fill="none"
  170.                                 stroke="currentColor"
  171.                                 viewBox="0 0 24 24"
  172.                         >
  173.                             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
  174.                         </svg>
  175.                     </button>
  176.                     <ul
  177.                             class="space-y-2 overflow-hidden transition-all duration-300 md:block"
  178.                             :class="{'hidden': openSection !== 'pages'}"
  179.                     >
  180.                         <li><a href="{{ base_url_front }}" class="hover:text-peche transition-colors">Les Bons Profs</a></li>
  181.                         <li><a href="{{ base_url_front }}/nos-offres" class="hover:text-peche transition-colors">Nos offres</a></li>
  182.                         <li><a href="{{ base_url_front }}/blog" class="hover:text-peche transition-colors">Blog</a></li>
  183.                         <li><a href="#" class="hover:text-peche transition-colors">Notre manifeste</a></li>
  184.                         <li><a href="#" class="hover:text-peche transition-colors">Conditions générales d'utilisation</a></li>
  185.                         <li><a href="#" class="hover:text-peche transition-colors">Mentions légales</a></li>
  186.                     </ul>
  187.                 </div>
  189.                 <!-- Réseaux sociaux et Contact -->
  190.                 <div class="grid sm:col-start-2 sm:row-start-1 md:col-start-3">
  191.                     <span class="hidden md:block font-bold text-xl md:text-2xl md:-mb-8">Nous suivre</span>
  192.                     <div class="flex space-x-4">
  193.                         <a href="https://www.facebook.com/lesbonsprofs" target="_blank" class="hover:opacity-75 transition-opacity">
  194.                             <img src="{{ base_url }}/static/img/dashboard-free/facebook.svg" alt="Facebook" class="w-8 h-8">
  195.                         </a>
  196.                         <a href="https://www.instagram.com/lesbonsprofs/" target="_blank" class="hover:opacity-75 transition-opacity">
  197.                             <img src="{{ base_url }}/static/img/dashboard-free/instagram.svg" alt="Instagram" class="w-8 h-8">
  198.                         </a>
  199.                         <a href="https://fr.linkedin.com/company/lesbonsprofs" target="_blank" class="hover:opacity-75 transition-opacity">
  200.                             <img src="{{ base_url }}/static/img/dashboard-free/linkedin.svg" alt="Linkedin" class="w-8 h-8">
  201.                         </a>
  202.                     </div>
  203.                     <span class="font-bold text-xl md:text-2xl row-start-1 md:row-start-3 mb-8 md:mb-0">Contactez-nous</span>
  204.                 </div>
  205.             </div>
  206.         </div>
  207.     </footer>
  208. {% for file in encore_entry_js_files('free') %}
  209.     <script src="{{ absolute_url(asset(file)) }}" ></script>
  210. {% endfor %}
  212. </body>
  214. </html>