templates/contact/devis/index.html.twig line 1

  1. {% extends 'site.html.twig' %}
  5. {% block title %}Devis Gratuit | Contact Guardian France | Services de Sécurité | Gardiennage | SSIAP{% endblock %}
  7. {% block meta_description %}Obtenez un devis gratuit auprès de Guardian France pour des services de sécurité professionnels et de prévention afin de protéger votre entreprise et vos événements. Le groupe Guardian France est spécialisé dans la sécurité événementielle, avec des agents cynophiles, vigiles, SSIAP et maîtres-chiens qualifiés disponibles.{% endblock %}
  9. {% block meta_keywords %}Guardian France, devis, sécurité, gardiennage, agent cynophile, vigile, SSIAP, maître-chien, protection, commerces, vitrines, rapports, documentation, événementiel, contrôle d'accès{% endblock %}
  11. {% block meta_itemprop %}<span itemprop="telephone">01 48 10 23 50</span>{% endblock %}
  14. {% block body %}
  16. {% if app.session.flashBag.has('success') %}
  17.     <script>
  18.         document.addEventListener('DOMContentLoaded', function() {
  19.             Swal.fire({
  20.                 icon: 'success',
  21.                 title: 'Message envoyé avec succès !',
  22.                 text: '{{ app.session.flashBag.get('success')[0] }}',
  23.               confirmButtonText: 'OK',
  24.                 customClass: {
  25.                     confirmButton: 'my-confirm-button-class'
  26.                 }
  27.             });
  28.           
  29.         });
  30.     </script>
  31. {% endif %}
  33.   <div class="container-fluid bg-primary py-5 bg-header-devis" style="margin-bottom:40px;min-height: 300px">
  34.             <div class="row py-5">
  35.                 <div class="col-12 pt-lg-5 mt-lg-5 text-center">
  36.                 
  37.              
  38.                 </div>
  39.             </div>
  40.         </div>
  41.     </div>
  43.     <div class="container-fluid py-5 wow fadeInUp" data-wow-delay="0.1s" style="visibility: visible; animation-delay: 0.1s;">
  44.          <div class="container py-5">
  45.             <div class="row g-5">
  46.                 <div class="col-lg-7">
  47.                     <div class="section-title position-relative pb-3 mb-5">
  48.                         <h5 class="fw-bold text-primary text-uppercase">Devis personnalisé pour une sécurité renforcée</h5>
  49.                         <h1 class="mb-0">Demandez votre devis personnalisé dès maintenant avec Guardian France</h1>
  50.                     </div>
  51.                     <div class="row gx-3">
  52.                         <div class="col-sm-6 wow zoomIn" data-wow-delay="0.2s">
  53.                             <h5 class="mb-4"><i class="fa fa-reply text-primary me-3"></i>Traitement sous 24H</h5>
  54.                         </div>
  55.                         <div class="col-sm-6 wow zoomIn" data-wow-delay="0.4s">
  56.                             <h5 class="mb-4"><i class="fa fa-phone-alt text-primary me-3"></i>Réponse au téléphone immédiate</h5>
  57.                         </div>
  58.                     </div>
  59.                   <p>Chez Guardian France, nous sommes des experts en sécurité des entreprises, proposant une gamme complète de solutions adaptées aux besoins spécifiques de nos clients.</p>
  60. <p>Pour vous aider à évaluer les besoins de sécurité de votre entreprise, nous vous offrons un devis personnalisé et gratuit. Remplissez simplement le formulaire en ligne en fournissant des informations sur votre entreprise et vos besoins en sécurité. Notre équipe d'experts vous contactera rapidement pour discuter des solutions de sécurité les mieux adaptées à vos exigences.</p>
  61. <p>Nous sommes fiers de collaborer avec des professionnels hautement qualifiés pour garantir 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>
  68.                     <div class="d-flex align-items-center mt-2 wow zoomIn" data-wow-delay="0.6s">
  69.                         <div class="bg-primary d-flex align-items-center justify-content-center rounded" style="width: 60px; height: 60px;">
  70.                             <i class="fa fa-phone-alt text-white"></i>
  71.                         </div>
  72.                         <div class="ps-4">
  73.                             <h5 class="mb-2">Contactez nous</h5>
  74.                             <h4 class="text-primary mb-0">01 48 10 23 50</h4>
  75.                         </div>
  76.                     </div>
  77.                 </div>
  78.                <div class="col-lg-5">
  79.                 <!-- Formulaire de contact -->
  80.                 <div class="col-lg-9 col-md-9 wow slideInUp mx-md-0" data-wow-delay="0.3s">
  81.            {{ form_start(form) }}
  82. <div class="row g-7">
  83.     <center><h5 class="fw-bold text-primary text-uppercase">Formulaire de contact</h5></center>
  84.     <div class="col-md-12 mb-3">
  85.         {{ form_row(form.name, {'label_attr': {'class': 'required-label'}, 'attr': {'required': 'required'}}) }}
  86.     </div>
  87.     <div class="col-md-12 mb-3">
  88.         {{ form_row(form.firstname, {'label_attr': {'class': 'required-label'}, 'attr': {'required': 'required'}}) }}
  89.     </div>
  90.     <div class="col-md-12 mb-3">
  91.         {{ form_row(form.email, {'label_attr': {'class': 'required-label'}, 'attr': {'required': 'required'}}) }}
  92.     </div>
  93.     <div class="col-md-12 mb-3">
  94.         {{ form_row(form.phone, {'label_attr': {'class': 'required-label'}, 'attr': {'required': 'required'}}) }}
  95.     </div>
  96.     <div class="col-md-12 mb-3">
  97.         {{ form_row(form.society, {'label_attr': {'class': 'required-label'}, 'attr': {'required': 'required'}}) }}
  98.     </div>
  99.      <div class="col-md-12 mb-3">
  100.         {{ form_row(form.city, {'label_attr': {'class': 'required-label'}, 'attr': {'required': 'required'}}) }}
  101.     </div>
  102.      <div class="col-md-12 mb-3">
  103.         {{ form_row(form.adresse, {'label_attr': {'class': 'required-label'}, 'attr': {'required': 'required'}}) }}
  104.     </div>
  105.      <div class="col-md-12 mb-3">
  106.         {{ form_row(form.zip, {'label_attr': {'class': 'required-label'}, 'attr': {'required': 'required'}}) }}
  107.     </div>
  108.     <div class="col-md-12 mb-3">
  109.         {{ form_row(form.services, {'label_attr': {'class': 'required-label'}, 'attr': {'required': 'required'}}) }}
  110.     </div>
  111.     <div class="col-12 mb-3">
  112.         {{ form_row(form.subject, {'label_attr': {'class': 'required-label'}, 'attr': {'required': 'required'}}) }}
  113.     </div>
  114.     <div class="form-check mb-3">
  115.         {{ form_widget(form.consent, {'attr': {'class': 'form-check-input', 'required': 'required'}}) }}
  116.         {{ form_label(form.consent, null, {'label_attr': {'class': 'form-check-label'}}) }}
  117.     </div>
  118.     <div class="col-12">
  119.         <button class="btn btn-primary w-100 py-3" type="submit">Envoyer</button>
  120.     </div>
  121. </div>
  122. {{ form_end(form) }}
  125.                 </div>
  126.             </div>
  127.             </div>
  128.         
  129.        
  130.     </div>
  132.  </div>
  134.   
  137. <div class="container-fluid py-5 wow fadeInUp" data-wow-delay="0.1s">
  138.     <div class="container py-5 mb-5">
  139.         <div class="section-title text-center position-relative pb-3 mb-5 mx-auto" style="max-width: 600px;">
  140.             <h5 class="fw-bold text-primary text-uppercase"></h5>
  141.             <h1 class="mb-0">Nos Solutions de Sécurité Complètes pour Protéger Votre Entreprise</h1>
  142.         </div>
  143.         <div class="row">
  144.             <div class="col-lg-6 mb-4">
  145.                 <div class="card">
  146.                     <div class="card-body">
  147.                         <i class="fa-solid fa-eye fa-3x mb-3"></i>
  148.                         <h5 class="card-title">Surveillance</h5>
  149.                         <p class="card-text">Nous proposons une surveillance 24h/24 et 7j/7 de vos locaux pour détecter et prévenir toute activité suspecte.</p>
  150.                     </div>
  151.                 </div>
  152.             </div>
  153.             <div class="col-lg-6 mb-4">
  154.                 <div class="card">
  155.                     <div class="card-body">
  156.                         <i class="fa-solid fa-fire-extinguisher fa-3x mb-3"></i>
  157.                         <h5 class="card-title">Sécurité Incendie</h5>
  158.                         <p class="card-text">Nos professionnels formés aux procédures d'évacuation et à la lutte contre l'incendie veillent à la sécurité de vos biens et de vos collaborateurs.</p>
  159.                     </div>
  160.                 </div>
  161.             </div>
  162.             <!-- Ajoutez des cartes similaires pour chaque solution de sécurité -->
  163.             <div class="col-lg-6 mb-4">
  164.                 <div class="card">
  165.                     <div class="card-body">
  166.                         <i class="fa-solid fa-door-open fa-3x mb-3"></i>
  167.                         <h5 class="card-title">Contrôle d'accès</h5>
  168.                         <p class="card-text">Nous mettons en place des systèmes de contrôle d'accès sophistiqués pour restreindre l'entrée à des zones spécifiques de votre entreprise.</p>
  169.                     </div>
  170.                 </div>
  171.             </div>
  172.             <div class="col-lg-6 mb-4">
  173.                 <div class="card">
  174.                     <div class="card-body">
  175.                         <i class="fa-solid fa-video fa-3x mb-3"></i>
  176.                         <h5 class="card-title">Vidéosurveillance</h5>
  177.                         <p class="card-text">Grâce à notre technologie de pointe, nous assurons une vidéosurveillance efficace pour protéger vos actifs et prévenir les incidents.</p>
  178.                     </div>
  179.                 </div>
  180.             </div>
  181.             <div class="col-lg-6 mb-4">
  182.                 <div class="card">
  183.                     <div class="card-body">
  184.                         <i class="fa-solid fa-shield fa-3x mb-3"></i>
  185.                         <h5 class="card-title">Sécurité Événementielle</h5>
  186.                         <p class="card-text">Nos équipes de sécurité événementielle garantissent le bon déroulement de vos événements en assurant la sécurité des participants.</p>
  187.                     </div>
  188.                 </div>
  189.             </div>
  190.             <div class="col-lg-6 mb-4">
  191.                 <div class="card">
  192.                     <div class="card-body">
  193.                         <i class="fa-solid fa-people-robbery fa-3x mb-3"></i>
  194.                         <h5 class="card-title">Gestion de Crise</h5>
  195.                         <p class="card-text">En cas d'urgence, notre personnel formé à la gestion de crise réagit rapidement pour minimiser les risques et les conséquences.</p>
  196.                     </div>
  197.                 </div>
  198.             </div>
  199.             <div class="col-lg-6 mb-4">
  200.                 <div class="card">
  201.                     <div class="card-body">
  202.                         <i class="fa-solid fa-briefcase-medical fa-3x mb-3"></i>
  203.                         <h5 class="card-title">SSIAP (Service de Sécurité Incendie et d'Assistance à Personnes)</h5>
  204.                         <p class="card-text">Nos agents SSIAP sont spécialement formés pour agir en cas d'incendie et porter assistance aux personnes en situation de danger.</p>
  205.                     </div>
  206.                 </div>
  207.             </div>
  208.         </div>
  209.     </div>
  212. {{ include('partenaire.html.twig') }}
  217.       <div class="container-fluid py-5 wow fadeInUp" data-wow-delay="0.1s" style="visibility: visible; animation-delay: 0.1s; animation-name: fadeInUp;">
  218. <div class="container py-5">
  219. <div class="row g-5">
  220. <div class="col-lg-6">
  221. <div class="section-title-2 position-relative pb-3 mb-5">
  222. <h5 class="fw-bold text-primary text-uppercase">Foires aux Questions</h5>
  223. <h1 class="mb-0">Une question ? <br>Consulter notre FAQ</h1>
  224. </div>
  225. <p class="mb-4">Nous sommes là pour répondre à toutes vos questions concernant nos services de sécurité. </p> <p>Nous proposons des services de sécurité pour tous les types de clients, y compris les entreprises, les particuliers, les événements spéciaux et les chantiers de construction.</p> <p> Nous pouvons personnaliser nos services pour répondre à vos besoins spécifiques, en utilisant des technologies de pointe pour surveiller et protéger votre propriété.</p>
  227. </div>
  228. <div class="col-lg-6">
  229. <div class="accordion accordion-custom" id="accordionExample">
  230. <div class="accordion-item wow fadeInUp" data-wow-delay="0.1s" style="visibility: visible; animation-delay: 0.1s; animation-name: fadeInUp;">
  231. <h2 class="accordion-header" id="headingOne">
  232. <button class="accordion-button fw-semi-bold" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
  233. Quels types de services de sécurité proposez-vous ?
  234. </button>
  235. </h2>
  236. <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
  237. <div class="accordion-body">
  239. Guardian France propose une gamme complète de services de sécurité, notamment la sécurité incendie, la sécurité prévention, la sécurité cynophile, le service de rondier, le gardiennage, et bien d'autres.
  240. </div>
  241. </div>
  242. </div>
  243. <div class="accordion-item wow fadeInUp" data-wow-delay="0.2s" style="visibility: visible; animation-delay: 0.2s; animation-name: fadeInUp;">
  244. <h2 class="accordion-header" id="headingTwo">
  245. <button class="accordion-button collapsed fw-semi-bold" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
  246.  Comment puis-je demander un devis personnalisé à Guardian France ?
  247. </button>
  248. </h2>
  249. <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
  250. <div class="accordion-body">
  251. Pour demander un devis personnalisé, il vous suffit de remplir le formulaire de contact sur notre site web avec les informations concernant votre entreprise et vos besoins de sécurité. Notre équipe d'experts vous contactera rapidement pour discuter des solutions adaptées à vos besoins.
  252. </div>
  253. </div>
  254. </div>
  255. <div class="accordion-item wow fadeInUp" data-wow-delay="0.3s" style="visibility: visible; animation-delay: 0.3s; animation-name: fadeInUp;">
  256. <h2 class="accordion-header" id="headingThree">
  257. <button class="accordion-button collapsed fw-semi-bold" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
  258.  Quelles sont les qualifications des agents de sécurité de Guardian France ?
  259. </button>
  260. </h2>
  261. <div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionExample">
  262. <div class="accordion-body">
  263.  Les agents de sécurité de Guardian France sont hautement qualifiés et formés pour offrir une protection maximale. Ils comprennent des agents SSIAP, des agents cynophiles, et des professionnels spécialisés dans différents domaines de la sécurité.
  264. </div>
  265. </div>
  266. </div>
  267. <div class="accordion-item wow fadeInUp" data-wow-delay="0.4s" style="visibility: visible; animation-delay: 0.4s; animation-name: fadeInUp;">
  268. <h2 class="accordion-header" id="headingFour">
  269. <button class="accordion-button collapsed fw-semi-bold" type="button" data-bs-toggle="collapse" data-bs-target="#collapseFour" aria-expanded="true" aria-controls="collapseFour">
  270. Quels types de solutions de sécurité proposez-vous ?
  271. </button>
  272. </h2>
  273. <div id="collapseFour" class="accordion-collapse collapse" aria-labelledby="headingFour" data-bs-parent="#accordionExample">
  274. <div class="accordion-body">
  275.  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. Nous offrons des services personnalisés en fonction des besoins spécifiques de chaque entreprise.
  276. </div>
  277. </div>
  278. </div>
  279. <div class="accordion-item wow fadeInUp" data-wow-delay="0.5s" style="visibility: visible; animation-delay: 0.5s; animation-name: fadeInUp;">
  280. <h2 class="accordion-header" id="headingFive">
  281. <button class="accordion-button collapsed fw-semi-bold" type="button" data-bs-toggle="collapse" data-bs-target="#collapseFive" aria-expanded="false" aria-controls="collapseFive">
  282. Comment puis-je contacter Guardian France en cas d'urgence ou pour des renseignements supplémentaires ?
  283. </button>
  284. </h2>
  285. <div id="collapseFive" class="accordion-collapse collapse" aria-labelledby="headingFive" data-bs-parent="#accordionExample">
  286. <div class="accordion-body">
  287.  En cas d'urgence, vous pouvez nous contacter immédiatement au 01 48 10 23 50. Pour des renseignements supplémentaires ou toute autre demande, vous pouvez nous envoyer un message via le formulaire de contact sur notre site web. Notre équipe sera ravie de vous aider.
  288. </div>
  289.  </div>
  290. </div>
  291. </div>
  292. </div>
  293. </div>
  294. </div>
  296.    </div>
  297. </div>
  299.    
  301.     <style>
  302.  .custom-checkbox {
  303.     
  304.     display: inline-flex;
  305.     align-items: center;
  306.     margin-right: 20px; 
  307. }
  309. .custom-checkbox input {
  311.     position: absolute;
  312.     opacity: 0;
  313. }
  315. .custom-checkbox input:checked + .form-check-label:before {
  317.     content: '\2713'; /* Utilisez ici un symbole de coche de votre choix */
  318.     margin-right: 5px;
  319.     font-size: 16px;
  320.     color: #007bff; /* Couleur de la coche cochée */
  321. }
  323. .form-check-label {
  325.     cursor: pointer;
  326. }
  328. .required-label::before {
  329.     content: "*";
  330.     color: red;
  331.     margin-right: 5px;
  332. }
  334. .card-title{
  335.     color: #AE0922;
  336. }
  338. i {
  339.     color : #AE0922;
  340. }
  341.   
  342.   h2 {
  343.     color: #AE0922;
  344.     font-size: 24px; /* Taille du texte du titre */
  345.     font-weight: bold; /* Gras pour le titre */
  346.     margin-bottom: 10px; /* Marge en bas du titre */
  347.   }
  349.   
  350.   ul {
  351.     list-style: disc; /* Style de puces */
  352.     margin-left: 20px; /* Marge à gauche pour les puces */
  353.   }
  356.   li {
  357.     font-size: 16px; /* Taille du texte de la liste */
  358.     line-height: 1.5; /* Hauteur de ligne pour un espacement confortable */
  359.     margin-bottom: 8px; /* Marge en bas des éléments de la liste */
  360.   }
  361.   @media (max-width: 767px) {
  362.         /* Appliquer le style uniquement pour les écrans mobiles */
  363.         .form-container {
  364.             order: 3; /* Changer l'ordre du formulaire pour l'afficher après le contenu texte */
  365.             margin-top: 40px; /* Ajouter une marge en haut du formulaire pour espacement */
  366.         }
  367.     }
  369.     strong{
  370.         color: #AE0922;
  371.         font-size: 20px;
  372.         font-weight: 300;
  373.     }
  375.  </style> 
  377.   
  378. {% endblock %}