Hugging Face's logo

Spaces:
josephbasa
/
ia
Running

App Files Community
josephbasa commited on
Commit
6cb0050
·
verified ·
1 Parent(s): 9175e81

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

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +785 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Ia
3
- emoji: 🏢
4
- colorFrom: gray
5
- colorTo: pink
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: ia
3
+ emoji: 🐳
4
+ colorFrom: red
5
+ colorTo: blue
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,785 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="fr">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>JobFinder AI - Recherche intelligente d'emploi</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <style>
10
+ .gradient-bg {
11
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
12
+ }
13
+ .job-card:hover {
14
+ transform: translateY(-5px);
15
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
16
+ }
17
+ .animate-pulse {
18
+ animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
19
+ }
20
+ @keyframes pulse {
21
+ 0%, 100% { opacity: 1; }
22
+ 50% { opacity: 0.5; }
23
+ }
24
+ </style>
25
+ </head>
26
+ <body class="bg-gray-50 font-sans">
27
+ <!-- Navigation -->
28
+ <nav class="bg-white shadow-lg">
29
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
30
+ <div class="flex justify-between h-16">
31
+ <div class="flex items-center">
32
+ <div class="flex-shrink-0 flex items-center">
33
+ <i class="fas fa-robot text-indigo-600 text-2xl mr-2"></i>
34
+ <span class="text-xl font-bold text-gray-900">JobFinder AI</span>
35
+ </div>
36
+ </div>
37
+ <div class="hidden md:ml-6 md:flex md:items-center md:space-x-8">
38
+ <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>
39
+ <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>
40
+ <a href="#" class="text-gray-500 hover:text-gray-900 inline-flex items-center px-1 pt-1 text-sm font-medium">Tarifs</a>
41
+ <a href="#" class="text-gray-500 hover:text-gray-900 inline-flex items-center px-1 pt-1 text-sm font-medium">Contact</a>
42
+ </div>
43
+ <div class="flex items-center">
44
+ <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">
45
+ Se connecter
46
+ </button>
47
+ </div>
48
+ </div>
49
+ </div>
50
+ </nav>
51
+
52
+ <!-- Hero Section -->
53
+ <div class="gradient-bg text-white">
54
+ <div class="max-w-7xl mx-auto py-16 px-4 sm:py-24 sm:px-6 lg:px-8">
55
+ <div class="text-center">
56
+ <h1 class="text-4xl font-extrabold tracking-tight sm:text-5xl lg:text-6xl">
57
+ Trouvez votre emploi idéal avec l'IA
58
+ </h1>
59
+ <p class="mt-6 max-w-lg mx-auto text-xl">
60
+ Notre intelligence artificielle scanne des milliers d'offres et ne vous propose que celles qui correspondent vraiment à votre profil.
61
+ </p>
62
+ <div class="mt-10">
63
+ <div class="mt-10 sm:flex sm:justify-center">
64
+ <div class="rounded-md shadow">
65
+ <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">
66
+ Essai gratuit
67
+ </a>
68
+ </div>
69
+ <div class="mt-3 rounded-md shadow sm:mt-0 sm:ml-3">
70
+ <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">
71
+ Voir une démo
72
+ </a>
73
+ </div>
74
+ </div>
75
+ </div>
76
+ </div>
77
+ </div>
78
+ </div>
79
+
80
+ <!-- How it works -->
81
+ <div class="py-12 bg-white">
82
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
83
+ <div class="lg:text-center">
84
+ <h2 class="text-base text-indigo-600 font-semibold tracking-wide uppercase">Fonctionnement</h2>
85
+ <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl">
86
+ Une recherche d'emploi révolutionnaire
87
+ </p>
88
+ <p class="mt-4 max-w-2xl text-xl text-gray-500 lg:mx-auto">
89
+ Notre IA fait le travail difficile pour vous
90
+ </p>
91
+ </div>
92
+
93
+ <div class="mt-10">
94
+ <div class="space-y-10 md:space-y-0 md:grid md:grid-cols-3 md:gap-x-8 md:gap-y-10">
95
+ <div class="relative">
96
+ <div class="absolute flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white">
97
+ <i class="fas fa-user-tie text-xl"></i>
98
+ </div>
99
+ <p class="ml-16 text-lg leading-6 font-medium text-gray-900">1. Créez votre profil</p>
100
+ <p class="mt-2 ml-16 text-base text-gray-500">
101
+ Décrivez vos compétences, expériences et préférences. Notre IA apprend à vous connaître.
102
+ </p>
103
+ </div>
104
+
105
+ <div class="relative">
106
+ <div class="absolute flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white">
107
+ <i class="fas fa-search text-xl"></i>
108
+ </div>
109
+ <p class="ml-16 text-lg leading-6 font-medium text-gray-900">2. Scan automatique</p>
110
+ <p class="mt-2 ml-16 text-base text-gray-500">
111
+ Notre IA scanne en permanence des dizaines de sites d'emploi pour trouver les offres pertinentes.
112
+ </p>
113
+ </div>
114
+
115
+ <div class="relative">
116
+ <div class="absolute flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white">
117
+ <i class="fab fa-whatsapp text-xl"></i>
118
+ </div>
119
+ <p class="ml-16 text-lg leading-6 font-medium text-gray-900">3. Notifications WhatsApp</p>
120
+ <p class="mt-2 ml-16 text-base text-gray-500">
121
+ Recevez directement sur WhatsApp les offres qui correspondent à votre profil.
122
+ </p>
123
+ </div>
124
+ </div>
125
+ </div>
126
+ </div>
127
+ </div>
128
+
129
+ <!-- Profile Setup -->
130
+ <div class="bg-gray-50 py-16">
131
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
132
+ <div class="lg:text-center mb-12">
133
+ <h2 class="text-base text-indigo-600 font-semibold tracking-wide uppercase">Configuration</h2>
134
+ <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl">
135
+ Configurez votre profil
136
+ </p>
137
+ <p class="mt-4 max-w-2xl text-xl text-gray-500 lg:mx-auto">
138
+ Plus votre profil est précis, plus nos recommandations seront pertinentes.
139
+ </p>
140
+ </div>
141
+
142
+ <div class="bg-white shadow overflow-hidden sm:rounded-lg">
143
+ <div class="px-4 py-5 sm:px-6 border-b border-gray-200">
144
+ <h3 class="text-lg leading-6 font-medium text-gray-900">
145
+ Informations personnelles
146
+ </h3>
147
+ <p class="mt-1 max-w-2xl text-sm text-gray-500">
148
+ Ces informations aideront notre IA à mieux vous comprendre.
149
+ </p>
150
+ </div>
151
+ <div class="px-4 py-5 sm:p-6">
152
+ <form class="space-y-8 divide-y divide-gray-200">
153
+ <div class="space-y-8 divide-y divide-gray-200">
154
+ <div>
155
+ <div class="mt-6 grid grid-cols-1 gap-y-6 gap-x-4 sm:grid-cols-6">
156
+ <div class="sm:col-span-3">
157
+ <label for="first-name" class="block text-sm font-medium text-gray-700">Prénom</label>
158
+ <div class="mt-1">
159
+ <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">
160
+ </div>
161
+ </div>
162
+
163
+ <div class="sm:col-span-3">
164
+ <label for="last-name" class="block text-sm font-medium text-gray-700">Nom</label>
165
+ <div class="mt-1">
166
+ <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">
167
+ </div>
168
+ </div>
169
+
170
+ <div class="sm:col-span-4">
171
+ <label for="email" class="block text-sm font-medium text-gray-700">Email</label>
172
+ <div class="mt-1">
173
+ <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">
174
+ </div>
175
+ </div>
176
+
177
+ <div class="sm:col-span-4">
178
+ <label for="whatsapp" class="block text-sm font-medium text-gray-700">Numéro WhatsApp</label>
179
+ <div class="mt-1">
180
+ <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">
181
+ </div>
182
+ </div>
183
+
184
+ <div class="sm:col-span-6">
185
+ <label for="skills" class="block text-sm font-medium text-gray-700">Compétences (séparées par des virgules)</label>
186
+ <div class="mt-1">
187
+ <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>
188
+ </div>
189
+ <p class="mt-2 text-sm text-gray-500">Exemple: JavaScript, React, Node.js, Python</p>
190
+ </div>
191
+
192
+ <div class="sm:col-span-6">
193
+ <label for="experience" class="block text-sm font-medium text-gray-700">Expérience professionnelle</label>
194
+ <div class="mt-1">
195
+ <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>
196
+ </div>
197
+ </div>
198
+ </div>
199
+ </div>
200
+
201
+ <div class="pt-8">
202
+ <div>
203
+ <h3 class="text-lg leading-6 font-medium text-gray-900">
204
+ Préférences d'emploi
205
+ </h3>
206
+ <p class="mt-1 text-sm text-gray-500">
207
+ Ces informations nous aideront à filtrer les offres pour vous.
208
+ </p>
209
+ </div>
210
+ <div class="mt-6 grid grid-cols-1 gap-y-6 gap-x-4 sm:grid-cols-6">
211
+ <div class="sm:col-span-3">
212
+ <label for="job-title" class="block text-sm font-medium text-gray-700">Poste recherché</label>
213
+ <div class="mt-1">
214
+ <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">
215
+ </div>
216
+ </div>
217
+
218
+ <div class="sm:col-span-3">
219
+ <label for="location" class="block text-sm font-medium text-gray-700">Localisation</label>
220
+ <div class="mt-1">
221
+ <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">
222
+ </div>
223
+ </div>
224
+
225
+ <div class="sm:col-span-2">
226
+ <label for="salary" class="block text-sm font-medium text-gray-700">Salaire minimum (€)</label>
227
+ <div class="mt-1">
228
+ <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">
229
+ </div>
230
+ </div>
231
+
232
+ <div class="sm:col-span-2">
233
+ <label for="job-type" class="block text-sm font-medium text-gray-700">Type de contrat</label>
234
+ <div class="mt-1">
235
+ <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">
236
+ <option>Tous types</option>
237
+ <option>CDI</option>
238
+ <option>CDD</option>
239
+ <option>Freelance</option>
240
+ <option>Stage</option>
241
+ <option>Alternance</option>
242
+ </select>
243
+ </div>
244
+ </div>
245
+
246
+ <div class="sm:col-span-2">
247
+ <label for="remote" class="block text-sm font-medium text-gray-700">Télétravail</label>
248
+ <div class="mt-1">
249
+ <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">
250
+ <option>Peu importe</option>
251
+ <option>100% remote</option>
252
+ <option>Hybride</option>
253
+ <option>Sur site</option>
254
+ </select>
255
+ </div>
256
+ </div>
257
+ </div>
258
+ </div>
259
+ </div>
260
+
261
+ <div class="pt-5">
262
+ <div class="flex justify-end">
263
+ <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">
264
+ Annuler
265
+ </button>
266
+ <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">
267
+ Enregistrer
268
+ </button>
269
+ </div>
270
+ </div>
271
+ </form>
272
+ </div>
273
+ </div>
274
+ </div>
275
+ </div>
276
+
277
+ <!-- Job Matching Demo -->
278
+ <div class="bg-white py-16">
279
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
280
+ <div class="lg:text-center mb-12">
281
+ <h2 class="text-base text-indigo-600 font-semibold tracking-wide uppercase">Technologie</h2>
282
+ <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl">
283
+ Comment notre IA trouve vos offres parfaites
284
+ </p>
285
+ <p class="mt-4 max-w-2xl text-xl text-gray-500 lg:mx-auto">
286
+ Une analyse approfondie de votre profil et des offres disponibles
287
+ </p>
288
+ </div>
289
+
290
+ <div class="flex flex-col md:flex-row gap-8">
291
+ <div class="w-full md:w-1/2 bg-gray-50 p-6 rounded-lg">
292
+ <h3 class="text-lg font-medium text-gray-900 mb-4">Votre profil</h3>
293
+ <div class="space-y-4">
294
+ <div>
295
+ <h4 class="text-sm font-medium text-gray-500">Compétences principales</h4>
296
+ <div class="mt-2 flex flex-wrap gap-2">
297
+ <span class="px-2 py-1 rounded-full text-xs font-medium bg-indigo-100 text-indigo-800">JavaScript</span>
298
+ <span class="px-2 py-1 rounded-full text-xs font-medium bg-indigo-100 text-indigo-800">React</span>
299
+ <span class="px-2 py-1 rounded-full text-xs font-medium bg-indigo-100 text-indigo-800">Node.js</span>
300
+ <span class="px-2 py-1 rounded-full text-xs font-medium bg-indigo-100 text-indigo-800">MongoDB</span>
301
+ </div>
302
+ </div>
303
+ <div>
304
+ <h4 class="text-sm font-medium text-gray-500">Expérience</h4>
305
+ <p class="mt-2 text-sm text-gray-900">3 ans en tant que développeur Full Stack chez TechCorp</p>
306
+ </div>
307
+ <div>
308
+ <h4 class="text-sm font-medium text-gray-500">Préférences</h4>
309
+ <p class="mt-2 text-sm text-gray-900">CDI ou Freelance, 100% remote, salaire minimum 45k€</p>
310
+ </div>
311
+ </div>
312
+ </div>
313
+
314
+ <div class="w-full md:w-1/2 bg-gray-50 p-6 rounded-lg">
315
+ <h3 class="text-lg font-medium text-gray-900 mb-4">Analyse IA</h3>
316
+ <div class="space-y-4">
317
+ <div class="flex items-start">
318
+ <div class="flex-shrink-0 h-10 w-10 rounded-full bg-indigo-100 flex items-center justify-center">
319
+ <i class="fas fa-brain text-indigo-600"></i>
320
+ </div>
321
+ <div class="ml-4">
322
+ <h4 class="text-sm font-medium text-gray-900">Correspondance des compétences</h4>
323
+ <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>
324
+ </div>
325
+ </div>
326
+ <div class="flex items-start">
327
+ <div class="flex-shrink-0 h-10 w-10 rounded-full bg-indigo-100 flex items-center justify-center">
328
+ <i class="fas fa-chart-line text-indigo-600"></i>
329
+ </div>
330
+ <div class="ml-4">
331
+ <h4 class="text-sm font-medium text-gray-900">Niveau d'expérience</h4>
332
+ <p class="mt-1 text-sm text-gray-500">Les offres sont filtrées pour correspondre à votre niveau d'expérience.</p>
333
+ </div>
334
+ </div>
335
+ <div class="flex items-start">
336
+ <div class="flex-shrink-0 h-10 w-10 rounded-full bg-indigo-100 flex items-center justify-center">
337
+ <i class="fas fa-sliders-h text-indigo-600"></i>
338
+ </div>
339
+ <div class="ml-4">
340
+ <h4 class="text-sm font-medium text-gray-900">Préférences personnelles</h4>
341
+ <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>
342
+ </div>
343
+ </div>
344
+ </div>
345
+ </div>
346
+ </div>
347
+ </div>
348
+ </div>
349
+
350
+ <!-- WhatsApp Integration -->
351
+ <div class="gradient-bg text-white py-16">
352
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
353
+ <div class="lg:grid lg:grid-cols-2 lg:gap-8 items-center">
354
+ <div class="mb-8 lg:mb-0">
355
+ <h2 class="text-3xl font-extrabold tracking-tight sm:text-4xl">
356
+ Recevez les offres directement sur WhatsApp
357
+ </h2>
358
+ <p class="mt-4 max-w-3xl text-xl">
359
+ 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.
360
+ </p>
361
+ <div class="mt-8">
362
+ <div class="inline-flex rounded-md shadow">
363
+ <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">
364
+ <i class="fab fa-whatsapp mr-2 text-xl"></i> Activer les notifications
365
+ </a>
366
+ </div>
367
+ </div>
368
+ </div>
369
+ <div class="relative">
370
+ <div class="relative mx-auto border-8 border-gray-800 rounded-3xl overflow-hidden" style="width: 250px;">
371
+ <div class="bg-gray-100 h-8 flex items-center px-2">
372
+ <div class="flex space-x-1">
373
+ <div class="w-3 h-3 rounded-full bg-red-500"></div>
374
+ <div class="w-3 h-3 rounded-full bg-yellow-500"></div>
375
+ <div class="w-3 h-3 rounded-full bg-green-500"></div>
376
+ </div>
377
+ </div>
378
+ <div class="bg-gray-200 h-96 p-4">
379
+ <div class="space-y-3">
380
+ <div class="bg-white p-3 rounded-lg max-w-xs">
381
+ <p class="text-sm">Bonjour! Voici une nouvelle offre qui pourrait vous intéresser:</p>
382
+ </div>
383
+ <div class="bg-indigo-100 p-3 rounded-lg max-w-xs ml-auto">
384
+ <p class="text-sm font-medium">Développeur Full Stack (React/Node) - Remote</p>
385
+ <p class="text-xs mt-1">Salaire: 50-60k€ • CDI • 100% remote</p>
386
+ <div class="mt-2 flex justify-end">
387
+ <button class="text-xs bg-indigo-600 text-white px-2 py-1 rounded">Voir l'offre</button>
388
+ </div>
389
+ </div>
390
+ <div class="bg-white p-3 rounded-lg max-w-xs">
391
+ <p class="text-sm">Correspondance: 85% avec votre profil</p>
392
+ </div>
393
+ </div>
394
+ </div>
395
+ </div>
396
+ </div>
397
+ </div>
398
+ </div>
399
+ </div>
400
+
401
+ <!-- Job Listings Preview -->
402
+ <div class="bg-gray-50 py-16">
403
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
404
+ <div class="lg:text-center mb-12">
405
+ <h2 class="text-base text-indigo-600 font-semibold tracking-wide uppercase">Offres récentes</h2>
406
+ <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl">
407
+ Exemples d'offres trouvées par notre IA
408
+ </p>
409
+ <p class="mt-4 max-w-2xl text-xl text-gray-500 lg:mx-auto">
410
+ Voici quelques offres que notre système a récemment recommandées à des utilisateurs.
411
+ </p>
412
+ </div>
413
+
414
+ <div class="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
415
+ <!-- Job Card 1 -->
416
+ <div class="job-card bg-white overflow-hidden shadow rounded-lg transition duration-300 ease-in-out">
417
+ <div class="px-4 py-5 sm:p-6">
418
+ <div class="flex items-center">
419
+ <div class="flex-shrink-0 bg-indigo-500 rounded-md p-3">
420
+ <i class="fas fa-laptop-code text-white text-xl"></i>
421
+ </div>
422
+ <div class="ml-5 w-0 flex-1">
423
+ <div class="flex justify-between">
424
+ <h3 class="text-lg font-medium text-gray-900">Développeur Full Stack</h3>
425
+ <span class="px-2 py-1 text-xs font-medium bg-green-100 text-green-800 rounded-full">Nouveau</span>
426
+ </div>
427
+ <p class="mt-1 text-sm text-gray-500">TechStart • Paris (Remote possible)</p>
428
+ </div>
429
+ </div>
430
+ <div class="mt-4">
431
+ <div class="flex flex-wrap gap-2">
432
+ <span class="px-2 py-1 rounded-full text-xs font-medium bg-indigo-100 text-indigo-800">React</span>
433
+ <span class="px-2 py-1 rounded-full text-xs font-medium bg-indigo-100 text-indigo-800">Node.js</span>
434
+ <span class="px-2 py-1 rounded-full text-xs font-medium bg-indigo-100 text-indigo-800">TypeScript</span>
435
+ </div>
436
+ </div>
437
+ <div class="mt-4 flex justify-between items-center">
438
+ <div>
439
+ <span class="text-sm font-medium text-gray-900">50-65k€</span>
440
+ <span class="mx-1 text-gray-500">•</span>
441
+ <span class="text-sm text-gray-500">CDI</span>
442
+ </div>
443
+ <button class="text-sm font-medium text-indigo-600 hover:text-indigo-500">Voir l'offre →</button>
444
+ </div>
445
+ </div>
446
+ </div>
447
+
448
+ <!-- Job Card 2 -->
449
+ <div class="job-card bg-white overflow-hidden shadow rounded-lg transition duration-300 ease-in-out">
450
+ <div class="px-4 py-5 sm:p-6">
451
+ <div class="flex items-center">
452
+ <div class="flex-shrink-0 bg-indigo-500 rounded-md p-3">
453
+ <i class="fas fa-mobile-alt text-white text-xl"></i>
454
+ </div>
455
+ <div class="ml-5 w-0 flex-1">
456
+ <div class="flex justify-between">
457
+ <h3 class="text-lg font-medium text-gray-900">Développeur Mobile</h3>
458
+ <span class="px-2 py-1 text-xs font-medium bg-yellow-100 text-yellow-800 rounded-full">Urgent</span>
459
+ </div>
460
+ <p class="mt-1 text-sm text-gray-500">AppInnov • 100% Remote</p>
461
+ </div>
462
+ </div>
463
+ <div class="mt-4">
464
+ <div class="flex flex-wrap gap-2">
465
+ <span class="px-2 py-1 rounded-full text-xs font-medium bg-indigo-100 text-indigo-800">React Native</span>
466
+ <span class="px-2 py-1 rounded-full text-xs font-medium bg-indigo-100 text-indigo-800">TypeScript</span>
467
+ <span class="px-2 py-1 rounded-full text-xs font-medium bg-indigo-100 text-indigo-800">GraphQL</span>
468
+ </div>
469
+ </div>
470
+ <div class="mt-4 flex justify-between items-center">
471
+ <div>
472
+ <span class="text-sm font-medium text-gray-900">45-60k€</span>
473
+ <span class="mx-1 text-gray-500">•</span>
474
+ <span class="text-sm text-gray-500">CDI</span>
475
+ </div>
476
+ <button class="text-sm font-medium text-indigo-600 hover:text-indigo-500">Voir l'offre →</button>
477
+ </div>
478
+ </div>
479
+ </div>
480
+
481
+ <!-- Job Card 3 -->
482
+ <div class="job-card bg-white overflow-hidden shadow rounded-lg transition duration-300 ease-in-out">
483
+ <div class="px-4 py-5 sm:p-6">
484
+ <div class="flex items-center">
485
+ <div class="flex-shrink-0 bg-indigo-500 rounded-md p-3">
486
+ <i class="fas fa-database text-white text-xl"></i>
487
+ </div>
488
+ <div class="ml-5 w-0 flex-1">
489
+ <h3 class="text-lg font-medium text-gray-900">Data Engineer</h3>
490
+ <p class="mt-1 text-sm text-gray-500">DataSystems • Lyon (Hybride)</p>
491
+ </div>
492
+ </div>
493
+ <div class="mt-4">
494
+ <div class="flex flex-wrap gap-2">
495
+ <span class="px-2 py-1 rounded-full text-xs font-medium bg-indigo-100 text-indigo-800">Python</span>
496
+ <span class="px-2 py-1 rounded-full text-xs font-medium bg-indigo-100 text-indigo-800">SQL</span>
497
+ <span class="px-2 py-1 rounded-full text-xs font-medium bg-indigo-100 text-indigo-800">Spark</span>
498
+ <span class="px-2 py-1 rounded-full text-xs font-medium bg-indigo-100 text-indigo-800">AWS</span>
499
+ </div>
500
+ </div>
501
+ <div class="mt-4 flex justify-between items-center">
502
+ <div>
503
+ <span class="text-sm font-medium text-gray-900">55-70k€</span>
504
+ <span class="mx-1 text-gray-500">•</span>
505
+ <span class="text-sm text-gray-500">CDI</span>
506
+ </div>
507
+ <button class="text-sm font-medium text-indigo-600 hover:text-indigo-500">Voir l'offre →</button>
508
+ </div>
509
+ </div>
510
+ </div>
511
+ </div>
512
+
513
+ <div class="mt-12 text-center">
514
+ <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">
515
+ Voir plus d'offres
516
+ <i class="fas fa-arrow-right ml-2"></i>
517
+ </a>
518
+ </div>
519
+ </div>
520
+ </div>
521
+
522
+ <!-- Testimonials -->
523
+ <div class="bg-white py-16">
524
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
525
+ <div class="lg:text-center mb-12">
526
+ <h2 class="text-base text-indigo-600 font-semibold tracking-wide uppercase">Témoignages</h2>
527
+ <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl">
528
+ Ce que nos utilisateurs disent
529
+ </p>
530
+ </div>
531
+
532
+ <div class="grid gap-8 md:grid-cols-2 lg:grid-cols-3">
533
+ <!-- Testimonial 1 -->
534
+ <div class="bg-gray-50 p-6 rounded-lg">
535
+ <div class="flex items-center mb-4">
536
+ <div class="flex-shrink-0">
537
+ <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">
538
+ </div>
539
+ <div class="ml-4">
540
+ <h4 class="text-sm font-medium text-gray-900">Sarah D.</h4>
541
+ <div class="flex mt-1">
542
+ <i class="fas fa-star text-yellow-400"></i>
543
+ <i class="fas fa-star text-yellow-400"></i>
544
+ <i class="fas fa-star text-yellow-400"></i>
545
+ <i class="fas fa-star text-yellow-400"></i>
546
+ <i class="fas fa-star text-yellow-400"></i>
547
+ </div>
548
+ </div>
549
+ </div>
550
+ <p class="text-gray-600">
551
+ "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."
552
+ </p>
553
+ </div>
554
+
555
+ <!-- Testimonial 2 -->
556
+ <div class="bg-gray-50 p-6 rounded-lg">
557
+ <div class="flex items-center mb-4">
558
+ <div class="flex-shrink-0">
559
+ <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">
560
+ </div>
561
+ <div class="ml-4">
562
+ <h4 class="text-sm font-medium text-gray-900">Pierre L.</h4>
563
+ <div class="flex mt-1">
564
+ <i class="fas fa-star text-yellow-400"></i>
565
+ <i class="fas fa-star text-yellow-400"></i>
566
+ <i class="fas fa-star text-yellow-400"></i>
567
+ <i class="fas fa-star text-yellow-400"></i>
568
+ <i class="fas fa-star text-yellow-400"></i>
569
+ </div>
570
+ </div>
571
+ </div>
572
+ <p class="text-gray-600">
573
+ "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 !"
574
+ </p>
575
+ </div>
576
+
577
+ <!-- Testimonial 3 -->
578
+ <div class="bg-gray-50 p-6 rounded-lg">
579
+ <div class="flex items-center mb-4">
580
+ <div class="flex-shrink-0">
581
+ <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">
582
+ </div>
583
+ <div class="ml-4">
584
+ <h4 class="text-sm font-medium text-gray-900">Thomas M.</h4>
585
+ <div class="flex mt-1">
586
+ <i class="fas fa-star text-yellow-400"></i>
587
+ <i class="fas fa-star text-yellow-400"></i>
588
+ <i class="fas fa-star text-yellow-400"></i>
589
+ <i class="fas fa-star text-yellow-400"></i>
590
+ <i class="fas fa-star text-yellow-400"></i>
591
+ </div>
592
+ </div>
593
+ </div>
594
+ <p class="text-gray-600">
595
+ "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 !"
596
+ </p>
597
+ </div>
598
+ </div>
599
+ </div>
600
+ </div>
601
+
602
+ <!-- CTA Section -->
603
+ <div class="gradient-bg">
604
+ <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">
605
+ <h2 class="text-3xl font-extrabold tracking-tight text-white sm:text-4xl">
606
+ <span class="block">Prêt à trouver votre emploi idéal ?</span>
607
+ <span class="block text-indigo-200">Essayez JobFinder AI gratuitement pendant 14 jours.</span>
608
+ </h2>
609
+ <div class="mt-8 flex lg:mt-0 lg:flex-shrink-0">
610
+ <div class="inline-flex rounded-md shadow">
611
+ <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">
612
+ Commencer maintenant
613
+ </a>
614
+ </div>
615
+ <div class="ml-3 inline-flex rounded-md shadow">
616
+ <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">
617
+ <i class="fas fa-play-circle mr-2"></i> Voir la démo
618
+ </a>
619
+ </div>
620
+ </div>
621
+ </div>
622
+ </div>
623
+
624
+ <!-- Footer -->
625
+ <footer class="bg-gray-800">
626
+ <div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:py-16 lg:px-8">
627
+ <div class="xl:grid xl:grid-cols-3 xl:gap-8">
628
+ <div class="space-y-8 xl:col-span-1">
629
+ <div class="flex items-center">
630
+ <i class="fas fa-robot text-indigo-500 text-2xl mr-2"></i>
631
+ <span class="text-xl font-bold text-white">JobFinder AI</span>
632
+ </div>
633
+ <p class="text-gray-300 text-base">
634
+ L'outil de recherche d'emploi intelligent qui utilise l'IA pour trouver les offres parfaitement adaptées à votre profil.
635
+ </p>
636
+ <div class="flex space-x-6">
637
+ <a href="#" class="text-gray-400 hover:text-white">
638
+ <i class="fab fa-twitter text-xl"></i>
639
+ </a>
640
+ <a href="#" class="text-gray-400 hover:text-white">
641
+ <i class="fab fa-facebook text-xl"></i>
642
+ </a>
643
+ <a href="#" class="text-gray-400 hover:text-white">
644
+ <i class="fab fa-linkedin text-xl"></i>
645
+ </a>
646
+ </div>
647
+ </div>
648
+ <div class="mt-12 grid grid-cols-2 gap-8 xl:mt-0 xl:col-span-2">
649
+ <div class="md:grid md:grid-cols-2 md:gap-8">
650
+ <div>
651
+ <h3 class="text-sm font-semibold text-gray-300 tracking-wider uppercase">
652
+ Solutions
653
+ </h3>
654
+ <ul class="mt-4 space-y-4">
655
+ <li>
656
+ <a href="#" class="text-base text-gray-400 hover:text-white">
657
+ Pour les candidats
658
+ </a>
659
+ </li>
660
+ <li>
661
+ <a href="#" class="text-base text-gray-400 hover:text-white">
662
+ Pour les recruteurs
663
+ </a>
664
+ </li>
665
+ <li>
666
+ <a href="#" class="text-base text-gray-400 hover:text-white">
667
+ API
668
+ </a>
669
+ </li>
670
+ </ul>
671
+ </div>
672
+ <div class="mt-12 md:mt-0">
673
+ <h3 class="text-sm font-semibold text-gray-300 tracking-wider uppercase">
674
+ Support
675
+ </h3>
676
+ <ul class="mt-4 space-y-4">
677
+ <li>
678
+ <a href="#" class="text-base text-gray-400 hover:text-white">
679
+ Centre d'aide
680
+ </a>
681
+ </li>
682
+ <li>
683
+ <a href="#" class="text-base text-gray-400 hover:text-white">
684
+ Documentation
685
+ </a>
686
+ </li>
687
+ <li>
688
+ <a href="#" class="text-base text-gray-400 hover:text-white">
689
+ Contact
690
+ </a>
691
+ </li>
692
+ </ul>
693
+ </div>
694
+ </div>
695
+ <div class="md:grid md:grid-cols-2 md:gap-8">
696
+ <div>
697
+ <h3 class="text-sm font-semibold text-gray-300 tracking-wider uppercase">
698
+ Entreprise
699
+ </h3>
700
+ <ul class="mt-4 space-y-4">
701
+ <li>
702
+ <a href="#" class="text-base text-gray-400 hover:text-white">
703
+ À propos
704
+ </a>
705
+ </li>
706
+ <li>
707
+ <a href="#" class="text-base text-gray-400 hover:text-white">
708
+ Blog
709
+ </a>
710
+ </li>
711
+ <li>
712
+ <a href="#" class="text-base text-gray-400 hover:text-white">
713
+ Carrières
714
+ </a>
715
+ </li>
716
+ </ul>
717
+ </div>
718
+ <div class="mt-12 md:mt-0">
719
+ <h3 class="text-sm font-semibold text-gray-300 tracking-wider uppercase">
720
+ Légal
721
+ </h3>
722
+ <ul class="mt-4 space-y-4">
723
+ <li>
724
+ <a href="#" class="text-base text-gray-400 hover:text-white">
725
+ Confidentialité
726
+ </a>
727
+ </li>
728
+ <li>
729
+ <a href="#" class="text-base text-gray-400 hover:text-white">
730
+ Conditions
731
+ </a>
732
+ </li>
733
+ <li>
734
+ <a href="#" class="text-base text-gray-400 hover:text-white">
735
+ Cookies
736
+ </a>
737
+ </li>
738
+ </ul>
739
+ </div>
740
+ </div>
741
+ </div>
742
+ </div>
743
+ <div class="mt-12 border-t border-gray-700 pt-8">
744
+ <p class="text-base text-gray-400 text-center">
745
+ &copy; 2023 JobFinder AI. Tous droits réservés.
746
+ </p>
747
+ </div>
748
+ </div>
749
+ </footer>
750
+
751
+ <script>
752
+ // Animation for job cards
753
+ document.addEventListener('DOMContentLoaded', function() {
754
+ const jobCards = document.querySelectorAll('.job-card');
755
+
756
+ jobCards.forEach(card => {
757
+ card.addEventListener('mouseenter', function() {
758
+ this.style.transition = 'all 0.3s ease';
759
+ });
760
+
761
+ card.addEventListener('mouseleave', function() {
762
+ this.style.transition = 'all 0.3s ease';
763
+ });
764
+ });
765
+
766
+ // Simulate loading animation
767
+ setTimeout(() => {
768
+ document.querySelectorAll('.animate-pulse').forEach(el => {
769
+ el.classList.remove('animate-pulse');
770
+ });
771
+ }, 2000);
772
+ });
773
+
774
+ // Form submission
775
+ const profileForm = document.querySelector('form');
776
+ if (profileForm) {
777
+ profileForm.addEventListener('submit', function(e) {
778
+ e.preventDefault();
779
+ alert('Profil enregistré avec succès ! Notre IA va maintenant rechercher les offres correspondantes.');
780
+ // Here you would typically send the data to your backend
781
+ });
782
+ }
783
+ </script>
784
+ <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>
785
+ </html>