File size: 32,185 Bytes
9df1802
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
88b26ba
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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Boursa AI - Global Education Platform</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
    <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
    <script src="https://unpkg.com/feather-icons"></script>
    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
        body {
            font-family: 'Inter', sans-serif;
            scroll-behavior: smooth;
        }
        .hero-bg {
            background: linear-gradient(135deg, rgba(30, 64, 175, 0.8) 0%, rgba(79, 70, 229, 0.8) 100%), url('http://static.photos/education/1200x630/42') no-repeat center center;
            background-size: cover;
        }
        .nav-transparent {
            background-color: transparent;
            backdrop-filter: blur(0px);
        }
        .nav-solid {
            background-color: rgba(255, 255, 255, 0.98);
            backdrop-filter: blur(10px);
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
        }
        .timeline-item:not(:last-child):after {
            content: '';
            position: absolute;
            top: 24px;
            right: -24px;
            width: 48px;
            height: 2px;
            background: #e5e7eb;
        }
        .opportunity-card: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);
        }
    </style>
</head>
<body class="text-gray-800">
    <!-- Header -->
    <header class="fixed w-full z-50 transition-all duration-300 nav-transparent" id="header">
        <div class="container mx-auto px-6 py-4">
            <div class="flex items-center justify-between">
                <!-- Logo -->
                <div class="flex items-center">
                    <div class="w-10 h-10 rounded-full bg-indigo-600 flex items-center justify-center text-white font-bold text-xl">BA</div>
                    <span class="ml-3 text-xl font-semibold">Boursa AI</span>
                </div>
                
                <!-- Navigation -->
                <nav class="hidden md:flex space-x-8">
                    <a href="#" class="text-white hover:text-indigo-200 transition nav-link">Home</a>
                    <a href="#" class="text-white hover:text-indigo-200 transition nav-link">Scholarships</a>
                    <a href="#" class="text-white hover:text-indigo-200 transition nav-link">Language Courses</a>
                    <a href="#" class="text-white hover:text-indigo-200 transition nav-link">Exchanges</a>
                    <a href="#" class="text-white hover:text-indigo-200 transition nav-link">Resources</a>
                </nav>
                
                <!-- Right Side -->
                <div class="flex items-center space-x-4">
                    <button class="text-white hover:text-indigo-200 transition">
                        <i data-feather="moon"></i>
                    </button>
                    <button class="text-white hover:text-indigo-200 transition">
                        <i data-feather="bell"></i>
                    </button>
                    <button class="text-white hover:text-indigo-200 transition">
                        <i data-feather="user"></i>
                    </button>
                    <button class="ml-4 px-4 py-2 bg-white text-indigo-600 rounded-full font-medium hover:bg-indigo-50 transition">
                        Sign In
                    </button>
                </div>
            </div>
        </div>
    </header>

    <!-- Hero Section -->
    <section class="hero-bg min-h-screen flex items-center pt-20">
        <div class="container mx-auto px-6">
            <div class="max-w-3xl mx-auto text-center text-white" data-aos="fade-up">
                <h1 class="text-4xl md:text-5xl font-bold mb-6">Empower Your Global Education Journey with Intelligent Guidance</h1>
                <p class="text-xl md:text-2xl mb-10 opacity-90">Boursa AI helps you discover scholarships, internships, and exchange programs—personalized by advanced AI.</p>
                <div class="flex flex-col sm:flex-row justify-center gap-4">
                    <button class="px-8 py-4 bg-indigo-600 hover:bg-indigo-700 rounded-full font-semibold text-lg transition shadow-lg">
                        Get Started for Free
                    </button>
                    <button class="px-8 py-4 bg-white bg-opacity-10 hover:bg-opacity-20 rounded-full font-semibold text-lg transition border border-white border-opacity-30">
                        Learn How It Works
                    </button>
                </div>
            </div>
            <div class="mt-20 flex justify-center" data-aos="fade-up" data-aos-delay="200">
                <img src="http://static.photos/technology/1024x576/10" alt="AI Illustration" class="w-full max-w-3xl rounded-xl shadow-2xl">
            </div>
        </div>
    </section>

    <!-- About Section -->
    <section class="py-20 bg-white">
        <div class="container mx-auto px-6">
            <div class="text-center mb-16" data-aos="fade-up">
                <h2 class="text-3xl md:text-4xl font-bold mb-4">About Boursa AI</h2>
                <p class="max-w-2xl mx-auto text-gray-600 text-lg">We're revolutionizing how students discover global education opportunities through artificial intelligence.</p>
            </div>
            
            <div class="grid md:grid-cols-3 gap-10">
                <div class="text-center p-6 rounded-xl hover:bg-gray-50 transition" data-aos="fade-up" data-aos-delay="100">
                    <div class="w-16 h-16 bg-indigo-100 rounded-full flex items-center justify-center mx-auto mb-6">
                        <i data-feather="globe" class="text-indigo-600 w-8 h-8"></i>
                    </div>
                    <h3 class="text-xl font-semibold mb-3">Global Reach</h3>
                    <p class="text-gray-600">Access thousands of opportunities from top institutions worldwide in one place.</p>
                </div>
                
                <div class="text-center p-6 rounded-xl hover:bg-gray-50 transition" data-aos="fade-up" data-aos-delay="200">
                    <div class="w-16 h-16 bg-indigo-100 rounded-full flex items-center justify-center mx-auto mb-6">
                        <i data-feather="cpu" class="text-indigo-600 w-8 h-8"></i>
                    </div>
                    <h3 class="text-xl font-semibold mb-3">AI-Powered</h3>
                    <p class="text-gray-600">Our algorithms match you with the best opportunities based on your unique profile.</p>
                </div>
                
                <div class="text-center p-6 rounded-xl hover:bg-gray-50 transition" data-aos="fade-up" data-aos-delay="300">
                    <div class="w-16 h-16 bg-indigo-100 rounded-full flex items-center justify-center mx-auto mb-6">
                        <i data-feather="award" class="text-indigo-600 w-8 h-8"></i>
                    </div>
                    <h3 class="text-xl font-semibold mb-3">Success Focused</h3>
                    <p class="text-gray-600">We provide the tools and guidance to maximize your chances of acceptance.</p>
                </div>
            </div>
        </div>
    </section>

    <!-- How It Works -->
    <section class="py-20 bg-gray-50">
        <div class="container mx-auto px-6">
            <div class="text-center mb-16" data-aos="fade-up">
                <h2 class="text-3xl md:text-4xl font-bold mb-4">How It Works</h2>
                <p class="max-w-2xl mx-auto text-gray-600 text-lg">Three simple steps to find your perfect global education opportunity.</p>
            </div>
            
            <div class="relative">
                <div class="grid md:grid-cols-3 gap-8">
                    <!-- Step 1 -->
                    <div class="relative timeline-item" data-aos="fade-up" data-aos-delay="100">
                        <div class="bg-white p-8 rounded-xl shadow-sm hover:shadow-md transition h-full">
                            <div class="w-12 h-12 bg-indigo-100 rounded-full flex items-center justify-center mb-6">
                                <span class="text-indigo-600 font-bold">1</span>
                            </div>
                            <h3 class="text-xl font-semibold mb-3">Create Your Profile</h3>
                            <p class="text-gray-600 mb-4">Tell us about your academic background, interests, and goals in our simple onboarding process.</p>
                            <div class="flex justify-center">
                                <img src="http://static.photos/people/320x240/1" alt="Profile creation" class="rounded-lg w-full max-w-xs">
                            </div>
                        </div>
                    </div>
                    
                    <!-- Step 2 -->
                    <div class="relative timeline-item" data-aos="fade-up" data-aos-delay="200">
                        <div class="bg-white p-8 rounded-xl shadow-sm hover:shadow-md transition h-full">
                            <div class="w-12 h-12 bg-indigo-100 rounded-full flex items-center justify-center mb-6">
                                <span class="text-indigo-600 font-bold">2</span>
                            </div>
                            <h3 class="text-xl font-semibold mb-3">Get AI Recommendations</h3>
                            <p class="text-gray-600 mb-4">Our algorithm analyzes thousands of opportunities to find the best matches for your profile.</p>
                            <div class="flex justify-center">
                                <img src="http://static.photos/technology/320x240/2" alt="AI recommendations" class="rounded-lg w-full max-w-xs">
                            </div>
                        </div>
                    </div>
                    
                    <!-- Step 3 -->
                    <div class="relative" data-aos="fade-up" data-aos-delay="300">
                        <div class="bg-white p-8 rounded-xl shadow-sm hover:shadow-md transition h-full">
                            <div class="w-12 h-12 bg-indigo-100 rounded-full flex items-center justify-center mb-6">
                                <span class="text-indigo-600 font-bold">3</span>
                            </div>
                            <h3 class="text-xl font-semibold mb-3">Apply with Confidence</h3>
                            <p class="text-gray-600 mb-4">Use our tools and resources to submit strong applications and track your progress.</p>
                            <div class="flex justify-center">
                                <img src="http://static.photos/education/320x240/3" alt="Application process" class="rounded-lg w-full max-w-xs">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Featured Opportunities -->
    <section class="py-20 bg-white">
        <div class="container mx-auto px-6">
            <div class="text-center mb-16" data-aos="fade-up">
                <h2 class="text-3xl md:text-4xl font-bold mb-4">Featured Opportunities</h2>
                <p class="max-w-2xl mx-auto text-gray-600 text-lg">Discover some of our top scholarship and program recommendations.</p>
            </div>
            
            <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
                <!-- Opportunity 1 -->
                <div class="opportunity-card bg-white rounded-xl shadow-sm hover:shadow-md transition overflow-hidden" data-aos="fade-up" data-aos-delay="100">
                    <div class="relative">
                        <img src="http://static.photos/education/640x360/4" alt="Scholarship" class="w-full h-48 object-cover">
                        <div class="absolute top-4 right-4 bg-indigo-600 text-white px-3 py-1 rounded-full text-xs font-semibold">
                            Full Scholarship
                        </div>
                    </div>
                    <div class="p-6">
                        <div class="flex items-center mb-2">
                            <i data-feather="map-pin" class="w-4 h-4 text-gray-500 mr-1"></i>
                            <span class="text-sm text-gray-500">United States</span>
                        </div>
                        <h3 class="text-xl font-semibold mb-2">Global Leaders Scholarship</h3>
                        <p class="text-gray-600 mb-4">For outstanding international students pursuing undergraduate studies in STEM fields.</p>
                        <div class="flex justify-between items-center">
                            <span class="text-sm text-gray-500">Deadline: June 15, 2023</span>
                            <button class="px-4 py-2 bg-indigo-600 text-white rounded-full text-sm font-medium hover:bg-indigo-700 transition">
                                Apply Now
                            </button>
                        </div>
                    </div>
                </div>
                
                <!-- Opportunity 2 -->
                <div class="opportunity-card bg-white rounded-xl shadow-sm hover:shadow-md transition overflow-hidden" data-aos="fade-up" data-aos-delay="200">
                    <div class="relative">
                        <img src="http://static.photos/education/640x360/5" alt="Internship" class="w-full h-48 object-cover">
                        <div class="absolute top-4 right-4 bg-green-600 text-white px-3 py-1 rounded-full text-xs font-semibold">
                            Premium
                        </div>
                    </div>
                    <div class="p-6">
                        <div class="flex items-center mb-2">
                            <i data-feather="map-pin" class="w-4 h-4 text-gray-500 mr-1"></i>
                            <span class="text-sm text-gray-500">Germany</span>
                        </div>
                        <h3 class="text-xl font-semibold mb-2">Tech Innovation Internship</h3>
                        <p class="text-gray-600 mb-4">Summer program for computer science students at leading European tech companies.</p>
                        <div class="flex justify-between items-center">
                            <span class="text-sm text-gray-500">Deadline: April 30, 2023</span>
                            <button class="px-4 py-2 bg-indigo-600 text-white rounded-full text-sm font-medium hover:bg-indigo-700 transition">
                                Apply Now
                            </button>
                        </div>
                    </div>
                </div>
                
                <!-- Opportunity 3 -->
                <div class="opportunity-card bg-white rounded-xl shadow-sm hover:shadow-md transition overflow-hidden" data-aos="fade-up" data-aos-delay="300">
                    <div class="relative">
                        <img src="http://static.photos/education/640x360/6" alt="Exchange" class="w-full h-48 object-cover">
                        <div class="absolute top-4 right-4 bg-yellow-500 text-white px-3 py-1 rounded-full text-xs font-semibold">
                            Limited Time
                        </div>
                    </div>
                    <div class="p-6">
                        <div class="flex items-center mb-2">
                            <i data-feather="map-pin" class="w-4 h-4 text-gray-500 mr-1"></i>
                            <span class="text-sm text-gray-500">Japan</span>
                        </div>
                        <h3 class="text-xl font-semibold mb-2">Cultural Exchange Program</h3>
                        <p class="text-gray-600 mb-4">One-year academic exchange at prestigious Japanese universities with language training.</p>
                        <div class="flex justify-between items-center">
                            <span class="text-sm text-gray-500">Deadline: May 1, 2023</span>
                            <button class="px-4 py-2 bg-indigo-600 text-white rounded-full text-sm font-medium hover:bg-indigo-700 transition">
                                Apply Now
                            </button>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="text-center mt-12" data-aos="fade-up">
                <button class="px-6 py-3 bg-white border border-indigo-600 text-indigo-600 rounded-full font-medium hover:bg-indigo-50 transition">
                    View All Opportunities
                </button>
            </div>
        </div>
    </section>

    <!-- Resources Section -->
    <section class="py-20 bg-gray-50">
        <div class="container mx-auto px-6">
            <div class="text-center mb-16" data-aos="fade-up">
                <h2 class="text-3xl md:text-4xl font-bold mb-4">Resources & Insights</h2>
                <p class="max-w-2xl mx-auto text-gray-600 text-lg">Tools and knowledge to strengthen your applications.</p>
            </div>
            
            <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
                <div class="bg-white p-6 rounded-xl shadow-sm hover:shadow-md transition" data-aos="fade-up" data-aos-delay="100">
                    <div class="w-12 h-12 bg-indigo-100 rounded-full flex items-center justify-center mb-4">
                        <i data-feather="edit-3" class="text-indigo-600"></i>
                    </div>
                    <h3 class="text-lg font-semibold mb-2">Essay Writing Guide</h3>
                    <p class="text-gray-600 text-sm mb-4">Learn how to craft compelling personal statements that stand out.</p>
                    <a href="#" class="text-indigo-600 text-sm font-medium flex items-center">
                        Read More <i data-feather="arrow-right" class="w-4 h-4 ml-1"></i>
                    </a>
                </div>
                
                <div class="bg-white p-6 rounded-xl shadow-sm hover:shadow-md transition" data-aos="fade-up" data-aos-delay="200">
                    <div class="w-12 h-12 bg-indigo-100 rounded-full flex items-center justify-center mb-4">
                        <i data-feather="mic" class="text-indigo-600"></i>
                    </div>
                    <h3 class="text-lg font-semibold mb-2">Interview Preparation</h3>
                    <p class="text-gray-600 text-sm mb-4">Master the art of scholarship and program interviews with our tips.</p>
                    <a href="#" class="text-indigo-600 text-sm font-medium flex items-center">
                        Read More <i data-feather="arrow-right" class="w-4 h-4 ml-1"></i>
                    </a>
                </div>
                
                <div class="bg-white p-6 rounded-xl shadow-sm hover:shadow-md transition" data-aos="fade-up" data-aos-delay="300">
                    <div class="w-12 h-12 bg-indigo-100 rounded-full flex items-center justify-center mb-4">
                        <i data-feather="file-text" class="text-indigo-600"></i>
                    </div>
                    <h3 class="text-lg font-semibold mb-2">CV Optimization</h3>
                    <p class="text-gray-600 text-sm mb-4">Create a professional academic CV that highlights your strengths.</p>
                    <a href="#" class="text-indigo-600 text-sm font-medium flex items-center">
                        Read More <i data-feather="arrow-right" class="w-4 h-4 ml-1"></i>
                    </a>
                </div>
                
                <div class="bg-white p-6 rounded-xl shadow-sm hover:shadow-md transition" data-aos="fade-up" data-aos-delay="400">
                    <div class="w-12 h-12 bg-indigo-100 rounded-full flex items-center justify-center mb-4">
                        <i data-feather="mail" class="text-indigo-600"></i>
                    </div>
                    <h3 class="text-lg font-semibold mb-2">Newsletter</h3>
                    <p class="text-gray-600 text-sm mb-4">Get the latest opportunities and tips delivered to your inbox.</p>
                    <div class="flex">
                        <input type="email" placeholder="Your email" class="flex-grow px-4 py-2 border border-gray-300 rounded-l-lg focus:outline-none focus:ring-2 focus:ring-indigo-200 focus:border-transparent text-sm">
                        <button class="px-4 py-2 bg-indigo-600 text-white rounded-r-lg text-sm font-medium hover:bg-indigo-700 transition">
                            <i data-feather="send" class="w-4 h-4"></i>
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Testimonials -->
    <section class="py-20 bg-white">
        <div class="container mx-auto px-6">
            <div class="text-center mb-16" data-aos="fade-up">
                <h2 class="text-3xl md:text-4xl font-bold mb-4">Success Stories</h2>
                <p class="max-w-2xl mx-auto text-gray-600 text-lg">Hear from students who found their perfect opportunity through Boursa AI.</p>
            </div>
            
            <div class="grid md:grid-cols-3 gap-8">
                <div class="bg-gray-50 p-8 rounded-xl" data-aos="fade-up" data-aos-delay="100">
                    <div class="flex items-center mb-6">
                        <img src="http://static.photos/people/200x200/7" alt="Student" class="w-12 h-12 rounded-full object-cover">
                        <div class="ml-4">
                            <h4 class="font-semibold">Maria Rodriguez</h4>
                            <p class="text-gray-500 text-sm">Fulbright Scholar, Colombia</p>
                        </div>
                    </div>
                    <p class="text-gray-600 italic">"Boursa AI matched me with scholarships I never would have found on my own. The application resources were invaluable in helping me secure my dream program."</p>
                </div>
                
                <div class="bg-gray-50 p-8 rounded-xl" data-aos="fade-up" data-aos-delay="200">
                    <div class="flex items-center mb-6">
                        <img src="http://static.photos/people/200x200/8" alt="Student" class="w-12 h-12 rounded-full object-cover">
                        <div class="ml-4">
                            <h4 class="font-semibold">Kwame Nkrumah</h4>
                            <p class="text-gray-500 text-sm">MIT Graduate, Ghana</p>
                        </div>
                    </div>
                    <p class="text-gray-600 italic">"The AI recommendations were spot-on. I got accepted to three of the five programs Boursa suggested, all with full funding."</p>
                </div>
                
                <div class="bg-gray-50 p-8 rounded-xl" data-aos="fade-up" data-aos-delay="300">
                    <div class="flex items-center mb-6">
                        <img src="http://static.photos/people/200x200/9" alt="Student" class="w-12 h-12 rounded-full object-cover">
                        <div class="ml-4">
                            <h4 class="font-semibold">Ananya Patel</h4>
                            <p class="text-gray-500 text-sm">Exchange Student, India</p>
                        </div>
                    </div>
                    <p class="text-gray-600 italic">"The platform made the entire process so much easier. From finding programs to preparing my applications, everything was in one place."</p>
                </div>
            </div>
            
            <div class="mt-16" data-aos="fade-up">
                <div class="bg-indigo-50 p-8 rounded-xl">
                    <div class="text-center">
                        <h3 class="text-2xl font-semibold mb-4">Our Partners</h3>
                        <div class="flex flex-wrap justify-center items-center gap-8 md:gap-16">
                            <img src="http://static.photos/education/200x200/10" alt="Partner" class="h-12 opacity-70 hover:opacity-100 transition">
                            <img src="http://static.photos/education/200x200/11" alt="Partner" class="h-12 opacity-70 hover:opacity-100 transition">
                            <img src="http://static.photos/education/200x200/12" alt="Partner" class="h-12 opacity-70 hover:opacity-100 transition">
                            <img src="http://static.photos/education/200x200/13" alt="Partner" class="h-12 opacity-70 hover:opacity-100 transition">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- CTA Section -->
    <section class="py-20 bg-indigo-600 text-white">
        <div class="container mx-auto px-6 text-center" data-aos="fade-up">
            <h2 class="text-3xl md:text-4xl font-bold mb-6">Ready to Find Your Perfect Opportunity?</h2>
            <p class="max-w-2xl mx-auto text-indigo-100 text-lg mb-10">Join thousands of students who have discovered life-changing education programs through Boursa AI.</p>
            <button class="px-8 py-4 bg-white text-indigo-600 rounded-full font-semibold text-lg hover:bg-gray-100 transition shadow-lg">
                Get Started for Free
            </button>
        </div>
    </section>

    <!-- Footer -->
    <footer class="bg-gray-900 text-gray-400 py-12">
        <div class="container mx-auto px-6">
            <div class="grid md:grid-cols-4 gap-8">
                <div>
                    <div class="flex items-center mb-4">
                        <div class="w-10 h-10 rounded-full bg-indigo-600 flex items-center justify-center text-white font-bold text-xl">BA</div>
                        <span class="ml-3 text-white text-xl font-semibold">Boursa AI</span>
                    </div>
                    <p class="mb-4">Empowering students to discover global education opportunities through AI.</p>
                    <div class="flex space-x-4">
                        <a href="#" class="text-gray-400 hover:text-white transition">
                            <i data-feather="facebook"></i>
                        </a>
                        <a href="#" class="text-gray-400 hover:text-white transition">
                            <i data-feather="twitter"></i>
                        </a>
                        <a href="#" class="text-gray-400 hover:text-white transition">
                            <i data-feather="instagram"></i>
                        </a>
                        <a href="#" class="text-gray-400 hover:text-white transition">
                            <i data-feather="linkedin"></i>
                        </a>
                    </div>
                </div>
                
                <div>
                    <h4 class="text-white text-lg font-semibold mb-4">Quick Links</h4>
                    <ul class="space-y-2">
                        <li><a href="#" class="hover:text-white transition">Home</a></li>
                        <li><a href="#" class="hover:text-white transition">About Us</a></li>
                        <li><a href="#" class="hover:text-white transition">How It Works</a></li>
                        <li><a href="#" class="hover:text-white transition">Testimonials</a></li>
                        <li><a href="#" class="hover:text-white transition">Contact</a></li>
                    </ul>
                </div>
                
                <div>
                    <h4 class="text-white text-lg font-semibold mb-4">Opportunities</h4>
                    <ul class="space-y-2">
                        <li><a href="#" class="hover:text-white transition">Scholarships</a></li>
                        <li><a href="#" class="hover:text-white transition">Internships</a></li>
                        <li><a href="#" class="hover:text-white transition">Language Courses</a></li>
                        <li><a href="#" class="hover:text-white transition">Exchange Programs</a></li>
                        <li><a href="#" class="hover:text-white transition">All Opportunities</a></li>
                    </ul>
                </div>
                
                <div>
                    <h4 class="text-white text-lg font-semibold mb-4">Legal</h4>
                    <ul class="space-y-2">
                        <li><a href="#" class="hover:text-white transition">Privacy Policy</a></li>
                        <li><a href="#" class="hover:text-white transition">Terms of Service</a></li>
                        <li><a href="#" class="hover:text-white transition">Cookie Policy</a></li>
                        <li><a href="#" class="hover:text-white transition">GDPR Compliance</a></li>
                    </ul>
                </div>
            </div>
            
            <div class="border-t border-gray-800 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center">
                <p>© 2023 Boursa AI. All rights reserved.</p>
                <div class="mt-4 md:mt-0">
                    <button class="text-gray-400 hover:text-white transition flex items-center">
                        <i data-feather="globe" class="w-4 h-4 mr-2"></i> English
                    </button>
                </div>
            </div>
        </div>
    </footer>

    <!-- Back to Top -->
    <button id="backToTop" class="fixed bottom-8 right-8 w-12 h-12 bg-indigo-600 text-white rounded-full shadow-lg flex items-center justify-center opacity-0 invisible transition-all duration-300">
        <i data-feather="arrow-up"></i>
    </button>

    <script>
        // Initialize AOS
        AOS.init({
            duration: 800,
            easing: 'ease-in-out',
            once: true
        });

        // Header scroll effect
        window.addEventListener('scroll', function() {
            const header = document.getElementById('header');
            if (window.scrollY > 100) {
                header.classList.remove('nav-transparent');
                header.classList.add('nav-solid');
                
                // Change nav link colors
                document.querySelectorAll('.nav-link').forEach(link => {
                    link.classList.remove('text-white');
                    link.classList.add('text-gray-800');
                    link.classList.remove('hover:text-indigo-200');
                    link.classList.add('hover:text-indigo-600');
                });
            } else {
                header.classList.add('nav-transparent');
                header.classList.remove('nav-solid');
                
                // Revert nav link colors
                document.querySelectorAll('.nav-link').forEach(link => {
                    link.classList.add('text-white');
                    link.classList.remove('text-gray-800');
                    link.classList.add('hover:text-indigo-200');
                    link.classList.remove('hover:text-indigo-600');
                });
            }
        });

        // Back to top button
        const backToTopButton = document.getElementById('backToTop');
        window.addEventListener('scroll', function() {
            if (window.scrollY > 300) {
                backToTopButton.classList.remove('opacity-0', 'invisible');
                backToTopButton.classList.add('opacity-100', 'visible');
            } else {
                backToTopButton.classList.remove('opacity-100', 'visible');
                backToTopButton.classList.add('opacity-0', 'invisible');
            }
        });

        backToTopButton.addEventListener('click', function() {
            window.scrollTo({
                top: 0,
                behavior: 'smooth'
            });
        });

        // Replace feather icons
        feather.replace();
    </script>
</body>
</html>