templates/home/index.html.twig line 1

  1. {% extends 'base.html.twig' %}
  3. {% block title %}+227 20 73 34 70{% endblock %}
  5. {% block body %}
  6.  
  8. {% for flashMessage in app.session.flashbag.get('souscription') %}
  10. <div class="alert alert-success">
  11.     {{ flashMessage }}
  12. </div>
  15. {% endfor %}
  17. {% for flashMessage in app.session.flashbag.get('sinistre') %}
  18.         <div class="alert alert-success">
  19.             {{ flashMessage }}
  20.         </div>
  21.     {% endfor %}
  23.   {% for flashMessage in app.session.flashbag.get('plainte') %}
  24.         <div class="alert alert-success">
  25.             {{ flashMessage }}
  26.         </div>
  27.     {% endfor %}
  30. {% for message in app.flashes('success') %}
  31.     <script>
  32.             window.onload = function () {
  33.                     Swal.fire({
  34.                     text:"{{message}}",
  35.                     icon:"success",
  36.                     buttonsStyling:false,
  37.                     confirmButtonText:"Ok",
  38.                     customClass:{
  39.                     confirmButton:"btn btn-success"
  40.                     }
  41.                     });
  42.                     };
  43.     </script>
  44. {% endfor %}
  46. {% for message in app.flashes('error') %}
  47.     <script>
  48.             window.onload = function () {
  49.                     Swal.fire({
  50.                     text:"{{message}}",
  51.                     icon:"error",
  52.                     buttonsStyling:false,
  53.                     confirmButtonText:"Ok",
  54.                     customClass:{
  55.                     confirmButton:"btn btn-success"
  56.                     }
  57.                     });
  58.                     };
  59.     </script>
  60. {% endfor %}
  61. <style>
  63. .custom-img {
  64.   width: 100%; /* Remplir toute la largeur disponible */
  65.   height: 50vh; /* Remplir la moitié de la hauteur de la fenêtre du navigateur */
  66.   object-fit: cover; /* L'image couvre la zone sans déformation */
  67. }
  68. </style>
  71. <!-- Carousel Start -->
  72. <div class="container-fluid p-0 mb-5 wow fadeIn" data-wow-delay="0.1s">
  73.       <div id="header-carousel" class="carousel slide" data-bs-ride="carousel">
  74.         <div class="carousel-inner">
  75.           <div class="carousel-item active">
  76.             {# <img class="h-50 w-80" src="{{asset('assets/img/IMAGE4.jpg')}}" alt="Image" /> #}
  77.             <img class="custom-img" src="{{asset('assets/img/IMAGE4.jpg')}}" alt="Image" />
  79.             <div class="absolute-div">
  80.               <div class="carousel-caption">
  81.                           <!-- Service Start -->
  82.     <div class="container-xl py-5 mb-5">
  83.       <div class="container">
  84.         <div class="text-center mx-auto" style="max-width: 500px;">
  85.           <h1 class="display-5 mb-4 d-none d-md-block">
  86.             Nos assurances
  87.           </h1>
  88.         </div>
  89.         <div class="row g-4 justify-content-center ">
  90.           <div class="row">
  91.             <div class="col-sm-4 rounded d-none d-md-block">
  92.               <a href="{{path('app_souscription_auto')}}">
  93.                 <div class="card mt-5">
  94.                   <div class="card-body">
  95.                     <h5 class="card-title text-center"><i class="fa fa-car-side" style="font-size: 2rem; color: #2a1266;"></i></h5>
  96.                     <h5 class="mt-4 text-center">Assurance </br> Automobile</h4>
  97.                   </div>
  98.                 </div>
  99.               </a>
  100.               <div class="text-center mt-3">
  101.                 <a href="https://www.caren-niger.com/index.php/particuliers/assurance-automobile" target="_blank">
  102.                   <i class="bi bi-question-circle-fill" style="font-size: 1.5rem; color: white;"></i>
  103.                 </a>
  104.               </div>
  105.             </div>
  107.             <div class="col-sm-6 rounded d-sm-block d-md-none d-lg-none" style="margin-bottom: -5px; width: 50%; height: 25%;">
  108.               <a href="{{path('app_souscription_auto')}}">
  109.                 <div class="card mt-3">
  110.                   <div class="card-body">
  111.                     <h5 class="card-title text-center"><i class="fa fa-car-side" style="font-size: 2rem; color: #2a1266;"></i></h5>
  112.                     <h5 class="mt-4 text-center" style="font-size: 1rem;">Assurance </br> Automobile</h4>
  113.                   </div>
  114.                 </div>
  115.               </a>
  116.               <div class="text-center mt-3">
  117.                 <a href="https://www.caren-niger.com/index.php/particuliers/assurance-automobile" target="_blank">
  118.                   <i class="bi bi-question-circle-fill" style="font-size: 1.5rem; color: white;"></i>
  119.                 </a>
  120.               </div>
  121.             </div>
  124.             <div class="col-sm-4 rounded d-none d-md-block">
  125.               <a href="{{path('app_souscription_Voyage')}}">
  126.                 <div class="card mt-5">
  127.                   <div class="card-body">
  128.                     <h5 class="card-title text-center"><i class="fa fa-plane-departure" style="font-size: 2rem; color: #2a1266;"></i></h5>
  129.                     <h5 class="mt-4 text-center">Assurance </br> voyage</h4>
  130.                   </div>
  131.                 </div>
  132.               </a>
  133.               <div class="text-center mt-3">
  134.                 <a href="https://www.caren-niger.com/index.php/particuliers/assurance-voyage" target="_blank">
  135.                   <i class="bi bi-question-circle-fill" style="font-size: 1.5rem; color: white;"></i>
  136.                 </a>
  137.               </div>
  138.             </div>
  140.             <div class="col-sm-6 rounded d-sm-block d-md-none d-lg-none" style="margin-bottom: -5px; width: 50%; height: 25%;">
  141.               <a href="{{path('app_souscription_Voyage')}}">
  142.                 <div class="card mt-3">
  143.                   <div class="card-body">
  144.                     <h5 class="card-title text-center"><i class="fa fa-plane-departure" style="font-size: 2rem; color: #2a1266;"></i></h5>
  145.                     <h5 class="mt-4 text-center" style="font-size: 1rem;">Assurance </br> voyage</h4>
  146.                   </div>
  147.                 </div>
  148.               </a>
  149.               <div class="text-center mt-3">
  150.                 <a href="https://www.caren-niger.com/index.php/particuliers/assurance-voyage" target="_blank">
  151.                   <i class="bi bi-question-circle-fill" style="font-size: 1.5rem; color: white;"></i>
  152.                 </a>
  153.               </div>
  154.             </div>
  157.             <div class="col-sm-4 rounded d-none d-md-block">
  158.               <a href="{{path('app_souscription_Habitation')}}">
  159.                 <div class="card mt-5">
  160.                   <div class="card-body">
  161.                     <h5 class="card-title text-center"><i class="fa fa-home" style="font-size: 2rem; color: #2a1266;"></i></h5>
  162.                     <h5 class="mt-4 text-center">Assurance </br> habitation</h4>
  163.                   </div>
  164.                 </div>
  165.               </a>
  166.               <div class="text-center mt-3">
  167.                 <a href="https://www.caren-niger.com/index.php/particuliers/assurance-habitation" target="_blank">
  168.                   <i class="bi bi-question-circle-fill" style="font-size: 1.5rem; color: white;"></i>
  169.                 </a>
  170.               </div>
  171.             </div>
  173.             <div class="col-3 rounded d-sm-block d-md-none d-lg-none">
  174.               
  175.             </div>
  177.             <div class="col-sm-6 rounded d-sm-block d-md-none d-lg-none" style="margin-bottom: -50px; width: 50%; height: 25%;">
  178.               <a href="{{path('app_souscription_Habitation')}}">
  179.                 <div class="card mt-3">
  180.                   <div class="card-body">
  181.                     <h5 class="card-title text-center"><i class="fa fa-home" style="font-size: 2rem; color: #2a1266;"></i></h5>
  182.                     <h5 class="mt-4 text-center" style="font-size: 1rem;" >Assurance </br> habitation</h4>
  183.                   </div>
  184.                 </div>
  185.               </a>
  186.               <div class="text-center mt-3">
  187.                 <a href="https://www.caren-niger.com/index.php/particuliers/assurance-habitation" target="_blank">
  188.                   <i class="bi bi-question-circle-fill" style="font-size: 1.5rem; color: white;"></i>
  189.                 </a>
  190.               </div>
  191.             </div>
  193.             <div class="col-3 rounded d-sm-block d-md-none d-lg-none">
  194.               
  195.             </div>
  196.             
  197.           </div> 
  198.         </div>
  199.       </div>
  200.     </div>
  201.     <!-- Service End -->
  202.               </div>
  203.             </div>
  204.           </div>
  205.         </div>
  206.       </div>
  207.     </div>
  208.     <!-- Carousel End -->
  210.     <!-- About Start -->
  211.     <div class="container-xxl py-2">
  212.       <div class="container">
  213.         <div class="row g-5">
  214.           <div class="col-lg-6 wow fadeInUp d-none d-md-block" data-wow-delay="0.1s">
  215.             <div
  216.               class="position-relative overflow-hidden rounded ps-5 pt-3 h-100"
  217.               style="min-height: 500px"
  218.             >
  219.               <img
  220.                 class="position-absolute"
  221.                 src="{{asset('assets/img/mobile.jpeg')}}"
  222.                 alt=""
  223.                 style="margin-left: 22%; height:470px;"
  224.               />
  225.               <div class="position-absolute top-0 start-0 bg-white rounded pe-3 pb-3" style="width: 200px; height: 200px">
  226.                     <div class="d-flex flex-column justify-content-center text-center bg-primary rounded h-100 p-3">
  227.                         <h3 class="text-white">{{ experienceYears }}</h3>
  228.                         <h4 class="text-white">années</h4>
  229.                         <h5 class="text-white">D'expérience</h5>
  230.                     </div>
  231.               </div>
  232.             </div>
  233.           </div>
  234.           <div class="col-lg-6 wow fadeInUp d-sm-block d-md-none d-lg-none" data-wow-delay="0.1s">
  235.               <div class="position-relative overflow-hidden rounded ps-5 pt-3 h-100" style="min-height: 500px">
  236.                   <img class="position-absolute" src="{{ asset('assets/img/mobile.jpeg') }}" alt="" style="margin-left: 10%; height:470px; width:310px;" />
  237.                   <div class="position-absolute top-0 start-0 bg-white rounded pe-3 pb-3" style="width: 158px; height: 140px">
  238.                       <div class="d-flex flex-column justify-content-center text-center bg-primary rounded h-100 p-2">
  239.                           <h3 class="text-white">{{ experienceYears }}</h3>
  240.                           <h4 class="text-white">années</h4>
  241.                           <h5 class="text-white">D'expérience</h5>
  242.                       </div>
  243.                   </div>
  244.               </div>
  245.           </div>
  248.         <div class="col-sm-12 col-lg-6 wow fadeInUp" data-wow-delay="0.5s">
  249.   <div class="h-100">
  250.     <h1 class="display-6 mb-5">
  251.       L'application mobile CAREN ASSURANCES
  252.     </h1>
  253.     <p class="fs-5 mb-4">
  254.       Téléchargez notre application mobile pour souscrire à nos assurances facilement, gérer vos contrats et bien plus encore. Disponible sur Google Play et l'App Store.
  255.     </p>
  256.     <div class="row g-4 mb-4">
  257.       <div class="col-sm-4 border rounded">
  258.         <a href="https://play.google.com/store/apps/details?id=com.app.carenmobile" target="_blank" class="d-block">
  259.           <div class="d-flex align-items-center">
  260.             <svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" fill="currentColor" class="bi bi-google-play mt-2 mb-2" viewBox="0 0 16 16" style="color: #2a1266;">
  261.               <path d="M14.222 9.374c1.037-.61 1.037-2.137 0-2.748L11.528 5.04 8.32 8l3.207 2.96 2.694-1.586Zm-3.595 2.116L7.583 8.68 1.03 14.73c.201 1.029 1.36 1.61 2.303 1.055l7.294-4.295ZM1 13.396V2.603L6.846 8 1 13.396ZM1.03 1.27l6.553 6.05 3.044-2.81L3.333.215C2.39-.341 1.231.24 1.03 1.27Z"/>
  262.             </svg>
  263.             <h6 class="mb-0">Google Play</h6>
  264.           </div>
  265.         </a>
  266.       </div>
  267.       <div class="col-sm-2">
  268.         <!-- Spacer -->
  269.       </div>
  270.       <div class="col-sm-4 border rounded">
  271.         <a href="javascript:void(0);" onclick="showAppStoreAlert();" class="d-block">
  272.           <div class="d-flex align-items-center">
  273.             <svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" fill="currentColor" class="bi bi-apple mt-2 mb-2" viewBox="0 0 16 16" style="color: #2a1266;">
  274.               <path d="M11.182.008C11.148-.03 9.923.023 8.857 1.18c-1.066 1.156-.902 2.482-.878 2.516.024.034 1.52.087 2.475-1.258.955-1.345.762-2.391.728-2.43Zm3.314 11.733c-.048-.096-2.325-1.234-2.113-3.422.212-2.189 1.675-2.789 1.698-2.854.023-.065-.597-.79-1.254-1.157a3.692 3.692 0 0 0-1.563-.434c-.108-.003-.483-.095-1.254.116-.508.139-1.653.589-1.968.607-.316.018-1.256-.522-2.267-.665-.647-.125-1.333.131-1.824.328-.49.196-1.422.754-2.074 2.237-.652 1.482-.311 3.83-.067 4.56.244.729.625 1.924 1.273 2.796.576.984 1.34 1.667 1.659 1.899.319.232 1.219.386 1.843.067.502-.308 1.408-.485 1.766-.472.357.013 1.061.154 1.782.539.571.197 1.111.115 1.652-.105.541-.221 1.324-1.059 2.238-2.758.347-.79.505-1.217.473-1.282Z"/>
  275.             </svg>
  276.             <h6 class="mb-0">App Store</h6>
  277.           </div>
  278.         </a>
  279.       </div>
  280.     </div>
  281.     <p class="mb-4 fs-5">
  282.       Découvrez une expérience utilisateur optimale pour la gestion de vos assurances, le tout directement depuis votre smartphone.
  283.     </p>
  284.   </div>
  285. </div>
  286.         </div>
  287.       </div>
  288.     </div>
  289.     <!-- About End -->
  290.     <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
  291. <script>
  292.   function showAppStoreAlert() {
  293.     Swal.fire({
  294.       title: 'Bientôt disponible!',
  295.       text: 'L\'application sera bientôt disponible sur l\'App Store.',
  296.       icon: 'info',
  297.       confirmButtonText: 'D\'accord',
  298.       confirmButtonColor: '#2a1266'
  299.     });
  300.   }
  301. </script>
  302. {% endblock %}