templates/default/index.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  3. {% block body %}
  4.   {{include('section/nav.html.twig')}}
  5. <!-- ░░░ HERO / CAROUSEL ░░░ -->
  6.  {{include('section/carrousel.html.twig')}}
  8. <!-- ░░░ ABOUT / INTRO ░░░ -->
  9. <section id="about" class="py-5 text-center">
  10.     <div class="container">
  11.         <h2 class="text-primary fw-bold mb-3">ACTI PROTECTION</h2>
  12.         <p class="lead mx-auto" style="max-width:720px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
  13.         <a class="btn btn-outline-primary" href="#">En savoir plus</a>
  14.     </div>
  15. </section>
  17. <!-- ░░░ FEATURES / PILIERS ░░░ -->
  18. <section class="py-5">
  19.   <div class="container">
  20.     <div class="row text-center g-4">
  21.       {% for block in features %}
  22.         <div class="col-md-4">
  23.           <div class="p-4 border border-primary rounded-3 h-100">
  24.             <img src="{{ asset(block.icon) }}" alt="" class="mb-3" width="48">
  25.             <h6 class="fw-bold text-acti-blue mb-2">{{ block.title }}</h6>
  26.             <p class="small mb-0">{{ block.text }}</p>
  27.           </div>
  28.         </div>
  29.       {% endfor %}
  30.     </div>
  31.   </div>
  32. </section>
  35. <!-- ░░░ MÉTIERS ░░░ -->
  36. <section id="jobs" class="py-5 bg-light">
  37. {{include('section/jobs.html.twig')}}
  38. </section>
  40. <!-- ░░░ CATÉGORIES PRODUITS ░░░ -->
  41. <section id="categories" class="py-5">
  42.     <div class="container text-center">
  43.         <h2 class="text-primary fw-bold mb-2">Nos produits par catégories</h2>
  44.         <p class="mb-5">Profitez des équipements de protection les plus demandés,<br> sélectionnés pour leur qualité et leur performance, <br> tout en bénéficiant de remises exclusives.</p>
  45.         <div class="row g-4">
  46.              {{include('section/produit-category.html.twig')}}
  47.         </div>
  48.     </div>
  49. </section>
  51. <!-- ░░░ BEST‑SELLERS ░░░ -->
  52. <section id="best-sellers" class="py-5 bg-light">
  53.     <div class="container">
  54.         <h2 class="text-primary fw-bold text-center mb-2">Nos produits les plus achetés</h2>
  55.         <p class="text-center mb-4">Profitez des équipements de protection les plus demandés, sélectionnés pour leur qualité et leur performance.</p>
  56.         <!-- carrousel / produits ░░░ -->
  57.           {{include('section/carrousel-home-produit.html.twig')}}
  58.         <div id="bestCarousel" class="carousel slide" data-bs-ride="carousel">
  59.             
  60.             <button class="carousel-control-prev" type="button" data-bs-target="#bestCarousel" data-bs-slide="prev"><span class="carousel-control-prev-icon"></span></button>
  61.             <button class="carousel-control-next" type="button" data-bs-target="#bestCarousel" data-bs-slide="next"><span class="carousel-control-next-icon"></span></button>
  62.         </div>
  64.         <div class="text-center mt-4">
  65.             <a class="btn btn-outline-primary" href="#">Découvrez nos meilleures ventes</a>
  66.         </div>
  67.     </div>
  68. </section>
  70. <!-- ░░░ CTA / DEVIS ░░░ -->
  71. <section id="cta" class="py-5 text-white text-center" style="background:url('{{asset('img/bg/bg-paralax.jpg')}}') center/cover no-repeat;">
  72.     <div class="container">
  73.         <h2 class="fw-bold mb-3">Une demande spécifique ?</h2>
  74.         <p class="lead mb-4">Contactez‑nous pour toute information, demande de devis ou commande sur mesure !</p>
  75.         <a class="btn btn-primary" href="{{path('contact')}}">Contactez‑nous</a>
  76.     </div>
  77. </section>
  79. <!-- ░░░ MARQUES ░░░ -->
  80.   {{include('section/marque.html.twig')}}
  82. <!-- ░░░ GOOGLE MAP ░░░ -->
  83. <section id="map" class="ratio ratio-16x9">
  84.     <!-- Remplacer src paar la clé API/maps réelle -->
  85.     <iframe src="https://www.google.com/maps/embed?pb=!1m18..." allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
  86. </section>
  88. <!-- ░░░ FOOTER ░░░ -->
  89.   {{include('section/footer.html.twig')}}
  91. {% endblock %}