Hugging Face's logo

Spaces:
iamTheFoxCoder
/
foxxxxxx
Running

App Files Community
iamTheFoxCoder commited on
Commit
e86e073
·
verified ·
1 Parent(s): 3c6da5b

undefined - Initial Deployment

Browse files
Files changed (3) hide show
  1. README.md +6 -4
  2. index.html +564 -19
  3. prompts.txt +0 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Foxxxxxx
3
- emoji: 🏆
4
- colorFrom: purple
5
  colorTo: green
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: foxxxxxx
3
+ emoji: 🐳
4
+ colorFrom: gray
5
  colorTo: green
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,564 @@
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>JEC | Jeunesse pour l'Environnement et le Climat</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
+ <script>
10
+ tailwind.config = {
11
+ theme: {
12
+ extend: {
13
+ colors: {
14
+ 'eco-green': '#0db377',
15
+ 'eco-blue': '#0d7ab3',
16
+ 'light-bg': '#f9fbfc',
17
+ }
18
+ }
19
+ }
20
+ }
21
+ </script>
22
+ <style>
23
+ @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
24
+
25
+ body {
26
+ font-family: 'Poppins', sans-serif;
27
+ background-color: #f9fbfc;
28
+ scroll-behavior: smooth;
29
+ }
30
+
31
+ .text-shadow {
32
+ text-shadow: 0px 2px 4px rgba(0,0,0,0.1);
33
+ }
34
+
35
+ .btn-hover {
36
+ transition: all 0.3s ease;
37
+ }
38
+
39
+ .btn-hover:hover {
40
+ transform: translateY(-3px);
41
+ box-shadow: 0 10px 20px rgba(0,0,0,0.1);
42
+ }
43
+
44
+ .mission-card:hover {
45
+ transform: translateY(-5px);
46
+ box-shadow: 0 15px 30px rgba(0,0,0,0.1);
47
+ }
48
+
49
+ .member-card:hover img {
50
+ transform: scale(1.05);
51
+ }
52
+
53
+ .fade-in {
54
+ animation: fadeIn 0.8s ease-in;
55
+ }
56
+
57
+ @keyframes fadeIn {
58
+ from { opacity: 0; transform: translateY(20px); }
59
+ to { opacity: 1; transform: translateY(0); }
60
+ }
61
+ </style>
62
+ </head>
63
+ <body class="bg-light-bg">
64
+ <!-- Header -->
65
+ <header class="sticky top-0 z-50 bg-white shadow-md">
66
+ <div class="container mx-auto px-4 py-4 flex justify-between items-center">
67
+ <div class="flex items-center space-x-2">
68
+ <div class="w-10 h-10 bg-eco-green rounded-full flex items-center justify-center text-white font-bold text-xl">JEC</div>
69
+ <div>
70
+ <h1 class="font-bold text-xl">Jeunesse pour l'Environnement et le Climat</h1>
71
+ <p class="text-xs text-eco-green">Sensibiliser - Restaurer - Protéger</p>
72
+ </div>
73
+ </div>
74
+
75
+ <nav class="hidden md:flex space-x-8">
76
+ <a href="#accueil" class="text-gray-700 hover:text-eco-green font-medium">Accueil</a>
77
+ <a href="#a-propos" class="text-gray-700 hover:text-eco-green font-medium">À Propos</a>
78
+ <a href="#missions" class="text-gray-700 hover:text-eco-green font-medium">Missions</a>
79
+ <a href="#equipe" class="text-gray-700 hover:text-eco-green font-medium">Notre Équipe</a>
80
+ <a href="#blog" class="text-gray-700 hover:text-eco-green font-medium">Blog</a>
81
+ <a href="#contact" class="text-gray-700 hover:text-eco-green font-medium">Contact</a>
82
+ </nav>
83
+
84
+ <div class="md:hidden">
85
+ <button id="menu-toggle" class="text-gray-700">
86
+ <i class="fas fa-bars text-2xl"></i>
87
+ </button>
88
+ </div>
89
+ </div>
90
+
91
+ <!-- Mobile Menu -->
92
+ <div id="mobile-menu" class="hidden md:hidden bg-white py-4 px-4 border-t">
93
+ <div class="flex flex-col space-y-3">
94
+ <a href="#accueil" class="text-gray-700 hover:text-eco-green font-medium py-2">Accueil</a>
95
+ <a href="#a-propos" class="text-gray-700 hover:text-eco-green font-medium py-2">À Propos</a>
96
+ <a href="#missions" class="text-gray-700 hover:text-eco-green font-medium py-2">Missions</a>
97
+ <a href="#equipe" class="text-gray-700 hover:text-eco-green font-medium py-2">Notre Équipe</a>
98
+ <a href="#blog" class="text-gray-700 hover:text-eco-green font-medium py-2">Blog</a>
99
+ <a href="#contact" class="text-gray-700 hover:text-eco-green font-medium py-2">Contact</a>
100
+ </div>
101
+ </div>
102
+ </header>
103
+
104
+ <!-- Hero Section -->
105
+ <section id="accueil" class="relative bg-gradient-to-r from-eco-blue/10 to-eco-green/10">
106
+ <div class="container mx-auto px-4 py-16 md:py-24 flex flex-col md:flex-row items-center">
107
+ <div class="md:w-1/2 mb-10 md:mb-0 fade-in">
108
+ <h1 class="text-4xl md:text-5xl font-bold text-gray-800 mb-4 text-shadow">
109
+ Un engagement <span class="text-eco-green">collectif</span> pour notre planète
110
+ </h1>
111
+ <p class="text-lg text-gray-600 mb-8">
112
+ Ensemble, agissons pour préserver l'environnement et créer un avenir durable pour tous. Rejoignez notre mouvement pour le climat.
113
+ </p>
114
+ <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">
115
+ <a href="#missions" class="bg-eco-green text-white px-6 py-3 rounded-lg font-medium text-center btn-hover">
116
+ Découvrir nos actions <i class="fas fa-arrow-right ml-2"></i>
117
+ </a>
118
+ <a href="#contact" class="bg-white text-eco-green border border-eco-green px-6 py-3 rounded-lg font-medium text-center btn-hover">
119
+ Nous soutenir
120
+ </a>
121
+ </div>
122
+ </div>
123
+ <div class="md:w-1/2 flex justify-center fade-in">
124
+ <div class="relative">
125
+ <div class="bg-eco-blue/20 rounded-full w-64 h-64 md:w-80 md:h-80 absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2"></div>
126
+ <div class="bg-eco-green/20 rounded-full w-56 h-56 md:w-72 md:h-72 absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2"></div>
127
+ <div class="relative bg-white p-8 rounded-2xl shadow-lg border border-gray-100">
128
+ <div class="text-5xl text-center mb-4">
129
+ <i class="fas fa-seedling text-eco-green"></i>
130
+ <i class="fas fa-water text-eco-blue"></i>
131
+ <i class="fas fa-globe-africa text-eco-green"></i>
132
+ </div>
133
+ <h2 class="text-2xl font-bold text-center text-gray-800">
134
+ Mon environnement, <span class="text-eco-blue">ma vie</span>
135
+ </h2>
136
+ <p class="text-center text-gray-600 mt-4">
137
+ Notre slogan reflète notre engagement profond pour la protection de notre planète
138
+ </p>
139
+ </div>
140
+ </div>
141
+ </div>
142
+ </div>
143
+ </section>
144
+
145
+ <!-- About Section -->
146
+ <section id="a-propos" class="py-20 bg-white">
147
+ <div class="container mx-auto px-4">
148
+ <div class="text-center mb-16 fade-in">
149
+ <span class="text-eco-blue font-medium">À propos de nous</span>
150
+ <h2 class="text-3xl font-bold text-gray-800 mt-2">Jeunesse pour l'Environnement et le Climat</h2>
151
+ <div class="h-1 w-20 bg-eco-green rounded mt-4 mx-auto"></div>
152
+ </div>
153
+
154
+ <div class="flex flex-col md:flex-row items-center gap-8">
155
+ <div class="md:w-1/2 fade-in">
156
+ <div class="bg-gradient-to-br from-eco-blue/5 to-eco-green/5 p-6 rounded-2xl border border-gray-100">
157
+ <h3 class="text-xl font-bold text-gray-800 mb-4">Notre Identité</h3>
158
+ <div class="flex items-center mb-4">
159
+ <div class="w-8 h-8 bg-eco-green rounded-full flex items-center justify-center text-white mr-3">
160
+ <i class="fas fa-compass"></i>
161
+ </div>
162
+ <span class="font-medium">Devise : <span class="text-eco-green">Sensibiliser – Restaurer – Protéger</span></span>
163
+ </div>
164
+ <div class="flex items-center mb-4">
165
+ <div class="w-8 h-8 bg-eco-blue rounded-full flex items-center justify-center text-white mr-3">
166
+ <i class="fas fa-quote-left"></i>
167
+ </div>
168
+ <span class="font-medium">Slogan : <span class="text-eco-blue">Mon environnement, ma vie</span></span>
169
+ </div>
170
+ <p class="text-gray-600 mt-6">
171
+ Fondée par des jeunes passionnés et engagés, JEC œuvre depuis plusieurs années pour apporter des solutions concrètes face aux défis environnementaux actuels. Notre approche combine éducation, action sur le terrain et plaidoyer pour créer un impact réel et durable sur nos communautés et notre planète.
172
+ </p>
173
+ </div>
174
+ </div>
175
+
176
+ <div class="md:w-1/2 fade-in">
177
+ <div class="bg-gradient-to-br from-eco-green/5 to-eco-blue/5 p-6 rounded-2xl border border-gray-100">
178
+ <h3 class="text-xl font-bold text-gray-800 mb-4">Notre Vision</h3>
179
+ <p class="text-gray-600 mb-4">
180
+ Nous r��vons d'un monde où la protection de l'environnement n'est pas un choix, mais un mode de vie naturel et intégré à toutes les activités humaines. Un monde où la jeunesse est au cœur du changement et où l'équilibre écologique est restauré pour les générations futures.
181
+ </p>
182
+ <div class="flex items-center mt-6">
183
+ <i class="fas fa-map-marker-alt text-eco-green text-xl mr-4"></i>
184
+ <div>
185
+ <p class="font-medium">Siège Social</p>
186
+ <p class="text-gray-600">Yaoundé, Cameroun</p>
187
+ </div>
188
+ </div>
189
+ <div class="flex items-center mt-4">
190
+ <i class="fas fa-envelope text-eco-blue text-xl mr-4"></i>
191
+ <div>
192
+ <p class="font-medium">Email</p>
193
+ <p class="text-gray-600">ajec049@gmail.com</p>
194
+ </div>
195
+ </div>
196
+ </div>
197
+ </div>
198
+ </div>
199
+ </div>
200
+ </section>
201
+
202
+ <!-- Missions Section -->
203
+ <section id="missions" class="py-20 bg-gradient-to-br from-eco-blue/5 to-eco-green/5">
204
+ <div class="container mx-auto px-4">
205
+ <div class="text-center mb-16 fade-in">
206
+ <span class="text-eco-green font-medium">Nos engagements</span>
207
+ <h2 class="text-3xl font-bold text-gray-800 mt-2">Missions & Objectifs</h2>
208
+ <div class="h-1 w-20 bg-eco-blue rounded mt-4 mx-auto"></div>
209
+ </div>
210
+
211
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
212
+ <!-- Mission 1 -->
213
+ <div class="bg-white p-6 rounded-2xl shadow-md border border-gray-100 mission-card transition-all duration-300 fade-in">
214
+ <div class="text-eco-green text-3xl mb-4">
215
+ <i class="fas fa-chalkboard-teacher"></i>
216
+ </div>
217
+ <h3 class="text-xl font-bold text-gray-800 mb-2">Éducation environnementale</h3>
218
+ <p class="text-gray-600">
219
+ Sensibiliser les populations sur les enjeux climatiques et écologiques pour un changement durable des comportements.
220
+ </p>
221
+ </div>
222
+
223
+ <!-- Mission 2 -->
224
+ <div class="bg-white p-6 rounded-2xl shadow-md border border-gray-100 mission-card transition-all duration-300 fade-in">
225
+ <div class="text-eco-green text-3xl mb-4">
226
+ <i class="fas fa-venus-mars"></i>
227
+ </div>
228
+ <h3 class="text-xl font-bold text-gray-800 mb-2">Égalité de genre</h3>
229
+ <p class="text-gray-600">
230
+ Promouvoir une participation équitable des femmes et des hommes dans toutes les initiatives environnementales.
231
+ </p>
232
+ </div>
233
+
234
+ <!-- Mission 3 -->
235
+ <div class="bg-white p-6 rounded-2xl shadow-md border border-gray-100 mission-card transition-all duration-300 fade-in">
236
+ <div class="text-eco-green text-3xl mb-4">
237
+ <i class="fas fa-university"></i>
238
+ </div>
239
+ <h3 class="text-xl font-bold text-gray-800 mb-2">Accompagnement politique</h3>
240
+ <p class="text-gray-600">
241
+ Conseiller les acteurs politiques pour l'élaboration de politiques environnementales efficaces.
242
+ </p>
243
+ </div>
244
+
245
+ <!-- More missions would go here... -->
246
+ </div>
247
+
248
+ <div class="text-center mt-12">
249
+ <a href="#" class="inline-flex items-center text-eco-blue font-medium">
250
+ Voir toutes nos missions
251
+ <i class="fas fa-arrow-right ml-2"></i>
252
+ </a>
253
+ </div>
254
+ </div>
255
+ </section>
256
+
257
+ <!-- Team Section -->
258
+ <section id="equipe" class="py-20 bg-white">
259
+ <div class="container mx-auto px-4">
260
+ <div class="text-center mb-16 fade-in">
261
+ <span class="text-eco-blue font-medium">Notre équipe</span>
262
+ <h2 class="text-3xl font-bold text-gray-800 mt-2">Bureau Exécutif</h2>
263
+ <div class="h-1 w-20 bg-eco-green rounded mt-4 mx-auto"></div>
264
+ </div>
265
+
266
+ <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
267
+ <!-- President -->
268
+ <div class="bg-gray-50 rounded-xl overflow-hidden border border-gray-100 member-card">
269
+ <div class="h-40 bg-gradient-to-r from-eco-blue/20 to-eco-green/20 flex items-center justify-center">
270
+ <div class="bg-gray-200 border-2 border-dashed rounded-xl w-24 h-24 flex items-center justify-center text-gray-400">
271
+ <i class="fas fa-user text-3xl"></i>
272
+ </div>
273
+ </div>
274
+ <div class="p-6">
275
+ <h3 class="font-bold text-lg">Mahi Bogmis Apollinaire Benjamin</h3>
276
+ <p class="text-eco-green font-medium">Président</p>
277
+ </div>
278
+ </div>
279
+
280
+ <!-- Vice Présidente -->
281
+ <div class="bg-gray-50 rounded-xl overflow-hidden border border-gray-100 member-card">
282
+ <div class="h-40 bg-gradient-to-r from-eco-green/20 to-eco-blue/20 flex items-center justify-center">
283
+ <div class="bg-gray-200 border-2 border-dashed rounded-xl w-24 h-24 flex items-center justify-center text-gray-400">
284
+ <i class="fas fa-user text-3xl"></i>
285
+ </div>
286
+ </div>
287
+ <div class="p-6">
288
+ <h3 class="font-bold text-lg">Suzane Lyombe Etondi</h3>
289
+ <p class="text-eco-green font-medium">Vice-présidente</p>
290
+ </div>
291
+ </div>
292
+
293
+ <!-- Secrétaire Général -->
294
+ <div class="bg-gray-50 rounded-xl overflow-hidden border border-gray-100 member-card">
295
+ <div class="h-40 bg-gradient-to-r from-eco-blue/20 to-eco-green/20 flex items-center justify-center">
296
+ <div class="bg-gray-200 border-2 border-dashed rounded-xl w-24 h-24 flex items-center justify-center text-gray-400">
297
+ <i class="fas fa-user text-3xl"></i>
298
+ </div>
299
+ </div>
300
+ <div class="p-6">
301
+ <h3 class="font-bold text-lg">Hadjou Loic</h3>
302
+ <p class="text-eco-green font-medium">Secrétaire Général</p>
303
+ </div>
304
+ </div>
305
+ </div>
306
+
307
+ <div class="text-center mt-12 fade-in">
308
+ <a href="#" class="inline-flex items-center bg-eco-blue text-white px-6 py-3 rounded-lg font-medium btn-hover">
309
+ Rencontrer toute notre équipe
310
+ <i class="fas fa-users ml-2"></i>
311
+ </a>
312
+ </div>
313
+ </div>
314
+ </section>
315
+
316
+ <!-- Blog Section -->
317
+ <section id="blog" class="py-20 bg-gradient-to-br from-eco-green/5 to-eco-blue/5">
318
+ <div class="container mx-auto px-4">
319
+ <div class="text-center mb-16 fade-in">
320
+ <span class="text-eco-green font-medium">Actualités</span>
321
+ <h2 class="text-3xl font-bold text-gray-800 mt-2">Notre Blog</h2>
322
+ <div class="h-1 w-20 bg-eco-blue rounded mt-4 mx-auto"></div>
323
+ </div>
324
+
325
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
326
+ <!-- Blog post 1 -->
327
+ <div class="bg-white rounded-2xl overflow-hidden shadow-md border border-gray-100 fade-in">
328
+ <div class="h-48 bg-gradient-to-r from-eco-blue/30 to-eco-green/30 flex items-center justify-center">
329
+ <i class="fas fa-leaf text-6xl text-white opacity-30"></i>
330
+ </div>
331
+ <div class="p-6">
332
+ <span class="text-sm text-eco-green font-medium">Sensibilisation</span>
333
+ <h3 class="font-bold text-xl mt-2 mb-3">Campagne de reboisement 2023</h3>
334
+ <p class="text-gray-600 mb-4">Notre récente initiative de planter 10 000 arbres dans la région de Yaoundé...</p>
335
+ <div class="flex items-center text-gray-500 text-sm">
336
+ <i class="far fa-calendar mr-2"></i>
337
+ <span>15 Octobre 2023</span>
338
+ </div>
339
+ </div>
340
+ </div>
341
+
342
+ <!-- Blog post 2 -->
343
+ <div class="bg-white rounded-2xl overflow-hidden shadow-md border border-gray-100 fade-in">
344
+ <div class="h-48 bg-gradient-to-r from-eco-green/30 to-eco-blue/30 flex items-center justify-center">
345
+ <i class="fas fa-users text-6xl text-white opacity-30"></i>
346
+ </div>
347
+ <div class="p-6">
348
+ <span class="text-sm text-eco-blue font-medium">Événement</span>
349
+ <h3 class="font-bold text-xl mt-2 mb-3">Forum Jeunesse & Climat</h3>
350
+ <p class="text-gray-600 mb-4">Retour sur notre forum annuel réunissant 200 jeunes leaders environnementaux...</p>
351
+ <div class="flex items-center text-gray-500 text-sm">
352
+ <i class="far fa-calendar mr-2"></i>
353
+ <span>28 Septembre 2023</span>
354
+ </div>
355
+ </div>
356
+ </div>
357
+
358
+ <!-- Blog post 3 -->
359
+ <div class="bg-white rounded-2xl overflow-hidden shadow-md border border-gray-100 fade-in">
360
+ <div class="h-48 bg-gradient-to-r from-eco-blue/30 to-eco-green/30 flex items-center justify-center">
361
+ <i class="fas fa-book text-6xl text-white opacity-30"></i>
362
+ </div>
363
+ <div class="p-6">
364
+ <span class="text-sm text-eco-green font-medium">Éducation</span>
365
+ <h3 class="font-bold text-xl mt-2 mb-3">Programme scolaire d'écologie</h3>
366
+ <p class="text-gray-600 mb-4">Lancement de notre nouveau programme éducatif dans 15 écoles de Yaoundé...</p>
367
+ <div class="flex items-center text-gray-500 text-sm">
368
+ <i class="far fa-calendar mr-2"></i>
369
+ <span>5 Septembre 2023</span>
370
+ </div>
371
+ </div>
372
+ </div>
373
+ </div>
374
+
375
+ <div class="text-center mt-12">
376
+ <a href="#" class="inline-flex items-center text-eco-blue font-medium">
377
+ Voir tous nos articles
378
+ <i class="fas fa-arrow-right ml-2"></i>
379
+ </a>
380
+ </div>
381
+ </div>
382
+ </section>
383
+
384
+ <!-- Contact Section -->
385
+ <section id="contact" class="py-20 bg-white">
386
+ <div class="container mx-auto px-4">
387
+ <div class="text-center mb-16 fade-in">
388
+ <span class="text-eco-blue font-medium">Restons en contact</span>
389
+ <h2 class="text-3xl font-bold text-gray-800 mt-2">Contactez-nous</h2>
390
+ <div class="h-1 w-20 bg-eco-green rounded mt-4 mx-auto"></div>
391
+ </div>
392
+
393
+ <div class="flex flex-col md:flex-row gap-12">
394
+ <div class="md:w-1/2 fade-in">
395
+ <div class="bg-gray-50 rounded-2xl p-8 border border-gray-100">
396
+ <h3 class="text-xl font-bold text-gray-800 mb-6">Nos Coordonnées</h3>
397
+
398
+ <div class="flex items-start mb-6">
399
+ <div class="w-12 h-12 rounded-full bg-eco-green/10 flex items-center justify-center text-eco-green mr-4">
400
+ <i class="fas fa-map-marker-alt text-xl"></i>
401
+ </div>
402
+ <div>
403
+ <h4 class="font-bold text-gray-800">Siège Social</h4>
404
+ <p class="text-gray-600">Yaoundé, Cameroun</p>
405
+ </div>
406
+ </div>
407
+
408
+ <div class="flex items-start mb-6">
409
+ <div class="w-12 h-12 rounded-full bg-eco-blue/10 flex items-center justify-center text-eco-blue mr-4">
410
+ <i class="fas fa-phone-alt text-xl"></i>
411
+ </div>
412
+ <div>
413
+ <h4 class="font-bold text-gray-800">Téléphones</h4>
414
+ <p class="text-gray-600">
415
+ +237 693 73 16 74<br>
416
+ +237 654 39 98 81<br>
417
+ +237 621 12 94 76<br>
418
+ +237 690 33 48 58<br>
419
+ +237 651 46 39 78
420
+ </p>
421
+ </div>
422
+ </div>
423
+
424
+ <div class="flex items-start">
425
+ <div class="w-12 h-12 rounded-full bg-eco-green/10 flex items-center justify-center text-eco-green mr-4">
426
+ <i class="fas fa-envelope text-xl"></i>
427
+ </div>
428
+ <div>
429
+ <h4 class="font-bold text-gray-800">Email</h4>
430
+ <p class="text-gray-600">ajec049@gmail.com</p>
431
+ </div>
432
+ </div>
433
+ </div>
434
+ </div>
435
+
436
+ <div class="md:w-1/2 fade-in">
437
+ <div class="bg-gray-50 rounded-2xl p-8 border border-gray-100">
438
+ <h3 class="text-xl font-bold text-gray-800 mb-6">Envoyez-nous un message</h3>
439
+
440
+ <form>
441
+ <div class="mb-4">
442
+ <label class="block text-gray-700 mb-2" for="name">Nom Complet</label>
443
+ <input type="text" id="name" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:border-eco-green focus:ring focus:ring-eco-green/50 outline-none">
444
+ </div>
445
+
446
+ <div class="mb-4">
447
+ <label class="block text-gray-700 mb-2" for="email">Email</label>
448
+ <input type="email" id="email" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:border-eco-green focus:ring focus:ring-eco-green/50 outline-none">
449
+ </div>
450
+
451
+ <div class="mb-4">
452
+ <label class="block text-gray-700 mb-2" for="message">Message</label>
453
+ <textarea id="message" rows="5" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:border-eco-green focus:ring focus:ring-eco-green/50 outline-none"></textarea>
454
+ </div>
455
+
456
+ <button type="submit" class="w-full bg-eco-green text-white px-6 py-3 rounded-lg font-medium mt-4 btn-hover">
457
+ Envoyer votre message
458
+ <i class="fas fa-paper-plane ml-2"></i>
459
+ </button>
460
+ </form>
461
+ </div>
462
+ </div>
463
+ </div>
464
+ </div>
465
+ </section>
466
+
467
+ <!-- Footer -->
468
+ <footer class="bg-gray-800 text-white py-12">
469
+ <div class="container mx-auto px-4">
470
+ <div class="flex flex-col md:flex-row justify-between gap-8">
471
+ <div class="md:w-1/3">
472
+ <div class="flex items-center space-x-3 mb-6">
473
+ <div class="w-10 h-10 bg-eco-green rounded-full flex items-center justify-center text-white font-bold text-xl">JEC</div>
474
+ <h3 class="text-xl font-bold">Jeunesse pour l'Environnement et le Climat</h3>
475
+ </div>
476
+ <p class="text-gray-400 mb-6">
477
+ Agissons ensemble pour préserver notre planète et créer un avenir durable pour tous. Rejoignez notre mouvement pour un impact réel.
478
+ </p>
479
+ <div class="flex space-x-4">
480
+ <a href="#" class="text-gray-400 hover:text-white transition">
481
+ <i class="fab fa-facebook-f text-xl"></i>
482
+ </a>
483
+ <a href="#" class="text-gray-400 hover:text-white transition">
484
+ <i class="fab fa-twitter text-xl"></i>
485
+ </a>
486
+ <a href="#" class="text-gray-400 hover:text-white transition">
487
+ <i class="fab fa-instagram text-xl"></i>
488
+ </a>
489
+ <a href="#" class="text-gray-400 hover:text-white transition">
490
+ <i class="fab fa-linkedin-in text-xl"></i>
491
+ </a>
492
+ </div>
493
+ </div>
494
+
495
+ <div class="md:w-1/3">
496
+ <h4 class="text-lg font-bold mb-6">Liens Rapides</h4>
497
+ <ul class="space-y-3">
498
+ <li><a href="#" class="text-gray-400 hover:text-white transition">À propos de nous</a></li>
499
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Nos missions</a></li>
500
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Événements</a></li>
501
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Galerie photos</a></li>
502
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Devenir bénévole</a></li>
503
+ </ul>
504
+ </div>
505
+
506
+ <div class="md:w-1/3">
507
+ <h4 class="text-lg font-bold mb-6">Newsletter</h4>
508
+ <p class="text-gray-400 mb-4">
509
+ Abonnez-vous pour recevoir nos dernières actualités et événements.
510
+ </p>
511
+ <form class="flex">
512
+ <input type="email" placeholder="Votre email" class="px-4 py-2 w-full rounded-l-lg focus:outline-none text-gray-800">
513
+ <button class="bg-eco-green px-4 rounded-r-lg">
514
+ <i class="fas fa-paper-plane text-white"></i>
515
+ </button>
516
+ </form>
517
+ </div>
518
+ </div>
519
+
520
+ <div class="border-t border-gray-700 mt-12 pt-8 text-center text-gray-400">
521
+ <p>© 2023 Jeunesse pour l'Environnement et le Climat. Tous droits réservés.</p>
522
+ </div>
523
+ </div>
524
+ </footer>
525
+
526
+ <script>
527
+ // Toggle mobile menu
528
+ document.getElementById('menu-toggle').addEventListener('click', function() {
529
+ document.getElementById('mobile-menu').classList.toggle('hidden');
530
+ });
531
+
532
+ // Add animation when elements enter viewport
533
+ const observerOptions = {
534
+ threshold: 0.1
535
+ };
536
+
537
+ const observer = new IntersectionObserver((entries) => {
538
+ entries.forEach(entry => {
539
+ if (entry.isIntersecting) {
540
+ entry.target.classList.add('fade-in');
541
+ }
542
+ });
543
+ }, observerOptions);
544
+
545
+ document.querySelectorAll('section > div:first-child').forEach(section => {
546
+ observer.observe(section);
547
+ });
548
+
549
+ // Smooth scrolling for anchor links
550
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
551
+ anchor.addEventListener('click', function (e) {
552
+ e.preventDefault();
553
+
554
+ document.querySelector(this.getAttribute('href')).scrollIntoView({
555
+ behavior: 'smooth'
556
+ });
557
+
558
+ // Close mobile menu if open
559
+ document.getElementById('mobile-menu').classList.add('hidden');
560
+ });
561
+ });
562
+ </script>
563
+ <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=iamTheFoxCoder/foxxxxxx" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
564
+ </html>
prompts.txt ADDED
File without changes