templates/home/index.html.twig line 1

  1. {% extends 'site.html.twig' %}
  6. {% block body %}
  8. {% if app.session.flashBag.has('success') %}
  9.     <script>
  10.         document.addEventListener('DOMContentLoaded', function() {
  11.             Swal.fire({
  12.                 icon: 'success',
  13.                 title: 'Message envoyé avec succès !',
  14.                 text: '{{ app.session.flashBag.get('success')[0] }}',
  15.               confirmButtonText: 'OK',
  16.                 customClass: {
  17.                     confirmButton: 'my-confirm-button-class'
  18.                 }
  19.             });
  20.           
  21.         });
  22.     </script>
  23. {% endif %}
  25. <div id="header-carousel" class="carousel slide carousel-fade" data-bs-ride="carousel" style="margin-bottom: 50px;">
  26.             <div class="carousel-inner">
  27.                 <div class="carousel-item active">
  28.                 <img class="w-100" src="/../assets/site/img/banner-security.webp" alt="Image d'agent de gardiennage Guardian France" style="max-height: 1100px;">
  29.                               <!-- <video class="w-100" autoplay muted loop id="myVideo">
  30.   <source src="https://www.shutterstock.com/shutterstock/videos/28318900/preview/stock-footage-futuristic-security-cameras-scanning-the-street-in-k.webm" type="video/mp4">
  31. </video>   -->
  32.       
  33.                     <div class="carousel-caption d-flex flex-column align-items-center justify-content-center">
  34.                         <div class="p-3" style="max-width: 900px;">
  35.                             <h5 class="text-white text-uppercase mb-3 animated slideInDown">Sécurité & Gardiennage</h5>
  36.                             <h1 class="display-1 text-white mb-md-4 animated zoomIn">Gardiennage professionnel</h1>
  37.                             <a href="{{ path('app_devis')}}" class="btn btn-primary py-md-3 px-md-5 me-3 animated slideInLeft">Obtenir un devis</a>
  38.                             <a href="{{ path('app_contact')}}" class="btn btn-outline-light py-md-3 px-md-5 animated slideInRight">Contactez nous</a>
  39.                         </div>
  40.                     </div>
  41.                 </div>
  42.               
  43.                 <div class="carousel-item">
  44.                    <img class="w-100" src="/../assets/site/img/SSIAP.webp" alt="Image d'agent SSIAP Guardian France" style="max-height: 1100px;">
  45.                     <div class="carousel-caption d-flex flex-column align-items-center justify-content-center">
  46.                         <div class="p-3" style="max-width: 900px;">
  47.                               <h5 class="text-white text-uppercase mb-3 animated slideInDown">Sécurité & Innovations</h5>
  48.                             <h1 class="display-1 text-white mb-md-4 animated zoomIn">Agents qualifiés<br> surveillance 24/7</h1>
  49.                             <a href="{{ path('app_devis')}}" class="btn btn-primary py-md-3 px-md-5 me-3 animated slideInLeft">Obtenir un devis</a>
  50.                            <a href="{{ path('app_contact')}}" class="btn btn-outline-light py-md-3 px-md-5 animated slideInRight">Contactez nous</a>
  51.                         </div>
  52.                     </div>
  53.                 </div>
  55.                      <div class="carousel-item">
  56.                    <img class="w-100" src="/../assets/site/img/alarme-ssiap.webp" alt="Image d'agent SSIAP Guardian France" style="max-height: 1100px;">
  57.                     <div class="carousel-caption d-flex flex-column align-items-center justify-content-center">
  58.                         <div class="p-3" style="max-width: 900px;">
  59.                               <h5 class="text-white text-uppercase mb-3 animated slideInDown">Sécurité & Incendie</h5>
  60.                             <h1 class="display-1 text-white mb-md-4 animated zoomIn">Surveillance fiable<br> tranquillité d'esprit</h1>
  61.                             <a href="{{ path('app_devis')}}" class="btn btn-primary py-md-3 px-md-5 me-3 animated slideInLeft">Obtenir un devis</a>
  62.                             <a href="{{ path('app_contact')}}" class="btn btn-outline-light py-md-3 px-md-5 animated slideInRight">Contactez nous</a>
  63.                         </div>
  64.                     </div>
  65.                 </div>
  66.             </div>
  67.             <button class="carousel-control-prev" type="button" data-bs-target="#header-carousel"
  68.                 data-bs-slide="prev">
  69.                 <span class="carousel-control-prev-icon" aria-hidden="true"></span>
  70.                 <span class="visually-hidden">Previous</span>
  71.             </button>
  72.             <button class="carousel-control-next" type="button" data-bs-target="#header-carousel"
  73.                 data-bs-slide="next">
  74.                 <span class="carousel-control-next-icon" aria-hidden="true"></span>
  75.                 <span class="visually-hidden">Next</span>
  76.             </button>
  77.         </div>
  78.     </div>
  81.    <div class="container-fluid py-5 wow fadeInUp" data-wow-delay="0.1s" style="visibility: visible; animation-delay: 0.1s; animation-name: fadeInUp;">
  82.         <div class="container py-5">
  83.             <div class="row g-5">
  84.                 <div class="col-lg-7">
  85.                     <div class="section-title position-relative pb-3 mb-5">
  86.                         <h5 class="fw-bold text-primary text-uppercase">Le Groupe Guardian rien d'autres</h5>
  87.                         <h1 class="mb-0">Protégez votre avenir avec notre expérience en sécurité privée</h1>
  88.                     </div>
  89.                    <p class="mb-4">Guardian France est une Société de Sécurité Privée spécialisée dans la sécurité, le gardiennage, les services cynophiles et les prestations SSIAP. </p>
  91. <p class="mb-4">Avec 15 années d'expériences, notre entreprise offre une gamme complète de services de sécurité pour répondre aux besoins variés de nos clients. En tant qu'entreprise de gardiennage et de sécurité, nous assurons la sécurité de divers types d'espaces tels que les bureaux, les commerces, les grandes surfaces, les foires et bien plus encore.</p>
  95. <p class="mb-4">En tant que société de surveillance et de sécurité, notre objectif principal est d'assurer la tranquillité d'esprit de nos clients. Nous mettons en place des mesures de sécurité rigoureuses et efficaces pour garantir la satisfaction et la sécurité de nos clients.</p>
  97. <p class="mb-4"><p>Optez pour notre société de sécurité privée expérimentée, basée en Île-de-France, dans les départements suivants :</p>
  98. <ul>
  99.   <li>75 - Paris</li>
  100.   <li>77 - Seine-et-Marne</li>
  101.   <li>78 - Yvelines</li>
  102.   <li>91 - Essonne</li>
  103.   <li>92 - Hauts-de-Seine</li>
  104.   <li>93 - Seine-Saint-Denis</li>
  105.   <li>94 - Val-de-Marne</li>
  106.   <li>95 - Val-d'Oise</li>
  107. </ul>
  108. <p>Nous sommes là pour répondre à tous vos besoins en matière de sécurité et de gardiennage. Contactez-nous dès aujourd'hui pour discuter de vos besoins spécifiques et obtenir un devis personnalisé.</p>
  109. </p>
  111.                     <div class="row g-0 mb-3">
  112.                         <div class="col-sm-6 wow zoomIn" data-wow-delay="0.2s" style="visibility: visible; animation-delay: 0.2s; animation-name: zoomIn;">
  113.                             <h5 class="mb-3"><i class="fa fa-check text-primary me-3"></i>Équipe Professionnelle</h5>
  114.                             <h5 class="mb-3"><i class="fa fa-check text-primary me-3"></i>Société agrées CNAPS</i></h5>
  115.                         </div>
  116.                         <div class="col-sm-6 wow zoomIn" data-wow-delay="0.4s" style="visibility: visible; animation-delay: 0.4s; animation-name: zoomIn;">
  117.                             <h5 class="mb-3"><i class="fa fa-check text-primary me-3"></i>Disponible 24/7</h5>
  118.                             <h5 class="mb-3"><i class="fa fa-check text-primary me-3"></i>Réponse immédiate</h5>
  119.                         </div>
  120.                     </div>
  121.                     <div class="d-flex align-items-center mb-4 wow fadeIn" data-wow-delay="0.6s" style="visibility: visible; animation-delay: 0.6s; border-radius: 25%; animation-name: fadeIn;">
  122.                         <div class="bg-primary d-flex align-items-center justify-content-center rounded" style="width: 60px; height: 60px;  border-radius: 25% ">
  123.                             <i class="fa fa-phone-alt text-white"></i>
  124.                         </div>
  125.                         <div class="ps-4">
  126.                             <h5 class="mb-2">Pour tout renseignements</h5>
  127.                             <h4 class="text-primary mb-0"> 01 48 10 23 50</h4>
  128.                         </div>
  129.                     </div>
  130.                     <a href="{{ path('app_devis')}}"class="btn btn-primary py-3 px-5 mt-3 wow zoomIn" data-wow-delay="0.9s" style="visibility: visible; animation-delay: 0.9s; animation-name: zoomIn;  border-radius: 25px 25px 25px 25px">Demander un devis</a>
  131.                 </div>
  132.                <div class="col-lg-5" style="min-height: 500px;">
  133. <div class="position-relative h-100">
  134. <img class="position-absolute w-100 h-100 rounded wow zoomIn" data-wow-delay="0.9s" src="/../assets/site/img/GuardianFrance.JPG"alt="Siège du groupe Guardian France" style="object-fit: cover; visibility: visible; animation-delay: 0.9s; animation-name: zoomIn;">
  135. </div>
  136. </div>
  137.             </div>
  138.         </div>
  139.     </div>
  140.     
  143. <div class="container-fluid py-5 wow fadeInUp" data-wow-delay="0.1s" style="visibility: visible; animation-delay: 0.1s;">
  144.         <div class="container py-5">
  145.             <div class="section-title text-center position-relative pb-3 mb-5 mx-auto" >
  146.                 <h5 class="fw-bold text-primary text-uppercase">Nos agents protégent votre avenir</h5>
  147.                 <h1 class="mb-0">Faites confiance à notre expertise en sécurité</h1>
  148.             </div>
  149.             <div class="row g-5">
  150.                 <div class="col-lg-6 wow zoomIn" data-wow-delay="0.3s" style="visibility: visible; animation-delay: 0.3s;">
  151.                     <div class="service3-item bg-light rounded ">
  152.                         <div class="position-relative d-flex p-5">
  153.                             <div class="">
  154.                                <img class="img-fluid" src="/../assets/site/img/Agent-guardian.png" alt="Image d'agent de Sécurité et prévention Guardian France" >
  155.                             </div>
  156.                             <div class="ps-2">
  157.                                 <h4 class="mb-3">Agent de Sécurité & Prévention</h4>
  158.                                 <p>Les agents de sécurité assurent la protection des personnes et des biens sur un site en prévenant les actes malveillants et en intervenant en cas d'urgence.</p>
  159.                                  <a href="{{path('app_security')}}" class="btn btn-outline-secondary" data-wow-delay="0.9s" style="visibility: visible; animation-delay: 0.9s; animation-name: zoomIn;  border-radius: 25px 25px 25px 25px">En savoir plus</a>
  160.                             </div>
  161.                         </div>
  162.                     </div>
  163.                 </div><div class="col-lg-6 wow zoomIn" data-wow-delay="0.3s" style="visibility: visible; animation-delay: 0.3s;">
  164.                     <div class="service3-item bg-light rounded ">
  165.                         <div class="position-relative d-flex p-5">
  166.                             <div class="">
  167.                                <img class="img-fluid" src="/../assets/site/img/AGENT-SSIAP_1.png" alt="Image d'agent SSIAP Guardian France" >
  168.                             </div>
  169.                             <div class="ps-2">
  170.                                  <h4 class="mb-3">Agent de Sécurité Incendie</h4>
  171.                                 <p>Les agents SSIAP assurent la sécurité incendie en entretenant les équipements, en identifiant les risques, en intervenant en cas d'incendie ou assistance en cas d'urgence.
  173. </p>
  174.                                  <a href="{{path('app_ssiap')}}" class="btn btn-outline-secondary" data-wow-delay="0.9s" style="visibility: visible; animation-delay: 0.9s; animation-name: zoomIn;  border-radius: 25px 25px 25px 25px">En savoir plus</a>
  175.                             </div>
  176.                         </div>
  177.                     </div>
  178.                 </div>
  179.                 <div class="col-lg-6 wow zoomIn" data-wow-delay="0.3s" style="visibility: visible; animation-delay: 0.3s;">
  180.                     <div class="service3-item bg-light rounded ">
  181.                         <div class="position-relative d-flex p-5">
  182.                             <div class="">
  183.                                <img class="img-fluid" src="/../assets/site/img/Agent-cyno.png" alt="Image d'agent cynophile Guardian France" style="margin-right: 2px">
  184.                             </div>
  185.                             <div class="ps-2">
  186.                                 <h4 class="mb-3">Agent de Sécurité Cynophile</h4>
  187.                                 <p>Les agents de sécurité cynophiles travaillent avec un chien dressé pour détecter les menaces potentielles. Ils sont employés dans des lieux sensibles pour prévenir et détecter tout danger</p>
  188.                                  <a href="{{path('app_cyno')}}" class="btn btn-outline-secondary" data-wow-delay="0.9s" style="visibility: visible; animation-delay: 0.9s; animation-name: zoomIn;  border-radius: 25px 25px 25px 25px">En savoir plus</a>
  189.                             </div>
  190.                         </div>
  191.                     </div>
  192.                 </div>
  193.                 <div class="col-lg-6 wow zoomIn" data-wow-delay="0.3s" style="visibility: visible; animation-delay: 0.3s;">
  194.                     <div class="service3-item bg-light rounded ">
  195.                         <div class="position-relative d-flex p-5">
  196.                             <div class="">
  197.                                <img class="img-fluid" src="/../assets/site/img/Agent-traffic-guardian.png" alt="Image d'agent de gardiennage Guardian France" >
  198.                             </div>
  199.                             <div class="ps-2">
  200.                                   <h4 class="mb-3">Agent de Sécurité Gardiennage</h4>
  201.                                 <p>Les agents de gardiennage assurent la surveillance et la protection des sites et des biens en détectant les intrusions, en contrôlant les accès et en intervenant rapidement en cas d'incident.</p>
  202.                                  <a href="{{path('app_gardien')}}" class="btn btn-outline-secondary" data-wow-delay="0.9s" style="visibility: visible; animation-delay: 0.9s; animation-name: zoomIn;  border-radius: 25px 25px 25px 25px">En savoir plus</a>
  203.                             </div>
  204.                         </div>
  205.                     </div>
  206.                 </div>
  208.                <div class="row justify-content-center" style="margin-top: 30px">
  209.         <div class="col-lg-6 wow zoomIn" data-wow-delay="0.3s" style="visibility: visible; animation-delay: 0.3s;">
  210.             <div class="service3-item bg-light rounded">
  211.                 <div class="position-relative d-flex p-5">
  212.                     <div class="">
  213.                         <img class="img-fluid" src="/../assets/site/img/rondier.png" alt="Image d'agent rondier Guardian France">
  214.                     </div>
  215.                     <div class="ps-2">
  216.                         <h4 class="mb-3">Agent de Sécurité Rondier</h4>
  217.                         <p>Guardian France effectuent des patrouilles régulières pour assurer la protection et la sûreté des lieux qu'ils surveillent. Leur présence dissuasive et leur vigilance constante contribuent à maintenir un environnement sécurisé et rassurant pour tous.</p>
  218.                         <a href="{{path('app_rondier')}}" class="btn btn-outline-secondary" data-wow-delay="0.9s" style="visibility: visible; animation-delay: 0.9s; animation-name: zoomIn; border-radius: 25px 25px 25px 25px">En savoir plus</a>
  219.                     </div>
  220.                 </div>
  221.             </div>
  222.         </div>
  223.     </div>
  224.              
  225.             
  226.             </div>
  227.         </div>
  228.     </div>
  229.  <div class="container-fluid py-5 wow fadeInUp" data-wow-delay="0.1s" style="visibility: visible; animation-delay: 0.1s;">
  230.         <div class="container py-5">
  231.             <div class="section-title-1 text-center position-relative pb-3 mb-5 mx-auto" style="max-width: 600px;">
  232.                 <h5 class="fw-bold text-primary text-uppercase">Pourquoi nous choisir ?</h5>
  233.                 <h1 class="mb-0">Sécurité discrète, confiance assurée : choisissez Guardian</h1>
  234.             </div>
  235.             <div class="row g-5">
  236.                 <div class="col-lg-4">
  237.                     <div class="row g-5">
  238.                         <div class="col-md-6 col-lg-12 wow zoomIn" data-wow-delay="0.2s" style="visibility: visible; animation-delay: 0.2s;">
  239.                            
  240.                             <h3>Une qualité de service</h3>
  241.                             <p class="mb-0">Indépendamment de nos compétences, notre exigence nous conduit en permanence à offrir des prestations de services sur mesures et évolutives, adaptée aux besoins du
  242. marché. La satisfaction de nos clients est au cœur de nos préoccupations.</p>
  243.                         </div>
  244.                         <div class="col-md-6 col-lg-12 wow zoomIn" data-wow-delay="0.6s" style="visibility: visible; animation-delay: 0.6s;">
  245.                           
  246.                             <h4>Une gestion structurée et rigoureuse</h4>
  247.                             <p class="mb-0">Nous accompagnons de manière efficace le déploiement de vos
  248. projets, au travers de recommandations pragmatiques et de documents de synthèse à forte valeur
  249. ajoutée.</p>
  250.                         </div>
  251.                          <div class="col-md-6 col-lg-12 wow zoomIn" data-wow-delay="0.6s" style="visibility: visible; animation-delay: 0.6s;">
  252.                           
  253.                             <h4>Un réseau pluridisciplinaire</h4>
  254.                           <p class="mb-0">Nous pouvons nous appuyer sur un réseau de partenaires et d'experts reconnus.</p>
  255.                         </div>
  256.                     </div>
  257.                 </div>
  259.                 <div class="col-lg-4  wow zoomIn" data-wow-delay="0.9s" style="min-height: 350px; visibility: visible; animation-delay: 0.9s; animation-name: zoomIn;">
  260. <div class="position-relative h-100">
  261. <img class="position-absolute w-100 h-100 rounded wow zoomIn" data-wow-delay="0.1s" src="/../assets/site/img/gg.png" alt="Les agents du groupe Guardian France" style="object-fit: cover; visibility: visible; animation-delay: 0.1s; animation-name: zoomIn;">
  262. </div>
  263. </div>
  264.                 <div class="col-lg-4">
  265.                     <div class="row g-5">
  266.                         <div class="col-md-6 col-lg-12 wow zoomIn" data-wow-delay="0.4s" style="visibility: visible; animation-delay: 0.4s;">
  267.                             
  268.                             <h4>Une proximité et une réactivité</h4>
  269.                             <p class="mb-0">La disponibilité, l’écoute et la communication, nous permettent de construire avec vous une relation de partenariat de proximité dans la durée en proposant des services sur mesure adaptée à vos besoins et vos exigences.</p>
  270.                         </div>
  271.                         <div class="col-md-6 col-lg-12 wow zoomIn" data-wow-delay="0.8s" style="visibility: visible; animation-delay: 0.8s;">
  272.                             
  273.                             <h4>Une innovation</h4>
  274.                             <p class="mb-0">Sur un marché en perpétuelle mutation, nous nous efforçons de mettre en place des
  275. solutions innovantes pour toujours mieux répondre aux contraintes et enjeux de nos missions.</p>
  276.                         </div>
  277.                         <div class="col-md-6 col-lg-12 wow zoomIn" data-wow-delay="0.8s" style="visibility: visible; animation-delay: 0.8s;">
  278.                            
  279.                             <h4>Une tarification compétitive</h4>
  280.                             <p class="mb-0">Une structure légère et des solutions flexibles adaptées à vos besoins,
  281. nous permettent de proposer des budgets optimisés.</p>
  282.                         </div>
  283.                     </div>
  284.                 </div>
  285.             </div>
  286.         </div>
  287.     </div><div class="container-fluid py-5 wow fadeInUp animated" data-wow-delay="0.1s" style="visibility: visible; animation-delay: 0.1s; animation-name: fadeInUp;">
  288.     <div class="container py-5">
  289.         <div class="section-title-1 text-center position-relative pb-3 mb-5 mx-auto" style="max-width: 600px;">
  290.             <h5 class="fw-bold text-primary text-uppercase">Les prestations du Groupe Guardian</h5>
  291.             <h1 class="mb-0">Une entreprise plus sûre avec Guardian</h1>
  292.         </div>
  293.         <div class="row mt-n2 wow fadeInUp" data-wow-delay="0.3s" style="visibility: visible; animation-delay: 0.3s; animation-name: fadeInUp;">
  294.             <div class="col-12 text-center">
  295.                 <ul class="list-inline mb-5" id="portfolio-flters">
  296.                     {% for categorie in categories %}
  297.                         <li class="btn btn-outline-primary py-2 px-4" data-filter=".{{ categorie.id }}">
  298.                              <i class="{{ categorie.getIcon() }}"></i>{{ categorie.name }}
  299.                           
  300.                         </li>
  301.                     {% endfor %}
  302.                 </ul>
  303.             </div>
  304.         </div>
  305.         
  306.         <div class="row g-5 portfolio-container" style="position: relative; height: 895.966px;">
  307.             {% for categorie in categories %}
  308.                 {% for prestation in categorie.prestations %}
  309.                     <div class="col-xl-4 col-lg-6 col-md-6 portfolio-item {{ categorie.id }} wow slideInUp" data-wow-delay="0.1s" style="position: absolute; left: 0px; top: 0px; visibility: hidden;; animation-delay: 0.1s;">
  310.                         <div class="position-relative portfolio-box">
  311.                             <div class="portfolio-img rounded overflow-hidden">
  312.                                 <img class="img-fluid w-100" src="{{ vich_uploader_asset(prestation, 'imageFile') }}" alt="">
  313.                             </div>
  314.                             <a class="portfolio-title border-bottom border-5 border-primary" href="">
  315.                                <h4>{{ prestation.title }}</h4>
  316.                             </a>
  317.                             <div class="portfolio-btn">
  318.                                 <a href="" data-lightbox="portfolio"><i class="bi bi-plus display-1 text-white"></i></a>
  319.                             </div>
  320.                         </div>
  321.                     </div>
  322.                 {% endfor %}
  323.             {% endfor %}
  324.         </div>
  325.     </div>
  326. </div>
  327. {{ include('partenaire.html.twig') }}
  329. <div class="container-fluid py-5 wow fadeInUp" data-wow-delay="0.1s" style="visibility: visible; animation-delay: 0.1s;background-color: #f2f2f280;">
  330.         
  331.     <div class="container py-5">
  332.         <div class="row g-5">
  333.           
  334.                <div class="col-md-7">
  335.                     <div class="section-title position-relative pb-3 mb-5">
  336.                         <h5 class="fw-bold text-primary text-uppercase">Devis personnalisé pour une sécurité renforcée</h5>
  337.                         <h1 class="mb-0">Demandez votre devis personnalisé dès maintenant avec Guardian France</h1>
  338.                     </div>
  339.                     <div class="row gx-3">
  340.                         <div class="col-sm-6 wow zoomIn" data-wow-delay="0.2s" style="visibility: visible; animation-delay: 0.2s;">
  341.                             <h5 class="mb-4"><i class="fa fa-reply text-primary me-3" aria-hidden="true"></i>Traitement sous 24H</h5>
  342.                         </div>
  343.                         <div class="col-sm-6 wow zoomIn" data-wow-delay="0.4s" style="visibility: visible; animation-delay: 0.4s;">
  344.                             <h5 class="mb-4"><i class="fa fa-phone-alt text-primary me-3" aria-hidden="true"></i>Réponse au téléphone immédiate</h5>
  345.                         </div>
  346.                     </div>
  347.                     <p class="mb-4">
  349.                     Chez Guardian France, nous sommes spécialisés dans la sécurité des entreprises et nous proposons une gamme complète de solutions de sécurité pour répondre aux besoins spécifiques de nos clients.</p>
  351. <p>Pour vous aider à déterminer les besoins de sécurité de votre entreprise, nous vous proposons un devis personnalisé gratuit. Remplissez simplement le formulaire en ligne avec les informations sur votre entreprise et vos besoins de sécurité, et notre équipe d'experts vous contactera pour discuter des solutions de sécurité les plus adaptées à vos besoins.</p>
  352. <p class="mb-4">Nos agents de sécurité, agents SSIAP et agents cynophiles sont hautement qualifiés et formés pour offrir une protection maximale. Que vous ayez besoin de rondes de sécurité, de surveillance de chantier ou de sécurité incendie, notre équipe professionnelle est là pour vous aider.</p>
  353. <p>Nos solutions de sécurité comprennent la surveillance, la sécurité incendie, le contrôle d'accès, la vidéosurveillance, la sécurité événementielle, la gestion de crise et bien plus encore.</p> <p> Nous sommes fiers de travailler avec des professionnels de la sécurité hautement qualifiés pour assurer la sécurité de nos clients, et nous sommes convaincus que nous pouvons trouver la solution de sécurité idéale pour votre entreprise.</p>
  354.                     <div class="d-flex align-items-center mt-2 wow zoomIn" data-wow-delay="0.6s" style="visibility: visible; animation-delay: 0.6s;">
  355.                         <div class="bg-primary d-flex align-items-center justify-content-center rounded" style="width: 60px; height: 60px;">
  356.                             <i class="fa fa-phone-alt text-white" aria-hidden="true"></i>
  357.                         </div>
  358.                         <div class="ps-4">
  359.                             <h5 class="mb-2">Contactez nous</h5>
  360.                             <h4 class="text-primary mb-0">01 48 10 23 50</h4>
  361.                         </div>
  362.                     </div>
  363.               
  364.             </div>
  365.             
  366.             <div class="col-lg-5">
  367.                 <!-- Formulaire de contact -->
  368.                 <div class="col-lg-9 col-md-9 wow slideInUp mx-md-0" data-wow-delay="0.3s">
  369.                     {{ form_start(form) }}
  370. <div class="row g-7">
  371.     <center><h5 class="fw-bold text-primary text-uppercase">Formulaire de contact</h5></center>
  372.     <div class="col-md-12 mb-3">
  373.         {{ form_row(form.name, {'label_attr': {'class': 'required-label'}}) }}
  374.     </div>
  375.     <div class="col-md-12 mb-3">
  376.         {{ form_row(form.firstname, {'label_attr': {'class': 'required-label'}}) }}
  377.     </div>
  378.     <div class="col-md-12 mb-3">
  379.         {{ form_row(form.email, {'label_attr': {'class': 'required-label'}}) }}
  380.     </div>
  381.     <div class="col-md-12 mb-3">
  382.         {{ form_row(form.phone, {'label_attr': {'class': 'required-label'}}) }}
  383.     </div>
  384.     <div class="col-md-12 mb-3">
  385.         {{ form_row(form.society, {'label_attr': {'class': 'required-label'}}) }}
  386.     </div>
  387.      <div class="col-md-12 mb-3">
  388.         {{ form_row(form.city, {'label_attr': {'class': 'required-label'}}) }}
  389.     </div>
  390.      <div class="col-md-12 mb-3">
  391.         {{ form_row(form.adresse, {'label_attr': {'class': 'required-label'}}) }}
  392.     </div>
  393.      <div class="col-md-12 mb-3">
  394.         {{ form_row(form.zip, {'label_attr': {'class': 'required-label'}}) }}
  395.     </div>
  396.     <div class="col-md-12 mb-3">
  397.         {{ form_row(form.services, {'label_attr': {'class': 'required-label'}}) }}
  398.     </div>
  399.     <div class="col-12 mb-3">
  400.         {{ form_row(form.subject, {'label_attr': {'class': 'required-label'}}) }}
  401.     </div>
  402.     <div class="form-check mb-3">
  403.         {{ form_widget(form.consent, {'attr': {'class': 'form-check-input'}}) }}
  404.         {{ form_label(form.consent, null, {'label_attr': {'class': 'form-check-label'}}) }}
  405.     </div>
  406.     <div class="col-12">
  407.         <button class="btn btn-primary w-100 py-3" type="submit">Envoyer</button>
  408.     </div>
  409. </div>
  410. {{ form_end(form) }}
  412.                 </div>
  413.             </div>
  414.         </div>
  415.     </div>
  416. </div>
  419. <div class="container-fluid py-5 wow fadeInUp" data-wow-delay="0.1s" style="visibility: visible; animation-delay: 0.1s; animation-name: fadeInUp;margin-top: 20px">
  420. <div class="container py-5">
  421.  <div class="section-title text-center position-relative pb-3 mb-5 mx-auto" style="max-width: 600px;">
  422.                 <h5 class="fw-bold text-primary text-uppercase">Le Groupe Guardian s'engagent</h5>
  423.                 <h1 class="mb-0"> Nos actions pour un impact social positif</h1>
  424.             </div>
  425. <div class="row g-5">
  426. <div class="col-lg-3 col-md-6 wow slideInUp" data-wow-delay="0.2s" style="visibility: visible; animation-delay: 0.2s; animation-name: slideInUp;">
  427. <div class="position-relative d-flex flex-column align-items-center text-center">
  428. <div class="process-icon rounded d-flex align-items-center justify-content-center mb-4">
  429.   <img class="img-fluid" src="/../assets/site/img/medef.png" alt="Le Groupe Guardian s'engagent avec le MEDEF 93+94"style="width: 160px; height: 160px;">
  430. </div>
  431. <h3>MEDEF 93+94</h3>
  433. </div>
  434. </div>
  435. <div class="col-lg-3 col-md-6  wow slideInUp" data-wow-delay="0.4s" style="visibility: visible; animation-delay: 0.4s; animation-name: slideInUp;">
  436. <div class="position-relative d-flex flex-column align-items-center text-center">
  437. <div class="process-icon rounded d-flex align-items-center justify-content-center mb-4">
  438.  <img class="img-fluid" src="/../assets/site/img/diversite.png" alt="Le Groupe Guardian s'engagent avec la Charte de la diversité" style="width: 160px; height: 160px;">
  439. </div>
  440. <h3>Charte de la diversité </h3>
  442. </div>
  443. </div>
  444. <div class="col-lg-3 col-md-6 wow slideInUp" data-wow-delay="0.6s" style="visibility: visible; animation-delay: 0.6s; animation-name: slideInUp;">
  445. <div class="position-relative d-flex flex-column align-items-center text-center">
  446. <div class="process-icon rounded d-flex align-items-center justify-content-center mb-4">
  447. <img class="img-fluid" src="/../assets/site/img/l'europe.png" alt="Le Groupe Guardian S'engagent avec L'europe" style="width: 160px; height: 160px;">
  448. </div>
  449. <h3>L’Europe s’engage</h3>
  451. </div>
  452. </div>
  453. <div class="col-lg-3 col-md-6  wow slideInUp" data-wow-delay="0.8s" style="visibility: visible; animation-delay: 0.8s; animation-name: slideInUp;">
  454. <div class="position-relative d-flex flex-column align-items-center text-center">
  455.   <div class="process-icon rounded d-flex align-items-center justify-content-center mb-4">
  456. <img class="img-fluid" src="/../assets/site/img/emplitude.png" alt="Le Groupe Guardian S'engagent avec le Label Emplitude" style="width: 160px; height: 160px;">
  457. </div>
  458. <h3>Label Emplitude</h3>
  460. </div>
  461. </div>
  462. </div>
  463. </div>
  464. </div>
  465.     
  468.     <!-- Blog Start -->
  469. <div class="container-fluid py-5 wow fadeInUp" data-wow-delay="0.1s">
  470.     <div class="container py-5">
  471.         <div class="section-title text-center position-relative pb-3 mb-5 mx-auto" style="max-width: 600px;">
  472.             <h5 class="fw-bold text-primary text-uppercase">Nos actualités</h5>
  473.             <h1 class="mb-0">Restez informé des actualités les plus récentes</h1>
  474.         </div>
  476.         <div class="row g-5">
  477.             {% for actuality in actualities|reverse|slice(0, 3) %}
  478.             <div class="col-lg-4 wow slideInUp" data-wow-delay="0.3s" style="visibility: visible; animation-delay: 0.3s;">
  479.                 <div class="blog-item bg-light rounded overflow-hidden">
  480.                     <div class="blog-img position-relative overflow-hidden">
  481.                         <img class="img-fluid w-100" src="{{ vich_uploader_asset(actuality, 'imageFile') }}" alt="">
  482.                         <a class="position-absolute top-0 start-0 bg-primary text-white rounded-end mt-5 py-2 px-4" href="">{{actuality.categories.name}}</a>
  483.                     </div>
  484.                     <div class="p-4">
  485.                         <div class="d-flex mb-3">
  486.                         
  487.                             <small><i class="far fa-calendar-alt text-primary me-2"></i>{{actuality.createdAt|date("d/m/Y ") }}</small>
  488.                         </div>
  489.                         <h4 class="mb-3">{{ actuality.title }}</h4>
  490.                          <p>{{ actuality.text|slice(0, 150) }}{% if actuality.text|length > 150 %}...{% endif %}</p>
  491.                         <a class="text-uppercase" href="">En savoir plus<i class="bi bi-arrow-right"></i></a>
  492.                     </div>
  493.                 </div>
  494.             </div>
  495.             {% else %}
  496.             <tr>
  497.                 <center><strong><td colspan="4">Aucun article trouvé</td></strong></center>
  498.             </tr>
  499.             {% endfor %}
  500.         </div>
  501.     </div>
  502. </div>
  504.   
  505.       <div class="container-fluid py-5 wow fadeInUp" data-wow-delay="0.1s" style="visibility: visible; animation-delay: 0.1s; animation-name: fadeInUp;">
  506. <div class="container py-5">
  507. <div class="row g-5">
  508. <div class="col-lg-6">
  509. <div class="section-title-2 position-relative pb-3 mb-5">
  510. <h5 class="fw-bold text-primary text-uppercase">Foires aux Questions</h5>
  511. <h1 class="mb-0">Une question ? <br> Consulter notre FAQ</h1>
  512. </div>
  513. <p class="mb-4">Nous sommes là pour répondre à toutes vos questions concernant nos prestations !</p> <p>Pour une sécurité optimale et un gardiennage fiable, faites confiance à notre entreprise de sécurité et gardiennage. Nous sommes une société de gardiennage et de sécurité privée opérant dans les départements 75, 77, 78, 91, 92, 93, 94 et 95.</p><p> Notre équipe d'agents de sécurité, d'agents cynophiles, de vigiles et d'intervenants sur alarme est hautement qualifiée pour répondre à vos besoins spécifiques en matière de sécurité.</p>
  514. <p>En tant qu'entreprise spécialisée dans le gardiennage, la surveillance et la sécurité incendie, nous offrons des services de qualité supérieure. Nos agents de sécurité incendie certifiés SSIAP assurent la protection de vos biens et de vos personnes en cas d'incendie. De plus, nos maîtres-chiens professionnels sont compétents pour détecter et prévenir les risques de sécurité.</p>
  516. </div>
  517. <div class="col-lg-6">
  518. <div class="accordion accordion-custom" id="accordionExample">
  519. <div class="accordion-item wow fadeInUp" data-wow-delay="0.1s" style="visibility: visible; animation-delay: 0.1s; animation-name: fadeInUp;">
  520. <h2 class="accordion-header" id="headingTwo">
  521. <button class="accordion-button fw-semi-bold" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
  522. Quels services propose Guardian France ?
  523. </button>
  524. </h2>
  525. <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
  526. <div class="accordion-body">
  527. Guardian France propose une gamme complète de services de sécurité, comprenant le gardiennage, la surveillance, la sécurité incendie, les prestations SSIAP, et bien plus encore.
  528. </div>
  529. </div>
  530. </div>
  531. <div class="accordion-item wow fadeInUp" data-wow-delay="0.2s" style="visibility: visible; animation-delay: 0.2s; animation-name: fadeInUp;">
  532. <h2 class="accordion-header" id="headingTwo">
  533. <button class="accordion-button collapsed fw-semi-bold" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
  534.  Proposez-vous des agents cynophiles ?
  535. </button>
  536. </h2>
  537. <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
  538. <div class="accordion-body">
  539. Oui, nous proposons des agents cynophiles, également appelés maîtres-chiens, qui utilisent des chiens entraînés pour renforcer la sécurité et la détection.
  540. Guardian France propose une gamme complète de services de sécurité, comprenant le gardiennage, la surveillance, la sécurité incendie, les prestations SSIAP, et bien plus encore.
  541. </div>
  542. </div>
  543. </div>
  544. <div class="accordion-item wow fadeInUp" data-wow-delay="0.2s" style="visibility: visible; animation-delay: 0.2s; animation-name: fadeInUp;">
  545. <h2 class="accordion-header" id="headingThree">
  546. <button class="accordion-button collapsed fw-semi-bold" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
  547. Est-ce que Guardian France offre des services de sécurité privée ?
  548. </button>
  549. </h2>
  550. <div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionExample">
  551. <div class="accordion-body">
  552. Oui, Guardian France est une entreprise de sécurité privée agréée, spécialisée dans la protection des biens et des personnes.
  553. </div>
  554. </div>
  555. </div>
  556. <div class="accordion-item wow fadeInUp" data-wow-delay="0.2s" style="visibility: visible; animation-delay: 0.2s; animation-name: fadeInUp;">
  557. <h2 class="accordion-header" id="headingfour">
  558. <button class="accordion-button collapsed fw-semi-bold" type="button" data-bs-toggle="collapse" data-bs-target="#collapsefour" aria-expanded="false" aria-controls="collapsefour">
  559.  Qu'est-ce que le SSIAP ?
  560. </button>
  561. </h2>
  562. <div id="collapsefour" class="accordion-collapse collapse" aria-labelledby="headingfour" data-bs-parent="#accordionExample">
  563. <div class="accordion-body">
  564. Le SSIAP (Service de Sécurité Incendie et d'Assistance aux Personnes) est un diplôme obligatoire pour les agents chargés de la sécurité incendie dans les établissements recevant du public (ERP) et les immeubles de grande hauteur (IGH).
  565. </div>
  566. </div>
  567. </div>
  569. <div class="accordion-item wow fadeInUp" data-wow-delay="0.2s" style="visibility: visible; animation-delay: 0.2s; animation-name: fadeInUp;">
  570. <h2 class="accordion-header" id="headingfive">
  571. <button class="accordion-button collapsed fw-semi-bold" type="button" data-bs-toggle="collapse" data-bs-target="#collapsefive" aria-expanded="false" aria-controls="collapsefive">
  572.  Quel est le tarif pour les agents SSIAP et le gardiennage ?
  573. </button>
  574. </h2>
  575. <div id="collapsefive" class="accordion-collapse collapse" aria-labelledby="headingfive" data-bs-parent="#accordionExample">
  576. <div class="accordion-body">
  577. Les tarifs pour les agents SSIAP et le gardiennage varient en fonction des besoins spécifiques de chaque client. Nous vous invitons à nous contacter pour obtenir un devis personnalisé.
  578. </div>
  579. </div>
  580. </div>
  581. <div class="accordion-item wow fadeInUp" data-wow-delay="0.3s" style="visibility: visible; animation-delay: 0.3s; animation-name: fadeInUp;">
  582. <h2 class="accordion-header" id="headingsix">
  583. <button class="accordion-button collapsed fw-semi-bold" type="button" data-bs-toggle="collapse" data-bs-target="#collapsesix" aria-expanded="false" aria-controls="collapsesix">
  584. Offrez-vous des services de surveillance incendies et sécurité lors des foires et salons ?
  585. </button>
  586. </h2>
  587. <div id="collapsesix" class="accordion-collapse collapse" aria-labelledby="headingsix" data-bs-parent="#accordionExample">
  588. <div class="accordion-body">
  589. Oui, nous proposons des services de surveillance adaptés aux événements tels que les foires et salons, pour assurer la sécurité des lieux et des participants.
  590. </div>
  591. </div>
  592. </div>
  593. <div class="accordion-item wow fadeInUp" data-wow-delay="0.4s" style="visibility: visible; animation-delay: 0.4s; animation-name: fadeInUp;">
  594. <h2 class="accordion-header" id="headingseven">
  595. <button class="accordion-button collapsed fw-semi-bold" type="button" data-bs-toggle="collapse" data-bs-target="#collapseseven" aria-expanded="true" aria-controls="collapseseven">
  596. Est-ce que Guardian France propose des solutions de sécurité pour les magasins, les théâtres et les chantiers ?
  597. </button>
  598. </h2>
  599. <div id="collapseseven" class="accordion-collapse collapse" aria-labelledby="headingseven" data-bs-parent="#accordionExample">
  600. <div class="accordion-body">
  601. Oui, nous offrons des services de gardiennage pour les magasins, les théâtres, les chantiers, ainsi que d'autres types de sites nécessitant une protection spécialisée.
  602. </div>
  603. </div>
  604. </div>
  605. <div class="accordion-item wow fadeInUp" data-wow-delay="0.5s" style="visibility: visible; animation-delay: 0.5s; animation-name: fadeInUp;">
  606. <h2 class="accordion-header" id="headingFive">
  607. <button class="accordion-button collapsed fw-semi-bold" type="button" data-bs-toggle="collapse" data-bs-target="#collapseFive" aria-expanded="false" aria-controls="collapseFive">
  608.  Quelles sont les zones géographiques couvertes par Guardian France ?
  609. </button>
  610. </h2>
  611. <div id="collapseFive" class="accordion-collapse collapse" aria-labelledby="headingFive" data-bs-parent="#accordionExample">
  612. <div class="accordion-body">
  613. Guardian France, votre partenaire de confiance en matière de sécurité, est spécialisé dans les prestations SSIAP, la sécurité, le rondier et la surveillance de chantier. Nous sommes présents dans les départements de Paris, Seine et Marne, Yvelines, Essonne, Hauts-de-Seine, Seine-Saint-Denis, ainsi que les départements 94 et 95 en Île-de-France
  614. </div>
  615. </div>
  616.  </div>
  617. </div>
  618. </div>
  619. </div>
  620. </div>
  621. </div>
  622.      
  623. <style>
  625. .gallery {
  626.   display: flex;
  627.   flex-wrap: wrap;
  628.   gap: 10px;
  629.   max-width: 1000px; /* Largeur maximale pour limiter la largeur de la galerie */
  630.   margin: 0 auto; /* Centrer la galerie */
  631. }
  633. .gallery-item {
  634.   flex: 1 0 calc(25% - 10px); /* Pour afficher 4 images par ligne avec un espacement de 10px entre elles */
  635.   margin-bottom: 10px;
  636.   position: relative;
  637.   overflow: hidden;
  638.   max-width: calc(50% - 10px); /* Pour afficher 2 images par ligne */
  639. }
  641. .gallery-item img {
  642.   width: 100%;
  643.   height: auto;
  644.   display: block;
  645.   transition: transform 0.3s ease;
  646. }
  648. .gallery-item:hover img {
  649.   transform: scale(1.1);
  650. }
  653.  .custom-checkbox {
  654.     /* Styles pour la div englobant la case à cocher et son étiquette */
  655.     display: inline-flex;
  656.     align-items: center;
  657.     margin-right: 20px; /* Ajoutez un espacement à droite pour séparer ce champ des autres */
  658. }
  660. .custom-checkbox input {
  661.     /* Cachez la case à cocher native */
  662.     position: absolute;
  663.     opacity: 0;
  664. }
  666. .custom-checkbox input:checked + .form-check-label:before {
  667.     /* Styles pour la case cochée */
  668.     content: '\2713'; /* Utilisez ici un symbole de coche de votre choix */
  669.     margin-right: 5px;
  670.     font-size: 16px;
  671.     color: #007bff; /* Couleur de la coche cochée */
  672. }
  674. .form-check-label {
  675.     /* Styles pour l'étiquette du champ */
  676.     cursor: pointer;
  677. }
  678. .required-label::before {
  679.     content: "*";
  680.     color: red;
  681.     margin-right: 5px;
  682. }
  686. </style>
  688. <!-- Vous aurez besoin d'une librairie JavaScript pour la Lightbox -->
  689. <script src="https://cdnjs.cloudflare.com/ajax/libs/glightbox/2.4.2/js/glightbox.min.js"></script>
  690. <link href="https://cdnjs.cloudflare.com/ajax/libs/glightbox/2.4.2/css/glightbox.min.css" rel="stylesheet">
  692. <script>
  693.   const lightbox = GLightbox({
  694.     selector: '.gallery-item img',
  695.     touchNavigation: true,
  696.     loop: true
  697.   });
  698. </script>
  699. {% endblock %}