Spaces:
Running
Running
Vous souhaitez développer une application permettant d’automatiser la recherche d’offres d’emploi adaptées à votre profil, en exploitant l’intelligence artificielle pour analyser et extraire les opportunités pertinentes sur différents sites web, puis notifier l’utilisateur via WhatsApp. - Initial Deployment
6cb0050
verified
| <html lang="fr"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>JobFinder AI - Recherche intelligente d'emploi</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| .gradient-bg { | |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); | |
| } | |
| .job-card: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); | |
| } | |
| .animate-pulse { | |
| animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; | |
| } | |
| @keyframes pulse { | |
| 0%, 100% { opacity: 1; } | |
| 50% { opacity: 0.5; } | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50 font-sans"> | |
| <!-- Navigation --> | |
| <nav class="bg-white shadow-lg"> | |
| <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 class="fas fa-robot text-indigo-600 text-2xl mr-2"></i> | |
| <span class="text-xl font-bold text-gray-900">JobFinder AI</span> | |
| </div> | |
| </div> | |
| <div class="hidden md:ml-6 md:flex md:items-center md:space-x-8"> | |
| <a href="#" class="text-gray-900 inline-flex items-center px-1 pt-1 border-b-2 border-indigo-500 text-sm font-medium">Accueil</a> | |
| <a href="#" class="text-gray-500 hover:text-gray-900 inline-flex items-center px-1 pt-1 text-sm font-medium">Comment ça marche</a> | |
| <a href="#" class="text-gray-500 hover:text-gray-900 inline-flex items-center px-1 pt-1 text-sm font-medium">Tarifs</a> | |
| <a href="#" class="text-gray-500 hover:text-gray-900 inline-flex items-center px-1 pt-1 text-sm font-medium">Contact</a> | |
| </div> | |
| <div class="flex items-center"> | |
| <button class="bg-indigo-600 text-white px-4 py-2 rounded-md text-sm font-medium hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"> | |
| Se connecter | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Hero Section --> | |
| <div class="gradient-bg text-white"> | |
| <div class="max-w-7xl mx-auto py-16 px-4 sm:py-24 sm:px-6 lg:px-8"> | |
| <div class="text-center"> | |
| <h1 class="text-4xl font-extrabold tracking-tight sm:text-5xl lg:text-6xl"> | |
| Trouvez votre emploi idéal avec l'IA | |
| </h1> | |
| <p class="mt-6 max-w-lg mx-auto text-xl"> | |
| Notre intelligence artificielle scanne des milliers d'offres et ne vous propose que celles qui correspondent vraiment à votre profil. | |
| </p> | |
| <div class="mt-10"> | |
| <div class="mt-10 sm:flex sm:justify-center"> | |
| <div class="rounded-md shadow"> | |
| <a href="#" class="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-indigo-700 bg-white hover:bg-gray-50 md:py-4 md:text-lg md:px-10"> | |
| Essai gratuit | |
| </a> | |
| </div> | |
| <div class="mt-3 rounded-md shadow sm:mt-0 sm:ml-3"> | |
| <a href="#" class="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-white bg-indigo-500 bg-opacity-60 hover:bg-opacity-70 md:py-4 md:text-lg md:px-10"> | |
| Voir une démo | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- How it works --> | |
| <div class="py-12 bg-white"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="lg:text-center"> | |
| <h2 class="text-base text-indigo-600 font-semibold tracking-wide uppercase">Fonctionnement</h2> | |
| <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl"> | |
| Une recherche d'emploi révolutionnaire | |
| </p> | |
| <p class="mt-4 max-w-2xl text-xl text-gray-500 lg:mx-auto"> | |
| Notre IA fait le travail difficile pour vous | |
| </p> | |
| </div> | |
| <div class="mt-10"> | |
| <div class="space-y-10 md:space-y-0 md:grid md:grid-cols-3 md:gap-x-8 md:gap-y-10"> | |
| <div class="relative"> | |
| <div class="absolute flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white"> | |
| <i class="fas fa-user-tie text-xl"></i> | |
| </div> | |
| <p class="ml-16 text-lg leading-6 font-medium text-gray-900">1. Créez votre profil</p> | |
| <p class="mt-2 ml-16 text-base text-gray-500"> | |
| Décrivez vos compétences, expériences et préférences. Notre IA apprend à vous connaître. | |
| </p> | |
| </div> | |
| <div class="relative"> | |
| <div class="absolute flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white"> | |
| <i class="fas fa-search text-xl"></i> | |
| </div> | |
| <p class="ml-16 text-lg leading-6 font-medium text-gray-900">2. Scan automatique</p> | |
| <p class="mt-2 ml-16 text-base text-gray-500"> | |
| Notre IA scanne en permanence des dizaines de sites d'emploi pour trouver les offres pertinentes. | |
| </p> | |
| </div> | |
| <div class="relative"> | |
| <div class="absolute flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white"> | |
| <i class="fab fa-whatsapp text-xl"></i> | |
| </div> | |
| <p class="ml-16 text-lg leading-6 font-medium text-gray-900">3. Notifications WhatsApp</p> | |
| <p class="mt-2 ml-16 text-base text-gray-500"> | |
| Recevez directement sur WhatsApp les offres qui correspondent à votre profil. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Profile Setup --> | |
| <div class="bg-gray-50 py-16"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="lg:text-center mb-12"> | |
| <h2 class="text-base text-indigo-600 font-semibold tracking-wide uppercase">Configuration</h2> | |
| <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl"> | |
| Configurez votre profil | |
| </p> | |
| <p class="mt-4 max-w-2xl text-xl text-gray-500 lg:mx-auto"> | |
| Plus votre profil est précis, plus nos recommandations seront pertinentes. | |
| </p> | |
| </div> | |
| <div class="bg-white shadow overflow-hidden sm:rounded-lg"> | |
| <div class="px-4 py-5 sm:px-6 border-b border-gray-200"> | |
| <h3 class="text-lg leading-6 font-medium text-gray-900"> | |
| Informations personnelles | |
| </h3> | |
| <p class="mt-1 max-w-2xl text-sm text-gray-500"> | |
| Ces informations aideront notre IA à mieux vous comprendre. | |
| </p> | |
| </div> | |
| <div class="px-4 py-5 sm:p-6"> | |
| <form class="space-y-8 divide-y divide-gray-200"> | |
| <div class="space-y-8 divide-y divide-gray-200"> | |
| <div> | |
| <div class="mt-6 grid grid-cols-1 gap-y-6 gap-x-4 sm:grid-cols-6"> | |
| <div class="sm:col-span-3"> | |
| <label for="first-name" class="block text-sm font-medium text-gray-700">Prénom</label> | |
| <div class="mt-1"> | |
| <input type="text" name="first-name" id="first-name" autocomplete="given-name" class="py-3 px-4 block w-full shadow-sm focus:ring-indigo-500 focus:border-indigo-500 border-gray-300 rounded-md"> | |
| </div> | |
| </div> | |
| <div class="sm:col-span-3"> | |
| <label for="last-name" class="block text-sm font-medium text-gray-700">Nom</label> | |
| <div class="mt-1"> | |
| <input type="text" name="last-name" id="last-name" autocomplete="family-name" class="py-3 px-4 block w-full shadow-sm focus:ring-indigo-500 focus:border-indigo-500 border-gray-300 rounded-md"> | |
| </div> | |
| </div> | |
| <div class="sm:col-span-4"> | |
| <label for="email" class="block text-sm font-medium text-gray-700">Email</label> | |
| <div class="mt-1"> | |
| <input id="email" name="email" type="email" autocomplete="email" class="py-3 px-4 block w-full shadow-sm focus:ring-indigo-500 focus:border-indigo-500 border-gray-300 rounded-md"> | |
| </div> | |
| </div> | |
| <div class="sm:col-span-4"> | |
| <label for="whatsapp" class="block text-sm font-medium text-gray-700">Numéro WhatsApp</label> | |
| <div class="mt-1"> | |
| <input id="whatsapp" name="whatsapp" type="tel" class="py-3 px-4 block w-full shadow-sm focus:ring-indigo-500 focus:border-indigo-500 border-gray-300 rounded-md" placeholder="+33 6 12 34 56 78"> | |
| </div> | |
| </div> | |
| <div class="sm:col-span-6"> | |
| <label for="skills" class="block text-sm font-medium text-gray-700">Compétences (séparées par des virgules)</label> | |
| <div class="mt-1"> | |
| <textarea id="skills" name="skills" rows="3" class="shadow-sm focus:ring-indigo-500 focus:border-indigo-500 block w-full sm:text-sm border border-gray-300 rounded-md py-3 px-4"></textarea> | |
| </div> | |
| <p class="mt-2 text-sm text-gray-500">Exemple: JavaScript, React, Node.js, Python</p> | |
| </div> | |
| <div class="sm:col-span-6"> | |
| <label for="experience" class="block text-sm font-medium text-gray-700">Expérience professionnelle</label> | |
| <div class="mt-1"> | |
| <textarea id="experience" name="experience" rows="4" class="shadow-sm focus:ring-indigo-500 focus:border-indigo-500 block w-full sm:text-sm border border-gray-300 rounded-md py-3 px-4"></textarea> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="pt-8"> | |
| <div> | |
| <h3 class="text-lg leading-6 font-medium text-gray-900"> | |
| Préférences d'emploi | |
| </h3> | |
| <p class="mt-1 text-sm text-gray-500"> | |
| Ces informations nous aideront à filtrer les offres pour vous. | |
| </p> | |
| </div> | |
| <div class="mt-6 grid grid-cols-1 gap-y-6 gap-x-4 sm:grid-cols-6"> | |
| <div class="sm:col-span-3"> | |
| <label for="job-title" class="block text-sm font-medium text-gray-700">Poste recherché</label> | |
| <div class="mt-1"> | |
| <input type="text" name="job-title" id="job-title" class="py-3 px-4 block w-full shadow-sm focus:ring-indigo-500 focus:border-indigo-500 border-gray-300 rounded-md" placeholder="Développeur Full Stack"> | |
| </div> | |
| </div> | |
| <div class="sm:col-span-3"> | |
| <label for="location" class="block text-sm font-medium text-gray-700">Localisation</label> | |
| <div class="mt-1"> | |
| <input type="text" name="location" id="location" class="py-3 px-4 block w-full shadow-sm focus:ring-indigo-500 focus:border-indigo-500 border-gray-300 rounded-md" placeholder="Paris, France"> | |
| </div> | |
| </div> | |
| <div class="sm:col-span-2"> | |
| <label for="salary" class="block text-sm font-medium text-gray-700">Salaire minimum (€)</label> | |
| <div class="mt-1"> | |
| <input type="number" name="salary" id="salary" class="py-3 px-4 block w-full shadow-sm focus:ring-indigo-500 focus:border-indigo-500 border-gray-300 rounded-md" placeholder="40000"> | |
| </div> | |
| </div> | |
| <div class="sm:col-span-2"> | |
| <label for="job-type" class="block text-sm font-medium text-gray-700">Type de contrat</label> | |
| <div class="mt-1"> | |
| <select id="job-type" name="job-type" class="py-3 px-4 block w-full shadow-sm focus:ring-indigo-500 focus:border-indigo-500 border-gray-300 rounded-md"> | |
| <option>Tous types</option> | |
| <option>CDI</option> | |
| <option>CDD</option> | |
| <option>Freelance</option> | |
| <option>Stage</option> | |
| <option>Alternance</option> | |
| </select> | |
| </div> | |
| </div> | |
| <div class="sm:col-span-2"> | |
| <label for="remote" class="block text-sm font-medium text-gray-700">Télétravail</label> | |
| <div class="mt-1"> | |
| <select id="remote" name="remote" class="py-3 px-4 block w-full shadow-sm focus:ring-indigo-500 focus:border-indigo-500 border-gray-300 rounded-md"> | |
| <option>Peu importe</option> | |
| <option>100% remote</option> | |
| <option>Hybride</option> | |
| <option>Sur site</option> | |
| </select> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="pt-5"> | |
| <div class="flex justify-end"> | |
| <button type="button" class="bg-white py-2 px-4 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"> | |
| Annuler | |
| </button> | |
| <button type="submit" class="ml-3 inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"> | |
| Enregistrer | |
| </button> | |
| </div> | |
| </div> | |
| </form> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Job Matching Demo --> | |
| <div class="bg-white py-16"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="lg:text-center mb-12"> | |
| <h2 class="text-base text-indigo-600 font-semibold tracking-wide uppercase">Technologie</h2> | |
| <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl"> | |
| Comment notre IA trouve vos offres parfaites | |
| </p> | |
| <p class="mt-4 max-w-2xl text-xl text-gray-500 lg:mx-auto"> | |
| Une analyse approfondie de votre profil et des offres disponibles | |
| </p> | |
| </div> | |
| <div class="flex flex-col md:flex-row gap-8"> | |
| <div class="w-full md:w-1/2 bg-gray-50 p-6 rounded-lg"> | |
| <h3 class="text-lg font-medium text-gray-900 mb-4">Votre profil</h3> | |
| <div class="space-y-4"> | |
| <div> | |
| <h4 class="text-sm font-medium text-gray-500">Compétences principales</h4> | |
| <div class="mt-2 flex flex-wrap gap-2"> | |
| <span class="px-2 py-1 rounded-full text-xs font-medium bg-indigo-100 text-indigo-800">JavaScript</span> | |
| <span class="px-2 py-1 rounded-full text-xs font-medium bg-indigo-100 text-indigo-800">React</span> | |
| <span class="px-2 py-1 rounded-full text-xs font-medium bg-indigo-100 text-indigo-800">Node.js</span> | |
| <span class="px-2 py-1 rounded-full text-xs font-medium bg-indigo-100 text-indigo-800">MongoDB</span> | |
| </div> | |
| </div> | |
| <div> | |
| <h4 class="text-sm font-medium text-gray-500">Expérience</h4> | |
| <p class="mt-2 text-sm text-gray-900">3 ans en tant que développeur Full Stack chez TechCorp</p> | |
| </div> | |
| <div> | |
| <h4 class="text-sm font-medium text-gray-500">Préférences</h4> | |
| <p class="mt-2 text-sm text-gray-900">CDI ou Freelance, 100% remote, salaire minimum 45k€</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="w-full md:w-1/2 bg-gray-50 p-6 rounded-lg"> | |
| <h3 class="text-lg font-medium text-gray-900 mb-4">Analyse IA</h3> | |
| <div class="space-y-4"> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 h-10 w-10 rounded-full bg-indigo-100 flex items-center justify-center"> | |
| <i class="fas fa-brain text-indigo-600"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <h4 class="text-sm font-medium text-gray-900">Correspondance des compétences</h4> | |
| <p class="mt-1 text-sm text-gray-500">L'IA identifie les offres qui correspondent à au moins 70% de vos compétences principales.</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 h-10 w-10 rounded-full bg-indigo-100 flex items-center justify-center"> | |
| <i class="fas fa-chart-line text-indigo-600"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <h4 class="text-sm font-medium text-gray-900">Niveau d'expérience</h4> | |
| <p class="mt-1 text-sm text-gray-500">Les offres sont filtrées pour correspondre à votre niveau d'expérience.</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 h-10 w-10 rounded-full bg-indigo-100 flex items-center justify-center"> | |
| <i class="fas fa-sliders-h text-indigo-600"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <h4 class="text-sm font-medium text-gray-900">Préférences personnelles</h4> | |
| <p class="mt-1 text-sm text-gray-500">Les critères comme le salaire, le type de contrat et le télétravail sont strictement respectés.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- WhatsApp Integration --> | |
| <div class="gradient-bg text-white py-16"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="lg:grid lg:grid-cols-2 lg:gap-8 items-center"> | |
| <div class="mb-8 lg:mb-0"> | |
| <h2 class="text-3xl font-extrabold tracking-tight sm:text-4xl"> | |
| Recevez les offres directement sur WhatsApp | |
| </h2> | |
| <p class="mt-4 max-w-3xl text-xl"> | |
| Plus besoin de vérifier vos emails ou de visiter les sites d'emploi. Recevez instantanément les offres pertinentes sur votre téléphone. | |
| </p> | |
| <div class="mt-8"> | |
| <div class="inline-flex rounded-md shadow"> | |
| <a href="#" class="inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-indigo-700 bg-white hover:bg-gray-50"> | |
| <i class="fab fa-whatsapp mr-2 text-xl"></i> Activer les notifications | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="relative"> | |
| <div class="relative mx-auto border-8 border-gray-800 rounded-3xl overflow-hidden" style="width: 250px;"> | |
| <div class="bg-gray-100 h-8 flex items-center px-2"> | |
| <div class="flex space-x-1"> | |
| <div class="w-3 h-3 rounded-full bg-red-500"></div> | |
| <div class="w-3 h-3 rounded-full bg-yellow-500"></div> | |
| <div class="w-3 h-3 rounded-full bg-green-500"></div> | |
| </div> | |
| </div> | |
| <div class="bg-gray-200 h-96 p-4"> | |
| <div class="space-y-3"> | |
| <div class="bg-white p-3 rounded-lg max-w-xs"> | |
| <p class="text-sm">Bonjour! Voici une nouvelle offre qui pourrait vous intéresser:</p> | |
| </div> | |
| <div class="bg-indigo-100 p-3 rounded-lg max-w-xs ml-auto"> | |
| <p class="text-sm font-medium">Développeur Full Stack (React/Node) - Remote</p> | |
| <p class="text-xs mt-1">Salaire: 50-60k€ • CDI • 100% remote</p> | |
| <div class="mt-2 flex justify-end"> | |
| <button class="text-xs bg-indigo-600 text-white px-2 py-1 rounded">Voir l'offre</button> | |
| </div> | |
| </div> | |
| <div class="bg-white p-3 rounded-lg max-w-xs"> | |
| <p class="text-sm">Correspondance: 85% avec votre profil</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Job Listings Preview --> | |
| <div class="bg-gray-50 py-16"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="lg:text-center mb-12"> | |
| <h2 class="text-base text-indigo-600 font-semibold tracking-wide uppercase">Offres récentes</h2> | |
| <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl"> | |
| Exemples d'offres trouvées par notre IA | |
| </p> | |
| <p class="mt-4 max-w-2xl text-xl text-gray-500 lg:mx-auto"> | |
| Voici quelques offres que notre système a récemment recommandées à des utilisateurs. | |
| </p> | |
| </div> | |
| <div class="grid gap-6 md:grid-cols-2 lg:grid-cols-3"> | |
| <!-- Job Card 1 --> | |
| <div class="job-card bg-white overflow-hidden shadow rounded-lg transition duration-300 ease-in-out"> | |
| <div class="px-4 py-5 sm:p-6"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 bg-indigo-500 rounded-md p-3"> | |
| <i class="fas fa-laptop-code text-white text-xl"></i> | |
| </div> | |
| <div class="ml-5 w-0 flex-1"> | |
| <div class="flex justify-between"> | |
| <h3 class="text-lg font-medium text-gray-900">Développeur Full Stack</h3> | |
| <span class="px-2 py-1 text-xs font-medium bg-green-100 text-green-800 rounded-full">Nouveau</span> | |
| </div> | |
| <p class="mt-1 text-sm text-gray-500">TechStart • Paris (Remote possible)</p> | |
| </div> | |
| </div> | |
| <div class="mt-4"> | |
| <div class="flex flex-wrap gap-2"> | |
| <span class="px-2 py-1 rounded-full text-xs font-medium bg-indigo-100 text-indigo-800">React</span> | |
| <span class="px-2 py-1 rounded-full text-xs font-medium bg-indigo-100 text-indigo-800">Node.js</span> | |
| <span class="px-2 py-1 rounded-full text-xs font-medium bg-indigo-100 text-indigo-800">TypeScript</span> | |
| </div> | |
| </div> | |
| <div class="mt-4 flex justify-between items-center"> | |
| <div> | |
| <span class="text-sm font-medium text-gray-900">50-65k€</span> | |
| <span class="mx-1 text-gray-500">•</span> | |
| <span class="text-sm text-gray-500">CDI</span> | |
| </div> | |
| <button class="text-sm font-medium text-indigo-600 hover:text-indigo-500">Voir l'offre →</button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Job Card 2 --> | |
| <div class="job-card bg-white overflow-hidden shadow rounded-lg transition duration-300 ease-in-out"> | |
| <div class="px-4 py-5 sm:p-6"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 bg-indigo-500 rounded-md p-3"> | |
| <i class="fas fa-mobile-alt text-white text-xl"></i> | |
| </div> | |
| <div class="ml-5 w-0 flex-1"> | |
| <div class="flex justify-between"> | |
| <h3 class="text-lg font-medium text-gray-900">Développeur Mobile</h3> | |
| <span class="px-2 py-1 text-xs font-medium bg-yellow-100 text-yellow-800 rounded-full">Urgent</span> | |
| </div> | |
| <p class="mt-1 text-sm text-gray-500">AppInnov • 100% Remote</p> | |
| </div> | |
| </div> | |
| <div class="mt-4"> | |
| <div class="flex flex-wrap gap-2"> | |
| <span class="px-2 py-1 rounded-full text-xs font-medium bg-indigo-100 text-indigo-800">React Native</span> | |
| <span class="px-2 py-1 rounded-full text-xs font-medium bg-indigo-100 text-indigo-800">TypeScript</span> | |
| <span class="px-2 py-1 rounded-full text-xs font-medium bg-indigo-100 text-indigo-800">GraphQL</span> | |
| </div> | |
| </div> | |
| <div class="mt-4 flex justify-between items-center"> | |
| <div> | |
| <span class="text-sm font-medium text-gray-900">45-60k€</span> | |
| <span class="mx-1 text-gray-500">•</span> | |
| <span class="text-sm text-gray-500">CDI</span> | |
| </div> | |
| <button class="text-sm font-medium text-indigo-600 hover:text-indigo-500">Voir l'offre →</button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Job Card 3 --> | |
| <div class="job-card bg-white overflow-hidden shadow rounded-lg transition duration-300 ease-in-out"> | |
| <div class="px-4 py-5 sm:p-6"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 bg-indigo-500 rounded-md p-3"> | |
| <i class="fas fa-database text-white text-xl"></i> | |
| </div> | |
| <div class="ml-5 w-0 flex-1"> | |
| <h3 class="text-lg font-medium text-gray-900">Data Engineer</h3> | |
| <p class="mt-1 text-sm text-gray-500">DataSystems • Lyon (Hybride)</p> | |
| </div> | |
| </div> | |
| <div class="mt-4"> | |
| <div class="flex flex-wrap gap-2"> | |
| <span class="px-2 py-1 rounded-full text-xs font-medium bg-indigo-100 text-indigo-800">Python</span> | |
| <span class="px-2 py-1 rounded-full text-xs font-medium bg-indigo-100 text-indigo-800">SQL</span> | |
| <span class="px-2 py-1 rounded-full text-xs font-medium bg-indigo-100 text-indigo-800">Spark</span> | |
| <span class="px-2 py-1 rounded-full text-xs font-medium bg-indigo-100 text-indigo-800">AWS</span> | |
| </div> | |
| </div> | |
| <div class="mt-4 flex justify-between items-center"> | |
| <div> | |
| <span class="text-sm font-medium text-gray-900">55-70k€</span> | |
| <span class="mx-1 text-gray-500">•</span> | |
| <span class="text-sm text-gray-500">CDI</span> | |
| </div> | |
| <button class="text-sm font-medium text-indigo-600 hover:text-indigo-500">Voir l'offre →</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-12 text-center"> | |
| <a href="#" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"> | |
| Voir plus d'offres | |
| <i class="fas fa-arrow-right ml-2"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Testimonials --> | |
| <div class="bg-white py-16"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="lg:text-center mb-12"> | |
| <h2 class="text-base text-indigo-600 font-semibold tracking-wide uppercase">Témoignages</h2> | |
| <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl"> | |
| Ce que nos utilisateurs disent | |
| </p> | |
| </div> | |
| <div class="grid gap-8 md:grid-cols-2 lg:grid-cols-3"> | |
| <!-- Testimonial 1 --> | |
| <div class="bg-gray-50 p-6 rounded-lg"> | |
| <div class="flex items-center mb-4"> | |
| <div class="flex-shrink-0"> | |
| <img class="h-10 w-10 rounded-full" src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="Sarah"> | |
| </div> | |
| <div class="ml-4"> | |
| <h4 class="text-sm font-medium text-gray-900">Sarah D.</h4> | |
| <div class="flex mt-1"> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <p class="text-gray-600"> | |
| "J'ai trouvé mon emploi idéal en moins de 2 semaines grâce à JobFinder AI. Les offres proposées correspondaient parfaitement à mon profil et à mes attentes." | |
| </p> | |
| </div> | |
| <!-- Testimonial 2 --> | |
| <div class="bg-gray-50 p-6 rounded-lg"> | |
| <div class="flex items-center mb-4"> | |
| <div class="flex-shrink-0"> | |
| <img class="h-10 w-10 rounded-full" src="https://images.unsplash.com/photo-1519244703995-f4e0f30006d5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="Pierre"> | |
| </div> | |
| <div class="ml-4"> | |
| <h4 class="text-sm font-medium text-gray-900">Pierre L.</h4> | |
| <div class="flex mt-1"> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <p class="text-gray-600"> | |
| "La fonctionnalité WhatsApp est révolutionnaire. Je reçois les offres directement sur mon téléphone et je peux postuler en quelques clics. Très efficace !" | |
| </p> | |
| </div> | |
| <!-- Testimonial 3 --> | |
| <div class="bg-gray-50 p-6 rounded-lg"> | |
| <div class="flex items-center mb-4"> | |
| <div class="flex-shrink-0"> | |
| <img class="h-10 w-10 rounded-full" src="https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="Thomas"> | |
| </div> | |
| <div class="ml-4"> | |
| <h4 class="text-sm font-medium text-gray-900">Thomas M.</h4> | |
| <div class="flex mt-1"> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <p class="text-gray-600"> | |
| "L'analyse de l'IA est impressionnante. Elle a identifié des compétences que je n'avais pas mentionnées mais qui étaient implicites dans mon expérience. Résultat : des offres encore plus pertinentes !" | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- CTA Section --> | |
| <div class="gradient-bg"> | |
| <div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:py-16 lg:px-8 lg:flex lg:items-center lg:justify-between"> | |
| <h2 class="text-3xl font-extrabold tracking-tight text-white sm:text-4xl"> | |
| <span class="block">Prêt à trouver votre emploi idéal ?</span> | |
| <span class="block text-indigo-200">Essayez JobFinder AI gratuitement pendant 14 jours.</span> | |
| </h2> | |
| <div class="mt-8 flex lg:mt-0 lg:flex-shrink-0"> | |
| <div class="inline-flex rounded-md shadow"> | |
| <a href="#" class="inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-indigo-600 bg-white hover:bg-gray-50"> | |
| Commencer maintenant | |
| </a> | |
| </div> | |
| <div class="ml-3 inline-flex rounded-md shadow"> | |
| <a href="#" class="inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-white bg-indigo-500 bg-opacity-60 hover:bg-opacity-70"> | |
| <i class="fas fa-play-circle mr-2"></i> Voir la démo | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Footer --> | |
| <footer class="bg-gray-800"> | |
| <div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:py-16 lg:px-8"> | |
| <div class="xl:grid xl:grid-cols-3 xl:gap-8"> | |
| <div class="space-y-8 xl:col-span-1"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-robot text-indigo-500 text-2xl mr-2"></i> | |
| <span class="text-xl font-bold text-white">JobFinder AI</span> | |
| </div> | |
| <p class="text-gray-300 text-base"> | |
| L'outil de recherche d'emploi intelligent qui utilise l'IA pour trouver les offres parfaitement adaptées à votre profil. | |
| </p> | |
| <div class="flex space-x-6"> | |
| <a href="#" class="text-gray-400 hover:text-white"> | |
| <i class="fab fa-twitter text-xl"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white"> | |
| <i class="fab fa-facebook text-xl"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white"> | |
| <i class="fab fa-linkedin text-xl"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <div class="mt-12 grid grid-cols-2 gap-8 xl:mt-0 xl:col-span-2"> | |
| <div class="md:grid md:grid-cols-2 md:gap-8"> | |
| <div> | |
| <h3 class="text-sm font-semibold text-gray-300 tracking-wider uppercase"> | |
| Solutions | |
| </h3> | |
| <ul class="mt-4 space-y-4"> | |
| <li> | |
| <a href="#" class="text-base text-gray-400 hover:text-white"> | |
| Pour les candidats | |
| </a> | |
| </li> | |
| <li> | |
| <a href="#" class="text-base text-gray-400 hover:text-white"> | |
| Pour les recruteurs | |
| </a> | |
| </li> | |
| <li> | |
| <a href="#" class="text-base text-gray-400 hover:text-white"> | |
| API | |
| </a> | |
| </li> | |
| </ul> | |
| </div> | |
| <div class="mt-12 md:mt-0"> | |
| <h3 class="text-sm font-semibold text-gray-300 tracking-wider uppercase"> | |
| Support | |
| </h3> | |
| <ul class="mt-4 space-y-4"> | |
| <li> | |
| <a href="#" class="text-base text-gray-400 hover:text-white"> | |
| Centre d'aide | |
| </a> | |
| </li> | |
| <li> | |
| <a href="#" class="text-base text-gray-400 hover:text-white"> | |
| Documentation | |
| </a> | |
| </li> | |
| <li> | |
| <a href="#" class="text-base text-gray-400 hover:text-white"> | |
| Contact | |
| </a> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="md:grid md:grid-cols-2 md:gap-8"> | |
| <div> | |
| <h3 class="text-sm font-semibold text-gray-300 tracking-wider uppercase"> | |
| Entreprise | |
| </h3> | |
| <ul class="mt-4 space-y-4"> | |
| <li> | |
| <a href="#" class="text-base text-gray-400 hover:text-white"> | |
| À propos | |
| </a> | |
| </li> | |
| <li> | |
| <a href="#" class="text-base text-gray-400 hover:text-white"> | |
| Blog | |
| </a> | |
| </li> | |
| <li> | |
| <a href="#" class="text-base text-gray-400 hover:text-white"> | |
| Carrières | |
| </a> | |
| </li> | |
| </ul> | |
| </div> | |
| <div class="mt-12 md:mt-0"> | |
| <h3 class="text-sm font-semibold text-gray-300 tracking-wider uppercase"> | |
| Légal | |
| </h3> | |
| <ul class="mt-4 space-y-4"> | |
| <li> | |
| <a href="#" class="text-base text-gray-400 hover:text-white"> | |
| Confidentialité | |
| </a> | |
| </li> | |
| <li> | |
| <a href="#" class="text-base text-gray-400 hover:text-white"> | |
| Conditions | |
| </a> | |
| </li> | |
| <li> | |
| <a href="#" class="text-base text-gray-400 hover:text-white"> | |
| Cookies | |
| </a> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-12 border-t border-gray-700 pt-8"> | |
| <p class="text-base text-gray-400 text-center"> | |
| © 2023 JobFinder AI. Tous droits réservés. | |
| </p> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Animation for job cards | |
| document.addEventListener('DOMContentLoaded', function() { | |
| const jobCards = document.querySelectorAll('.job-card'); | |
| jobCards.forEach(card => { | |
| card.addEventListener('mouseenter', function() { | |
| this.style.transition = 'all 0.3s ease'; | |
| }); | |
| card.addEventListener('mouseleave', function() { | |
| this.style.transition = 'all 0.3s ease'; | |
| }); | |
| }); | |
| // Simulate loading animation | |
| setTimeout(() => { | |
| document.querySelectorAll('.animate-pulse').forEach(el => { | |
| el.classList.remove('animate-pulse'); | |
| }); | |
| }, 2000); | |
| }); | |
| // Form submission | |
| const profileForm = document.querySelector('form'); | |
| if (profileForm) { | |
| profileForm.addEventListener('submit', function(e) { | |
| e.preventDefault(); | |
| alert('Profil enregistré avec succès ! Notre IA va maintenant rechercher les offres correspondantes.'); | |
| // Here you would typically send the data to your backend | |
| }); | |
| } | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=josephbasa/ia" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |