Hugging Face's logo

Spaces:
NaderFayed07
/
draft-2
Running

App Files Community
NaderFayed07 commited on
Commit
a7992ea
·
verified ·
1 Parent(s): 2db2823

https://www.childrenurbanhub.org/ reimagine home page - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +6 -4
  2. index.html +431 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Draft 2
3
- emoji: 💻
4
- colorFrom: gray
5
  colorTo: gray
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: draft-2
3
+ emoji: 🐳
4
+ colorFrom: red
5
  colorTo: gray
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,431 @@
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="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Children Urban Hub - Reimagined</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
+ <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&family=Open+Sans:wght@300;400;600&display=swap" rel="stylesheet">
10
+ <script>
11
+ tailwind.config = {
12
+ theme: {
13
+ extend: {
14
+ colors: {
15
+ primary: '#4361ee',
16
+ secondary: '#3f37c9',
17
+ accent: '#4cc9f0',
18
+ light: '#f8f9fa',
19
+ dark: '#212529',
20
+ success: '#4ade80',
21
+ warning: '#facc15',
22
+ danger: '#f87171'
23
+ },
24
+ fontFamily: {
25
+ heading: ['Poppins', 'sans-serif'],
26
+ body: ['Open Sans', 'sans-serif']
27
+ }
28
+ }
29
+ }
30
+ }
31
+ </script>
32
+ <style>
33
+ .hero-bg {
34
+ background: linear-gradient(135deg, rgba(67, 97, 238, 0.9) 0%, rgba(63, 55, 201, 0.9) 100%), url('https://images.unsplash.com/photo-1519452635265-7b1fbfd1e4e0?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1920&q=80');
35
+ background-size: cover;
36
+ background-position: center;
37
+ }
38
+ .card-hover {
39
+ transition: all 0.3s ease;
40
+ }
41
+ .card-hover:hover {
42
+ transform: translateY(-10px);
43
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
44
+ }
45
+ .btn-primary {
46
+ transition: all 0.3s ease;
47
+ background: linear-gradient(to right, #4361ee, #3f37c9);
48
+ }
49
+ .btn-primary:hover {
50
+ background: linear-gradient(to right, #3f37c9, #4361ee);
51
+ transform: translateY(-3px);
52
+ box-shadow: 0 10px 15px -3px rgba(67, 97, 238, 0.3);
53
+ }
54
+ .stats-card {
55
+ transition: all 0.3s ease;
56
+ }
57
+ .stats-card:hover {
58
+ transform: scale(1.05);
59
+ }
60
+ .testimonial-card {
61
+ transition: all 0.3s ease;
62
+ }
63
+ .testimonial-card:hover {
64
+ box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
65
+ }
66
+ .animate-float {
67
+ animation: float 6s ease-in-out infinite;
68
+ }
69
+ @keyframes float {
70
+ 0% { transform: translateY(0px); }
71
+ 50% { transform: translateY(-20px); }
72
+ 100% { transform: translateY(0px); }
73
+ }
74
+ .section-divider {
75
+ height: 8px;
76
+ background: linear-gradient(to right, #4361ee, #3f37c9, #4cc9f0);
77
+ }
78
+ </style>
79
+ </head>
80
+ <body class="font-body bg-light text-dark">
81
+ <!-- Header -->
82
+ <header class="sticky top-0 z-50 bg-white shadow-md">
83
+ <div class="container mx-auto px-4 py-3 flex justify-between items-center">
84
+ <div class="flex items-center">
85
+ <div class="bg-primary w-12 h-12 rounded-full flex items-center justify-center mr-3">
86
+ <i class="fas fa-child text-white text-2xl"></i>
87
+ </div>
88
+ <h1 class="font-heading text-2xl font-bold text-primary">Children Urban Hub</h1>
89
+ </div>
90
+
91
+ <nav class="hidden md:flex space-x-8">
92
+ <a href="#" class="font-medium hover:text-primary transition">Home</a>
93
+ <a href="#" class="font-medium hover:text-primary transition">About</a>
94
+ <a href="#" class="font-medium hover:text-primary transition">Programs</a>
95
+ <a href="#" class="font-medium hover:text-primary transition">Resources</a>
96
+ <a href="#" class="font-medium hover:text-primary transition">Events</a>
97
+ <a href="#" class="font-medium hover:text-primary transition">Contact</a>
98
+ </nav>
99
+
100
+ <div class="flex items-center space-x-4">
101
+ <button class="hidden md:block bg-primary hover:bg-secondary text-white font-medium py-2 px-6 rounded-full transition">
102
+ Donate
103
+ </button>
104
+ <button class="md:hidden text-primary">
105
+ <i class="fas fa-bars text-2xl"></i>
106
+ </button>
107
+ </div>
108
+ </div>
109
+ </header>
110
+
111
+ <!-- Hero Section -->
112
+ <section class="hero-bg text-white py-20 md:py-32">
113
+ <div class="container mx-auto px-4 flex flex-col md:flex-row items-center">
114
+ <div class="md:w-1/2 mb-12 md:mb-0">
115
+ <h1 class="font-heading text-4xl md:text-5xl lg:text-6xl font-bold mb-6 leading-tight">
116
+ Empowering Children in Urban Communities
117
+ </h1>
118
+ <p class="text-xl mb-8 max-w-lg">
119
+ Creating safe spaces, educational opportunities, and support networks for children in urban environments.
120
+ </p>
121
+ <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">
122
+ <button class="btn-primary text-white font-bold py-3 px-8 rounded-full text-lg">
123
+ Get Involved
124
+ </button>
125
+ <button class="bg-white text-primary font-bold py-3 px-8 rounded-full text-lg hover:bg-gray-100 transition">
126
+ Learn More
127
+ </button>
128
+ </div>
129
+ </div>
130
+ <div class="md:w-1/2 flex justify-center">
131
+ <div class="relative">
132
+ <div class="bg-white bg-opacity-20 backdrop-blur-sm rounded-2xl p-6 max-w-md animate-float">
133
+ <div class="bg-white rounded-xl p-6 shadow-lg">
134
+ <div class="flex justify-between items-center mb-4">
135
+ <h3 class="font-heading text-xl font-bold text-primary">Our Impact</h3>
136
+ <i class="fas fa-chart-line text-primary text-2xl"></i>
137
+ </div>
138
+ <div class="space-y-4">
139
+ <div>
140
+ <div class="flex justify-between mb-1">
141
+ <span class="font-medium">Children Supported</span>
142
+ <span class="font-bold">8,420</span>
143
+ </div>
144
+ <div class="w-full bg-gray-200 rounded-full h-2.5">
145
+ <div class="bg-accent h-2.5 rounded-full" style="width: 85%"></div>
146
+ </div>
147
+ </div>
148
+ <div>
149
+ <div class="flex justify-between mb-1">
150
+ <span class="font-medium">Programs Active</span>
151
+ <span class="font-bold">24</span>
152
+ </div>
153
+ <div class="w-full bg-gray-200 rounded-full h-2.5">
154
+ <div class="bg-success h-2.5 rounded-full" style="width: 92%"></div>
155
+ </div>
156
+ </div>
157
+ <div>
158
+ <div class="flex justify-between mb-1">
159
+ <span class="font-medium">Community Centers</span>
160
+ <span class="font-bold">12</span>
161
+ </div>
162
+ <div class="w-full bg-gray-200 rounded-full h-2.5">
163
+ <div class="bg-warning h-2.5 rounded-full" style="width: 78%"></div>
164
+ </div>
165
+ </div>
166
+ </div>
167
+ </div>
168
+ </div>
169
+ <div class="absolute -bottom-6 -right-6 bg-accent w-24 h-24 rounded-full flex items-center justify-center shadow-xl">
170
+ <i class="fas fa-heart text-white text-3xl"></i>
171
+ </div>
172
+ </div>
173
+ </div>
174
+ </div>
175
+ </section>
176
+
177
+ <!-- Stats Section -->
178
+ <section class="py-16 bg-white">
179
+ <div class="container mx-auto px-4">
180
+ <div class="text-center mb-16">
181
+ <h2 class="font-heading text-3xl md:text-4xl font-bold mb-4">Our Community Impact</h2>
182
+ <p class="text-gray-600 max-w-2xl mx-auto">Since our inception, we've been dedicated to transforming urban communities through child-focused initiatives.</p>
183
+ </div>
184
+
185
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
186
+ <div class="stats-card bg-primary text-white rounded-2xl p-8 text-center shadow-lg">
187
+ <div class="text-5xl font-bold mb-4">15,000+</div>
188
+ <h3 class="text-xl font-semibold">Children Reached</h3>
189
+ </div>
190
+ <div class="stats-card bg-secondary text-white rounded-2xl p-8 text-center shadow-lg">
191
+ <div class="text-5xl font-bold mb-4">42</div>
192
+ <h3 class="text-xl font-semibold">Urban Centers</h3>
193
+ </div>
194
+ <div class="stats-card bg-accent text-white rounded-2xl p-8 text-center shadow-lg">
195
+ <div class="text-5xl font-bold mb-4">120+</div>
196
+ <h3 class="text-xl font-semibold">Community Programs</h3>
197
+ </div>
198
+ <div class="stats-card bg-success text-white rounded-2xl p-8 text-center shadow-lg">
199
+ <div class="text-5xl font-bold mb-4">98%</div>
200
+ <h3 class="text-xl font-semibold">Parent Satisfaction</h3>
201
+ </div>
202
+ </div>
203
+ </div>
204
+ </section>
205
+
206
+ <!-- Programs Section -->
207
+ <section class="py-20 bg-gray-50">
208
+ <div class="container mx-auto px-4">
209
+ <div class="text-center mb-16">
210
+ <h2 class="font-heading text-3xl md:text-4xl font-bold mb-4">Our Core Programs</h2>
211
+ <p class="text-gray-600 max-w-2xl mx-auto">We offer comprehensive programs designed to support children's development and well-being in urban environments.</p>
212
+ </div>
213
+
214
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-10">
215
+ <!-- Program 1 -->
216
+ <div class="card-hover bg-white rounded-2xl overflow-hidden shadow-xl">
217
+ <div class="h-48 bg-gradient-to-r from-primary to-secondary flex items-center justify-center">
218
+ <i class="fas fa-book-open text-white text-6xl"></i>
219
+ </div>
220
+ <div class="p-8">
221
+ <h3 class="font-heading text-2xl font-bold mb-3">Educational Support</h3>
222
+ <p class="text-gray-600 mb-6">Tutoring, homework help, and educational resources to bridge the achievement gap in underserved communities.</p>
223
+ <a href="#" class="text-primary font-medium flex items-center">
224
+ Learn more
225
+ <i class="fas fa-arrow-right ml-2"></i>
226
+ </a>
227
+ </div>
228
+ </div>
229
+
230
+ <!-- Program 2 -->
231
+ <div class="card-hover bg-white rounded-2xl overflow-hidden shadow-xl">
232
+ <div class="h-48 bg-gradient-to-r from-accent to-primary flex items-center justify-center">
233
+ <i class="fas fa-utensils text-white text-6xl"></i>
234
+ </div>
235
+ <div class="p-8">
236
+ <h3 class="font-heading text-2xl font-bold mb-3">Nutrition Initiative</h3>
237
+ <p class="text-gray-600 mb-6">Providing healthy meals and nutrition education to ensure children have the foundation for growth.</p>
238
+ <a href="#" class="text-primary font-medium flex items-center">
239
+ Learn more
240
+ <i class="fas fa-arrow-right ml-2"></i>
241
+ </a>
242
+ </div>
243
+ </div>
244
+
245
+ <!-- Program 3 -->
246
+ <div class="card-hover bg-white rounded-2xl overflow-hidden shadow-xl">
247
+ <div class="h-48 bg-gradient-to-r from-success to-accent flex items-center justify-center">
248
+ <i class="fas fa-heartbeat text-white text-6xl"></i>
249
+ </div>
250
+ <div class="p-8">
251
+ <h3 class="font-heading text-2xl font-bold mb-3">Mental Health Support</h3>
252
+ <p class="text-gray-600 mb-6">Counseling services and emotional support programs to address the unique challenges urban children face.</p>
253
+ <a href="#" class="text-primary font-medium flex items-center">
254
+ Learn more
255
+ <i class="fas fa-arrow-right ml-2"></i>
256
+ </a>
257
+ </div>
258
+ </div>
259
+ </div>
260
+ </div>
261
+ </section>
262
+
263
+ <!-- Testimonials -->
264
+ <section class="py-20 bg-white">
265
+ <div class="container mx-auto px-4">
266
+ <div class="text-center mb-16">
267
+ <h2 class="font-heading text-3xl md:text-4xl font-bold mb-4">Community Voices</h2>
268
+ <p class="text-gray-600 max-w-2xl mx-auto">Hear from families and community members whose lives have been transformed by our programs.</p>
269
+ </div>
270
+
271
+ <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
272
+ <!-- Testimonial 1 -->
273
+ <div class="testimonial-card bg-gray-50 rounded-2xl p-8 shadow-md">
274
+ <div class="flex items-center mb-6">
275
+ <div class="w-16 h-16 rounded-full bg-gray-300 overflow-hidden mr-4">
276
+ <img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1287&q=80" alt="User" class="w-full h-full object-cover">
277
+ </div>
278
+ <div>
279
+ <h4 class="font-bold text-lg">Michael Johnson</h4>
280
+ <p class="text-gray-600">Parent</p>
281
+ </div>
282
+ </div>
283
+ <p class="text-gray-700 italic mb-6">"The after-school program has been a game-changer for my son. He's more confident, his grades have improved, and he's excited to learn."</p>
284
+ <div class="flex text-warning">
285
+ <i class="fas fa-star"></i>
286
+ <i class="fas fa-star"></i>
287
+ <i class="fas fa-star"></i>
288
+ <i class="fas fa-star"></i>
289
+ <i class="fas fa-star"></i>
290
+ </div>
291
+ </div>
292
+
293
+ <!-- Testimonial 2 -->
294
+ <div class="testimonial-card bg-gray-50 rounded-2xl p-8 shadow-md">
295
+ <div class="flex items-center mb-6">
296
+ <div class="w-16 h-16 rounded-full bg-gray-300 overflow-hidden mr-4">
297
+ <img src="https://images.unsplash.com/photo-1544005313-94ddf0286df2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1288&q=80" alt="User" class="w-full h-full object-cover">
298
+ </div>
299
+ <div>
300
+ <h4 class="font-bold text-lg">Sarah Williams</h4>
301
+ <p class="text-gray-600">Community Leader</p>
302
+ </div>
303
+ </div>
304
+ <p class="text-gray-700 italic mb-6">"Children Urban Hub has brought our neighborhood together. The community garden project has created a space where families connect and children learn valuable life skills."</p>
305
+ <div class="flex text-warning">
306
+ <i class="fas fa-star"></i>
307
+ <i class="fas fa-star"></i>
308
+ <i class="fas fa-star"></i>
309
+ <i class="fas fa-star"></i>
310
+ <i class="fas fa-star"></i>
311
+ </div>
312
+ </div>
313
+
314
+ <!-- Testimonial 3 -->
315
+ <div class="testimonial-card bg-gray-50 rounded-2xl p-8 shadow-md">
316
+ <div class="flex items-center mb-6">
317
+ <div class="w-16 h-16 rounded-full bg-gray-300 overflow-hidden mr-4">
318
+ <img src="https://images.unsplash.com/photo-1560250097-0b93528c311a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1287&q=80" alt="User" class="w-full h-full object-cover">
319
+ </div>
320
+ <div>
321
+ <h4 class="font-bold text-lg">David Chen</h4>
322
+ <p class="text-gray-600">Volunteer</p>
323
+ </div>
324
+ </div>
325
+ <p class="text-gray-700 italic mb-6">"Volunteering with Children Urban Hub has been incredibly rewarding. Seeing the impact we have on children's lives motivates me to continue contributing to our community."</p>
326
+ <div class="flex text-warning">
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
+ <i class="fas fa-star-half-alt"></i>
332
+ </div>
333
+ </div>
334
+ </div>
335
+ </div>
336
+ </section>
337
+
338
+ <!-- CTA Section -->
339
+ <section class="py-20 bg-gradient-to-r from-primary to-secondary text-white">
340
+ <div class="container mx-auto px-4 text-center">
341
+ <h2 class="font-heading text-3xl md:text-4xl font-bold mb-6">Join Us in Making a Difference</h2>
342
+ <p class="text-xl max-w-2xl mx-auto mb-10">Your support helps us create safe spaces and opportunities for children in urban communities.</p>
343
+ <div class="flex flex-col sm:flex-row justify-center space-y-4 sm:space-y-0 sm:space-x-6">
344
+ <button class="btn-primary text-white font-bold py-4 px-10 rounded-full text-lg">
345
+ <i class="fas fa-hand-holding-heart mr-2"></i> Donate Now
346
+ </button>
347
+ <button class="bg-white text-primary font-bold py-4 px-10 rounded-full text-lg hover:bg-gray-100 transition">
348
+ <i class="fas fa-hands-helping mr-2"></i> Volunteer
349
+ </button>
350
+ </div>
351
+ </div>
352
+ </section>
353
+
354
+ <!-- Footer -->
355
+ <footer class="bg-dark text-white pt-16 pb-8">
356
+ <div class="container mx-auto px-4">
357
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-10 mb-12">
358
+ <div>
359
+ <div class="flex items-center mb-6">
360
+ <div class="bg-primary w-10 h-10 rounded-full flex items-center justify-center mr-3">
361
+ <i class="fas fa-child text-white text-xl"></i>
362
+ </div>
363
+ <h3 class="font-heading text-2xl font-bold">Children Urban Hub</h3>
364
+ </div>
365
+ <p class="text-gray-400 mb-6">Creating safe spaces and opportunities for children in urban communities since 2010.</p>
366
+ <div class="flex space-x-4">
367
+ <a href="#" class="text-gray-400 hover:text-white transition">
368
+ <i class="fab fa-facebook-f text-xl"></i>
369
+ </a>
370
+ <a href="#" class="text-gray-400 hover:text-white transition">
371
+ <i class="fab fa-twitter text-xl"></i>
372
+ </a>
373
+ <a href="#" class="text-gray-400 hover:text-white transition">
374
+ <i class="fab fa-instagram text-xl"></i>
375
+ </a>
376
+ <a href="#" class="text-gray-400 hover:text-white transition">
377
+ <i class="fab fa-linkedin-in text-xl"></i>
378
+ </a>
379
+ </div>
380
+ </div>
381
+
382
+ <div>
383
+ <h4 class="font-heading text-xl font-bold mb-6">Quick Links</h4>
384
+ <ul class="space-y-3">
385
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Home</a></li>
386
+ <li><a href="#" class="text-gray-400 hover:text-white transition">About Us</a></li>
387
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Programs</a></li>
388
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Events</a></li>
389
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Resources</a></li>
390
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Contact</a></li>
391
+ </ul>
392
+ </div>
393
+
394
+ <div>
395
+ <h4 class="font-heading text-xl font-bold mb-6">Programs</h4>
396
+ <ul class="space-y-3">
397
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Educational Support</a></li>
398
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Nutrition Initiative</a></li>
399
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Mental Health Support</a></li>
400
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Arts & Creativity</a></li>
401
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Sports & Recreation</a></li>
402
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Community Gardens</a></li>
403
+ </ul>
404
+ </div>
405
+
406
+ <div>
407
+ <h4 class="font-heading text-xl font-bold mb-6">Contact Us</h4>
408
+ <ul class="space-y-4">
409
+ <li class="flex items-start">
410
+ <i class="fas fa-map-marker-alt text-primary mt-1 mr-3"></i>
411
+ <span class="text-gray-400">123 Community Street, Urban City, UC 10001</span>
412
+ </li>
413
+ <li class="flex items-center">
414
+ <i class="fas fa-phone-alt text-primary mr-3"></i>
415
+ <span class="text-gray-400">(123) 456-7890</span>
416
+ </li>
417
+ <li class="flex items-center">
418
+ <i class="fas fa-envelope text-primary mr-3"></i>
419
+ <span class="text-gray-400">info@childrenurbanhub.org</span>
420
+ </li>
421
+ </ul>
422
+ </div>
423
+ </div>
424
+
425
+ <div class="pt-8 border-t border-gray-800 text-center text-gray-500">
426
+ <p>&copy; 2023 Children Urban Hub. All rights reserved.</p>
427
+ </div>
428
+ </div>
429
+ </footer>
430
+ <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=NaderFayed07/draft-2" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
431
+ </html>