templates/home/index.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  3. {% block title %}Fleet Car{% endblock %}
  5. {% block body %}
  6. <header class="kl-header">
  7.     <nav class="navbar navbar-expand-lg navbar-dark kl-bg-purple-24 kl-navbar">
  8.         <div class="container kl-container-xl-1112">
  9.             <a class="navbar-brand" href="{{path('home_index')}}">
  10.                 <img src="{{ asset('build/images/logo.svg') }}" alt="">
  11.             </a>
  12.             <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
  13.                 data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
  14.                 aria-label="Toggle navigation">
  15.                 <span class="navbar-toggler-icon"></span>
  16.             </button>
  17.             <div class="collapse navbar-collapse" id="navbarSupportedContent">
  18.                 <ul class="navbar-nav ms-auto mb-2 mb-lg-0 kl-navbar-nav">
  19.                     <li class="nav-item">
  20.                         <a class="nav-link " href="#fonctionnalites">Fonctionnalités</a>
  21.                     </li>
  22.                     <li class="nav-item">
  23.                         <a class="nav-link" href="#solutions">Solutions</a>
  24.                     </li>
  25.                     <li class="nav-item">
  26.                         <a class="nav-link" href="#about">Qui sommes-nous ?</a>
  27.                     </li>
  28.                     <li class="nav-item">
  29.                         <a class="nav-link" href="#contact">Contact</a>
  30.                     </li>
  31.                 </ul>
  32.                 <div class="mt-4 mt-lg-0 mb-4 mb-lg-0">
  33.                     <a href="mailto:contact@fleet-car.io"
  34.                         class="btn kl-btn-default d-none d-lg-inline-block ms-lg-2 kl-min-w-xl-206 kl-custom-padding-btn-ask">Demandez
  35.                         une démo</a>
  36.                     <a href="{{path('app_login')}}" class="btn kl-btn-default ms-lg-2 kl-min-w-128 kl-custom-padding-btn-ask">Espace client</a>
  37.                 </div>
  38.             </div>
  39.         </div>
  40.     </nav>    
  41.     <!-- Notifications -->
  42.     {% set errorMessages = app.session.flashBag.get('error') %}
  43.     {% set successMessages = app.session.flashBag.get('success') %}
  44.     {% if errorMessages|length %}
  45.     <script type="text/javascript">
  46.         let errorMessages = [];
  47.         {% for errorMessage in errorMessages %}
  48.         errorMessages.push("{{ errorMessage }}");
  49.         {% endfor %}
  50.     </script>
  51.     {% endif %}
  52.     {% if successMessages|length %}
  53.     <script type="text/javascript">
  54.         let successMessages = [];
  55.         {% for successMessage in successMessages %}
  56.         successMessages.push("{{ successMessage }}");
  57.         {% endfor %}
  58.     </script>
  59.     {% endif %}
  60.     {{ encore_entry_script_tags('notification') }}
  61.     <!-- Notifications -->
  62. </header>
  63. <!-- Section Hero -->
  64. <section class="kl-section-hero">
  65.     <div class="container kl-container-xl-1112">
  66.         <div class="row text-center text-sm-start">
  67.             <div class="col-md-5 col-lg-6 kl-img-hero">
  68.                 <img src="{{ asset('build/images/home/img-01.png') }}" class="img-fluid" alt="">
  69.             </div>
  70.             <div class="col-md-7 col-lg-6">
  71.                 <div class="kl-text-38 kl-color-white pt-lg-4 mt-1 kl-pe-xl-54">
  72.                     <h1>Révolutionnez la gestion de votre flotte avec Fleet Car</h1>
  73.                 </div>
  74.                 <div class="kl-text-18 kl-color-white mt-3 kl-mb-30">
  75.                     <p>Rationalisez vos opérations, maximisez votre efficacité et optimisez votre flotte en toute
  76.                         simplicité.</p>
  77.                 </div>
  78.                 <a href="mailto:contact@fleet-car.io"
  79.                     class="btn kl-btn-default kl-min-w-206 kl-btn-xl kl-custom-line-height">Demandez une démo</a>
  80.             </div>
  81.         </div>
  82.     </div>
  83. </section>
  84. <!-- Fin section Hero -->
  85. <!-- Section Fonctionnalités -->
  86. <section id="fonctionnalites" class="kl-section-scroll kl-section-features kl-bg-bg-blue">
  87.     <div class="container kl-container-xl-1112">
  88.         <div class="text-center fiara">
  89.             <img src="{{ asset('build/images/home/img-02.png') }}" class="img-fluid" alt="">
  90.         </div>
  91.         <div class="kl-text-30 kl-color-purple kl-fw-bold text-center mb-1">
  92.             <h2>Fonctionnalités</h2>
  93.         </div>
  94.         <div class="kl-text-30 kl-color-purple kl-fw-medium text-center">
  95.             <h4>Améliorer l'efficacité globale de votre flotte</h4>
  96.         </div>
  97.         <div class="row justify-content-center kl-gy-50 kl-gy-md-78 kl-gx-30 kl-gx-xl-120 kl-pt-50 kl-pt-md-85">
  98.             <div class="col-md-4">
  99.                 <div class="kl-card text-center kl-max-w-320 mx-auto">
  100.                     <div class="kl-mb-10" data-mh="card-header">
  101.                         <img src="{{ asset('build/images/icons/icon-globe.svg') }}" alt="">
  102.                     </div>
  103.                     <div class="kl-text-16 kl-color-grey">
  104.                         <p>Surveillance et suivi de la
  105.                             <br>
  106.                             flotte en temps réel
  107.                         </p>
  108.                     </div>
  109.                 </div>
  110.             </div>
  111.             <div class="col-md-4">
  112.                 <div class="kl-card text-center kl-max-w-320 mx-auto">
  113.                     <div class="kl-mb-10" data-mh="card-header">
  114.                         <img src="{{ asset('build/images/icons/icon-car.svg') }}" alt="">
  115.                     </div>
  116.                     <div class="kl-text-16 kl-color-grey">
  117.                         <p>Suivi et rapports sur le comportement des conducteurs</p>
  118.                     </div>
  119.                 </div>
  120.             </div>
  121.             <div class="col-md-4">
  122.                 <div class="kl-card text-center kl-max-w-320 mx-auto">
  123.                     <div class="kl-mb-10" data-mh="card-header">
  124.                         <img src="{{ asset('build/images/icons/icon-Invoicing.svg') }}" alt="">
  125.                     </div>
  126.                     <div class="kl-text-16 kl-color-grey">
  127.                         <p>Consommation de carburant et suivi des dépenses</p>
  128.                     </div>
  129.                 </div>
  130.             </div>
  131.             <div class="col-md-4">
  132.                 <div class="kl-card text-center kl-max-w-320 mx-auto">
  133.                     <div class="kl-mb-10" data-mh="card-header">
  134.                         <img src="{{ asset('build/images/icons/icon-clock.svg') }}" alt="">
  135.                     </div>
  136.                     <div class="kl-text-16 kl-color-grey">
  137.                         <p>Planification de l'entretien
  138.                             <br>
  139.                             et des réparations
  140.                         </p>
  141.                     </div>
  142.                 </div>
  143.             </div>
  144.             <div class="col-md-4">
  145.                 <div class="kl-card text-center kl-max-w-320 mx-auto">
  146.                     <div class="kl-mb-10" data-mh="card-header">
  147.                         <img src="{{ asset('build/images/icons/icon-user.svg') }}" alt="">
  148.                     </div>
  149.                     <div class="kl-text-16 kl-color-grey">
  150.                         <p>Analyse de l'utilisation et de l'optimisation des véhicules</p>
  151.                     </div>
  152.                 </div>
  153.             </div>
  154.         </div>
  155.     </div>
  156. </section>
  157. <!-- Fin Section Fonctionnalités -->
  158. <!-- Section Solutions -->
  159. <section id="solutions" class="kl-section-scroll kl-section-solution">
  160.     <div class="container kl-container-xl-1112">
  161.         <div class="kl-text-30 kl-color-purple kl-fw-bold text-center mb-1">
  162.             <h2>Nos solutions</h2>
  163.         </div>
  164.         <div class="kl-text-30 kl-color-purple kl-fw-medium text-center">
  165.             <h4>Améliorer les performances et la rentabilité de votre flotte</h4>
  166.         </div>
  167.         <div class="kl-pt-50 kl-pt-md-85">
  168.             <div class="row">
  169.                 <div class="col-md-5">
  170.                     <div class="kl-transform">
  171.                         <a href="#" data-toggle="modal" data-target="#id-dashboard-modal">
  172.                             <img src="{{ asset('build/images/home/Dashboard.png') }}" class="img-fluid" alt="Tableau de bord">
  173.                         </a>
  174.                     </div>
  175.                 </div>
  176.                 <div class="col-md-7 kl-pt-25 kl-pe-xl-60">
  177.                     <div class="kl-text-30 kl-color-purple kl-fw-bold mb-2 pb-1">
  178.                         <h4>Tableau de bord</h4>
  179.                     </div>
  180.                     <div class="kl-text-16 kl-color-black-theme">
  181.                         <p>Le tableau de bord offre un suivi en temps réel sur les mesures de performance et la gestion
  182.                             des conducteurs.
  183.                             <br>
  184.                             Essentiel pour optimiser les opérations de la flotte et améliorer l'efficacité globale.
  185.                         </p>
  186.                     </div>
  187.                 </div>
  188.             </div>
  189.             <div class="modal fade kl-img-modal" id="id-dashboard-modal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  190.                 <div class="modal-dialog modal-lg modal-dialog-centered">
  191.                     <div class="modal-content">
  192.                         <div class="modal-header">
  193.                             <button type="button" class="close " data-dismiss="modal" aria-label="Close">
  194.                                 <span aria-hidden="true">&times;</span>
  195.                             </button>
  196.                         </div>
  197.                         <div class="modal-body">
  198.                             <img src="{{ asset('build/images/home/Dashboard.png') }}" class="img-fluid">
  199.                         </div>
  200.                     </div>
  201.                 </div>
  202.             </div>
  204.             <div class="row flex-column-reverse flex-md-row kl-pt-45">
  205.                 <div class="col-md-7 kl-pt-25 kl-pe-xl-104">
  206.                     <div class="kl-text-30 kl-color-purple kl-fw-bold mb-2 pb-1">
  207.                         <h4>Location des véhicules</h4>
  208.                     </div>
  209.                     <div class="kl-text-16 kl-color-black-theme">
  210.                         <p>
  211.                             <strong>Fleet Car</strong>
  212.                             rationalise le processus de location, de la réservation des véhicules au suivi de l'état de
  213.                             la prestation, afin de faciliter la gestion des opérations par les entreprises.
  214.                         </p>
  215.                     </div>
  216.                 </div>
  217.                 <div class="col-md-5">
  218.                     <div class="kl-transform">
  219.                         <a href="#" data-toggle="modal" data-target="#id-car-location-modal">
  220.                             <img src="{{ asset('build/images/home/CarLocation.png') }}" class="img-fluid" alt="Location des véhicules">
  221.                         </a>
  222.                     </div>
  223.                 </div>
  224.             </div>
  225.             <div class="modal fade kl-img-modal" id="id-car-location-modal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  226.                 <div class="modal-dialog modal-lg modal-dialog-centered">
  227.                     <div class="modal-content">
  228.                         <div class="modal-header">
  229.                             <button type="button" class="close " data-dismiss="modal" aria-label="Close">
  230.                                 <span aria-hidden="true">&times;</span>
  231.                             </button>
  232.                         </div>
  233.                         <div class="modal-body">
  234.                             <img src="{{ asset('build/images/home/CarLocation.png') }}" class="img-fluid">
  235.                         </div>
  236.                     </div>
  237.                 </div>
  238.             </div>
  240.             <div class="row kl-pt-45">
  241.                 <div class="col-md-5 text-strart text-md-center">
  242.                     <div class="kl-transform">
  243.                         <a href="#" data-toggle="modal" data-target="#id-maintenance-management-modal">
  244.                             <img src="{{ asset('build/images/home/CarGestion.png') }}" class="img-fluid" alt="Gestion de la maintenance">
  245.                         </a>
  246.                     </div>
  247.                 </div>
  248.                 <div class="col-md-7 kl-pt-25 kl-pe-xl-60 kl-ps-xl-50">
  249.                     <div class="kl-text-30 kl-color-purple kl-fw-bold mb-2 pb-1">
  250.                         <h4>Gestion de la maintenance</h4>
  251.                     </div>
  252.                     <div class="kl-text-16 kl-color-black-theme">
  253.                         <p>
  254.                             <strong>Fleet Car</strong>
  255.                             vous aide à programmer et à gérer l'entretien des véhicules, notamment les vidanges d'huile,
  256.                             les rotations de pneus et d'autres tâches d'entretien de routine. Cela permet de s'assurer
  257.                             que vos véhicules restent en bon état et de réduire le risque de pannes.
  258.                         </p>
  259.                     </div>
  260.                 </div>
  261.             </div>
  262.             <div class="modal fade kl-img-modal" id="id-maintenance-management-modal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  263.                 <div class="modal-dialog modal-lg modal-dialog-centered">
  264.                     <div class="modal-content">
  265.                         <div class="modal-header">
  266.                             <button type="button" class="close " data-dismiss="modal" aria-label="Close">
  267.                                 <span aria-hidden="true">&times;</span>
  268.                             </button>
  269.                         </div>
  270.                         <div class="modal-body">
  271.                             <img src="{{ asset('build/images/home/CarGestion.png') }}" class="img-fluid">
  272.                         </div>
  273.                     </div>
  274.                 </div>
  275.             </div>
  277.             <div class="row flex-column-reverse flex-md-row kl-pt-45">
  278.                 <div class="col-md-7 kl-pt-25 kl-pe-xl-104">
  279.                     <div class="kl-text-30 kl-color-purple kl-fw-bold mb-2 pb-1">
  280.                         <h4>Coûts variables</h4>
  281.                     </div>
  282.                     <div class="kl-text-16 kl-color-black-theme">
  283.                         <p>Les coûts variables permettent de suivre et d'analyser les dépenses liées au fonctionnement
  284.                             des véhicules, notamment la consommation de carburant, les coûts d'entretien et les
  285.                             réparations</p>
  286.                     </div>
  287.                 </div>
  288.                 <div class="col-md-5">
  289.                     <div class="kl-transform">
  290.                         <a href="#" data-toggle="modal" data-target="#id-variable-costs-modal">
  291.                             <img src="{{ asset('build/images/home/CoutVariable.png') }}" class="img-fluid" alt="Coûts variables">
  292.                         </a>
  293.                     </div>
  294.                 </div>
  295.             </div>
  296.             <div class="modal fade kl-img-modal" id="id-variable-costs-modal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  297.                 <div class="modal-dialog modal-lg modal-dialog-centered">
  298.                     <div class="modal-content">
  299.                         <div class="modal-header">
  300.                             <button type="button" class="close " data-dismiss="modal" aria-label="Close">
  301.                                 <span aria-hidden="true">&times;</span>
  302.                             </button>
  303.                         </div>
  304.                         <div class="modal-body">
  305.                             <img src="{{ asset('build/images/home/CoutVariable.png') }}" class="img-fluid">
  306.                         </div>
  307.                     </div>
  308.                 </div>
  309.             </div>
  311.             <div class="row kl-pt-45">
  312.                 <div class="col-md-5 text-strart text-md-center">
  313.                     <div class="kl-transform">
  314.                         <a href="#" data-toggle="modal" data-target="#id-rapport-modal">
  315.                             <img src="{{ asset('build/images/home/Rapport.png') }}" class="img-fluid" alt="Rapport">
  316.                         </a>
  317.                     </div>
  318.                 </div>
  319.                 <div class="col-md-7 kl-pt-25 kl-pe-xl-40 kl-ps-xl-104">
  320.                     <div class="kl-text-30 kl-color-purple kl-fw-bold mb-2 pb-1">
  321.                         <h4>Rapport</h4>
  322.                     </div>
  323.                     <div class="kl-text-16 kl-color-black-theme">
  324.                         <p>Le rapport permet de recueillir et d'analyser les données relatives aux opérations de votre flotte, du
  325.                             comportement du conducteur à la consommation de carburant.</p>
  326.                     </div>
  327.                 </div>
  328.             </div>
  329.             <div class="modal fade kl-img-modal" id="id-rapport-modal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  330.                 <div class="modal-dialog modal-lg modal-dialog-centered">
  331.                     <div class="modal-content">
  332.                         <div class="modal-header">
  333.                             <button type="button" class="close " data-dismiss="modal" aria-label="Close">
  334.                                 <span aria-hidden="true">&times;</span>
  335.                             </button>
  336.                         </div>
  337.                         <div class="modal-body">
  338.                             <img src="{{ asset('build/images/home/Rapport.png') }}" class="img-fluid">
  339.                         </div>
  340.                     </div>
  341.                 </div>
  342.             </div>
  345.             <div class="row flex-column-reverse flex-md-row kl-pt-45">
  346.                 <div class="col-md-7 kl-pt-25 kl-pe-xl-104">
  347.                     <div class="kl-text-30 kl-color-purple kl-fw-bold mb-2 pb-1">
  348.                         <h4>Alertes</h4>
  349.                     </div>
  350.                     <div class="kl-text-16 kl-color-black-theme">
  351.                         <p>
  352.                             La page des alertes fournit des données en temps réel et fournit également une notification sur les besoins en maintenance des véhicules. 
  353.                             Elle permet d'optimiser les opérations flotte et vise à réduire les temps d'arrêt.
  354.                         </p>
  355.                     </div>
  356.                 </div>
  357.                 <div class="col-md-5">
  358.                     <div class="kl-transform">
  359.                         <a href="#" data-toggle="modal" data-target="#id-alertes-modal">
  360.                             <img src="{{ asset('build/images/home/Alertes.png') }}" class="img-fluid" alt="Alertes">
  361.                         </a>
  362.                     </div>
  363.                 </div>
  364.             </div>
  365.             <div class="modal fade kl-img-modal" id="id-alertes-modal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  366.                 <div class="modal-dialog modal-lg modal-dialog-centered">
  367.                     <div class="modal-content">
  368.                         <div class="modal-header">
  369.                             <button type="button" class="close " data-dismiss="modal" aria-label="Close">
  370.                                 <span aria-hidden="true">&times;</span>
  371.                             </button>
  372.                         </div>
  373.                         <div class="modal-body">
  374.                             <img src="{{ asset('build/images/home/Alertes.png') }}" class="img-fluid">
  375.                         </div>
  376.                     </div>
  377.                 </div>
  378.             </div>
  380.         </div>
  381.     </div>
  382. </section>
  383. <!-- Fin Section Solutions -->
  384. <!-- Section Faq -->
  385. <section class="kl-section-faq kl-bg-bg-blue">
  386.     <div class="container kl-container-xl-1112">
  387.         <div class="text-uppercase kl-text-30 kl-color-purple-secondary kl-fw-bold text-center kl-mb-45">
  388.             <h2>Faq</h2>
  389.         </div>
  390.         <div class="kl-max-w-899 mx-auto">
  391.             <div class="accordion accordion-flush" id="id-accordion">
  392.                 <div class="accordion-item kl-accordion-item">
  393.                     <h2 class="accordion-header" id="id-accordion-1">
  394.                         <button class="accordion-button collapsed kl-text-16 kl-color-grey kl-btn-accordion"
  395.                             type="button" data-bs-toggle="collapse" data-bs-target="#id-data-1" aria-expanded="false"
  396.                             aria-controls="id-data-1">
  397.                             Qu'est-ce qu'un logiciel de gestion de parc automobile ?
  398.                         </button>
  399.                     </h2>
  400.                     <div id="id-data-1" class="accordion-collapse collapse" aria-labelledby="id-accordion-1"
  401.                         data-bs-parent="#id-accordion">
  402.                         <div class="accordion-body">
  403.                             Un logiciel de gestion de parc automobile est un outil informatique conçu pour aider les
  404.                             entreprises à gérer efficacement leur flotte de véhicules.
  405.                             Il permet de suivre les informations importantes relatives aux véhicules, telles que les
  406.                             détails sur les informations d'immatriculation, les informations sur l'assurance, les taux
  407.                             d'émission de C02, les consommations de carburant.<br>
  408.                             Il peut également aider les entreprises à optimiser l'utilisation de la flotte de véhicules
  409.                             et à réduire les coûts à travers la surveillance de la consommation de carburant et le suivi
  410.                             des kilomètres parcourus ainsi qu'à gérer les locations de manière à avoir un suivi des
  411.                             commandes des clients, un contrôle des facturations et des alertes en cas de contrats de
  412.                             location bientôt expirés.<br>
  413.                             Le logiciel permet d' identifier les domaines où des économies peuvent être réalisées grâce
  414.                             à des graphiques et des rapports qui montrent les écarts entre le réel et les prévisions.
  415.                         </div>
  416.                     </div>
  417.                 </div>
  418.                 <div class="accordion-item kl-accordion-item">
  419.                     <h2 class="accordion-header" id="id-accordion-2">
  420.                         <button class="accordion-button collapsed kl-text-16 kl-color-grey kl-btn-accordion"
  421.                             type="button" data-bs-toggle="collapse" data-bs-target="#id-data-2" aria-expanded="false"
  422.                             aria-controls="id-data-2">
  423.                             Quels sont les avantages d'avoir un suivi sur votre parc automobile ?
  424.                         </button>
  425.                     </h2>
  426.                     <div id="id-data-2" class="accordion-collapse collapse" aria-labelledby="id-accordion-2"
  427.                         data-bs-parent="#id-accordion">
  428.                         <div class="accordion-body">
  429.                             <p>
  430.                                 Un logiciel de gestion de parc automobile est un outil puissant pour les entreprises qui
  431.                                 possèdent une flotte de véhicules car il permet de suivre les informations importantes,
  432.                                 d'optimiser l'utilisation des véhicules et de réduire les coûts.
  433.                             </p>
  434.                             <br>
  435.                             <p>
  436.                                 L'utilisation d'un logiciel de gestion de parc automobile présente de nombreux avantages
  437.                                 pour les entreprises :
  438.                             </p>
  439.                             <ul>
  440.                                 <li>
  441.                                     <u>Suivi efficace des données pertinentes sur tous les véhicules</u>
  442.                                     : Le logiciel permet de suivre
  443.                                     efficacement les informations importantes sur les véhicules telles que les
  444.                                     informations d'immatriculation, les détails sur les propriétaires, les informations
  445.                                     sur l'assurance, les entretiens , les dépenses de carburant et les contrats de
  446.                                     location liés.
  447.                                 </li>
  448.                                 <li>
  449.                                     <u>Optimisation de l'utilisation des véhicules</u>
  450.                                     : Le logiciel permet de planifier
  451.                                     l'utilisation des véhicules de manière plus efficace en maximisant leur utilisation
  452.                                     et en minimisant les temps d'arrêt.
  453.                                 </li>
  454.                                 <li>
  455.                                     <u>Réduction des coûts</u>
  456.                                     : Le suivi des dépenses de carburant et des coûts
  457.                                     d'entretien peut aider les entreprises à identifier les domaines où des économies
  458.                                     peuvent être réalisées.
  459.                                 </li>
  460.                                 <li>
  461.                                     <u>Planification de l'entretien préventif</u>
  462.                                     : Les logiciels de gestion de parc
  463.                                     automobile permettent de planifier l'entretien préventif des véhicules en analysant
  464.                                     les kilométrages, ce qui peut aider à prolonger la durée de vie des véhicules et à
  465.                                     réduire les coûts d'entretien à long terme.
  466.                                 </li>
  467.                                 <li>
  468.                                     <u>Sécurité accrue</u>
  469.                                     : Les logiciels de gestion de parc automobile peuvent aider à
  470.                                     améliorer la sécurité des conducteurs et des véhicules en suivant les temps de
  471.                                     conduite des conducteurs afin d'éviter la fatigue au volant et réduire le risque
  472.                                     d'accidents.
  473.                                 </li>
  474.                             </ul>
  475.                         </div>
  476.                     </div>
  477.                 </div>
  478.                 <div class="accordion-item kl-accordion-item">
  479.                     <h2 class="accordion-header" id="id-accordion-3">
  480.                         <button class="accordion-button collapsed kl-text-16 kl-color-grey kl-btn-accordion"
  481.                             type="button" data-bs-toggle="collapse" data-bs-target="#id-data-3" aria-expanded="false"
  482.                             aria-controls="id-data-3">
  483.                             Quelles caractéristiques dois-je rechercher dans un logiciel de gestion de parc automobile ?
  484.                         </button>
  485.                     </h2>
  486.                     <div id="id-data-3" class="accordion-collapse collapse" aria-labelledby="id-accordion-3"
  487.                         data-bs-parent="#id-accordion">
  488.                         <div class="accordion-body">
  489.                             <p>
  490.                                 Il existe plusieurs fonctionnalités que vous devriez rechercher lors du choix d'un logiciel de gestion de parc automobile.
  491.                             </p>
  492.                             <ul>
  493.                                 <li>
  494.                                    Facilité d'insertion de toutes les données des véhicules (l'immatriculation, la marque, le modèle, la version, le prix du catalogue,
  495.                                     le genre, la puissance, le châssis, la date de mise en circulation, le taux d'émission de CO2, la consommation théorique, le kilométrage)
  496.                                 </li>
  497.                                 <li>
  498.                                     Habileté d'insertion des informations des contrats de location (le numéro, la date de début et de fin, la durée souscrite, le kilométrage au 
  499.                                     contrat, le kilométrage actuel, le kilométrage à la signature, le loyer, le coût pneumatique, le coût assistance, le frais de gestion, le montant TVS, 
  500.                                     le montant du malus CO2, le TCO, la consommation en carburant, le montant du péage, le montant du parking, le prix du lubrifiant, le coût du lavage) 
  501.                                     avec un module de suivi de commandes.
  502.                                 </li>
  503.                                 <li>
  504.                                     Capacité de gérer les informations des clients signant les contrats, des conducteurs et des véhicules
  505.                                 </li>
  506.                                 <li>
  507.                                     Aisance d'insérer les coûts variables et les factures réelles afin de voir les écarts
  508.                                 </li>
  509.                                 <li>Pouvoir visualiser les rapports ou Graphe représentant des données pertinentes comme : la moyenne des kilométrages, le taux moyen d'émission de CO2 de la flotte, les coûts par véhicules et les coûts globaux.
  510.                                 </li>
  511.                                 <li>
  512.                                     Possibilité de gérer les accès au logiciel des utilisateurs en fonction de leur
  513.                                     rôle.
  514.                                 </li>
  515.                             </ul>
  516.                         </div>
  517.                     </div>
  518.                 </div>
  519.                 <div class="accordion-item kl-accordion-item">
  520.                     <h2 class="accordion-header" id="id-accordion-4">
  521.                         <button class="accordion-button collapsed kl-text-16 kl-color-grey kl-btn-accordion"
  522.                             type="button" data-bs-toggle="collapse" data-bs-target="#id-data-4" aria-expanded="false"
  523.                             aria-controls="id-data-4">
  524.                             Comment fonctionne un logiciel de gestion de parc automobile ?
  525.                         </button>
  526.                     </h2>
  527.                     <div id="id-data-4" class="accordion-collapse collapse" aria-labelledby="id-accordion-4"
  528.                         data-bs-parent="#id-accordion">
  529.                         <div class="accordion-body">
  530.                             <p> Pour aider les gestionnaires à gérer leur flotte, le logiciel :</p>
  531.                             <ul>
  532.                                 <li>
  533.                                     <u>Collecte les données liées aux contrats de location</u> : informations sur le
  534.                                     véhicule, le
  535.                                     contrat, le client, les facturations, l'état des commandes
  536.                                 </li>
  537.                                 <li>
  538.                                     <u>Analyse les données</u> : algorithme pour analyser les données collectées afin d'identifier les problèmes de performance du véhicule et d'identifier les tâches à effectuer ou les anomalies potentiels avec le véhicule.
  539.                                 </li>
  540.                                 <li>
  541.                                     <u>Fait le suivi des coûts</u> : calcul des écarts entre les coûts variables et les
  542.                                     factures.
  543.                                 </li>
  544.                                 <li>
  545.                                     <u>Génère des rapports pour les prises de décisions</u> : sorties automatiques des
  546.                                     rapports sur
  547.                                     l'utilisation et l'entretien de la flotte sous forme de listes et de graphiques.
  548.                                 </li>
  549.                             </ul>
  550.                         </div>
  551.                     </div>
  552.                 </div>
  553.                 <div class="accordion-item kl-accordion-item">
  554.                     <h2 class="accordion-header" id="id-accordion-6">
  555.                         <button class="accordion-button collapsed kl-text-16 kl-color-grey kl-btn-accordion"
  556.                             type="button" data-bs-toggle="collapse" data-bs-target="#id-data-6" aria-expanded="false"
  557.                             aria-controls="id-data-6">
  558.                             Comment puis-je commencer à utiliser un logiciel de gestion de parc automobile ?
  559.                         </button>
  560.                     </h2>
  561.                     <div id="id-data-6" class="accordion-collapse collapse" aria-labelledby="id-accordion-6"
  562.                         data-bs-parent="#id-accordion">
  563.                         <div class="accordion-body">
  564.                             <p>
  565.                                 Si vous faites le choix d'utiliser une solution comme FleetCar qui est une application
  566.                                 Web
  567.                                 de gestion de parc automobile permettant d'avoir un suivi en temps réel sur les mesures
  568.                                 de
  569.                                 performances, sur les réservations de véhicules, les facturations de locations et les
  570.                                 coûts
  571.                                 variables , <a href="mailto:contact@fleet-car.io">cliquez ici</a> pour obtenir une démo.
  572.                             </p>
  573.                         </div>
  574.                     </div>
  575.                 </div>
  576.             </div>
  577.         </div>
  578.     </div>
  579. </section>
  580. <!-- Fin Section Faq -->
  581. <div class="kl-bg-footer">
  582.     <!-- Section About -->
  583.     <section id="about" class="kl-section-scroll kl-section-about mb-5">
  584.         <div class="container kl-container-xl-1112">
  585.             <div class="kl-text-30 kl-color-white kl-fw-bold text-center mb-5 pb-2">
  586.                 <h2>Qui sommes-nous ?</h2>
  587.             </div>
  588.             <div class="row text-center text-md-start">
  589.                 <div class="col-md-6">
  590.                     <img src="{{ asset('build/images/home/Mockup.png') }}" class="img-fluid" alt="">
  591.                 </div>
  592.                 <div class="col-md-6">
  593.                     <div class="kl-text-16 kl-color-white mb-4 pb-1">
  594.                         <p>Fleet Car a été créé par des experts de la gestion de parc de véhicules qui ont en cumulé
  595.                             plus de 30 ans d'expérience dans le domaine.</p>
  596.                     </div>
  597.                     <a href="mailto:contact@fleet-car.io"
  598.                         class="btn kl-btn-default kl-min-w-206 kl-btn-xl kl-custom-line-height">Demandez une démo</a>
  599.                 </div>
  600.             </div>
  601.         </div>
  602.     </section>
  603.     <!-- Fin Section About -->
  604.     <footer id="contact" class="kl-section-scroll">
  605.         <div class="container kl-container-xl-1112">
  606.             <div class="row kl-gy-30 kl-gy-xl-0">
  607.                 <div class="col-md-6 col-lg-4">
  608.                     <img src="{{ asset('build/images/logo-footer.svg') }}" alt="">
  609.                     <div class="kl-text-14 kl-color-white kl-mt-20">
  610.                         <p>Les logiciels de gestion de flotte de véhicules sont conçus pour aider les entreprises à
  611.                             gérer plus efficacement leurs véhicules et leurs conducteurs.</p>
  612.                     </div>
  613.                     <div class="kl-social-networks kl-mt-20 d-none">
  614.                         <div class="kl-text-14 kl-color-white mb-1">
  615.                             <p>Suivez-nous</p>
  616.                         </div>
  617.                         <ul class="d-flex justify-content-center justify-content-md-start">
  618.                             <li>
  619.                                 <a href="#" target="_blank">
  620.                                     <i class="fa-brands fa-facebook-f"></i>
  621.                                 </a>
  622.                             </li>
  623.                             <li>
  624.                                 <a href="#" target="_blank">
  625.                                     <i class="fa-brands fa-instagram"></i>
  626.                                 </a>
  627.                             </li>
  628.                             <li>
  629.                                 <a href="#" target="_blank">
  630.                                     <i class="fa-brands fa-linkedin-in"></i>
  631.                                 </a>
  632.                             </li>
  633.                             <li>
  634.                                 <a href="#" target="_blank">
  635.                                     <i class="fa-brands fa-twitter"></i>
  636.                                 </a>
  637.                             </li>
  638.                         </ul>
  639.                     </div>
  640.                 </div>
  641.                 <div class="col-md-6 col-lg-2 kl-col-lg-19">
  642.                     <div class="kl-text-16 kl-color-white mb-3">
  643.                         <h4>Liens rapides</h4>
  644.                     </div>
  645.                     <ul class="kl-menu-footer">
  646.                         <li>
  647.                             <a href="#fonctionnalites">Fonctionnalités</a>
  648.                         </li>
  649.                         <li>
  650.                             <a href="#solutions">Solutions</a>
  651.                         </li>
  652.                         <li>
  653.                             <a href="#about">Qui sommes-nous ?</a>
  654.                         </li>
  655.                     </ul>
  656.                     <ul class="kl-menu-footer kl-fw-light d-none">
  657.                         <li>
  658.                             <a href="#">Conditions Générales
  659.                             </a>
  660.                         </li>
  661.                         <li>
  662.                             <a href="#">Mentions Légales</a>
  663.                         </li>
  664.                     </ul>
  665.                 </div>
  666.                 <div class="col-md-6 col-lg-2 kl-col-lg-19 kl-ps-xl-30">
  667.                     <div class="kl-text-16 kl-color-white mb-3">
  668.                         <h4>Contact</h4>
  669.                     </div>
  670.                     <div class="mb-2">
  671.                         <img src="{{ asset('build/images/icons/icon-phone.svg') }}" class="me-3" alt="">
  672.                         <img src="{{ asset('build/images/icons/icon-chat.svg') }}" alt="">
  673.                         <div class="mt-3">
  674.                             <a href="tel:0344169431" class="kl-text-14 kl-color-white">034 41 694 31</a>
  675.                             <br>
  676.                             <a href="tel:0768598810" class="kl-text-14 kl-color-white">07 68 59 88 10</a>
  677.                         </div>
  678.                     </div>
  679.                     <div>
  680.                         <img src="{{ asset('build/images/icons/icon-envelope.svg') }}" alt="">
  681.                         <div class="mt-2">
  682.                             <a href="mailto:contact@fleet-car.io"
  683.                                 class="kl-text-14 kl-color-white">contact@fleet-car.io</a>
  684.                         </div>
  685.                     </div>
  686.                 </div>
  687.                 <div class="col-md-6 col-lg-4 kl-col-lg-28">
  688.                     <div class="kl-text-16 kl-color-white mb-3">
  689.                         <h4>Newsletter</h4>
  690.                     </div>
  691.                     <form action="{{ path('home_send_email') }}" method="post">
  692.                         <div class="position-relative">
  693.                             <input type="email" class="form-control kl-input-form" placeholder="Votre email" name="email" required>
  694.                             <button class="btn kl-btn-send"><img src="{{ asset('build/images/icons/icon-send.svg') }}"
  695.                                     alt=""></button>
  696.                         </div>
  697.                     </form>
  698.                 </div>
  699.             </div>
  700.             <div class="text-center kl-text-14 kl-color-white kl-fw-light mt-4 pt-3">
  701.                 <p>Tous droits réservés. 2023</p>
  702.             </div>
  703.         </div>
  704.     </footer>
  705. </div>
  707. {% endblock %}