templates/default/index.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  3. {% block title %}Pannex - Les panneaux qui réinventent la cloison{% endblock %}
  5. {% block body %}
  6. <header class="hero d-flex flex-column justify-content-center align-items-center text-center">
  7.     <img src="{{ asset('img/logo-pannex.png') }}" alt="Pannex Logo" class="logo mb-3">
  8.     <p class="text-prim fs-4 fade-in">Les panneaux qui réinventent la cloison</p>
  9.     <p class="text-secondary fade-in delay-2">Spécialiste des panneaux pour cloisons amovibles, Pannex accompagne les professionnels de l’aménagement d’espaces depuis plus de 25 ans.</p>
  10.     <a href="#brochure" class="btn btn-primary fade-in delay-3">Télécharger la brochure</a>
  11. </header>
  13. <section class="container my-5">
  14.     <h2 class="text-center text-prim" style="margin-bottom:50px">Nos chiffres clés</h2>
  15.     <div class="row text-center g-4">
  16.         <!-- 25 ANS D'EXPÉRIENCE -->
  17.         <div class="col-md-3">
  18.             <div class="p-4 border rounded shadow-sm bg-light">
  19.                 <h2 class="fw-bold bl nm">25 ANS</h2>
  20.                 <h4 class="txt-prim">D'EXPÉRIENCE</h4>
  21.                 <p>Un savoir-faire reconnu dans la fabrication de panneaux.</p>
  22.             </div>
  23.         </div>
  25.         <!-- +XXX CLIENTS -->
  26.         <div class="col-md-3">
  27.             <div class="p-4 border rounded shadow-sm bg-light">
  28.                 <h2 class="fw-bold bl nm">+XXX</h2>
  29.                 <h4 class="txt-prim">CLIENTS</h4>
  30.                 <p>En France métropolitaine, DOM et Belgique</p>
  31.             </div>
  32.         </div>
  34.         <!-- 4000 M2 DE SURFACE -->
  35.         <div class="col-md-3">
  36.             <div class="p-4 border rounded shadow-sm bg-light">
  37.                 <h2 class="fw-bold bl nm">4000 M²</h2>
  38.                 <h4 class="txt-prim">DE SURFACE</h4>
  39.                 <p>de production et stockage</p>
  40.             </div>
  41.         </div>
  43.         <!-- 140 RÉFÉRENCES EN STOCK -->
  44.         <div class="col-md-3">
  45.             <div class="p-4 border rounded shadow-sm bg-light">
  46.                 <h2 class="fw-bold bl nm">140</h2>
  47.                 <h4 class="txt-prim">RÉFÉRENCES</h4>
  48.                 <p>2000 combinaisons de panneaux</p>
  49.             </div>
  50.         </div>
  51.     </div>
  52. </section>
  54. <section class="container my-5">
  55.     <h2 class="text-prim text-center">5 COLLECTIONS REVÊTEMENTS <br> PAPIERS & VINYLES</h2>
  56.     <div class="row text-center g-4 mt-4" style="margin: auto;align-items: flex-end;justify-content: space-between;">
  57.         <div class="col-md-2 col-4">
  58.             <img src="{{ asset('img/logo-intemporelle.png') }}" alt="Collection 1" class="img-fluid">
  59.         </div>
  60.         <div class="col-md-2 col-4">
  61.             <img src="{{ asset('img/logo-texstyle.png') }}" alt="Collection 2" class="img-fluid">
  62.         </div>
  63.         <div class="col-md-2 col-4">
  64.             <img src="{{ asset('img//logo-organic.png') }}" alt="Collection 3" class="img-fluid">
  65.         </div>
  66.         <div class="col-md-2 col-6">
  67.             <img src="{{ asset('img/logo-graphik.png') }}" alt="Collection 4" class="img-fluid">
  68.         </div>
  69.         <div class="col-md-2 col-6">
  70.             <img src="{{ asset('img/logo-playsylon.png') }}" alt="Collection 5" class="img-fluid">
  71.         </div>
  72.     </div>
  73. </section>
  75. <section id="brochure" class="brochure-section text-center py-5">
  76.     <div class="overlay">
  77.         <h2 class="text-white">Découvrez notre nouvelle brochure</h2>
  78.         <p class="text-white">Téléchargez notre catalogue et explorez nos 2000 combinaisons de panneaux.</p>
  79.         <a href="{{ asset('documents/brochure_pannex.pdf') }}" class="btn btn-primary">Télécharger la brochure</a>
  80.     </div>
  81. </section>
  83. <section class="container my-5">
  84.     <div class="row flex-column-reverse flex-md-row align-items-center">
  85.         <!-- Colonne gauche : "Un savoir-faire reconnu" avec labels -->
  86.         <div class="col-md-6">
  87.         <div style="width:80%;margin:auto">
  88.             <h2 class="txt-prim">Un savoir-faire reconnu</h2>
  89.             <p>
  90.                 Nos produits sont prescrits et utilisés par l’ensemble des acteurs du secteur, 
  91.                 notamment les fabricants de cloisons, les poseurs, les agenceurs et architectes.
  92.             </p>
  93.             <div class="d-flex gap-3" style="align-items: flex-start !important;">
  94.                 <img src="{{ asset('img/label1.png') }}" alt="Label 1" class="img-fluid" style="max-width: 150px;">
  95.                 <img src="{{ asset('img/label2.png') }}" alt="Label 2" class="img-fluid" style="max-width: 150px;">
  96.             </div>
  97.         </div>
  98.         </div>
  100.         <!-- Colonne droite : "Vos idées, notre expertise" avec image -->
  101.         <div class="col-md-6">
  102.         <div style="width:80%;margin:auto">
  103.             <h2 class="txt-prim">Vos idées, notre expertise</h2>
  104.             <p>
  105.                 Nous sommes en mesure de sourcer tous types de papiers ou vinyles pour répondre à un projet spécifique. 
  106.                 De même qu’étudier toute réalisation par contrecollage de revêtement souple sur plaque technique.
  107.             </p>
  108.            {#} <div class="text-center">
  109.                 <img src="{{ asset('images/expertise.jpg') }}" alt="Expertise" class="img-fluid shadow-lg" style="max-width: 100%;">
  110.             </div> #}
  111.         </div>
  112.     </div>
  113.     </div>
  114. </section>
  117. <section class="container my-5">
  118.     <h2 class="text-center text-prim">Contactez-nous</h2>
  119.     <h4 style="text-align:center;margin:10px 0 50px">Une équipe dédiée, à vos cotés !</h4>
  120.     <div class="row text-center g-4">
  121.         <!-- Service Clients -->
  122.         <div class="col-md-4">
  123.             <div class="p-4 border rounded shadow-sm bg-light contact">
  124.                 <h3 class="txt-prim">Service Clients</h3>
  125.                 <p><i class="fas fa-phone-alt bl"></i> <a href="tel:+33134662323">+33 (0)1 34 66 23 23</a></p>
  126.                 <p><i class="fas fa-envelope bl"></i>  <a href="mailto:contact@pannex.pro">contact@pannex.pro</a></p>
  127.                 <p><i class="fas fa-clock bl"> </i>  Lundi au vendredi, 8h-12h et 13h-16h30</p>
  128.             </div>
  129.         </div>
  130.         
  131.         <!-- Chef de secteur Nord -->
  132.         <div class="col-md-4">
  133.             <div class="p-4 border rounded shadow-sm bg-light contact">
  134.                 <h3 class="txt-prim">Chef de secteur Nord</h3>
  135.                 <p>Wilfried HACHE</p>
  136.                 <p><i class="fas fa-phone-alt bl"></i>  <a href="tel:+33642598554">06 42 59 85 54</a></p>
  137.                 <p><i class="fas fa-envelope bl"></i>  <a href="mailto:w.hache@pannex.pro">w.hache@pannex.pro</a></p>
  138.             </div>
  139.         </div>
  140.         
  141.         <!-- Chef de secteur Sud -->
  142.         <div class="col-md-4">
  143.             <div class="p-4 border rounded shadow-sm bg-light contact">
  144.                 <h3 class="txt-prim">Chef de secteur Sud</h3>
  145.                 <p>Patrice BÉNARD</p>
  146.                 <p><i class="fas fa-phone-alt bl"></i>  <a href="tel:+33645368526">06 45 36 85 26</a></p>
  147.                 <p><i class="fas fa-envelope bl"></i>  <a href="mailto:p.benard@pannex.pro">p.benard@pannex.pro</a></p>
  148.             </div>
  149.         </div>
  150.     </div>
  151. </section>
  152. <section class="container my-5">
  153.     <h2 class="text-center text-prim" style="margin-bottom: 45px">Où nous trouver ?</h2>
  154.     <div class="row flex-column-reverse flex-md-row align-items-center">
  155.         <!-- Bloc Informations Pratiques (S'affiche en premier sur mobile) -->
  156.         <div class="col-md-6">
  157.             <div class="p-4 border rounded shadow-sm bg-light">
  158.                 <h3 class="txt-prim">Notre Adresse</h3>
  159.                 <p style="margin:0"><strong>Pannex</strong></p>
  160.                 <p>18, rue de l’Équerre, 95310 Saint-Ouen-l’Aumône, France</p>
  161.                 
  162.                 <h3 class="txt-prim">Horaires d'ouverture</h3>
  163.                 <ul class="list-unstyled">
  164.                     <li><strong>Service Clients :</strong> Lundi - Vendredi, 8h-12h / 13h-16h30</li>
  165.                     <li><strong>Enlèvement Usine :</strong> Lundi - Vendredi, 9h-12h / 13h-15h</li>
  166.                     <li><strong>Livraison :</strong> Lundi - Vendredi, 6h30 - 09h30</li>
  167.                 </ul>
  168.             </div>
  169.         </div>
  171.         <!-- Bloc Carte OpenStreetMap (S'affiche en dessous sur mobile) -->
  172.         <div class="col-md-6">
  173.             <div id="map" class="rounded shadow-lg" style="height: 300px;"></div>
  174.         </div>
  175.     </div>
  176. </section>
  179. <footer class="text-center py-3 text-light">
  180.     <p>&copy; 2025 Pannex. Tous droits réservés.</p>
  181. </footer>
  183. <script>
  184. document.addEventListener("DOMContentLoaded", function () {
  185.     function revealTextLines() {
  186.         const elements = document.querySelectorAll(".text-prim");
  187.         elements.forEach(el => {
  188.             const rect = el.getBoundingClientRect();
  189.             if (rect.top < window.innerHeight * 0.75) {
  190.                 el.classList.add("animated");
  191.             }
  192.         });
  193.     }
  195.     window.addEventListener("scroll", revealTextLines);
  196.     revealTextLines(); // Pour activer l'effet si l'élément est déjà visible
  197. });
  198. </script>
  200. {% endblock %}