Hugging Face's logo

Spaces:
enzostvs
/
deepsite
Running

App Files Community
118

Rename index.html to abiba/index.html

#101
by Madaliou - opened
base: refs/heads/main
←
from: refs/pr/101
Discussion Files changed
+557
-29
Files changed (2) hide show
  1. abiba/index.html +557 -0
  2. index.html +0 -29
abiba/index.html ADDED
@@ -0,0 +1,557 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>Professeur ABIBA - Marabout Voyant Médium</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
+ .hero-bg {
11
+ background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('https://images.unsplash.com/photo-1518709268805-4e9042af9f23?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1684&q=80');
12
+ background-size: cover;
13
+ background-position: center;
14
+ }
15
+
16
+ .service-card:hover {
17
+ transform: translateY(-10px);
18
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
19
+ }
20
+
21
+ .testimonial-card {
22
+ background: rgba(255, 255, 255, 0.1);
23
+ backdrop-filter: blur(10px);
24
+ }
25
+
26
+ .floating-button {
27
+ animation: float 3s ease-in-out infinite;
28
+ }
29
+
30
+ @keyframes float {
31
+ 0% { transform: translateY(0px); }
32
+ 50% { transform: translateY(-15px); }
33
+ 100% { transform: translateY(0px); }
34
+ }
35
+
36
+ .crystal-ball {
37
+ position: relative;
38
+ }
39
+
40
+ .crystal-ball::before {
41
+ content: '';
42
+ position: absolute;
43
+ top: 0;
44
+ left: 0;
45
+ width: 100%;
46
+ height: 100%;
47
+ background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.8), transparent 70%);
48
+ border-radius: 50%;
49
+ filter: blur(5px);
50
+ animation: shine 5s infinite alternate;
51
+ }
52
+
53
+ @keyframes shine {
54
+ 0% { transform: scale(0.9); opacity: 0.7; }
55
+ 100% { transform: scale(1.1); opacity: 0.9; }
56
+ }
57
+ </style>
58
+ </head>
59
+ <body class="bg-gray-900 text-white font-sans">
60
+ <!-- Header -->
61
+ <header class="fixed w-full z-50 bg-black bg-opacity-90 shadow-lg">
62
+ <div class="container mx-auto px-4 py-3 flex justify-between items-center">
63
+ <div class="flex items-center space-x-2">
64
+ <div class="w-10 h-10 rounded-full bg-purple-600 flex items-center justify-center">
65
+ <i class="fas fa-moon text-white text-xl"></i>
66
+ </div>
67
+ <h1 class="text-xl font-bold bg-gradient-to-r from-purple-400 to-pink-500 bg-clip-text text-transparent">Professeur ABIBA</h1>
68
+ </div>
69
+
70
+ <nav class="hidden md:flex space-x-8">
71
+ <a href="#accueil" class="hover:text-purple-400 transition">Accueil</a>
72
+ <a href="#services" class="hover:text-purple-400 transition">Services</a>
73
+ <a href="#a-propos" class="hover:text-purple-400 transition">À propos</a>
74
+ <a href="#temoignages" class="hover:text-purple-400 transition">Témoignages</a>
75
+ <a href="#contact" class="hover:text-purple-400 transition">Contact</a>
76
+ </nav>
77
+
78
+ <div class="md:hidden">
79
+ <button id="menu-btn" class="text-white focus:outline-none">
80
+ <i class="fas fa-bars text-2xl"></i>
81
+ </button>
82
+ </div>
83
+ </div>
84
+
85
+ <!-- Mobile Menu -->
86
+ <div id="mobile-menu" class="hidden md:hidden bg-black bg-opacity-95 py-4 px-4">
87
+ <div class="flex flex-col space-y-4">
88
+ <a href="#accueil" class="hover:text-purple-400 transition">Accueil</a>
89
+ <a href="#services" class="hover:text-purple-400 transition">Services</a>
90
+ <a href="#a-propos" class="hover:text-purple-400 transition">À propos</a>
91
+ <a href="#temoignages" class="hover:text-purple-400 transition">Témoignages</a>
92
+ <a href="#contact" class="hover:text-purple-400 transition">Contact</a>
93
+ </div>
94
+ </div>
95
+ </header>
96
+
97
+ <!-- Hero Section -->
98
+ <section id="accueil" class="hero-bg min-h-screen flex items-center pt-20">
99
+ <div class="container mx-auto px-4 py-20 flex flex-col md:flex-row items-center">
100
+ <div class="md:w-1/2 mb-10 md:mb-0">
101
+ <h1 class="text-4xl md:text-6xl font-bold mb-6 leading-tight">
102
+ <span class="bg-gradient-to-r from-purple-400 to-pink-500 bg-clip-text text-transparent">Professeur ABIBA</span><br>
103
+ <span class="text-xl md:text-2xl">Marabout Voyant Médium</span>
104
+ </h1>
105
+ <p class="text-lg md:text-xl mb-8 text-gray-300">
106
+ Découvrez les secrets de votre avenir et transformez votre vie grâce à mes dons exceptionnels de voyance et de médiumnité.
107
+ </p>
108
+ <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">
109
+ <a href="tel:0604047980" class="bg-purple-600 hover:bg-purple-700 text-white font-bold py-3 px-6 rounded-full transition flex items-center justify-center">
110
+ <i class="fas fa-phone mr-2"></i> 06 04 04 79 80
111
+ </a>
112
+ <a href="#contact" class="bg-transparent border-2 border-purple-400 hover:bg-purple-900 text-white font-bold py-3 px-6 rounded-full transition flex items-center justify-center">
113
+ <i class="fas fa-envelope mr-2"></i> Contactez-moi
114
+ </a>
115
+ </div>
116
+ </div>
117
+
118
+ <div class="md:w-1/2 flex justify-center relative">
119
+ <div class="crystal-ball w-64 h-64 md:w-80 md:h-80 rounded-full bg-gradient-to-br from-purple-900 to-blue-900 shadow-2xl flex items-center justify-center relative overflow-hidden">
120
+ <div class="absolute inset-0 flex items-center justify-center">
121
+ <div class="w-3/4 h-3/4 rounded-full bg-black bg-opacity-30 flex items-center justify-center">
122
+ <div class="text-center px-4">
123
+ <i class="fas fa-eye text-4xl md:text-5xl text-purple-300 mb-2"></i>
124
+ <p class="text-purple-100 font-medium">Je vois votre avenir</p>
125
+ </div>
126
+ </div>
127
+ </div>
128
+ </div>
129
+ </div>
130
+ </div>
131
+ </section>
132
+
133
+ <!-- Services Section -->
134
+ <section id="services" class="py-20 bg-gray-800">
135
+ <div class="container mx-auto px-4">
136
+ <div class="text-center mb-16">
137
+ <h2 class="text-3xl md:text-4xl font-bold mb-4">Mes Services Spirituels</h2>
138
+ <div class="w-20 h-1 bg-purple-500 mx-auto mb-6"></div>
139
+ <p class="max-w-2xl mx-auto text-gray-300">
140
+ Avec plus de 25 ans d'expérience, je mets mes dons au service de votre bien-être et de votre épanouissement.
141
+ </p>
142
+ </div>
143
+
144
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
145
+ <!-- Service 1 -->
146
+ <div class="service-card bg-gray-900 rounded-xl p-8 transition duration-500 hover:bg-gray-800">
147
+ <div class="w-16 h-16 bg-purple-600 rounded-full flex items-center justify-center mb-6 mx-auto">
148
+ <i class="fas fa-heart text-2xl text-white"></i>
149
+ </div>
150
+ <h3 class="text-xl font-bold mb-4 text-center">Retour d'affection</h3>
151
+ <p class="text-gray-300">
152
+ Retrouvez l'amour perdu ou attirez la personne de vos rêves grâce à des rituels puissants et personnalisés.
153
+ </p>
154
+ </div>
155
+
156
+ <!-- Service 2 -->
157
+ <div class="service-card bg-gray-900 rounded-xl p-8 transition duration-500 hover:bg-gray-800">
158
+ <div class="w-16 h-16 bg-purple-600 rounded-full flex items-center justify-center mb-6 mx-auto">
159
+ <i class="fas fa-hand-holding-usd text-2xl text-white"></i>
160
+ </div>
161
+ <h3 class="text-xl font-bold mb-4 text-center">Prospérité financière</h3>
162
+ <p class="text-gray-300">
163
+ Décuplez vos opportunités financières et brisez les blocages qui vous empêchent de réussir.
164
+ </p>
165
+ </div>
166
+
167
+ <!-- Service 3 -->
168
+ <div class="service-card bg-gray-900 rounded-xl p-8 transition duration-500 hover:bg-gray-800">
169
+ <div class="w-16 h-16 bg-purple-600 rounded-full flex items-center justify-center mb-6 mx-auto">
170
+ <i class="fas fa-shield-alt text-2xl text-white"></i>
171
+ </div>
172
+ <h3 class="text-xl font-bold mb-4 text-center">Protection spirituelle</h3>
173
+ <p class="text-gray-300">
174
+ Protégez-vous contre les énergies négatives, les mauvais sorts et les influences néfastes.
175
+ </p>
176
+ </div>
177
+
178
+ <!-- Service 4 -->
179
+ <div class="service-card bg-gray-900 rounded-xl p-8 transition duration-500 hover:bg-gray-800">
180
+ <div class="w-16 h-16 bg-purple-600 rounded-full flex items-center justify-center mb-6 mx-auto">
181
+ <i class="fas fa-briefcase text-2xl text-white"></i>
182
+ </div>
183
+ <h3 class="text-xl font-bold mb-4 text-center">Réussite professionnelle</h3>
184
+ <p class="text-gray-300">
185
+ Obtenez la promotion que vous méritez ou trouvez le travail idéal grâce à des rituels ciblés.
186
+ </p>
187
+ </div>
188
+
189
+ <!-- Service 5 -->
190
+ <div class="service-card bg-gray-900 rounded-xl p-8 transition duration-500 hover:bg-gray-800">
191
+ <div class="w-16 h-16 bg-purple-600 rounded-full flex items-center justify-center mb-6 mx-auto">
192
+ <i class="fas fa-star text-2xl text-white"></i>
193
+ </div>
194
+ <h3 class="text-xl font-bold mb-4 text-center">Voyance précise</h3>
195
+ <p class="text-gray-300">
196
+ Des consultations de voyance détaillées pour éclairer votre chemin et prendre les bonnes décisions.
197
+ </p>
198
+ </div>
199
+
200
+ <!-- Service 6 -->
201
+ <div class="service-card bg-gray-900 rounded-xl p-8 transition duration-500 hover:bg-gray-800">
202
+ <div class="w-16 h-16 bg-purple-600 rounded-full flex items-center justify-center mb-6 mx-auto">
203
+ <i class="fas fa-users text-2xl text-white"></i>
204
+ </div>
205
+ <h3 class="text-xl font-bold mb-4 text-center">Résolution de conflits</h3>
206
+ <p class="text-gray-300">
207
+ Retrouvez l'harmonie dans vos relations familiales, amicales ou professionnelles.
208
+ </p>
209
+ </div>
210
+ </div>
211
+ </div>
212
+ </section>
213
+
214
+ <!-- About Section -->
215
+ <section id="a-propos" class="py-20 bg-gray-900">
216
+ <div class="container mx-auto px-4">
217
+ <div class="flex flex-col lg:flex-row items-center">
218
+ <div class="lg:w-1/2 mb-10 lg:mb-0 lg:pr-10">
219
+ <div class="relative">
220
+ <img src="https://images.unsplash.com/photo-1581094794329-c8112a89af12?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Professeur ABIBA" class="rounded-xl shadow-2xl w-full">
221
+ <div class="absolute -bottom-5 -right-5 bg-purple-600 text-white p-4 rounded-lg shadow-lg">
222
+ <p class="text-2xl font-bold">25+</p>
223
+ <p class="text-sm">Ans d'expérience</p>
224
+ </div>
225
+ </div>
226
+ </div>
227
+
228
+ <div class="lg:w-1/2 lg:pl-10">
229
+ <h2 class="text-3xl md:text-4xl font-bold mb-6">Qui est le Professeur ABIBA ?</h2>
230
+ <div class="w-20 h-1 bg-purple-500 mb-6"></div>
231
+ <p class="text-gray-300 mb-6">
232
+ Héritier d'une longue lignée de marabouts et de voyants, le Professeur ABIBA a développé dès son plus jeune âge des dons exceptionnels de médiumnité et de clairvoyance.
233
+ </p>
234
+ <p class="text-gray-300 mb-6">
235
+ Après des années d'études des sciences occultes en Afrique et en Europe, il a perfectionné ses techniques pour offrir à ses clients des solutions concrètes et efficaces à leurs problèmes.
236
+ </p>
237
+ <p class="text-gray-300 mb-8">
238
+ Sa réputation n'est plus à faire, avec des milliers de personnes aidées à travers le monde. Son approche unique combine tradition ancestrale et méthodes modernes pour des résultats rapides et durables.
239
+ </p>
240
+
241
+ <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 mb-8">
242
+ <div class="flex items-center">
243
+ <div class="w-10 h-10 bg-purple-600 rounded-full flex items-center justify-center mr-4">
244
+ <i class="fas fa-check text-white"></i>
245
+ </div>
246
+ <p>Consultations privées</p>
247
+ </div>
248
+ <div class="flex items-center">
249
+ <div class="w-10 h-10 bg-purple-600 rounded-full flex items-center justify-center mr-4">
250
+ <i class="fas fa-check text-white"></i>
251
+ </div>
252
+ <p>Discret et professionnel</p>
253
+ </div>
254
+ <div class="flex items-center">
255
+ <div class="w-10 h-10 bg-purple-600 rounded-full flex items-center justify-center mr-4">
256
+ <i class="fas fa-check text-white"></i>
257
+ </div>
258
+ <p>Résultats garantis</p>
259
+ </div>
260
+ <div class="flex items-center">
261
+ <div class="w-10 h-10 bg-purple-600 rounded-full flex items-center justify-center mr-4">
262
+ <i class="fas fa-check text-white"></i>
263
+ </div>
264
+ <p>Suivi personnalisé</p>
265
+ </div>
266
+ </div>
267
+
268
+ <a href="#contact" class="inline-block bg-purple-600 hover:bg-purple-700 text-white font-bold py-3 px-6 rounded-full transition">
269
+ Prendre rendez-vous
270
+ </a>
271
+ </div>
272
+ </div>
273
+ </div>
274
+ </section>
275
+
276
+ <!-- Testimonials Section -->
277
+ <section id="temoignages" class="py-20 bg-gray-800">
278
+ <div class="container mx-auto px-4">
279
+ <div class="text-center mb-16">
280
+ <h2 class="text-3xl md:text-4xl font-bold mb-4">Témoignages</h2>
281
+ <div class="w-20 h-1 bg-purple-500 mx-auto mb-6"></div>
282
+ <p class="max-w-2xl mx-auto text-gray-300">
283
+ Découvrez ce que disent ceux qui ont fait confiance au Professeur ABIBA
284
+ </p>
285
+ </div>
286
+
287
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
288
+ <!-- Testimonial 1 -->
289
+ <div class="testimonial-card rounded-xl p-8 border border-gray-700">
290
+ <div class="flex items-center mb-6">
291
+ <div class="w-12 h-12 rounded-full bg-purple-600 flex items-center justify-center mr-4">
292
+ <i class="fas fa-user text-white"></i>
293
+ </div>
294
+ <div>
295
+ <h4 class="font-bold">Sophie D.</h4>
296
+ <p class="text-sm text-gray-400">Paris</p>
297
+ </div>
298
+ </div>
299
+ <p class="text-gray-300 italic">
300
+ "Après 3 ans de séparation, mon ex est revenu vers moi seulement 2 semaines après le rituel du Professeur ABIBA. Je n'en revenais pas ! Merci infiniment."
301
+ </p>
302
+ <div class="mt-4 text-yellow-400">
303
+ <i class="fas fa-star"></i>
304
+ <i class="fas fa-star"></i>
305
+ <i class="fas fa-star"></i>
306
+ <i class="fas fa-star"></i>
307
+ <i class="fas fa-star"></i>
308
+ </div>
309
+ </div>
310
+
311
+ <!-- Testimonial 2 -->
312
+ <div class="testimonial-card rounded-xl p-8 border border-gray-700">
313
+ <div class="flex items-center mb-6">
314
+ <div class="w-12 h-12 rounded-full bg-purple-600 flex items-center justify-center mr-4">
315
+ <i class="fas fa-user text-white"></i>
316
+ </div>
317
+ <div>
318
+ <h4 class="font-bold">Marc L.</h4>
319
+ <p class="text-sm text-gray-400">Lyon</p>
320
+ </div>
321
+ </div>
322
+ <p class="text-gray-300 italic">
323
+ "La consultation de voyance était d'une précision troublante. Tout ce qu'il a prédit s'est réalisé à la lettre. Je recommande à 100%."
324
+ </p>
325
+ <div class="mt-4 text-yellow-400">
326
+ <i class="fas fa-star"></i>
327
+ <i class="fas fa-star"></i>
328
+ <i class="fas fa-star"></i>
329
+ <i class="fas fa-star"></i>
330
+ <i class="fas fa-star"></i>
331
+ </div>
332
+ </div>
333
+
334
+ <!-- Testimonial 3 -->
335
+ <div class="testimonial-card rounded-xl p-8 border border-gray-700">
336
+ <div class="flex items-center mb-6">
337
+ <div class="w-12 h-12 rounded-full bg-purple-600 flex items-center justify-center mr-4">
338
+ <i class="fas fa-user text-white"></i>
339
+ </div>
340
+ <div>
341
+ <h4 class="font-bold">Amélie T.</h4>
342
+ <p class="text-sm text-gray-400">Marseille</p>
343
+ </div>
344
+ </div>
345
+ <p class="text-gray-300 italic">
346
+ "J'avais des problèmes financiers depuis des années. Après le travail du Professeur, j'ai décroché un meilleur emploi et mes dettes se sont résorbées comme par magie."
347
+ </p>
348
+ <div class="mt-4 text-yellow-400">
349
+ <i class="fas fa-star"></i>
350
+ <i class="fas fa-star"></i>
351
+ <i class="fas fa-star"></i>
352
+ <i class="fas fa-star"></i>
353
+ <i class="fas fa-star-half-alt"></i>
354
+ </div>
355
+ </div>
356
+ </div>
357
+ </div>
358
+ </section>
359
+
360
+ <!-- Contact Section -->
361
+ <section id="contact" class="py-20 bg-gray-900">
362
+ <div class="container mx-auto px-4">
363
+ <div class="text-center mb-16">
364
+ <h2 class="text-3xl md:text-4xl font-bold mb-4">Contactez le Professeur ABIBA</h2>
365
+ <div class="w-20 h-1 bg-purple-500 mx-auto mb-6"></div>
366
+ <p class="max-w-2xl mx-auto text-gray-300">
367
+ Prenez rendez-vous pour une consultation privée et découvrez comment je peux vous aider.
368
+ </p>
369
+ </div>
370
+
371
+ <div class="flex flex-col lg:flex-row">
372
+ <div class="lg:w-1/2 mb-10 lg:mb-0 lg:pr-10">
373
+ <div class="bg-gray-800 rounded-xl p-8 h-full">
374
+ <h3 class="text-2xl font-bold mb-6">Informations de contact</h3>
375
+
376
+ <div class="space-y-6">
377
+ <div class="flex items-start">
378
+ <div class="w-10 h-10 bg-purple-600 rounded-full flex items-center justify-center mr-4 mt-1">
379
+ <i class="fas fa-phone text-white"></i>
380
+ </div>
381
+ <div>
382
+ <h4 class="font-bold">Téléphone</h4>
383
+ <a href="tel:0604047980" class="text-purple-400 hover:text-purple-300">06 04 04 79 80</a>
384
+ </div>
385
+ </div>
386
+
387
+ <div class="flex items-start">
388
+ <div class="w-10 h-10 bg-purple-600 rounded-full flex items-center justify-center mr-4 mt-1">
389
+ <i class="fas fa-envelope text-white"></i>
390
+ </div>
391
+ <div>
392
+ <h4 class="font-bold">Email</h4>
393
+ <a href="mailto:[email protected]" class="text-purple-400 hover:text-purple-300">[email protected]</a>
394
+ </div>
395
+ </div>
396
+
397
+ <div class="flex items-start">
398
+ <div class="w-10 h-10 bg-purple-600 rounded-full flex items-center justify-center mr-4 mt-1">
399
+ <i class="fas fa-map-marker-alt text-white"></i>
400
+ </div>
401
+ <div>
402
+ <h4 class="font-bold">Consultations</h4>
403
+ <p>En cabinet (Paris) ou à distance par téléphone</p>
404
+ </div>
405
+ </div>
406
+
407
+ <div class="flex items-start">
408
+ <div class="w-10 h-10 bg-purple-600 rounded-full flex items-center justify-center mr-4 mt-1">
409
+ <i class="fas fa-clock text-white"></i>
410
+ </div>
411
+ <div>
412
+ <h4 class="font-bold">Horaires</h4>
413
+ <p>Du lundi au samedi de 9h à 20h</p>
414
+ </div>
415
+ </div>
416
+ </div>
417
+
418
+ <div class="mt-10">
419
+ <h4 class="font-bold mb-4">Suivez-moi</h4>
420
+ <div class="flex space-x-4">
421
+ <a href="#" class="w-10 h-10 bg-gray-700 hover:bg-purple-600 rounded-full flex items-center justify-center transition">
422
+ <i class="fab fa-facebook-f"></i>
423
+ </a>
424
+ <a href="#" class="w-10 h-10 bg-gray-700 hover:bg-purple-600 rounded-full flex items-center justify-center transition">
425
+ <i class="fab fa-instagram"></i>
426
+ </a>
427
+ <a href="#" class="w-10 h-10 bg-gray-700 hover:bg-purple-600 rounded-full flex items-center justify-center transition">
428
+ <i class="fab fa-youtube"></i>
429
+ </a>
430
+ </div>
431
+ </div>
432
+ </div>
433
+ </div>
434
+
435
+ <div class="lg:w-1/2 lg:pl-10">
436
+ <div class="bg-gray-800 rounded-xl p-8">
437
+ <h3 class="text-2xl font-bold mb-6">Envoyez un message</h3>
438
+ <form id="contact-form" class="space-y-4">
439
+ <div>
440
+ <label for="name" class="block mb-2">Votre nom</label>
441
+ <input type="text" id="name" class="w-full bg-gray-700 border border-gray-600 rounded-lg px-4 py-3 focus:outline-none focus:ring-2 focus:ring-purple-500">
442
+ </div>
443
+
444
+ <div>
445
+ <label for="email" class="block mb-2">Votre email</label>
446
+ <input type="email" id="email" class="w-full bg-gray-700 border border-gray-600 rounded-lg px-4 py-3 focus:outline-none focus:ring-2 focus:ring-purple-500">
447
+ </div>
448
+
449
+ <div>
450
+ <label for="phone" class="block mb-2">Votre téléphone</label>
451
+ <input type="tel" id="phone" class="w-full bg-gray-700 border border-gray-600 rounded-lg px-4 py-3 focus:outline-none focus:ring-2 focus:ring-purple-500">
452
+ </div>
453
+
454
+ <div>
455
+ <label for="service" class="block mb-2">Service intéressé</label>
456
+ <select id="service" class="w-full bg-gray-700 border border-gray-600 rounded-lg px-4 py-3 focus:outline-none focus:ring-2 focus:ring-purple-500">
457
+ <option value="">Sélectionnez un service</option>
458
+ <option value="voyance">Voyance</option>
459
+ <option value="retour-affection">Retour d'affection</option>
460
+ <option value="prosperite">Prospérité financière</option>
461
+ <option value="protection">Protection spirituelle</option>
462
+ <option value="autre">Autre</option>
463
+ </select>
464
+ </div>
465
+
466
+ <div>
467
+ <label for="message" class="block mb-2">Votre message</label>
468
+ <textarea id="message" rows="4" class="w-full bg-gray-700 border border-gray-600 rounded-lg px-4 py-3 focus:outline-none focus:ring-2 focus:ring-purple-500"></textarea>
469
+ </div>
470
+
471
+ <button type="submit" class="w-full bg-purple-600 hover:bg-purple-700 text-white font-bold py-3 px-6 rounded-lg transition">
472
+ Envoyer le message
473
+ </button>
474
+ </form>
475
+ </div>
476
+ </div>
477
+ </div>
478
+ </div>
479
+ </section>
480
+
481
+ <!-- Floating WhatsApp Button -->
482
+ <a href="https://wa.me/33604047980" class="fixed bottom-8 right-8 floating-button w-16 h-16 bg-green-500 rounded-full flex items-center justify-center text-white text-2xl shadow-xl z-50">
483
+ <i class="fab fa-whatsapp"></i>
484
+ </a>
485
+
486
+ <!-- Footer -->
487
+ <footer class="bg-black py-10">
488
+ <div class="container mx-auto px-4">
489
+ <div class="flex flex-col md:flex-row justify-between items-center">
490
+ <div class="mb-6 md:mb-0">
491
+ <div class="flex items-center space-x-2">
492
+ <div class="w-10 h-10 rounded-full bg-purple-600 flex items-center justify-center">
493
+ <i class="fas fa-moon text-white text-xl"></i>
494
+ </div>
495
+ <h2 class="text-xl font-bold bg-gradient-to-r from-purple-400 to-pink-500 bg-clip-text text-transparent">Professeur ABIBA</h2>
496
+ </div>
497
+ <p class="text-gray-400 mt-2">Marabout Voyant Médium - Solutions spirituelles depuis 1998</p>
498
+ </div>
499
+
500
+ <div class="text-center md:text-right">
501
+ <p class="text-gray-400">© 2023 Professeur ABIBA. Tous droits réservés.</p>
502
+ <div class="flex justify-center md:justify-end space-x-4 mt-2">
503
+ <a href="#" class="text-gray-400 hover:text-purple-400">Mentions légales</a>
504
+ <a href="#" class="text-gray-400 hover:text-purple-400">Confidentialité</a>
505
+ </div>
506
+ </div>
507
+ </div>
508
+ </div>
509
+ </footer>
510
+
511
+ <script>
512
+ // Mobile menu toggle
513
+ const menuBtn = document.getElementById('menu-btn');
514
+ const mobileMenu = document.getElementById('mobile-menu');
515
+
516
+ menuBtn.addEventListener('click', () => {
517
+ mobileMenu.classList.toggle('hidden');
518
+ });
519
+
520
+ // Smooth scrolling for anchor links
521
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
522
+ anchor.addEventListener('click', function (e) {
523
+ e.preventDefault();
524
+
525
+ const targetId = this.getAttribute('href');
526
+ if (targetId === '#') return;
527
+
528
+ const targetElement = document.querySelector(targetId);
529
+ if (targetElement) {
530
+ window.scrollTo({
531
+ top: targetElement.offsetTop - 80,
532
+ behavior: 'smooth'
533
+ });
534
+
535
+ // Close mobile menu if open
536
+ mobileMenu.classList.add('hidden');
537
+ }
538
+ });
539
+ });
540
+
541
+ // Form submission
542
+ const contactForm = document.getElementById('contact-form');
543
+ if (contactForm) {
544
+ contactForm.addEventListener('submit', function(e) {
545
+ e.preventDefault();
546
+
547
+ // Here you would normally send the form data to your server
548
+ // For this example, we'll just show an alert
549
+ alert('Merci pour votre message! Le Professeur ABIBA vous contactera rapidement.');
550
+
551
+ // Reset form
552
+ this.reset();
553
+ });
554
+ }
555
+ </script>
556
+ </body>
557
+ </html>
index.html DELETED
@@ -1,29 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang="en">
3
- <head>
4
- <meta charset="utf-8" />
5
- <link rel="icon" type="image/svg+xml" href="/logo.svg" />
6
- <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7
- <title>DeepSite | Build with AI ✨</title>
8
- <meta
9
- name="description"
10
- content="DeepSite is a web development tool that
11
- helps you build websites with AI, no code required. Let's deploy your
12
- website with DeepSite and enjoy the magic of AI."
13
- />
14
- <link rel="preconnect" href="https://fonts.googleapis.com" />
15
- <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
16
- <link
17
- href="https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap"
18
- rel="stylesheet"
19
- />
20
- <link
21
- href="https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&family=Source+Code+Pro:ital,wght@0,200..900;1,200..900&display=swap"
22
- rel="stylesheet"
23
- />
24
- </head>
25
- <body>
26
- <div id="root"></div>
27
- <script type="module" src="/src/main.tsx"></script>
28
- </body>
29
- </html>