templates/default/index.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  3. {% block title %}Accueil - PaySolution{% endblock %}
  5. {% block body %}
  6.     <!-- Hero Section -->
  7.     <div class="relative bg-gradient-to-br from-primary via-primary-dark to-blue-900 text-white overflow-hidden">
  8.         <div class="absolute inset-0 opacity-10">
  9.             <svg class="w-full h-full" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
  10.                 <path fill="currentColor" fill-opacity="1" d="M0,96L48,112C96,128,192,160,288,160C384,160,480,128,576,112C672,96,768,96,864,112C960,128,1056,160,1152,160C1248,160,1344,128,1392,112L1440,96L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path>
  11.             </svg>
  12.         </div>
  13.         <div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-24 md:py-32">
  14.             <div class="text-center">
  15.                 <div class="inline-flex items-center justify-center w-20 h-20 bg-white bg-opacity-20 rounded-full mb-6 backdrop-blur-sm">
  16.                     <svg class="w-12 h-12 text-secondary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
  17.                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path>
  18.                     </svg>
  19.                 </div>
  20.                 <h1 class="text-5xl md:text-6xl font-extrabold mb-6 tracking-tight">
  21.                     Pay<span class="text-secondary">Solution</span>
  22.                 </h1>
  23.                 <p class="text-xl md:text-2xl mb-4 max-w-3xl mx-auto text-blue-100 font-light">
  24.                     Plateforme sécurisée de gestion et paiement des factures d'électricité
  25.                 </p>
  26.                 <p class="text-lg mb-10 max-w-2xl mx-auto text-blue-200">
  27.                     Solution efficace pour la traçabilité des factures SNEL et faciliter le paiement en ligne
  28.                 </p>
  29.                 <div class="flex flex-col sm:flex-row gap-4 justify-center items-center">
  30.                     <a href="{{ path('app_login') }}" class="inline-flex items-center px-8 py-4 bg-secondary hover:bg-secondary-dark text-white font-bold rounded-lg text-lg transition duration-300 shadow-2xl transform hover:scale-105">
  31.                         <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
  32.                             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 16l-4-4m0 0l4-4m-4 4h14m-5 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h7a3 3 0 013 3v1"></path>
  33.                         </svg>
  34.                         Commencer maintenant
  35.                     </a>
  36.                     <a href="#features" class="inline-flex items-center px-8 py-4 bg-white bg-opacity-20 hover:bg-opacity-30 backdrop-blur-sm text-white font-semibold rounded-lg text-lg transition duration-300 border-2 border-white border-opacity-50">
  37.                         <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
  38.                             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
  39.                         </svg>
  40.                         En savoir plus
  41.                     </a>
  42.                 </div>
  43.             </div>
  44.         </div>
  45.         <div class="absolute bottom-0 left-0 right-0">
  46.             <svg class="w-full h-16 text-gray-50" preserveAspectRatio="none" viewBox="0 0 1440 54" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
  47.                 <path d="M0 22L60 16.7C120 11 240 1.00001 360 0.700012C480 1.00001 600 11 720 16.7C840 22 960 22 1080 20.3C1200 19 1320 16 1380 14.7L1440 13V54H1380C1320 54 1200 54 1080 54C960 54 840 54 720 54C600 54 480 54 360 54C240 54 120 54 60 54H0V22Z"/>
  48.             </svg>
  49.         </div>
  50.     </div>
  52.     <!-- Stats Section -->
  53.     <section class="py-12 bg-white">
  54.         <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
  55.             <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
  56.                 <div class="text-center">
  57.                     <div class="inline-flex items-center justify-center w-16 h-16 bg-primary bg-opacity-10 rounded-full mb-4">
  58.                         <svg class="w-8 h-8 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
  59.                             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"></path>
  60.                         </svg>
  61.                     </div>
  62.                     <h3 class="text-3xl font-bold text-gray-900 mb-2">100%</h3>
  63.                     <p class="text-gray-600">Sécurisé</p>
  64.                 </div>
  65.                 <div class="text-center">
  66.                     <div class="inline-flex items-center justify-center w-16 h-16 bg-secondary bg-opacity-10 rounded-full mb-4">
  67.                         <svg class="w-8 h-8 text-secondary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
  68.                             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
  69.                         </svg>
  70.                     </div>
  71.                     <h3 class="text-3xl font-bold text-gray-900 mb-2">24/7</h3>
  72.                     <p class="text-gray-600">Disponible</p>
  73.                 </div>
  74.                 <div class="text-center">
  75.                     <div class="inline-flex items-center justify-center w-16 h-16 bg-danger bg-opacity-10 rounded-full mb-4">
  76.                         <svg class="w-8 h-8 text-danger" fill="none" stroke="currentColor" viewBox="0 0 24 24">
  77.                             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path>
  78.                         </svg>
  79.                     </div>
  80.                     <h3 class="text-3xl font-bold text-gray-900 mb-2">Instantané</h3>
  81.                     <p class="text-gray-600">Paiement rapide</p>
  82.                 </div>
  83.             </div>
  84.         </div>
  85.     </section>
  87.     <!-- Features Section -->
  88.     <section id="features" class="py-20 bg-gray-50">
  89.         <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
  90.             <div class="text-center mb-16">
  91.                 <h2 class="text-4xl font-extrabold text-gray-900 mb-4">Fonctionnalités principales</h2>
  92.                 <p class="text-xl text-gray-600 max-w-2xl mx-auto">Une solution complète pour simplifier la gestion de vos factures d'électricité</p>
  93.             </div>
  94.             <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
  95.                 <!-- Feature 1 -->
  96.                 <div class="card hover:shadow-xl transition duration-300">
  97.                     <div class="bg-blue-100 p-4 rounded-full w-16 h-16 flex items-center justify-center mb-4">
  98.                         <svg class="w-8 h-8 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
  99.                             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"></path>
  100.                         </svg>
  101.                     </div>
  102.                     <h3 class="text-xl font-semibold mb-2 text-gray-900">Gestion des factures</h3>
  103.                     <p class="text-gray-600">Consultez et gérez toutes vos factures d'électricité en un seul endroit.</p>
  104.                 </div>
  106.                 <!-- Feature 2 -->
  107.                 <div class="card hover:shadow-xl transition duration-300">
  108.                     <div class="bg-yellow-100 p-4 rounded-full w-16 h-16 flex items-center justify-center mb-4">
  109.                         <svg class="w-8 h-8 text-secondary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
  110.                             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"></path>
  111.                         </svg>
  112.                     </div>
  113.                     <h3 class="text-xl font-semibold mb-2 text-gray-900">Paiement en ligne</h3>
  114.                     <p class="text-gray-600">Effectuez vos paiements en toute sécurité et sans tracas.</p>
  115.                 </div>
  117.                 <!-- Feature 3 -->
  118.                 <div class="card hover:shadow-xl transition duration-300">
  119.                     <div class="bg-red-100 p-4 rounded-full w-16 h-16 flex items-center justify-center mb-4">
  120.                         <svg class="w-8 h-8 text-danger" fill="none" stroke="currentColor" viewBox="0 0 24 24">
  121.                             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"></path>
  122.                         </svg>
  123.                     </div>
  124.                     <h3 class="text-xl font-semibold mb-2 text-gray-900">Sécurité maximale</h3>
  125.                     <p class="text-gray-600">Vos données sont protégées avec les normes de sécurité les plus strictes.</p>
  126.                 </div>
  127.             </div>
  128.         </div>
  129.     </section>
  131.     <!-- Benefits Section -->
  132.     <section class="py-20 bg-white">
  133.         <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
  134.             <div class="lg:grid lg:grid-cols-2 lg:gap-16 items-center">
  135.                 <div>
  136.                     <h2 class="text-3xl font-extrabold text-gray-900 mb-6">Pourquoi choisir PaySolution ?</h2>
  137.                     <div class="space-y-6">
  138.                         <div class="flex items-start">
  139.                             <div class="flex-shrink-0">
  140.                                 <div class="flex items-center justify-center h-12 w-12 rounded-md bg-primary text-white">
  141.                                     <svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
  142.                                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
  143.                                     </svg>
  144.                                 </div>
  145.                             </div>
  146.                             <div class="ml-4">
  147.                                 <h3 class="text-lg font-semibold text-gray-900">Traçabilité complète</h3>
  148.                                 <p class="mt-2 text-gray-600">Suivez toutes vos transactions en temps réel avec un historique détaillé et des preuves de paiement.</p>
  149.                             </div>
  150.                         </div>
  151.                         <div class="flex items-start">
  152.                             <div class="flex-shrink-0">
  153.                                 <div class="flex items-center justify-center h-12 w-12 rounded-md bg-secondary text-white">
  154.                                     <svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
  155.                                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
  156.                                     </svg>
  157.                                 </div>
  158.                             </div>
  159.                             <div class="ml-4">
  160.                                 <h3 class="text-lg font-semibold text-gray-900">Paiements sécurisés</h3>
  161.                                 <p class="mt-2 text-gray-600">Protection anti-fraude avec vérification des bordereaux et signatures électroniques.</p>
  162.                             </div>
  163.                         </div>
  164.                         <div class="flex items-start">
  165.                             <div class="flex-shrink-0">
  166.                                 <div class="flex items-center justify-center h-12 w-12 rounded-md bg-danger text-white">
  167.                                     <svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
  168.                                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
  169.                                     </svg>
  170.                                 </div>
  171.                             </div>
  172.                             <div class="ml-4">
  173.                                 <h3 class="text-lg font-semibold text-gray-900">Support 24/7</h3>
  174.                                 <p class="mt-2 text-gray-600">Notre équipe est disponible à tout moment pour vous assister.</p>
  175.                             </div>
  176.                         </div>
  177.                     </div>
  178.                 </div>
  179.                 <div class="mt-10 lg:mt-0">
  180.                     <div class="bg-gradient-to-br from-primary to-primary-dark rounded-2xl shadow-2xl p-8 text-white">
  181.                         <div class="text-center mb-8">
  182.                             <div class="inline-flex items-center justify-center w-20 h-20 bg-white bg-opacity-20 rounded-full mb-4">
  183.                                 <svg class="w-12 h-12 text-secondary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
  184.                                     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"></path>
  185.                                 </svg>
  186.                             </div>
  187.                             <h3 class="text-2xl font-bold mb-2">Plateforme SNEL Officielle</h3>
  188.                             <p class="text-blue-100">Solution agréée pour la gestion des factures d'électricité</p>
  189.                         </div>
  190.                         <div class="space-y-4">
  191.                             <div class="flex items-center">
  192.                                 <svg class="w-6 h-6 text-secondary mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
  193.                                     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
  194.                                 </svg>
  195.                                 <span>Paiements instantanés</span>
  196.                             </div>
  197.                             <div class="flex items-center">
  198.                                 <svg class="w-6 h-6 text-secondary mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
  199.                                     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
  200.                                 </svg>
  201.                                 <span>Historique complet</span>
  202.                             </div>
  203.                             <div class="flex items-center">
  204.                                 <svg class="w-6 h-6 text-secondary mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
  205.                                     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
  206.                                 </svg>
  207.                                 <span>Notifications automatiques</span>
  208.                             </div>
  209.                             <div class="flex items-center">
  210.                                 <svg class="w-6 h-6 text-secondary mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
  211.                                     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
  212.                                 </svg>
  213.                                 <span>Rapports détaillés</span>
  214.                             </div>
  215.                         </div>
  216.                     </div>
  217.                 </div>
  218.             </div>
  219.         </div>
  220.     </section>
  222.     <!-- CTA Section -->
  223.     <section class="relative bg-gradient-to-r from-primary via-primary-dark to-blue-900 text-white py-20 overflow-hidden">
  224.         <div class="absolute inset-0 opacity-10">
  225.             <svg class="w-full h-full" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
  226.                 <path fill="currentColor" fill-opacity="1" d="M0,96L48,112C96,128,192,160,288,160C384,160,480,128,576,112C672,96,768,96,864,112C960,128,1056,160,1152,160C1248,160,1344,128,1392,112L1440,96L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path>
  227.             </svg>
  228.         </div>
  229.         <div class="relative max-w-4xl mx-auto text-center px-4 sm:px-6 lg:px-8">
  230.             <h2 class="text-4xl font-extrabold mb-6">Prêt à simplifier la gestion de vos factures ?</h2>
  231.             <p class="text-xl mb-10 text-blue-100">Rejoignez PaySolution et profitez d'une expérience de paiement moderne et sécurisée.</p>
  232.             <div class="flex flex-col sm:flex-row gap-4 justify-center">
  233.                 <a href="{{ path('app_login') }}" class="inline-flex items-center justify-center px-8 py-4 bg-secondary hover:bg-secondary-dark text-white font-bold rounded-lg text-lg transition duration-300 shadow-2xl transform hover:scale-105">
  234.                     <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
  235.                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 16l-4-4m0 0l4-4m-4 4h14m-5 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h7a3 3 0 013 3v1"></path>
  236.                     </svg>
  237.                     Commencer maintenant
  238.                 </a>
  239.                 <a href="#features" class="inline-flex items-center justify-center px-8 py-4 bg-white bg-opacity-20 hover:bg-opacity-30 backdrop-blur-sm text-white font-semibold rounded-lg text-lg transition duration-300 border-2 border-white border-opacity-50">
  240.                     <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
  241.                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
  242.                     </svg>
  243.                     En savoir plus
  244.                 </a>
  245.             </div>
  246.         </div>
  247.     </section>
  248. {% endblock %}