templates/home/index.html.twig line 1

Open in your IDE?
  1. {% extends 'base_public.html.twig' %}
  3. {% block title %}Cassa Clock — Un service de pointage fiable, rapide et pensé pour vous !{% endblock %}
  5. {% block stylesheets %}
  6. <style>
  7. /* Hero */
  8. .hero{position:relative;padding:80px 0 60px;overflow:hidden}
  9. .hero .container-x{position:relative;z-index:2}
  10. .eyebrow{display:inline-flex;align-items:center;gap:8px;padding:6px 12px 6px 6px;border-radius:99px;background:rgba(255,255,255,.7);border:1px solid var(--line);font-size:13px;font-weight:500;color:var(--ink-2);backdrop-filter:blur(8px);box-shadow:var(--shadow-sm)}
  11. .eyebrow .pill{background:var(--grad);color:#fff;font-size:11px;font-weight:700;padding:3px 9px;border-radius:99px;letter-spacing:.04em;text-transform:uppercase}
  12. .hero h1{font-size:clamp(40px,5.4vw,72px);font-weight:800;margin:24px 0 20px;letter-spacing:-0.035em;color:var(--ink)}
  13. .hero h1 .grad{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;display:inline-block}
  14. .hero .lead{font-size:18px;line-height:1.6;color:var(--muted);max-width:560px}
  15. .hero-actions{display:flex;gap:12px;margin-top:32px;flex-wrap:wrap}
  16. .hero-trust{display:flex;align-items:center;gap:14px;margin-top:36px;flex-wrap:wrap}
  17. .avatars{display:flex}
  18. .avatars span{width:34px;height:34px;border-radius:50%;border:2px solid #fff;background:var(--grad);margin-left:-10px;display:grid;place-items:center;color:#fff;font-weight:700;font-size:13px;box-shadow:var(--shadow-sm)}
  19. .avatars span:first-child{margin-left:0}
  20. .avatars span:nth-child(2){background:linear-gradient(135deg,#F59E0B,#EC4899)}
  21. .avatars span:nth-child(3){background:linear-gradient(135deg,#10B981,#6366F1)}
  22. .avatars span:nth-child(4){background:linear-gradient(135deg,#06B6D4,#8B5CF6)}
  23. .hero-trust .txt{font-size:13.5px;color:var(--muted)}
  24. .hero-trust .stars{color:#F59E0B;letter-spacing:1px}
  26. /* Hero two-column layout */
  27. .hero-wrap{display:grid;grid-template-columns:54% 1fr;gap:64px;align-items:center}
  28. .hero-right{position:relative}
  29. .hero-photo-wrap{position:relative}
  30. .hero-photo-wrap::before{content:"";position:absolute;inset:-12px;border-radius:40px;background:var(--grad);opacity:.18;filter:blur(32px);z-index:0}
  31. .hero-photo{position:relative;z-index:1;width:100%;aspect-ratio:3/4;object-fit:cover;object-position:center 15%;border-radius:28px;box-shadow:0 40px 80px -20px rgba(99,102,241,.32),0 8px 24px rgba(0,0,0,.1);display:block}
  32. .hero-photo-fallback .hero-photo{background:linear-gradient(155deg,#EEF2FF 0%,#E0E7FF 40%,#FCE7F3 100%)}
  33. .scan-badge{position:absolute;z-index:2;bottom:32px;left:-24px;background:#fff;border-radius:16px;padding:12px 18px;display:flex;align-items:center;gap:10px;box-shadow:0 8px 32px -6px rgba(0,0,0,.15),0 1px 4px rgba(0,0,0,.06);font-size:13px;font-weight:600;color:var(--ink);white-space:nowrap}
  34. .scan-badge .s-ic{width:36px;height:36px;border-radius:10px;background:linear-gradient(135deg,rgba(16,185,129,.14),rgba(99,102,241,.08));color:#10B981;display:grid;place-items:center;font-size:18px;flex-shrink:0}
  35. .scan-badge .s-line{font-size:11px;font-weight:500;color:var(--muted);margin-top:2px}
  36. .qr-float{position:absolute;z-index:2;top:-18px;right:-18px;width:68px;height:68px;background:#fff;border-radius:18px;box-shadow:0 8px 28px -6px rgba(99,102,241,.3),0 1px 4px rgba(0,0,0,.06);display:grid;place-items:center;font-size:28px;color:var(--brand-1)}
  38. /* Hero visual app mock (kept for reference — no longer used in hero) */
  39. .hero-visual{position:relative;margin-top:64px;display:flex;justify-content:center}
  40. .app-frame{width:100%;max-width:1080px;border-radius:24px;padding:10px;background:linear-gradient(135deg,rgba(255,255,255,.7),rgba(255,255,255,.4));border:1px solid rgba(255,255,255,.7);box-shadow:var(--shadow-lg);backdrop-filter:blur(20px);position:relative}
  41. .app-frame::before{content:"";position:absolute;inset:-2px;border-radius:26px;background:var(--grad);z-index:-1;opacity:.4;filter:blur(20px)}
  42. .app-screen{background:#fff;border-radius:16px;overflow:hidden;box-shadow:0 12px 30px -10px rgba(11,11,20,.15)}
  43. .app-topbar{display:flex;align-items:center;gap:8px;padding:14px 18px;border-bottom:1px solid var(--line-2);background:linear-gradient(180deg,#fff,#FAFAFB)}
  44. .app-topbar .dot{width:11px;height:11px;border-radius:50%;background:#E5E7EB}
  45. .app-topbar .dot.r{background:#EF4444}.app-topbar .dot.y{background:#F59E0B}.app-topbar .dot.g{background:#10B981}
  46. .app-topbar .crumb{font-size:12px;color:var(--muted-2);margin-left:14px}
  47. .app-body{display:grid;grid-template-columns:200px 1fr;min-height:360px}
  48. .app-side{background:#0B0B14;color:#fff;padding:18px 14px}
  49. .app-side .s-brand{font-size:13px;font-weight:700;display:flex;align-items:center;gap:8px;margin-bottom:18px}
  50. .app-side .s-brand .sd{width:18px;height:18px;border-radius:5px;background:var(--grad)}
  51. .app-side .s-item{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:8px;font-size:12.5px;opacity:.7;margin-bottom:2px}
  52. .app-side .s-item.active{background:rgba(255,255,255,.08);opacity:1;color:#fff}
  53. .app-side .s-item i{font-size:14px}
  54. .app-main{padding:22px 24px;background:#FAFAFB}
  55. .app-main .h{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}
  56. .app-main .h h4{font-size:16px;color:var(--ink)}
  57. .kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:18px}
  58. .kpi{background:#fff;border:1px solid var(--line-2);border-radius:12px;padding:14px 16px}
  59. .kpi .l{font-size:11px;color:var(--muted-2);text-transform:uppercase;letter-spacing:.06em;font-weight:600}
  60. .kpi .v{font-size:20px;font-weight:700;margin-top:4px;color:var(--ink)}
  61. .kpi .d{font-size:11px;color:#10B981;margin-top:4px;font-weight:600}
  62. .kpi .d.r{color:#EF4444}
  63. .chart{background:#fff;border:1px solid var(--line-2);border-radius:12px;padding:16px;height:160px;position:relative;overflow:hidden}
  64. .chart svg{width:100%;height:100%}
  66. /* Trusted logos */
  67. .trusted{padding:40px 0;border-top:1px solid var(--line-2);border-bottom:1px solid var(--line-2);background:#fff}
  68. .trusted-row{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
  69. .trusted-row .lbl{font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted-2);font-weight:600}
  70. .trusted-row .logos{display:flex;gap:36px;flex-wrap:wrap;opacity:.7}
  71. .trusted-row .logos span{font-family:'Sora';font-weight:700;font-size:18px;color:var(--ink-2);opacity:.6}
  73. /* Features */
  74. .feat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
  75. .feat{background:#fff;border:1px solid var(--line-2);border-radius:var(--r-lg);padding:28px;transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;position:relative;overflow:hidden}
  76. .feat:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:var(--line)}
  77. .feat .ic{width:48px;height:48px;border-radius:12px;display:grid;place-items:center;background:var(--grad-soft);color:var(--brand-1);font-size:22px;margin-bottom:18px}
  78. .feat:nth-child(2) .ic{background:linear-gradient(135deg,rgba(245,158,11,.15),rgba(236,72,153,.15));color:#F59E0B}
  79. .feat:nth-child(3) .ic{background:linear-gradient(135deg,rgba(16,185,129,.15),rgba(99,102,241,.15));color:#10B981}
  80. .feat:nth-child(4) .ic{background:linear-gradient(135deg,rgba(236,72,153,.15),rgba(139,92,246,.15));color:#EC4899}
  81. .feat:nth-child(5) .ic{background:linear-gradient(135deg,rgba(6,182,212,.15),rgba(139,92,246,.15));color:#06B6D4}
  82. .feat:nth-child(6) .ic{background:linear-gradient(135deg,rgba(139,92,246,.15),rgba(99,102,241,.15));color:#8B5CF6}
  83. .feat h3{font-size:18px;font-weight:700;margin-bottom:8px;color:var(--ink);font-family:'Inter';letter-spacing:-0.01em}
  84. .feat p{font-size:14.5px;line-height:1.6}
  86. /* Showcase */
  87. .showcase{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
  88. .showcase-img{position:relative;border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--shadow-lg);aspect-ratio:4/4.6;background:linear-gradient(135deg,#EEF2FF,#FCE7F3);display:grid;place-items:center}
  89. .showcase-img::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 70% 30%, rgba(255,255,255,.5), transparent 60%)}
  90. .showcase-img .mock{position:relative;z-index:2;width:78%;background:#fff;border-radius:18px;padding:18px;box-shadow:0 30px 60px -20px rgba(99,102,241,.4)}
  91. .mock .mh{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
  92. .mock .mh .ttl{font-weight:700;font-size:14px;color:var(--ink)}
  93. .mock .mh .tag{font-size:10px;background:var(--grad);color:#fff;padding:3px 8px;border-radius:99px;font-weight:600}
  94. .mock-row{display:flex;justify-content:space-between;align-items:center;padding:10px 0;border-bottom:1px dashed var(--line-2);font-size:13px}
  95. .mock-row:last-child{border:0}
  96. .mock-row .name{display:flex;align-items:center;gap:10px;color:var(--ink-2)}
  97. .mock-row .name .a{width:28px;height:28px;border-radius:8px;background:var(--grad-soft);display:grid;place-items:center;color:var(--brand-1);font-size:11px;font-weight:700}
  98. .mock-row .stat{font-size:11px;padding:3px 8px;border-radius:99px;background:rgba(16,185,129,.12);color:#059669;font-weight:600}
  99. .mock-row .stat.l{background:rgba(245,158,11,.12);color:#D97706}
  100. .showcase-content h2{font-size:clamp(28px,3vw,40px);font-weight:700;letter-spacing:-0.03em;margin-bottom:18px;color:var(--ink)}
  101. .showcase-content p{font-size:16px;color:var(--muted);margin-bottom:14px}
  102. .value-list{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:28px;padding:0}
  103. .value-list li{display:flex;align-items:center;gap:10px;font-size:14.5px;color:var(--ink-2);font-weight:500;list-style:none}
  104. .value-list .check{width:22px;height:22px;border-radius:50%;background:var(--grad);display:grid;place-items:center;color:#fff;font-size:11px;flex-shrink:0}
  106. /* Steps */
  107. .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;position:relative}
  108. .step{background:#fff;border:1px solid var(--line-2);border-radius:var(--r-lg);padding:28px 24px;position:relative;transition:all .25s}
  109. .step:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
  110. .step-n{width:42px;height:42px;border-radius:12px;background:var(--grad);color:#fff;font-weight:800;display:grid;place-items:center;font-size:18px;font-family:'Sora';margin-bottom:18px;box-shadow:0 8px 20px -6px rgba(99,102,241,.5)}
  111. .step h3{font-size:17px;font-weight:700;color:var(--ink);font-family:'Inter';letter-spacing:-0.01em;margin-bottom:8px}
  112. .step p{font-size:14px;line-height:1.55}
  114. /* Pricing */
  115. .pricing{background:linear-gradient(180deg,#FAFAFB 0%,#fff 100%)}
  116. .price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:stretch}
  117. .price{background:#fff;border:1px solid var(--line-2);border-radius:var(--r-xl);padding:36px 32px;position:relative;transition:all .25s;display:flex;flex-direction:column}
  118. .price:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
  119. .price.popular{background:linear-gradient(180deg,#0B0B14 0%,#1B1B28 100%);color:#fff;border-color:transparent;box-shadow:var(--shadow-lg);transform:scale(1.02)}
  120. .price.popular::before{content:"⭐ Le plus populaire";position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:var(--grad);color:#fff;font-size:12px;font-weight:700;padding:6px 14px;border-radius:99px;letter-spacing:.02em;box-shadow:0 8px 20px -6px rgba(236,72,153,.6)}
  121. .price h3{font-size:18px;font-weight:700;font-family:'Inter';letter-spacing:-0.01em;color:inherit}
  122. .price .desc{font-size:14px;margin-top:6px;margin-bottom:24px;color:var(--muted)}
  123. .price.popular .desc{color:rgba(255,255,255,.65)}
  124. .price .amount{font-family:'Sora';font-size:46px;font-weight:800;letter-spacing:-0.04em;line-height:1}
  125. .price .per{font-size:14px;color:var(--muted);font-weight:500;margin-left:4px}
  126. .price.popular .per{color:rgba(255,255,255,.6)}
  127. .price ul{list-style:none;padding:0;margin:24px 0 28px;display:flex;flex-direction:column;gap:12px}
  128. .price li{display:flex;align-items:flex-start;gap:10px;font-size:14.5px;color:var(--ink-2)}
  129. .price.popular li{color:rgba(255,255,255,.85)}
  130. .price li .ck{width:20px;height:20px;border-radius:50%;background:rgba(99,102,241,.12);color:var(--brand-1);display:grid;place-items:center;font-size:11px;flex-shrink:0;margin-top:2px}
  131. .price.popular li .ck{background:rgba(236,72,153,.2);color:#F472B6}
  132. .price .btn-x{margin-top:auto;width:100%;justify-content:center;padding:13px 20px}
  134. /* CTA */
  135. .cta-section{padding:48px 0 96px}
  136. .cta-box{position:relative;overflow:hidden;background:linear-gradient(135deg,#0B0B14 0%,#1B1B28 60%, #4C1D95 100%);color:#fff;border-radius:var(--r-xl);padding:72px 56px;text-align:center;box-shadow:var(--shadow-lg)}
  137. .cta-box::before{content:"";position:absolute;width:520px;height:520px;background:radial-gradient(circle, rgba(236,72,153,.4), transparent 60%);top:-200px;right:-150px;border-radius:50%}
  138. .cta-box::after{content:"";position:absolute;width:420px;height:420px;background:radial-gradient(circle, rgba(99,102,241,.45), transparent 60%);bottom:-200px;left:-100px;border-radius:50%}
  139. .cta-box > *{position:relative;z-index:2}
  140. .cta-box h2{font-size:clamp(30px,3.5vw,46px);font-weight:700;letter-spacing:-0.03em;margin-bottom:18px;color:#fff}
  141. .cta-box p{font-size:17px;color:rgba(255,255,255,.75);max-width:540px;margin:0 auto 32px}
  142. .cta-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
  144. @media (max-width: 980px){
  145.   .hero-wrap{grid-template-columns:1fr;gap:40px}
  146.   .hero-right{max-width:420px;margin:0 auto}
  147.   .feat-grid,.steps,.price-grid{grid-template-columns:1fr 1fr}
  148.   .showcase{grid-template-columns:1fr;gap:40px}
  149.   .app-body{grid-template-columns:1fr}
  150.   .app-side{display:none}
  151. }
  152. @media (max-width: 620px){
  153.   .feat-grid,.steps,.price-grid{grid-template-columns:1fr}
  154.   .price.popular{transform:none}
  155.   .hero{padding:48px 0 32px}
  156.   .cta-box{padding:48px 24px}
  157.   .kpis{grid-template-columns:1fr 1fr}
  158.   .value-list{grid-template-columns:1fr}
  159.   .scan-badge{left:-8px;bottom:20px}
  160.   .qr-float{top:-10px;right:-10px;width:54px;height:54px;font-size:22px}
  161. }
  162. </style>
  163. {% endblock %}
  165. {% block body %}
  167. <section class="hero" id="home">
  168.   <div class="bg-grid"></div>
  169.   <div class="blob b1"></div>
  170.   <div class="blob b2"></div>
  172.   <div class="container-x hero-wrap">
  174.     {# ── Colonne gauche : texte ── #}
  175.     <div class="fade-up">
  176.       <span class="eyebrow">
  177.         <span class="pill">Nouveau</span>
  178.         Gestion de congé et de paie automatisée disponible
  179.       </span>
  181.       <h1>
  182.         Le pointage <span class="grad">réinventé</span><br>
  183.         pour les équipes modernes.
  184.       </h1>
  186.       <p class="lead">
  187.         Cassa Clock simplifie la gestion du temps, des congés et de la paie de vos
  188.         collaborateurs — du QR code sur site à la fiche de paie générée automatiquement.
  189.       </p>
  191.       <div class="hero-actions">
  192.         <a class="btn-x btn-grad" href="{{ path('company_wizard') }}">Commencer gratuitement <i class="bi bi-arrow-right"></i></a>
  193.         <a class="btn-x btn-ghost" href="#comment-ca-marche"><i class="bi bi-play-circle"></i> En savoir plus</a>
  194.       </div>
  196.       <div class="hero-trust">
  197.         <div class="avatars">
  198.           <span>AD</span><span>FN</span><span>MK</span><span>SY</span>
  199.         </div>
  200.         <div>
  201.           <div class="stars">★★★★★</div>
  202.           <div class="txt"><b style="color:var(--ink-2)">plusieurs entreprises</b> nous font confiance</div>
  203.         </div>
  204.       </div>
  205.     </div>
  207.     {# ── Colonne droite : photo employé ── #}
  208.     <div class="hero-right fade-up" style="animation-delay:.15s">
  209.       <div class="hero-photo-wrap" id="heroPhotoWrap">
  210.         <img
  211.           class="hero-photo"
  212.           src="{{ asset('images/hero-employee.jpg') }}"
  213.           alt="Employé africain scannant un QR code devant son entreprise"
  214.           onerror="document.getElementById('heroPhotoWrap').classList.add('hero-photo-fallback')"
  215.         >
  216.         {# Badge flottant "Pointage validé" #}
  217.         <div class="scan-badge">
  218.           <span class="s-ic"><i class="bi bi-check2-circle"></i></span>
  219.           <div>
  220.             <div>Pointage validé</div>
  221.             <div class="s-line">08:04 — Aujourd'hui</div>
  222.           </div>
  223.         </div>
  224.         {# Icône QR Code flottante #}
  225.         <div class="qr-float"><i class="bi bi-qr-code-scan"></i></div>
  226.       </div>
  227.     </div>
  229.   </div>
  230. </section>
  234. <section class="sec" id="features">
  235.   <div class="container-x">
  236.     <div class="sec-head fade-up">
  237.       <span class="sec-eyebrow">Nos atouts</span>
  238.       <h2 class="sec-title">Tout ce qu'il faut pour piloter vos équipes.</h2>
  239.       <p class="sec-lead">Une plateforme moderne, sécurisée et intuitive — du pointage à la paie, sans friction.</p>
  240.     </div>
  242.     <div class="feat-grid">
  243.       <div class="feat fade-up">
  244.         <div class="ic"><i class="bi bi-qr-code-scan"></i></div>
  245.         <h3>Pointage par QR Code</h3>
  246.         <p>Scan instantané sur smartphone. Multi-sites, géolocalisé, anti-fraude.</p>
  247.       </div>
  248.       <div class="feat fade-up">
  249.         <div class="ic"><i class="bi bi-graph-up-arrow"></i></div>
  250.         <h3>Rapports temps réel</h3>
  251.         <p>Tableaux de bord clairs, exports PDF/Excel, suivi des coûts par équipe.</p>
  252.       </div>
  253.       <div class="feat fade-up">
  254.         <div class="ic"><i class="bi bi-shield-check"></i></div>
  255.         <h3>Sécurité bancaire</h3>
  256.         <p>Chiffrement bout-en-bout, hébergement souverain, conformité RGPD.</p>
  257.       </div>
  258.       <div class="feat fade-up">
  259.         <div class="ic"><i class="bi bi-cash-stack"></i></div>
  260.         <h3>Paie automatisée</h3>
  261.         <p>Génération des fiches de paie à partir des pointages, en un clic.</p>
  262.       </div>
  263.       <div class="feat fade-up">
  264.         <div class="ic"><i class="bi bi-calendar-heart"></i></div>
  265.         <h3>Gestion des congés</h3>
  266.         <p>Demandes, validations, soldes, calendrier d'équipe — tout est centralisé.</p>
  267.       </div>
  268.       <div class="feat fade-up">
  269.         <div class="ic"><i class="bi bi-headset"></i></div>
  270.         <h3>Support 24/7</h3>
  271.         <p>Une équipe humaine disponible via WhatsApp, email et téléphone.</p>
  272.       </div>
  273.     </div>
  274.   </div>
  275. </section>
  277. <section class="sec" id="apropos" style="background:#fff;border-top:1px solid var(--line-2);border-bottom:1px solid var(--line-2)">
  278.   <div class="container-x">
  279.     <div class="showcase">
  280.       <div class="showcase-img fade-up">
  281.         <div class="mock">
  282.           <div class="mh">
  283.             <div class="ttl">Pointages du jour</div>
  284.             <span class="tag">Live</span>
  285.           </div>
  286.           <div class="mock-row"><div class="name"><span class="a">AD</span> Aïssatou Diop</div><span class="stat">Présente 08:02</span></div>
  287.           <div class="mock-row"><div class="name"><span class="a">MN</span> Modou Ndiaye</div><span class="stat">Présent 07:58</span></div>
  288.           <div class="mock-row"><div class="name"><span class="a">FK</span> Fatou Ka</div><span class="stat l">Retard 08:21</span></div>
  289.           <div class="mock-row"><div class="name"><span class="a">SY</span> Sokhna Y.</div><span class="stat">Présente 07:55</span></div>
  290.         </div>
  291.       </div>
  292.       <div class="showcase-content fade-up">
  293.         <span class="sec-eyebrow">Qui sommes-nous ?</span>
  294.         <h2>Le futur du suivi de pointage, sécurisé et simple.</h2>
  295.         <p>Cassa Clock est une solution innovante de gestion du temps adaptée aux entreprises au Sénégal et en Afrique. Notre plateforme moderne suit efficacement la présence et les horaires de vos équipes.</p>
  296.         <p>Sécurité, fluidité et simplicité — pour vous permettre de maîtriser la ponctualité de vos collaborateurs en toute sérénité.</p>
  297.         <ul class="value-list">
  298.           <li><span class="check"><i class="bi bi-check2"></i></span> Innovation</li>
  299.           <li><span class="check"><i class="bi bi-check2"></i></span> Sécurité</li>
  300.           <li><span class="check"><i class="bi bi-check2"></i></span> Transparence</li>
  301.           <li><span class="check"><i class="bi bi-check2"></i></span> Fiabilité</li>
  302.         </ul>
  303.       </div>
  304.     </div>
  305.   </div>
  306. </section>
  308. <section class="sec" id="comment-ca-marche">
  309.   <div class="container-x">
  310.     <div class="sec-head fade-up">
  311.       <span class="sec-eyebrow">Comment ça marche</span>
  312.       <h2 class="sec-title">Quatre étapes. Quelques minutes.</h2>
  313.       <p class="sec-lead">Démarrer avec Cassa Clock est plus rapide que de configurer une pointeuse classique.</p>
  314.     </div>
  315.     <div class="steps">
  316.       <div class="step fade-up">
  317.         <div class="step-n">1</div>
  318.         <h3>Inscription</h3>
  319.         <p>Créez votre compte en 2 minutes. Aucune carte bancaire requise pour démarrer.</p>
  320.       </div>
  321.       <div class="step fade-up">
  322.         <div class="step-n">2</div>
  323.         <h3>Configuration</h3>
  324.         <p>Importez vos employés, créez vos sites et générez vos QR codes.</p>
  325.       </div>
  326.       <div class="step fade-up">
  327.         <div class="step-n">3</div>
  328.         <h3>Abonnement</h3>
  329.         <p>Choisissez la formule adaptée à votre équipe et activez les modules désirés.</p>
  330.       </div>
  331.       <div class="step fade-up">
  332.         <div class="step-n">4</div>
  333.         <h3>Pilotage</h3>
  334.         <p>Suivez en temps réel, exportez vos rapports, automatisez votre paie.</p>
  335.       </div>
  336.     </div>
  337.   </div>
  338. </section>
  340. <section class="sec pricing" id="pricing">
  341.   <div class="container-x">
  342.     <div class="sec-head fade-up">
  343.       <span class="sec-eyebrow">Tarifs simples</span>
  344.       <h2 class="sec-title">Une formule pour chaque taille d'équipe.</h2>
  345.       <p class="sec-lead">Pas de frais cachés. Annulation à tout moment. 14 jours d'essai gratuit.</p>
  346.     </div>
  348.     <div class="price-grid">
  349.       <div class="price fade-up">
  350.         <h3>Xéweul</h3>
  351.         <p class="desc">Pour les petites équipes qui démarrent.</p>
  352.         <div><span class="amount">12k</span><span class="per">FCFA / mois</span></div>
  353.         <ul>
  354.           <li><span class="ck"><i class="bi bi-check2"></i></span> Jusqu'à 10 employés</li>
  355.           <li><span class="ck"><i class="bi bi-check2"></i></span> Rapports journaliers</li>
  356.           <li><span class="ck"><i class="bi bi-check2"></i></span> Multi-sièges</li>
  357.           <li><span class="ck"><i class="bi bi-check2"></i></span> Support standard</li>
  358.         </ul>
  359.         <a class="btn-x btn-ghost" href="{{ path('souscription_new') }}">Choisir Xéweul</a>
  360.       </div>
  362.       <div class="price popular fade-up">
  363.         <h3>Business</h3>
  364.         <p class="desc">Pour les entreprises en croissance.</p>
  365.         <div><span class="amount">20k</span><span class="per">FCFA / mois</span></div>
  366.         <ul>
  367.           <li><span class="ck"><i class="bi bi-check2"></i></span> Jusqu'à 50 employés</li>
  368.           <li><span class="ck"><i class="bi bi-check2"></i></span> Rapports personnalisés</li>
  369.           <li><span class="ck"><i class="bi bi-check2"></i></span> Multi-sièges illimités</li>
  370.           <li><span class="ck"><i class="bi bi-check2"></i></span> Support prioritaire</li>
  371.           <li><span class="ck"><i class="bi bi-check2"></i></span> Module paie inclus</li>
  372.         </ul>
  373.         <a class="btn-x btn-grad" href="{{ path('souscription_new') }}">Choisir Business</a>
  374.       </div>
  376.       <div class="price fade-up">
  377.         <h3>Premium</h3>
  378.         <p class="desc">Pour les organisations établies.</p>
  379.         <div><span class="amount">35k</span><span class="per">FCFA / mois</span></div>
  380.         <ul>
  381.           <li><span class="ck"><i class="bi bi-check2"></i></span> Jusqu'à 150 employés</li>
  382.           <li><span class="ck"><i class="bi bi-check2"></i></span> Dashboard avancé</li>
  383.           <li><span class="ck"><i class="bi bi-check2"></i></span> Support 24/7</li>
  384.           <li><span class="ck"><i class="bi bi-check2"></i></span> API & intégrations</li>
  385.         </ul>
  386.         <a class="btn-x btn-ghost" href="{{ path('souscription_new') }}">Choisir Premium</a>
  387.       </div>
  388.     </div>
  389.   </div>
  390. </section>
  392. <div class="cta-section">
  393.   <div class="container-x">
  394.     <div class="cta-box fade-up">
  395.       <h2>Prêt à digitaliser votre pointage ?</h2>
  396.       <p>Rejoignez les entreprises qui ont fait le choix de la simplicité. 14 jours d'essai gratuit, sans engagement.</p>
  397.       <div class="cta-actions">
  398.         <a class="btn-x btn-white" href="{{ path('company_wizard') }}">Démarrer gratuitement <i class="bi bi-arrow-right"></i></a>
  399.         <a class="btn-x btn-ghost" style="border-color:rgba(255,255,255,.25);color:#fff" href="{{ path('contact') }}"><i class="bi bi-chat-dots"></i> Parler à un expert</a>
  400.       </div>
  401.     </div>
  402.   </div>
  403. </div>
  405. {% endblock %}