templates/default/index.html.twig line 1

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