templates/base_public.html.twig line 1

Open in your IDE?
  1. <!DOCTYPE html>
  2. <html lang="fr">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>{% block title %}Cassa Clock — Un service de pointage fiable, rapide et pensé pour vous !{% endblock %}</title>
  7. <link rel="icon" type="image/png" href="{{ asset('favicon.png') }}">
  9. <link rel="preconnect" href="https://fonts.googleapis.com">
  10. <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  11. <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Sora:wght@600;700;800&display=swap" rel="stylesheet">
  12. <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css" rel="stylesheet">
  14. <style>
  15. :root{
  16.   --bg:#FAFAFB;
  17.   --bg-soft:#F4F4F7;
  18.   --ink:#0B0B14;
  19.   --ink-2:#1B1B28;
  20.   --muted:#6B7280;
  21.   --muted-2:#9CA3AF;
  22.   --line:rgba(11,11,20,.08);
  23.   --line-2:rgba(11,11,20,.06);
  24.   --brand-1:#6366F1;
  25.   --brand-2:#8B5CF6;
  26.   --brand-3:#EC4899;
  27.   --brand-4:#F59E0B;
  28.   --grad: linear-gradient(135deg,#6366F1 0%,#8B5CF6 45%,#EC4899 100%);
  29.   --grad-soft: linear-gradient(135deg,rgba(99,102,241,.12) 0%,rgba(236,72,153,.12) 100%);
  30.   --shadow-sm: 0 1px 2px rgba(11,11,20,.04), 0 1px 1px rgba(11,11,20,.03);
  31.   --shadow-md: 0 8px 24px -8px rgba(11,11,20,.12), 0 4px 12px -4px rgba(11,11,20,.06);
  32.   --shadow-lg: 0 24px 60px -20px rgba(99,102,241,.25), 0 12px 30px -10px rgba(236,72,153,.18);
  33.   --r-sm:10px; --r-md:14px; --r-lg:20px; --r-xl:28px;
  34. }
  36. *{box-sizing:border-box;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
  37. html,body{margin:0;padding:0}
  38. body{
  39.   font-family:'Inter',system-ui,sans-serif;
  40.   background:var(--bg);
  41.   color:var(--ink);
  42.   font-size:16px;
  43.   line-height:1.55;
  44.   overflow-x:hidden;
  45. }
  46. h1,h2,h3,h4{font-family:'Sora','Inter',sans-serif;letter-spacing:-0.025em;line-height:1.1;margin:0}
  47. p{margin:0;color:var(--muted)}
  48. a{text-decoration:none;color:inherit}
  49. img{max-width:100%;display:block}
  51. .container-x{max-width:1180px;margin:0 auto;padding:0 24px}
  53. /* Decorative */
  54. .bg-grid{
  55.   position:absolute;inset:0;
  56.   background-image:radial-gradient(circle at 1px 1px, rgba(11,11,20,.07) 1px, transparent 0);
  57.   background-size:28px 28px;
  58.   mask-image:radial-gradient(ellipse at top, black 30%, transparent 70%);
  59.   pointer-events:none;
  60. }
  61. .blob{position:absolute;border-radius:50%;filter:blur(80px);opacity:.55;pointer-events:none;z-index:0}
  62. .blob.b1{width:520px;height:520px;background:#6366F1;top:-160px;left:-120px}
  63. .blob.b2{width:480px;height:480px;background:#EC4899;top:-80px;right:-140px;opacity:.4}
  64. .blob.b3{width:380px;height:380px;background:#F59E0B;bottom:-180px;left:30%;opacity:.25}
  66. /* Navbar */
  67. .nav-wrap{position:sticky;top:0;z-index:50;padding:14px 0;backdrop-filter:saturate(180%) blur(14px);background:rgba(250,250,251,.78);border-bottom:1px solid var(--line-2)}
  68. .nav-bar{display:flex;align-items:center;justify-content:space-between;gap:24px}
  69. .brand{display:flex;align-items:center;gap:10px;font-family:'Sora';font-weight:800;font-size:20px;letter-spacing:-0.02em;color:var(--ink)}
  70. .brand-dot{width:30px;height:30px;border-radius:9px;background:var(--grad);box-shadow:0 6px 18px -4px rgba(99,102,241,.55);display:grid;place-items:center;color:#fff;font-size:14px}
  71. .nav-links{display:flex;gap:32px;align-items:center}
  72. .nav-links a{color:var(--ink-2);font-weight:500;font-size:14.5px;opacity:.85;transition:opacity .15s}
  73. .nav-links a:hover{opacity:1}
  74. .nav-cta{display:flex;align-items:center;gap:10px}
  75. .nav-toggle{display:none;background:none;border:0;font-size:22px;color:var(--ink);cursor:pointer}
  77. /* Buttons */
  78. .btn-x{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 20px;border-radius:12px;font-weight:600;font-size:14.5px;border:1px solid transparent;cursor:pointer;transition:all .2s ease;white-space:nowrap}
  79. .btn-primary-x{background:var(--ink);color:#fff;box-shadow:var(--shadow-md)}
  80. .btn-primary-x:hover{transform:translateY(-1px);box-shadow:var(--shadow-lg);color:#fff}
  81. .btn-grad{background:var(--grad);color:#fff;box-shadow:0 10px 30px -10px rgba(99,102,241,.6)}
  82. .btn-grad:hover{transform:translateY(-1px);box-shadow:0 16px 38px -10px rgba(236,72,153,.6);color:#fff}
  83. .btn-ghost{background:transparent;color:var(--ink);border:1px solid var(--line)}
  84. .btn-ghost:hover{background:#fff;border-color:var(--ink);box-shadow:var(--shadow-sm);color:var(--ink)}
  85. .btn-white{background:#fff;color:var(--ink);box-shadow:var(--shadow-sm)}
  86. .btn-white:hover{color:var(--ink);transform:translateY(-1px);box-shadow:var(--shadow-md)}
  87. .btn-sm{padding:9px 14px;font-size:13.5px;border-radius:10px}
  89. /* Section commun */
  90. .sec{padding:96px 0;position:relative}
  91. .sec-head{text-align:center;max-width:680px;margin:0 auto 56px}
  92. .sec-eyebrow{display:inline-block;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.12em;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;margin-bottom:14px}
  93. .sec-title{font-size:clamp(30px,3.5vw,46px);font-weight:700;letter-spacing:-0.03em;margin-bottom:16px;color:var(--ink)}
  94. .sec-lead{font-size:17px;color:var(--muted);line-height:1.6}
  96. /* Page header (pour pages secondaires) */
  97. .page-header{position:relative;padding:120px 0 64px;overflow:hidden;text-align:center}
  98. .page-header .bg-grid{opacity:.6}
  99. .page-header .blob.b1{top:-220px}
  100. .page-header > .container-x{position:relative;z-index:2}
  101. .page-header h1{font-size:clamp(36px,4.4vw,56px);font-weight:800;letter-spacing:-0.035em;margin-bottom:14px}
  102. .page-header h1 .grad{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
  103. .page-header .lead{font-size:17px;color:var(--muted);max-width:640px;margin:0 auto}
  104. .crumbs{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--muted-2);margin-bottom:20px;font-weight:500}
  105. .crumbs a{color:var(--muted)}
  106. .crumbs a:hover{color:var(--ink)}
  107. .crumbs i{font-size:11px}
  109. /* Footer */
  110. footer.public-footer{padding:64px 0 32px;background:#fff;border-top:1px solid var(--line-2)}
  111. .foot{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:48px;margin-bottom:48px}
  112. .foot h5{font-size:13px;font-weight:700;color:var(--ink);margin-bottom:18px;letter-spacing:-0.01em;font-family:'Inter'}
  113. .foot ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px}
  114. .foot a{font-size:14px;color:var(--muted);transition:color .15s}
  115. .foot a:hover{color:var(--ink)}
  116. .foot .about{color:var(--muted);font-size:14.5px;line-height:1.65;margin-top:12px;max-width:300px}
  117. .foot-bottom{display:flex;justify-content:space-between;align-items:center;padding-top:24px;border-top:1px solid var(--line-2);font-size:13px;color:var(--muted)}
  118. .foot-bottom .socials{display:flex;gap:10px}
  119. .foot-bottom .socials a{width:36px;height:36px;border-radius:10px;border:1px solid var(--line);display:grid;place-items:center;font-size:15px;color:var(--ink-2)}
  120. .foot-bottom .socials a:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
  122. /* Mobile menu */
  123. .mobile-menu{display:none;position:fixed;inset:0;background:rgba(11,11,20,.55);z-index:999;opacity:0;transition:opacity .25s}
  124. .mobile-menu.open{opacity:1}
  125. .mobile-menu .panel{position:absolute;top:0;right:0;width:84%;max-width:340px;height:100%;background:#fff;padding:24px;display:flex;flex-direction:column;gap:6px;transform:translateX(100%);transition:transform .3s}
  126. .mobile-menu.open .panel{transform:translateX(0)}
  127. .mobile-menu .panel a{padding:14px 12px;border-radius:10px;color:var(--ink-2);font-weight:500;font-size:15px}
  128. .mobile-menu .panel a:hover{background:var(--bg-soft)}
  129. .mobile-menu .panel .close{align-self:flex-end;background:none;border:0;font-size:24px;cursor:pointer;color:var(--ink);margin-bottom:12px}
  131. /* Responsive */
  132. @media (max-width: 980px){
  133.   .nav-links{display:none}
  134.   .nav-toggle{display:inline-flex}
  135.   .foot{grid-template-columns:1fr 1fr;gap:32px}
  136.   .sec{padding:64px 0}
  137.   .page-header{padding:80px 0 48px}
  138. }
  139. @media (max-width: 620px){
  140.   .foot{grid-template-columns:1fr}
  141.   .nav-cta .btn-ghost{display:none}
  142. }
  144. /* Fade reveal */
  145. .fade-up{opacity:0;transform:translateY(20px);transition:opacity .7s ease, transform .7s ease}
  146. .fade-up.in{opacity:1;transform:none}
  148. .brand-text {
  149.     white-space: nowrap; /* empêche retour à la ligne */
  150. }
  152. /* Mobile */
  153. @media (max-width: 576px) {
  154.     .brand-text {
  155.         font-size: 14px; /* réduit la taille */
  156.     }
  157. }
  159. </style>
  161. {% block stylesheets %}{% endblock %}
  162. </head>
  163. <body>
  165. <!-- Navbar -->
  166. <div class="nav-wrap">
  167.   <div class="container-x nav-bar">
  168.     <a class="brand brand-text" href="{{ path('home') }}">
  169.   <span class="brand-dot"><i class="bi bi-clock-history"></i></span>
  170.   Cassa Clock
  171. </a>
  172.     <nav class="nav-links">
  173.       <a href="{{ path('home') }}#apropos">À propos</a>
  174.       <a href="{{ path('home') }}#features">Produit</a>
  175.       <a href="{{ path('app_tarification_index') }}">Tarifs</a>
  176.       <a href="{{ path('home') }}#comment-ca-marche">Comment ça marche</a>
  177.       <a href="{{ path('contact') }}">Contact</a>
  178.     </nav>
  179.     <div class="nav-cta">
  180.       {% if app.user %}
  181.         <a class="btn-x btn-ghost btn-sm" href="/admin"><i class="bi bi-grid"></i> Mon espace</a>
  182.         <a class="btn-x btn-grad btn-sm" href="{{ path('app_logout') }}">Déconnexion</a>
  183.       {% else %}
  184.         <a class="btn-x btn-ghost btn-sm" href="{{ path('app_login') }}">Connexion</a>
  185.         <a class="btn-x btn-grad btn-sm" href="{{ path('company_wizard') }}">Essai gratuit <i class="bi bi-arrow-up-right"></i></a>
  186.       {% endif %}
  187.       <button class="nav-toggle" id="navToggle" aria-label="Menu"><i class="bi bi-list"></i></button>
  188.     </div>
  189.   </div>
  190. </div>
  192. <!-- Mobile menu -->
  193. <div class="mobile-menu" id="mobileMenu">
  194.   <div class="panel">
  195.     <button class="close" id="navClose" aria-label="Fermer"><i class="bi bi-x"></i></button>
  196.     <a href="{{ path('home') }}">Accueil</a>
  197.     <a href="{{ path('home') }}#apropos">À propos</a>
  198.     <a href="{{ path('home') }}#features">Produit</a>
  199.     <a href="{{ path('home') }}#pricing">Tarifs</a>
  200.     <a href="{{ path('home') }}#comment-ca-marche">Comment ça marche</a>
  201.     <a href="{{ path('contact') }}">Contact</a>
  202.     <hr style="border:0;border-top:1px solid var(--line-2);margin:14px 0">
  203.     {% if app.user %}
  204.       <a href="/admin" class="btn-x btn-ghost" style="justify-content:flex-start"><i class="bi bi-grid"></i> Mon espace</a>
  205.       <a href="{{ path('app_logout') }}" class="btn-x btn-grad" style="justify-content:flex-start"><i class="bi bi-box-arrow-right"></i> Déconnexion</a>
  206.     {% else %}
  207.       <a href="{{ path('app_login') }}" class="btn-x btn-ghost" style="justify-content:flex-start"><i class="bi bi-box-arrow-in-right"></i> Connexion</a>
  208.       <a href="{{ path('company_wizard') }}" class="btn-x btn-grad" style="justify-content:flex-start"><i class="bi bi-arrow-up-right"></i> Essai gratuit</a>
  209.     {% endif %}
  210.   </div>
  211. </div>
  213. {% block body %}{% endblock %}
  215. <!-- Footer -->
  216. <footer class="public-footer">
  217.   <div class="container-x">
  218.     <div class="foot">
  219.       <div>
  220.         <a class="brand" href="{{ path('home') }}">
  221.           <span class="brand-dot"><i class="bi bi-clock-history"></i></span>
  222.           Cassa Clock
  223.         </a>
  224.         <p class="about">Un service de pointage fiable, rapide et pensé pour les équipes africaines.</p>
  225.       </div>
  226.       <div>
  227.         <h5>Produit</h5>
  228.         <ul>
  229.           <li><a href="{{ path('home') }}#features">Fonctionnalités</a></li>
  230.           <li><a href="{{ path('home') }}#pricing">Tarifs</a></li>
  231.           <li><a href="{{ path('app_services_index') }}">Services</a></li>
  232.           <li><a href="{{ path('home') }}#comment-ca-marche">Comment ça marche</a></li>
  233.         </ul>
  234.       </div>
  235.       <div>
  236.         <h5>Société</h5>
  237.         <ul>
  238.           <li><a href="{{ path('app_aboutus_index') }}">À propos</a></li>
  239.           <li><a href="{{ path('contact') }}">Contact</a></li>
  240.           <li><a href="{{ path('app_tarification_index') }}">Tarification</a></li>
  241.           <li><a href="{{ path('app_programmefidelite_index') }}">Programme fidélité</a></li>
  242.         </ul>
  243.       </div>
  244.       <div>
  245.         <h5>Légal</h5>
  246.         <ul>
  247.           <li><a href="{{ path('app_cgi_index') }}">Conditions générales</a></li>
  248.           <li><a href="{{ path('app_privacy_index') }}">Confidentialité</a></li>
  249.         </ul>
  250.       </div>
  251.     </div>
  252.     <div class="foot-bottom">
  253.       <div>© {{ "now"|date("Y") }} Cassa Clock — Tous droits réservés.</div>
  254.       <div class="socials">
  255.         <a href="#" aria-label="Facebook"><i class="bi bi-facebook"></i></a>
  256.         <a href="#" aria-label="LinkedIn"><i class="bi bi-linkedin"></i></a>
  257.         <a href="#" aria-label="Twitter / X"><i class="bi bi-twitter-x"></i></a>
  258.         <a href="#" aria-label="WhatsApp"><i class="bi bi-whatsapp"></i></a>
  259.       </div>
  260.     </div>
  261.   </div>
  262. </footer>
  264. <script>
  265.   // Mobile menu
  266.   function openMobileMenu() {
  267.     const m = document.getElementById('mobileMenu');
  268.     m.style.display = 'flex';
  269.     requestAnimationFrame(() => requestAnimationFrame(() => m.classList.add('open')));
  270.     document.body.style.overflow = 'hidden';
  271.   }
  272.   function closeMobileMenu() {
  273.     const m = document.getElementById('mobileMenu');
  274.     m.classList.remove('open');
  275.     document.body.style.overflow = '';
  276.     m.addEventListener('transitionend', () => { m.style.display = 'none'; }, { once: true });
  277.   }
  278.   document.getElementById('navToggle')?.addEventListener('click', openMobileMenu);
  279.   document.getElementById('navClose')?.addEventListener('click', closeMobileMenu);
  280.   document.getElementById('mobileMenu')?.addEventListener('click', (e) => { if (e.target.id === 'mobileMenu') closeMobileMenu(); });
  282.   // Fade reveal
  283.   const io = new IntersectionObserver((entries) => {
  284.     entries.forEach(e => { if (e.isIntersecting) e.target.classList.add('in'); });
  285.   }, { threshold: 0.12 });
  286.   document.querySelectorAll('.fade-up').forEach(el => io.observe(el));
  287. </script>
  289. {% block javascripts %}{% endblock %}
  291. </body>
  292. </html>