Hugging Face's logo

Spaces:
dodey917
/
communityconnect-hub
Running

App Files Community
communityconnect-hub
File size: 7,697 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
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Programs & Services - CommunityConnect Hub</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="bg-gradient-to-r from-primary-600 to-secondary-600 text-white py-20">
        <div class="container mx-auto px-6">
            <h1 class="text-4xl lg:text-5xl font-bold mb-4">Our Programs & Services</h1>
            <p class="text-xl text-primary-100">Discover the wide range of programs designed to support and empower our community.</p>
        </div>
    </section>

    <!-- Programs Grid -->
    <section class="py-20">
        <div class="container mx-auto px-6">
            <div id="programs-container" class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
                <!-- Programs will be loaded here -->
            </div>
        </div>
    </section>

    <!-- Services 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">Additional Services</h2>
                <div class="w-24 h-1 bg-secondary-500 mx-auto"></div>
            </div>
            <div id="services-container" class="grid md:grid-cols-2 gap-8">
                <!-- Services will be loaded here -->
            </div>
        </div>
    </section>

    <!-- CTA Section -->
    <section class="py-20 bg-primary-600 text-white">
        <div class="container mx-auto px-6 text-center">
            <h2 class="text-3xl font-bold mb-4">Ready to Join a Program?</h2>
            <p class="text-xl mb-8 text-primary-100">Take the first step towards personal and community growth.</p>
            <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 inline-block">
                Get Started Today
            </a>
        </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>
        document.addEventListener('DOMContentLoaded', async () => {
            feather.replace();
            
            // Load programs
            const programsContainer = document.getElementById('programs-container');
            programsContainer.innerHTML = '<div class="col-span-full text-center py-8">Loading programs...</div>';
            
            try {
                const programs = await api.getPrograms();
                programsContainer.innerHTML = programs.map(program => `
                    <div class="bg-white rounded-xl p-6 shadow-lg hover:shadow-xl transition-all hover:-translate-y-1">
                        <div class="bg-${program.color}-100 w-16 h-16 rounded-lg flex items-center justify-center mb-4">
                            <i data-feather="${program.icon}" class="w-8 h-8 text-${program.color}-600"></i>
                        </div>
                        <h3 class="text-xl font-semibold mb-3">${program.title}</h3>
                        <p class="text-gray-600 mb-4">${program.description}</p>
                        <ul class="space-y-2 mb-4">
                            ${program.features.map(feature => `
                                <li class="flex items-start">
                                    <i data-feather="check-circle" class="w-5 h-5 text-green-500 mr-2 mt-0.5 flex-shrink-0"></i>
                                    <span class="text-sm text-gray-600">${feature}</span>
                                </li>
                            `).join('')}
                        </ul>
                        <button class="w-full bg-${program.color}-600 text-white py-2 rounded-lg hover:bg-${program.color}-700 transition-colors">
                            Learn More
                        </button>
                    </div>
                `).join('');
                feather.replace();
            } catch (error) {
                programsContainer.innerHTML = '<div class="col-span-full text-center text-gray-500">Unable to load programs at this time.</div>';
            }
            
            // Load services
            const servicesContainer = document.getElementById('services-container');
            servicesContainer.innerHTML = '<div class="text-center py-8">Loading services...</div>';
            
            try {
                const services = await api.getServices();
                servicesContainer.innerHTML = services.map(service => `
                    <div class="flex items-start space-x-4 p-6 bg-gray-50 rounded-xl hover:bg-gray-100 transition-colors">
                        <div class="bg-secondary-100 p-3 rounded-lg flex-shrink-0">
                            <i data-feather="${service.icon}" class="w-8 h-8 text-secondary-600"></i>
                        </div>
                        <div class="flex-1">
                            <h3 class="text-xl font-semibold mb-2">${service.title}</h3>
                            <p class="text-gray-600 mb-3">${service.description}</p>
                            <div class="flex flex-wrap gap-2">
                                ${service.tags.map(tag => `
                                    <span class="bg-secondary-100 text-secondary-700 px-3 py-1 rounded-full text-sm">${tag}</span>
                                `).join('')}
                            </div>
                        </div>
                    </div>
                `).join('');
                feather.replace();
            } catch (error) {
                servicesContainer.innerHTML = '<div class="text-center text-gray-500">Unable to load services at this time.</div>';
            }
        });
    </script>
</body>
</html>