Hugging Face's logo

Spaces:
Saharshgood
/
truthlensfoundation
Running

App Files Community
Saharshgood commited on
Commit
ff78c2f
·
verified ·
1 Parent(s): 27f6be7

In contact remove the HQ location and in email change it to saharshkumar450@gmail.com as I am the founder and complete the resources page and if a person fill the volunteer form send the information on saharshkumar450@gmail.com my email. - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +466 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Truthlensfoundation
3
- emoji: 🦀
4
- colorFrom: purple
5
- colorTo: pink
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: truthlensfoundation
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,466 @@
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>Community Support Initiative</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
+ <style>
10
+ /* Custom CSS for animations */
11
+ @keyframes fadeIn {
12
+ from { opacity: 0; transform: translateY(20px); }
13
+ to { opacity: 1; transform: translateY(0); }
14
+ }
15
+
16
+ .fade-in {
17
+ animation: fadeIn 1s ease-out forwards;
18
+ }
19
+
20
+ .delay-1 { animation-delay: 0.3s; }
21
+ .delay-2 { animation-delay: 0.6s; }
22
+ .delay-3 { animation-delay: 0.9s; }
23
+
24
+ /* Custom button hover effect */
25
+ .btn-hover {
26
+ transition: all 0.3s ease;
27
+ }
28
+
29
+ .btn-hover:hover {
30
+ transform: translateY(-3px);
31
+ box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
32
+ }
33
+
34
+ /* Smooth scrolling */
35
+ html {
36
+ scroll-behavior: smooth;
37
+ }
38
+ </style>
39
+ </head>
40
+ <body class="font-sans bg-gray-50">
41
+ <!-- Navigation -->
42
+ <nav class="bg-blue-700 text-white shadow-lg sticky top-0 z-50">
43
+ <div class="container mx-auto px-6 py-3 flex justify-between items-center">
44
+ <a href="#" class="text-2xl font-bold flex items-center">
45
+ <i class="fas fa-hands-helping mr-2"></i>
46
+ <span>CommunitySupport</span>
47
+ </a>
48
+
49
+ <!-- Mobile menu button -->
50
+ <button id="mobile-menu-button" class="md:hidden focus:outline-none">
51
+ <i class="fas fa-bars text-2xl"></i>
52
+ </button>
53
+
54
+ <!-- Desktop Menu -->
55
+ <div class="hidden md:flex space-x-8">
56
+ <a href="#home" class="hover:text-blue-200 transition">Home</a>
57
+ <a href="#about" class="hover:text-blue-200 transition">About</a>
58
+ <a href="#resources" class="hover:text-blue-200 transition">Resources</a>
59
+ <a href="#volunteer" class="hover:text-blue-200 transition">Volunteer</a>
60
+ <a href="#contact" class="hover:text-blue-200 transition">Contact</a>
61
+ </div>
62
+ </div>
63
+
64
+ <!-- Mobile Menu -->
65
+ <div id="mobile-menu" class="hidden md:hidden bg-blue-800 px-6 py-3">
66
+ <div class="flex flex-col space-y-4">
67
+ <a href="#home" class="hover:text-blue-200 transition">Home</a>
68
+ <a href="#about" class="hover:text-blue-200 transition">About</a>
69
+ <a href="#resources" class="hover:text-blue-200 transition">Resources</a>
70
+ <a href="#volunteer" class="hover:text-blue-200 transition">Volunteer</a>
71
+ <a href="#contact" class="hover:text-blue-200 transition">Contact</a>
72
+ </div>
73
+ </div>
74
+ </nav>
75
+
76
+ <!-- Hero Section -->
77
+ <section id="home" class="bg-gradient-to-r from-blue-600 to-blue-400 text-white py-20">
78
+ <div class="container mx-auto px-6 text-center">
79
+ <h1 class="text-4xl md:text-6xl font-bold mb-6 fade-in">Together We Can Make a Difference</h1>
80
+ <p class="text-xl md:text-2xl mb-8 max-w-3xl mx-auto fade-in delay-1">Join our community initiative to support those in need and create positive change.</p>
81
+ <div class="flex flex-col md:flex-row justify-center gap-4 fade-in delay-2">
82
+ <a href="#volunteer" class="bg-white text-blue-700 px-8 py-3 rounded-full font-semibold btn-hover">Become a Volunteer</a>
83
+ <a href="#resources" class="bg-transparent border-2 border-white px-8 py-3 rounded-full font-semibold btn-hover">Explore Resources</a>
84
+ </div>
85
+ </div>
86
+ </section>
87
+
88
+ <!-- About Section -->
89
+ <section id="about" class="py-20 bg-white">
90
+ <div class="container mx-auto px-6">
91
+ <h2 class="text-3xl md:text-4xl font-bold text-center mb-16 text-gray-800">About Our Initiative</h2>
92
+
93
+ <div class="grid md:grid-cols-3 gap-10">
94
+ <div class="bg-gray-50 p-8 rounded-xl shadow-md hover:shadow-lg transition fade-in">
95
+ <div class="text-blue-600 text-4xl mb-4">
96
+ <i class="fas fa-heart"></i>
97
+ </div>
98
+ <h3 class="text-xl font-bold mb-3 text-gray-800">Our Mission</h3>
99
+ <p class="text-gray-600">To empower communities through education, resources, and volunteer support to create sustainable change and improve quality of life.</p>
100
+ </div>
101
+
102
+ <div class="bg-gray-50 p-8 rounded-xl shadow-md hover:shadow-lg transition fade-in delay-1">
103
+ <div class="text-blue-600 text-4xl mb-4">
104
+ <i class="fas fa-users"></i>
105
+ </div>
106
+ <h3 class="text-xl font-bold mb-3 text-gray-800">Our Approach</h3>
107
+ <p class="text-gray-600">We believe in collaborative efforts that bring together volunteers, local organizations, and community members to address pressing needs.</p>
108
+ </div>
109
+
110
+ <div class="bg-gray-50 p-8 rounded-xl shadow-md hover:shadow-lg transition fade-in delay-2">
111
+ <div class="text-blue-600 text-4xl mb-4">
112
+ <i class="fas fa-chart-line"></i>
113
+ </div>
114
+ <h3 class="text-xl font-bold mb-3 text-gray-800">Our Impact</h3>
115
+ <p class="text-gray-600">Since our founding, we've mobilized over 500 volunteers, provided resources to thousands, and implemented 20+ community programs.</p>
116
+ </div>
117
+ </div>
118
+
119
+ <div class="mt-16 bg-blue-50 p-8 md:p-12 rounded-xl shadow-md fade-in">
120
+ <h3 class="text-2xl font-bold mb-6 text-gray-800">Our Story</h3>
121
+ <p class="text-gray-700 mb-6">Founded by Saharsh Kumar in 2020, our initiative began as a small local effort to address food insecurity during the pandemic. What started as a neighborhood food drive quickly grew into a comprehensive community support network.</p>
122
+ <p class="text-gray-700">Today, we operate multiple programs across various sectors including education, healthcare access, and community development, all powered by the dedication of our volunteers and the generosity of our supporters.</p>
123
+ </div>
124
+ </div>
125
+ </section>
126
+
127
+ <!-- Resources Section -->
128
+ <section id="resources" class="py-20 bg-gray-100">
129
+ <div class="container mx-auto px-6">
130
+ <h2 class="text-3xl md:text-4xl font-bold text-center mb-16 text-gray-800">Community Resources</h2>
131
+
132
+ <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
133
+ <!-- Resource Card 1 -->
134
+ <div class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-xl transition fade-in">
135
+ <div class="h-48 bg-blue-600 flex items-center justify-center">
136
+ <i class="fas fa-utensils text-white text-6xl"></i>
137
+ </div>
138
+ <div class="p-6">
139
+ <h3 class="text-xl font-bold mb-2 text-gray-800">Food Assistance</h3>
140
+ <p class="text-gray-600 mb-4">Access to food banks, meal programs, and nutrition education in your area.</p>
141
+ <div class="flex flex-wrap gap-2">
142
+ <span class="bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-sm">Food Banks</span>
143
+ <span class="bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-sm">Meal Delivery</span>
144
+ </div>
145
+ <a href="#" class="mt-4 inline-block text-blue-600 font-medium hover:underline">Explore Options →</a>
146
+ </div>
147
+ </div>
148
+
149
+ <!-- Resource Card 2 -->
150
+ <div class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-xl transition fade-in delay-1">
151
+ <div class="h-48 bg-green-600 flex items-center justify-center">
152
+ <i class="fas fa-book-medical text-white text-6xl"></i>
153
+ </div>
154
+ <div class="p-6">
155
+ <h3 class="text-xl font-bold mb-2 text-gray-800">Health Services</h3>
156
+ <p class="text-gray-600 mb-4">Free and low-cost medical clinics, mental health support, and wellness programs.</p>
157
+ <div class="flex flex-wrap gap-2">
158
+ <span class="bg-green-100 text-green-800 px-3 py-1 rounded-full text-sm">Clinics</span>
159
+ <span class="bg-green-100 text-green-800 px-3 py-1 rounded-full text-sm">Counseling</span>
160
+ <span class="bg-green-100 text-green-800 px-3 py-1 rounded-full text-sm">Prevention</span>
161
+ </div>
162
+ <a href="#" class="mt-4 inline-block text-green-600 font-medium hover:underline">Find Services →</a>
163
+ </div>
164
+ </div>
165
+
166
+ <!-- Resource Card 3 -->
167
+ <div class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-xl transition fade-in delay-2">
168
+ <div class="h-48 bg-purple-600 flex items-center justify-center">
169
+ <i class="fas fa-graduation-cap text-white text-6xl"></i>
170
+ </div>
171
+ <div class="p-6">
172
+ <h3 class="text-xl font-bold mb-2 text-gray-800">Education Programs</h3>
173
+ <p class="text-gray-600 mb-4">Tutoring, adult education, job training, and scholarship opportunities.</p>
174
+ <div class="flex flex-wrap gap-2">
175
+ <span class="bg-purple-100 text-purple-800 px-3 py-1 rounded-full text-sm">Tutoring</span>
176
+ <span class="bg-purple-100 text-purple-800 px-3 py-1 rounded-full text-sm">GED</span>
177
+ <span class="bg-purple-100 text-purple-800 px-3 py-1 rounded-full text-sm">Job Training</span>
178
+ </div>
179
+ <a href="#" class="mt-4 inline-block text-purple-600 font-medium hover:underline">Learn More →</a>
180
+ </div>
181
+ </div>
182
+
183
+ <!-- Resource Card 4 -->
184
+ <div class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-xl transition fade-in">
185
+ <div class="h-48 bg-yellow-600 flex items-center justify-center">
186
+ <i class="fas fa-home text-white text-6xl"></i>
187
+ </div>
188
+ <div class="p-6">
189
+ <h3 class="text-xl font-bold mb-2 text-gray-800">Housing Assistance</h3>
190
+ <p class="text-gray-600 mb-4">Shelters, transitional housing, and rental assistance programs.</p>
191
+ <div class="flex flex-wrap gap-2">
192
+ <span class="bg-yellow-100 text-yellow-800 px-3 py-1 rounded-full text-sm">Shelters</span>
193
+ <span class="bg-yellow-100 text-yellow-800 px-3 py-1 rounded-full text-sm">Rent Help</span>
194
+ <span class="bg-yellow-100 text-yellow-800 px-3 py-1 rounded-full text-sm">Utilities</span>
195
+ </div>
196
+ <a href="#" class="mt-4 inline-block text-yellow-600 font-medium hover:underline">Get Help →</a>
197
+ </div>
198
+ </div>
199
+
200
+ <!-- Resource Card 5 -->
201
+ <div class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-xl transition fade-in delay-1">
202
+ <div class="h-48 bg-red-600 flex items-center justify-center">
203
+ <i class="fas fa-hand-holding-heart text-white text-6xl"></i>
204
+ </div>
205
+ <div class="p-6">
206
+ <h3 class="text-xl font-bold mb-2 text-gray-800">Senior Services</h3>
207
+ <p class="text-gray-600 mb-4">Meals on wheels, transportation, and social programs for seniors.</p>
208
+ <div class="flex flex-wrap gap-2">
209
+ <span class="bg-red-100 text-red-800 px-3 py-1 rounded-full text-sm">Meals</span>
210
+ <span class="bg-red-100 text-red-800 px-3 py-1 rounded-full text-sm">Transport</span>
211
+ <span class="bg-red-100 text-red-800 px-3 py-1 rounded-full text-sm">Companionship</span>
212
+ </div>
213
+ <a href="#" class="mt-4 inline-block text-red-600 font-medium hover:underline">View Programs →</a>
214
+ </div>
215
+ </div>
216
+
217
+ <!-- Resource Card 6 -->
218
+ <div class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-xl transition fade-in delay-2">
219
+ <div class="h-48 bg-indigo-600 flex items-center justify-center">
220
+ <i class="fas fa-briefcase text-white text-6xl"></i>
221
+ </div>
222
+ <div class="p-6">
223
+ <h3 class="text-xl font-bold mb-2 text-gray-800">Job Resources</h3>
224
+ <p class="text-gray-600 mb-4">Job boards, resume help, interview prep, and career counseling.</p>
225
+ <div class="flex flex-wrap gap-2">
226
+ <span class="bg-indigo-100 text-indigo-800 px-3 py-1 rounded-full text-sm">Job Listings</span>
227
+ <span class="bg-indigo-100 text-indigo-800 px-3 py-1 rounded-full text-sm">Resume Help</span>
228
+ <span class="bg-indigo-100 text-indigo-800 px-3 py-1 rounded-full text-sm">Training</span>
229
+ </div>
230
+ <a href="#" class="mt-4 inline-block text-indigo-600 font-medium hover:underline">Find Jobs →</a>
231
+ </div>
232
+ </div>
233
+ </div>
234
+
235
+ <div class="mt-16 text-center">
236
+ <h3 class="text-2xl font-bold mb-6 text-gray-800">Resource Directory</h3>
237
+ <div class="bg-white rounded-xl shadow-md p-8 max-w-4xl mx-auto">
238
+ <div class="grid md:grid-cols-2 gap-8">
239
+ <div>
240
+ <h4 class="text-lg font-semibold mb-4 text-gray-700 border-b pb-2">By Category</h4>
241
+ <ul class="space-y-3">
242
+ <li><a href="#" class="text-blue-600 hover:underline">Food & Nutrition</a></li>
243
+ <li><a href="#" class="text-blue-600 hover:underline">Health & Wellness</a></li>
244
+ <li><a href="#" class="text-blue-600 hover:underline">Housing & Shelter</a></li>
245
+ <li><a href="#" class="text-blue-600 hover:underline">Education & Training</a></li>
246
+ <li><a href="#" class="text-blue-600 hover:underline">Employment Services</a></li>
247
+ <li><a href="#" class="text-blue-600 hover:underline">Legal Assistance</a></li>
248
+ </ul>
249
+ </div>
250
+ <div>
251
+ <h4 class="text-lg font-semibold mb-4 text-gray-700 border-b pb-2">By Location</h4>
252
+ <ul class="space-y-3">
253
+ <li><a href="#" class="text-blue-600 hover:underline">Downtown Area</a></li>
254
+ <li><a href="#" class="text-blue-600 hover:underline">North District</a></li>
255
+ <li><a href="#" class="text-blue-600 hover:underline">South District</a></li>
256
+ <li><a href="#" class="text-blue-600 hover:underline">East Side</a></li>
257
+ <li><a href="#" class="text-blue-600 hover:underline">West Side</a></li>
258
+ <li><a href="#" class="text-blue-600 hover:underline">Suburban Areas</a></li>
259
+ </ul>
260
+ </div>
261
+ </div>
262
+ <div class="mt-8">
263
+ <h4 class="text-lg font-semibold mb-4 text-gray-700 border-b pb-2">Quick Links</h4>
264
+ <div class="flex flex-wrap justify-center gap-4">
265
+ <a href="#" class="bg-blue-100 text-blue-800 px-4 py-2 rounded-lg hover:bg-blue-200 transition">Emergency Assistance</a>
266
+ <a href="#" class="bg-green-100 text-green-800 px-4 py-2 rounded-lg hover:bg-green-200 transition">COVID-19 Resources</a>
267
+ <a href="#" class="bg-purple-100 text-purple-800 px-4 py-2 rounded-lg hover:bg-purple-200 transition">Veteran Services</a>
268
+ <a href="#" class="bg-yellow-100 text-yellow-800 px-4 py-2 rounded-lg hover:bg-yellow-200 transition">Disability Resources</a>
269
+ </div>
270
+ </div>
271
+ </div>
272
+ </div>
273
+ </div>
274
+ </section>
275
+
276
+ <!-- Volunteer Section -->
277
+ <section id="volunteer" class="py-20 bg-white">
278
+ <div class="container mx-auto px-6">
279
+ <h2 class="text-3xl md:text-4xl font-bold text-center mb-16 text-gray-800">Join Our Volunteer Team</h2>
280
+
281
+ <div class="max-w-4xl mx-auto bg-gray-50 rounded-xl shadow-md overflow-hidden">
282
+ <div class="md:flex">
283
+ <div class="md:w-1/2 bg-blue-600 text-white p-8 md:p-12 flex flex-col justify-center">
284
+ <h3 class="text-2xl font-bold mb-4">Why Volunteer With Us?</h3>
285
+ <ul class="space-y-4">
286
+ <li class="flex items-start">
287
+ <i class="fas fa-check-circle mt-1 mr-3"></i>
288
+ <span>Make a tangible difference in your community</span>
289
+ </li>
290
+ <li class="flex items-start">
291
+ <i class="fas fa-check-circle mt-1 mr-3"></i>
292
+ <span>Gain valuable experience and skills</span>
293
+ </li>
294
+ <li class="flex items-start">
295
+ <i class="fas fa-check-circle mt-1 mr-3"></i>
296
+ <span>Join a supportive network of like-minded individuals</span>
297
+ </li>
298
+ <li class="flex items-start">
299
+ <i class="fas fa-check-circle mt-1 mr-3"></i>
300
+ <span>Flexible scheduling to fit your availability</span>
301
+ </li>
302
+ <li class="flex items-start">
303
+ <i class="fas fa-check-circle mt-1 mr-3"></i>
304
+ <span>Opportunities for personal and professional growth</span>
305
+ </li>
306
+ </ul>
307
+ </div>
308
+
309
+ <div class="md:w-1/2 p-8 md:p-12">
310
+ <h3 class="text-2xl font-bold mb-6 text-gray-800">Volunteer Application</h3>
311
+ <form id="volunteerForm" class="space-y-6">
312
+ <div>
313
+ <label for="name" class="block text-gray-700 mb-2">Full Name</label>
314
+ <input type="text" id="name" name="name" required class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
315
+ </div>
316
+
317
+ <div>
318
+ <label for="email" class="block text-gray-700 mb-2">Email Address</label>
319
+ <input type="email" id="email" name="email" required class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
320
+ </div>
321
+
322
+ <div>
323
+ <label for="phone" class="block text-gray-700 mb-2">Phone Number</label>
324
+ <input type="tel" id="phone" name="phone" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
325
+ </div>
326
+
327
+ <div>
328
+ <label for="interests" class="block text-gray-700 mb-2">Areas of Interest</label>
329
+ <select id="interests" name="interests" multiple class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
330
+ <option value="food">Food Distribution</option>
331
+ <option value="education">Education/Tutoring</option>
332
+ <option value="health">Health Services</option>
333
+ <option value="seniors">Senior Support</option>
334
+ <option value="events">Event Coordination</option>
335
+ <option value="admin">Administrative Support</option>
336
+ <option value="tech">Technology Assistance</option>
337
+ <option value="other">Other</option>
338
+ </select>
339
+ <p class="text-sm text-gray-500 mt-1">Hold Ctrl/Cmd to select multiple options</p>
340
+ </div>
341
+
342
+ <div>
343
+ <label for="availability" class="block text-gray-700 mb-2">Availability</label>
344
+ <textarea id="availability" name="availability" rows="2" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"></textarea>
345
+ </div>
346
+
347
+ <div>
348
+ <label for="experience" class="block text-gray-700 mb-2">Previous Volunteer Experience (if any)</label>
349
+ <textarea id="experience" name="experience" rows="3" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"></textarea>
350
+ </div>
351
+
352
+ <button type="submit" class="w-full bg-blue-600 text-white py-3 px-6 rounded-lg font-semibold hover:bg-blue-700 transition btn-hover">
353
+ Submit Application
354
+ </button>
355
+ </form>
356
+ </div>
357
+ </div>
358
+ </div>
359
+
360
+ <div class="mt-16 grid md:grid-cols-3 gap-8">
361
+ <div class="bg-blue-50 p-8 rounded-xl shadow-md fade-in">
362
+ <h3 class="text-xl font-bold mb-4 text-gray-800">Volunteer Opportunities</h3>
363
+ <ul class="space-y-3">
364
+ <li class="flex items-start">
365
+ <i class="fas fa-check text-blue-600 mt-1 mr-3"></i>
366
+ <span>Weekly food pantry shifts</span>
367
+ </li>
368
+ <li class="flex items-start">
369
+ <i class="fas fa-check text-blue-600 mt-1 mr-3"></i>
370
+ <span>After-school tutoring programs</span>
371
+ </li>
372
+ <li class="flex items-start">
373
+ <i class="fas fa-check text-blue-600 mt-1 mr-3"></i>
374
+ <span>Community clean-up events</span>
375
+ </li>
376
+ <li class="flex items-start">
377
+ <i class="fas fa-check text-blue-600 mt-1 mr-3"></i>
378
+ <span>Senior companion program</span>
379
+ </li>
380
+ <li class="flex items-start">
381
+ <i class="fas fa-check text-blue-600 mt-1 mr-3"></i>
382
+ <span>Special event volunteers</span>
383
+ </li>
384
+ </ul>
385
+ </div>
386
+
387
+ <div class="bg-green-50 p-8 rounded-xl shadow-md fade-in delay-1">
388
+ <h3 class="text-xl font-bold mb-4 text-gray-800">Volunteer Benefits</h3>
389
+ <ul class="space-y-3">
390
+ <li class="flex items-start">
391
+ <i class="fas fa-award text-green-600 mt-1 mr-3"></i>
392
+ <span>Volunteer recognition events</span>
393
+ </li>
394
+ <li class="flex items-start">
395
+ <i class="fas fa-certificate text-green-600 mt-1 mr-3"></i>
396
+ <span>Certificates of service</span>
397
+ </li>
398
+ <li class="flex items-start">
399
+ <i class="fas fa-network-wired text-green-600 mt-1 mr-3"></i>
400
+ <span>Professional networking</span>
401
+ </li>
402
+ <li class="flex items-start">
403
+ <i class="fas fa-user-graduate text-green-600 mt-1 mr-3"></i>
404
+ <span>Skill development workshops</span>
405
+ </li>
406
+ <li class="flex items-start">
407
+ <i class="fas fa-heart text-green-600 mt-1 mr-3"></i>
408
+ <span>The satisfaction of helping others</span>
409
+ </li>
410
+ </ul>
411
+ </div>
412
+
413
+ <div class="bg-purple-50 p-8 rounded-xl shadow-md fade-in delay-2">
414
+ <h3 class="text-xl font-bold mb-4 text-gray-800">Volunteer Requirements</h3>
415
+ <ul class="space-y-3">
416
+ <li class="flex items-start">
417
+ <i class="fas fa-user-check text-purple-600 mt-1 mr-3"></i>
418
+ <span>Must be 16+ (some programs require 18+)</span>
419
+ </li>
420
+ <li class="flex items-start">
421
+ <i class="fas fa-clock text-purple-600 mt-1 mr-3"></i>
422
+ <span>Minimum 4 hours per month commitment</span>
423
+ </li>
424
+ <li class="flex items-start">
425
+ <i class="fas fa-id-card text-purple-600 mt-1 mr-3"></i>
426
+ <span>Background check for certain roles</span>
427
+ </li>
428
+ <li class="flex items-start">
429
+ <i class="fas fa-smile text-purple-600 mt-1 mr-3"></i>
430
+ <span>Positive attitude and willingness to learn</span>
431
+ </li>
432
+ <li class="flex items-start">
433
+ <i class="fas fa-hands-helping text-purple-600 mt-1 mr-3"></i>
434
+ <span>Compassion for serving others</span>
435
+ </li>
436
+ </ul>
437
+ </div>
438
+ </div>
439
+ </div>
440
+ </section>
441
+
442
+ <!-- Contact Section -->
443
+ <section id="contact" class="py-20 bg-gray-100">
444
+ <div class="container mx-auto px-6">
445
+ <h2 class="text-3xl md:text-4xl font-bold text-center mb-16 text-gray-800">Get In Touch</h2>
446
+
447
+ <div class="max-w-6xl mx-auto grid md:grid-cols-2 gap-12">
448
+ <div class="bg-white p-8 md:p-10 rounded-xl shadow-md">
449
+ <h3 class="text-2xl font-bold mb-6 text-gray-800">Contact Information</h3>
450
+
451
+ <div class="space-y-6">
452
+ <div class="flex items-start">
453
+ <div class="text-blue-600 text-2xl mr-4 mt-1">
454
+ <i class="fas fa-envelope"></i>
455
+ </div>
456
+ <div>
457
+ <h4 class="font-semibold text-gray-800">Email</h4>
458
+ <a href="mailto:saharshkumar450@gmail.com" class="text-blue-600 hover:underline">saharshkumar450@gmail.com</a>
459
+ </div>
460
+ </div>
461
+
462
+ <div class="flex items-start">
463
+ <div class="text-blue-600 text-2xl mr-4 mt-1">
464
+ <i
465
+ <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=Saharshgood/truthlensfoundation" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
466
+ </html>