templates/home/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>Accueil - Gestion des Protocoles BIDC</title>
  7.     
  8.     <!-- Bootstrap CSS -->
  9.     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  10.     <!-- Font Awesome -->
  11.     <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
  12.     
  13.     <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 128 128%22><text y=%221.2em%22 font-size=%2296%22>🏦</text></svg>">
  14.     
  15.     <style>
  16.         .hero-section {
  17.             background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  18.             min-height: 75vh;
  19.             display: flex;
  20.             align-items: center;
  21.         }
  23.         .min-vh-75 {
  24.             min-height: 75vh;
  25.         }
  27.         .bg-gradient-primary {
  28.             background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  29.         }
  31.         .feature-icon {
  32.             width: 80px;
  33.             height: 80px;
  34.             display: flex;
  35.             align-items: center;
  36.             justify-content: center;
  37.         }
  39.         .feature-card {
  40.             transition: transform 0.3s ease, box-shadow 0.3s ease;
  41.         }
  43.         .feature-card:hover {
  44.             transform: translateY(-5px);
  45.             box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
  46.         }
  48.         .dashboard-preview {
  49.             max-width: 400px;
  50.             margin: 0 auto;
  51.         }
  53.         .status-dot {
  54.             width: 12px;
  55.             height: 12px;
  56.             border-radius: 50%;
  57.             display: inline-block;
  58.         }
  60.         .stat-card {
  61.             text-align: center;
  62.         }
  64.         .stat-number {
  65.             font-size: 1.5rem;
  66.             font-weight: bold;
  67.             margin-bottom: 0.25rem;
  68.         }
  70.         .stat-label {
  71.             font-size: 0.875rem;
  72.             opacity: 0.9;
  73.         }
  75.         .hero-actions .btn {
  76.             transition: all 0.3s ease;
  77.         }
  79.         .hero-actions .btn:hover {
  80.             transform: translateY(-2px);
  81.         }
  83.         .footer {
  84.             background: linear-gradient(135deg, #343a40 0%, #495057 100%);
  85.             border-top: 1px solid #6c757d;
  86.         }
  88.         .footer a:hover {
  89.             color: #17a2b8 !important;
  90.             text-decoration: underline !important;
  91.         }
  93.         @media (max-width: 768px) {
  94.             .hero-section {
  95.                 min-height: 60vh;
  96.             }
  97.             
  98.             .hero-content h1 {
  99.                 font-size: 2rem;
  100.             }
  101.             
  102.             .hero-actions {
  103.                 flex-direction: column;
  104.                 gap: 1rem;
  105.             }
  106.             
  107.             .hero-actions .btn {
  108.                 width: 100%;
  109.             }
  110.         }
  111.     </style>
  112. </head>
  113. <body class="bg-light">
  114.     <div class="container-fluid p-0">
  115.         <!-- Hero Section -->
  116.         <section class="hero-section bg-gradient-primary text-white py-5">
  117.             <div class="container">
  118.                 <div class="row align-items-center min-vh-75">
  119.                     <div class="col-lg-6">
  120.                         <div class="hero-content">
  121.                             <h1 class="display-4 fw-bold mb-4">
  122.                                 <i class="fas fa-university me-3"></i>
  123.                                 Gestion des Protocoles BIDC
  124.                             </h1>
  125.                             <p class="lead mb-4">
  126.                                 Plateforme moderne et sĂ©curisĂ©e pour la gestion des protocoles, 
  127.                                 missions et Ă©margements dans le secteur bancaire.
  128.                             </p>
  129.                             <div class="hero-features mb-4">
  130.                                 <div class="row g-3">
  131.                                     <div class="col-md-6">
  132.                                         <div class="d-flex align-items-center">
  133.                                             <i class="fas fa-shield-alt text-warning me-2"></i>
  134.                                             <span>SĂ©curitĂ© renforcĂ©e</span>
  135.                                         </div>
  136.                                     </div>
  137.                                     <div class="col-md-6">
  138.                                         <div class="d-flex align-items-center">
  139.                                             <i class="fas fa-clock text-info me-2"></i>
  140.                                             <span>Suivi en temps rĂ©el</span>
  141.                                         </div>
  142.                                     </div>
  143.                                     <div class="col-md-6">
  144.                                         <div class="d-flex align-items-center">
  145.                                             <i class="fas fa-chart-line text-success me-2"></i>
  146.                                             <span>Analytics avancĂ©s</span>
  147.                                         </div>
  148.                                     </div>
  149.                                     <div class="col-md-6">
  150.                                         <div class="d-flex align-items-center">
  151.                                             <i class="fas fa-mobile-alt text-primary me-2"></i>
  152.                                             <span>Interface responsive</span>
  153.                                         </div>
  154.                                     </div>
  155.                                 </div>
  156.                             </div>
  157.                             <div class="hero-actions">
  158.                                 <a href="{{ path('app_login') }}" class="btn btn-light btn-lg me-3">
  159.                                     <i class="fas fa-sign-in-alt me-2"></i>
  160.                                     Se connecter
  161.                                 </a>
  162.                                 <a href="#features" class="btn btn-outline-light btn-lg">
  163.                                     <i class="fas fa-info-circle me-2"></i>
  164.                                     En savoir plus
  165.                                 </a>
  166.                             </div>
  167.                         </div>
  168.                     </div>
  169.                     <div class="col-lg-6">
  170.                         <div class="hero-image text-center">
  171.                             <div class="position-relative">
  172.                                 <div class="dashboard-preview bg-white rounded-3 shadow-lg p-4">
  173.                                     <div class="d-flex align-items-center mb-3">
  174.                                         <div class="status-dot bg-success me-2"></div>
  175.                                         <div class="status-dot bg-warning me-2"></div>
  176.                                         <div class="status-dot bg-danger me-2"></div>
  177.                                         <span class="text-muted small">Dashboard en direct</span>
  178.                                     </div>
  179.                                     <div class="row g-3">
  180.                                         <div class="col-6">
  181.                                             <div class="stat-card bg-primary text-white p-3 rounded">
  182.                                                 <div class="stat-number">24</div>
  183.                                                 <div class="stat-label">Missions actives</div>
  184.                                             </div>
  185.                                         </div>
  186.                                         <div class="col-6">
  187.                                             <div class="stat-card bg-success text-white p-3 rounded">
  188.                                                 <div class="stat-number">98%</div>
  189.                                                 <div class="stat-label">Taux de rĂ©ussite</div>
  190.                                             </div>
  191.                                         </div>
  192.                                         <div class="col-6">
  193.                                             <div class="stat-card bg-info text-white p-3 rounded">
  194.                                                 <div class="stat-number">156</div>
  195.                                                 <div class="stat-label">Émargements</div>
  196.                                             </div>
  197.                                         </div>
  198.                                         <div class="col-6">
  199.                                             <div class="stat-card bg-warning text-white p-3 rounded">
  200.                                                 <div class="stat-number">12</div>
  201.                                                 <div class="stat-label">Protocoles</div>
  202.                                             </div>
  203.                                         </div>
  204.                                     </div>
  205.                                 </div>
  206.                             </div>
  207.                         </div>
  208.                     </div>
  209.                 </div>
  210.             </div>
  211.         </section>
  213.         <!-- Features Section -->
  214.         <section id="features" class="py-5 bg-light">
  215.             <div class="container">
  216.                 <div class="row text-center mb-5">
  217.                     <div class="col-12">
  218.                         <h2 class="display-5 fw-bold mb-3">FonctionnalitĂ©s principales</h2>
  219.                         <p class="lead text-muted">Une solution complète pour la gestion des protocoles BIDC</p>
  220.                     </div>
  221.                 </div>
  222.                 
  223.                 <div class="row g-4">
  224.                     <div class="col-lg-4 col-md-6">
  225.                         <div class="feature-card card h-100 border-0 shadow-sm">
  226.                             <div class="card-body text-center p-4">
  227.                                 <div class="feature-icon bg-primary text-white rounded-circle mx-auto mb-3">
  228.                                     <i class="fas fa-file-contract fa-2x"></i>
  229.                                 </div>
  230.                                 <h5 class="card-title">Gestion des Protocoles</h5>
  231.                                 <p class="card-text text-muted">
  232.                                     CrĂ©ez, modifiez et suivez l'Ă©volution de vos protocoles BIDC 
  233.                                     avec un système de versioning intelligent.
  234.                                 </p>
  235.                             </div>
  236.                         </div>
  237.                     </div>
  238.                     
  239.                     <div class="col-lg-4 col-md-6">
  240.                         <div class="feature-card card h-100 border-0 shadow-sm">
  241.                             <div class="card-body text-center p-4">
  242.                                 <div class="feature-icon bg-success text-white rounded-circle mx-auto mb-3">
  243.                                     <i class="fas fa-tasks fa-2x"></i>
  244.                                 </div>
  245.                                 <h5 class="card-title">Planification des Missions</h5>
  246.                                 <p class="card-text text-muted">
  247.                                     Organisez et planifiez vos missions avec un calendrier interactif 
  248.                                     et des notifications en temps rĂ©el.
  249.                                 </p>
  250.                             </div>
  251.                         </div>
  252.                     </div>
  253.                     
  254.                     <div class="col-lg-4 col-md-6">
  255.                         <div class="feature-card card h-100 border-0 shadow-sm">
  256.                             <div class="card-body text-center p-4">
  257.                                 <div class="feature-icon bg-info text-white rounded-circle mx-auto mb-3">
  258.                                     <i class="fas fa-signature fa-2x"></i>
  259.                                 </div>
  260.                                 <h5 class="card-title">Émargements NumĂ©riques</h5>
  261.                                 <p class="card-text text-muted">
  262.                                     GĂ©rez les prĂ©sences et les heures de travail avec un système 
  263.                                     d'Ă©margement sĂ©curisĂ© et gĂ©olocalisĂ©.
  264.                                 </p>
  265.                             </div>
  266.                         </div>
  267.                     </div>
  268.                     
  269.                     <div class="col-lg-4 col-md-6">
  270.                         <div class="feature-card card h-100 border-0 shadow-sm">
  271.                             <div class="card-body text-center p-4">
  272.                                 <div class="feature-icon bg-warning text-white rounded-circle mx-auto mb-3">
  273.                                     <i class="fas fa-chart-bar fa-2x"></i>
  274.                                 </div>
  275.                                 <h5 class="card-title">Analytics & Rapports</h5>
  276.                                 <p class="card-text text-muted">
  277.                                     Analysez les performances et gĂ©nĂ©rez des rapports dĂ©taillĂ©s 
  278.                                     pour optimiser vos processus.
  279.                                 </p>
  280.                             </div>
  281.                         </div>
  282.                     </div>
  283.                     
  284.                     <div class="col-lg-4 col-md-6">
  285.                         <div class="feature-card card h-100 border-0 shadow-sm">
  286.                             <div class="card-body text-center p-4">
  287.                                 <div class="feature-icon bg-danger text-white rounded-circle mx-auto mb-3">
  288.                                     <i class="fas fa-shield-alt fa-2x"></i>
  289.                                 </div>
  290.                                 <h5 class="card-title">SĂ©curitĂ© RenforcĂ©e</h5>
  291.                                 <p class="card-text text-muted">
  292.                                     Protocoles de sĂ©curitĂ© bancaire avec authentification multi-facteurs 
  293.                                     et chiffrement des donnĂ©es.
  294.                                 </p>
  295.                             </div>
  296.                         </div>
  297.                     </div>
  298.                     
  299.                     <div class="col-lg-4 col-md-6">
  300.                         <div class="feature-card card h-100 border-0 shadow-sm">
  301.                             <div class="card-body text-center p-4">
  302.                                 <div class="feature-icon bg-secondary text-white rounded-circle mx-auto mb-3">
  303.                                     <i class="fas fa-mobile-alt fa-2x"></i>
  304.                                 </div>
  305.                                 <h5 class="card-title">Interface Responsive</h5>
  306.                                 <p class="card-text text-muted">
  307.                                     AccĂ©dez Ă  votre plateforme depuis n'importe quel appareil 
  308.                                     avec une interface adaptĂ©e Ă  tous les Ă©crans.
  309.                                 </p>
  310.                             </div>
  311.                         </div>
  312.                     </div>
  313.                 </div>
  314.             </div>
  315.         </section>
  317.         <!-- CTA Section -->
  318.         <section class="py-5 bg-dark text-white">
  319.             <div class="container">
  320.                 <div class="row align-items-center">
  321.                     <div class="col-lg-8">
  322.                         <h3 class="mb-3">PrĂŞt Ă  optimiser votre gestion des protocoles ?</h3>
  323.                         <p class="mb-0 lead">
  324.                             Rejoignez les institutions bancaires qui font confiance Ă  notre plateforme 
  325.                             pour sĂ©curiser et optimiser leurs processus.
  326.                         </p>
  327.                     </div>
  328.                     <div class="col-lg-4 text-lg-end">
  329.                         <a href="{{ path('app_login') }}" class="btn btn-light btn-lg">
  330.                             <i class="fas fa-rocket me-2"></i>
  331.                             Commencer maintenant
  332.                         </a>
  333.                     </div>
  334.                 </div>
  335.             </div>
  336.         </section>
  337.     </div>
  339.     <!-- Footer -->
  340.     <footer class="footer mt-auto py-3 bg-dark text-white">
  341.         <div class="container-fluid">
  342.             <div class="row">
  343.                 <div class="col-md-6">
  344.                     <div class="d-flex align-items-center">
  345.                         <i class="fas fa-code me-2"></i>
  346.                         <span>DĂ©veloppĂ© par <strong>Tufergroup</strong></span>
  347.                     </div>
  348.                 </div>
  349.                 <div class="col-md-6 text-end">
  350.                     <div class="d-flex align-items-center justify-content-end">
  351.                         <i class="fas fa-envelope me-2"></i>
  352.                         <a href="mailto:assoumanoujosias@gmail.com" class="text-white text-decoration-none">
  353.                             assoumanoujosias@gmail.com
  354.                         </a>
  355.                     </div>
  356.                 </div>
  357.             </div>
  358.         </div>
  359.     </footer>
  361.     <!-- Bootstrap JS -->
  362.     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  363. </body>
  364. </html>