Hugging Face's logo

Spaces:
NaderFayed07
/
draft
Running

App Files Community
draft
File size: 17,611 Bytes 
6036aba
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Children Urban Hub - Empowering Young Minds</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        .hero-gradient {
            background: linear-gradient(135deg, #f6d365 0%, #fda085 100%);
        }
        .card-hover:hover {
            transform: translateY(-5px);
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
        }
        .animate-float {
            animation: float 6s ease-in-out infinite;
        }
        @keyframes float {
            0% { transform: translateY(0px); }
            50% { transform: translateY(-20px); }
            100% { transform: translateY(0px); }
        }
    </style>
</head>
<body class="font-sans antialiased text-gray-800">
    <!-- Navigation -->
    <nav class="bg-white shadow-md sticky top-0 z-50">
        <div class="container mx-auto px-4 py-3 flex justify-between items-center">
            <div class="flex items-center space-x-2">
                <i class="fas fa-child text-3xl text-orange-500"></i>
                <a href="#" class="text-2xl font-bold text-gray-800">Children Urban Hub</a>
            </div>
            <div class="hidden md:flex space-x-8">
                <a href="#" class="text-orange-500 font-medium">Home</a>
                <a href="#" class="hover:text-orange-500 transition">Programs</a>
                <a href="#" class="hover:text-orange-500 transition">Events</a>
                <a href="#" class="hover:text-orange-500 transition">Resources</a>
                <a href="#" class="hover:text-orange-500 transition">About Us</a>
            </div>
            <button class="md:hidden text-gray-600 focus:outline-none">
                <i class="fas fa-bars text-2xl"></i>
            </button>
            <div class="hidden md:block">
                <button class="bg-orange-500 hover:bg-orange-600 text-white px-6 py-2 rounded-full font-medium transition">Donate</button>
            </div>
        </div>
    </nav>

    <!-- Hero Section -->
    <section class="hero-gradient text-white">
        <div class="container mx-auto px-4 py-20 md:py-32 flex flex-col md:flex-row items-center">
            <div class="md:w-1/2 mb-10 md:mb-0">
                <h1 class="text-4xl md:text-6xl font-bold mb-6">Empowering Urban Youth Through Education</h1>
                <p class="text-xl mb-8">We provide safe spaces, educational programs, and mentorship to help children in urban environments thrive.</p>
                <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">
                    <button class="bg-white text-orange-500 hover:bg-gray-100 px-8 py-3 rounded-full font-bold transition">Join Our Programs</button>
                    <button class="border-2 border-white hover:bg-white hover:text-orange-500 px-8 py-3 rounded-full font-bold transition">Learn More</button>
                </div>
            </div>
            <div class="md:w-1/2 flex justify-center">
                <img src="https://images.unsplash.com/photo-1523050854058-8df90110c9f1?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" 
                     alt="Happy children learning" 
                     class="rounded-xl shadow-2xl w-full max-w-md animate-float">
            </div>
        </div>
    </section>

    <!-- Stats Section -->
    <section class="bg-gray-50 py-16">
        <div class="container mx-auto px-4">
            <div class="grid grid-cols-1 md:grid-cols-4 gap-8 text-center">
                <div class="bg-white p-8 rounded-xl shadow-md">
                    <div class="text-5xl font-bold text-orange-500 mb-2">5,000+</div>
                    <div class="text-gray-600">Children Helped</div>
                </div>
                <div class="bg-white p-8 rounded-xl shadow-md">
                    <div class="text-5xl font-bold text-orange-500 mb-2">50+</div>
                    <div class="text-gray-600">Urban Centers</div>
                </div>
                <div class="bg-white p-8 rounded-xl shadow-md">
                    <div class="text-5xl font-bold text-orange-500 mb-2">200+</div>
                    <div class="text-gray-600">Dedicated Volunteers</div>
                </div>
                <div class="bg-white p-8 rounded-xl shadow-md">
                    <div class="text-5xl font-bold text-orange-500 mb-2">15</div>
                    <div class="text-gray-600">Years of Service</div>
                </div>
            </div>
        </div>
    </section>

    <!-- Programs Section -->
    <section class="py-20">
        <div class="container mx-auto px-4">
            <div class="text-center mb-16">
                <h2 class="text-3xl md:text-4xl font-bold mb-4">Our Programs</h2>
                <p class="text-xl text-gray-600 max-w-2xl mx-auto">We offer diverse programs designed to nurture young minds and create opportunities for growth.</p>
            </div>
            
            <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
                <div class="bg-white rounded-xl overflow-hidden shadow-lg card-hover transition duration-300">
                    <img src="https://images.unsplash.com/photo-1542816417-098367527d41?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" 
                         alt="After School Program" 
                         class="w-full h-48 object-cover">
                    <div class="p-6">
                        <div class="text-orange-500 mb-2"><i class="fas fa-school mr-2"></i>Education</div>
                        <h3 class="text-xl font-bold mb-3">After School Learning</h3>
                        <p class="text-gray-600 mb-4">Our after-school programs provide homework help, tutoring, and educational enrichment activities.</p>
                        <button class="text-orange-500 font-medium hover:text-orange-600 transition">Learn More →</button>
                    </div>
                </div>
                
                <div class="bg-white rounded-xl overflow-hidden shadow-lg card-hover transition duration-300">
                    <img src="https://images.unsplash.com/photo-1541178735493-479c1a27ed24?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" 
                         alt="Arts Program" 
                         class="w-full h-48 object-cover">
                    <div class="p-6">
                        <div class="text-orange-500 mb-2"><i class="fas fa-paint-brush mr-2"></i>Creativity</div>
                        <h3 class="text-xl font-bold mb-3">Creative Arts Studio</h3>
                        <p class="text-gray-600 mb-4">We nurture creativity through music, painting, drama, and other artistic expressions.</p>
                        <button class="text-orange-500 font-medium hover:text-orange-600 transition">Learn More →</button>
                    </div>
                </div>
                
                <div class="bg-white rounded-xl overflow-hidden shadow-lg card-hover transition duration-300">
                    <img src="https://images.unsplash.com/photo-1542626991-cbc4e32524cc?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" 
                         alt="Sports Program" 
                         class="w-full h-48 object-cover">
                    <div class="p-6">
                        <div class="text-orange-500 mb-2"><i class="fas fa-running mr-2"></i>Fitness</div>
                        <h3 class="text-xl font-bold mb-3">Urban Sports League</h3>
                        <p class="text-gray-600 mb-4">Team sports and physical activities to promote health, teamwork, and discipline.</p>
                        <button class="text-orange-500 font-medium hover:text-orange-600 transition">Learn More →</button>
                    </div>
                </div>
            </div>
            
            <div class="text-center mt-12">
                <button class="border-2 border-orange-500 text-orange-500 hover:bg-orange-500 hover:text-white px-8 py-3 rounded-full font-bold transition">View All Programs</button>
            </div>
        </div>
    </section>

    <!-- Testimonials -->
    <section class="bg-orange-50 py-20">
        <div class="container mx-auto px-4">
            <div class="text-center mb-16">
                <h2 class="text-3xl md:text-4xl font-bold mb-4">Success Stories</h2>
                <p class="text-xl text-gray-600 max-w-2xl mx-auto">Hear from children and families whose lives we've impacted.</p>
            </div>
            
            <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
                <div class="bg-white p-8 rounded-xl shadow-md">
                    <div class="flex items-center mb-6">
                        <img src="https://randomuser.me/api/portraits/women/32.jpg" 
                             alt="Maria's mom" 
                             class="w-16 h-16 rounded-full object-cover mr-4">
                        <div>
                            <div class="font-bold">Maria's Mom</div>
                            <div class="text-gray-500">Parent</div>
                        </div>
                    </div>
                    <p class="text-gray-700 italic mb-6">"The after-school program gave Maria the confidence she needed. Her grades improved dramatically and she's now excited about learning."</p>
                    <div class="text-orange-400">
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                    </div>
                </div>
                
                <div class="bg-white p-8 rounded-xl shadow-md">
                    <div class="flex items-center mb-6">
                        <img src="https://randomuser.me/api/portraits/men/45.jpg" 
                             alt="Jamal" 
                             class="w-16 h-16 rounded-full object-cover mr-4">
                        <div>
                            <div class="font-bold">Jamal</div>
                            <div class="text-gray-500">Age 14, Program Participant</div>
                        </div>
                    </div>
                    <p class="text-gray-700 italic mb-6">"I never thought I could be good at anything until I joined the robotics program. Now I want to be an engineer when I grow up!"</p>
                    <div class="text-orange-400">
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Call to Action -->
    <section class="py-20 bg-gray-900 text-white">
        <div class="container mx-auto px-4 text-center">
            <h2 class="text-3xl md:text-4xl font-bold mb-6">Join Us in Making a Difference</h2>
            <p class="text-xl mb-8 max-w-2xl mx-auto">Whether you want to volunteer, donate, or enroll your child, we welcome you to be part of our community.</p>
            <div class="flex flex-col sm:flex-row justify-center space-y-4 sm:space-y-0 sm:space-x-4">
                <button class="bg-orange-500 hover:bg-orange-600 text-white px-8 py-3 rounded-full font-bold transition">Become a Volunteer</button>
                <button class="bg-white hover:bg-gray-100 text-gray-900 px-8 py-3 rounded-full font-bold transition">Make a Donation</button>
            </div>
        </div>
    </section>

    <!-- Footer -->
    <footer class="bg-gray-800 text-white pt-16 pb-8">
        <div class="container mx-auto px-4">
            <div class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-12">
                <div>
                    <div class="flex items-center space-x-2 mb-4">
                        <i class="fas fa-child text-3xl text-orange-500"></i>
                        <div class="text-2xl font-bold">Children Urban Hub</div>
                    </div>
                    <p class="text-gray-400 mb-4">Empowering urban youth through education, creativity, and opportunity since 2008.</p>
                    <div class="flex space-x-4">
                        <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-facebook-f"></i></a>
                        <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-twitter"></i></a>
                        <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-instagram"></i></a>
                        <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-linkedin-in"></i></a>
                    </div>
                </div>
                
                <div>
                    <h3 class="text-lg font-bold mb-4">Quick Links</h3>
                    <ul class="space-y-2">
                        <li><a href="#" class="text-gray-400 hover:text-white transition">Home</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white transition">About Us</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white transition">Programs</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white transition">Events</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white transition">Volunteer</a></li>
                    </ul>
                </div>
                
                <div>
                    <h3 class="text-lg font-bold mb-4">Contact Us</h3>
                    <ul class="space-y-2 text-gray-400">
                        <li class="flex items-start">
                            <i class="fas fa-map-marker-alt mt-1 mr-3 text-orange-500"></i>
                            <span>123 Urban Way, Cityville, ST 12345</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fas fa-phone-alt mt-1 mr-3 text-orange-500"></i>
                            <span>(555) 123-4567</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fas fa-envelope mt-1 mr-3 text-orange-500"></i>
                            <span>info@childrenurbanhub.org</span>
                        </li>
                    </ul>
                </div>
                
                <div>
                    <h3 class="text-lg font-bold mb-4">Newsletter</h3>
                    <p class="text-gray-400 mb-4">Subscribe to our newsletter for updates on programs and events.</p>
                    <div class="flex">
                        <input type="email" placeholder="Your email" class="bg-gray-700 text-white px-4 py-2 rounded-l focus:outline-none focus:ring-2 focus:ring-orange-500 w-full">
                        <button class="bg-orange-500 hover:bg-orange-600 px-4 py-2 rounded-r font-medium transition">
                            <i class="fas fa-paper-plane"></i>
                        </button>
                    </div>
                </div>
            </div>
            
            <div class="border-t border-gray-700 pt-8 text-center text-gray-400">
                <p>&copy; 2023 Children Urban Hub. All rights reserved.</p>
            </div>
        </div>
    </footer>

    <script>
        // Mobile menu toggle functionality
        document.addEventListener('DOMContentLoaded', function() {
            const mobileMenuButton = document.querySelector('button.md\\:hidden');
            mobileMenuButton.addEventListener('click', function() {
                // This would toggle a mobile menu - implementation would depend on your specific needs
                alert('Mobile menu would open here in a full implementation');
            });
            
            // Smooth scrolling for anchor links
            document.querySelectorAll('a[href^="#"]').forEach(anchor => {
                anchor.addEventListener('click', function (e) {
                    e.preventDefault();
                    document.querySelector(this.getAttribute('href')).scrollIntoView({
                        behavior: 'smooth'
                    });
                });
            });
        });
    </script>
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=NaderFayed07/draft" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>