templates/default/index.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>Chiffrage School - Plateforme de Gestion Scolaire</title>
  7.     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  8.     <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
  9.     <style>
  10.         :root {
  11.             --primary-color: #2c3e50;
  12.             --secondary-color: #3498db;
  13.             --accent-color: #e74c3c;
  14.             --light-bg: #ecf0f1;
  15.             --dark-text: #2c3e50;
  16.         }
  17.         
  18.         body {
  19.             font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  20.             line-height: 1.6;
  21.         }
  22.         
  23.         .hero-section {
  24.             background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
  25.             color: white;
  26.             padding: 100px 0;
  27.             position: relative;
  28.             overflow: hidden;
  29.         }
  30.         
  31.         @media (max-width: 768px) {
  32.             .hero-section {
  33.                 padding: 80px 0 60px 0;
  34.             }
  35.         }
  36.         
  37.         .hero-section::before {
  38.             content: '';
  39.             position: absolute;
  40.             top: 0;
  41.             left: 0;
  42.             right: 0;
  43.             bottom: 0;
  44.             background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="50" cy="50" r="1" fill="white" opacity="0.1"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');
  45.             opacity: 0.3;
  46.         }
  47.         
  48.         .hero-content {
  49.             position: relative;
  50.             z-index: 2;
  51.         }
  52.         
  53.         .feature-card {
  54.             background: white;
  55.             border-radius: 15px;
  56.             padding: 30px;
  57.             margin: 20px 0;
  58.             box-shadow: 0 10px 30px rgba(0,0,0,0.1);
  59.             transition: transform 0.3s ease, box-shadow 0.3s ease;
  60.             border: none;
  61.             height: 100%;
  62.         }
  63.         
  64.         @media (max-width: 768px) {
  65.             .feature-card {
  66.                 padding: 20px;
  67.                 margin: 10px 0;
  68.             }
  69.         }
  70.         
  71.         .feature-card:hover {
  72.             transform: translateY(-5px);
  73.             box-shadow: 0 20px 40px rgba(0,0,0,0.15);
  74.         }
  75.         
  76.         .feature-icon {
  77.             width: 80px;
  78.             height: 80px;
  79.             background: linear-gradient(135deg, var(--secondary-color), var(--accent-color));
  80.             border-radius: 50%;
  81.             display: flex;
  82.             align-items: center;
  83.             justify-content: center;
  84.             margin: 0 auto 20px;
  85.             color: white;
  86.             font-size: 2rem;
  87.         }
  88.         
  89.         @media (max-width: 768px) {
  90.             .feature-icon {
  91.                 width: 60px;
  92.                 height: 60px;
  93.                 font-size: 1.5rem;
  94.             }
  95.         }
  96.         
  97.         .cta-button {
  98.             background: linear-gradient(135deg, var(--secondary-color), var(--accent-color));
  99.             border: none;
  100.             padding: 15px 40px;
  101.             border-radius: 50px;
  102.             color: white;
  103.             font-weight: bold;
  104.             text-decoration: none;
  105.             transition: all 0.3s ease;
  106.             display: inline-block;
  107.         }
  108.         
  109.         @media (max-width: 768px) {
  110.             .cta-button {
  111.                 padding: 12px 30px;
  112.                 font-size: 0.9rem;
  113.             }
  114.         }
  115.         
  116.         .cta-button:hover {
  117.             transform: translateY(-2px);
  118.             box-shadow: 0 10px 20px rgba(52, 152, 219, 0.3);
  119.             color: white;
  120.             text-decoration: none;
  121.         }
  122.         
  123.         .navbar {
  124.             background: rgba(44, 62, 80, 0.95) !important;
  125.             backdrop-filter: blur(10px);
  126.         }
  127.         
  128.         .navbar-toggler {
  129.             border: none;
  130.             padding: 0.25rem 0.5rem;
  131.         }
  132.         
  133.         .navbar-toggler:focus {
  134.             box-shadow: none;
  135.         }
  136.         
  137.         .navbar-nav .nav-link {
  138.             padding: 0.5rem 1rem;
  139.             transition: color 0.3s ease;
  140.         }
  141.         
  142.         .navbar-nav .nav-link:hover {
  143.             color: var(--secondary-color) !important;
  144.         }
  145.         
  146.         .stats-section {
  147.             background: var(--light-bg);
  148.             padding: 80px 0;
  149.         }
  150.         
  151.         @media (max-width: 768px) {
  152.             .stats-section {
  153.                 padding: 60px 0;
  154.             }
  155.         }
  156.         
  157.         .stat-item {
  158.             text-align: center;
  159.             padding: 20px;
  160.         }
  161.         
  162.         @media (max-width: 768px) {
  163.             .stat-item {
  164.                 padding: 15px;
  165.             }
  166.         }
  167.         
  168.         .stat-number {
  169.             font-size: 3rem;
  170.             font-weight: bold;
  171.             color: var(--secondary-color);
  172.         }
  173.         
  174.         @media (max-width: 768px) {
  175.             .stat-number {
  176.                 font-size: 2.5rem;
  177.             }
  178.         }
  179.         
  180.         .footer {
  181.             background: var(--primary-color);
  182.             color: white;
  183.             padding: 40px 0 20px;
  184.         }
  185.         
  186.         @media (max-width: 768px) {
  187.             .footer {
  188.                 padding: 30px 0 15px;
  189.             }
  190.         }
  191.         
  192.         .floating-shapes {
  193.             position: absolute;
  194.             width: 100%;
  195.             height: 100%;
  196.             overflow: hidden;
  197.             z-index: 1;
  198.         }
  199.         
  200.         .shape {
  201.             position: absolute;
  202.             background: rgba(255,255,255,0.1);
  203.             border-radius: 50%;
  204.             animation: float 6s ease-in-out infinite;
  205.         }
  206.         
  207.         .shape:nth-child(1) {
  208.             width: 80px;
  209.             height: 80px;
  210.             top: 20%;
  211.             left: 10%;
  212.             animation-delay: 0s;
  213.         }
  214.         
  215.         .shape:nth-child(2) {
  216.             width: 120px;
  217.             height: 120px;
  218.             top: 60%;
  219.             right: 10%;
  220.             animation-delay: 2s;
  221.         }
  222.         
  223.         .shape:nth-child(3) {
  224.             width: 60px;
  225.             height: 60px;
  226.             top: 40%;
  227.             left: 50%;
  228.             animation-delay: 4s;
  229.         }
  230.         
  231.         @media (max-width: 768px) {
  232.             .shape:nth-child(1) {
  233.                 width: 40px;
  234.                 height: 40px;
  235.             }
  236.             
  237.             .shape:nth-child(2) {
  238.                 width: 60px;
  239.                 height: 60px;
  240.             }
  241.             
  242.             .shape:nth-child(3) {
  243.                 width: 30px;
  244.                 height: 30px;
  245.             }
  246.         }
  247.         
  248.         @keyframes float {
  249.             0%, 100% { transform: translateY(0px); }
  250.             50% { transform: translateY(-20px); }
  251.         }
  252.         
  253.         /* Améliorations pour mobile */
  254.         @media (max-width: 576px) {
  255.             .display-4 {
  256.                 font-size: 2.5rem;
  257.             }
  258.             
  259.             .display-5 {
  260.                 font-size: 2rem;
  261.             }
  262.             
  263.             .display-6 {
  264.                 font-size: 1.75rem;
  265.             }
  266.             
  267.             .lead {
  268.                 font-size: 1rem;
  269.             }
  270.             
  271.             .btn-lg {
  272.                 padding: 0.75rem 1.5rem;
  273.                 font-size: 1rem;
  274.             }
  275.         }
  276.         
  277.         /* Optimisations pour tablettes */
  278.         @media (min-width: 577px) and (max-width: 991px) {
  279.             .container {
  280.                 max-width: 95%;
  281.             }
  282.         }
  283.         
  284.         /* Amélioration de l'espacement sur mobile */
  285.         @media (max-width: 768px) {
  286.             .py-5 {
  287.                 padding-top: 3rem !important;
  288.                 padding-bottom: 3rem !important;
  289.             }
  290.             
  291.             .mb-4 {
  292.                 margin-bottom: 1.5rem !important;
  293.             }
  294.             
  295.             .mb-5 {
  296.                 margin-bottom: 2rem !important;
  297.             }
  298.         }
  299.         
  300.         /* Amélioration de la lisibilité sur mobile */
  301.         @media (max-width: 576px) {
  302.             body {
  303.                 font-size: 0.95rem;
  304.             }
  305.             
  306.             h1, h2, h3, h4, h5, h6 {
  307.                 line-height: 1.3;
  308.             }
  309.         }
  310.     </style>
  311. </head>
  312. <body>
  313.     <!-- Navigation -->
  314.     <nav class="navbar navbar-expand-lg navbar-dark fixed-top">
  315.         <div class="container">
  316.             <a class="navbar-brand fw-bold" href="#">
  317.                 <i class="fas fa-graduation-cap me-2"></i>
  318.                 Chiffrage School
  319.             </a>
  320.             
  321.             <!-- Bouton hamburger pour mobile -->
  322.             <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
  323.                 <span class="navbar-toggler-icon"></span>
  324.             </button>
  325.             
  326.             <!-- Menu de navigation -->
  327.             <div class="collapse navbar-collapse" id="navbarNav">
  328.                 <ul class="navbar-nav ms-auto">
  329.                     <li class="nav-item">
  330.                         <a class="nav-link" href="#features">Fonctionnalités</a>
  331.                     </li>
  332.                     <li class="nav-item">
  333.                         <a class="nav-link" href="#about">À propos</a>
  334.                     </li>
  335.                     <li class="nav-item">
  336.                         <a class="nav-link" href="#contact">Contact</a>
  337.                     </li>
  338.                     <li class="nav-item">
  339.                         <a class="nav-link" href="{{ path('app_login') }}">Connexion</a>
  340.                     </li>
  341.                 </ul>
  342.             </div>
  343.         </div>
  344.     </nav>
  346.     <!-- Hero Section -->
  347.     <section class="hero-section">
  348.         <div class="floating-shapes">
  349.             <div class="shape"></div>
  350.             <div class="shape"></div>
  351.             <div class="shape"></div>
  352.         </div>
  353.         <div class="container">
  354.             <div class="row align-items-center hero-content">
  355.                 <div class="col-lg-6 col-md-12 mb-4 mb-lg-0">
  356.                     <h1 class="display-4 fw-bold mb-4">
  357.                         Gestion Scolaire Simplifiée
  358.                     </h1>
  359.                     <p class="lead mb-4">
  360.                         Plateforme complète de gestion administrative et financière pour les établissements scolaires. 
  361.                         Simplifiez vos processus, gérez vos étudiants et suivez vos finances en toute simplicité.
  362.                     </p>
  363.                     <div class="d-flex flex-column flex-sm-row gap-3">
  364.                         <a href="{{ path('app_login') }}" class="cta-button text-center">
  365.                             <i class="fas fa-sign-in-alt me-2"></i>
  366.                             Commencer
  367.                         </a>
  368.                         <a href="#features" class="btn btn-outline-light btn-lg text-center">
  369.                             <i class="fas fa-info-circle me-2"></i>
  370.                             En savoir plus
  371.                         </a>
  372.                     </div>
  373.                 </div>
  374.                 <div class="col-lg-6 col-md-12 text-center">
  375.                     <i class="fas fa-chart-line" style="font-size: clamp(8rem, 15vw, 15rem); opacity: 0.3;"></i>
  376.                 </div>
  377.             </div>
  378.         </div>
  379.     </section>
  381.     <!-- Features Section -->
  382.     <section id="features" class="py-5">
  383.         <div class="container">
  384.             <div class="text-center mb-5">
  385.                 <h2 class="display-5 fw-bold text-dark mb-3">Fonctionnalités Principales</h2>
  386.                 <p class="lead text-muted">Tout ce dont vous avez besoin pour gérer votre établissement</p>
  387.             </div>
  388.             
  389.             <div class="row g-4">
  390.                 <div class="col-lg-4 col-md-6 col-sm-12">
  391.                     <div class="feature-card text-center h-100">
  392.                         <div class="feature-icon">
  393.                             <i class="fas fa-users"></i>
  394.                         </div>
  395.                         <h4 class="fw-bold mb-3">Gestion des Étudiants</h4>
  396.                         <p class="text-muted">
  397.                             Enregistrez et gérez facilement tous vos étudiants avec leurs informations complètes, 
  398.                             dossiers d'inscription détaillés et suivi académique.
  399.                         </p>
  400.                     </div>
  401.                 </div>
  402.                 
  403.                 <div class="col-lg-4 col-md-6 col-sm-12">
  404.                     <div class="feature-card text-center h-100">
  405.                         <div class="feature-icon">
  406.                             <i class="fas fa-calendar-check"></i>
  407.                         </div>
  408.                         <h4 class="fw-bold mb-3">Pointage de Présence</h4>
  409.                         <p class="text-muted">
  410.                             Système de pointage quotidien avec rapports détaillés. 
  411.                             Suivez les présences, absences et retards en temps réel.
  412.                         </p>
  413.                     </div>
  414.                 </div>
  415.                 
  416.                 <div class="col-lg-4 col-md-6 col-sm-12">
  417.                     <div class="feature-card text-center h-100">
  418.                         <div class="feature-icon">
  419.                             <i class="fas fa-credit-card"></i>
  420.                         </div>
  421.                         <h4 class="fw-bold mb-3">Gestion Financière</h4>
  422.                         <p class="text-muted">
  423.                             Gérez les frais scolaires, paiements et devises. 
  424.                             Suivi automatique des montants restants et statuts de paiement.
  425.                         </p>
  426.                     </div>
  427.                 </div>
  428.                 
  429.                 <div class="col-lg-4 col-md-6 col-sm-12">
  430.                     <div class="feature-card text-center h-100">
  431.                         <div class="feature-icon">
  432.                             <i class="fas fa-chart-bar"></i>
  433.                         </div>
  434.                         <h4 class="fw-bold mb-3">Tableaux de Bord</h4>
  435.                         <p class="text-muted">
  436.                             Statistiques en temps réel, rapports détaillés et analyses 
  437.                             pour une prise de décision éclairée.
  438.                         </p>
  439.                     </div>
  440.                 </div>
  441.                 
  442.                 <div class="col-lg-4 col-md-6 col-sm-12">
  443.                     <div class="feature-card text-center h-100">
  444.                         <div class="feature-icon">
  445.                             <i class="fas fa-file-export"></i>
  446.                         </div>
  447.                         <h4 class="fw-bold mb-3">Exports Multi-Formats</h4>
  448.                         <p class="text-muted">
  449.                             Exportez vos données en CSV et Excel. 
  450.                             Rapports personnalisables et filtres avancés.
  451.                         </p>
  452.                     </div>
  453.                 </div>
  454.                 
  455.                 <div class="col-lg-4 col-md-6 col-sm-12">
  456.                     <div class="feature-card text-center h-100">
  457.                         <div class="feature-icon">
  458.                             <i class="fas fa-shield-alt"></i>
  459.                         </div>
  460.                         <h4 class="fw-bold mb-3">Sécurité & Permissions</h4>
  461.                         <p class="text-muted">
  462.                             Système de rôles avancé, contrôle d'accès granulaire 
  463.                             et protection des données sensibles.
  464.                         </p>
  465.                     </div>
  466.                 </div>
  467.             </div>
  468.         </div>
  469.     </section>
  471.     <!-- Stats Section -->
  472.     <section class="stats-section">
  473.         <div class="container">
  474.             <div class="row g-4">
  475.                 <div class="col-lg-3 col-md-6 col-sm-6">
  476.                     <div class="stat-item">
  477.                         <div class="stat-number">100%</div>
  478.                         <div class="text-muted">Sécurisé</div>
  479.                     </div>
  480.                 </div>
  481.                 <div class="col-lg-3 col-md-6 col-sm-6">
  482.                     <div class="stat-item">
  483.                         <div class="stat-number">24/7</div>
  484.                         <div class="text-muted">Disponible</div>
  485.                     </div>
  486.                 </div>
  487.                 <div class="col-lg-3 col-md-6 col-sm-6">
  488.                     <div class="stat-item">
  489.                         <div class="stat-number">+50</div>
  490.                         <div class="text-muted">Fonctionnalités</div>
  491.                     </div>
  492.                 </div>
  493.                 <div class="col-lg-3 col-md-6 col-sm-6">
  494.                     <div class="stat-item">
  495.                         <div class="stat-number">∞</div>
  496.                         <div class="text-muted">Évolutif</div>
  497.                     </div>
  498.                 </div>
  499.             </div>
  500.         </div>
  501.     </section>
  503.     <!-- About Section -->
  504.     <section id="about" class="py-5">
  505.         <div class="container">
  506.             <div class="row align-items-center g-4">
  507.                 <div class="col-lg-6 col-md-12">
  508.                     <h2 class="display-6 fw-bold text-dark mb-4">Pourquoi Chiffrage School ?</h2>
  509.                     <p class="lead text-muted mb-4">
  510.                         Développée spécifiquement pour les établissements scolaires, notre plateforme 
  511.                         combine simplicité d'utilisation et fonctionnalités avancées.
  512.                     </p>
  513.                     <ul class="list-unstyled">
  514.                         <li class="mb-3">
  515.                             <i class="fas fa-check-circle text-success me-2"></i>
  516.                             Interface intuitive et responsive
  517.                         </li>
  518.                         <li class="mb-3">
  519.                             <i class="fas fa-check-circle text-success me-2"></i>
  520.                             Multi-écoles et multi-utilisateurs
  521.                         </li>
  522.                         <li class="mb-3">
  523.                             <i class="fas fa-check-circle text-success me-2"></i>
  524.                             Gestion multi-devises
  525.                         </li>
  526.                         <li class="mb-3">
  527.                             <i class="fas fa-check-circle text-success me-2"></i>
  528.                             Rapports et exports automatisés
  529.                         </li>
  530.                     </ul>
  531.                 </div>
  532.                 <div class="col-lg-6 col-md-12 text-center">
  533.                     <i class="fas fa-rocket" style="font-size: clamp(5rem, 10vw, 10rem); color: var(--secondary-color); opacity: 0.7;"></i>
  534.                 </div>
  535.             </div>
  536.         </div>
  537.     </section>
  539.     <!-- CTA Section -->
  540.     <section class="py-5" style="background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));">
  541.         <div class="container text-center">
  542.             <h2 class="display-6 fw-bold text-white mb-4">Prêt à Commencer ?</h2>
  543.             <p class="lead text-white mb-4">
  544.                 Rejoignez les établissements qui font confiance à Chiffrage School
  545.             </p>
  546.             <a href="{{ path('app_login') }}" class="cta-button btn-lg">
  547.                 <i class="fas fa-play me-2"></i>
  548.                 Démarrer Maintenant
  549.             </a>
  550.         </div>
  551.     </section>
  553.     <!-- Contact Section -->
  554.     <section id="contact" class="py-5" style="background: var(--light-bg);">
  555.         <div class="container">
  556.             <div class="row justify-content-center">
  557.                 <div class="col-lg-8 col-md-12 text-center">
  558.                     <h2 class="display-6 fw-bold text-dark mb-4">Nous Contacter</h2>
  559.                     <p class="lead text-muted mb-5">
  560.                         Prêt à transformer la gestion de votre établissement ? 
  561.                         Contactez-nous pour une démonstration ou pour souscrire à notre plateforme.
  562.                     </p>
  563.                 </div>
  564.             </div>
  565.             
  566.             <div class="row justify-content-center g-4">
  567.                 <div class="col-lg-10 col-md-12">
  568.                     <div class="row g-4">
  569.                         <div class="col-lg-6 col-md-12">
  570.                             <div class="feature-card h-100">
  571.                                 <div class="text-center mb-4">
  572.                                     <i class="fas fa-phone" style="font-size: clamp(2rem, 5vw, 3rem); color: var(--secondary-color);"></i>
  573.                                 </div>
  574.                                 <h4 class="fw-bold text-center mb-3">Par Téléphone</h4>
  575.                                 <div class="text-center">
  576.                                     <p class="mb-2">
  577.                                         <i class="fas fa-phone me-2 text-success"></i>
  578.                                         <strong>+243 000 000 000</strong>
  579.                                     </p>
  580.                                     <p class="text-muted">Lun-Ven: 8h-18h</p>
  581.                                 </div>
  582.                             </div>
  583.                         </div>
  584.                         
  585.                         <div class="col-lg-6 col-md-12">
  586.                             <div class="feature-card h-100">
  587.                                 <div class="text-center mb-4">
  588.                                     <i class="fas fa-envelope" style="font-size: clamp(2rem, 5vw, 3rem); color: var(--secondary-color);"></i>
  589.                                 </div>
  590.                                 <h4 class="fw-bold text-center mb-3">Par Email</h4>
  591.                                 <div class="text-center">
  592.                                     <p class="mb-2">
  593.                                         <i class="fas fa-envelope me-2 text-success"></i>
  594.                                         <strong>contact@chiffrageschool.com</strong>
  595.                                     </p>
  596.                                     <p class="text-muted">Réponse sous 24h</p>
  597.                                 </div>
  598.                             </div>
  599.                         </div>
  600.                     </div>
  601.                     
  602.                     <div class="row mt-4">
  603.                         <div class="col-12">
  604.                             <div class="feature-card">
  605.                                 <div class="text-center mb-4">
  606.                                     <i class="fas fa-calendar-alt" style="font-size: clamp(2rem, 5vw, 3rem); color: var(--secondary-color);"></i>
  607.                                 </div>
  608.                                 <h4 class="fw-bold text-center mb-3">Demander une Démonstration</h4>
  609.                                 <p class="text-center text-muted mb-4">
  610.                                     Nos experts vous feront une démonstration personnalisée de la plateforme 
  611.                                     et répondront à toutes vos questions.
  612.                                 </p>
  613.                                 <div class="text-center">
  614.                                     <a href="mailto:contact@chiffrageschool.com?subject=Demande de démonstration - Chiffrage School" class="cta-button">
  615.                                         <i class="fas fa-calendar-check me-2"></i>
  616.                                         Réserver une Démo
  617.                                     </a>
  618.                                 </div>
  619.                             </div>
  620.                         </div>
  621.                     </div>
  622.                 </div>
  623.             </div>
  624.         </div>
  625.     </section>
  627.     <!-- Footer -->
  628.     <footer class="footer">
  629.         <div class="container">
  630.             <div class="row g-4">
  631.                 <!-- Logo et Description -->
  632.                 <div class="col-lg-6 col-md-6 col-sm-12 mb-4">
  633.                     <div class="d-flex align-items-center mb-3">
  634.                         <i class="fas fa-graduation-cap me-3" style="font-size: clamp(1.5rem, 3vw, 2rem); color: var(--secondary-color);"></i>
  635.                         <h5 class="fw-bold mb-0 text-white">Chiffrage School</h5>
  636.                     </div>
  637.                     <p class="text-white mb-4">
  638.                         Plateforme de gestion scolaire moderne et efficace pour les établissements éducatifs. 
  639.                         Simplifiez vos processus administratifs et financiers.
  640.                     </p>
  641.                 </div>
  643.                 <!-- Liens Rapides -->
  644.                 <div class="col-lg-3 col-md-6 col-sm-6 mb-4">
  645.                     <h6 class="fw-bold text-white mb-3">Liens Rapides</h6>
  646.                     <ul class="list-unstyled">
  647.                         <li class="mb-2">
  648.                             <a href="#features" class="text-white text-decoration-none">Fonctionnalités</a>
  649.                         </li>
  650.                         <li class="mb-2">
  651.                             <a href="#about" class="text-white text-decoration-none">À propos</a>
  652.                         </li>
  653.                         <li class="mb-2">
  654.                             <a href="#contact" class="text-white text-decoration-none">Contact</a>
  655.                         </li>
  656.                         <li class="mb-2">
  657.                             <a href="{{ path('app_login') }}" class="text-white text-decoration-none">Connexion</a>
  658.                         </li>
  659.                     </ul>
  660.                 </div>
  662.                 <!-- Contact Info -->
  663.                 <div class="col-lg-3 col-md-6 col-sm-6 mb-4">
  664.                     <h6 class="fw-bold text-white mb-3">Contact</h6>
  665.                     <ul class="list-unstyled">
  666.                         <li class="mb-2">
  667.                             <i class="fas fa-phone me-2 text-white"></i>
  668.                             <span class="text-white">+243 000 000 000</span>
  669.                         </li>
  670.                         <li class="mb-2">
  671.                             <i class="fas fa-envelope me-2 text-white"></i>
  672.                             <span class="text-white">contact@chiffrageschool.com</span>
  673.                         </li>
  674.                         <li class="mb-2">
  675.                             <i class="fas fa-clock me-2 text-white"></i>
  676.                             <span class="text-white">Lun-Ven: 8h-18h</span>
  677.                         </li>
  678.                     </ul>
  679.                 </div>
  680.             </div>
  682.             <!-- Séparateur -->
  683.             <hr class="my-4" style="border-color: rgba(255,255,255,0.1);">
  685.             <!-- Bottom Footer -->
  686.             <div class="row align-items-center g-3">
  687.                 <div class="col-lg-6 col-md-12 mb-3 mb-lg-0">
  688.                     <p class="text-white mb-0">
  689.                         © 2024 Chiffrage School. Tous droits réservés.
  690.                     </p>
  691.                 </div>
  692.                 <div class="col-lg-6 col-md-12 text-lg-end text-center">
  693.                     <ul class="list-inline mb-0">
  694.                         <li class="list-inline-item">
  695.                             <a href="#" class="text-white text-decoration-none small">Politique de Confidentialité</a>
  696.                         </li>
  697.                         <li class="list-inline-item">
  698.                             <span class="text-white d-none d-sm-inline">|</span>
  699.                         </li>
  700.                         <li class="list-inline-item">
  701.                             <a href="#" class="text-white text-decoration-none small">Conditions d'Utilisation</a>
  702.                         </li>
  703.                         <li class="list-inline-item">
  704.                             <span class="text-white d-none d-sm-inline">|</span>
  705.                         </li>
  706.                         <li class="list-inline-item">
  707.                             <a href="#" class="text-white text-decoration-none small">Mentions Légales</a>
  708.                         </li>
  709.                     </ul>
  710.                 </div>
  711.             </div>
  712.         </div>
  713.     </footer>
  715.     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  716. </body>
  717. </html> 
  718. </html>