templates/home/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-2xl text-blue-100 mb-8">Votre solution de gestion de paiements professionnelle</p>
  24.             <div class="flex flex-col sm:flex-row gap-4 justify-center items-center">
  25.                 <a href="{{ path('client_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">
  26.                     <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
  27.                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path>
  28.                     </svg>
  29.                     Espace Client
  30.                 </a>
  31.                 <a href="{{ path('app_login') }}" 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">
  32.                     <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
  33.                         <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>
  34.                     </svg>
  35.                     Administration
  36.                 </a>
  37.             </div>
  38.         </div>
  39.     </div>
  40.     <div class="absolute bottom-0 left-0 right-0">
  41.         <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">
  42.             <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"/>
  43.         </svg>
  44.     </div>
  45. </div>
  47. <!-- Moyens de Paiement en Ligne -->
  48. <div id="payment-methods" class="container mx-auto px-4 py-16">
  49.     <div class="text-center mb-12">
  50.         <h2 class="text-4xl font-bold text-gray-900 mb-4">đź’ł Moyens de Paiement AcceptĂ©s</h2>
  51.         <p class="text-xl text-gray-600">Payez en toute sĂ©curitĂ© avec vos mĂ©thodes prĂ©fĂ©rĂ©es</p>
  52.     </div>
  54.     {% if paymentGateways|length > 0 %}
  55.         <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6 gap-6">
  56.             {% for gateway in paymentGateways %}
  57.                 <div class="bg-white rounded-xl shadow-md p-6 hover:shadow-xl transition transform hover:scale-105 flex flex-col items-center justify-center">
  58.                     {% if gateway.logo %}
  59.                         <img src="{{ asset('uploads/payment_gateways/' ~ gateway.logo) }}" alt="{{ gateway.name }}" class="h-16 w-auto object-contain mb-3">
  60.                     {% else %}
  61.                         <div class="w-16 h-16 bg-gradient-to-br from-blue-100 to-blue-200 rounded-full flex items-center justify-center mb-3">
  62.                             <svg class="w-8 h-8 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
  63.                                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"></path>
  64.                             </svg>
  65.                         </div>
  66.                     {% endif %}
  67.                     <h3 class="text-sm font-semibold text-gray-900 text-center">{{ gateway.name }}</h3>
  68.                     {% if gateway.description %}
  69.                         <p class="text-xs text-gray-500 text-center mt-1">{{ gateway.description }}</p>
  70.                     {% endif %}
  71.                 </div>
  72.             {% endfor %}
  73.         </div>
  74.     {% else %}
  75.         <div class="text-center py-12 bg-gray-50 rounded-xl">
  76.             <svg class="mx-auto h-16 w-16 text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
  77.                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"></path>
  78.             </svg>
  79.             <p class="mt-4 text-gray-500">Aucun moyen de paiement en ligne disponible pour le moment</p>
  80.         </div>
  81.     {% endif %}
  82. </div>
  84. <!-- Banques Partenaires -->
  85. <div class="bg-gray-50 py-16">
  86.     <div class="container mx-auto px-4">
  87.         <div class="text-center mb-12">
  88.             <h2 class="text-4xl font-bold text-gray-900 mb-4">🏦 Nos Partenaires Financiers</h2>
  89.             <p class="text-xl text-gray-600">Banques et institutions financières de confiance</p>
  90.         </div>
  92.         {% if activeBanks|length > 0 %}
  93.             <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
  94.                 {% for bank in activeBanks %}
  95.                     <div class="bg-white rounded-xl shadow-md p-6 hover:shadow-xl transition">
  96.                         <div class="flex items-center space-x-4">
  97.                             {% if bank.logo %}
  98.                                 <img src="{{ asset('uploads/banks/' ~ bank.logo) }}" alt="{{ bank.name }}" class="h-16 w-16 object-contain">
  99.                             {% else %}
  100.                                 <div class="w-16 h-16 bg-gradient-to-br from-primary to-blue-700 rounded-lg flex items-center justify-center flex-shrink-0">
  101.                                     <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
  102.                                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 14v3m4-3v3m4-3v3M3 21h18M3 10h18M3 7l9-4 9 4M4 10h16v11H4V10z"></path>
  103.                                     </svg>
  104.                                 </div>
  105.                             {% endif %}
  106.                             <div class="flex-1">
  107.                                 <h3 class="text-lg font-bold text-gray-900">{{ bank.name }}</h3>
  108.                                 <p class="text-sm text-gray-600">
  109.                                     {% if bank.type == 'bank' %}
  110.                                         Banque
  111.                                     {% elseif bank.type == 'microfinance' %}
  112.                                         Microfinance
  113.                                     {% else %}
  114.                                         Institution Financière
  115.                                     {% endif %}
  116.                                 </p>
  117.                             </div>
  118.                         </div>
  119.                         {% if bank.address or bank.phone %}
  120.                             <div class="mt-4 pt-4 border-t border-gray-200">
  121.                                 {% if bank.address %}
  122.                                     <p class="text-xs text-gray-600 flex items-start mb-2">
  123.                                         <svg class="w-4 h-4 mr-2 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
  124.                                             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"></path>
  125.                                             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path>
  126.                                         </svg>
  127.                                         {{ bank.address }}
  128.                                     </p>
  129.                                 {% endif %}
  130.                                 {% if bank.phone %}
  131.                                     <p class="text-xs text-gray-600 flex items-center">
  132.                                         <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
  133.                                             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"></path>
  134.                                         </svg>
  135.                                         {{ bank.phone }}
  136.                                     </p>
  137.                                 {% endif %}
  138.                             </div>
  139.                         {% endif %}
  140.                     </div>
  141.                 {% endfor %}
  142.             </div>
  143.         {% else %}
  144.             <div class="text-center py-12 bg-white rounded-xl">
  145.                 <svg class="mx-auto h-16 w-16 text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
  146.                     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 14v3m4-3v3m4-3v3M3 21h18M3 10h18M3 7l9-4 9 4M4 10h16v11H4V10z"></path>
  147.                 </svg>
  148.                 <p class="mt-4 text-gray-500">Aucune banque partenaire pour le moment</p>
  149.             </div>
  150.         {% endif %}
  151.     </div>
  152. </div>
  154. <!-- FonctionnalitĂ©s -->
  155. <div class="container mx-auto px-4 py-16">
  156.     <div class="text-center mb-12">
  157.         <h2 class="text-4xl font-bold text-gray-900 mb-4">✨ FonctionnalitĂ©s</h2>
  158.         <p class="text-xl text-gray-600">Une solution complète pour gĂ©rer vos paiements</p>
  159.     </div>
  161.     <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
  162.         <div class="bg-white rounded-xl shadow-md p-6 hover:shadow-xl transition">
  163.             <div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center mb-4">
  164.                 <svg class="w-6 h-6 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
  165.                     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
  166.                 </svg>
  167.             </div>
  168.             <h3 class="text-xl font-bold text-gray-900 mb-2">Gestion des Factures</h3>
  169.             <p class="text-gray-600">CrĂ©ez, suivez et gĂ©rez vos factures en toute simplicitĂ©</p>
  170.         </div>
  172.         <div class="bg-white rounded-xl shadow-md p-6 hover:shadow-xl transition">
  173.             <div class="w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center mb-4">
  174.                 <svg class="w-6 h-6 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
  175.                     <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>
  176.                 </svg>
  177.             </div>
  178.             <h3 class="text-xl font-bold text-gray-900 mb-2">Suivi des Paiements</h3>
  179.             <p class="text-gray-600">Suivez tous vos encaissements en temps rĂ©el</p>
  180.         </div>
  182.         <div class="bg-white rounded-xl shadow-md p-6 hover:shadow-xl transition">
  183.             <div class="w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center mb-4">
  184.                 <svg class="w-6 h-6 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
  185.                     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path>
  186.                 </svg>
  187.             </div>
  188.             <h3 class="text-xl font-bold text-gray-900 mb-2">Rapports & Statistiques</h3>
  189.             <p class="text-gray-600">Analysez vos performances avec des tableaux de bord dĂ©taillĂ©s</p>
  190.         </div>
  192.         <div class="bg-white rounded-xl shadow-md p-6 hover:shadow-xl transition">
  193.             <div class="w-12 h-12 bg-yellow-100 rounded-lg flex items-center justify-center mb-4">
  194.                 <svg class="w-6 h-6 text-yellow-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
  195.                     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"></path>
  196.                 </svg>
  197.             </div>
  198.             <h3 class="text-xl font-bold text-gray-900 mb-2">Gestion des Clients</h3>
  199.             <p class="text-gray-600">GĂ©rez votre base de clients efficacement</p>
  200.         </div>
  202.         <div class="bg-white rounded-xl shadow-md p-6 hover:shadow-xl transition">
  203.             <div class="w-12 h-12 bg-red-100 rounded-lg flex items-center justify-center mb-4">
  204.                 <svg class="w-6 h-6 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
  205.                     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"></path>
  206.                 </svg>
  207.             </div>
  208.             <h3 class="text-xl font-bold text-gray-900 mb-2">SĂ©curitĂ©</h3>
  209.             <p class="text-gray-600">Vos donnĂ©es sont protĂ©gĂ©es avec les meilleurs standards</p>
  210.         </div>
  212.         <div class="bg-white rounded-xl shadow-md p-6 hover:shadow-xl transition">
  213.             <div class="w-12 h-12 bg-indigo-100 rounded-lg flex items-center justify-center mb-4">
  214.                 <svg class="w-6 h-6 text-indigo-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
  215.                     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"></path>
  216.                 </svg>
  217.             </div>
  218.             <h3 class="text-xl font-bold text-gray-900 mb-2">Import Excel</h3>
  219.             <p class="text-gray-600">Importez vos factures en masse depuis Excel</p>
  220.         </div>
  221.     </div>
  222. </div>
  224. <!-- Footer -->
  225. <div class="bg-gray-900 text-white py-8">
  226.     <div class="container mx-auto px-4 text-center">
  227.         <p class="text-gray-400">&copy; {{ "now"|date("Y") }} PaySolution. Tous droits rĂ©servĂ©s.</p>
  228.     </div>
  229. </div>
  230. {% endblock %}