File size: 32,291 Bytes
fe8e48d
 
 
 
 
 
 
 
 
38b3b88
 
fe8e48d
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
38b3b88
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
fe8e48d
 
 
 
 
 
 
 
 
38b3b88
fe8e48d
 
 
 
38b3b88
 
 
 
fe8e48d
 
 
 
 
 
38b3b88
 
 
 
fe8e48d
38b3b88
 
fe8e48d
 
38b3b88
 
fe8e48d
38b3b88
 
fe8e48d
 
 
 
 
38b3b88
 
 
 
 
 
 
 
 
fe8e48d
38b3b88
fe8e48d
 
38b3b88
fe8e48d
38b3b88
fe8e48d
 
38b3b88
fe8e48d
 
 
 
 
 
 
 
 
 
 
 
 
38b3b88
fe8e48d
 
 
38b3b88
fe8e48d
38b3b88
fe8e48d
 
 
 
 
 
 
38b3b88
fe8e48d
 
 
38b3b88
fe8e48d
38b3b88
fe8e48d
 
 
 
 
 
 
38b3b88
fe8e48d
 
 
38b3b88
fe8e48d
38b3b88
fe8e48d
 
 
 
 
 
 
 
 
 
 
 
 
38b3b88
 
fe8e48d
38b3b88
fe8e48d
 
38b3b88
fe8e48d
 
 
 
 
 
38b3b88
fe8e48d
38b3b88
fe8e48d
38b3b88
fe8e48d
38b3b88
 
 
fe8e48d
 
 
 
38b3b88
fe8e48d
38b3b88
fe8e48d
38b3b88
fe8e48d
38b3b88
 
 
fe8e48d
 
 
 
38b3b88
fe8e48d
38b3b88
fe8e48d
38b3b88
fe8e48d
38b3b88
 
 
fe8e48d
 
38b3b88
 
 
 
 
 
 
fe8e48d
 
 
 
 
 
38b3b88
 
fe8e48d
38b3b88
 
 
 
fe8e48d
 
 
 
 
 
 
 
 
 
38b3b88
fe8e48d
38b3b88
 
fe8e48d
38b3b88
fe8e48d
38b3b88
 
 
 
 
 
 
 
fe8e48d
 
 
 
 
 
38b3b88
fe8e48d
38b3b88
 
fe8e48d
38b3b88
fe8e48d
38b3b88
 
 
 
 
 
 
 
fe8e48d
 
 
 
 
 
38b3b88
fe8e48d
38b3b88
 
fe8e48d
38b3b88
fe8e48d
38b3b88
 
 
 
 
 
 
 
fe8e48d
 
 
 
 
 
 
 
 
 
 
38b3b88
fe8e48d
38b3b88
fe8e48d
 
 
 
38b3b88
fe8e48d
 
38b3b88
fe8e48d
 
38b3b88
fe8e48d
38b3b88
 
 
 
 
 
 
fe8e48d
 
 
38b3b88
fe8e48d
 
 
38b3b88
fe8e48d
 
38b3b88
fe8e48d
 
38b3b88
fe8e48d
38b3b88
 
 
 
 
 
 
fe8e48d
 
 
38b3b88
fe8e48d
 
 
38b3b88
fe8e48d
 
38b3b88
fe8e48d
 
38b3b88
fe8e48d
38b3b88
 
 
 
 
 
 
fe8e48d
 
 
38b3b88
fe8e48d
 
 
 
 
 
 
38b3b88
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
fe8e48d
38b3b88
 
 
 
 
 
 
 
 
 
 
 
 
 
 
fe8e48d
 
 
 
 
 
38b3b88
fe8e48d
 
 
38b3b88
 
 
 
fe8e48d
38b3b88
fe8e48d
38b3b88
fe8e48d
 
 
 
 
 
 
 
 
 
38b3b88
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
fe8e48d
 
38b3b88
fe8e48d
38b3b88
 
fe8e48d
 
 
 
 
 
38b3b88
fe8e48d
38b3b88
fe8e48d
38b3b88
 
 
 
 
fe8e48d
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
38b3b88
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
fe8e48d
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Building Bridges | UI Campaign</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        .hero-gradient {
            background: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 100%);
        }
        .card-hover:hover {
            transform: translateY(-5px);
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
        }
        .typewriter {
            overflow: hidden;
            border-right: .15em solid #3b82f6;
            white-space: nowrap;
            letter-spacing: .15em;
            animation: typing 3.5s steps(40, end), blink-caret .75s step-end infinite;
        }
        @keyframes typing {
            from { width: 0 }
            to { width: 100% }
        }
        @keyframes blink-caret {
            from, to { border-color: transparent }
            50% { border-color: #3b82f6; }
        }
        .inspiration-quote {
            position: relative;
        }
        .inspiration-quote:before {
            content: """;
            position: absolute;
            font-size: 5rem;
            color: rgba(59, 130, 246, 0.2);
            top: -2rem;
            left: -1rem;
            font-family: Georgia, serif;
        }
        .pulse-animation {
            animation: pulse 2s infinite;
        }
        @keyframes pulse {
            0% { transform: scale(1); }
            50% { transform: scale(1.05); }
            100% { transform: scale(1); }
        }
    </style>
</head>
<body class="font-sans bg-gray-50">
    <!-- Navigation -->
    <nav class="bg-white shadow-sm sticky top-0 z-50">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex justify-between h-16">
                <div class="flex items-center">
                    <div class="flex-shrink-0 flex items-center">
                        <i class="fas fa-hands-helping text-blue-600 text-2xl mr-2"></i>
                        <span class="text-xl font-bold text-gray-900">Building Bridges</span>
                    </div>
                </div>
                <div class="hidden md:ml-6 md:flex md:items-center md:space-x-8">
                    <a href="#about" class="text-gray-900 hover:text-blue-600 px-3 py-2 text-sm font-medium">Our Story</a>
                    <a href="#vision" class="text-gray-900 hover:text-blue-600 px-3 py-2 text-sm font-medium">Our Dream</a>
                    <a href="#initiatives" class="text-gray-900 hover:text-blue-600 px-3 py-2 text-sm font-medium">Our Plan</a>
                    <a href="#contact" class="bg-blue-600 text-white px-4 py-2 rounded-md text-sm font-medium hover:bg-blue-700 pulse-animation">Join The Movement</a>
                </div>
            </div>
        </div>
    </nav>

    <!-- Hero Section -->
    <div class="hero-gradient text-white">
        <div class="max-w-7xl mx-auto py-24 px-4 sm:py-32 sm:px-6 lg:px-8 text-center">
            <h1 class="text-4xl md:text-6xl font-extrabold tracking-tight mb-6">
                <span class="typewriter block">Together We Can Build A Legacy</span>
            </h1>
            <p class="mt-6 max-w-2xl mx-auto text-xl text-blue-100">
                Every great institution is built on strong foundations. Let's create a system where every voice matters, every concern is valued, and every student thrives.
            </p>
            <div class="mt-10 flex justify-center space-x-4">
                <a href="#vision" class="inline-flex items-center px-8 py-4 border border-transparent text-lg font-medium rounded-md shadow-sm text-blue-600 bg-white hover:bg-blue-50">
                    <i class="fas fa-bullhorn mr-2"></i> Our Vision
                </a>
                <a href="#contact" class="inline-flex items-center px-8 py-4 border border-white text-lg font-medium rounded-md text-white bg-blue-600 bg-opacity-20 hover:bg-opacity-30">
                    <i class="fas fa-handshake mr-2"></i> Join Us
                </a>
            </div>
        </div>
    </div>

    <!-- Inspiration Quote -->
    <div class="bg-blue-50 py-12">
        <div class="max-w-4xl mx-auto px-4 text-center">
            <p class="text-2xl md:text-3xl font-medium text-gray-800 inspiration-quote px-8">
                The true measure of any society is how it treats its members. We're not just keeping records - we're building a community where everyone belongs.
            </p>
        </div>
    </div>

    <!-- About Section -->
    <div id="about" class="py-16 bg-white">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="lg:text-center">
                <h2 class="text-base text-blue-600 font-semibold tracking-wide uppercase">Our Story</h2>
                <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl">
                    More Than Just A Candidate
                </p>
                <p class="mt-4 max-w-2xl text-xl text-gray-500 lg:mx-auto">
                    This journey began with a simple belief: that through organization and care, we can create a student experience that uplifts everyone.
                </p>
            </div>

            <div class="mt-20">
                <div class="flex flex-col md:flex-row items-center">
                    <div class="md:w-1/2 mb-10 md:mb-0 md:pr-10">
                        <img class="rounded-lg shadow-xl" src="https://images.unsplash.com/photo-1522202176988-66273c2fd55f?ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&q=80" alt="Candidate working with students">
                    </div>
                    <div class="md:w-1/2">
                        <div class="space-y-10">
                            <div class="flex">
                                <div class="flex-shrink-0">
                                    <div class="flex items-center justify-center h-12 w-12 rounded-md bg-blue-500 text-white">
                                        <i class="fas fa-heart"></i>
                                    </div>
                                </div>
                                <div class="ml-4">
                                    <h3 class="text-lg leading-6 font-medium text-gray-900">Passion For Service</h3>
                                    <p class="mt-2 text-base text-gray-500">
                                        This isn't about position - it's about purpose. A deep commitment to serving students with integrity and compassion.
                                    </p>
                                </div>
                            </div>

                            <div class="flex">
                                <div class="flex-shrink-0">
                                    <div class="flex items-center justify-center h-12 w-12 rounded-md bg-blue-500 text-white">
                                        <i class="fas fa-seedling"></i>
                                    </div>
                                </div>
                                <div class="ml-4">
                                    <h3 class="text-lg leading-6 font-medium text-gray-900">Rooted In Experience</h3>
                                    <p class="mt-2 text-base text-gray-500">
                                        Years of grassroots involvement have shown what works, what doesn't, and how we can do better together.
                                    </p>
                                </div>
                            </div>

                            <div class="flex">
                                <div class="flex-shrink-0">
                                    <div class="flex items-center justify-center h-12 w-12 rounded-md bg-blue-500 text-white">
                                        <i class="fas fa-rocket"></i>
                                    </div>
                                </div>
                                <div class="ml-4">
                                    <h3 class="text-lg leading-6 font-medium text-gray-900">Vision For Tomorrow</h3>
                                    <p class="mt-2 text-base text-gray-500">
                                        Not just maintaining systems, but transforming them to meet the needs of today's students and future generations.
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Vision Section -->
    <div id="vision" class="py-16 bg-gray-50 overflow-hidden">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="lg:text-center mb-16">
                <h2 class="text-base text-blue-600 font-semibold tracking-wide uppercase">Our Dream</h2>
                <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl">
                    Imagine What We Can Achieve Together
                </p>
                <p class="mt-4 max-w-2xl text-xl text-gray-500 lg:mx-auto">
                    A student union where organization meets inspiration, where structure serves humanity.
                </p>
            </div>

            <div class="grid md:grid-cols-3 gap-8">
                <div class="bg-white p-8 rounded-lg shadow-md card-hover transition duration-300">
                    <div class="text-blue-600 mb-4">
                        <i class="fas fa-star text-4xl"></i>
                    </div>
                    <h3 class="text-lg font-medium text-gray-900 mb-2">Excellence In Action</h3>
                    <p class="text-gray-600">
                        Setting new standards for how we document, communicate, and preserve our shared student experience.
                    </p>
                    <div class="mt-4 text-blue-600 text-sm font-medium">
                        <a href="#" class="hover:underline">Learn more →</a>
                    </div>
                </div>

                <div class="bg-white p-8 rounded-lg shadow-md card-hover transition duration-300">
                    <div class="text-blue-600 mb-4">
                        <i class="fas fa-users text-4xl"></i>
                    </div>
                    <h3 class="text-lg font-medium text-gray-900 mb-2">Community First</h3>
                    <p class="text-gray-600">
                        Creating systems that don't just store information but strengthen connections between all students.
                    </p>
                    <div class="mt-4 text-blue-600 text-sm font-medium">
                        <a href="#" class="hover:underline">Learn more →</a>
                    </div>
                </div>

                <div class="bg-white p-8 rounded-lg shadow-md card-hover transition duration-300">
                    <div class="text-blue-600 mb-4">
                        <i class="fas fa-lightbulb text-4xl"></i>
                    </div>
                    <h3 class="text-lg font-medium text-gray-900 mb-2">Innovation With Purpose</h3>
                    <p class="text-gray-600">
                        Harnessing technology and creativity to solve age-old challenges in student governance.
                    </p>
                    <div class="mt-4 text-blue-600 text-sm font-medium">
                        <a href="#" class="hover:underline">Learn more →</a>
                    </div>
                </div>
            </div>

            <div class="mt-16 text-center">
                <a href="#initiatives" class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700">
                    See Our Action Plan
                    <i class="fas fa-arrow-down ml-2"></i>
                </a>
            </div>
        </div>
    </div>

    <!-- Initiatives Section -->
    <div id="initiatives" class="py-16 bg-white">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="lg:text-center mb-16">
                <h2 class="text-base text-blue-600 font-semibold tracking-wide uppercase">Our Plan</h2>
                <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl">
                    Building The Future Together
                </p>
                <p class="mt-4 max-w-2xl text-xl text-gray-500 lg:mx-auto">
                    Concrete steps to turn our shared vision into reality for every student.
                </p>
            </div>

            <div class="relative">
                <div class="absolute left-0 top-0 h-full w-1 bg-blue-200 transform -translate-x-1/2 ml-12 md:ml-24"></div>
                
                <div class="space-y-8">
                    <!-- Initiative 1 -->
                    <div class="relative pl-16 md:pl-24">
                        <div class="absolute left-0 top-0 flex items-center justify-center w-8 h-8 rounded-full bg-blue-600 text-white transform -translate-x-1/2 ml-12 md:ml-24">
                            <i class="fas fa-laptop"></i>
                        </div>
                        <div class="bg-blue-50 p-8 rounded-lg border-l-4 border-blue-600">
                            <h3 class="text-xl font-bold text-gray-900 mb-3">Digital Bridge Initiative</h3>
                            <p class="text-gray-600">
                                A revolutionary platform connecting students to resources, recording concerns with tracking, and preserving our institutional memory for future generations.
                            </p>
                            <div class="mt-4">
                                <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-blue-100 text-blue-800">
                                    Innovation
                                </span>
                                <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-green-100 text-green-800 ml-2">
                                    Accessibility
                                </span>
                            </div>
                        </div>
                    </div>

                    <!-- Initiative 2 -->
                    <div class="relative pl-16 md:pl-24">
                        <div class="absolute left-0 top-0 flex items-center justify-center w-8 h-8 rounded-full bg-blue-600 text-white transform -translate-x-1/2 ml-12 md:ml-24">
                            <i class="fas fa-comments"></i>
                        </div>
                        <div class="bg-blue-50 p-8 rounded-lg border-l-4 border-blue-600">
                            <h3 class="text-xl font-bold text-gray-900 mb-3">Voice Amplification Project</h3>
                            <p class="text-gray-600">
                                Ensuring no concern goes unheard by implementing structured listening sessions across faculties with guaranteed response timelines.
                            </p>
                            <div class="mt-4">
                                <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-purple-100 text-purple-800">
                                    Inclusion
                                </span>
                                <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-yellow-100 text-yellow-800 ml-2">
                                    Accountability
                                </span>
                            </div>
                        </div>
                    </div>

                    <!-- Initiative 3 -->
                    <div class="relative pl-16 md:pl-24">
                        <div class="absolute left-0 top-0 flex items-center justify-center w-8 h-8 rounded-full bg-blue-600 text-white transform -translate-x-1/2 ml-12 md:ml-24">
                            <i class="fas fa-graduation-cap"></i>
                        </div>
                        <div class="bg-blue-50 p-8 rounded-lg border-l-4 border-blue-600">
                            <h3 class="text-xl font-bold text-gray-900 mb-3">Legacy Preservation Program</h3>
                            <p class="text-gray-600">
                                Documenting not just decisions but the stories behind them - creating a living history of student leadership that inspires future activists and leaders.
                            </p>
                            <div class="mt-4">
                                <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-red-100 text-red-800">
                                    Heritage
                                </span>
                                <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-indigo-100 text-indigo-800 ml-2">
                                    Inspiration
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Testimonials -->
    <div class="py-16 bg-gray-50">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="lg:text-center mb-12">
                <h2 class="text-base text-blue-600 font-semibold tracking-wide uppercase">Voices Of Support</h2>
                <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl">
                    Why People Believe In This Vision
                </p>
            </div>

            <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
                <div class="bg-white p-8 rounded-lg shadow-sm border-t-4 border-blue-500">
                    <div class="flex items-center mb-4">
                        <div class="flex-shrink-0">
                            <img class="h-12 w-12 rounded-full" src="https://randomuser.me/api/portraits/women/42.jpg" alt="">
                        </div>
                        <div class="ml-3">
                            <p class="text-sm font-bold text-gray-900">Amina Yusuf</p>
                            <p class="text-sm text-gray-500">Faculty of Arts</p>
                            <div class="flex mt-1 text-yellow-400">
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                            </div>
                        </div>
                    </div>
                    <p class="text-gray-600 italic">
                        "This isn't just about keeping minutes - it's about making minutes matter. Their approach transforms bureaucracy into meaningful connection."
                    </p>
                </div>

                <div class="bg-white p-8 rounded-lg shadow-sm border-t-4 border-blue-500">
                    <div class="flex items-center mb-4">
                        <div class="flex-shrink-0">
                            <img class="h-12 w-12 rounded-full" src="https://randomuser.me/api/portraits/men/32.jpg" alt="">
                        </div>
                        <div class="ml-3">
                            <p class="text-sm font-bold text-gray-900">Emeka Okafor</p>
                            <p class="text-sm text-gray-500">Faculty of Science</p>
                            <div class="flex mt-1 text-yellow-400">
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                            </div>
                        </div>
                    </div>
                    <p class="text-gray-600 italic">
                        "Finally, someone who sees record-keeping not as clerical work but as community-building. This is the leadership we've been waiting for."
                    </p>
                </div>

                <div class="bg-white p-8 rounded-lg shadow-sm border-t-4 border-blue-500">
                    <div class="flex items-center mb-4">
                        <div class="flex-shrink-0">
                            <img class="h-12 w-12 rounded-full" src="https://randomuser.me/api/portraits/women/68.jpg" alt="">
                        </div>
                        <div class="ml-3">
                            <p class="text-sm font-bold text-gray-900">Folake Adebayo</p>
                            <p class="text-sm text-gray-500">Faculty of Law</p>
                            <div class="flex mt-1 text-yellow-400">
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                            </div>
                        </div>
                    </div>
                    <p class="text-gray-600 italic">
                        "Their vision has reignited my belief in student governance. This is how we build institutions that stand the test of time while serving today's students."
                    </p>
                </div>
            </div>
        </div>
    </div>

    <!-- CTA Section -->
    <div id="contact" class="bg-blue-700 relative overflow-hidden">
        <div class="absolute inset-0 opacity-10">
            <svg class="w-full h-full" width="100%" height="100%" viewBox="0 0 100 100" preserveAspectRatio="none">
                <path d="M0,0 L100,0 L100,100 L0,100 Z" fill="none" stroke="white" stroke-width="2" stroke-dasharray="5,5"></path>
            </svg>
        </div>
        <div class="max-w-7xl mx-auto py-16 px-4 sm:px-6 lg:py-24 lg:px-8 relative">
            <div class="text-center">
                <h2 class="text-3xl font-extrabold tracking-tight text-white sm:text-4xl">
                    <span class="block">Ready to be part of something greater?</span>
                </h2>
                <p class="mt-4 max-w-2xl mx-auto text-xl text-blue-100">
                    This movement isn't about one person - it's about all of us coming together to build a better student experience.
                </p>
            </div>
            <div class="mt-12 grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-3">
                <div class="bg-white bg-opacity-10 backdrop-filter backdrop-blur-sm p-6 rounded-lg border border-white border-opacity-20">
                    <div class="text-white text-3xl mb-4">
                        <i class="fas fa-hands-helping"></i>
                    </div>
                    <h3 class="text-lg font-medium text-white mb-2">Volunteer</h3>
                    <p class="text-blue-100 text-sm">
                        Join our team of change-makers and help spread this vision across campus.
                    </p>
                    <div class="mt-4">
                        <a href="#" class="inline-flex items-center text-white font-medium hover:underline">
                            Sign up now
                            <i class="fas fa-arrow-right ml-1"></i>
                        </a>
                    </div>
                </div>

                <div class="bg-white bg-opacity-10 backdrop-filter backdrop-blur-sm p-6 rounded-lg border border-white border-opacity-20">
                    <div class="text-white text-3xl mb-4">
                        <i class="fas fa-lightbulb"></i>
                    </div>
                    <h3 class="text-lg font-medium text-white mb-2">Share Ideas</h3>
                    <p class="text-blue-100 text-sm">
                        Have suggestions? We're building this together and value your input.
                    </p>
                    <div class="mt-4">
                        <a href="#" class="inline-flex items-center text-white font-medium hover:underline">
                            Contribute
                            <i class="fas fa-arrow-right ml-1"></i>
                        </a>
                    </div>
                </div>

                <div class="bg-white bg-opacity-10 backdrop-filter backdrop-blur-sm p-6 rounded-lg border border-white border-opacity-20">
                    <div class="text-white text-3xl mb-4">
                        <i class="fas fa-calendar-check"></i>
                    </div>
                    <h3 class="text-lg font-medium text-white mb-2">Stay Updated</h3>
                    <p class="text-blue-100 text-sm">
                        Follow our journey as we work towards election day and beyond.
                    </p>
                    <div class="mt-4">
                        <a href="#" class="inline-flex items-center text-white font-medium hover:underline">
                            Connect
                            <i class="fas fa-arrow-right ml-1"></i>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Footer -->
    <footer class="bg-gray-900 text-white">
        <div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8">
            <div class="grid grid-cols-2 md:grid-cols-4 gap-8">
                <div class="col-span-2">
                    <h3 class="text-white text-xl font-bold mb-4 flex items-center">
                        <i class="fas fa-hands-helping text-blue-400 mr-2"></i>
                        Building Bridges Movement
                    </h3>
                    <p class="text-gray-300 text-sm">
                        We're on a mission to transform student governance through inspired organization, transparent systems, and genuine care for every member of our community.
                    </p>
                    <div class="mt-4 flex space-x-4">
                        <a href="#" class="text-gray-300 hover:text-white">
                            <i class="fab fa-twitter"></i>
                        </a>
                        <a href="#" class="text-gray-300 hover:text-white">
                            <i class="fab fa-instagram"></i>
                        </a>
                        <a href="#" class="text-gray-300 hover:text-white">
                            <i class="fab fa-facebook"></i>
                        </a>
                    </div>
                </div>
                <div>
                    <h3 class="text-white text-sm font-semibold tracking-wider uppercase mb-4">Quick Links</h3>
                    <ul class="space-y-2">
                        <li><a href="#about" class="text-gray-300 hover:text-white text-sm">Our Story</a></li>
                        <li><a href="#vision" class="text-gray-300 hover:text-white text-sm">Our Dream</a></li>
                        <li><a href="#initiatives" class="text-gray-300 hover:text-white text-sm">Our Plan</a></li>
                    </ul>
                </div>
                <div>
                    <h3 class="text-white text-sm font-semibold tracking-wider uppercase mb-4">Contact</h3>
                    <ul class="space-y-2 text-gray-300 text-sm">
                        <li class="flex items-start">
                            <i class="fas fa-envelope text-blue-400 mt-1 mr-2"></i>
                            [email protected]
                        </li>
                        <li class="flex items-start">
                            <i class="fas fa-phone-alt text-blue-400 mt-1 mr-2"></i>
                            +234 800 000 0000
                        </li>
                        <li class="flex items-start">
                            <i class="fas fa-map-marker-alt text-blue-400 mt-1 mr-2"></i>
                            University of Ibadan Campus
                        </li>
                    </ul>
                </div>
            </div>
            <div class="mt-12 border-t border-gray-800 pt-8">
                <p class="text-gray-400 text-sm text-center">
                    &copy; 2023 Building Bridges Movement. All rights reserved. 
                    <span class="block mt-1">Together, we rise.</span>
                </p>
            </div>
        </div>
    </footer>

    <script>
        // Enhanced JavaScript with multiple inspirational messages
        document.addEventListener('DOMContentLoaded', function() {
            // Typewriter effect for multiple inspirational phrases
            const phrases = [
                "Together We Can Build A Legacy",
                "Organization With Heart",
                "Records That Empower",
                "A System That Serves All",
                "The Future Starts With Us"
            ];
            let currentPhrase = 0;
            const typewriterElement = document.querySelector('.typewriter');
            
            function typeWriter() {
                if (currentPhrase >= phrases.length) currentPhrase = 0;
                const phrase = phrases[currentPhrase];
                typewriterElement.textContent = '';
                typewriterElement.style.animation = 'none';
                void typewriterElement.offsetWidth; // Trigger reflow
                typewriterElement.style.animation = null;
                
                let i = 0;
                const typing = setInterval(() => {
                    if (i < phrase.length) {
                        typewriterElement.textContent += phrase.charAt(i);
                        i++;
                    } else {
                        clearInterval(typing);
                        setTimeout(() => {
                            currentPhrase++;
                            typeWriter();
                        }, 2000);
                    }
                }, 100);
            }
            
            typeWriter();
            
            // Smooth scrolling for anchor links
            document.querySelectorAll('a[href^="#"]').forEach(anchor => {
                anchor.addEventListener('click', function (e) {
                    e.preventDefault();
                    document.querySelector(this.getAttribute('href')).scrollIntoView({
                        behavior: 'smooth'
                    });
                });
            });

            // Add animation to cards when they come into view
            const observerOptions = {
                threshold: 0.1
            };

            const observer = new IntersectionObserver((entries) => {
                entries.forEach(entry => {
                    if (entry.isIntersecting) {
                        entry.target.classList.add('animate__animated', 'animate__fadeInUp');
                        observer.unobserve(entry.target);
                    }
                });
            }, observerOptions);

            document.querySelectorAll('.card-hover').forEach(card => {
                observer.observe(card);
            });
        });
    </script>
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=theharby/menaa" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>