Hugging Face's logo

Spaces:
we2app
/
bongo-voyage-getaway-adventures
Running

App Files Community
we2app commited on
Commit
c476fe8
·
verified ·
1 Parent(s): 0dafdea

Redesign my website

Browse files
Files changed (2) hide show
  1. README.md +8 -5
  2. index.html +447 -18
README.md CHANGED
@@ -1,10 +1,13 @@
1
  ---
2
- title: Bongo Voyage Getaway Adventures
3
- emoji: 🐠
4
- colorFrom: red
5
- colorTo: gray
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
 
1
  ---
2
+ title: Bongo Voyage Getaway Adventures ✈️
3
+ colorFrom: yellow
4
+ colorTo: blue
5
+ emoji: 🐳
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite-v3
10
  ---
11
 
12
+ # Welcome to your new DeepSite project!
13
+ This project was created with [DeepSite](https://deepsite.hf.co).
index.html CHANGED
@@ -1,19 +1,448 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
19
  </html>
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Bongo Voyage - Your Travel Adventure Awaits</title>
7
+ <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script src="https://unpkg.com/feather-icons"></script>
10
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
11
+ <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"></script>
12
+ <style>
13
+ @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
14
+ body {
15
+ font-family: 'Poppins', sans-serif;
16
+ }
17
+ .hero-gradient {
18
+ background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
19
+ }
20
+ .nav-link:hover {
21
+ color: #3b82f6;
22
+ }
23
+ .dropdown:hover .dropdown-menu {
24
+ display: block;
25
+ }
26
+ .testimonial-card {
27
+ transition: all 0.3s ease;
28
+ }
29
+ .testimonial-card:hover {
30
+ transform: translateY(-5px);
31
+ box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
32
+ }
33
+ .product-card {
34
+ transition: all 0.3s ease;
35
+ }
36
+ .product-card:hover {
37
+ transform: translateY(-5px);
38
+ box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
39
+ }
40
+ .slide-in {
41
+ animation: slideIn 0.5s ease forwards;
42
+ }
43
+ @keyframes slideIn {
44
+ from {
45
+ opacity: 0;
46
+ transform: translateY(20px);
47
+ }
48
+ to {
49
+ opacity: 1;
50
+ transform: translateY(0);
51
+ }
52
+ }
53
+ </style>
54
+ </head>
55
+ <body class="bg-gray-50">
56
+ <!-- Top Navigation -->
57
+ <div class="bg-blue-900 text-white py-2 px-4">
58
+ <div class="container mx-auto flex justify-between items-center">
59
+ <div class="flex items-center space-x-4">
60
+ <span>English</span>
61
+ <span class="border-l border-gray-400 h-4"></span>
62
+ <a href="#" class="hover:text-blue-200">বাংলা</a>
63
+ </div>
64
+ <div class="flex items-center space-x-6">
65
+ <a href="#" class="flex items-center hover:text-blue-200">
66
+ <i data-feather="user" class="mr-1"></i> My Account
67
+ </a>
68
+ <a href="#" class="flex items-center hover:text-blue-200">
69
+ <i data-feather="heart" class="mr-1"></i> Wishlist
70
+ </a>
71
+ <a href="#" class="flex items-center hover:text-blue-200">
72
+ <i data-feather="shopping-cart" class="mr-1"></i> Cart (0)
73
+ </a>
74
+ <a href="#" class="flex items-center hover:text-blue-200">
75
+ <i data-feather="log-in" class="mr-1"></i> Login
76
+ </a>
77
+ </div>
78
+ </div>
79
+ </div>
80
+
81
+ <!-- Main Navigation -->
82
+ <nav class="bg-white shadow-md sticky top-0 z-50">
83
+ <div class="container mx-auto px-4 py-3 flex justify-between items-center">
84
+ <a href="#" class="flex items-center">
85
+ <img src="https://www.bongoholidays.com/images/EOOm3hDC0bfX.jpg" alt="Bongo Voyage" class="h-12">
86
+ </a>
87
+
88
+ <div class="hidden md:flex items-center space-x-8">
89
+ <a href="#" class="nav-link font-medium text-gray-700 hover:text-blue-600">Home</a>
90
+ <div class="dropdown relative">
91
+ <button class="nav-link font-medium text-gray-700 hover:text-blue-600 flex items-center">
92
+ Visit Visa <i data-feather="chevron-down" class="ml-1 w-4 h-4"></i>
93
+ </button>
94
+ <div class="dropdown-menu absolute hidden bg-white shadow-lg rounded-md mt-2 py-2 w-48 z-10">
95
+ <a href="#" class="block px-4 py-2 hover:bg-blue-50">Indian Visa</a>
96
+ <a href="#" class="block px-4 py-2 hover:bg-blue-50">Thailand Visa</a>
97
+ <a href="#" class="block px-4 py-2 hover:bg-blue-50">Malaysia Visa</a>
98
+ <!-- More items -->
99
+ </div>
100
+ </div>
101
+ <div class="dropdown relative">
102
+ <button class="nav-link font-medium text-gray-700 hover:text-blue-600 flex items-center">
103
+ Business Visa <i data-feather="chevron-down" class="ml-1 w-4 h-4"></i>
104
+ </button>
105
+ <div class="dropdown-menu absolute hidden bg-white shadow-lg rounded-md mt-2 py-2 w-48 z-10">
106
+ <a href="#" class="block px-4 py-2 hover:bg-blue-50">India Business Visa</a>
107
+ <a href="#" class="block px-4 py-2 hover:bg-blue-50">USA Business Visa</a>
108
+ <!-- More items -->
109
+ </div>
110
+ </div>
111
+ <a href="#" class="nav-link font-medium text-gray-700 hover:text-blue-600">Package Tour</a>
112
+ <a href="#" class="nav-link font-medium text-gray-700 hover:text-blue-600">About Us</a>
113
+ <a href="#" class="nav-link font-medium text-gray-700 hover:text-blue-600">Contact Us</a>
114
+ </div>
115
+
116
+ <div class="flex items-center space-x-4">
117
+ <button class="md:hidden">
118
+ <i data-feather="menu"></i>
119
+ </button>
120
+ <div class="relative">
121
+ <button class="flex items-center">
122
+ <i data-feather="shopping-cart" class="text-gray-700"></i>
123
+ <span class="ml-1 text-sm font-medium">0</span>
124
+ </button>
125
+ </div>
126
+ </div>
127
+ </div>
128
+ </nav>
129
+
130
+ <!-- Hero Section -->
131
+ <section class="hero-gradient text-white py-20">
132
+ <div id="vanta-globe" class="absolute w-full h-full"></div>
133
+ <div class="container mx-auto px-4 relative z-10">
134
+ <div class="max-w-2xl mx-auto text-center">
135
+ <h1 class="text-4xl md:text-5xl font-bold mb-6 slide-in">Explore The World With Bongo Voyage</h1>
136
+ <p class="text-xl mb-8 slide-in" style="animation-delay: 0.2s">Your trusted partner for visas, tours, and travel adventures</p>
137
+ <div class="flex flex-col sm:flex-row justify-center gap-4 slide-in" style="animation-delay: 0.4s">
138
+ <a href="#" class="bg-white text-blue-900 font-semibold px-6 py-3 rounded-lg hover:bg-gray-100 transition">Book a Tour</a>
139
+ <a href="#" class="border-2 border-white text-white font-semibold px-6 py-3 rounded-lg hover:bg-white hover:text-blue-900 transition">Apply for Visa</a>
140
+ </div>
141
+ </div>
142
+ </div>
143
+ </section>
144
+
145
+ <!-- Services Section -->
146
+ <section class="py-16">
147
+ <div class="container mx-auto px-4">
148
+ <h2 class="text-3xl font-bold text-center mb-12">Our Services</h2>
149
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
150
+ <div class="bg-white p-6 rounded-xl shadow-md text-center">
151
+ <div class="bg-blue-100 w-16 h-16 mx-auto rounded-full flex items-center justify-center mb-4">
152
+ <i data-feather="globe" class="text-blue-600 w-8 h-8"></i>
153
+ </div>
154
+ <h3 class="text-xl font-semibold mb-3">Visit Visa</h3>
155
+ <p class="text-gray-600">Easy visa processing for countries worldwide with high success rate</p>
156
+ </div>
157
+ <div class="bg-white p-6 rounded-xl shadow-md text-center">
158
+ <div class="bg-green-100 w-16 h-16 mx-auto rounded-full flex items-center justify-center mb-4">
159
+ <i data-feather="briefcase" class="text-green-600 w-8 h-8"></i>
160
+ </div>
161
+ <h3 class="text-xl font-semibold mb-3">Business Visa</h3>
162
+ <p class="text-gray-600">Professional visa services for your business travel needs</p>
163
+ </div>
164
+ <div class="bg-white p-6 rounded-xl shadow-md text-center">
165
+ <div class="bg-purple-100 w-16 h-16 mx-auto rounded-full flex items-center justify-center mb-4">
166
+ <i data-feather="map" class="text-purple-600 w-8 h-8"></i>
167
+ </div>
168
+ <h3 class="text-xl font-semibold mb-3">Package Tours</h3>
169
+ <p class="text-gray-600">Curated domestic and international tour packages at best prices</p>
170
+ </div>
171
+ </div>
172
+ </div>
173
+ </section>
174
+
175
+ <!-- Popular Packages -->
176
+ <section class="py-16 bg-gray-50">
177
+ <div class="container mx-auto px-4">
178
+ <h2 class="text-3xl font-bold text-center mb-12">Popular Packages</h2>
179
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
180
+ <!-- Package 1 -->
181
+ <div class="product-card bg-white rounded-xl overflow-hidden shadow-md">
182
+ <div class="relative">
183
+ <img src="https://www.bongoholidays.com/images/m15yxqIRA8aC.jpg" alt="Sundorbon Tour" class="w-full h-48 object-cover">
184
+ <span class="absolute top-3 right-3 bg-red-500 text-white text-xs font-semibold px-2 py-1 rounded">-20%</span>
185
+ </div>
186
+ <div class="p-5">
187
+ <h3 class="text-xl font-semibold mb-2">Sundorbon Tour</h3>
188
+ <div class="flex items-center mb-3">
189
+ <span class="text-gray-500 line-through mr-2">৳9,500.00</span>
190
+ <span class="text-blue-600 font-bold">৳7,600.00</span>
191
+ </div>
192
+ <p class="text-gray-600 mb-4">Explore the beauty of Sundarbans, the largest mangrove forest in the world.</p>
193
+ <button class="w-full bg-blue-600 text-white py-2 rounded-lg hover:bg-blue-700 transition">Add to Cart</button>
194
+ </div>
195
+ </div>
196
+
197
+ <!-- Package 2 -->
198
+ <div class="product-card bg-white rounded-xl overflow-hidden shadow-md">
199
+ <div class="relative">
200
+ <img src="https://www.bongoholidays.com/images/GkRAGiEgeKAp.jpg" alt="Bandorbon Tour" class="w-full h-48 object-cover">
201
+ </div>
202
+ <div class="p-5">
203
+ <h3 class="text-xl font-semibold mb-2">Bandorbon Tour</h3>
204
+ <div class="text-blue-600 font-bold mb-3">৳7,500.00</div>
205
+ <p class="text-gray-600 mb-4">Experience the tranquility of Bandarban's hills and indigenous culture.</p>
206
+ <button class="w-full bg-blue-600 text-white py-2 rounded-lg hover:bg-blue-700 transition">Add to Cart</button>
207
+ </div>
208
+ </div>
209
+
210
+ <!-- Package 3 -->
211
+ <div class="product-card bg-white rounded-xl overflow-hidden shadow-md">
212
+ <div class="relative">
213
+ <img src="https://www.bongoholidays.com/images/kncniB8ax4Lv.jpg" alt="USA Business Visa" class="w-full h-48 object-cover">
214
+ </div>
215
+ <div class="p-5">
216
+ <h3 class="text-xl font-semibold mb-2">USA Business Visa</h3>
217
+ <div class="text-blue-600 font-bold mb-3">৳6,500.00</div>
218
+ <p class="text-gray-600 mb-4">Professional assistance for your USA business visa application.</p>
219
+ <button class="w-full bg-blue-600 text-white py-2 rounded-lg hover:bg-blue-700 transition">Add to Cart</button>
220
+ </div>
221
+ </div>
222
+ </div>
223
+ <div class="text-center mt-10">
224
+ <a href="#" class="inline-block border-2 border-blue-600 text-blue-600 font-semibold px-6 py-3 rounded-lg hover:bg-blue-600 hover:text-white transition">View All Packages</a>
225
+ </div>
226
+ </div>
227
+ </section>
228
+
229
+ <!-- Testimonials -->
230
+ <section class="py-16">
231
+ <div class="container mx-auto px-4">
232
+ <h2 class="text-3xl font-bold text-center mb-12">What Our Clients Say</h2>
233
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
234
+ <!-- Testimonial 1 -->
235
+ <div class="testimonial-card bg-white p-6 rounded-xl shadow-md">
236
+ <div class="flex items-center mb-4">
237
+ <img src="https://www.bongoholidays.com/images/Pxuu41l4wK8L.png" alt="Liyana Mariam" class="w-12 h-12 rounded-full mr-4">
238
+ <div>
239
+ <h4 class="font-semibold">Liyana Mariam</h4>
240
+ <p class="text-gray-500 text-sm">Project Manager</p>
241
+ </div>
242
+ </div>
243
+ <p class="text-gray-700 mb-4">"Bongo Voyage visa processing prices are GREAT, and one other thing, the visa processing work is fantastic. Regularly, I am happy to get good service!"</p>
244
+ <div class="flex text-yellow-400">
245
+ <i data-feather="star" fill="currentColor" class="w-4 h-4"></i>
246
+ <i data-feather="star" fill="currentColor" class="w-4 h-4"></i>
247
+ <i data-feather="star" fill="currentColor" class="w-4 h-4"></i>
248
+ <i data-feather="star" fill="currentColor" class="w-4 h-4"></i>
249
+ <i data-feather="star" fill="currentColor" class="w-4 h-4"></i>
250
+ </div>
251
+ </div>
252
+
253
+ <!-- Testimonial 2 -->
254
+ <div class="testimonial-card bg-white p-6 rounded-xl shadow-md">
255
+ <div class="flex items-center mb-4">
256
+ <img src="https://www.bongoholidays.com/images/26iSEypG1vU0.png" alt="Mohammed Quraisi" class="w-12 h-12 rounded-full mr-4">
257
+ <div>
258
+ <h4 class="font-semibold">Mohammed Quraisi</h4>
259
+ <p class="text-gray-500 text-sm">Chairman</p>
260
+ </div>
261
+ </div>
262
+ <p class="text-gray-700 mb-4">"I would recommend visa processing at Bongo Voyage to anyone! Great service. All file processes are very cordial and delivered on time."</p>
263
+ <div class="flex text-yellow-400">
264
+ <i data-feather="star" fill="currentColor" class="w-4 h-4"></i>
265
+ <i data-feather="star" fill="currentColor" class="w-4 h-4"></i>
266
+ <i data-feather="star" fill="currentColor" class="w-4 h-4"></i>
267
+ <i data-feather="star" fill="currentColor" class="w-4 h-4"></i>
268
+ <i data-feather="star" fill="currentColor" class="w-4 h-4"></i>
269
+ </div>
270
+ </div>
271
+
272
+ <!-- Testimonial 3 -->
273
+ <div class="testimonial-card bg-white p-6 rounded-xl shadow-md">
274
+ <div class="flex items-center mb-4">
275
+ <img src="https://www.bongoholidays.com/images/QOpvA6dk7vhX.png" alt="Fatima binty Omar" class="w-12 h-12 rounded-full mr-4">
276
+ <div>
277
+ <h4 class="font-semibold">Fatima binty Omar</h4>
278
+ <p class="text-gray-500 text-sm">House Wife</p>
279
+ </div>
280
+ </div>
281
+ <p class="text-gray-700 mb-4">"It's hassle-free package tour experience at Bongo Voyage. Excellent for tour package. All their personnel are very helpful and caring."</p>
282
+ <div class="flex text-yellow-400">
283
+ <i data-feather="star" fill="currentColor" class="w-4 h-4"></i>
284
+ <i data-feather="star" fill="currentColor" class="w-4 h-4"></i>
285
+ <i data-feather="star" fill="currentColor" class="w-4 h-4"></i>
286
+ <i data-feather="star" fill="currentColor" class="w-4 h-4"></i>
287
+ <i data-feather="star" fill="currentColor" class="w-4 h-4"></i>
288
+ </div>
289
+ </div>
290
+ </div>
291
+ </div>
292
+ </section>
293
+
294
+ <!-- Why Choose Us -->
295
+ <section class="py-16 bg-gray-100">
296
+ <div class="container mx-auto px-4">
297
+ <h2 class="text-3xl font-bold text-center mb-12">Why Choose Bongo Voyage</h2>
298
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
299
+ <div class="text-center">
300
+ <div class="bg-blue-100 w-20 h-20 mx-auto rounded-full flex items-center justify-center mb-4">
301
+ <i data-feather="clock" class="text-blue-600 w-8 h-8"></i>
302
+ </div>
303
+ <h3 class="text-xl font-semibold mb-2">On Time Service</h3>
304
+ <p class="text-gray-600">We value your time and deliver services promptly</p>
305
+ </div>
306
+ <div class="text-center">
307
+ <div class="bg-green-100 w-20 h-20 mx-auto rounded-full flex items-center justify-center mb-4">
308
+ <i data-feather="award" class="text-green-600 w-8 h-8"></i>
309
+ </div>
310
+ <h3 class="text-xl font-semibold mb-2">High Success Rate</h3>
311
+ <p class="text-gray-600">Proven track record of visa approvals</p>
312
+ </div>
313
+ <div class="text-center">
314
+ <div class="bg-purple-100 w-20 h-20 mx-auto rounded-full flex items-center justify-center mb-4">
315
+ <i data-feather="users" class="text-purple-600 w-8 h-8"></i>
316
+ </div>
317
+ <h3 class="text-xl font-semibold mb-2">Expert Team</h3>
318
+ <p class="text-gray-600">Experienced professionals handling your applications</p>
319
+ </div>
320
+ <div class="text-center">
321
+ <div class="bg-yellow-100 w-20 h-20 mx-auto rounded-full flex items-center justify-center mb-4">
322
+ <i data-feather="dollar-sign" class="text-yellow-600 w-8 h-8"></i>
323
+ </div>
324
+ <h3 class="text-xl font-semibold mb-2">Competitive Pricing</h3>
325
+ <p class="text-gray-600">Best prices without compromising quality</p>
326
+ </div>
327
+ </div>
328
+ </div>
329
+ </section>
330
+
331
+ <!-- Contact CTA -->
332
+ <section class="py-16 hero-gradient text-white">
333
+ <div class="container mx-auto px-4 text-center">
334
+ <h2 class="text-3xl font-bold mb-6">Ready to Start Your Journey?</h2>
335
+ <p class="text-xl mb-8 max-w-2xl mx-auto">Contact our travel experts today to plan your perfect trip or visa application.</p>
336
+ <div class="flex flex-col sm:flex-row justify-center gap-4">
337
+ <a href="#" class="bg-white text-blue-900 font-semibold px-6 py-3 rounded-lg hover:bg-gray-100 transition">
338
+ <i data-feather="phone" class="inline mr-2"></i> Call Now
339
+ </a>
340
+ <a href="#" class="border-2 border-white text-white font-semibold px-6 py-3 rounded-lg hover:bg-white hover:text-blue-900 transition">
341
+ <i data-feather="mail" class="inline mr-2"></i> Email Us
342
+ </a>
343
+ </div>
344
+ </div>
345
+ </section>
346
+
347
+ <!-- Footer -->
348
+ <footer class="bg-gray-900 text-white pt-16 pb-8">
349
+ <div class="container mx-auto px-4">
350
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 mb-12">
351
+ <!-- Contact Info -->
352
+ <div>
353
+ <h3 class="text-xl font-semibold mb-4">Contact Us</h3>
354
+ <p class="mb-4">Union Heights, Level-06, 55-02,<br>Bir Uttam Kazi Nuruzzaman,<br>West Panthapath, Dhanmondi,<br>1205 Dhaka, Bangladesh</p>
355
+ <p class="mb-1"><i data-feather="phone" class="inline mr-2 w-4 h-4"></i> +8802-8411789</p>
356
+ <p class="mb-1"><i data-feather="smartphone" class="inline mr-2 w-4 h-4"></i> +8801726890417</p>
357
+ <p class="mb-1"><i data-feather="mail" class="inline mr-2 w-4 h-4"></i> [email protected]</p>
358
+ </div>
359
+
360
+ <!-- Quick Links -->
361
+ <div>
362
+ <h3 class="text-xl font-semibold mb-4">Quick Links</h3>
363
+ <ul class="space-y-2">
364
+ <li><a href="#" class="hover:text-blue-300 transition">Home</a></li>
365
+ <li><a href="#" class="hover:text-blue-300 transition">Visit Visa</a></li>
366
+ <li><a href="#" class="hover:text-blue-300 transition">Business Visa</a></li>
367
+ <li><a href="#" class="hover:text-blue-300 transition">Package Tours</a></li>
368
+ <li><a href="#" class="hover:text-blue-300 transition">About Us</a></li>
369
+ <li><a href="#" class="hover:text-blue-300 transition">Contact Us</a></li>
370
+ </ul>
371
+ </div>
372
+
373
+ <!-- Visa Services -->
374
+ <div>
375
+ <h3 class="text-xl font-semibold mb-4">Visa Services</h3>
376
+ <ul class="space-y-2">
377
+ <li><a href="#" class="hover:text-blue-300 transition">USA Visa</a></li>
378
+ <li><a href="#" class="hover:text-blue-300 transition">UK Visa</a></li>
379
+ <li><a href="#" class="hover:text-blue-300 transition">Canada Visa</a></li>
380
+ <li><a href="#" class="hover:text-blue-300 transition">Australia Visa</a></li>
381
+ <li><a href="#" class="hover:text-blue-300 transition">Malaysia Visa</a></li>
382
+ <li><a href="#" class="hover:text-blue-300 transition">Singapore Visa</a></li>
383
+ </ul>
384
+ </div>
385
+
386
+ <!-- Newsletter -->
387
+ <div>
388
+ <h3 class="text-xl font-semibold mb-4">Newsletter</h3>
389
+ <p class="mb-4">Subscribe to get updates on new packages and offers</p>
390
+ <form class="flex">
391
+ <input type="email" placeholder="Your email" class="px-4 py-2 text-gray-900 rounded-l-lg focus:outline-none w-full">
392
+ <button type="submit" class="bg-blue-600 px-4 py-2 rounded-r-lg hover:bg-blue-700 transition">
393
+ <i data-feather="send"></i>
394
+ </button>
395
+ </form>
396
+ <div class="flex mt-4 space-x-4">
397
+ <a href="#" class="hover:text-blue-300 transition"><i data-feather="facebook"></i></a>
398
+ <a href="#" class="hover:text-blue-300 transition"><i data-feather="twitter"></i></a>
399
+ <a href="#" class="hover:text-blue-300 transition"><i data-feather="instagram"></i></a>
400
+ <a href="#" class="hover:text-blue-300 transition"><i data-feather="linkedin"></i></a>
401
+ </div>
402
+ </div>
403
+ </div>
404
+
405
+ <div class="border-t border-gray-700 pt-8 text-center">
406
+ <p>&copy; 2023 Bongo Voyage. All rights reserved.</p>
407
+ </div>
408
+ </div>
409
+ </footer>
410
+
411
+ <script>
412
+ feather.replace();
413
+
414
+ // Vanta.js Globe Animation
415
+ VANTA.GLOBE({
416
+ el: "#vanta-globe",
417
+ mouseControls: true,
418
+ touchControls: true,
419
+ gyroControls: false,
420
+ minHeight: 200.00,
421
+ minWidth: 200.00,
422
+ scale: 1.00,
423
+ scaleMobile: 1.00,
424
+ color: 0x3b82f6,
425
+ backgroundColor: 0x1e3c72,
426
+ size: 1.00
427
+ });
428
+
429
+ // Animation for elements
430
+ document.addEventListener('DOMContentLoaded', function() {
431
+ const animateOnScroll = function() {
432
+ const elements = document.querySelectorAll('.slide-in');
433
+ elements.forEach(element => {
434
+ const elementPosition = element.getBoundingClientRect().top;
435
+ const windowHeight = window.innerHeight;
436
+ if (elementPosition < windowHeight - 100) {
437
+ element.style.opacity = '1';
438
+ element.style.transform = 'translateY(0)';
439
+ }
440
+ });
441
+ };
442
+
443
+ window.addEventListener('scroll', animateOnScroll);
444
+ animateOnScroll(); // Run once on load
445
+ });
446
+ </script>
447
+ </body>
448
  </html>