Spaces:
Running
Running
| <html lang="fr"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Tableau de bord - StagePro</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet"> | |
| <style> | |
| body { | |
| font-family: 'Poppins', sans-serif; | |
| background-color: #f8fafc; | |
| } | |
| .gradient-bg { | |
| background: linear-gradient(135deg, #3b82f6 0%, #6366f1 100%); | |
| } | |
| .card-hover:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); | |
| } | |
| .transition-all { | |
| transition: all 0.3s ease; | |
| } | |
| .progress-bar { | |
| height: 8px; | |
| border-radius: 4px; | |
| background-color: #e5e7eb; | |
| overflow: hidden; | |
| } | |
| .progress-fill { | |
| height: 100%; | |
| border-radius: 4px; | |
| background-color: #3b82f6; | |
| } | |
| </style> | |
| </head> | |
| <body class="min-h-screen"> | |
| <!-- Navigation --> | |
| <nav class="bg-white shadow-sm"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="flex justify-between h-16"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 flex items-center"> | |
| <i data-feather="briefcase" class="h-8 w-8 text-indigo-600"></i> | |
| <span class="ml-2 text-xl font-bold text-gray-800">StagePro</span> | |
| </div> | |
| </div> | |
| <div class="hidden md:ml-6 md:flex md:items-center md:space-x-8"> | |
| <a href="index.html" class="text-gray-500 hover:text-indigo-500 px-3 py-2 text-sm font-medium">Accueil</a> | |
| <a href="offres.html" class="text-gray-500 hover:text-indigo-500 px-3 py-2 text-sm font-medium">Offres de stage</a> | |
| <a href="#" class="text-indigo-600 border-b-2 border-indigo-500 px-3 py-2 text-sm font-medium">Tableau de bord</a> | |
| <a href="rapports.html" class="text-gray-500 hover:text-indigo-500 px-3 py-2 text-sm font-medium">Rapports</a> | |
| </div> | |
| <div class="flex items-center"> | |
| <div class="relative"> | |
| <button class="flex items-center space-x-2 focus:outline-none"> | |
| <img class="h-8 w-8 rounded-full" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Profil"> | |
| <span class="text-sm font-medium text-gray-700">Marie D.</span> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Dashboard Header --> | |
| <div class="bg-white shadow-sm"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4"> | |
| <div class="flex flex-col md:flex-row md:items-center md:justify-between"> | |
| <div> | |
| <h1 class="text-2xl font-bold text-gray-900">Tableau de bord</h1> | |
| <p class="mt-1 text-sm text-gray-500">Bienvenue sur votre espace personnel</p> | |
| </div> | |
| <div class="mt-4 md:mt-0"> | |
| <button class="bg-indigo-600 text-white px-4 py-2 rounded-md text-sm font-medium hover:bg-indigo-700 transition-all"> | |
| <i data-feather="plus" class="h-4 w-4 inline mr-1"></i> Nouvelle candidature | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Dashboard Content --> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8"> | |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-8"> | |
| <!-- Left Column --> | |
| <div class="lg:col-span-2 space-y-6"> | |
| <!-- Current Internship --> | |
| <div class="bg-white rounded-lg shadow-sm overflow-hidden"> | |
| <div class="px-6 py-4 border-b border-gray-200"> | |
| <h2 class="text-lg font-medium text-gray-900">Stage en cours</h2> | |
| </div> | |
| <div class="p-6"> | |
| <div class="flex flex-col md:flex-row md:items-center"> | |
| <div class="flex-shrink-0 mb-4 md:mb-0 md:mr-6"> | |
| <img class="h-16 w-16 rounded-full" src="https://logo.clearbit.com/techsolutions.com" alt="Entreprise"> | |
| </div> | |
| <div class="flex-1"> | |
| <h3 class="text-lg font-medium text-gray-900">Développeur Full Stack</h3> | |
| <p class="text-sm text-gray-500">TechSolutions Inc. - Paris, Île-de-France</p> | |
| <div class="mt-2 flex items-center text-sm text-gray-500"> | |
| <i data-feather="calendar" class="h-4 w-4 mr-1"></i> | |
| <span>15/06/2023 - 15/12/2023 (6 mois)</span> | |
| </div> | |
| </div> | |
| <div class="mt-4 md:mt-0"> | |
| <span class="px-3 py-1 rounded-full text-sm font-medium bg-green-100 text-green-800"> | |
| En cours | |
| </span> | |
| </div> | |
| </div> | |
| <div class="mt-6"> | |
| <h4 class="text-sm font-medium text-gray-900 mb-2">Progression</h4> | |
| <div class="progress-bar"> | |
| <div class="progress-fill" style="width: 40%"></div> | |
| </div> | |
| <div class="mt-2 flex justify-between text-sm text-gray-500"> | |
| <span>40% complété</span> | |
| <span>2 mois 3 semaines restantes</span> | |
| </div> | |
| </div> | |
| <div class="mt-6 grid grid-cols-1 md:grid-cols-3 gap-4"> | |
| <div class="bg-gray-50 p-4 rounded-lg"> | |
| <h4 class="text-sm font-medium text-gray-900 mb-1">Tuteur entreprise</h4> | |
| <p class="text-sm text-gray-600">Jean Martin</p> | |
| <p class="text-xs text-gray-500">jean.martin@techsolutions.com</p> | |
| </div> | |
| <div class="bg-gray-50 p-4 rounded-lg"> | |
| <h4 class="text-sm font-medium text-gray-900 mb-1">Enseignant référent</h4> | |
| <p class="text-sm text-gray-600">Pierre Lambert</p> | |
| <p class="text-xs text-gray-500">p.lambert@universite.fr</p> | |
| </div> | |
| <div class="bg-gray-50 p-4 rounded-lg"> | |
| <h4 class="text-sm font-medium text-gray-900 mb-1">Documents</h4> | |
| <div class="flex space-x-2"> | |
| <a href="#" class="text-indigo-600 hover:text-indigo-800 text-sm"> | |
| <i data-feather="file-text" class="h-4 w-4 inline mr-1"></i> Convention | |
| </a> | |
| <a href="#" class="text-indigo-600 hover:text-indigo-800 text-sm"> | |
| <i data-feather="file-text" class="h-4 w-4 inline mr-1"></i> Rapport | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Tasks --> | |
| <div class="bg-white rounded-lg shadow-sm overflow-hidden"> | |
| <div class="px-6 py-4 border-b border-gray-200"> | |
| <h2 class="text-lg font-medium text-gray-900">Tâches à accomplir</h2> | |
| </div> | |
| <div class="p-6"> | |
| <div class="space-y-4"> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 pt-1"> | |
| <input type="checkbox" class="h-4 w-4 text-indigo-600 border-gray-300 rounded"> | |
| </div> | |
| <div class="ml-3"> | |
| <p class="text-sm font-medium text-gray-900">Envoyer le rapport intermédiaire</p> | |
| <p class="text-sm text-gray-500">À remettre avant le 15/09/2023</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 pt-1"> | |
| <input type="checkbox" class="h-4 w-4 text-indigo-600 border-gray-300 rounded"> | |
| </div> | |
| <div class="ml-3"> | |
| <p class="text-sm font-medium text-gray-900">Prendre rendez-vous avec le tuteur</p> | |
| <p class="text-sm text-gray-500">Pour évaluation à mi-parcours</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 pt-1"> | |
| <input type="checkbox" class="h-4 w-4 text-indigo-600 border-gray-300 rounded" checked> | |
| </div> | |
| <div class="ml-3"> | |
| <p class="text-sm font-medium text-gray-900 line-through">Envoyer la convention signée</p> | |
| <p class="text-sm text-gray-500">Complété le 10/06/2023</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-4"> | |
| <button class="text-indigo-600 hover:text-indigo-800 text-sm font-medium"> | |
| <i data-feather="plus" class="h-4 w-4 inline mr-1"></i> Ajouter une tâche | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Applications --> | |
| <div class="bg-white rounded-lg shadow-sm overflow-hidden"> | |
| <div class="px-6 py-4 border-b border-gray-200"> | |
| <h2 class="text-lg font-medium text-gray-900">Mes candidatures</h2> | |
| </div> | |
| <div class="p-6"> | |
| <div class="overflow-x-auto"> | |
| <table class="min-w-full divide-y divide-gray-200"> | |
| <thead class="bg-gray-50"> | |
| <tr> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"> | |
| Poste | |
| </th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"> | |
| Entreprise | |
| </th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"> | |
| Statut | |
| </th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"> | |
| Date | |
| </th> | |
| </tr> | |
| </thead> | |
| <tbody class="bg-white divide-y divide-gray-200"> | |
| <tr> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="text-sm font-medium text-gray-900">Développeur Full Stack</div> | |
| <div class="text-sm text-gray-500">TechSolutions Inc.</div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"> | |
| Paris, Île-de-France | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800"> | |
| Accepté | |
| </span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"> | |
| 12/05/2023 | |
| </td> | |
| </tr> | |
| <tr> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="text-sm font-medium text-gray-900">Data Analyst</div> | |
| <div class="text-sm text-gray-500">DataVision</div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"> | |
| Lyon, Auvergne-Rhône-Alpes | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800"> | |
| En attente | |
| </span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"> | |
| 28/04/2023 | |
| </td> | |
| </tr> | |
| <tr> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="text-sm font-medium text-gray-900">Assistant Marketing</div> | |
| <div class="text-sm text-gray-500">BrandUp</div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"> | |
| Nantes, Pays de la Loire | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800"> | |
| Refusé | |
| </span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"> | |
| 15/04/2023 | |
| </td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| <div class="mt-4"> | |
| <button class="text-indigo-600 hover:text-indigo-800 text-sm font-medium"> | |
| Voir toutes les candidatures <i data-feather="arrow-right" class="h-4 w-4 inline ml-1"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Right Column --> | |
| <div class="space-y-6"> | |
| <!-- Calendar --> | |
| <div class="bg-white rounded-lg shadow-sm overflow-hidden"> | |
| <div class="px-6 py-4 border-b border-gray-200"> | |
| <h2 class="text-lg font-medium text-gray-900">Calendrier</h2> | |
| </div> | |
| <div class="p-6"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <button class="text-gray-500 hover:text-gray-700"> | |
| <i data-feather="chevron-left" class="h-5 w-5"></i> | |
| </button> | |
| <span class="text-sm font-medium text-gray-900">Septembre 2023</span> | |
| <button class="text-gray-500 hover:text-gray-700"> | |
| <i data-feather="chevron-right" class="h-5 w-5"></i> | |
| </button> | |
| </div> | |
| <div class="grid grid-cols-7 gap-1 text-center text-xs font-medium text-gray-500 mb-2"> | |
| <div>L</div> | |
| <div>M</div> | |
| <div>M</div> | |
| <div>J</div> | |
| <div>V</div> | |
| <div>S</div> | |
| <div>D</div> | |
| </div> | |
| <div class="grid grid-cols-7 gap-1"> | |
| <div class="py-1"></div> | |
| <div class="py-1"></div> | |
| <div class="py-1"></div> | |
| <div class="py-1"></div> | |
| <div class="py-1"> | |
| <span class="mx-auto flex h-6 w-6 items-center justify-center rounded-full text-gray-900">1</span> | |
| </div> | |
| <div class="py-1"> | |
| <span class="mx-auto flex h-6 w-6 items-center justify-center rounded-full text-gray-900">2</span> | |
| </div> | |
| <div class="py-1"> | |
| <span class="mx-auto flex h-6 w-6 items-center justify-center rounded-full text-gray-900">3</span> | |
| </div> | |
| <div class="py-1"> | |
| <span class="mx-auto flex h-6 w-6 items-center justify-center rounded-full text-gray-900">4</span> | |
| </div> | |
| <div class="py-1"> | |
| <span class="mx-auto flex h-6 w-6 items-center justify-center rounded-full text-gray-900">5</span> | |
| </div> | |
| <div class="py-1"> | |
| <span class="mx-auto flex h-6 w-6 items-center justify-center rounded-full text-gray-900">6</span> | |
| </div> | |
| <div class="py-1"> | |
| <span class="mx-auto flex h-6 w-6 items-center justify-center rounded-full text-gray-900">7</span> | |
| </div> | |
| <div class="py-1"> | |
| <span class="mx-auto flex h-6 w-6 items-center justify-center rounded-full text-gray-900">8</span> | |
| </div> | |
| <div class="py-1"> | |
| <span class="mx-auto flex h-6 w-6 items-center justify-center rounded-full text-gray-900">9</span> | |
| </div> | |
| <div class="py-1"> | |
| <span class="mx-auto flex h-6 w-6 items-center justify-center rounded-full text-gray-900">10</span> | |
| </div> | |
| <div class="py-1"> | |
| <span class="mx-auto flex h-6 w-6 items-center justify-center rounded-full bg-indigo-600 text-white">11</span> | |
| </div> | |
| <div class="py-1"> | |
| <span class="mx-auto flex h-6 w-6 items-center justify-center rounded-full text-gray-900">12</span> | |
| </div> | |
| <div class="py-1"> | |
| <span class="mx-auto flex h-6 w-6 items-center justify-center rounded-full text-gray-900">13</span> | |
| </div> | |
| <div class="py-1"> | |
| <span class="mx-auto flex h-6 w-6 items-center justify-center rounded-full text-gray-900">14</span> | |
| </div> | |
| <div class="py-1"> | |
| <span class="mx-auto flex h-6 w-6 items-center justify-center rounded-full bg-indigo-100 text-indigo-600">15</span> | |
| </div> | |
| <div class="py-1"> | |
| <span class="mx-auto flex h-6 w-6 items-center justify-center rounded-full text-gray-900">16</span> | |
| </div> | |
| <div class="py-1"> | |
| <span class="mx-auto flex h-6 w-6 items-center justify-center rounded-full text-gray-900">17</span> | |
| </div> | |
| <div class="py-1"> | |
| <span class="mx-auto flex h-6 w-6 items-center justify-center rounded-full text-gray-900">18</span> | |
| </div> | |
| <div class="py-1"> | |
| <span class="mx-auto flex h-6 w-6 items-center justify-center rounded-full text-gray-900">19</span> | |
| </div> | |
| <div class="py-1"> | |
| <span class="mx-auto flex h-6 w-6 items-center justify-center rounded-full text-gray-900">20</span> | |
| </div> | |
| <div class="py-1"> | |
| <span class="mx-auto flex h-6 w-6 items-center justify-center rounded-full text-gray-900">21</span> | |
| </div> | |
| <div class="py-1"> | |
| <span class="mx-auto flex h-6 w-6 items-center justify-center rounded-full text-gray-900">22</span> | |
| </div> | |
| <div class="py-1"> | |
| <span class="mx-auto flex h-6 w-6 items-center justify-center rounded-full text-gray-900">23</span> | |
| </div> | |
| <div class="py-1"> | |
| <span class="mx-auto flex h-6 w-6 items-center justify-center rounded-full text-gray-900">24</span> | |
| </div> | |
| <div class="py-1"> | |
| <span class="mx-auto flex h-6 w-6 items-center justify-center rounded-full text-gray-900">25</span> | |
| </div> | |
| <div class="py-1"> | |
| <span class="mx-auto flex h-6 w-6 items-center justify-center rounded-full text-gray-900">26</span> | |
| </div> | |
| <div class="py-1"> | |
| <span class="mx-auto flex h-6 w-6 items-center justify-center rounded-full text-gray-900">27</span> | |
| </div> | |
| <div class="py-1"> | |
| <span class="mx-auto flex h-6 w-6 items-center justify-center rounded-full text-gray-900">28</span> | |
| </div> | |
| <div class="py-1"> | |
| <span class="mx-auto flex h-6 w-6 items-center justify-center rounded-full text-gray-900">29</span> | |
| </div> | |
| <div class="py-1"> | |
| <span class="mx-auto flex h-6 w-6 items-center justify-center rounded-full text-gray-900">30</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="px-6 py-4 border-t border-gray-200"> | |
| <h3 class="text-sm font-medium text-gray-900 mb-2">Événements à venir</h3> | |
| <div class="space-y-2"> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 mt-1"> | |
| <div class="h-2 w-2 rounded-full bg-indigo-600"></div> | |
| </div> | |
| <div class="ml-3"> | |
| <p class="text-sm font-medium text-gray-900">Rapport intermédiaire</p> | |
| <p class="text-xs text-gray-500">15 septembre 2023</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 mt-1"> | |
| <div class="h-2 w-2 rounded-full bg-indigo-100"></div> | |
| </div> | |
| <div class="ml-3"> | |
| <p class="text-sm font-medium text-gray-900">Réunion avec tuteur</p> | |
| <p class="text-xs text-gray-500">11 septembre 2023 - 14h00</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Messages --> | |
| <div class="bg-white rounded-lg shadow-sm overflow-hidden"> | |
| <div class="px-6 py-4 border-b border-gray-200"> | |
| <div class="flex justify-between items-center"> | |
| <h2 class="text-lg font-medium text-gray-900">Messages</h2> | |
| <button class="text-indigo-600 hover:text-indigo-800 text-sm font-medium"> | |
| Voir tout | |
| </button> | |
| </div> | |
| </div> | |
| <div class="p-6"> | |
| <div class="space-y-4"> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0"> | |
| <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/men/32.jpg" alt=""> | |
| </div> | |
| <div class="ml-3"> | |
| <div class="text-sm font-medium text-gray-900">Pierre Lambert</div> | |
| <p class="text-sm text-gray-500">Avez-vous envoyé votre rapport ?</p> | |
| <p class="text-xs text-gray-400">Il y a 2 jours</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0"> | |
| <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/men/42.jpg" alt=""> | |
| </div> | |
| <div class="ml-3"> | |
| <div class="text-sm font-medium text-gray-900">Jean Martin</div> | |
| <p class="text-sm text-gray-500">Réunion prévue le 11/09</p> | |
| <p class="text-xs text-gray-400">Il y a 5 jours</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0"> | |
| <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/women/22.jpg" alt=""> | |
| </div> | |
| <div class="ml-3"> | |
| <div class="text-sm font-medium text-gray-900">Service RH</div> | |
| <p class="text-sm text-gray-500">Votre convention a été validée</p> | |
| <p class="text-xs text-gray-400">Il y a 2 semaines</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-4"> | |
| <button class="w-full bg-gray-50 text-gray-600 hover:text-gray-800 px-4 py-2 rounded-md text-sm font-medium"> | |
| <i data-feather="message-square" class="h-4 w-4 inline mr-1"></i> Nouveau message | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Resources --> | |
| <div class="bg-white rounded-lg shadow-sm overflow-hidden"> | |
| <div class="px-6 py-4 border-b border-gray-200"> | |
| <h2 class="text-lg font-medium text-gray-900">Ressources</h2> | |
| </div> | |
| <div class="p-6"> | |
| <div class="space-y-3"> | |
| <a href="#" class="flex items-center text-indigo-600 hover:text-indigo-800"> | |
| <i data-feather="file-text" class="h-5 w-5 mr-2"></i> | |
| <span class="text-sm font-medium">Modèle de rapport de stage</span> | |
| </a> | |
| <a href="#" class="flex items-center text-indigo-600 hover:text-indigo-800"> | |
| <i data-feather="file-text" class="h-5 w-5 mr-2"></i> | |
| <span class="text-sm font-medium">Guide pour réussir son stage</span> | |
| </a> | |
| <a href="#" class="flex items-center text-indigo-600 hover:text-indigo-800"> | |
| <i data-feather="file-text" class="h-5 w-5 mr-2"></i> | |
| <span class="text-sm font-medium">Convention type</span> | |
| </a> | |
| <a href="#" class="flex items-center text-indigo-600 hover:text-indigo-800"> | |
| <i data-feather="file-text" class="h-5 w-5 mr-2"></i> | |
| <span class="text-sm font-medium">Grille d'évaluation</span> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Footer --> | |
| <footer class="bg-gray-800 text-white"> | |
| <div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8"> | |
| <div class="grid grid-cols-2 md:grid-cols-4 gap-8"> | |
| <div> | |
| <h3 class="text-sm font-semibold text-gray-300 tracking-wider uppercase mb-4"> | |
| StagePro | |
| </h3> | |
| <p class="text-gray-400"> | |
| La plateforme de référence pour la gestion des stages et expériences professionnelles. | |
| </p> | |
| </div> | |
| <div> | |
| <h3 class="text-sm font-semibold text-gray-300 tracking-wider uppercase mb-4"> | |
| Navigation | |
| </h3> | |
| <ul class="space-y-2"> | |
| <li><a href="index.html" class="text-gray-400 hover:text-white">Accueil</a></li> | |
| <li><a href="offres.html" class="text-gray-400 hover:text-white">Offres de stage</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Tableau de bord</a></li> | |
| < | |
| </body> | |
| </html> |