templates/freelance/index.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  2. {% block title %}MAZEGO - Plateforme SaaS Tunisienne de Facturation Électronique{% endblock %}
  4. {% block body %}
  6. {{ include('home/header-freelance.html.twig') }}
  8. <style>
  9.     @media (max-width: 767px) {
  10.         .home-content {
  11.             margin-top: 42px;
  12.         }
  13.         .about-text-info {
  14.             display: flex;
  15.             align-items: flex-start;
  16.             justify-content: center;
  17.             flex-direction: column;
  18.             height: 100%;
  19.             margin-top: 20px;
  20.         }
  21.     }
  22.     
  23.     .home-content-image video,
  24.     .home-content-image img {
  25.         display: block;
  26.         width: 100%;
  27.         height: auto;
  28.         transition: opacity 0.5s ease;
  29.     }
  31.     #playButton {
  32.         position: absolute;
  33.         top: 50%;
  34.         left: 50%;
  35.         transform: translate(-50%, -50%);
  36.         width: 64px;
  37.         height: 64px;
  38.         background-image: url('play-button.png');
  39.         background-size: cover;
  40.         cursor: pointer;
  41.     }
  43.     .home-content-image {
  44.         position: relative;
  45.         width: 100%;
  46.     }
  48.     #myVideo {
  49.         width: 100%;
  50.     }
  52.     .play-btn {
  53.         position: absolute;
  54.         top: 50%;
  55.         left: 50%;
  56.         transform: translate(-50%, -50%);
  57.         width: 50px;
  58.         height: 50px;
  59.         background-color: rgba(255, 255, 255, 0.5);
  60.         border: none;
  61.         border-radius: 50%;
  62.         cursor: pointer;
  63.         display: flex;
  64.         justify-content: center;
  65.         align-items: center;
  66.     }
  67.     
  68.     /* Badge de confiance */
  69.     .trust-badge {
  70.         display: inline-flex;
  71.         align-items: center;
  72.         gap: 8px;
  73.         background: rgba(13, 203, 229, 0.1);
  74.         border: 1px solid #0DCBE5;
  75.         border-radius: 50px;
  76.         padding: 8px 16px;
  77.         font-size: 14px;
  78.         color: #0DCBE5;
  79.         font-weight: 600;
  80.         margin-top: 15px;
  81.     }
  82.     
  83.     .trust-badge i {
  84.         font-size: 16px;
  85.     }
  86. </style>
  88. <style>
  89.     @media only screen and (max-width: 479px) {
  90.         .diagonals {
  91.             margin-top: 38px;
  92.         }
  94.         .about-area .section-padding {
  95.             padding: 38px 0;
  96.             position: relative;
  97.         }
  99.         #myVideo {
  100.             width: 100%;
  101.             padding-bottom: 9px;
  102.         }
  104.         .footer {
  105.             padding-bottom: 1px 0;
  106.             background: #fff;
  107.             position: relative;
  108.             bottom: 4px;
  109.         }
  111.         .section-padding {
  112.             padding: 24px 0;
  113.             position: relative;
  114.         }
  116.         .about-image {
  117.             margin-bottom: 8px;
  118.         }
  120.         .about-image img {
  121.             display: none;
  122.         }
  124.         .intro {
  125.             height: 63vh;
  126.         }
  128.         .home-content-image {
  129.             position: relative;
  130.             overflow: hidden;
  131.             border-radius: 10px;
  132.             box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
  133.         }
  135.         .home-content h1 {
  136.             font-size: 35px;
  137.         }
  139.         .home-content-left {
  140.             padding-top: 30px;
  141.             position: relative;
  142.             top: -20px;
  143.         }
  145.         .table-cell {
  146.             display: block;
  147.             vertical-align: middle;
  148.         }
  150.         .home-content .home-btn {
  151.             margin-right: 10px;
  152.             margin-bottom: 12px;
  153.         }
  154.     }
  155. </style>
  157. <!-- Section Hero avec Vidéo Inline Moderne -->
  158. <div id="home" class="intro mt-5">
  159.     <div class="display-table">
  160.         <div class="table-cell">
  161.             <div class="container">
  162.                 <div class="row align-items-center">
  163.                     <div class="col-md-6 home-content-left">
  164.                         <div class="home-content">
  165.                             <h1>Simplifiez votre gestion d'entreprise en Tunisie avec <strong>Mazego</strong></h1>
  166.                             <p style="font-size: 18px; font-weight: 500;">La plateforme SaaS tunisienne de facturation électronique et de gestion d'entreprise.</p>
  167.                             <p>Mazego est un logiciel de gestion 100% adapté aux TPE/PME, auto‑entrepreneurs et cabinets tunisiens, pour une gestion moderne, conforme et simple.</p>
  168.                             
  169.                             <div class="trust-badge">
  170.                                 <i class="bi bi-shield-check"></i>
  171.                                 Conforme à la facturation électronique tunisienne (TTN, elFatoora, DigiGo)
  172.                             </div>
  173.                             
  174.                             <div style="margin-top: 20px; display: flex; gap: 15px; flex-wrap: wrap;">
  175.                                 <a href="{{ path('register') }}" class="button js-scroll home-btn">
  176.                                     Démarrer gratuitement
  177.                                 </a>
  178.                                 <button class="button-secondary js-scroll" id="watchVideoBtn">
  179.                                     <i class="bi bi-play-circle me-2"></i>
  180.                                     Voir la démo
  181.                                 </button>
  182.                             </div>
  183.                         </div>
  184.                     </div>
  185.                     
  186.                     <div class="col-md-6">
  187.                         <div class="home-content-video-modern">
  188.                             <!-- Conteneur de la vidéo avec design moderne -->
  189.                             <div class="video-wrapper-modern">
  190.                                 <div class="video-frame">
  191.                                     <!-- Thumbnail avant lecture -->
  192.                                     <div class="video-thumbnail" id="videoThumbnail">
  193.                                         <img src="{{ asset('assets/images/img-independants-MZ01- copie.jpg') }}" alt="Démo Mazego">
  194.                                         <div class="play-overlay-modern">
  195.                                             <div class="ripple-button">
  196.                                                 <div class="ripple-circle ripple-1"></div>
  197.                                                 <div class="ripple-circle ripple-2"></div>
  198.                                                 <div class="ripple-circle ripple-3"></div>
  199.                                                 <div class="play-icon-modern">
  200.                                                     <svg width="60" height="60" viewBox="0 0 60 60" fill="none">
  201.                                                         <circle cx="30" cy="30" r="30" fill="white"/>
  202.                                                         <path d="M24 18L42 30L24 42V18Z" fill="#0DCBE5"/>
  203.                                                     </svg>
  204.                                                 </div>
  205.                                             </div>
  206.                                         </div>
  207.                                     </div>
  208.                                     
  209.                                     <!-- Vidéo lecteur -->
  210.                                     <div class="video-player-modern" id="videoPlayerModern" style="display: none;">
  211.                                         <video id="modernVideo" controls preload="metadata" poster="{{ asset('assets/images/img-independants-MZ01- copie.jpg') }}">
  212.                                             <source src="{{ asset('assets/videos/2026-02-14 22-14-10.mkv') }}" type="video/x-matroska">
  213.                                             <source src="{{ asset('assets/videos/mazego-demo.mp4') }}" type="video/mp4">
  214.                                             Votre navigateur ne supporte pas la lecture de vidéos.
  215.                                         </video>
  216.                                     </div>
  217.                                 </div>
  218.                                 
  219.                                 <!-- Indicateurs sous la vidéo -->
  220.                                 <div class="video-indicators">
  221.                                     <div class="indicator-item">
  222.                                         <i class="bi bi-clock"></i>
  223.                                         <span>2 min</span>
  224.                                     </div>
  225.                                     <div class="indicator-item">
  226.                                         <i class="bi bi-bar-chart"></i>
  227.                                         <span>Démo complète</span>
  228.                                     </div>
  229.                                     <div class="indicator-item">
  230.                                         <i class="bi bi-shield-check"></i>
  231.                                         <span>Sans inscription</span>
  232.                                     </div>
  233.                                 </div>
  234.                             </div>
  235.                         </div>
  236.                     </div>
  237.                 </div>
  238.             </div>
  239.         </div>
  240.     </div>
  241. </div>
  243. <style>
  244. /* Container vidéo moderne */
  245. .home-content-video-modern {
  246.     position: relative;
  247.     width: 100%;
  248. }
  250. .video-wrapper-modern {
  251.     position: relative;
  252. }
  254. .video-frame {
  255.     position: relative;
  256.     border-radius: 24px;
  257.     overflow: hidden;
  258.     box-shadow: 0 25px 80px rgba(13, 203, 229, 0.25);
  259.     background: linear-gradient(135deg, #0DCBE5 0%, #1d9ec7 100%);
  260.     padding: 4px;
  261. }
  263. /* Thumbnail */
  264. .video-thumbnail {
  265.     position: relative;
  266.     background: #000;
  267.     border-radius: 20px;
  268.     overflow: hidden;
  269.     cursor: pointer;
  270.     aspect-ratio: 16/9;
  271. }
  273. .video-thumbnail img {
  274.     width: 100%;
  275.     height: 100%;
  276.     object-fit: cover;
  277.     transition: transform 0.6s ease;
  278. }
  280. .video-thumbnail:hover img {
  281.     transform: scale(1.08);
  282. }
  284. /* Play overlay moderne avec effet ripple */
  285. .play-overlay-modern {
  286.     position: absolute;
  287.     top: 0;
  288.     left: 0;
  289.     right: 0;
  290.     bottom: 0;
  291.     background: linear-gradient(135deg, rgba(13, 203, 229, 0.2) 0%, rgba(29, 158, 199, 0.2) 100%);
  292.     display: flex;
  293.     align-items: center;
  294.     justify-content: center;
  295.     transition: background 0.3s ease;
  296. }
  298. .video-thumbnail:hover .play-overlay-modern {
  299.     background: linear-gradient(135deg, rgba(13, 203, 229, 0.3) 0%, rgba(29, 158, 199, 0.3) 100%);
  300. }
  302. /* Bouton play avec effet ripple */
  303. .ripple-button {
  304.     position: relative;
  305.     width: 100px;
  306.     height: 100px;
  307.     display: flex;
  308.     align-items: center;
  309.     justify-content: center;
  310. }
  312. .ripple-circle {
  313.     position: absolute;
  314.     border: 2px solid rgba(255, 255, 255, 0.5);
  315.     border-radius: 50%;
  316.     animation: ripple 2s infinite;
  317. }
  319. .ripple-1 {
  320.     width: 60px;
  321.     height: 60px;
  322.     animation-delay: 0s;
  323. }
  325. .ripple-2 {
  326.     width: 80px;
  327.     height: 80px;
  328.     animation-delay: 0.5s;
  329. }
  331. .ripple-3 {
  332.     width: 100px;
  333.     height: 100px;
  334.     animation-delay: 1s;
  335. }
  337. @keyframes ripple {
  338.     0% {
  339.         transform: scale(0.8);
  340.         opacity: 1;
  341.     }
  342.     100% {
  343.         transform: scale(1.5);
  344.         opacity: 0;
  345.     }
  346. }
  348. .play-icon-modern {
  349.     position: relative;
  350.     z-index: 2;
  351.     filter: drop-shadow(0 10px 30px rgba(0, 0, 0, 0.3));
  352.     transition: transform 0.3s ease;
  353. }
  355. .video-thumbnail:hover .play-icon-modern {
  356.     transform: scale(1.15);
  357. }
  359. /* Lecteur vidéo */
  360. .video-player-modern {
  361.     position: relative;
  362.     background: #000;
  363.     border-radius: 20px;
  364.     overflow: hidden;
  365. }
  367. .video-player-modern video {
  368.     width: 100%;
  369.     height: auto;
  370.     display: block;
  371.     border-radius: 20px;
  372. }
  374. /* Indicateurs sous la vidéo */
  375. .video-indicators {
  376.     display: flex;
  377.     justify-content: center;
  378.     gap: 30px;
  379.     margin-top: 20px;
  380.     flex-wrap: wrap;
  381. }
  383. .indicator-item {
  384.     display: flex;
  385.     align-items: center;
  386.     gap: 8px;
  387.     padding: 10px 20px;
  388.     background: rgba(13, 203, 229, 0.1);
  389.     border-radius: 50px;
  390.     color: #0DCBE5;
  391.     font-size: 14px;
  392.     font-weight: 600;
  393.     transition: all 0.3s ease;
  394. }
  396. .indicator-item:hover {
  397.     background: rgba(13, 203, 229, 0.15);
  398.     transform: translateY(-2px);
  399. }
  401. .indicator-item i {
  402.     font-size: 18px;
  403. }
  405. /* Bouton secondaire "Voir la démo" */
  406. .button-secondary {
  407.     display: inline-flex;
  408.     align-items: center;
  409.     justify-content: center;
  410.     padding: 14px 28px;
  411.     background: white;
  412.     color: #0DCBE5;
  413.     border: 2px solid #0DCBE5;
  414.     border-radius: 50px;
  415.     font-weight: 600;
  416.     font-size: 16px;
  417.     text-decoration: none;
  418.     transition: all 0.3s ease;
  419.     cursor: pointer;
  420. }
  422. .button-secondary:hover {
  423.     background: #0DCBE5;
  424.     color: white;
  425.     transform: translateY(-2px);
  426.     box-shadow: 0 8px 20px rgba(13, 203, 229, 0.3);
  427. }
  429. /* Animation d'entrée */
  430. @keyframes slideInRight {
  431.     from {
  432.         opacity: 0;
  433.         transform: translateX(50px);
  434.     }
  435.     to {
  436.         opacity: 1;
  437.         transform: translateX(0);
  438.     }
  439. }
  441. .video-wrapper-modern {
  442.     animation: slideInRight 1s ease;
  443. }
  445. /* Responsive */
  446. @media (max-width: 767px) {
  447.     .home-content-video-modern {
  448.         margin-top: 40px;
  449.     }
  451.     .video-frame {
  452.         border-radius: 16px;
  453.         padding: 3px;
  454.     }
  456.     .video-thumbnail {
  457.         border-radius: 13px;
  458.     }
  460.     .ripple-button {
  461.         width: 80px;
  462.         height: 80px;
  463.     }
  465.     .ripple-1 {
  466.         width: 50px;
  467.         height: 50px;
  468.     }
  470.     .ripple-2 {
  471.         width: 65px;
  472.         height: 65px;
  473.     }
  475.     .ripple-3 {
  476.         width: 80px;
  477.         height: 80px;
  478.     }
  480.     .play-icon-modern svg {
  481.         width: 50px;
  482.         height: 50px;
  483.     }
  485.     .video-indicators {
  486.         gap: 15px;
  487.     }
  489.     .indicator-item {
  490.         padding: 8px 16px;
  491.         font-size: 13px;
  492.     }
  494.     .indicator-item i {
  495.         font-size: 16px;
  496.     }
  498.     .button-secondary {
  499.         padding: 12px 24px;
  500.         font-size: 15px;
  501.     }
  502. }
  504. /* Effet de chargement */
  505. .video-loading-spinner {
  506.     position: absolute;
  507.     top: 50%;
  508.     left: 50%;
  509.     transform: translate(-50%, -50%);
  510.     width: 60px;
  511.     height: 60px;
  512.     border: 4px solid rgba(13, 203, 229, 0.2);
  513.     border-top: 4px solid #0DCBE5;
  514.     border-radius: 50%;
  515.     animation: spin 1s linear infinite;
  516.     z-index: 10;
  517. }
  519. @keyframes spin {
  520.     0% { transform: translate(-50%, -50%) rotate(0deg); }
  521.     100% { transform: translate(-50%, -50%) rotate(360deg); }
  522. }
  523. </style>
  525. <script>
  526. document.addEventListener('DOMContentLoaded', function() {
  527.     const videoThumbnail = document.getElementById('videoThumbnail');
  528.     const videoPlayerModern = document.getElementById('videoPlayerModern');
  529.     const modernVideo = document.getElementById('modernVideo');
  530.     const watchVideoBtn = document.getElementById('watchVideoBtn');
  531.     
  532.     // Fonction pour lancer la vidéo
  533.     function playVideo() {
  534.         if (videoThumbnail && videoPlayerModern && modernVideo) {
  535.             // Masquer le thumbnail
  536.             videoThumbnail.style.display = 'none';
  537.             
  538.             // Afficher le lecteur
  539.             videoPlayerModern.style.display = 'block';
  540.             
  541.             // Lancer la vidéo avec un petit délai
  542.             setTimeout(() => {
  543.                 modernVideo.play().catch(error => {
  544.                     console.log('Lecture automatique bloquée:', error);
  545.                     // La vidéo ne se lance pas automatiquement, l'utilisateur devra cliquer sur play
  546.                 });
  547.             }, 100);
  548.             
  549.             // Scroll vers la vidéo sur mobile
  550.             if (window.innerWidth < 768) {
  551.                 setTimeout(() => {
  552.                     videoPlayerModern.scrollIntoView({ behavior: 'smooth', block: 'center' });
  553.                 }, 200);
  554.             }
  555.         }
  556.     }
  557.     
  558.     // Click sur le thumbnail
  559.     if (videoThumbnail) {
  560.         videoThumbnail.addEventListener('click', playVideo);
  561.     }
  562.     
  563.     // Click sur le bouton "Voir la démo"
  564.     if (watchVideoBtn) {
  565.         watchVideoBtn.addEventListener('click', function(e) {
  566.             e.preventDefault();
  567.             playVideo();
  568.         });
  569.     }
  570.     
  571.     // Gestion de la fin de la vidéo
  572.     if (modernVideo) {
  573.         modernVideo.addEventListener('ended', function() {
  574.             // Optionnel: revenir au thumbnail après X secondes
  575.             setTimeout(() => {
  576.                 videoPlayerModern.style.display = 'none';
  577.                 videoThumbnail.style.display = 'block';
  578.                 modernVideo.currentTime = 0;
  579.             }, 2000);
  580.         });
  581.         
  582.         // Gestion des erreurs
  583.         modernVideo.addEventListener('error', function(e) {
  584.             console.error('Erreur de chargement de la vidéo:', e);
  585.         });
  586.         
  587.         // Event quand la vidéo est prête
  588.         modernVideo.addEventListener('loadedmetadata', function() {
  589.             console.log('Vidéo chargée et prête à être lue');
  590.         });
  591.     }
  592. });
  593. </script>
  596. <div class="diagonals">
  597.     <svg style="margin-bottom: -8px; background-color: white;" xmlns="http://www.w3.org/2000/svg"
  598.         class="curve-container__curve curve-one" viewBox="0 0 1440 68" enable-background="new 0 0 1440 68">
  599.         <path d="m1622.3 1937.7c0 0-410.7 169.1-913.4 75.5-502.7-93.6-977.7 56.3-977.7 56.3v440h1891.1v-571.8"
  600.             fill="#f4f6f9" transform="translate(0-1977)"></path>
  601.     </svg>
  602. </div>
  604. <!-- Section ERP Complet -->
  605. <section id="about" class="about-area section-padding">
  606.     <div class="container">
  607.         <div class="row">
  608.             <div class="col-lg-6 col-md-6 mb-4 mb-md-0">
  609.                 <div class="about-image" id="about-image">
  610.                     <img src="{{ asset('mghcloud/assets/img/Fichier2.png')}}" alt="Mazego ERP Tunisie" class="img-fluid">
  611.                 </div>
  612.             </div>
  613.             <div class="col-lg-6 col-md-6">
  614.                 <div class="about-text-info">
  615.                     <h2><strong>Maîtrisez vos finances et vos obligations fiscales en Tunisie avec Mazego</strong></h2>
  616.                     <p>Une solution ERP complète adaptée au contexte tunisien :</p>
  617.                     <ul>
  618.                         <li><strong>Facturation classique et facturation électronique TTN</strong></li>
  619.                         <li><strong>Gestion des devis, bons de commande et avoirs</strong></li>
  620.                         <li><strong>Suivi des paiements clients et relances automatiques</strong></li>
  621.                         <li><strong>Gestion des dépenses et notes de frais</strong></li>
  622.                         <li><strong>Gestion de stock et inventaire multi-entrepôts</strong></li>
  623.                         <li><strong>CRM et gestion de la relation client</strong></li>
  624.                         <li><strong>Tableau de bord trésorerie et indicateurs en temps réel</strong></li>
  625.                         <li><strong>Gestion multi-sociétés</strong></li>
  626.                     </ul>
  627.                     <p>Mazego accompagne déjà des entreprises tunisiennes dans leur transition vers la facturation électronique et la digitalisation de leur gestion.</p>
  628.                     <a href="{{ path('register') }}" class="button">Inscrivez-vous maintenant</a>
  629.                 </div>
  630.             </div>
  631.         </div>
  632.     </div>
  633. </section>
  635. <!-- Section Facturation Électronique TTN -->
  636. <section id="about" class="chose-us-area section-padding">
  637.     <div class="container">
  638.         <div class="row">
  639.             <div class="col-lg-6 col-md-6">
  640.                 <div class="about-text-info">
  641.                     <h2><strong>Facturation électronique tunisienne (TTN) - En cours de déploiement</strong></h2>
  642.                     <p>Mazego prépare un module complet de facturation électronique conforme aux exigences de la TTN (elFatoora) pour accompagner les entreprises tunisiennes dans leur transition digitale :</p>
  643.                     <ul>
  644.                         <li><strong>Génération des factures électroniques</strong> au format exigé par la TTN</li>
  645.                         <li><strong>Intégration avec DigiGo et Shadoc</strong> (Sirat) pour la signature électronique</li>
  646.                         <li><strong>Envoi automatique vers Tunisia Trade Net</strong> (TTN)</li>
  647.                         <li><strong>QR code conforme</strong> sur les factures PDF pour contrôle et vérification</li>
  648.                         <li><strong>Suivi du statut</strong> des factures électroniques (envoyée, acceptée, rejetée)</li>
  649.                         <li><strong>Archivage sécurisé</strong> conforme à la réglementation tunisienne</li>
  650.                     </ul>
  651.                     <p style="font-weight: 600; color: #0DCBE5;">Anticipez dès maintenant l'obligation de facturation électronique en Tunisie avec Mazego.</p>
  652.                     <a href="{{ path('register') }}" class="button">Inscrivez-vous gratuitement</a>
  653.                 </div>
  654.             </div>
  655.             <div class="col-lg-6 col-md-6" id="zio">
  656.                 <div class="about-image">
  657.                     <img src="{{ asset('mghcloud/assets/img/Fichier1.png')}}" alt="Facturation électronique TTN Tunisie">
  658.                 </div>
  659.             </div>
  660.         </div>
  661.     </div>
  662. </section>
  664. <div class="diagonals">
  665.     <svg style="margin-bottom: -8px; background-color: white;" xmlns="http://www.w3.org/2000/svg" class="curve-container__curve curve-one" viewBox="0 0 1440 68" enable-background="new 0 0 1440 68">
  666.         <path d="m1622.3 1937.7c0 0-410.7 169.1-913.4 75.5-502.7-93.6-977.7 56.3-977.7 56.3v440h1891.1v-571.8" fill="#f4f6f9" transform="translate(0-1977)"></path>
  667.     </svg>
  668. </div>
  670. <!-- Section Comptabilité et TVA -->
  671. <section id="about" class="about-area section-padding">
  672.     <div class="container">
  673.         <div class="row">
  674.             <div class="col-lg-6 col-md-6" id="zio">
  675.                 <div class="about-image">
  676.                     <img src="{{ asset('mghcloud/assets/img/Fichier04.jpg')}}" alt="Comptabilité et TVA Tunisie">
  677.                 </div>
  678.             </div>
  679.             <div class="col-lg-6 col-md-6">
  680.                 <div class="about-text-info">
  681.                     <h2><strong>Comptabilité et conformité fiscale tunisienne simplifiées</strong></h2>
  682.                     <p>Facilitez votre gestion comptable en Tunisie :</p>
  683.                     <ul>
  684.                         <li><strong>Gestion en dinar tunisien (TND)</strong> avec taux de TVA locaux (7%, 13%, 19%)</li>
  685.                         <li><strong>Préparation facilitée des données</strong> pour vos déclarations TVA</li>
  686.                         <li><strong>Alertes des échéances fiscales</strong> pour ne jamais manquer une date importante</li>
  687.                         <li><strong>Export des données comptables</strong> pour votre expert-comptable ou fiduciaire</li>
  688.                         <li><strong>Livre journal et grand livre</strong> conformes aux normes comptables tunisiennes</li>
  689.                         <li><strong>Suivi de trésorerie en temps réel</strong> avec tableaux de bord</li>
  690.                     </ul>
  691.                     <p>Gardez le contrôle de vos finances et assurez votre conformité fiscale. Inscrivez-vous sur Mazego dès maintenant.</p>
  692.                     <a href="{{ path('register') }}" class="button">Démarrer l'essai gratuit</a>
  693.                 </div>
  694.             </div>
  695.         </div>
  696.     </div>
  697. </section>
  699. <!-- Section Différenciation -->
  700. <section id="feature" class="feature-area section-padding">
  701.     <div class="container">
  702.         <div class="row">
  703.             <div class="col-sm-12">
  704.                 <div class="section-title">
  705.                     <h2>Qu'est-ce qui rend Mazego si différent ?</h2>
  706.                 </div>
  707.             </div>
  708.         </div>
  709.         <div class="row different-feature-item">
  710.             <!-- Ancrage Local Tunisie -->
  711.             <div class="col-lg-4 col-md-6 item">
  712.                 <div class="feature-item">
  713.                     <div class="feature-icon">
  714.                         <img src="{{ asset('assets/img/icon/Fichier-Ai1.jpg') }}" alt="Ancrage local Tunisie">
  715.                     </div>
  716.                     <div class="feature-info">
  717.                         <h3>Ancrage local en Tunisie</h3>
  718.                         <p>Mazego est développé et opéré par une équipe basée en Tunisie, avec une parfaite compréhension des obligations légales et fiscales locales. Données hébergées en Tunisie pour une sécurité optimale.</p>
  719.                     </div>
  720.                 </div>
  721.             </div>
  722.             
  723.             <!-- Partenariats Techniques -->
  724.             <div class="col-lg-4 col-md-6 item">
  725.                 <div class="feature-item">
  726.                     <div class="feature-icon">
  727.                         <img src="{{ asset('assets/img/icon/Fichier2.jpg') }}" alt="Partenariats techniques">
  728.                     </div>
  729.                     <div class="feature-info">
  730.                         <h3>Partenariats techniques</h3>
  731.                         <p>Intégration avec TunTrust (DigiGo), Shadoc (Sirat) et Tunisia Trade Net pour offrir une chaîne complète de facturation électronique conforme aux normes tunisiennes.</p>
  732.                     </div>
  733.                 </div>
  734.             </div>
  735.             
  736.             <!-- Intelligence Artificielle pour la Prospection -->
  737.             <div class="col-lg-4 col-md-6 item">
  738.                 <div class="feature-item">
  739.                     <div class="feature-icon">
  740.                         <img src="{{ asset('assets/img/icon/Fichier3.jpg') }}" alt="Assistant IA">
  741.                     </div>
  742.                     <div class="feature-info">
  743.                         <h3>Assistant IA pour votre prospection BtoB</h3>
  744.                         <p>Mazego vous accompagne dans votre développement commercial avec un assistant intelligent qui vous aide à identifier de nouvelles opportunités d'affaires, préparer vos rendez-vous clients et optimiser votre prospection BtoB.</p>
  745.                     </div>
  746.                 </div>
  747.             </div>
  748.             
  749.             <!-- Automatisation -->
  750.             <div class="col-lg-4 col-md-6 item">
  751.                 <div class="feature-item">
  752.                     <div class="feature-icon">
  753.                         <img src="{{ asset('assets/img/icon/Fichier4.jpg') }}" alt="Automatisation">
  754.                     </div>
  755.                     <div class="feature-info">
  756.                         <h3>Automatisation des Processus</h3>
  757.                         <p>Mazego automatise les tâches répétitives : saisie automatique des données, génération de rapports, relances clients, alertes de stock et bien plus encore.</p>
  758.                     </div>
  759.                 </div>
  760.             </div>
  761.             
  762.             <!-- Gestion Multi-Sociétés -->
  763.             <div class="col-lg-4 col-md-6 item">
  764.                 <div class="feature-item">
  765.                     <div class="feature-icon">
  766.                         <img src="{{ asset('assets/img/icon/Fichier5.jpg') }}" alt="Multi-sociétés">
  767.                     </div>
  768.                     <div class="feature-info">
  769.                         <h3>Gestion Multi-Sociétés et Multi-Entrepôts</h3>
  770.                         <p>Gérez plusieurs entreprises et entrepôts depuis une seule interface. Idéal pour les holdings, groupes d'entreprises et cabinets d'expertise comptable.</p>
  771.                     </div>
  772.                 </div>
  773.             </div>
  774.             
  775.             <!-- Assistance Clientèle -->
  776.             <div class="col-lg-4 col-md-6 item">
  777.                 <div class="feature-item">
  778.                     <div class="feature-icon">
  779.                         <img src="{{ asset('assets/img/icon/Fichier6.jpg') }}" alt="Assistance clientèle">
  780.                     </div>
  781.                     <div class="feature-info">
  782.                         <h3>Assistance Clientèle en Français et Arabe</h3>
  783.                         <p>Notre équipe d'assistance tunisienne est disponible pour répondre à vos questions en français et en arabe. Support technique et formation inclus.</p>
  784.                     </div>
  785.                 </div>
  786.             </div>
  787.         </div>
  788.     </div>
  789. </section>
  790. <!-- Section Tarifs -->
  791. <section id="pricing" class="pricing-area section-padding">
  792.     <div class="container">
  793.         <div class="row">
  794.             <div class="col-md-12 text-center mb-5">
  795.                 <div class="section-title">
  796.                     <h2>Nos offres Mazego pour les entreprises tunisiennes</h2>
  797.                     <p style="font-size: 16px; max-width: 700px; margin: 0 auto; color: #666;">
  798.                         Des plans simples et transparents, en dinar tunisien (TND), adaptés aux besoins des indépendants, TPE/PME et cabinets comptables.
  799.                     </p>
  800.                 </div>
  801.             </div>
  802.         </div>
  804.         <div class="row pricing-cards-wrapper justify-content-center">
  805.             <!-- Mazego Start -->
  806.             <div class="col-lg-4 col-md-6 mb-4">
  807.                 <div class="pricing-card card-start">
  808.                     <div class="pricing-header">
  809.                         <h3 class="pricing-title">Mazego Start</h3>
  810.                         <p class="pricing-subtitle">Pour les indépendants et micro-entreprises qui démarrent</p>
  811.                     </div>
  812.                     <div class="pricing-price">
  813.                         <span class="currency">TND</span>
  814.                         <span class="amount">0</span>
  815.                         <span class="period">/ an</span>
  816.                     </div>
  817.                     <div class="pricing-tag">Gratuit à vie</div>
  818.                     <ul class="pricing-features">
  819.                         <li><i class="bi bi-check-circle-fill"></i> 1 entreprise</li>
  820.                         <li><i class="bi bi-check-circle-fill"></i> 1 utilisateur</li>
  821.                         {# <li><i class="bi bi-check-circle-fill"></i> 30 factures et devis par mois</li> #}
  822.                         <li><i class="bi bi-check-circle-fill"></i>
  823.                          {# 30 documents (factures, devis) / mois #}
  824.                          Factures et devis illimités
  825.                          </li>
  827.                         <li><i class="bi bi-check-circle-fill"></i> Gestion des clients et produits</li>
  828.                         <li><i class="bi bi-check-circle-fill"></i> Tableau de bord simple</li>
  829.                         <li class="feature-note"><i class="bi bi-info-circle"></i> Idéal pour tester Mazego avant la facturation électronique</li>
  830.                     </ul>
  831.                     <div class="pricing-footer">
  832.                         <a href="{{ path('register') }}" class="btn-pricing btn-start">Créer un compte gratuit</a>
  833.                     </div>
  834.                 </div>
  835.             </div>
  837.             <!-- Mazego Business (Populaire) -->
  838.             <div class="col-lg-4 col-md-6 mb-4">
  839.                 <div class="pricing-card card-business featured">
  840.                     <div class="badge-popular">
  841.                         <i class="bi bi-star-fill"></i> Populaire
  842.                     </div>
  843.                     <div class="pricing-header">
  844.                         <h3 class="pricing-title">Mazego Business</h3>
  845.                         <p class="pricing-subtitle">Pour les TPE / PME tunisiennes</p>
  846.                     </div>
  847.                     <div class="pricing-price">
  848.                         <span class="currency">TND</span>
  849.                         <span class="amount">299</span>
  850.                         <span class="period">/ an</span>
  851.                     </div>
  852.                     <div class="pricing-tag pricing-tag-business">Tout-en-un</div>
  853.                     <ul class="pricing-features">
  854.                         <li><i class="bi bi-check-circle-fill"></i> 1 entreprise</li>
  855.                         <li><i class="bi bi-check-circle-fill"></i>  1 utilisateur </li>
  856.                         <li><i class="bi bi-check-circle-fill"></i> Facturation classique illimitée</li>
  857.                         <li class="feature-highlight">
  858.                             <i class="bi bi-shield-check"></i> <strong>Facturation électronique TTN</strong>
  859.                             <span class="feature-badge">DigiGo + Shadoc</span>
  860.                         </li>
  861.                         <li><i class="bi bi-check-circle-fill"></i> Devis, bons de commande, avoirs</li>
  862.                         <li><i class="bi bi-check-circle-fill"></i> Gestion de stock (1 entrepôt)</li>
  863.                         <li><i class="bi bi-check-circle-fill"></i> Dépenses & notes de frais</li>
  864.                         <li><i class="bi bi-check-circle-fill"></i> Préparation déclarations TVA</li>
  865.                         <li><i class="bi bi-check-circle-fill"></i> Tableaux de bord & rapports</li>
  866.                     </ul>
  867.                     <div class="pricing-footer">
  868.                         <a href="{{ path('register') }}" class="btn-pricing btn-business">Commencer maintenant</a>
  869.                     </div>
  870.                 </div>
  871.             </div>
  873.             <!-- Mazego Pro -->
  874.             <div class="col-lg-4 col-md-6 mb-4">
  875.                 <div class="pricing-card card-pro">
  876.                     <div class="pricing-header">
  877.                         <h3 class="pricing-title">Mazego Pro</h3>
  878.                         <p class="pricing-subtitle">Pour entreprises structurées, cabinets & groupes</p>
  879.                     </div>
  880.                     <div class="pricing-price">
  881.                         <span class="currency">TND</span>
  882.                         <span class="amount">499</span>
  883.                         <span class="period">/ an</span>
  884.                     </div>
  885.                     <div class="pricing-note">
  886.                         <i class="bi bi-building"></i> Packs multi-sociétés à partir de 1 200 TND / an
  887.                     </div>
  888.                     <ul class="pricing-features">
  889.                         <li><i class="bi bi-check-circle-fill"></i> Tout de Mazego Business +</li>
  890.                         <li><i class="bi bi-check-circle-fill"></i> Multi-entreprises illimité</li>
  891.                         <li><i class="bi bi-check-circle-fill"></i> Multi-entrepôts</li>
  892.                         <li><i class="bi bi-check-circle-fill"></i> Automatisations avancées</li>
  893.                         <li><i class="bi bi-check-circle-fill"></i> Relances automatiques</li>
  894.                         <li><i class="bi bi-check-circle-fill"></i> Assistant IA prospection BtoB</li>
  895.                         <li><i class="bi bi-check-circle-fill"></i> Alertes trésorerie intelligentes</li>
  896.                         <li class="feature-highlight">
  897.                             <i class="bi bi-headset"></i> Support prioritaire
  898.                         </li>
  899.                         <li class="feature-highlight">
  900.                             <i class="bi bi-person-check"></i> Accompagnement dédié TTN
  901.                         </li>
  902.                     </ul>
  903.                     <div class="pricing-footer">
  904.                         <a href="{{ path('contact_new') }}" class="btn-pricing btn-pro">Parler à un conseiller</a>
  905.                     </div>
  906.                 </div>
  907.             </div>
  908.         </div>
  910.         <!-- Note de bas de page -->
  911.         <div class="row mt-5">
  912.             <div class="col-md-12">
  913.                 <div class="pricing-footer-note">
  914.                     <div class="note-icon">
  915.                         <i class="bi bi-info-circle-fill"></i>
  916.                     </div>
  917.                     <div class="note-content">
  918.                         <p>
  919.                             <strong>Tarifs en dinar tunisien (TND)</strong>, conçus spécifiquement pour le marché tunisien. 
  920.                             Le module de <strong>facturation électronique tunisienne (TTN, DigiGo, Shadoc)</strong> est inclus à partir de l'offre Mazego Business.
  921.                         </p>
  922.                         <p class="mb-0">
  923.                             <i class="bi bi-shield-check"></i> Données hébergées en Tunisie • 
  924.                             <i class="bi bi-credit-card"></i> Paiement sécurisé • 
  925.                             <i class="bi bi-arrow-clockwise"></i> Résiliation à tout moment
  926.                         </p>
  927.                     </div>
  928.                 </div>
  929.             </div>
  930.         </div>
  931.     </div>
  932. </section>
  934. <style>
  935.     .pricing-area {
  936.         background: linear-gradient(180deg, #ffffff 0%, #f8f9fa 100%);
  937.     }
  939.     .pricing-cards-wrapper {
  940.         display: flex;
  941.         align-items: stretch;
  942.     }
  944.     .pricing-card {
  945.         background: white;
  946.         border-radius: 16px;
  947.         padding: 40px 30px;
  948.         box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  949.         transition: all 0.3s ease;
  950.         height: 100%;
  951.         display: flex;
  952.         flex-direction: column;
  953.         position: relative;
  954.         border: 2px solid transparent;
  955.     }
  957.     .pricing-card:hover {
  958.         transform: translateY(-8px);
  959.         box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
  960.     }
  962.     .pricing-card.featured {
  963.         border: 2px solid #0DCBE5;
  964.         transform: scale(1.05);
  965.         z-index: 2;
  966.     }
  968.     .pricing-card.featured:hover {
  969.         transform: scale(1.05) translateY(-8px);
  970.     }
  972.     .badge-popular {
  973.         position: absolute;
  974.         top: -15px;
  975.         right: 30px;
  976.         background: linear-gradient(135deg, #0DCBE5 0%, #1d9ec7 100%);
  977.         color: white;
  978.         padding: 8px 20px;
  979.         border-radius: 50px;
  980.         font-size: 13px;
  981.         font-weight: 700;
  982.         box-shadow: 0 4px 12px rgba(13, 203, 229, 0.3);
  983.         display: flex;
  984.         align-items: center;
  985.         gap: 5px;
  986.     }
  988.     .badge-popular i {
  989.         font-size: 14px;
  990.     }
  992.     .pricing-header {
  993.         text-align: center;
  994.         margin-bottom: 25px;
  995.     }
  997.     .pricing-title {
  998.         font-size: 28px;
  999.         font-weight: 700;
  1000.         color: #2c3e50;
  1001.         margin-bottom: 10px;
  1002.     }
  1004.     .pricing-subtitle {
  1005.         font-size: 15px;
  1006.         color: #7f8c8d;
  1007.         margin: 0;
  1008.         min-height: 40px;
  1009.     }
  1011.     .pricing-price {
  1012.         text-align: center;
  1013.         margin-bottom: 15px;
  1014.         padding: 20px 0;
  1015.         border-top: 1px solid #ecf0f1;
  1016.         border-bottom: 1px solid #ecf0f1;
  1017.     }
  1019.     .pricing-price .currency {
  1020.         font-size: 18px;
  1021.         color: #7f8c8d;
  1022.         font-weight: 600;
  1023.         vertical-align: top;
  1024.         margin-right: 3px;
  1025.     }
  1027.     .pricing-price .amount {
  1028.         font-size: 52px;
  1029.         font-weight: 800;
  1030.         color: #2c3e50;
  1031.         line-height: 1;
  1032.     }
  1034.     .pricing-price .period {
  1035.         font-size: 16px;
  1036.         color: #7f8c8d;
  1037.         font-weight: 500;
  1038.     }
  1040.     .pricing-tag {
  1041.         text-align: center;
  1042.         color: #27ae60;
  1043.         font-weight: 600;
  1044.         font-size: 14px;
  1045.         margin-bottom: 20px;
  1046.         padding: 8px 16px;
  1047.         background: rgba(39, 174, 96, 0.1);
  1048.         border-radius: 50px;
  1049.         display: inline-block;
  1050.         width: fit-content;
  1051.         margin-left: auto;
  1052.         margin-right: auto;
  1053.         display: block;
  1054.     }
  1056.     .pricing-tag-business {
  1057.         color: #0DCBE5;
  1058.         background: rgba(13, 203, 229, 0.1);
  1059.     }
  1061.     .pricing-note {
  1062.         text-align: center;
  1063.         font-size: 13px;
  1064.         color: #7f8c8d;
  1065.         margin-bottom: 20px;
  1066.         padding: 10px 15px;
  1067.         background: #f8f9fa;
  1068.         border-radius: 8px;
  1069.         display: flex;
  1070.         align-items: center;
  1071.         justify-content: center;
  1072.         gap: 6px;
  1073.     }
  1075.     .pricing-note i {
  1076.         color: #0DCBE5;
  1077.     }
  1079.     .pricing-features {
  1080.         list-style: none;
  1081.         padding: 0;
  1082.         margin: 0 0 30px 0;
  1083.         flex: 1;
  1084.     }
  1086.     .pricing-features li {
  1087.         padding: 12px 0;
  1088.         font-size: 15px;
  1089.         color: #2c3e50;
  1090.         display: flex;
  1091.         align-items: flex-start;
  1092.         gap: 10px;
  1093.         border-bottom: 1px solid #f8f9fa;
  1094.     }
  1096.     .pricing-features li:last-child {
  1097.         border-bottom: none;
  1098.     }
  1100.     .pricing-features li i {
  1101.         color: #27ae60;
  1102.         font-size: 18px;
  1103.         margin-top: 2px;
  1104.         flex-shrink: 0;
  1105.     }
  1107.     .pricing-features .feature-highlight {
  1108.         background: rgba(13, 203, 229, 0.05);
  1109.         padding: 12px;
  1110.         border-radius: 8px;
  1111.         margin: 8px 0;
  1112.         border-bottom: none;
  1113.     }
  1115.     .pricing-features .feature-highlight i {
  1116.         color: #0DCBE5;
  1117.     }
  1119.     .pricing-features .feature-note {
  1120.         font-size: 13px;
  1121.         color: #7f8c8d;
  1122.         font-style: italic;
  1123.         background: #f8f9fa;
  1124.         padding: 10px 12px;
  1125.         border-radius: 6px;
  1126.         border-bottom: none;
  1127.     }
  1129.     .pricing-features .feature-note i {
  1130.         color: #3498db;
  1131.     }
  1133.     .feature-badge {
  1134.         display: inline-block;
  1135.         background: #0DCBE5;
  1136.         color: white;
  1137.         font-size: 11px;
  1138.         padding: 3px 8px;
  1139.         border-radius: 12px;
  1140.         font-weight: 600;
  1141.         margin-left: 5px;
  1142.     }
  1144.     .pricing-footer {
  1145.         text-align: center;
  1146.         margin-top: auto;
  1147.     }
  1149.     .btn-pricing {
  1150.         display: inline-block;
  1151.         padding: 14px 32px;
  1152.         border-radius: 50px;
  1153.         font-weight: 700;
  1154.         font-size: 16px;
  1155.         text-decoration: none;
  1156.         transition: all 0.3s ease;
  1157.         border: 2px solid transparent;
  1158.         width: 100%;
  1159.         text-align: center;
  1160.     }
  1162.     .btn-start {
  1163.         background: white;
  1164.         color: #2c3e50;
  1165.         border: 2px solid #2c3e50;
  1166.     }
  1168.     .btn-start:hover {
  1169.         background: #2c3e50;
  1170.         color: white;
  1171.     }
  1173.     .btn-business {
  1174.         background: linear-gradient(135deg, #0DCBE5 0%, #1d9ec7 100%);
  1175.         color: white;
  1176.         box-shadow: 0 4px 15px rgba(13, 203, 229, 0.3);
  1177.     }
  1179.     .btn-business:hover {
  1180.         transform: translateY(-2px);
  1181.         box-shadow: 0 6px 20px rgba(13, 203, 229, 0.4);
  1182.     }
  1184.     .btn-pro {
  1185.         background: white;
  1186.         color: #0DCBE5;
  1187.         border: 2px solid #0DCBE5;
  1188.     }
  1190.     .btn-pro:hover {
  1191.         background: #0DCBE5;
  1192.         color: white;
  1193.     }
  1195.     .pricing-footer-note {
  1196.         background: linear-gradient(135deg, rgba(13, 203, 229, 0.05) 0%, rgba(29, 158, 199, 0.05) 100%);
  1197.         border: 2px solid rgba(13, 203, 229, 0.2);
  1198.         border-radius: 16px;
  1199.         padding: 30px 40px;
  1200.         display: flex;
  1201.         gap: 20px;
  1202.         align-items: center;
  1203.     }
  1205.     .note-icon {
  1206.         flex-shrink: 0;
  1207.     }
  1209.     .note-icon i {
  1210.         font-size: 36px;
  1211.         color: #0DCBE5;
  1212.     }
  1214.     .note-content p {
  1215.         margin-bottom: 10px;
  1216.         font-size: 15px;
  1217.         color: #2c3e50;
  1218.         line-height: 1.6;
  1219.     }
  1221.     .note-content strong {
  1222.         color: #0DCBE5;
  1223.     }
  1225.     /* Responsive */
  1226.     @media (max-width: 991px) {
  1227.         .pricing-card.featured {
  1228.             transform: scale(1);
  1229.             margin-top: 0;
  1230.         }
  1232.         .pricing-card.featured:hover {
  1233.             transform: translateY(-8px);
  1234.         }
  1235.     }
  1237.     @media (max-width: 767px) {
  1238.         .pricing-card {
  1239.             padding: 30px 20px;
  1240.         }
  1242.         .pricing-title {
  1243.             font-size: 24px;
  1244.         }
  1246.         .pricing-price .amount {
  1247.             font-size: 42px;
  1248.         }
  1250.         .pricing-footer-note {
  1251.             flex-direction: column;
  1252.             text-align: center;
  1253.             padding: 25px 20px;
  1254.         }
  1256.         .badge-popular {
  1257.             right: 50%;
  1258.             transform: translateX(50%);
  1259.         }
  1260.     }
  1261. </style>
  1263. <div class="diagonals">
  1264.     <svg style="margin-bottom: -8px; background-color: white;" xmlns="http://www.w3.org/2000/svg" class="curve-container__curve curve-one" viewBox="0 0 1440 68" enable-background="new 0 0 1440 68">
  1265.         <path d="m1622.3 1937.7c0 0-410.7 169.1-913.4 75.5-502.7-93.6-977.7 56.3-977.7 56.3v440h1891.1v-571.8" fill="#f4f6f9" transform="translate(0-1977)"></path>
  1266.     </svg>
  1267. </div>
  1269. <!-- Section Témoignages -->
  1270. <section id="review" class="testimonial-area section-padding">
  1271.     <div class="container">
  1272.         <div class="row">
  1273.             <div class="col-md-12">
  1274.                 <div class="testimonial-slide owl-carousel owl-theme text-center">
  1275.                     <!-- Témoignage 1 -->
  1276.                     <div class="single-testimonial">
  1277.                         <div class="testi-content-inner">
  1278.                             <div class="testimonial-say-title-rating">
  1279.                                 <div class="say-title">
  1280.                                     <h6>Solution adaptée au marché tunisien</h6>
  1281.                                 </div>
  1282.                                 <ul class="rating text-right">
  1283.                                     <li><i class="fa fa-star"></i></li>
  1284.                                     <li><i class="fa fa-star"></i></li>
  1285.                                     <li><i class="fa fa-star"></i></li>
  1286.                                     <li><i class="fa fa-star"></i></li>
  1287.                                     <li><i class="fa fa-star"></i></li>
  1288.                                 </ul>
  1289.                             </div>
  1290.                             <div class="testimonial-content">
  1291.                                 <p>Mazego a complètement transformé notre gestion administrative. La conformité avec la facturation électronique TTN nous a permis de gagner du temps et d'être prêts pour les nouvelles réglementations tunisiennes.</p>
  1292.                             </div>
  1293.                             <div class="testimonial-bio">
  1294.                                 <div class="avatar">
  1295.                                     <img src="{{ asset('assets/img/testimonial-1.jpg') }}" alt="témoignage">
  1296.                                 </div>
  1297.                                 <div class="bio-info">
  1298.                                     <h3 class="name">Amira Ben Salem</h3><span>Gérante d'une PME à Tunis</span>
  1299.                                 </div>
  1300.                             </div>
  1301.                         </div>
  1302.                     </div>
  1303.                     
  1304.                     <!-- Témoignage 2 -->
  1305.                     <div class="single-testimonial">
  1306.                         <div class="testi-content-inner">
  1307.                             <div class="testimonial-say-title-rating">
  1308.                                 <div class="say-title">
  1309.                                     <h6>Parfait pour les cabinets comptables</h6>
  1310.                                 </div>
  1311.                                 <ul class="rating text-right">
  1312.                                     <li><i class="fa fa-star"></i></li>
  1313.                                     <li><i class="fa fa-star"></i></li>
  1314.                                     <li><i class="fa fa-star"></i></li>
  1315.                                     <li><i class="fa fa-star"></i></li>
  1316.                                     <li><i class="fa fa-star"></i></li>
  1317.                                 </ul>
  1318.                             </div>
  1319.                             <div class="testimonial-content">
  1320.                                 <p>La gestion multi-sociétés de Mazego est exactement ce dont notre cabinet avait besoin. Nous gérons maintenant tous nos clients depuis une seule plateforme avec une conformité fiscale assurée.</p>
  1321.                             </div>
  1322.                             <div class="testimonial-bio">
  1323.                                 <div class="avatar">
  1324.                                     <img src="{{ asset('assets/img/testimonial-2.jpg') }}" alt="témoignage">
  1325.                                 </div>
  1326.                                 <div class="bio-info">
  1327.                                     <h3 class="name">Mohamed Trabelsi</h3><span>Expert-comptable</span>
  1328.                                 </div>
  1329.                             </div>
  1330.                         </div>
  1331.                     </div>
  1332.                     
  1333.                     <!-- Témoignage 3 -->
  1334.                     <div class="single-testimonial">
  1335.                         <div class="testi-content-inner">
  1336.                             <div class="testimonial-say-title-rating">
  1337.                                 <div class="say-title">
  1338.                                     <h6>Interface intuitive et support réactif</h6>
  1339.                                 </div>
  1340.                                 <ul class="rating text-right">
  1341.                                     <li><i class="fa fa-star"></i></li>
  1342.                                     <li><i class="fa fa-star"></i></li>
  1343.                                     <li><i class="fa fa-star"></i></li>
  1344.                                     <li><i class="fa fa-star"></i></li>
  1345.                                     <li><i class="fa fa-star"></i></li>
  1346.                                 </ul>
  1347.                             </div>
  1348.                             <div class="testimonial-content">
  1349.                                 <p>En tant qu'auto-entrepreneur, Mazego m'a simplifié la vie. L'interface est claire, tout est en dinar tunisien, et le support client en français est toujours disponible pour m'aider.</p>
  1350.                             </div>
  1351.                             <div class="testimonial-bio">
  1352.                                 <div class="avatar">
  1353.                                     <img src="{{ asset('assets/img/testimonial-3.jpg') }}" alt="témoignage">
  1354.                                 </div>
  1355.                                 <div class="bio-info">
  1356.                                     <h3 class="name">Leila Mansour</h3><span>Auto-entrepreneure</span>
  1357.                                 </div>
  1358.                             </div>
  1359.                         </div>
  1360.                     </div>
  1361.                     
  1362.                     <!-- Témoignage 4 -->
  1363.                     <div class="single-testimonial">
  1364.                         <div class="testi-content-inner">
  1365.                             <div class="testimonial-say-title-rating">
  1366.                                 <div class="say-title">
  1367.                                     <h6>Gestion de stock performante</h6>
  1368.                                 </div>
  1369.                                 <ul class="rating text-right">
  1370.                                     <li><i class="fa fa-star"></i></li>
  1371.                                     <li><i class="fa fa-star"></i></li>
  1372.                                     <li><i class="fa fa-star"></i></li>
  1373.                                     <li><i class="fa fa-star"></i></li>
  1374.                                     <li><i class="fa fa-star"></i></li>
  1375.                                 </ul>
  1376.                             </div>
  1377.                             <div class="testimonial-content">
  1378.                                 <p>La gestion de stock multi-entrepôts de Mazego nous a permis d'optimiser notre inventaire et de réduire nos coûts. Les alertes automatiques sont vraiment utiles.</p>
  1379.                             </div>
  1380.                             <div class="testimonial-bio">
  1381.                                 <div class="avatar">
  1382.                                     <img src="{{ asset('assets/img/testimonial-4.jpg') }}" alt="témoignage">
  1383.                                 </div>
  1384.                                 <div class="bio-info">
  1385.                                     <h3 class="name">Karim Bouaziz</h3><span>Responsable commercial</span>
  1386.                                 </div>
  1387.                             </div>
  1388.                         </div>
  1389.                     </div>
  1390.                 </div>
  1391.             </div>
  1392.         </div>
  1393.     </div>
  1394. </section>
  1396. <!-- Section FAQ -->
  1397. <section class="faq-section">
  1398.     <div class="faq-section-wrap">
  1399.         <div class="container">
  1400.             <div class="row">
  1401.                 <div class="col-md-12">
  1402.                     <div class="section-title">
  1403.                         <h2>Questions Fréquemment Posées</h2>
  1404.                         <p>Découvrez tout ce que vous devez savoir sur Mazego grâce à nos réponses aux questions les plus fréquentes.</p>
  1405.                     </div>
  1406.                 </div>
  1407.                 <div class="col-lg-7 col-md-6">
  1408.                     <div class="panel-group" id="accordion">
  1409.                         <!-- Question 1 -->
  1410.                         <div class="panel panel-default">
  1411.                             <div class="panel-heading" id="headingOne">
  1412.                                 <h4 class="panel-title">
  1413.                                     <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" class="collapsed">
  1414.                                         Mazego est-il adapté aux entreprises tunisiennes ?
  1415.                                     </a>
  1416.                                 </h4>
  1417.                             </div>
  1418.                             <div id="collapseOne" class="panel-collapse collapse">
  1419.                                 <div class="panel-body">
  1420.                                     <p>Oui, Mazego est spécifiquement conçu pour les entreprises tunisiennes :</p>
  1421.                                     <ul>
  1422.                                         <li>Gestion en dinar tunisien (TND)</li>
  1423.                                         <li>Taux de TVA tunisiens pré-configurés (7%, 13%, 19%)</li>
  1424.                                         <li>Préparation des déclarations fiscales tunisiennes</li>
  1425.                                         <li>Module de facturation électronique conforme TTN</li>
  1426.                                         <li>Support en français et en arabe</li>
  1427.                                         <li>Données hébergées en Tunisie</li>
  1428.                                     </ul>
  1429.                                 </div>
  1430.                             </div>
  1431.                         </div>
  1432.                         
  1433.                         <!-- Question 2 -->
  1434.                         <div class="panel panel-default">
  1435.                             <div class="panel-heading" id="headingTwo">
  1436.                                 <h4 class="panel-title">
  1437.                                     <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
  1438.                                         Mazego va-t-il gérer la facturation électronique obligatoire en Tunisie ?
  1439.                                     </a>
  1440.                                 </h4>
  1441.                             </div>
  1442.                             <div id="collapseTwo" class="panel-collapse collapse">
  1443.                                 <div class="panel-body">
  1444.                                     <p>Oui, Mazego est en cours de déploiement d'un module complet de facturation électronique (DigiGo + Shadoc + TTN). Notre solution vous permettra d'émettre des factures électroniques conformes à la réglementation tunisienne et de répondre aux obligations imposées par l'État. En vous inscrivant dès maintenant, vous serez prêt pour cette transition.</p>
  1445.                                 </div>
  1446.                             </div>
  1447.                         </div>
  1448.                         
  1449.                         <!-- Question 3 -->
  1450.                         <div class="panel panel-default">
  1451.                             <div class="panel-heading" id="headingThree">
  1452.                                 <h4 class="panel-title">
  1453.                                     <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
  1454.                                         Quels sont les principaux modules disponibles dans Mazego ?
  1455.                                     </a>
  1456.                                 </h4>
  1457.                             </div>
  1458.                             <div id="collapseThree" class="panel-collapse collapse">
  1459.                                 <div class="panel-body">
  1460.                                     <p>Mazego est un ERP complet qui inclut :</p>
  1461.                                     <ul>
  1462.                                         <li>Facturation classique et électronique (TTN)</li>
  1463.                                         <li>Gestion commerciale (devis, bons de commande, avoirs)</li>
  1464.                                         <li>Gestion de stock et inventaire multi-entrepôts</li>
  1465.                                         <li>CRM et gestion clients</li>
  1466.                                         <li>Comptabilité et déclarations TVA</li>
  1467.                                         <li>Gestion des dépenses et notes de frais</li>
  1468.                                         <li>Tableau de bord et reporting</li>
  1469.                                         <li>Gestion multi-sociétés</li>
  1470.                                         <li>Point de vente (POS/Caisse)</li>
  1471.                                     </ul>
  1472.                                 </div>
  1473.                             </div>
  1474.                         </div>
  1475.                         
  1476.                         <!-- Question 4 -->
  1477.                         <div class="panel panel-default">
  1478.                             <div class="panel-heading" id="headingFour">
  1479.                                 <h4 class="panel-title">
  1480.                                     <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseFour">
  1481.                                         Comment sont sécurisées mes données sur Mazego ?
  1482.                                     </a>
  1483.                                 </h4>
  1484.                             </div>
  1485.                             <div id="collapseFour" class="panel-collapse collapse">
  1486.                                 <div class="panel-body">
  1487.                                     <p>La sécurité de vos données est notre priorité :</p>
  1488.                                     <ul>
  1489.                                         <li>Hébergement sécurisé en Tunisie</li>
  1490.                                         <li>Chiffrement SSL/TLS de toutes les communications</li>
  1491.                                         <li>Sauvegardes automatiques quotidiennes</li>
  1492.                                         <li>Authentification sécurisée</li>
  1493.                                         <li>Conformité aux réglementations tunisiennes sur la protection des données</li>
  1494.                                     </ul>
  1495.                                 </div>
  1496.                             </div>
  1497.                         </div>
  1498.                         
  1499.                         <!-- Question 5 -->
  1500.                         <div class="panel panel-default">
  1501.                             <div class="panel-heading" id="headingFive">
  1502.                                 <h4 class="panel-title">
  1503.                                     <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseFive">
  1504.                                         Quel support est disponible pour les utilisateurs tunisiens ?
  1505.                                     </a>
  1506.                                 </h4>
  1507.                             </div>
  1508.                             <div id="collapseFive" class="panel-collapse collapse">
  1509.                                 <div class="panel-body">
  1510.                                     <p>Notre équipe tunisienne vous accompagne :</p>
  1511.                                     <ul>
  1512.                                         <li>Support client en français et en arabe</li>
  1513.                                         <li>Documentation complète et tutoriels vidéo</li>
  1514.                                         <li>Formation à la prise en main incluse</li>
  1515.                                         <li>Chat en direct pendant les heures ouvrables</li>
  1516.                                         <li>Email support : support@mazego.fr</li>
  1517.                                     </ul>
  1518.                                 </div>
  1519.                             </div>
  1520.                         </div>
  1521.                     </div>
  1522.                 </div>
  1523.                 <div class="col-lg-5 col-md-6" id="zio">
  1524.                     <div class="faq-image">
  1525.                         <img src="{{ asset('mghcloud/assets/img/Fichier3.png')}}" alt="FAQ Mazego">
  1526.                     </div>
  1527.                 </div>
  1528.             </div>
  1529.         </div>
  1530.     </div>
  1531. </section>
  1533. <div class="diagonals">
  1534.     <svg style="margin-bottom: -8px; background-color: white;" xmlns="http://www.w3.org/2000/svg" class="curve-container__curve curve-one" viewBox="0 0 1440 68" enable-background="new 0 0 1440 68">
  1535.         <path d="m1622.3 1937.7c0 0-410.7 169.1-913.4 75.5-502.7-93.6-977.7 56.3-977.7 56.3v440h1891.1v-571.8" fill="#f4f6f9" transform="translate(0-1977)"></path>
  1536.     </svg>
  1537. </div>
  1539. <!-- Section CTA -->
  1540. <section class="support-area section-padding">
  1541.     <div class="container">
  1542.         <div class="row">
  1543.             <div class="col-lg-10 offset-lg-1 col-md-12">
  1544.                 <div class="support-info">
  1545.                     <h1>Transformez votre gestion d'entreprise en Tunisie dès aujourd'hui !</h1>
  1546.                     <p>Êtes-vous prêt à digitaliser votre entreprise et à vous conformer aux nouvelles exigences de facturation électronique en Tunisie ? Mazego est la solution tunisienne qui accompagne votre transformation digitale.</p>
  1547.                     <p>Rejoignez les entreprises tunisiennes qui ont déjà choisi Mazego pour simplifier leur gestion, optimiser leur trésorerie et assurer leur conformité fiscale. Ne laissez pas les tâches administratives vous freiner.</p>
  1548.                     <a class="button" href="{{path('register')}}">Commencez gratuitement</a>
  1549.                 </div>
  1550.             </div>
  1551.         </div>
  1552.     </div>
  1553. </section>
  1555. <!-- Footer -->
  1556. <footer class="footer">
  1557.     <div class="container">
  1558.         <div class="row">
  1559.             <div class="col-md-4 footer-content">
  1560.                 <div class="footer-colm-1">
  1561.                     <h3 class="footer-logo">
  1562.                         <div class="footer-logo navbar-brand js-scroll">
  1563.                             <img class="logoweb" src="{{asset('assets/img/Logo-BLACK-mazego.png')}}" alt="Logo Mazego" width="" height="47">
  1564.                         </div>
  1565.                     </h3>
  1566.                     <p>Mazego est une solution tunisienne de gestion d'entreprise complète pour les TPE, PME et cabinets. Conformité fiscale, facturation électronique TTN et ERP intégré.</p>
  1567.                 </div>
  1568.             </div>
  1569.             <div class="col-md-2 footer-content">
  1570.                 <div class="footer-colm-2">
  1571.                     <h5 class="footer-colm-title">ENTREPRISE</h5>
  1572.                     <ul class="footer-nav">
  1573.                         <li><a href="{{ path('a_propos') }}">À propos de Mazego</a></li>
  1574.                         <li><a href="{{path('contact_new')}}">Contactez-nous</a></li>
  1575.                     </ul>
  1576.                 </div>
  1577.             </div>
  1578.             <div class="col-md-3 footer-content">
  1579.                 <div class="footer-colm-3">
  1580.                     <h5 class="footer-colm-title">SUPPORT</h5>
  1581.                     <ul class="footer-nav">
  1582.                         <li><a href="{{path('generale_index')}}">Conditions d'utilisation</a></li>
  1583.                         <li><a href="{{path('politique_index')}}">Politique de confidentialité</a></li>
  1584.                     </ul>
  1585.                 </div>
  1586.             </div>
  1587.             <div class="col-md-3 footer-content">
  1588.                 <div class="footer-colm-4">
  1589.                     <h5 class="footer-colm-title">CONTACT</h5>
  1590.                     <p><strong>Tunisie & France</strong></p>
  1591.                     <p>Email support : <a href="mailto:support@mazego.fr">support@mazego.fr</a></p>
  1592.                     <p>Email commercial : <a href="mailto:contact@mazego.fr">contact@mazego.fr</a></p>
  1593.                     <ul class="footer-social-icon">
  1594.                         <li><a href="https://www.linkedin.com/in/mazego-r%C3%A9inventer-la-gestion-comptable-77baa21b9/"><i class="fa fa-facebook facebook"></i></a></li>
  1595.                         <li><a href="https://www.linkedin.com/in/mazego-r%C3%A9inventer-la-gestion-comptable-77baa21b9/"><i class="fa fa-twitter twitter"></i></a></li>
  1596.                         <li><a href="https://www.linkedin.com/in/mazego-r%C3%A9inventer-la-gestion-comptable-77baa21b9/"><i class="fa fa-linkedin linkedin"></i></a></li>
  1597.                         <li><a href="https://www.linkedin.com/in/mazego-r%C3%A9inventer-la-gestion-comptable-77baa21b9/"><i class="fa fa-youtube youtube"></i></a></li>
  1598.                         <li><a href="https://www.linkedin.com/in/mazego-r%C3%A9inventer-la-gestion-comptable-77baa21b9/"><i class="fa fa-google-plus google-plus"></i></a></li>
  1599.                     </ul>
  1600.                 </div>
  1601.             </div>
  1602.         </div>
  1603.         <div class="border-shadow-2"></div>
  1604.         <div class="row">
  1605.             <div class="col-md-12">
  1606.                 <div class="copyright-text text-center">
  1607.                     <p>© 2024 Mazego - Solution tunisienne de gestion d'entreprise et facturation électronique.</p>
  1608.                 </div>
  1609.             </div>
  1610.         </div>
  1611.     </div>
  1612. </footer>
  1614. <style>
  1615.     .avatar {
  1616.         width: 22%;
  1617.         height: auto;
  1618.     }
  1619.     
  1620.     #myimg {
  1621.         position: relative;
  1622.         border-radius: 20px;
  1623.         overflow: clip;
  1624.         box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
  1625.     }
  1627.     #myimg::before {
  1628.         content: "";
  1629.         position: absolute;
  1630.         top: 0;
  1631.         left: 0;
  1632.         width: 100%;
  1633.         height: 100%;
  1634.         background: linear-gradient(to bottom right, #0730801c, #1d9ec7);
  1635.         opacity: 0.7;
  1636.     }
  1638.     #myimg img {
  1639.         display: block;
  1640.         border-radius: 20px;
  1641.         width: 100%;
  1642.         height: auto;
  1643.     }
  1645.     @keyframes fadeIn {
  1646.         from {
  1647.             opacity: 0;
  1648.         }
  1649.         to {
  1650.             opacity: 1;
  1651.         }
  1652.     }
  1654.     #myimg {
  1655.         animation: fadeIn 1s ease;
  1656.     }
  1658.     @media (max-width: 767px) {
  1659.         #myimg {
  1660.             display: none !important;
  1661.         }
  1662.     }
  1664.     .bottom-container {
  1665.         display: none !important;
  1666.     }
  1668.     .bottom-container {
  1669.         border-bottom-left-radius: 1.5rem;
  1670.         border-bottom-right-radius: 1.5rem;
  1671.         padding: .375rem 0;
  1672.         width: 100%;
  1673.         display: none !important;
  1674.     }
  1675.     
  1676.     .bottom-container.flex.items-center.justify-center.gap-1.text-sm.text-secondary.no-underline {
  1677.         display: none !important;
  1678.     }
  1679. </style>
  1681. <script>
  1682.     const video = document.getElementById('myVideo');
  1683.     const playBtn = document.getElementById('playBtn');
  1685.     function toggleVideo() {
  1686.         if (video.paused) {
  1687.             video.play();
  1688.             video.muted = false;
  1689.             playBtn.style.display = 'none';
  1690.         } else {
  1691.             video.pause();
  1692.         }
  1693.     }
  1695.     if (video) {
  1696.         video.addEventListener('play', () => {
  1697.             playBtn.style.display = 'none';
  1698.         });
  1700.         video.addEventListener('pause', () => {
  1701.             playBtn.style.display = 'block';
  1702.         });
  1704.         video.addEventListener('ended', () => {
  1705.             playBtn.style.display = 'block';
  1706.         });
  1707.     }
  1708. </script>
  1710. {% endblock %}