templates/home/index.html.twig line 1

Open in your IDE?
  1. <!DOCTYPE html>
  3. <html lang="en">
  4.   <head>
  5.     <meta charset="utf-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1">
  7.     <title> Cassa Clock | Un service de pointage fiable, rapide et pensé pour vous !</title>
  8.     <link rel="icon" type="image/png" href="{{ asset('favicon.png') }}">
  10.     <!-- ======= Google Font =======-->
  11.     <link rel="preconnect" href="https://fonts.googleapis.com">
  12.     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
  13.     <link href="https://fonts.googleapis.com/css2?family=Inter:wght@100..900&amp;display=swap" rel="stylesheet">
  14.     <!-- End Google Font-->
  15.     
  16.     <!-- ======= Styles =======-->
  17.     <link href="assets/vendors/bootstrap/bootstrap.min.css" rel="stylesheet">
  18.     <link href="assets/vendors/bootstrap-icons/font/bootstrap-icons.min.css" rel="stylesheet">
  19.     <link href="assets/vendors/glightbox/glightbox.min.css" rel="stylesheet">
  20.     <link href="assets/vendors/swiper/swiper-bundle.min.css" rel="stylesheet">
  21.     <link href="assets/vendors/aos/aos.css" rel="stylesheet">
  22.     
  23.     
  24.     <!-- End Styles-->
  25.     
  26.     <!-- ======= Theme Style =======-->
  27.     <link href="assets/css/style.css" rel="stylesheet">
  28.     <!-- End Theme Style-->
  29.     
  30.     <!-- ======= Apply theme =======-->
  31.     <script>
  32.       // Apply the theme as early as possible to avoid flicker
  33.       (function() {
  34.       const storedTheme = localStorage.getItem('theme') || 'light';
  35.       document.documentElement.setAttribute('data-bs-theme', storedTheme);
  36.       })();
  37.     </script>
  39.     <style>
  40.     @media (min-width: 1200px) {
  41.     .g-xl-5, .gy-xl-5 {
  42.          --bs-gutter-y: 1rem; 
  43.     }
  44. }
  46. header .dropdown-menu {
  47.   position: absolute !important;
  48.   top: 100%;   /* juste en dessous du bouton */
  49.   left: 0;
  50.   z-index: 1050; /* passe au-dessus du header */
  51. }
  54. @media (max-width: 767.98px) {
  55.     .fbs__net-navbar .navbar-nav > li > .nav-link {
  56.         padding-top: 22px; 
  57.         padding-bottom: 22px; 
  58.         margin-right:5px
  59.     }
  60. }
  61. </style>
  62.   </head>
  63.   <body>
  64.     
  65.     
  66.     <!-- ======= Site Wrap =======-->
  67.     <div class="site-wrap">
  68.       
  69.       
  70.        <!-- ======= Header =======-->
  71.       <header class="fbs__net-navbar navbar navbar-expand-lg dark" aria-label="freebootstrap.net navbar">
  72.         <div class="container d-flex align-items-center justify-content-between">
  73.           
  74.           
  75.           <!-- Start Logo-->
  76.           <a class="navbar-brand w-auto" href="{{ path('home')}}">
  77.             <!-- If you use a text logo, uncomment this if it is commented-->
  78.             <!-- Vertex--> 
  79.             
  80.             <!-- If you plan to use an image logo, uncomment this if it is commented-->
  81.             
  82.             <!-- logo dark--><img class="logo dark img-fluid" src="{{ asset('assets/images/cassap.png')}}" alt="Cassa P"> 
  83.             
  84.             <!-- logo light--><img class="logo light img-fluid" src="{{ asset('assets/images/cassap.png')}}" alt="Cassa P">
  85.             
  86.             </a>
  87.           <!-- End Logo-->
  88.           
  89.           <!-- Start offcanvas-->
  90.           <div class="offcanvas offcanvas-start w-75" id="fbs__net-navbars" tabindex="-1" aria-labelledby="fbs__net-navbarsLabel">
  91.             
  92.             
  93.             <div class="offcanvas-header">
  94.               <div class="offcanvas-header-logo">
  95.                 <!-- If you use a text logo, uncomment this if it is commented-->
  96.                 
  97.                 <!-- h5#fbs__net-navbarsLabel.offcanvas-title Vertex-->
  98.                
  99.                 <!-- If you plan to use an image logo, uncomment this if it is commented-->
  100.                 <a class="logo-link" id="fbs__net-navbarsLabel" href="{{ path('home')}}">
  101.                   
  102.                   
  103.                   <!-- logo dark--><img class="logo dark img-fluid" src="{{ asset('assets/images/cassap.png')}}" alt="Cassa P"> 
  104.                   
  105.                   <!-- logo light--><img class="logo light img-fluid" src="{{ asset('assets/images/cassap.png')}}" alt="Cassa P"></a>
  106.                 
  107.               </div>
  108.               <button class="btn-close btn-close-black" type="button" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  109.             </div>
  110.             
  111.             <div class="offcanvas-body align-items-lg-center">
  112.               
  113.               
  114.               <ul class="navbar-nav nav me-auto ps-lg-5 mb-2 mb-lg-0">
  115.                 <li class="nav-item"><a class="nav-link scroll-link" href="{{ path('home') }}#apropos">A propos </a></li>
  116.                 <li class="nav-item"><a class="nav-link scroll-link" href="{{ path('home') }}#pricing">Nos formules</a></li>
  117.                 <li class="nav-item"><a class="nav-link scroll-link" href="{{ path('home') }}#comment-ca-marche">Comment ça marche ?</a></li>
  120.                
  121.                
  122.                 <li class="nav-item"><a class="nav-link scroll-link" href="{{ path('contact') }}">Nous-Contactez</a></li>
  124.       {% if isMobile %}                
  125.      
  126.      
  127.      <li class="nav-item"><a class="nav-link scroll-link" href="{{ path('souscription_new') }}" style="color:white">Souscrire un abonnement</a></li>
  128. <li class="nav-item"><a class="nav-link scroll-link" href="{{ path('app_login') }}" style="color:white">Se connecter</a></li>
  129. <li class="nav-item"><a class="nav-link scroll-link" href="{{ path('company_wizard') }}" style="color:white">S'inscrire</a></li>
  131. {% endif %}
  133.               </ul>
  134.               
  135.             </div>
  136.           </div>
  137.           <!-- End offcanvas-->
  138.           
  139.           <div class="ms-auto w-auto">
  140.             
  141.             
  142.             <div class="header-social d-flex align-items-center gap-1">
  145. <a class="btn btn-warning py-2 btn-white-outline" style="background:white" href="{{ path('souscription_new')}} ">Souscrire abonnement
  146.                         <svg class="lucide lucide-arrow-up-right" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  147.                           <path d="M7 7h10v10"></path>
  148.                           <path d="M7 17 17 7"></path>
  149.                         </svg>
  150. </a>
  151.             
  152.                            {%  if (app.user ) %}
  153.   
  154.               <ul class="navbar-nav nav me-auto  mb-2 mb-lg-0">
  155.                 <li class="nav-item dropdown" style="border: 1px solid #215c5c;border-radius:4px">
  156.                 
  157.                 <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown" aria-expanded="false" style="width:100%">
  158. <img class="img-profile rounded-circle" width="25px"src="{{ asset('img/undraw_profile.svg')}}">&nbsp;&nbsp;{{ app.user.nom}}
  159.  <i class="bi bi-chevron-down"></i></a>
  160.                   
  161.                   <ul class="dropdown-menu" style="margin-top:2px">
  162.                     <li><a class="nav-link scroll-link dropdown-item" href="{{ path('app_reset_password_request')}}" style="width:100%;text-align:justify">Changer mot de passe</a></li>
  163.                     <li><a class="nav-link scroll-link dropdown-item" href="/admin" target="_blank" style="width:100%;text-align:justify">Mon Dashbord</a></li>
  165. {% if isMobile %}    
  166.                                         <li><a class="nav-link scroll-link dropdown-item" href="{{ path('souscription_new')}}" style="width:100%;text-align:justify">Souscrire un abonnement</a></li>
  168.                      {% endif %}
  169.                     
  170.                     <li><a class="nav-link scroll-link dropdown-item" href="{{ path('app_logout')}}" style="width:100%;text-align:justify">Se déconnecter</a></li>
  171.                     
  172.                   </ul>
  173.                  
  174.                 </li>
  175.                   </ul>{% if isMobile %} &nbsp;&nbsp;{% endif %}
  176.  {% else %}
  178.             <a class="btn btn-primary py-2" style="background-color:white !important;border-color:#215c5c !important;color:#215c5c !important" href="{{ path('company_wizard') }}">
  179.             
  180.       
  183. <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20"
  184.      viewBox="0 0 24 24" fill="currentColor">
  185.   <!-- Tête -->
  186.   <circle cx="10" cy="7" r="4"/>
  187.   <!-- Épaules -->
  188.   <path d="M16 21a6 6 0 0 0-12 0"/>
  189.   <!-- Signe + -->
  190.   <rect x="17" y="3" width="2" height="6"/>
  191.   <rect x="16" y="4" width="6" height="2"/>
  192. </svg>
  195.  S'inscrire</a>
  197.  {% endif %}
  198.             
  199.             </div>
  200.             
  201.           </div>
  204.              <div class="ms-autos w-auto">
  205.             
  206.             
  207.             <div class="header-social d-flex align-items-center gap-1">
  208.               
  209.               <button class="fbs__net-navbar-toggler justify-content-center align-items-center ms-auto" data-bs-toggle="offcanvas" data-bs-target="#fbs__net-navbars" aria-controls="fbs__net-navbars" aria-label="Toggle navigation" aria-expanded="false">
  210.                 <svg class="fbs__net-icon-menu" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  211.                   <line x1="21" x2="3" y1="6" y2="6"></line>
  212.                   <line x1="15" x2="3" y1="12" y2="12"></line>
  213.                   <line x1="17" x2="3" y1="18" y2="18"></line>
  214.                 </svg>
  215.                 <svg class="fbs__net-icon-close" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  216.                   <path d="M18 6 6 18"></path>
  217.                   <path d="m6 6 12 12"></path>
  218.                 </svg>
  219.               </button>
  220.               
  221.             </div>
  222.             
  223.           </div>
  224.         </div>
  225.       </header>
  226.       
  227.       <!-- ======= Main =======-->
  228.       <main>
  229.         
  230.         
  231.         <!-- ======= Hero =======-->
  232.         <section class="hero__v6 section" id="home">
  233.           <div class="container">
  234.             <div class="row">
  235.               <div class="col-lg-6 mb-4 mb-lg-0">
  236.                 <div class="row">
  237.                   <div class="col-lg-11"><span class="hero-subtitle text-uppercase" data-aos="fade-up" data-aos-delay="0">Des solutions innovantes de Pointage</span>
  238.                     <h1 class="hero-title mb-3" data-aos="fade-up" data-aos-delay="100">Un service de pointage fiable, rapide et pensé pour vous</h1>
  239.                     <p class="hero-description mb-4 mb-lg-5" data-aos="fade-up" data-aos-delay="200">Le futur du Pointage, entre vos mains.</p>
  240.                     <div class="cta d-flex gap-2 mb-4 mb-lg-5" data-aos="fade-up" data-aos-delay="300">
  241.                     <a class="btn" href="{{ path('company_wizard') }}">Commencer maintenant</a>
  242.                     <a class="btn btn-white-outline" href="#comment-ca-marche">En savoir plus
  243.                         <svg class="lucide lucide-arrow-up-right" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  244.                           <path d="M7 7h10v10"></path>
  245.                           <path d="M7 17 17 7"></path>
  246.                         </svg></a></div>
  247.                     <div class="logos mb-4" data-aos="fade-up" data-aos-delay="400">
  248.                     <span class="logos-title text-uppercase mb-4 d-block">Fiable et approuvé par de grandes entreprises en Afrique.</span>
  249.                  
  250.                  
  251.                     </div>
  252.                   </div>
  253.                 </div>
  254.               </div>
  255.               <div class="col-lg-6">
  256.                 <div class="hero-img"><img class="img-card img-fluid" src="assets/images/card-expenses.png" alt="Image card" data-aos="fade-down" data-aos-delay="600"><img class="img-main img-fluid rounded-4" src="assets/images/hero-img-1-min.jpg" alt="Hero Image" data-aos="fade-in" data-aos-delay="500"></div>
  257.               </div>
  258.             </div>
  259.           </div>
  260.           <!-- End Hero-->
  261.         </section>
  262.         <!-- End Hero-->
  263.         
  264.         <!-- ======= About =======-->
  265.         <section class="about__v4 section" id="apropos">
  266.           <div class="container">
  267.             <div class="row">
  268.               <div class="col-md-6 order-md-2">
  269.                 <div class="row justify-content-end">
  270.                   <div class="col-md-11 mb-4 mb-md-0"><span class="subtitle text-uppercase mb-3" data-aos="fade-up" data-aos-delay="0">Qui sommes-nous ?</span>
  271.                     <h2 class="mb-4" data-aos="fade-up" data-aos-delay="100">Découvrez le futur du suivi de pointage grâce à nos services sécurisés, efficaces et faciles à utiliser.</h2>
  272.                     <div data-aos="fade-up" data-aos-delay="200">
  273.                       <p>Cassa Clock est une solution innovante de gestion du temps et de pointage adaptée aux entreprises, institutions et organisations au Sénégal et en Afrique. Notre système permet de suivre 
  274.                       efficacement la présence et les horaires des employés grâce à une plateforme moderne et simple d’utilisation.</p>
  275.                       <p>Notre plateforme de pointe garantit la sécurité, la fluidité et la simplicité de vos pointages, vous permettant de maîtriser le suivi de la ponctualité de vos collaborateurs.</p>
  276.                     </div>
  277.                     <h4 class="small fw-bold mt-4 mb-3" data-aos="fade-up" data-aos-delay="300">Ce qui nous guide : valeurs et vision</h4>
  278.                     <ul class="d-flex flex-row flex-wrap list-unstyled gap-3 features" data-aos="fade-up" data-aos-delay="400">
  279.                       <li class="d-flex align-items-center gap-2"><span class="icon rounded-circle text-center"><i class="bi bi-check"></i></span><span class="text">Innovation</span></li>
  280.                       <li class="d-flex align-items-center gap-2"><span class="icon rounded-circle text-center"><i class="bi bi-check"></i></span><span class="text">Sécurité</span></li>
  281.                       <li class="d-flex align-items-center gap-2"><span class="icon rounded-circle text-center"><i class="bi bi-check"></i></span><span class="text">Transparence</span></li>
  282.                       <li class="d-flex align-items-center gap-2"><span class="icon rounded-circle text-center"><i class="bi bi-check"></i></span><span class="text">Autonomisation </span></li>
  283.                       <li class="d-flex align-items-center gap-2"><span class="icon rounded-circle text-center"><i class="bi bi-check"></i></span><span class="text">Fiabilité </span></li>
  285.                     </ul>
  286.                   </div>
  287.                 </div>
  288.               </div>
  289.               <div class="col-md-6"> 
  290.                 <div class="img-wrap position-relative"><img class="img-fluid rounded-4" src="assets/images/about_2-min.png" alt="FreeBootstrap.net image placeholder" data-aos="fade-up" data-aos-delay="0">
  291.                   <div class="mission-statement p-4 rounded-4 d-flex gap-4" data-aos="fade-up" data-aos-delay="100">
  292.                     <div class="mission-icon text-center rounded-circle"><i class="bi bi-lightbulb fs-4"></i></div>
  293.                     <div>
  294.                       <h3 class="text-uppercase fw-bold">Notre Mission </h3>
  295.                       <p class="fs-5 mb-0">Avec Cassa Clock, nous donnons aux entreprises les moyens de contrôler leur temps et de gérer leurs équipes
  296.                        en toute simplicité grâce à un système de pointage sécurisé, pratique et 100% adapté à leurs besoins.</p>
  297.                     </div>
  298.                   </div>
  299.                 </div>
  300.               </div>
  301.             </div>
  302.           </div>
  303.         </section>
  304.         <!-- End About-->
  305.         
  306.         <!-- ======= Features =======-->
  307.         <section class="section features__v2" id="features">
  308.           <div class="container">
  309.             <div class="row">
  310.               <div class="col-12">
  311.                 <div class="d-lg-flex p-5 rounded-4 content" data-aos="fade-in" data-aos-delay="0">
  312.                   <div class="row">
  313.                     <div class="col-lg-5 mb-5 mb-lg-0" data-aos="fade-up" data-aos-delay="0">
  314.                       <div class="row"> 
  315.                         <div class="col-lg-11">
  316.                           <div class="h-100 flex-column justify-content-between d-flex">
  317.                             <div>
  318.                               <h2 class="mb-4">Nos atouts</h2>
  319.                               <p class="mb-5">Découvrez le futur du suivi de pointage grâce à une plateforme sécurisée, efficace et simple d’utilisation.
  320. Notre solution de pointe garantit un accès sûr et pérenne, une gestion fluide et intuitive, vous permettant de reprendre le contrôle 
  321. de votre pointage en toute confiance et sérénité.</p>
  322.                             </div>
  323.                             <div class="align-self-start"><a class="glightbox btn btn-play d-inline-flex align-items-center gap-2" href="https://www.youtube.com/watch?v=OT-uXNWJUBY" data-gallery="video"><i class="bi bi-play-fill"></i> Regarder la vidéo</a></div>
  324.                           </div>
  325.                         </div>
  326.                       </div>
  327.                     </div>
  328.                     <div class="col-lg-7">
  329.                       <div class="row justify-content-end">
  330.                         <div class="col-lg-11">
  331.                           <div class="row">
  332.                             <div class="col-sm-6" data-aos="fade-up" data-aos-delay="0">
  333.                               <div class="icon text-center mb-4"><i class="bi bi-person-check fs-4"></i></div>
  334.                               <h3 class="fs-6 fw-bold mb-3">Interface intuitive</h3>
  335.                               <p>Profitez d’une navigation fluide et ergonomique, avec un design responsive adapté à tous vos appareils.</p>
  336.                             </div>
  337.                             <div class="col-sm-6" data-aos="fade-up" data-aos-delay="100">
  338.                               <div class="icon text-center mb-4"><i class="bi bi-graph-up fs-4"></i></div>
  339.                               <h3 class="fs-6 fw-bold mb-3">Maîtrisez vos coûts</h3>
  340.                               <p>Un budget facile à gérer, un suivi détaillé et des analyses personnalisées.</p>
  341.                             </div>
  342.                             <div class="col-sm-6" data-aos="fade-up" data-aos-delay="200">
  343.                               <div class="icon text-center mb-4"><i class="bi bi-headset fs-4"></i></div>
  344.                               <h3 class="fs-6 fw-bold mb-3">Support Client</h3>
  345.                               <p>Un service disponible 24h/24 et 7j/7 via whatsapp, e-mail, téléphone et un centre d'aide complet.</p>
  346.                             </div>
  347.                             <div class="col-sm-6" data-aos="fade-up" data-aos-delay="300">
  348.                               <div class="icon text-center mb-4"><i class="bi bi-shield-lock fs-4"></i></div>
  349.                               <h3 class="fs-6 fw-bold mb-3">Mesures de sécurité</h3>
  350.                               <p>Protection des données, connexion sécurisée et prévention des attaques externes.</p>
  351.                             </div>
  352.                           </div>
  353.                         </div>
  354.                       </div>
  355.                     </div>
  356.                   </div>
  357.                 </div>
  358.               </div>
  359.             </div>
  360.           </div>
  361.         </section>
  362.         <!-- End Features-->
  363.         
  364.         <!-- ======= Pricing =======-->
  365.         <section class="section pricing__v2" id="pricing">
  366.           <div class="container">
  367.             <div class="row mb-5">
  368.               <div class="col-md-5 mx-auto text-center"><span class="subtitle text-uppercase mb-3" data-aos="fade-up" data-aos-delay="0">Nos formules d'abonnement</span>
  369.                 <h2 class="mb-3" data-aos="fade-up" data-aos-delay="100">Des formules accessibles...</h2>
  370.                 <p data-aos="fade-up" data-aos-delay="200">Profitez de solutions de pointage modernes, sécurisées et simples à utiliser, adaptées à tous les budgets.</p>
  371.               </div>
  372.             </div>
  373.             <div class="row">
  374.               <div class="col-md-4 mb-4 mb-md-0" data-aos="fade-up" data-aos-delay="300">
  375.                 <div class="p-5 rounded-4 price-table h-100">
  376.                   <h3>Xéweul</h3>
  377.                   <ul class="list-unstyled d-flex flex-column gap-3">
  378.                         <li class="d-flex gap-2 align-items-start mb-0"><span class="icon rounded-circle position-relative mt-1"><i class="bi bi-check"></i></span><span>Analyses et rapports journaliers</span></li>
  379.                         <li class="d-flex gap-2 align-items-start mb-0"><span class="icon rounded-circle position-relative mt-1"><i class="bi bi-check"></i></span><span>Support client</span></li>
  380.                         <li class="d-flex gap-2 align-items-start mb-0"><span class="icon rounded-circle position-relative mt-1"><i class="bi bi-check"></i></span><span>Nombre d'employés égal 10</span></li>
  381.                         <li class="d-flex gap-2 align-items-start mb-0"><span class="icon rounded-circle position-relative mt-1"><i class="bi bi-check"></i></span><span>Gestion centralisé pour plusieurs sièges d'entreprise</span></li>
  382.                       </ul>
  383.                   <div class="price mb-4"><strong>12.000 F</strong><span>/ mois</span></div>
  384.                   <div><a class="btn" href="{{ path('souscription_new')}}">S'abonner maintenant</a></div>
  385.                 </div>
  386.               </div>
  387.               <div class="col-md-4" data-aos="fade-up" data-aos-delay="400">
  388.                 <div class="p-5 rounded-4 price-table popular h-100">
  389.                   <div class="row">
  390.                     <div class="col-md-12">
  391.                       <h3 class="mb-3">Business</h3>
  392.                       <ul class="list-unstyled d-flex flex-column gap-3">
  393.                         <li class="d-flex gap-2 align-items-start mb-0"><span class="icon rounded-circle position-relative mt-1"><i class="bi bi-check"></i></span><span>Analyses et rapports journaliers personnalisés</span></li>
  394.                         <li class="d-flex gap-2 align-items-start mb-0"><span class="icon rounded-circle position-relative mt-1"><i class="bi bi-check"></i></span><span>Support client prioritaire</span></li>
  395.                         <li class="d-flex gap-2 align-items-start mb-0"><span class="icon rounded-circle position-relative mt-1"><i class="bi bi-check"></i></span><span>Nombre d'employés égal 50</span></li>
  396.                         <li class="d-flex gap-2 align-items-start mb-0"><span class="icon rounded-circle position-relative mt-1"><i class="bi bi-check"></i></span><span>Gestion centralisé pour plusieurs sièges d'entreprise</span></li>
  397.                       </ul>
  398.                       <div class="price mb-4"><strong class="me-1">20.000 F</strong><span>/ mois</span></div>
  399.                       <div><a class="btn btn-white hover-outline" href="{{ path('souscription_new')}}">S'abonner maintenant</a></div>
  400.                     </div>
  401.                     
  402.                   </div>
  403.                 </div>
  404.               </div>
  406.                <div class="col-md-4 mb-4 mb-md-0" data-aos="fade-up" data-aos-delay="300">
  407.                 <div class="p-5 rounded-4 price-table h-100">
  408.                   <h3>Premium</h3>
  409.                   <ul class="list-unstyled d-flex flex-column gap-3">
  410.                         <li class="d-flex gap-2 align-items-start mb-0"><span class="icon rounded-circle position-relative mt-1"><i class="bi bi-check"></i></span><span>Dashbord et rapports détaillés</span></li>
  411.                         <li class="d-flex gap-2 align-items-start mb-0"><span class="icon rounded-circle position-relative mt-1"><i class="bi bi-check"></i></span><span>Support client 24/7</span></li>
  412.                         <li class="d-flex gap-2 align-items-start mb-0"><span class="icon rounded-circle position-relative mt-1"><i class="bi bi-check"></i></span><span>Nombre d'employés jusqu' à 150</span></li>
  413.                         <li class="d-flex gap-2 align-items-start mb-0"><span class="icon rounded-circle position-relative mt-1"><i class="bi bi-check"></i></span><span>Gestion centralisé pour plusieurs sièges d'entreprise</span></li>
  414.                       </ul>
  415.                   <div class="price mb-4"><strong>35.000 F</strong><span>/ mois</span></div>
  416.                   <div><a class="btn" href="{{ path('souscription_new')}}">S'abonner maintenant</a></div>
  417.                 </div>
  418.               </div>
  419.             </div>
  420.           </div>
  421.         </section>
  422.         <!-- End Pricing-->
  423.         
  424.         <!-- ======= How it works =======-->
  425.         <section class="section howitworks__v1" id="comment-ca-marche" style="padding-bottom:50px">
  426.           <div class="container">
  427.             <div class="row mb-5">
  428.               <div class="col-md-6 text-center mx-auto"><span class="subtitle text-uppercase mb-3" data-aos="fade-up" data-aos-delay="0">Comment ça fonctionne ?</span>
  429.                 <h2 data-aos="fade-up" data-aos-delay="100">Cassa Clock</h2>
  430.                 <p data-aos="fade-up" data-aos-delay="200">Notre plateforme, est conçue pour rendre la gestion de vos Pointages simple et efficace. Suivez ces quelques étapes faciles pour commencer: </p>
  431.               </div>
  432.             </div>
  433.             <div class="row g-md-5">
  434.               <div class="col-md-6 col-lg-3">
  435.                 <div class="step-card text-center h-100 d-flex flex-column justify-content-start position-relative" data-aos="fade-up" data-aos-delay="0">
  436.                   <div data-aos="fade-right" data-aos-delay="500"><img class="arch-line" src="assets/images/arch-line.svg" alt="FreeBootstrap.net image placeholder"></div><span class="step-number rounded-circle text-center fw-bold mb-5 mx-auto">1</span>
  437.                   <div>
  438.                     <h3 class="fs-5 mb-4">Inscription</h3>
  439.                     <p>Visitez notre site web et créez votre compte en quelques minutes. Fournissez vos informations de base pour un accès sécurisé à votre espace.</p>
  440.                   </div>
  441.                 </div>
  442.               </div>
  443.               <div class="col-md-6 col-lg-3" data-aos="fade-up" data-aos-delay="600">
  444.                 <div class="step-card reverse text-center h-100 d-flex flex-column justify-content-start position-relative">
  445.                   <div data-aos="fade-right" data-aos-delay="1100"><img class="arch-line reverse" src="assets/images/arch-line-reverse.svg" alt="FreeBootstrap.net image placeholder"></div><span class="step-number rounded-circle text-center fw-bold mb-5 mx-auto">2</span>
  446.                   <h3 class="fs-5 mb-4">Vérification de votre compte</h3>
  447.                   <p>Complétez vos informations personnelles ou professionnelles pour adapter la plateforme à vos besoins spécifiques.</p>
  448.                 </div>
  449.               </div>
  450.               <div class="col-md-6 col-lg-3" data-aos="fade-up" data-aos-delay="1200">
  451.                 <div class="step-card text-center h-100 d-flex flex-column justify-content-start position-relative">
  452.                   <div data-aos="fade-right" data-aos-delay="1700"><img class="arch-line" src="assets/images/arch-line.svg" alt="FreeBootstrap.net image placeholder"></div><span class="step-number rounded-circle text-center fw-bold mb-5 mx-auto">3</span>
  453.                   <h3 class="fs-5 mb-4">Souscription à un abonnement</h3>
  454.                   <p>Choisissez la formule qui vous convient et accédez à toutes les fonctionnalités de gestion de pointage de votre entreprise.</p>
  455.                 </div>
  456.               </div>
  457.               <div class="col-md-6 col-lg-3" data-aos="fade-up" data-aos-delay="1800">
  458.                 <div class="step-card last text-center h-100 d-flex flex-column justify-content-start position-relative"><span class="step-number rounded-circle text-center fw-bold mb-5 mx-auto">4</span>
  459.                   <div>
  460.                     <h3 class="fs-5 mb-4">Prise en main</h3>
  461.                     <p>Commencez à gérer votre système de pointage avec un tableau de bord clair et des rapports détaillés pour un suivi efficace.</p>
  462.                   </div>
  463.                 </div>
  464.               </div>
  465.             </div>
  466.           </div>
  467.         </section>
  468.         <!-- End How it works-->
  469.         
  470.        
  471.         <!-- End Stats-->
  472.         
  473.        
  474.        
  475.         <!-- End FAQ-->
  476.       
  477.         <!-- End Contact-->
  478.         
  479.      <!-- ======= Footer =======-->
  480.         <footer class="footer pt-5 pb-5" style="padding-top:0">
  481.           <div class="container">
  482.             <div class="row mb-5 pb-4">
  483.              
  484.             <div class="row justify-content-between mb-5 g-xl-5">
  485.               <div class="col-md-4 mb-5 mb-lg-0">
  486.                 <img class="logo dark img-fluid" width="80%" src="{{ asset('assets/images/cassapgrand.png')}}" alt="Cassa P">
  487.                 <p class="mb-4">
  488.       Utilisez nos outils de pointage pour développer vos activités et donner vie à votre vision.</p>
  489.               
  490. <p class="mb-4">
  492.        <a class="footer__link" href="#" target="_blank">
  493.    <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48" fill="none" stroke="#215C5C" stroke-width="2">
  494.   <rect x="1" y="1" width="46" height="46" rx="5" ry="5"/>
  495.   <path d="M16 20v12M16 14v0.01M22 20v12M22 24c0-2 2-4 4-4s4 2 4 4v8" stroke-linecap="round" stroke-linejoin="round"/>
  496. </svg>
  498. </a>
  499.     <a class="footer__link" href="#" target="_blank">
  500. <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48" fill="none" stroke="#215C5C" stroke-width="2">
  501.   <rect x="1" y="1" width="46" height="46" rx="5" ry="5"/>
  502.   <path d="M26 16h4v-4h-4c-2.21 0-4 1.79-4 4v4h-4v4h4v12h4V24h4l1-4h-5v-4c0-.55.45-1 1-1z" stroke-linecap="round" stroke-linejoin="round"/>
  503. </svg>
  508. </a>
  509.     
  510.     <a class="footer__link" href="#" target="_blank">
  511.    <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48" fill="none" stroke="#215C5C" stroke-width="2">
  512.   <rect x="1" y="1" width="46" height="46" rx="5" ry="5"/>
  513.   <path d="M19 17l10 7-10 7V17zM36 19.5c-.5-2-2-3-4-3H16c-2 0-3.5 1-4 3-.5 2-.5 6 0 8 .5 2 2 3 4 3h16c2 0 3.5-1 4-3 .5-2 .5-6 0-8z" stroke-linecap="round" stroke-linejoin="round"/>
  514. </svg>
  517. </a>
  518.      
  519.               
  520.    </p>           
  521.               </div>
  522.               <div class="col-md-7">
  523.                 <div class="row g-2">
  524.                   <div class="col-md-6 col-xs-6 col-lg-4 mb-4 mb-lg-0">
  525.                     <h3 class="mb-3">L'entreprise</h3>
  526.                     <ul class="list-unstyled">
  527.                       <li><a href="{{ path('home')}}#apropos">Notre Vision</a></li>
  528.                       <li><a href="{{ path('home')}}#pricing">Nos formules </a></li>
  529.                       <li><a href="{{ path('souscription_new')}}">Sourcrire  abonnement</a></li>
  530.                       <li><a href="#">Faq</a></li>
  531.                      
  532.                       <li><a href="/privacy">Terms &amp; Conditions</a></li>
  533.                     </ul>
  534.                   </div>
  535.                   <div class="col-md-6 col-xs-6 col-lg-4 mb-4 mb-lg-0">
  536.                     <h3 class="mb-3">Comptes</h3>
  537.                     <ul class="list-unstyled">
  538.                       <li><a href="{{ path('company_wizard')}}">S'inscrire</a></li>
  539.                       <li><a href="{{ path('app_login')}}">Se connecter</a></li>
  540.                       <li><a href="{{ path('app_reset_password_request')}}">Mot de passe oublié</a></li>
  541.                       <li><a href="/admin" target="_blank">Administration</a></li>
  542.                       <li><a href="#">Bientôt disponible</a></li>
  543.                       
  544.                     </ul>
  545.                   </div>
  546.                   <div class="col-md-6 col-lg-4 mb-4 mb-lg-0 quick-contact">
  547.                     <h3 class="mb-3">Contacts</h3>
  548.                     <p class="d-flex mb-3"><i class="bi bi-geo-alt-fill me-3"></i><span>32 B Fass Kounoune,
  549.  <br> Rufisque, Dakar</span></p><a class="d-flex mb-3" href="mailto:contact@cassaconsulting.com"><i class="bi bi-envelope-fill me-3"></i>
  550.  <span>contact@cassaconsulting.com</span></a><a class="d-flex mb-3" href="tel://+221789540409"><i class="bi bi-telephone-fill me-3"></i>
  551.  <span>+221 78 954 04 09</span></a><a class="d-flex mb-3" href="https://cassaconsulting.com"><i class="bi bi-globe me-3"></i><span>cassaconsulting.com</span></a>
  552.                   </div>
  553.                 </div>
  554.               </div>
  555.             </div>
  556.             <div class="row credits pt-3">
  557.               <div class="col-xl-8 text-center text-xl-start mb-3 mb-xl-0">
  558.                 <!--
  559.                 Note:
  560.                 =>>> Please keep all the footer links intact. <<<=
  561.                 =>>> You can only remove the links if you buy the pro version. <<<=
  562.                 =>>> Buy the pro version, which includes a functional PHP/AJAX contact form and many additional features.: https://freebootstrap.net/template/vertex-pro-bootstrap-website-template-for-portfolio/ <<<=
  563.                 --> 
  564.                 &copy;
  565.                 <script>document.write(new Date().getFullYear());</script> Cassa Clock. 
  566.                  Tous les droits réservés. Réalisé par <a href="https://cassaclock.com">Cassa Clock</a>
  567.               </div>
  568.               <div class="col-xl-4 justify-content-start justify-content-xl-end quick-links d-flex flex-column flex-xl-row text-center text-xl-start gap-1">Distribué par<a href="https://cassaconsulting.com" target="_blank">Cassa Consulting</a></div>
  569.             </div>
  570.           </div>
  571.         </footer>
  572.         <!-- End Footer-->
  573.         
  574.       </main>
  575.     </div>
  576.     
  577.     <!-- ======= Back to Top =======-->
  578.     <button id="back-to-top"><i class="bi bi-arrow-up-short"></i></button>
  579.     <!-- End Back to top-->
  580.     
  581.     <!-- ======= Javascripts =======-->
  582.     <script src="{{asset('assets/vendors/bootstrap/bootstrap.bundle.min.js')}}"></script>
  583.     <script src="{{asset('assets/vendors/gsap/gsap.min.js')}}"></script>
  584.     <script src="{{asset('assets/vendors/imagesloaded/imagesloaded.pkgd.min.js')}}"></script>
  585.     <script src="{{asset('assets/vendors/isotope/isotope.pkgd.min.js')}}"></script>
  586.     <script src="{{asset('assets/vendors/glightbox/glightbox.min.js')}}"></script>
  587.     <script src="{{asset('assets/vendors/swiper/swiper-bundle.min.js')}}"></script>
  588.     <script src="{{asset('assets/vendors/aos/aos.js')}}"></script>
  589.     <script src="{{asset('assets/vendors/purecounter/purecounter.js')}}"></script>
  590.     <script src="{{asset('assets/js/custom.js')}}"></script>
  591.     <!-- End JavaScripts-->
  592.   </body>
  593. </html>