templates/home/index.html.twig line 1

  1. {% extends 'base.html.twig' %}
  3. {% block title %}+227 20 73 34 70{% endblock %}
  5. {% block body %}
  7.     {% for flashMessage in app.session.flashbag.get('souscription') %}
  8.         <div class="alert alert-success">
  9.             {{ flashMessage }}
  10.         </div>
  11.     {% endfor %}
  13.     {% for flashMessage in app.session.flashbag.get('sinistre') %}
  14.         <div class="alert alert-success">
  15.             {{ flashMessage }}
  16.         </div>
  17.     {% endfor %}
  19.     {% for flashMessage in app.session.flashbag.get('plainte') %}
  20.         <div class="alert alert-success">
  21.             {{ flashMessage }}
  22.         </div>
  23.     {% endfor %}
  25.     {% for message in app.flashes('success') %}
  26.         <script>
  27.             window.onload = function () {
  28.                 Swal.fire({
  29.                     text: "{{ message }}",
  30.                     icon: "success",
  31.                     buttonsStyling: false,
  32.                     confirmButtonText: "Ok",
  33.                     customClass: {
  34.                         confirmButton: "btn btn-success"
  35.                     }
  36.                 });
  37.             };
  38.         </script>
  39.     {% endfor %}
  41.     <!-- Carousel Start -->
  42.     <div class="container-fluid p-0 mb-5 wow fadeIn" data-wow-delay="0.1s">
  43.         <div id="header-carousel" class="carousel slide" data-bs-ride="carousel">
  44.             <div class="carousel-inner">
  45.                 <div class="carousel-item active">
  46.                     <img class="w-100 " height="500" src="{{ asset('assets/img/IMAGE4.jpg') }}" alt="Image"/>
  47.                     <div class="absolute-div">
  48.                         <div class="carousel-caption">
  50.                             <!-- Service Start -->
  51.                             <div class="container-xl py-5 mb-5">
  52.                                 <div class="container">
  53.                                     <div class="text-center mx-auto mb-4" style="max-width: 500px;">
  54.                                         <h1 class="display-5 mb-4">Nos assurances</h1>
  55.                                     </div>
  57.                                     <div class="row g-4 justify-content-center">
  59.                                         <!-- Assurance Automobile -->
  60.                                         <div class="col-6 col-md-3">
  61.                                             <a href="{{ path('app_souscription_auto') }}">
  62.                                                 <div class="card mt-3 mt-md-5">
  63.                                                     <div class="card-body">
  64.                                                         <h5 class="card-title text-center">
  65.                                                             <i class="fa fa-car-side" style="font-size: 2rem; color: #2a1266;"></i>
  66.                                                         </h5>
  67.                                                         <h5 class="mt-4 text-center">Assurance<br>Automobile</h5>
  68.                                                     </div>
  69.                                                 </div>
  70.                                             </a>
  71.                                             <div class="text-center mt-3">
  72.                                                 <a href="https://www.caren-niger.com/index.php/particuliers/assurance-automobile" target="_blank">
  73.                                                     <i class="bi bi-question-circle-fill" style="font-size: 1.5rem; color: white;"></i>
  74.                                                 </a>
  75.                                             </div>
  76.                                         </div>
  78.                                         <!-- Assurance Voyage -->
  79.                                         <div class="col-6 col-md-3">
  80.                                             <a href="{{ path('app_souscription_Voyage') }}">
  81.                                                 <div class="card mt-3 mt-md-5">
  82.                                                     <div class="card-body">
  83.                                                         <h5 class="card-title text-center">
  84.                                                             <i class="fa fa-plane-departure" style="font-size: 2rem; color: #2a1266;"></i>
  85.                                                         </h5>
  86.                                                         <h5 class="mt-4 text-center">Assurance<br>Voyage</h5>
  87.                                                     </div>
  88.                                                 </div>
  89.                                             </a>
  90.                                             <div class="text-center mt-3">
  91.                                                 <a href="https://www.caren-niger.com/index.php/particuliers/assurance-voyage" target="_blank">
  92.                                                     <i class="bi bi-question-circle-fill" style="font-size: 1.5rem; color: white;"></i>
  93.                                                 </a>
  94.                                             </div>
  95.                                         </div>
  97.                                         <!-- Assurance Habitation -->
  98.                                         <div class="col-6 col-md-3">
  99.                                             <a href="{{ path('app_souscription_Habitation') }}">
  100.                                                 <div class="card mt-3 mt-md-5">
  101.                                                     <div class="card-body">
  102.                                                         <h5 class="card-title text-center">
  103.                                                             <i class="fa fa-home" style="font-size: 2rem; color: #2a1266;"></i>
  104.                                                         </h5>
  105.                                                         <h5 class="mt-4 text-center">Assurance<br>Habitation</h5>
  106.                                                     </div>
  107.                                                 </div>
  108.                                             </a>
  109.                                             <div class="text-center mt-3">
  110.                                                 <a href="https://www.caren-niger.com/index.php/particuliers/assurance-habitation" target="_blank">
  111.                                                     <i class="bi bi-question-circle-fill" style="font-size: 1.5rem; color: white;"></i>
  112.                                                 </a>
  113.                                             </div>
  114.                                         </div>
  116.                                         <!-- Partenaires de santé -->
  117.                                         <div class="col-6 col-md-3">
  118.                                             <a href="{{ path('app_partenaires_sante') }}">
  119.                                                 <div class="card mt-3 mt-md-5">
  120.                                                     <div class="card-body">
  121.                                                         <h5 class="card-title text-center">
  122.                                                             <i class="fa fa-first-aid" style="font-size: 2rem; color: #2a1266;"></i>
  123.                                                         </h5>
  124.                                                         <h5 class="mt-4 text-center">Partenaires<br>de santé</h5>
  125.                                                     </div>
  126.                                                 </div>
  127.                                             </a>
  128.                                             <div class="text-center mt-3">
  129.                                                 <a href="{{ path('app_partenaires_sante') }}" target="_blank">
  130.                                                     <i class="bi bi-question-circle-fill" style="font-size: 1.5rem; color: white;"></i>
  131.                                                 </a>
  132.                                             </div>
  133.                                         </div>
  135.                                     </div>
  136.                                     <!-- /.row -->
  137.                                 </div>
  138.                                 <!-- /.container -->
  139.                             </div>
  140.                             <!-- Service End -->
  142.                         </div>
  143.                         <!-- /.carousel-caption -->
  144.                     </div>
  145.                     <!-- /.absolute-div -->
  146.                 </div>
  147.                 <!-- /.carousel-item -->
  148.             </div>
  149.             <!-- /.carousel-inner -->
  150.         </div>
  151.         <!-- /#header-carousel -->
  152.     </div>
  153.     <!-- Carousel End -->
  155.     <!-- About Start -->
  156.     <div class="container-xxl py-2">
  157.         <div class="container">
  158.             <div class="row g-5">
  160.                 <!-- Image desktop -->
  161.                 <div class="col-lg-6 wow fadeInUp d-none d-md-block" data-wow-delay="0.1s">
  162.                     <div class="position-relative overflow-hidden rounded ps-5 pt-3 h-100" style="min-height: 500px">
  163.                         <img class="position-absolute" src="{{ asset('assets/img/mobile.jpeg') }}" alt="" style="margin-left: 22%; height: 470px;"/>
  164.                         <div class="position-absolute top-0 start-0 bg-white rounded pe-3 pb-3" style="width: 200px; height: 200px">
  165.                             <div class="d-flex flex-column justify-content-center text-center bg-primary rounded h-100 p-3">
  166.                                 <h1 class="text-white mb-0">35</h1>
  167.                                 <h2 class="text-white">années</h2>
  168.                                 <h5 class="text-white mb-0">D'Experience</h5>
  169.                             </div>
  170.                         </div>
  171.                     </div>
  172.                 </div>
  174.                 <!-- Image mobile -->
  175.                 <div class="col-12 wow fadeInUp d-block d-md-none" data-wow-delay="0.1s">
  176.                     <div class="position-relative overflow-hidden rounded ps-5 pt-3 h-100" style="min-height: 500px">
  177.                         <img class="position-absolute" src="{{ asset('assets/img/mobile.jpeg') }}" alt="" style="margin-left: 10%; height: 470px; width: 310px;"/>
  178.                         <div class="position-absolute top-0 start-0 bg-white rounded pe-3 pb-3" style="width: 158px; height: 140px">
  179.                             <div class="d-flex flex-column justify-content-center text-center bg-primary rounded h-100 p-2">
  180.                                 <h3 class="text-white">35</h3>
  181.                                 <h4 class="text-white">années</h4>
  182.                                 <h5 class="text-white">D'experience</h5>
  183.                             </div>
  184.                         </div>
  185.                     </div>
  186.                 </div>
  188.                 <!-- Texte -->
  189.                 <div class="col-12 col-lg-6 wow fadeInUp" data-wow-delay="0.5s">
  190.                     <div class="h-100">
  191.                         <h1 class="display-6 mb-5">
  192.                             L'application mobile CAREN ASSURANCES
  193.                         </h1>
  194.                         <p class="fs-5 text-primary mb-4">
  195.                             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.
  196.                         </p>
  197.                         <div class="row g-4 mb-4">
  198.                             <div class="col-sm-4 border rounded">
  199.                                 <div class="d-flex align-items-center">
  200.                                     <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;">
  201.                                         <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"/>
  202.                                     </svg>
  203.                                     <h6 class="mb-0 ms-2">Google Play</h6>
  204.                                 </div>
  205.                             </div>
  206.                             <div class="col-sm-2"></div>
  207.                             <div class="col-sm-4 border rounded">
  208.                                 <div class="d-flex align-items-center">
  209.                                     <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;">
  210.                                         <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"/>
  211.                                     </svg>
  212.                                     <h6 class="mb-0 ms-2">App Store</h6>
  213.                                 </div>
  214.                             </div>
  215.                         </div>
  216.                         <p class="mb-4">
  217.                         Découvrez une expérience utilisateur optimale pour la gestion de vos assurances, le tout directement depuis votre smartphone. 
  218.                         </p>
  219.                     </div>
  220.                 </div>
  222.             </div>
  223.             <!-- /.row -->
  224.         </div>
  225.         <!-- /.container -->
  226.     </div>
  227.     <!-- About End -->
  229. {% endblock %}