Hugging Face's logo

Spaces:
dodey917
/
communityconnect-hub
Running

App Files Community
communityconnect-hub
File size: 15,095 Bytes
9d36be7
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CommunityConnect Hub - Building Stronger Communities Together</title>
    <link rel="icon" type="image/x-icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🌟</text></svg>">
    <link rel="stylesheet" href="style.css">
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
    <script src="https://unpkg.com/feather-icons"></script>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: {
                            50: '#eff6ff',
                            100: '#dbeafe',
                            200: '#bfdbfe',
                            300: '#93c5fd',
                            400: '#60a5fa',
                            500: '#3b82f6',
                            600: '#2563eb',
                            700: '#1d4ed8',
                            800: '#1e40af',
                            900: '#1e3a8a',
                        },
                        secondary: {
                            50: '#f0fdfa',
                            100: '#ccfbf1',
                            200: '#99f6e4',
                            300: '#5eead4',
                            400: '#2dd4bf',
                            500: '#14b8a6',
                            600: '#0d9488',
                            700: '#0f766e',
                            800: '#115e59',
                            900: '#134e4a',
                        }
                    }
                }
            }
        }
    </script>
</head>
<body class="bg-gray-50">
    <!-- Navigation Component -->
    <custom-navbar></custom-navbar>

    <!-- Hero Section -->
    <section class="relative bg-gradient-to-br from-primary-600 to-secondary-600 text-white overflow-hidden">
        <div class="absolute inset-0 bg-black opacity-20"></div>
        <div class="relative container mx-auto px-6 py-24 lg:py-32">
            <div class="grid lg:grid-cols-2 gap-12 items-center">
                <div>
                    <h1 class="text-4xl lg:text-6xl font-bold mb-6 animate-fade-in">
                        Welcome to CommunityConnect Hub
                    </h1>
                    <p class="text-xl lg:text-2xl mb-8 text-primary-100">
                        Empowering communities through collaboration, education, and meaningful connections.
                    </p>
                    <div class="flex flex-col sm:flex-row gap-4">
                        <a href="#get-involved" class="bg-white text-primary-600 px-8 py-4 rounded-lg font-semibold hover:bg-gray-100 transition-colors">
                            Get Involved
                        </a>
                        <a href="programs.html" class="border-2 border-white text-white px-8 py-4 rounded-lg font-semibold hover:bg-white hover:text-primary-600 transition-colors">
                            Our Programs
                        </a>
                    </div>
                </div>
                <div class="hidden lg:block">
                    <img src="https://static.photos/people/640x360/42" alt="Community" class="rounded-2xl shadow-2xl">
                </div>
            </div>
        </div>
    </section>

    <!-- Mission Section -->
    <section class="py-20 bg-white">
        <div class="container mx-auto px-6">
            <div class="text-center mb-12">
                <h2 class="text-3xl lg:text-4xl font-bold text-gray-800 mb-4">Our Mission</h2>
                <div class="w-24 h-1 bg-secondary-500 mx-auto"></div>
            </div>
            <div class="grid md:grid-cols-3 gap-8">
                <div class="text-center p-6 rounded-xl hover:shadow-xl transition-shadow">
                    <div class="w-16 h-16 bg-primary-100 rounded-full flex items-center justify-center mx-auto mb-4">
                        <i data-feather="users" class="w-8 h-8 text-primary-600"></i>
                    </div>
                    <h3 class="text-xl font-semibold mb-3">Unite Communities</h3>
                    <p class="text-gray-600">Bringing people together regardless of background to build lasting relationships and support networks.</p>
                </div>
                <div class="text-center p-6 rounded-xl hover:shadow-xl transition-shadow">
                    <div class="w-16 h-16 bg-secondary-100 rounded-full flex items-center justify-center mx-auto mb-4">
                        <i data-feather="book-open" class="w-8 h-8 text-secondary-600"></i>
                    </div>
                    <h3 class="text-xl font-semibold mb-3">Educate & Empower</h3>
                    <p class="text-gray-600">Providing resources and learning opportunities to help community members thrive and grow.</p>
                </div>
                <div class="text-center p-6 rounded-xl hover:shadow-xl transition-shadow">
                    <div class="w-16 h-16 bg-primary-100 rounded-full flex items-center justify-center mx-auto mb-4">
                        <i data-feather="heart" class="w-8 h-8 text-primary-600"></i>
                    </div>
                    <h3 class="text-xl font-semibold mb-3">Make Impact</h3>
                    <p class="text-gray-600">Creating positive change through targeted programs and collaborative community initiatives.</p>
                </div>
            </div>
        </div>
    </section>

    <!-- Programs Preview -->
    <section class="py-20 bg-gray-50">
        <div class="container mx-auto px-6">
            <div class="text-center mb-12">
                <h2 class="text-3xl lg:text-4xl font-bold text-gray-800 mb-4">Our Programs & Services</h2>
                <div class="w-24 h-1 bg-secondary-500 mx-auto"></div>
            </div>
            <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
                <div class="bg-white rounded-xl p-6 hover:shadow-lg transition-all hover:-translate-y-1">
                    <i data-feather="award" class="w-12 h-12 text-primary-500 mb-4"></i>
                    <h3 class="text-lg font-semibold mb-2">Youth Programs</h3>
                    <p class="text-gray-600 text-sm mb-4">Mentorship and educational programs for young community members.</p>
                    <a href="programs.html" class="text-primary-600 font-medium text-sm hover:underline">Learn More →</a>
                </div>
                <div class="bg-white rounded-xl p-6 hover:shadow-lg transition-all hover:-translate-y-1">
                    <i data-feather="briefcase" class="w-12 h-12 text-secondary-500 mb-4"></i>
                    <h3 class="text-lg font-semibold mb-2">Career Development</h3>
                    <p class="text-gray-600 text-sm mb-4">Job training and career advancement opportunities.</p>
                    <a href="programs.html" class="text-primary-600 font-medium text-sm hover:underline">Learn More →</a>
                </div>
                <div class="bg-white rounded-xl p-6 hover:shadow-lg transition-all hover:-translate-y-1">
                    <i data-feather="activity" class="w-12 h-12 text-primary-500 mb-4"></i>
                    <h3 class="text-lg font-semibold mb-2">Health & Wellness</h3>
                    <p class="text-gray-600 text-sm mb-4">Health initiatives and wellness programs for all ages.</p>
                    <a href="programs.html" class="text-primary-600 font-medium text-sm hover:underline">Learn More →</a>
                </div>
                <div class="bg-white rounded-xl p-6 hover:shadow-lg transition-all hover:-translate-y-1">
                    <i data-feather="calendar" class="w-12 h-12 text-secondary-500 mb-4"></i>
                    <h3 class="text-lg font-semibold mb-2">Community Events</h3>
                    <p class="text-gray-600 text-sm mb-4">Regular events and gatherings to strengthen bonds.</p>
                    <a href="programs.html" class="text-primary-600 font-medium text-sm hover:underline">Learn More →</a>
                </div>
            </div>
        </div>
    </section>

    <!-- Upcoming Events -->
    <section class="py-20 bg-white">
        <div class="container mx-auto px-6">
            <div class="text-center mb-12">
                <h2 class="text-3xl lg:text-4xl font-bold text-gray-800 mb-4">Upcoming Events</h2>
                <div class="w-24 h-1 bg-secondary-500 mx-auto"></div>
            </div>
            <div id="events-container" class="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
                <!-- Events will be loaded here -->
            </div>
            <div class="text-center mt-8">
                <a href="events.html" class="inline-flex items-center bg-primary-600 text-white px-6 py-3 rounded-lg hover:bg-primary-700 transition-colors">
                    View All Events
                    <i data-feather="arrow-right" class="w-5 h-5 ml-2"></i>
                </a>
            </div>
        </div>
    </section>

    <!-- Member Spotlights -->
    <section class="py-20 bg-gradient-to-br from-primary-50 to-secondary-50">
        <div class="container mx-auto px-6">
            <div class="text-center mb-12">
                <h2 class="text-3xl lg:text-4xl font-bold text-gray-800 mb-4">Member Spotlights</h2>
                <div class="w-24 h-1 bg-secondary-500 mx-auto"></div>
            </div>
            <div id="spotlights-container" class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
                <!-- Member spotlights will be loaded here -->
            </div>
            <div class="text-center mt-8">
                <a href="members.html" class="inline-flex items-center bg-secondary-600 text-white px-6 py-3 rounded-lg hover:bg-secondary-700 transition-colors">
                    Meet All Members
                    <i data-feather="arrow-right" class="w-5 h-5 ml-2"></i>
                </a>
            </div>
        </div>
    </section>

    <!-- CTA Section -->
    <section id="get-involved" class="py-20 bg-primary-600 text-white">
        <div class="container mx-auto px-6 text-center">
            <h2 class="text-3xl lg:text-4xl font-bold mb-4">Ready to Make a Difference?</h2>
            <p class="text-xl mb-8 text-primary-100">Join us in building a stronger, more connected community.</p>
            <div class="flex flex-col sm:flex-row gap-4 justify-center">
                <a href="get-involved.html" class="bg-white text-primary-600 px-8 py-4 rounded-lg font-semibold hover:bg-gray-100 transition-colors">
                    Get Involved Now
                </a>
                <a href="donate.html" class="border-2 border-white text-white px-8 py-4 rounded-lg font-semibold hover:bg-white hover:text-primary-600 transition-colors">
                    Support Our Mission
                </a>
            </div>
        </div>
    </section>

    <!-- Footer Component -->
    <custom-footer></custom-footer>

    <!-- Scripts -->
    <script src="components/navbar.js"></script>
    <script src="components/footer.js"></script>
    <script src="script.js"></script>
    <script src="api.js"></script>
    <script>
        // Load events and spotlights
        document.addEventListener('DOMContentLoaded', async () => {
            feather.replace();
            
            // Load upcoming events
            const eventsContainer = document.getElementById('events-container');
            eventsContainer.innerHTML = '<div class="col-span-full text-center py-8">Loading events...</div>';
            
            try {
                const events = await api.getUpcomingEvents(3);
                eventsContainer.innerHTML = events.map(event => `
                    <div class="bg-white rounded-xl p-6 shadow-lg hover:shadow-xl transition-shadow">
                        <div class="flex items-center mb-4">
                            <div class="bg-primary-100 p-3 rounded-lg mr-4">
                                <i data-feather="calendar" class="w-6 h-6 text-primary-600"></i>
                            </div>
                            <div>
                                <p class="text-sm text-gray-500">${new Date(event.date).toLocaleDateString('en-US', { month: 'long', day: 'numeric' })}</p>
                                <p class="text-sm text-gray-500">${event.time}</p>
                            </div>
                        </div>
                        <h3 class="text-lg font-semibold mb-2">${event.title}</h3>
                        <p class="text-gray-600 text-sm mb-4">${event.description}</p>
                        <p class="text-sm text-gray-500 flex items-center">
                            <i data-feather="map-pin" class="w-4 h-4 mr-1"></i>
                            ${event.location}
                        </p>
                    </div>
                `).join('');
                feather.replace();
            } catch (error) {
                eventsContainer.innerHTML = '<div class="col-span-full text-center text-gray-500">Unable to load events at this time.</div>';
            }
            
            // Load member spotlights
            const spotlightsContainer = document.getElementById('spotlights-container');
            spotlightsContainer.innerHTML = '<div class="col-span-full text-center py-8">Loading member spotlights...</div>';
            
            try {
                const members = await api.getMemberSpotlights(3);
                spotlightsContainer.innerHTML = members.map(member => `
                    <div class="bg-white rounded-xl p-6 text-center hover:shadow-xl transition-shadow">
                        <img src="${member.avatar}" alt="${member.name}" class="w-24 h-24 rounded-full mx-auto mb-4 object-cover">
                        <h3 class="text-xl font-semibold mb-2">${member.name}</h3>
                        <p class="text-secondary-600 text-sm mb-3">${member.role}</p>
                        <p class="text-gray-600 text-sm mb-4">"${member.testimonial}"</p>
                        <div class="flex justify-center space-x-3">
                            ${member.socialLinks ? member.socialLinks.map(link => `
                                <a href="${link.url}" class="text-gray-400 hover:text-primary-600 transition-colors">
                                    <i data-feather="${link.icon}" class="w-5 h-5"></i>
                                </a>
                            `).join('') : ''}
                        </div>
                    </div>
                `).join('');
                feather.replace();
            } catch (error) {
                spotlightsContainer.innerHTML = '<div class="col-span-full text-center text-gray-500">Unable to load member spotlights at this time.</div>';
            }
        });
    </script>
<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
</body>
</html>