Hugging Face's logo

Spaces:
Saharshgood
/
truthlens-foundation
Running

App Files Community
Saharshgood commited on
Commit
10a62ec
·
verified ·
1 Parent(s): bd1a9cb

Make a website for A corruption identify Indian NGO Truthlens foundation. We use RTI to identify corruption. But as now we are working not exposed any scams. But bihar is on high suspect. Newly created ngo and we don't take funds we just need volunteers and make a page where volunteers can apply - Follow Up Deployment

Browse files
Files changed (1) hide show
  1. index.html +302 -392
index.html CHANGED
@@ -3,491 +3,401 @@
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>TruthLens Foundation - Fighting Corruption in India</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 */
11
  .hero-gradient {
12
- background: linear-gradient(135deg, rgba(30, 64, 175, 0.9) 0%, rgba(29, 78, 216, 0.8) 50%, rgba(30, 58, 138, 0.9) 100%);
13
  }
14
- .impact-card:hover {
15
- transform: translateY(-5px);
16
- box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
17
- }
18
- .nav-link:hover::after {
19
- content: '';
20
- display: block;
21
  width: 100%;
22
- height: 2px;
23
- background: white;
24
- margin-top: 2px;
25
  }
26
- .stats-counter {
27
- transition: all 0.3s ease;
 
 
 
28
  }
29
- .whistleblower-form {
30
- box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
31
  }
32
- .marquee {
33
- animation: marquee 20s linear infinite;
 
34
  }
35
- @keyframes marquee {
36
- 0% { transform: translateX(0); }
37
- 100% { transform: translateX(-50%); }
38
  }
39
  </style>
40
  </head>
41
- <body class="font-sans antialiased">
42
- <!-- Top Alert Bar -->
43
- <div class="bg-red-600 text-white py-2 px-4 text-center">
44
- <div class="container mx-auto flex justify-between items-center">
45
- <div class="marquee whitespace-nowrap overflow-hidden">
46
- <span class="inline-block mr-8"><i class="fas fa-exclamation-triangle mr-2"></i> Report corruption anonymously - Your identity protected</span>
47
- <span class="inline-block mr-8"><i class="fas fa-chart-line mr-2"></i> Over 1,200 corruption cases exposed in 2023</span>
48
- <span class="inline-block mr-8"><i class="fas fa-award mr-2"></i> Winner of National Integrity Award 2023</span>
49
- </div>
50
- <button class="bg-white text-red-600 px-3 py-1 rounded-md text-sm font-semibold hover:bg-gray-100">Report Now</button>
51
- </div>
52
- </div>
53
-
54
  <!-- Navigation -->
55
- <nav class="bg-blue-900 text-white shadow-lg">
56
- <div class="container mx-auto px-4 py-3 flex justify-between items-center">
57
- <div class="flex items-center space-x-2">
58
- <i class="fas fa-search-dollar text-2xl text-yellow-400"></i>
59
- <div>
60
- <h1 class="text-xl font-bold">TruthLens Foundation</h1>
61
- <p class="text-xs text-blue-200">Identifying Corruption • Ensuring Accountability</p>
 
 
 
 
 
 
 
 
 
 
 
 
62
  </div>
63
  </div>
64
-
65
- <div class="hidden md:flex space-x-8 items-center">
66
- <a href="#home" class="nav-link font-medium">Home</a>
67
- <a href="#about" class="nav-link font-medium">About</a>
68
- <a href="#impact" class="nav-link font-medium">Impact</a>
69
- <a href="#cases" class="nav-link font-medium">Cases</a>
70
- <a href="#report" class="nav-link font-medium">Report</a>
71
- <a href="#contact" class="nav-link font-medium">Contact</a>
72
- <button class="bg-yellow-500 text-blue-900 px-4 py-2 rounded-md font-semibold hover:bg-yellow-400 transition">Donate</button>
73
- </div>
74
-
75
- <button class="md:hidden text-2xl" id="mobile-menu-button">
76
- <i class="fas fa-bars"></i>
77
- </button>
78
  </div>
79
-
80
- <!-- Mobile Menu -->
81
- <div class="md:hidden hidden bg-blue-800" id="mobile-menu">
82
- <div class="px-4 py-2 flex flex-col space-y-3">
83
- <a href="#home" class="block py-2">Home</a>
84
- <a href="#about" class="block py-2">About</a>
85
- <a href="#impact" class="block py-2">Impact</a>
86
- <a href="#cases" class="block py-2">Cases</a>
87
- <a href="#report" class="block py-2">Report</a>
88
- <a href="#contact" class="block py-2">Contact</a>
89
- <button class="bg-yellow-500 text-blue-900 px-4 py-2 rounded-md font-semibold hover:bg-yellow-400 transition w-full">Donate</button>
90
  </div>
91
  </div>
92
  </nav>
93
 
94
  <!-- Hero Section -->
95
- <section id="home" class="hero-gradient text-white py-20 md:py-32">
96
- <div class="container mx-auto px-4 flex flex-col md:flex-row items-center">
97
- <div class="md:w-1/2 mb-10 md:mb-0">
98
- <h1 class="text-4xl md:text-5xl font-bold mb-6">Exposing Corruption, Restoring Trust</h1>
99
- <p class="text-lg mb-8 text-blue-100">TruthLens Foundation is India's premier anti-corruption watchdog, using cutting-edge technology and investigative journalism to uncover corruption at all levels.</p>
100
- <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">
101
- <button class="bg-yellow-500 text-blue-900 px-6 py-3 rounded-md font-semibold hover:bg-yellow-400 transition">Report Corruption</button>
102
- <button class="bg-transparent border-2 border-white px-6 py-3 rounded-md font-semibold hover:bg-white hover:text-blue-900 transition">Learn More</button>
 
 
103
  </div>
104
- </div>
105
- <div class="md:w-1/2 flex justify-center">
106
  <div class="relative">
107
- <img src="https://images.unsplash.com/photo-1581092918056-0c4c3acd3789?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80" alt="Anti-corruption protest" class="rounded-lg shadow-2xl w-full max-w-lg">
108
- <div class="absolute -bottom-5 -right-5 bg-white text-blue-900 p-4 rounded-lg shadow-lg w-64">
109
- <div class="flex items-center">
110
- <div class="bg-blue-100 p-3 rounded-full mr-3">
111
- <i class="fas fa-shield-alt text-blue-600"></i>
112
- </div>
113
- <div>
114
- <p class="font-bold text-sm">100% Anonymous</p>
115
- <p class="text-xs">Whistleblower Protection</p>
116
- </div>
117
- </div>
118
  </div>
119
  </div>
120
  </div>
121
  </div>
122
- </section>
123
-
124
- <!-- Stats Section -->
125
- <section class="bg-gray-50 py-12">
126
- <div class="container mx-auto px-4">
127
- <div class="grid grid-cols-2 md:grid-cols-4 gap-6 text-center">
128
- <div class="bg-white p-6 rounded-lg shadow-sm stats-counter">
129
- <div class="text-4xl font-bold text-blue-900 mb-2" id="cases-exposed">0</div>
130
- <p class="text-gray-600">Cases Exposed</p>
131
- </div>
132
- <div class="bg-white p-6 rounded-lg shadow-sm stats-counter">
133
- <div class="text-4xl font-bold text-blue-900 mb-2" id="officials-exposed">0</div>
134
- <p class="text-gray-600">Officials Exposed</p>
135
- </div>
136
- <div class="bg-white p-6 rounded-lg shadow-sm stats-counter">
137
- <div class="text-4xl font-bold text-blue-900 mb-2" id="money-recovered">0</div>
138
- <p class="text-gray-600">₹ Crore Recovered</p>
139
- </div>
140
- <div class="bg-white p-6 rounded-lg shadow-sm stats-counter">
141
- <div class="text-4xl font-bold text-blue-900 mb-2" id="whistleblowers">0</div>
142
- <p class="text-gray-600">Whistleblowers</p>
143
- </div>
144
- </div>
145
  </div>
146
  </section>
147
 
148
  <!-- About Section -->
149
  <section id="about" class="py-20 bg-white">
150
- <div class="container mx-auto px-4">
151
  <div class="text-center mb-16">
152
- <h2 class="text-3xl font-bold text-blue-900 mb-4">Our Mission</h2>
153
- <div class="w-20 h-1 bg-yellow-500 mx-auto"></div>
154
  </div>
155
-
156
- <div class="flex flex-col md:flex-row items-center">
157
- <div class="md:w-1/2 mb-10 md:mb-0 md:pr-10">
158
- <h3 class="text-2xl font-semibold text-gray-800 mb-6">Shining Light on Corruption Across India</h3>
159
- <p class="text-gray-600 mb-6">Founded in 2015, TruthLens Foundation has emerged as India's most trusted anti-corruption organization. We combine investigative journalism, data analysis, and whistleblower protection to expose corruption in government, business, and public services.</p>
160
- <p class="text-gray-600 mb-6">Our team of former journalists, data scientists, and legal experts work tirelessly to ensure transparency and accountability in public life.</p>
161
- <div class="flex space-x-4">
162
- <div class="bg-blue-100 p-4 rounded-lg">
163
- <i class="fas fa-eye text-blue-600 text-2xl mb-2"></i>
164
- <p class="font-semibold">Transparency</p>
165
- </div>
166
- <div class="bg-blue-100 p-4 rounded-lg">
167
- <i class="fas fa-balance-scale text-blue-600 text-2xl mb-2"></i>
168
- <p class="font-semibold">Accountability</p>
169
- </div>
170
- <div class="bg-blue-100 p-4 rounded-lg">
171
- <i class="fas fa-shield-alt text-blue-600 text-2xl mb-2"></i>
172
- <p class="font-semibold">Protection</p>
173
- </div>
174
  </div>
175
  </div>
176
- <div class="md:w-1/2">
177
- <div class="relative">
178
- <img src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80" alt="Team meeting" class="rounded-lg shadow-lg w-full">
179
- <div class="absolute -bottom-5 -left-5 bg-yellow-500 text-white p-4 rounded-lg shadow-lg">
180
- <p class="font-bold">Since 2015</p>
181
- <p class="text-sm">Fighting Corruption</p>
182
- </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
183
  </div>
184
  </div>
185
  </div>
186
  </div>
187
  </section>
188
 
189
- <!-- Impact Section -->
190
- <section id="impact" class="py-20 bg-gray-50">
191
- <div class="container mx-auto px-4">
192
  <div class="text-center mb-16">
193
- <h2 class="text-3xl font-bold text-blue-900 mb-4">Our Impact</h2>
194
- <p class="text-gray-600 max-w-2xl mx-auto">We've made significant strides in the fight against corruption. Here are some of our notable achievements.</p>
195
- <div class="w-20 h-1 bg-yellow-500 mx-auto mt-4"></div>
196
  </div>
197
-
198
  <div class="grid md:grid-cols-3 gap-8">
199
- <div class="bg-white p-8 rounded-lg shadow-md impact-card transition">
200
- <div class="text-blue-600 text-4xl mb-4">
201
- <i class="fas fa-landmark"></i>
202
  </div>
203
- <h3 class="text-xl font-semibold mb-3">Government Accountability</h3>
204
- <p class="text-gray-600">Exposed ₹2,300 crore in misappropriated funds across 17 state governments, leading to 43 arrests and policy reforms.</p>
205
  </div>
206
- <div class="bg-white p-8 rounded-lg shadow-md impact-card transition">
207
- <div class="text-blue-600 text-4xl mb-4">
208
- <i class="fas fa-hospital"></i>
209
  </div>
210
- <h3 class="text-xl font-semibold mb-3">Healthcare Corruption</h3>
211
- <p class="text-gray-600">Uncovered fake medicine supply chains in 5 states, protecting millions from substandard medications.</p>
212
  </div>
213
- <div class="bg-white p-8 rounded-lg shadow-md impact-card transition">
214
- <div class="text-blue-600 text-4xl mb-4">
215
- <i class="fas fa-graduation-cap"></i>
216
  </div>
217
- <h3 class="text-xl font-semibold mb-3">Education Sector</h3>
218
- <p class="text-gray-600">Revealed corruption in school meal programs affecting 1.2 million children, leading to systemic improvements.</p>
219
  </div>
220
  </div>
221
- </div>
222
- </section>
223
-
224
- <!-- Recent Cases Section -->
225
- <section id="cases" class="py-20 bg-white">
226
- <div class="container mx-auto px-4">
227
- <div class="text-center mb-16">
228
- <h2 class="text-3xl font-bold text-blue-900 mb-4">Recent Cases</h2>
229
- <p class="text-gray-600 max-w-2xl mx-auto">Some of our recent investigations that have made an impact.</p>
230
- <div class="w-20 h-1 bg-yellow-500 mx-auto mt-4"></div>
231
- </div>
232
 
233
- <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
234
- <div class="border border-gray-200 rounded-lg overflow-hidden shadow-sm hover:shadow-md transition">
235
- <img src="https://images.unsplash.com/photo-1601584115197-04ecc0da31d8?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80" alt="Construction site" class="w-full h-48 object-cover">
236
- <div class="p-6">
237
- <div class="flex justify-between items-center mb-3">
238
- <span class="bg-red-100 text-red-800 text-xs px-2 py-1 rounded">Ongoing</span>
239
- <span class="text-gray-500 text-sm">June 2023</span>
240
- </div>
241
- <h3 class="text-xl font-semibold mb-2">Road Construction Scam</h3>
242
- <p class="text-gray-600 mb-4">Exposed ₹450 crore scam in highway construction contracts in Maharashtra.</p>
243
- <a href="#" class="text-blue-600 font-medium flex items-center">Read More <i class="fas fa-arrow-right ml-2"></i></a>
244
- </div>
245
- </div>
246
-
247
- <div class="border border-gray-200 rounded-lg overflow-hidden shadow-sm hover:shadow-md transition">
248
- <img src="https://images.unsplash.com/photo-1575505586569-646b2ca898fc?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1065&q=80" alt="Medical supplies" class="w-full h-48 object-cover">
249
- <div class="p-6">
250
- <div class="flex justify-between items-center mb-3">
251
- <span class="bg-green-100 text-green-800 text-xs px-2 py-1 rounded">Resolved</span>
252
- <span class="text-gray-500 text-sm">March 2023</span>
253
- </div>
254
- <h3 class="text-xl font-semibold mb-2">COVID Supplies Fraud</h3>
255
- <p class="text-gray-600 mb-4">Uncovered inflated pricing and fake procurement of medical equipment during pandemic.</p>
256
- <a href="#" class="text-blue-600 font-medium flex items-center">Read More <i class="fas fa-arrow-right ml-2"></i></a>
257
  </div>
258
- </div>
259
-
260
- <div class="border border-gray-200 rounded-lg overflow-hidden shadow-sm hover:shadow-md transition">
261
- <img src="https://images.unsplash.com/photo-1434030216411-0b793f4b4173?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80" alt="School building" class="w-full h-48 object-cover">
262
- <div class="p-6">
263
- <div class="flex justify-between items-center mb-3">
264
- <span class="bg-green-100 text-green-800 text-xs px-2 py-1 rounded">Resolved</span>
265
- <span class="text-gray-500 text-sm">January 2023</span>
266
  </div>
267
- <h3 class="text-xl font-semibold mb-2">Mid-Day Meal Scandal</h3>
268
- <p class="text-gray-600 mb-4">Revealed diversion of funds meant for children's nutrition in Uttar Pradesh.</p>
269
- <a href="#" class="text-blue-600 font-medium flex items-center">Read More <i class="fas fa-arrow-right ml-2"></i></a>
270
  </div>
271
  </div>
272
  </div>
273
-
274
- <div class="text-center mt-12">
275
- <button class="bg-blue-900 text-white px-6 py-3 rounded-md font-semibold hover:bg-blue-800 transition">View All Cases</button>
276
- </div>
277
  </div>
278
  </section>
279
 
280
- <!-- Whistleblower Section -->
281
- <section id="report" class="py-20 bg-blue-900 text-white">
282
- <div class="container mx-auto px-4">
283
- <div class="flex flex-col lg:flex-row items-center">
284
- <div class="lg:w-1/2 mb-10 lg:mb-0 lg:pr-10">
285
- <h2 class="text-3xl font-bold mb-6">Safe & Anonymous Reporting</h2>
286
- <p class="text-blue-200 mb-8">If you have information about corruption, fraud, or misuse of public funds, we want to hear from you. Our secure platform ensures your identity remains protected.</p>
287
-
288
- <div class="space-y-6">
289
- <div class="flex items-start">
290
- <div class="bg-blue-800 p-3 rounded-full mr-4">
291
- <i class="fas fa-lock"></i>
292
- </div>
293
- <div>
294
- <h4 class="font-semibold mb-1">End-to-End Encryption</h4>
295
- <p class="text-blue-200 text-sm">All communications are encrypted and cannot be intercepted.</p>
296
- </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
297
  </div>
298
- <div class="flex items-start">
299
- <div class="bg-blue-800 p-3 rounded-full mr-4">
300
- <i class="fas fa-user-secret"></i>
 
 
 
 
301
  </div>
302
  <div>
303
- <h4 class="font-semibold mb-1">No Identity Required</h4>
304
- <p class="text-blue-200 text-sm">You don't need to provide any personal information to submit a report.</p>
305
  </div>
306
- </div>
307
- <div class="flex items-start">
308
- <div class="bg-blue-800 p-3 rounded-full mr-4">
309
- <i class="fas fa-shield-alt"></i>
310
  </div>
311
  <div>
312
- <h4 class="font-semibold mb-1">Legal Protection</h4>
313
- <p class="text-blue-200 text-sm">We work with lawyers to ensure whistleblower protection under Indian law.</p>
314
  </div>
315
- </div>
316
- </div>
317
- </div>
318
-
319
- <div class="lg:w-1/2">
320
- <div class="bg-white text-gray-800 rounded-lg p-8 whistleblower-form">
321
- <h3 class="text-2xl font-bold mb-6 text-blue-900">Report Corruption</h3>
322
-
323
- <form id="report-form">
324
- <div class="mb-4">
325
- <label class="block text-gray-700 mb-2">Type of Corruption</label>
326
- <select class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
327
- <option>Select category</option>
328
- <option>Government Corruption</option>
329
- <option>Police Misconduct</option>
330
- <option>Judicial Corruption</option>
331
- <option>Corporate Fraud</option>
332
- <option>Healthcare Fraud</option>
333
- <option>Education Sector</option>
334
- <option>Other</option>
335
  </select>
336
  </div>
337
-
338
- <div class="mb-4">
339
- <label class="block text-gray-700 mb-2">Location</label>
340
- <input type="text" placeholder="State/City" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
341
- </div>
342
-
343
- <div class="mb-4">
344
- <label class="block text-gray-700 mb-2">Details</label>
345
- <textarea rows="4" placeholder="Describe what you witnessed..." class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"></textarea>
346
- </div>
347
-
348
- <div class="mb-6">
349
- <label class="block text-gray-700 mb-2">Evidence (Optional)</label>
350
- <div class="border-2 border-dashed border-gray-300 rounded-md p-4 text-center">
351
- <i class="fas fa-cloud-upload-alt text-3xl text-gray-400 mb-2"></i>
352
- <p class="text-sm text-gray-500">Drag & drop files or click to browse</p>
353
- <input type="file" class="hidden">
354
- </div>
355
  </div>
356
-
357
- <div class="flex items-center mb-4">
358
- <input type="checkbox" id="anonymous" class="mr-2">
359
- <label for="anonymous" class="text-gray-700">Submit anonymously</label>
360
  </div>
361
-
362
- <button type="submit" class="w-full bg-blue-900 text-white py-3 rounded-md font-semibold hover:bg-blue-800 transition">Submit Report</button>
363
  </form>
364
  </div>
365
  </div>
366
  </div>
367
- </div>
368
- </section>
369
-
370
- <!-- Testimonials -->
371
- <section class="py-20 bg-gray-50">
372
- <div class="container mx-auto px-4">
373
- <div class="text-center mb-16">
374
- <h2 class="text-3xl font-bold text-blue-900 mb-4">What People Say</h2>
375
- <p class="text-gray-600 max-w-2xl mx-auto">Hear from those who have worked with us or benefited from our efforts.</p>
376
- <div class="w-20 h-1 bg-yellow-500 mx-auto mt-4"></div>
377
- </div>
378
 
379
- <div class="grid md:grid-cols-3 gap-8">
380
- <div class="bg-white p-8 rounded-lg shadow-sm">
381
- <div class="flex items-center mb-4">
382
- <div class="text-yellow-500 mr-2">
383
- <i class="fas fa-star"></i>
384
- <i class="fas fa-star"></i>
385
- <i class="fas fa-star"></i>
386
- <i class="fas fa-star"></i>
387
- <i class="fas fa-star"></i>
388
- </div>
389
  </div>
390
- <p class="text-gray-600 mb-6">"TruthLens helped expose corruption in our local municipality that was siphoning funds meant for road repairs. Their investigation led to arrests and recovery of ₹2.3 crore."</p>
391
- <div class="flex items-center">
392
- <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Testimonial" class="w-12 h-12 rounded-full mr-4">
393
- <div>
394
- <p class="font-semibold">Rajesh Kumar</p>
395
- <p class="text-sm text-gray-500">Social Activist, Bihar</p>
396
- </div>
397
- </div>
398
- </div>
399
-
400
- <div class="bg-white p-8 rounded-lg shadow-sm">
401
- <div class="flex items-center mb-4">
402
- <div class="text-yellow-500 mr-2">
403
- <i class="fas fa-star"></i>
404
- <i class="fas fa-star"></i>
405
- <i class="fas fa-star"></i>
406
- <i class="fas fa-star"></i>
407
- <i class="fas fa-star"></i>
408
- </div>
409
- </div>
410
- <p class="text-gray-600 mb-6">"As a whistleblower, I was terrified to come forward. TruthLens protected my identity while ensuring the corruption I reported was thoroughly investigated."</p>
411
- <div class="flex items-center">
412
- <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Testimonial" class="w-12 h-12 rounded-full mr-4">
413
- <div>
414
- <p class="font-semibold">Anonymous</p>
415
- <p class="text-sm text-gray-500">Government Employee</p>
416
- </div>
417
- </div>
418
- </div>
419
-
420
- <div class="bg-white p-8 rounded-lg shadow-sm">
421
- <div class="flex items-center mb-4">
422
- <div class="text-yellow-500 mr-2">
423
- <i class="fas fa-star"></i>
424
- <i class="fas fa-star"></i>
425
- <i class="fas fa-star"></i>
426
- <i class="fas fa-star"></i>
427
- <i class="fas fa-star-half-alt"></i>
428
- </div>
429
- </div>
430
- <p class="text-gray-600 mb-6">"Their data-driven approach to uncovering patterns of corruption sets them apart. The ₹87 crore education scam they exposed has led to nationwide reforms."</p>
431
- <div class="flex items-center">
432
- <img src="https://randomuser.me/api/portraits/men/75.jpg" alt="Testimonial" class="w-12 h-12 rounded-full mr-4">
433
- <div>
434
- <p class="font-semibold">Dr. Amit Patel</p>
435
- <p class="text-sm text-gray-500">Policy Analyst, Delhi</p>
436
- </div>
437
  </div>
438
  </div>
439
  </div>
440
  </div>
441
  </section>
442
 
443
- <!-- Partners -->
444
- <section class="py-16 bg-white">
445
- <div class="container mx-auto px-4">
446
- <div class="text-center mb-12">
447
- <h2 class="text-3xl font-bold text-blue-900 mb-4">Our Partners</h2>
448
- <p class="text-gray-600 max-w-2xl mx-auto">We collaborate with organizations committed to transparency and good governance.</p>
449
- <div class="w-20 h-1 bg-yellow-500 mx-auto mt-4"></div>
450
- </div>
451
-
452
- <div class="grid grid-cols-2 md:grid-cols-4 gap-8 items-center">
453
- <div class="flex justify-center">
454
- <div class="bg-gray-100 p-6 rounded-lg h-24 flex items-center">
455
- <img src="https://via.placeholder.com/150x60?text=Partner+1" alt="Partner Logo" class="max-h-12">
456
  </div>
457
  </div>
458
- <div class="flex justify-center">
459
- <div class="bg-gray-100 p-6 rounded-lg h-24 flex items-center">
460
- <img src="https://via.placeholder.com/150x60?text=Partner+2" alt="Partner Logo" class="max-h-12">
461
- </div>
 
 
 
 
462
  </div>
463
- <div class="flex justify-center">
464
- <div class="bg-gray-100 p-6 rounded-lg h-24 flex items-center">
465
- <img src="https://via.placeholder.com/150x60?text=Partner+3" alt="Partner Logo" class="max-h-12">
466
- </div>
 
 
 
 
467
  </div>
468
- <div class="flex justify-center">
469
- <div class="bg-gray-100 p-6 rounded-lg h-24 flex items-center">
470
- <img src="https://via.placeholder.com/150x60?text=Partner+4" alt="Partner Logo" class="max-h-12">
471
- </div>
 
 
 
 
 
 
 
 
472
  </div>
473
  </div>
474
- </div>
475
- </section>
476
-
477
- <!-- CTA Section -->
478
- <section class="py-20 bg-yellow-500">
479
- <div class="container mx-auto px-4 text-center">
480
- <h2 class="text-3xl font-bold text-blue-900 mb-6">Join the Fight Against Corruption</h2>
481
- <p class="text-blue-900 mb-8 max-w-2xl mx-auto">Your support helps us investigate more cases, protect more whistleblowers, and create a more transparent India.</p>
482
- <div class="flex flex-col sm:flex-row justify-center space-y-4 sm:space-y-0 sm:space-x-4">
483
- <button class="bg-blue-900 text-white px-8 py-3 rounded-md font-semibold hover:bg-blue-800 transition">Donate Now</button>
484
- <button class="bg-white text-blue-900 px-8 py-3 rounded-md font-semibold hover:bg-gray-100 transition">Volunteer</button>
485
  </div>
486
  </div>
487
- </section>
488
 
489
- <!-- Footer -->
490
- <footer id="contact" class="bg-blue-900 text-white pt-16 pb-8">
491
- <
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
492
  <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/truthlens-foundation" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
493
  </html>
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Truthlens Foundation - Fighting Corruption Through RTI</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
  .hero-gradient {
11
+ background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 100%);
12
  }
13
+ .wave-shape {
14
+ position: absolute;
15
+ bottom: 0;
16
+ left: 0;
 
 
 
17
  width: 100%;
18
+ overflow: hidden;
19
+ line-height: 0;
 
20
  }
21
+ .wave-shape svg {
22
+ position: relative;
23
+ display: block;
24
+ width: calc(100% + 1.3px);
25
+ height: 150px;
26
  }
27
+ .wave-shape .shape-fill {
28
+ fill: #FFFFFF;
29
  }
30
+ .card-hover:hover {
31
+ transform: translateY(-5px);
32
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
33
  }
34
+ .transition-all {
35
+ transition: all 0.3s ease;
 
36
  }
37
  </style>
38
  </head>
39
+ <body class="font-sans antialiased text-gray-800">
 
 
 
 
 
 
 
 
 
 
 
 
40
  <!-- Navigation -->
41
+ <nav class="bg-white shadow-md sticky top-0 z-50">
42
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
43
+ <div class="flex justify-between h-16">
44
+ <div class="flex items-center">
45
+ <div class="flex-shrink-0 flex items-center">
46
+ <i class="fas fa-eye text-blue-600 text-2xl mr-2"></i>
47
+ <span class="text-xl font-bold text-blue-600">Truthlens Foundation</span>
48
+ </div>
49
+ </div>
50
+ <div class="hidden md:ml-6 md:flex md:items-center md:space-x-8">
51
+ <a href="#home" class="text-blue-600 hover:text-blue-800 px-3 py-2 font-medium">Home</a>
52
+ <a href="#about" class="text-gray-600 hover:text-blue-600 px-3 py-2 font-medium">About</a>
53
+ <a href="#mission" class="text-gray-600 hover:text-blue-600 px-3 py-2 font-medium">Mission</a>
54
+ <a href="#volunteer" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md font-medium transition-all">Join Us</a>
55
+ </div>
56
+ <div class="-mr-2 flex items-center md:hidden">
57
+ <button type="button" id="mobile-menu-button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-600 hover:text-blue-600 focus:outline-none">
58
+ <i class="fas fa-bars text-xl"></i>
59
+ </button>
60
  </div>
61
  </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
62
  </div>
63
+ <!-- Mobile menu -->
64
+ <div id="mobile-menu" class="hidden md:hidden bg-white border-t border-gray-200">
65
+ <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
66
+ <a href="#home" class="block px-3 py-2 rounded-md text-base font-medium text-blue-600">Home</a>
67
+ <a href="#about" class="block px-3 py-2 rounded-md text-base font-medium text-gray-600 hover:text-blue-600">About</a>
68
+ <a href="#mission" class="block px-3 py-2 rounded-md text-base font-medium text-gray-600 hover:text-blue-600">Mission</a>
69
+ <a href="#volunteer" class="block px-3 py-2 rounded-md text-base font-medium bg-blue-600 text-white">Volunteer</a>
 
 
 
 
70
  </div>
71
  </div>
72
  </nav>
73
 
74
  <!-- Hero Section -->
75
+ <section id="home" class="hero-gradient relative text-white pt-20 pb-32">
76
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
77
+ <div class="lg:grid lg:grid-cols-2 lg:gap-8 items-center">
78
+ <div class="mb-12 lg:mb-0">
79
+ <h1 class="text-4xl md:text-5xl font-bold mb-6 leading-tight">Exposing Corruption Through Right to Information</h1>
80
+ <p class="text-xl mb-8 text-blue-100">We are a newly formed NGO using RTI to identify and expose corruption in public systems, with special focus on Bihar.</p>
81
+ <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">
82
+ <a href="#volunteer" class="bg-white text-blue-600 hover:bg-gray-100 px-6 py-3 rounded-md font-bold text-center transition-all">Become a Volunteer</a>
83
+ <a href="#about" class="border-2 border-white text-white hover:bg-white hover:text-blue-600 px-6 py-3 rounded-md font-bold text-center transition-all">Learn More</a>
84
+ </div>
85
  </div>
 
 
86
  <div class="relative">
87
+ <img src="https://images.unsplash.com/photo-1581093196273-b8a5a1f4f0e7?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="People discussing documents" class="rounded-lg shadow-2xl border-4 border-white">
88
+ <div class="absolute -bottom-6 -right-6 bg-yellow-400 text-gray-900 px-4 py-2 rounded-lg shadow-lg">
89
+ <p class="font-bold">100% Volunteer Driven</p>
90
+ <p class="text-sm">No funds accepted</p>
 
 
 
 
 
 
 
91
  </div>
92
  </div>
93
  </div>
94
  </div>
95
+ <div class="wave-shape">
96
+ <svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none">
97
+ <path d="M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V0H0V27.35A600.21,600.21,0,0,0,321.39,56.44Z" class="shape-fill"></path>
98
+ </svg>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
99
  </div>
100
  </section>
101
 
102
  <!-- About Section -->
103
  <section id="about" class="py-20 bg-white">
104
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
105
  <div class="text-center mb-16">
106
+ <h2 class="text-3xl font-bold text-gray-900 mb-4">About Truthlens Foundation</h2>
107
+ <div class="w-20 h-1 bg-blue-600 mx-auto"></div>
108
  </div>
109
+ <div class="grid md:grid-cols-2 gap-12 items-center">
110
+ <div>
111
+ <h3 class="text-2xl font-semibold text-gray-800 mb-4">Our Story</h3>
112
+ <p class="text-gray-600 mb-6">Truthlens Foundation is a newly established NGO dedicated to identifying and exposing corruption in public systems through the Right to Information (RTI) Act. While we haven't yet exposed any major scams, our preliminary investigations suggest Bihar as a high-priority region requiring scrutiny.</p>
113
+ <p class="text-gray-600 mb-6">We operate on a purely voluntary basis, accepting no funds or donations. Our strength lies in our network of committed volunteers who believe in transparency and accountability.</p>
114
+ <div class="bg-blue-50 border-l-4 border-blue-600 p-4">
115
+ <p class="text-blue-800 italic">"Corruption thrives in secrecy. Our weapon is sunlight."</p>
 
 
 
 
 
 
 
 
 
 
 
 
116
  </div>
117
  </div>
118
+ <div class="grid grid-cols-2 gap-4">
119
+ <div class="bg-gray-50 p-6 rounded-lg shadow-sm text-center card-hover transition-all">
120
+ <i class="fas fa-users text-4xl text-blue-600 mb-4"></i>
121
+ <h4 class="font-bold text-gray-800 mb-2">Volunteer Network</h4>
122
+ <p class="text-gray-600">Growing community of transparency advocates</p>
123
+ </div>
124
+ <div class="bg-gray-50 p-6 rounded-lg shadow-sm text-center card-hover transition-all">
125
+ <i class="fas fa-file-alt text-4xl text-blue-600 mb-4"></i>
126
+ <h4 class="font-bold text-gray-800 mb-2">RTI Focused</h4>
127
+ <p class="text-gray-600">Using legal tools to uncover truth</p>
128
+ </div>
129
+ <div class="bg-gray-50 p-6 rounded-lg shadow-sm text-center card-hover transition-all">
130
+ <i class="fas fa-hand-holding-usd text-4xl text-blue-600 mb-4"></i>
131
+ <h4 class="font-bold text-gray-800 mb-2">No Funds Accepted</h4>
132
+ <p class="text-gray-600">100% volunteer-driven organization</p>
133
+ </div>
134
+ <div class="bg-gray-50 p-6 rounded-lg shadow-sm text-center card-hover transition-all">
135
+ <i class="fas fa-bullseye text-4xl text-blue-600 mb-4"></i>
136
+ <h4 class="font-bold text-gray-800 mb-2">Bihar Priority</h4>
137
+ <p class="text-gray-600">Initial focus on corruption hotspots</p>
138
  </div>
139
  </div>
140
  </div>
141
  </div>
142
  </section>
143
 
144
+ <!-- Mission Section -->
145
+ <section id="mission" class="py-20 bg-gray-50">
146
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
147
  <div class="text-center mb-16">
148
+ <h2 class="text-3xl font-bold text-gray-900 mb-4">Our Mission & Approach</h2>
149
+ <div class="w-20 h-1 bg-blue-600 mx-auto"></div>
 
150
  </div>
 
151
  <div class="grid md:grid-cols-3 gap-8">
152
+ <div class="bg-white p-8 rounded-lg shadow-sm card-hover transition-all">
153
+ <div class="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mb-6 mx-auto">
154
+ <i class="fas fa-search text-blue-600 text-2xl"></i>
155
  </div>
156
+ <h3 class="text-xl font-semibold text-center mb-4">Identify Corruption</h3>
157
+ <p class="text-gray-600 text-center">We systematically identify potential corruption cases through data analysis, whistleblower tips, and public information audits.</p>
158
  </div>
159
+ <div class="bg-white p-8 rounded-lg shadow-sm card-hover transition-all">
160
+ <div class="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mb-6 mx-auto">
161
+ <i class="fas fa-file-contract text-blue-600 text-2xl"></i>
162
  </div>
163
+ <h3 class="text-xl font-semibold text-center mb-4">RTI Applications</h3>
164
+ <p class="text-gray-600 text-center">We file strategic RTI applications to uncover discrepancies, missing funds, and procedural violations in government systems.</p>
165
  </div>
166
+ <div class="bg-white p-8 rounded-lg shadow-sm card-hover transition-all">
167
+ <div class="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mb-6 mx-auto">
168
+ <i class="fas fa-bullhorn text-blue-600 text-2xl"></i>
169
  </div>
170
+ <h3 class="text-xl font-semibold text-center mb-4">Public Awareness</h3>
171
+ <p class="text-gray-600 text-center">We compile and share findings with media, oversight agencies, and the public to demand accountability and systemic reforms.</p>
172
  </div>
173
  </div>
 
 
 
 
 
 
 
 
 
 
 
174
 
175
+ <div class="mt-16 bg-blue-600 rounded-lg p-8 text-white">
176
+ <div class="md:flex items-center">
177
+ <div class="md:w-2/3 mb-6 md:mb-0">
178
+ <h3 class="text-2xl font-bold mb-4">Why Bihar Needs Attention</h3>
179
+ <p>Our preliminary analysis suggests Bihar has several corruption vulnerabilities including:</p>
180
+ <ul class="list-disc pl-5 mt-3 space-y-2">
181
+ <li>Discrepancies in public works projects</li>
182
+ <li>Irregularities in welfare scheme implementation</li>
183
+ <li>Lack of transparency in local governance</li>
184
+ <li>Weak public accountability mechanisms</li>
185
+ </ul>
 
 
 
 
 
 
 
 
 
 
 
 
 
186
  </div>
187
+ <div class="md:w-1/3 flex justify-center">
188
+ <div class="bg-white text-blue-600 p-4 rounded-lg shadow-lg text-center max-w-xs">
189
+ <i class="fas fa-exclamation-triangle text-4xl mb-3"></i>
190
+ <p class="font-bold">Note:</p>
191
+ <p class="text-sm">These are preliminary observations requiring further investigation through RTI</p>
 
 
 
192
  </div>
 
 
 
193
  </div>
194
  </div>
195
  </div>
 
 
 
 
196
  </div>
197
  </section>
198
 
199
+ <!-- Volunteer Section -->
200
+ <section id="volunteer" class="py-20 bg-white">
201
+ <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
202
+ <div class="text-center mb-12">
203
+ <h2 class="text-3xl font-bold text-gray-900 mb-4">Join Our Volunteer Network</h2>
204
+ <p class="text-xl text-gray-600 max-w-2xl mx-auto">We're looking for passionate individuals who believe in transparency and accountability. No prior experience needed - we provide training.</p>
205
+ <div class="w-20 h-1 bg-blue-600 mx-auto mt-4"></div>
206
+ </div>
207
+
208
+ <div class="bg-gray-50 rounded-xl shadow-md overflow-hidden">
209
+ <div class="md:flex">
210
+ <div class="md:w-1/2 bg-blue-600 text-white p-8 md:p-12">
211
+ <h3 class="text-2xl font-bold mb-6">Volunteer Opportunities</h3>
212
+ <ul class="space-y-4">
213
+ <li class="flex items-start">
214
+ <i class="fas fa-check-circle mt-1 mr-3 text-blue-200"></i>
215
+ <span>RTI Application Researchers</span>
216
+ </li>
217
+ <li class="flex items-start">
218
+ <i class="fas fa-check-circle mt-1 mr-3 text-blue-200"></i>
219
+ <span>Data Analysts</span>
220
+ </li>
221
+ <li class="flex items-start">
222
+ <i class="fas fa-check-circle mt-1 mr-3 text-blue-200"></i>
223
+ <span>Legal Volunteers</span>
224
+ </li>
225
+ <li class="flex items-start">
226
+ <i class="fas fa-check-circle mt-1 mr-3 text-blue-200"></i>
227
+ <span>Community Outreach</span>
228
+ </li>
229
+ <li class="flex items-start">
230
+ <i class="fas fa-check-circle mt-1 mr-3 text-blue-200"></i>
231
+ <span>Media & Communications</span>
232
+ </li>
233
+ </ul>
234
+ <div class="mt-8 bg-blue-700 p-4 rounded-lg">
235
+ <p class="font-bold mb-2">Time Commitment</p>
236
+ <p>Flexible - contribute as little as 5 hours per month</p>
237
  </div>
238
+ </div>
239
+ <div class="md:w-1/2 p-8 md:p-12">
240
+ <h3 class="text-2xl font-bold text-gray-800 mb-6">Apply Now</h3>
241
+ <form id="volunteerForm" class="space-y-4">
242
+ <div>
243
+ <label for="name" class="block text-sm font-medium text-gray-700 mb-1">Full Name</label>
244
+ <input type="text" id="name" name="name" required class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500">
245
  </div>
246
  <div>
247
+ <label for="email" class="block text-sm font-medium text-gray-700 mb-1">Email</label>
248
+ <input type="email" id="email" name="email" required class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500">
249
  </div>
250
+ <div>
251
+ <label for="phone" class="block text-sm font-medium text-gray-700 mb-1">Phone</label>
252
+ <input type="tel" id="phone" name="phone" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500">
 
253
  </div>
254
  <div>
255
+ <label for="location" class="block text-sm font-medium text-gray-700 mb-1">Location (City/State)</label>
256
+ <input type="text" id="location" name="location" required class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500">
257
  </div>
258
+ <div>
259
+ <label for="interest" class="block text-sm font-medium text-gray-700 mb-1">Area of Interest</label>
260
+ <select id="interest" name="interest" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500">
261
+ <option value="">Select an option</option>
262
+ <option value="RTI Research">RTI Research</option>
263
+ <option value="Data Analysis">Data Analysis</option>
264
+ <option value="Legal Support">Legal Support</option>
265
+ <option value="Community Outreach">Community Outreach</option>
266
+ <option value="Media/Communications">Media/Communications</option>
267
+ <option value="Other">Other</option>
 
 
 
 
 
 
 
 
 
 
268
  </select>
269
  </div>
270
+ <div>
271
+ <label for="message" class="block text-sm font-medium text-gray-700 mb-1">Why do you want to volunteer with us?</label>
272
+ <textarea id="message" name="message" rows="3" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500"></textarea>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
273
  </div>
274
+ <div class="pt-2">
275
+ <button type="submit" class="w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-4 rounded-md transition-all">
276
+ Submit Application
277
+ </button>
278
  </div>
 
 
279
  </form>
280
  </div>
281
  </div>
282
  </div>
 
 
 
 
 
 
 
 
 
 
 
283
 
284
+ <div class="mt-12 bg-yellow-50 border-l-4 border-yellow-400 p-4 rounded-r-lg">
285
+ <div class="flex">
286
+ <div class="flex-shrink-0">
287
+ <i class="fas fa-info-circle text-yellow-500 text-xl mt-1 mr-3"></i>
 
 
 
 
 
 
288
  </div>
289
+ <div>
290
+ <p class="text-sm text-yellow-700">
291
+ <span class="font-bold">Note:</span> We are a completely volunteer-driven organization. We do not accept any funds or donations. By volunteering, you agree to our principles of transparency and non-monetary operations.
292
+ </p>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
293
  </div>
294
  </div>
295
  </div>
296
  </div>
297
  </section>
298
 
299
+ <!-- Footer -->
300
+ <footer class="bg-gray-900 text-white pt-12 pb-8">
301
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
302
+ <div class="grid md:grid-cols-4 gap-8 mb-8">
303
+ <div>
304
+ <h3 class="text-lg font-semibold mb-4">Truthlens Foundation</h3>
305
+ <p class="text-gray-400">Using RTI to expose corruption and promote transparency in public systems.</p>
306
+ <div class="flex space-x-4 mt-4">
307
+ <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-twitter text-xl"></i></a>
308
+ <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-facebook text-xl"></i></a>
309
+ <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-linkedin text-xl"></i></a>
 
 
310
  </div>
311
  </div>
312
+ <div>
313
+ <h3 class="text-lg font-semibold mb-4">Quick Links</h3>
314
+ <ul class="space-y-2">
315
+ <li><a href="#home" class="text-gray-400 hover:text-white">Home</a></li>
316
+ <li><a href="#about" class="text-gray-400 hover:text-white">About Us</a></li>
317
+ <li><a href="#mission" class="text-gray-400 hover:text-white">Our Mission</a></li>
318
+ <li><a href="#volunteer" class="text-gray-400 hover:text-white">Volunteer</a></li>
319
+ </ul>
320
  </div>
321
+ <div>
322
+ <h3 class="text-lg font-semibold mb-4">Resources</h3>
323
+ <ul class="space-y-2">
324
+ <li><a href="#" class="text-gray-400 hover:text-white">RTI Guide</a></li>
325
+ <li><a href="#" class="text-gray-400 hover:text-white">Corruption Indicators</a></li>
326
+ <li><a href="#" class="text-gray-400 hover:text-white">Transparency Tools</a></li>
327
+ <li><a href="#" class="text-gray-400 hover:text-white">FAQ</a></li>
328
+ </ul>
329
  </div>
330
+ <div>
331
+ <h3 class="text-lg font-semibold mb-4">Contact</h3>
332
+ <ul class="space-y-2 text-gray-400">
333
+ <li class="flex items-start">
334
+ <i class="fas fa-envelope mt-1 mr-3 text-blue-400"></i>
335
+ <span>info@truthlens.org</span>
336
+ </li>
337
+ <li class="flex items-start">
338
+ <i class="fas fa-map-marker-alt mt-1 mr-3 text-blue-400"></i>
339
+ <span>Patna, Bihar (Operational HQ)</span>
340
+ </li>
341
+ </ul>
342
  </div>
343
  </div>
344
+ <div class="border-t border-gray-800 pt-8">
345
+ <div class="md:flex md:items-center md:justify-between">
346
+ <p class="text-gray-400 text-sm">© 2023 Truthlens Foundation. All rights reserved.</p>
347
+ <p class="text-gray-400 text-sm mt-4 md:mt-0">A volunteer-driven initiative for transparency and accountability.</p>
348
+ </div>
 
 
 
 
 
 
349
  </div>
350
  </div>
351
+ </footer>
352
 
353
+ <script>
354
+ // Mobile menu toggle
355
+ document.getElementById('mobile-menu-button').addEventListener('click', function() {
356
+ const menu = document.getElementById('mobile-menu');
357
+ menu.classList.toggle('hidden');
358
+ });
359
+
360
+ // Form submission
361
+ document.getElementById('volunteerForm').addEventListener('submit', function(e) {
362
+ e.preventDefault();
363
+
364
+ // Get form values
365
+ const name = document.getElementById('name').value;
366
+ const email = document.getElementById('email').value;
367
+
368
+ // In a real application, you would send this data to a server
369
+ // For this demo, we'll just show an alert
370
+ alert(`Thank you, ${name}! We've received your volunteer application. We'll contact you at ${email} soon.`);
371
+
372
+ // Reset form
373
+ this.reset();
374
+
375
+ // Scroll to top of form
376
+ document.getElementById('volunteer').scrollIntoView({ behavior: 'smooth' });
377
+ });
378
+
379
+ // Smooth scrolling for anchor links
380
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
381
+ anchor.addEventListener('click', function (e) {
382
+ e.preventDefault();
383
+
384
+ const targetId = this.getAttribute('href');
385
+ if (targetId === '#') return;
386
+
387
+ const targetElement = document.querySelector(targetId);
388
+ if (targetElement) {
389
+ targetElement.scrollIntoView({
390
+ behavior: 'smooth'
391
+ });
392
+
393
+ // Close mobile menu if open
394
+ const mobileMenu = document.getElementById('mobile-menu');
395
+ if (!mobileMenu.classList.contains('hidden')) {
396
+ mobileMenu.classList.add('hidden');
397
+ }
398
+ }
399
+ });
400
+ });
401
+ </script>
402
  <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/truthlens-foundation" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
403
  </html>