Hugging Face's logo

Spaces:
flen-crypto
/
undefined
Running

App Files Community
flen-crypto commited on
Commit
f209c2c
·
verified ·
1 Parent(s): 8d93cfc

improve, add extra pages

Browse files
Files changed (6) hide show
  1. README.md +9 -5
  2. blog.html +303 -0
  3. contact.html +266 -0
  4. destinations.html +371 -0
  5. index.html +483 -19
  6. packages.html +325 -0
README.md CHANGED
@@ -1,10 +1,14 @@
1
  ---
2
- title: Undefined
3
- emoji: 🏢
4
- colorFrom: pink
5
- colorTo: red
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: undefined
3
+ colorFrom: yellow
4
+ colorTo: green
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).
14
+
blog.html ADDED
@@ -0,0 +1,303 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>Travel Blog - TravelinLite Pro</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
+ <style>
11
+ @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
12
+
13
+ * {
14
+ font-family: 'Poppins', sans-serif;
15
+ }
16
+
17
+ .gradient-text {
18
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
19
+ -webkit-background-clip: text;
20
+ -webkit-text-fill-color: transparent;
21
+ background-clip: text;
22
+ }
23
+
24
+ .blog-card {
25
+ transition: all 0.3s ease;
26
+ }
27
+
28
+ .blog-card:hover {
29
+ transform: translateY(-5px);
30
+ box-shadow: 0 20px 40px rgba(0,0,0,0.1);
31
+ }
32
+
33
+ .read-more {
34
+ color: #667eea;
35
+ font-weight: 600;
36
+ }
37
+
38
+ .read-more:hover {
39
+ color: #764ba2;
40
+ }
41
+ </style>
42
+ </head>
43
+ <body class="bg-gray-50">
44
+ <!-- Navigation -->
45
+ <nav class="fixed w-full z-50 bg-white shadow-lg">
46
+ <div class="container mx-auto px-6 py-4">
47
+ <div class="flex items-center justify-between">
48
+ <div class="flex items-center space-x-2">
49
+ <a href="index.html" class="flex items-center space-x-2">
50
+ <i data-feather="map-pin" class="text-purple-600 w-8 h-8"></i>
51
+ <span class="text-2xl font-bold gradient-text">TravelinLite Pro</span>
52
+ </a>
53
+ </div>
54
+ <div class="hidden md:flex items-center space-x-8">
55
+ <a href="index.html" class="text-gray-700 hover:text-purple-600 transition-colors">Home</a>
56
+ <a href="destinations.html" class="text-gray-700 hover:text-purple-600 transition-colors">Destinations</a>
57
+ <a href="packages.html" class="text-gray-700 hover:text-purple-600 transition-colors">Packages</a>
58
+ <a href="blog.html" class="text-purple-600 font-semibold">Blog</a>
59
+ <a href="contact.html" class="text-gray-700 hover:text-purple-600 transition-colors">Contact</a>
60
+ <button class="bg-purple-600 text-white px-6 py-2 rounded-full hover:bg-purple-700 transition-colors">
61
+ Book Now
62
+ </button>
63
+ </div>
64
+ <button class="md:hidden" id="mobileMenuBtn">
65
+ <i data-feather="menu" class="w-6 h-6"></i>
66
+ </button>
67
+ </div>
68
+ </div>
69
+ </nav>
70
+
71
+ <!-- Hero Section -->
72
+ <section class="pt-32 pb-20 bg-gradient-to-r from-blue-500 to-purple-600 text-white">
73
+ <div class="container mx-auto px-6 text-center">
74
+ <h1 class="text-5xl md:text-6xl font-bold mb-6">
75
+ Travel Blog
76
+ </h1>
77
+ <p class="text-xl mb-8 max-w-3xl mx-auto">
78
+ Discover travel tips, destination guides, and inspiring stories from fellow lightweight travelers.
79
+ </p>
80
+ </div>
81
+ </section>
82
+
83
+ <!-- Blog Posts -->
84
+ <section class="py-20 bg-white">
85
+ <div class="container mx-auto px-6">
86
+ <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
87
+ <!-- Blog Post 1 -->
88
+ <article class="blog-card bg-white rounded-2xl shadow-lg overflow-hidden">
89
+ <img src="https://static.photos/travel/640x360/211" alt="Packing Tips" class="w-full h-48 object-cover">
90
+ <div class="p-6">
91
+ <span class="text-sm text-purple-600 font-semibold">PACKING GUIDE</span>
92
+ <h3 class="text-xl font-bold my-3">10 Essential Items for Lightweight Travel</h3>
93
+ <p class="text-gray-600 text-sm mb-4">
94
+ Learn what to pack and what to leave behind for your next adventure...
95
+ </p>
96
+ <div class="flex justify-between items-center text-sm text-gray-500">
97
+ <span>5 min read</span>
98
+ <span>Mar 15, 2024</span>
99
+ </div>
100
+ <a href="#" class="read-more block p-4 border-t border-gray-100 text-center">
101
+ Read More
102
+ </a>
103
+ </div>
104
+ </article>
105
+
106
+ <!-- Blog Post 2 -->
107
+ <article class="blog-card bg-white rounded-2xl shadow-lg overflow-hidden">
108
+ <img src="https://static.photos/nature/640x360/212" alt="Budget Travel" class="w-full h-48 object-cover">
109
+ <div class="p-6">
110
+ <span class="text-sm text-purple-600 font-semibold">BUDGET TIPS</span>
111
+ <h3 class="text-xl font-bold my-3">How to Travel the World on $50 a Day</h3>
112
+ <p class="text-gray-600 text-sm mb-4">
113
+ Discover how to explore amazing destinations without breaking the bank...
114
+ </p>
115
+ <div class="flex justify-between items-center text-sm text-gray-500">
116
+ <span>7 min read</span>
117
+ <span>Mar 12, 2024</span>
118
+ </div>
119
+ <a href="#" class="read-more block p-4 border-t border-gray-100 text-center">
120
+ Read More
121
+ </a>
122
+ </div>
123
+ </article>
124
+
125
+ <!-- Blog Post 3 -->
126
+ <article class="blog-card bg-white rounded-2xl shadow-lg overflow-hidden">
127
+ <img src="https://static.photos/people/640x360/213" alt="Solo Travel" class="w-full h-48 object-cover">
128
+ <div class="p-6">
129
+ <span class="text-sm text-purple-600 font-semibold">SOLO TRAVEL</span>
130
+ <h3 class="text-xl font-bold my-3">The Ultimate Guide to Solo Travel Safety</h3>
131
+ <p class="text-gray-600 text-sm mb-4">
132
+ Essential safety tips and precautions for solo adventurers...
133
+ </p>
134
+ <div class="flex justify-between items-center text-sm text-gray-500">
135
+ <span>8 min read</span>
136
+ <span>Mar 8, 2024</span>
137
+ </div>
138
+ <a href="#" class="read-more block p-4 border-t border-gray-100 text-center">
139
+ Read More
140
+ </a>
141
+ </div>
142
+ </article>
143
+
144
+ <!-- Blog Post 4 -->
145
+ <article class="blog-card bg-white rounded-2xl shadow-lg overflow-hidden">
146
+ <img src="https://static.photos/food/640x360/214" alt="Local Cuisine" class="w-full h-48 object-cover">
147
+ <div class="p-6">
148
+ <span class="text-sm text-purple-600 font-semibold">FOOD GUIDE</span>
149
+ <h3 class="text-xl font-bold my-3">Must-Try Street Foods Around the World</h3>
150
+ <p class="text-gray-600 text-sm mb-4">
151
+ Explore the delicious world of street food from Bangkok to Mexico City...
152
+ </p>
153
+ <div class="flex justify-between items-center text-sm text-gray-500">
154
+ <span>6 min read</span>
155
+ <span>Mar 5, 2024</span>
156
+ </div>
157
+ <a href="#" class="read-more block p-4 border-t border-gray-100 text-center">
158
+ Read More
159
+ </a>
160
+ </div>
161
+ </article>
162
+
163
+ <!-- Blog Post 5 -->
164
+ <article class="blog-card bg-white rounded-2xl shadow-lg overflow-hidden">
165
+ <img src="https://static.photos/travel/640x360/215" alt="Photography" class="w-full h-48 object-cover">
166
+ <div class="p-6">
167
+ <span class="text-sm text-purple-600 font-semibold">PHOTOGRAPHY</span>
168
+ <h3 class="text-xl font-bold my-3">10 Photography Tips for Stunning Travel Shots</h3>
169
+ <p class="text-gray-600 text-sm mb-4">
170
+ Capture your adventures like a pro with these simple photography techniques...
171
+ </p>
172
+ <div class="flex justify-between items-center text-sm text-gray-500">
173
+ <span>9 min read</span>
174
+ <span>Mar 1, 2024</span>
175
+ </div>
176
+ <a href="#" class="read-more block p-4 border-t border-gray-100 text-center">
177
+ Read More
178
+ </a>
179
+ </div>
180
+ </article>
181
+
182
+ <!-- Blog Post 6 -->
183
+ <article class="blog-card bg-white rounded-2xl shadow-lg overflow-hidden">
184
+ <img src="https://static.photos/nature/640x360/216" alt="Sustainable Travel" class="w-full h-48 object-cover">
185
+ <div class="p-6">
186
+ <span class="text-sm text-purple-600 font-semibold">SUSTAINABILITY</span>
187
+ <h3 class="text-xl font-bold my-3">How to Travel Sustainably in 2024</h3>
188
+ <p class="text-gray-600 text-sm mb-4">
189
+ Learn how to reduce your environmental impact while exploring the world...
190
+ </p>
191
+ <div class="flex justify-between items-center text-sm text-gray-500">
192
+ <span>11 min read</span>
193
+ <span>Feb 26, 2024</span>
194
+ </div>
195
+ <a href="#" class="read-more block p-4 border-t border-gray-100 text-center">
196
+ Read More
197
+ </a>
198
+ </div>
199
+ </article>
200
+ </div>
201
+ </div>
202
+ </section>
203
+
204
+ <!-- Newsletter -->
205
+ <section class="py-20 bg-gray-50">
206
+ <div class="container mx-auto px-6 text-center">
207
+ <h2 class="text-3xl font-bold mb-6 gradient-text">Never Miss a Post</h2>
208
+ <p class="text-gray-600 mb-8 max-w-2xl mx-auto">
209
+ Subscribe to our blog and get the latest travel tips and destination guides delivered to your inbox.
210
+ </p>
211
+ <div class="flex flex-col sm:flex-row gap-4 justify-center max-w-md mx-auto">
212
+ <input type="email" placeholder="Enter your email" class="flex-1 px-6 py-3 rounded-full border border-gray-300 focus:outline-none focus:border-purple-600" id="blogNewsletter">
213
+ <button class="bg-purple-600 text-white px-8 py-3 rounded-full hover:bg-purple-700 transition-colors">
214
+ Subscribe
215
+ </button>
216
+ </div>
217
+ </section>
218
+
219
+ <!-- Footer -->
220
+ <footer class="bg-gray-900 text-white py-12">
221
+ <div class="container mx-auto px-6">
222
+ <div class="grid md:grid-cols-4 gap-8 mb-8">
223
+ <div>
224
+ <div class="flex items-center space-x-2 mb-4">
225
+ <i data-feather="map-pin" class="text-purple-400 w-6 h-6"></i>
226
+ <span class="text-xl font-bold">TravelinLite Pro</span>
227
+ </div>
228
+ <p class="text-gray-400">
229
+ Your gateway to featherweight adventures around the world.
230
+ </p>
231
+ </div>
232
+ <div>
233
+ <h4 class="font-semibold mb-4">Quick Links</h4>
234
+ <ul class="space-y-2 text-gray-400">
235
+ <li><a href="index.html" class="hover:text-white transition-colors">Home</a></li>
236
+ <li><a href="destinations.html" class="hover:text-white transition-colors">Destinations</a></li>
237
+ <li><a href="packages.html" class="hover:text-white transition-colors">Packages</a></li>
238
+ <li><a href="blog.html" class="hover:text-white transition-colors">Blog</a></li>
239
+ </ul>
240
+ </div>
241
+ <div>
242
+ <h4 class="font-semibold mb-4">Support</h4>
243
+ <ul class="space-y-2 text-gray-400">
244
+ <li><a href="contact.html" class="hover:text-white transition-colors">Contact</a></li>
245
+ <li><a href="#" class="hover:text-white transition-colors">Help Center</a></li>
246
+ <li><a href="#" class="hover:text-white transition-colors">Safety Info</a></li>
247
+ <li><a href="#" class="hover:text-white transition-colors">Terms</a></li>
248
+ </ul>
249
+ </div>
250
+ <div>
251
+ <h4 class="font-semibold mb-4">Follow Us</h4>
252
+ <div class="flex space-x-4">
253
+ <a href="#" class="text-gray-400 hover:text-white transition-colors">
254
+ <i data-feather="facebook" class="w-6 h-6"></i>
255
+ </a>
256
+ <a href="#" class="text-gray-400 hover:text-white transition-colors">
257
+ <i data-feather="twitter" class="w-6 h-6"></i>
258
+ </a>
259
+ <a href="#" class="text-gray-400 hover:text-white transition-colors">
260
+ <i data-feather="instagram" class="w-6 h-6"></i>
261
+ </a>
262
+ <a href="#" class="text-gray-400 hover:text-white transition-colors">
263
+ <i data-feather="youtube" class="w-6 h-6"></i>
264
+ </a>
265
+ </div>
266
+ </div>
267
+ </div>
268
+ <div class="border-t border-gray-800 pt-8 text-center text-gray-400">
269
+ <p>&copy; 2024 TravelinLite Pro. All rights reserved. Made with ❤️ for travelers.</p>
270
+ </div>
271
+ </div>
272
+ </footer>
273
+
274
+ <script>
275
+ feather.replace();
276
+
277
+ // Newsletter subscription
278
+ document.getElementById('blogNewsletter').addEventListener('keypress', function(e) {
279
+ if (e.key === 'Enter') {
280
+ subscribeBlog();
281
+ }
282
+ });
283
+
284
+ document.querySelector('#blogNewsletter').nextElementSibling.addEventListener('click', subscribeBlog);
285
+
286
+ function subscribeBlog() {
287
+ const email = document.getElementById('blogNewsletter').value;
288
+ if (email && email.includes('@')) {
289
+ alert('Thank you for subscribing to our travel blog!');
290
+ document.getElementById('blogNewsletter').value = '';
291
+ } else {
292
+ alert('Please enter a valid email address.');
293
+ }
294
+ }
295
+
296
+ // Mobile menu toggle
297
+ const mobileMenuBtn = document.getElementById('mobileMenuBtn');
298
+ mobileMenuBtn.addEventListener('click', function() {
299
+ alert('Mobile menu would open here');
300
+ });
301
+ </script>
302
+ </body>
303
+ </html>
contact.html ADDED
@@ -0,0 +1,266 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>Contact Us - TravelinLite Pro</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
+ <style>
11
+ @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
12
+
13
+ * {
14
+ font-family: 'Poppins', sans-serif;
15
+ }
16
+
17
+ .gradient-text {
18
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
19
+ -webkit-background-clip: text;
20
+ -webkit-text-fill-color: transparent;
21
+ background-clip: text;
22
+ }
23
+
24
+ .contact-card {
25
+ transition: all 0.3s ease;
26
+ }
27
+
28
+ .contact-card:hover {
29
+ transform: translateY(-5px);
30
+ box-shadow: 0 20px 40px rgba(0,0,0,0.1);
31
+ }
32
+
33
+ .form-input:focus {
34
+ border-color: #667eea;
35
+ box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
36
+ }
37
+ </style>
38
+ </head>
39
+ <body class="bg-gray-50">
40
+ <!-- Navigation -->
41
+ <nav class="fixed w-full z-50 bg-white shadow-lg">
42
+ <div class="container mx-auto px-6 py-4">
43
+ <div class="flex items-center justify-between">
44
+ <div class="flex items-center space-x-2">
45
+ <a href="index.html" class="flex items-center space-x-2">
46
+ <i data-feather="map-pin" class="text-purple-600 w-8 h-8"></i>
47
+ <span class="text-2xl font-bold gradient-text">TravelinLite Pro</span>
48
+ </a>
49
+ </div>
50
+ <div class="hidden md:flex items-center space-x-8">
51
+ <a href="index.html" class="text-gray-700 hover:text-purple-600 transition-colors">Home</a>
52
+ <a href="destinations.html" class="text-gray-700 hover:text-purple-600 transition-colors">Destinations</a>
53
+ <a href="packages.html" class="text-gray-700 hover:text-purple-600 transition-colors">Packages</a>
54
+ <a href="blog.html" class="text-gray-700 hover:text-purple-600 transition-colors">Blog</a>
55
+ <a href="contact.html" class="text-purple-600 font-semibold">Contact</a>
56
+ <button class="bg-purple-600 text-white px-6 py-2 rounded-full hover:bg-purple-700 transition-colors">
57
+ Book Now
58
+ </button>
59
+ </div>
60
+ <button class="md:hidden" id="mobileMenuBtn">
61
+ <i data-feather="menu" class="w-6 h-6"></i>
62
+ </button>
63
+ </div>
64
+ </div>
65
+ </nav>
66
+
67
+ <!-- Hero Section -->
68
+ <section class="pt-32 pb-20 bg-gradient-to-r from-green-500 to-blue-600 text-white">
69
+ <div class="container mx-auto px-6 text-center">
70
+ <h1 class="text-5xl md:text-6xl font-bold mb-6">
71
+ Get in Touch
72
+ </h1>
73
+ <p class="text-xl mb-8 max-w-3xl mx-auto">
74
+ We're here to help you plan your next lightweight adventure. Reach out to us anytime!
75
+ </p>
76
+ </div>
77
+ </section>
78
+
79
+ <!-- Contact Section -->
80
+ <section class="py-20 bg-white">
81
+ <div class="container mx-auto px-6">
82
+ <div class="grid md:grid-cols-2 gap-12">
83
+ <!-- Contact Form -->
84
+ <div class="contact-card bg-gray-50 rounded-2xl p-8">
85
+ <h2 class="text-3xl font-bold mb-8 gradient-text">Send us a Message</h2>
86
+ <form class="space-y-6" id="contactForm">
87
+ <div>
88
+ <label class="block text-gray-700 mb-2">Full Name</label>
89
+ <input type="text" class="w-full form-input px-4 py-3 rounded-lg border border-gray-300 focus:outline-none" placeholder="Enter your full name" required>
90
+ </div>
91
+ <div>
92
+ <label class="block text-gray-700 mb-2">Email Address</label>
93
+ <input type="email" class="w-full form-input px-4 py-3 rounded-lg border border-gray-300 focus:outline-none" placeholder="Enter your email" required>
94
+ </div>
95
+ <div>
96
+ <label class="block text-gray-700 mb-2">Subject</label>
97
+ <input type="text" class="w-full form-input px-4 py-3 rounded-lg border border-gray-300 focus:outline-none" placeholder="What is this regarding?" required>
98
+ </div>
99
+ <div>
100
+ <label class="block text-gray-700 mb-2">Message</label>
101
+ <textarea class="w-full form-input px-4 py-3 rounded-lg border border-gray-300 focus:outline-none" placeholder="Tell us about your travel plans..." rows="5" required></textarea>
102
+ </div>
103
+ <button type="submit" class="w-full bg-purple-600 text-white py-4 rounded-lg hover:bg-purple-700 transition-colors">
104
+ Send Message
105
+ </button>
106
+ </form>
107
+ </div>
108
+
109
+ <!-- Contact Info -->
110
+ <div class="space-y-8">
111
+ <div>
112
+ <h3 class="text-2xl font-bold mb-6 gradient-text">Contact Information</h3>
113
+ <div class="space-y-6">
114
+ <div class="flex items-center space-x-4">
115
+ <div class="w-12 h-12 bg-purple-100 rounded-full flex items-center justify-center">
116
+ <i data-feather="phone" class="text-purple-600 w-6 h-6"></i>
117
+ </div>
118
+ <div>
119
+ <h4 class="font-semibold">Phone</h4>
120
+ <p class="text-gray-600">+1 (555) 123-4567</p>
121
+ </div>
122
+ <div class="flex items-center space-x-4">
123
+ <div class="w-12 h-12 bg-purple-100 rounded-full flex items-center justify-center">
124
+ <i data-feather="mail" class="text-purple-600 w-6 h-6"></i>
125
+ </div>
126
+ <div>
127
+ <h4 class="font-semibold">Email</h4>
128
+ <p class="text-gray-600">hello@travelinlitepro.com</p>
129
+ </div>
130
+ <div class="flex items-center space-x-4">
131
+ <div class="w-12 h-12 bg-purple-100 rounded-full flex items-center justify-center">
132
+ <i data-feather="clock" class="text-purple-600 w-6 h-6"></i>
133
+ </div>
134
+ <div>
135
+ <h4 class="font-semibold">Office Hours</h4>
136
+ <p class="text-gray-600">Monday - Friday: 9AM - 6PM</p>
137
+ </div>
138
+ <div class="flex items-center space-x-4">
139
+ <div class="w-12 h-12 bg-purple-100 rounded-full flex items-center justify-center">
140
+ <i data-feather="map-pin" class="text-purple-600 w-6 h-6"></i>
141
+ </div>
142
+ <div>
143
+ <h4 class="font-semibold">Address</h4>
144
+ <p class="text-gray-600">123 Adventure Street, Travel City, TC 12345</p>
145
+ </div>
146
+ </div>
147
+ </div>
148
+ </div>
149
+ </section>
150
+
151
+ <!-- FAQ Section -->
152
+ <section class="py-20 bg-gray-50">
153
+ <div class="container mx-auto px-6">
154
+ <h2 class="text-4xl font-bold text-center mb-16 gradient-text">Frequently Asked Questions</h2>
155
+ <div class="grid md:grid-cols-2 gap-8">
156
+ <div class="contact-card bg-white rounded-2xl p-8">
157
+ <h3 class="text-xl font-bold mb-4">How far in advance should I book my trip?</h3>
158
+ <p class="text-gray-600">
159
+ We recommend booking at least 3-6 months in advance for the best deals and availability.
160
+ </p>
161
+ </div>
162
+ <div class="contact-card bg-white rounded-2xl p-8">
163
+ <h3 class="text-xl font-bold mb-4">What is your cancellation policy?</h3>
164
+ <p class="text-gray-600">
165
+ You can cancel your booking up to 30 days before departure for a full refund.
166
+ </p>
167
+ </div>
168
+ <div class="contact-card bg-white rounded-2xl p-8">
169
+ <h3 class="text-xl font-bold mb-4">Do you offer travel insurance?</h3>
170
+ <p class="text-gray-600">
171
+ Yes, we offer comprehensive travel insurance options to protect your investment.
172
+ </p>
173
+ </div>
174
+ <div class="contact-card bg-white rounded-2xl p-8">
175
+ <h3 class="text-xl font-bold mb-4">Can I customize my travel package?</h3>
176
+ <p class="text-gray-600">
177
+ Absolutely! All our packages can be customized to fit your specific needs and preferences.
178
+ </p>
179
+ </div>
180
+ </div>
181
+ </section>
182
+
183
+ <!-- Footer -->
184
+ <footer class="bg-gray-900 text-white py-12">
185
+ <div class="container mx-auto px-6">
186
+ <div class="grid md:grid-cols-4 gap-8 mb-8">
187
+ <div>
188
+ <div class="flex items-center space-x-2 mb-4">
189
+ <i data-feather="map-pin" class="text-purple-400 w-6 h-6"></i>
190
+ <span class="text-xl font-bold">TravelinLite Pro</span>
191
+ </div>
192
+ <p class="text-gray-400">
193
+ Your gateway to featherweight adventures around the world.
194
+ </p>
195
+ </div>
196
+ <div>
197
+ <h4 class="font-semibold mb-4">Quick Links</h4>
198
+ <ul class="space-y-2 text-gray-400">
199
+ <li><a href="index.html" class="hover:text-white transition-colors">Home</a></li>
200
+ <li><a href="destinations.html" class="hover:text-white transition-colors">Destinations</a></li>
201
+ <li><a href="packages.html" class="hover:text-white transition-colors">Packages</a></li>
202
+ <li><a href="blog.html" class="hover:text-white transition-colors">Blog</a></li>
203
+ </ul>
204
+ </div>
205
+ <div>
206
+ <h4 class="font-semibold mb-4">Support</h4>
207
+ <ul class="space-y-2 text-gray-400">
208
+ <li><a href="contact.html" class="hover:text-white transition-colors">Contact</a></li>
209
+ <li><a href="#" class="hover:text-white transition-colors">Help Center</a></li>
210
+ <li><a href="#" class="hover:text-white transition-colors">Safety Info</a></li>
211
+ <li><a href="#" class="hover:text-white transition-colors">Terms</a></li>
212
+ </ul>
213
+ </div>
214
+ <div>
215
+ <h4 class="font-semibold mb-4">Follow Us</h4>
216
+ <div class="flex space-x-4">
217
+ <a href="#" class="text-gray-400 hover:text-white transition-colors">
218
+ <i data-feather="facebook" class="w-6 h-6"></i>
219
+ </a>
220
+ <a href="#" class="text-gray-400 hover:text-white transition-colors">
221
+ <i data-feather="twitter" class="w-6 h-6"></i>
222
+ </a>
223
+ <a href="#" class="text-gray-400 hover:text-white transition-colors">
224
+ <i data-feather="instagram" class="w-6 h-6"></i>
225
+ </a>
226
+ <a href="#" class="text-gray-400 hover:text-white transition-colors">
227
+ <i data-feather="youtube" class="w-6 h-6"></i>
228
+ </a>
229
+ </div>
230
+ </div>
231
+ </div>
232
+ <div class="border-t border-gray-800 pt-8 text-center text-gray-400">
233
+ <p>&copy; 2024 TravelinLite Pro. All rights reserved. Made with ❤️ for travelers.</p>
234
+ </div>
235
+ </div>
236
+ </footer>
237
+
238
+ <script>
239
+ feather.replace();
240
+
241
+ // Contact form submission
242
+ document.getElementById('contactForm').addEventListener('submit', function(e) {
243
+ e.preventDefault();
244
+
245
+ const formData = {
246
+ name: this.querySelector('input[type="text"]').value,
247
+ email: this.querySelector('input[type="email"]').value,
248
+ subject: this.querySelectorAll('input[type="text"]')[1].value,
249
+ message: this.querySelector('textarea').value
250
+ };
251
+
252
+ // Simulate form submission
253
+ setTimeout(() => {
254
+ alert('Thank you for your message! We will get back to you within 24 hours.');
255
+ this.reset();
256
+ }, 1000);
257
+ });
258
+
259
+ // Mobile menu toggle
260
+ const mobileMenuBtn = document.getElementById('mobileMenuBtn');
261
+ mobileMenuBtn.addEventListener('click', function() {
262
+ alert('Mobile menu would open here');
263
+ });
264
+ </script>
265
+ </body>
266
+ </html>
destinations.html ADDED
@@ -0,0 +1,371 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>Destinations - TravelinLite Pro</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/animejs/lib/anime.min.js"></script>
11
+ <style>
12
+ @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
13
+
14
+ * {
15
+ font-family: 'Poppins', sans-serif;
16
+ }
17
+
18
+ .gradient-text {
19
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
20
+ -webkit-background-clip: text;
21
+ -webkit-text-fill-color: transparent;
22
+ background-clip: text;
23
+ }
24
+
25
+ .hero-gradient {
26
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
27
+ }
28
+
29
+ .card-hover {
30
+ transition: all 0.3s ease;
31
+ }
32
+
33
+ .card-hover:hover {
34
+ transform: translateY(-10px);
35
+ box-shadow: 0 20px 40px rgba(0,0,0,0.1);
36
+ }
37
+
38
+ .slide-in {
39
+ animation: slideIn 0.5s ease-out;
40
+ }
41
+
42
+ @keyframes slideIn {
43
+ from {
44
+ opacity: 0;
45
+ transform: translateY(30px);
46
+ }
47
+ to {
48
+ opacity: 1;
49
+ transform: translateY(0);
50
+ }
51
+ }
52
+
53
+ .filter-btn {
54
+ transition: all 0.3s ease;
55
+ }
56
+
57
+ .filter-btn.active {
58
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
59
+ color: white;
60
+ }
61
+ </style>
62
+ </head>
63
+ <body class="bg-gray-50">
64
+ <!-- Navigation -->
65
+ <nav class="fixed w-full z-50 bg-white shadow-lg">
66
+ <div class="container mx-auto px-6 py-4">
67
+ <div class="flex items-center justify-between">
68
+ <div class="flex items-center space-x-2">
69
+ <a href="index.html" class="flex items-center space-x-2">
70
+ <i data-feather="map-pin" class="text-purple-600 w-8 h-8"></i>
71
+ <span class="text-2xl font-bold gradient-text">TravelinLite Pro</span>
72
+ </a>
73
+ </div>
74
+ <div class="hidden md:flex items-center space-x-8">
75
+ <a href="index.html" class="text-gray-700 hover:text-purple-600 transition-colors">Home</a>
76
+ <a href="destinations.html" class="text-purple-600 font-semibold">Destinations</a>
77
+ <a href="packages.html" class="text-gray-700 hover:text-purple-600 transition-colors">Packages</a>
78
+ <a href="blog.html" class="text-gray-700 hover:text-purple-600 transition-colors">Blog</a>
79
+ <a href="contact.html" class="text-gray-700 hover:text-purple-600 transition-colors">Contact</a>
80
+ <button class="bg-purple-600 text-white px-6 py-2 rounded-full hover:bg-purple-700 transition-colors">
81
+ Book Now
82
+ </button>
83
+ </div>
84
+ <button class="md:hidden" id="mobileMenuBtn">
85
+ <i data-feather="menu" class="w-6 h-6"></i>
86
+ </button>
87
+ </div>
88
+ </div>
89
+ </nav>
90
+
91
+ <!-- Hero Section -->
92
+ <section class="pt-32 pb-20 hero-gradient text-white">
93
+ <div class="container mx-auto px-6 text-center">
94
+ <h1 class="text-5xl md:text-6xl font-bold mb-6">
95
+ Explore Our Destinations
96
+ </h1>
97
+ <p class="text-xl mb-8 max-w-3xl mx-auto">
98
+ Discover handpicked destinations perfect for lightweight travel enthusiasts. From tropical paradises to urban adventures.
99
+ </p>
100
+ </div>
101
+ </section>
102
+
103
+ <!-- Filter Section -->
104
+ <section class="py-12 bg-white">
105
+ <div class="container mx-auto px-6">
106
+ <div class="flex flex-wrap gap-4 justify-center mb-8">
107
+ <button class="filter-btn active px-6 py-3 rounded-full bg-purple-100 text-purple-600">
108
+ All Destinations
109
+ </button>
110
+ <button class="filter-btn px-6 py-3 rounded-full bg-gray-100 text-gray-600 hover:bg-purple-100 hover:text-purple-600">
111
+ <i data-feather="sun" class="w-4 h-4 mr-2"></i>
112
+ Tropical
113
+ </button>
114
+ <button class="filter-btn px-6 py-3 rounded-full bg-gray-100 text-gray-600 hover:bg-purple-100 hover:text-purple-600">
115
+ <i data-feather="building" class="w-4 h-4 mr-2"></i>
116
+ Urban
117
+ </button>
118
+ <button class="filter-btn px-6 py-3 rounded-full bg-gray-100 text-gray-600 hover:bg-purple-100 hover:text-purple-600">
119
+ <i data-feather="mountain" class="w-4 h-4 mr-2"></i>
120
+ Adventure
121
+ </button>
122
+ <button class="filter-btn px-6 py-3 rounded-full bg-gray-100 text-gray-600 hover:bg-purple-100 hover:text-purple-600">
123
+ <i data-feather="compass" class="w-4 h-4 mr-2"></i>
124
+ Cultural
125
+ </button>
126
+ </div>
127
+ </div>
128
+ </section>
129
+
130
+ <!-- Destinations Grid -->
131
+ <section class="py-12 bg-gray-50">
132
+ <div class="container mx-auto px-6">
133
+ <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8" id="destinationsGrid">
134
+ <!-- Destinations will be loaded dynamically -->
135
+ </div>
136
+ </div>
137
+ </section>
138
+
139
+ <!-- Newsletter -->
140
+ <section class="py-20 bg-white">
141
+ <div class="container mx-auto px-6 text-center">
142
+ <h2 class="text-3xl font-bold mb-6 gradient-text">Stay Updated</h2>
143
+ <p class="text-gray-600 mb-8 max-w-2xl mx-auto">
144
+ Get the latest travel tips, destination guides, and exclusive offers delivered to your inbox.
145
+ </p>
146
+ <div class="flex flex-col sm:flex-row gap-4 justify-center max-w-md mx-auto">
147
+ <input type="email" placeholder="Enter your email" class="flex-1 px-6 py-3 rounded-full border border-gray-300 focus:outline-none focus:border-purple-600" id="newsletterEmail">
148
+ <button class="bg-purple-600 text-white px-8 py-3 rounded-full hover:bg-purple-700 transition-all">
149
+ Subscribe
150
+ </button>
151
+ </div>
152
+ </div>
153
+ </section>
154
+
155
+ <!-- Footer -->
156
+ <footer class="bg-gray-900 text-white py-12">
157
+ <div class="container mx-auto px-6">
158
+ <div class="grid md:grid-cols-4 gap-8 mb-8">
159
+ <div>
160
+ <div class="flex items-center space-x-2 mb-4">
161
+ <i data-feather="map-pin" class="text-purple-400 w-6 h-6"></i>
162
+ <span class="text-xl font-bold">TravelinLite Pro</span>
163
+ </div>
164
+ <p class="text-gray-400">
165
+ Your gateway to featherweight adventures around the world.
166
+ </p>
167
+ </div>
168
+ <div>
169
+ <h4 class="font-semibold mb-4">Quick Links</h4>
170
+ <ul class="space-y-2 text-gray-400">
171
+ <li><a href="index.html" class="hover:text-white transition-colors">Home</a></li>
172
+ <li><a href="destinations.html" class="hover:text-white transition-colors">Destinations</a></li>
173
+ <li><a href="packages.html" class="hover:text-white transition-colors">Packages</a></li>
174
+ <li><a href="blog.html" class="hover:text-white transition-colors">Blog</a></li>
175
+ </ul>
176
+ </div>
177
+ <div>
178
+ <h4 class="font-semibold mb-4">Support</h4>
179
+ <ul class="space-y-2 text-gray-400">
180
+ <li><a href="contact.html" class="hover:text-white transition-colors">Contact</a></li>
181
+ <li><a href="#" class="hover:text-white transition-colors">Help Center</a></li>
182
+ <li><a href="#" class="hover:text-white transition-colors">Safety Info</a></li>
183
+ <li><a href="#" class="hover:text-white transition-colors">Terms</a></li>
184
+ </ul>
185
+ </div>
186
+ <div>
187
+ <h4 class="font-semibold mb-4">Follow Us</h4>
188
+ <div class="flex space-x-4">
189
+ <a href="#" class="text-gray-400 hover:text-white transition-colors">
190
+ <i data-feather="facebook" class="w-6 h-6"></i>
191
+ </a>
192
+ <a href="#" class="text-gray-400 hover:text-white transition-colors">
193
+ <i data-feather="twitter" class="w-6 h-6"></i>
194
+ </a>
195
+ <a href="#" class="text-gray-400 hover:text-white transition-colors">
196
+ <i data-feather="instagram" class="w-6 h-6"></i>
197
+ </a>
198
+ <a href="#" class="text-gray-400 hover:text-white transition-colors">
199
+ <i data-feather="youtube" class="w-6 h-6"></i>
200
+ </a>
201
+ </div>
202
+ </div>
203
+ </div>
204
+ <div class="border-t border-gray-800 pt-8 text-center text-gray-400">
205
+ <p>&copy; 2024 TravelinLite Pro. All rights reserved. Made with ❤️ for travelers.</p>
206
+ </div>
207
+ </div>
208
+ </footer>
209
+
210
+ <script>
211
+ feather.replace();
212
+
213
+ // Destination data
214
+ const destinations = [
215
+ {
216
+ id: 1,
217
+ name: "Bali, Indonesia",
218
+ type: "tropical",
219
+ description: "Island paradise with stunning beaches and rich cultural heritage",
220
+ price: "$899",
221
+ image: "https://static.photos/nature/640x360/201",
222
+ duration: "7 days",
223
+ rating: 4.9
224
+ },
225
+ {
226
+ id: 2,
227
+ name: "Tokyo, Japan",
228
+ type: "urban",
229
+ description: "Futuristic cityscape blending tradition with cutting-edge technology",
230
+ price: "$1,299",
231
+ image: "https://static.photos/cityscape/640x360/202",
232
+ duration: "5 days",
233
+ rating: 4.8
234
+ },
235
+ {
236
+ id: 3,
237
+ name: "Santorini, Greece",
238
+ type: "cultural",
239
+ description: "Iconic white buildings and breathtaking sunset views over the Aegean Sea",
240
+ price: "$1,099",
241
+ image: "https://static.photos/travel/640x360/207",
242
+ duration: "6 days",
243
+ rating: 4.9
244
+ },
245
+ {
246
+ id: 4,
247
+ name: "Swiss Alps",
248
+ type: "adventure",
249
+ description: "Majestic mountain ranges perfect for hiking and winter sports",
250
+ price: "$1,499",
251
+ image: "https://static.photos/nature/640x360/208",
252
+ duration: "8 days",
253
+ rating: 4.7
254
+ },
255
+ {
256
+ id: 5,
257
+ name: "New Zealand",
258
+ type: "adventure",
259
+ description: "Dramatic landscapes from fjords to volcanic plateaus",
260
+ price: "$1,799",
261
+ image: "https://static.photos/nature/640x360/209",
262
+ duration: "10 days",
263
+ rating: 4.8
264
+ },
265
+ {
266
+ id: 6,
267
+ name: "Marrakech, Morocco",
268
+ type: "cultural",
269
+ description: "Vibrant markets and historic architecture in North Africa",
270
+ price: "$799",
271
+ image: "https://static.photos/travel/640x360/210",
272
+ duration: "5 days",
273
+ rating: 4.6
274
+ }
275
+ ];
276
+
277
+ // Render destinations
278
+ function renderDestinations(filter = 'all') {
279
+ const grid = document.getElementById('destinationsGrid');
280
+ grid.innerHTML = '';
281
+
282
+ const filteredDestinations = filter === 'all'
283
+ ? destinations
284
+ : destinations.filter(dest => dest.type === filter);
285
+
286
+ filteredDestinations.forEach(dest => {
287
+ const card = document.createElement('div');
288
+ card.className = 'bg-white rounded-2xl overflow-hidden shadow-lg card-hover';
289
+ card.innerHTML = `
290
+ <img src="${dest.image}" alt="${dest.name}" class="w-full h-48 object-cover">
291
+ <div class="p-6">
292
+ <div class="flex justify-between items-start mb-3">
293
+ <h3 class="text-xl font-bold">${dest.name}</h3>
294
+ <div class="flex items-center space-x-1">
295
+ <i data-feather="star" class="w-4 h-4 text-yellow-400"></i>
296
+ <span class="text-sm font-semibold">${dest.rating}</span>
297
+ </div>
298
+ <p class="text-gray-600 text-sm mb-4">${dest.description}</p>
299
+ <div class="flex justify-between items-center">
300
+ <span class="text-purple-600 font-bold">${dest.price}</span>
301
+ <span class="text-gray-500 text-sm">${dest.duration}</span>
302
+ </div>
303
+ <button class="w-full mt-4 bg-purple-600 text-white py-2 rounded-full hover:bg-purple-700 transition-colors">
304
+ View Details
305
+ </button>
306
+ </div>
307
+ `;
308
+ grid.appendChild(card);
309
+ });
310
+
311
+ feather.replace();
312
+ }
313
+
314
+ // Filter functionality
315
+ document.querySelectorAll('.filter-btn').forEach(btn => {
316
+ btn.addEventListener('click', function() {
317
+ document.querySelectorAll('.filter-btn').forEach(b => b.classList.remove('active'));
318
+ this.classList.add('active');
319
+
320
+ const filterType = this.textContent.trim().toLowerCase();
321
+ let filter = 'all';
322
+
323
+ if (filterType.includes('tropical')) filter = 'tropical';
324
+ else if (filterType.includes('urban')) filter = 'urban';
325
+ else if (filterType.includes('adventure')) filter = 'adventure';
326
+ else if (filterType.includes('cultural')) filter = 'cultural';
327
+
328
+ renderDestinations(filter);
329
+ });
330
+ }
331
+
332
+ // Initial render
333
+ renderDestinations();
334
+
335
+ // Newsletter subscription
336
+ document.querySelector('#newsletterEmail').addEventListener('keypress', function(e) {
337
+ if (e.key === 'Enter') {
338
+ subscribeNewsletter();
339
+ }
340
+ });
341
+
342
+ document.querySelector('#newsletterEmail').nextElementSibling.addEventListener('click', subscribeNewsletter);
343
+
344
+ function subscribeNewsletter() {
345
+ const email = document.getElementById('newsletterEmail').value;
346
+ if (email && email.includes('@')) {
347
+ alert('Thank you for subscribing to our newsletter!');
348
+ document.getElementById('newsletterEmail').value = '';
349
+ } else {
350
+ alert('Please enter a valid email address.');
351
+ }
352
+ }
353
+
354
+ // Animate cards on scroll
355
+ const animateOnScroll = () => {
356
+ const elements = document.querySelectorAll('.card-hover');
357
+ elements.forEach(element => {
358
+ const elementTop = element.getBoundingClientRect().top;
359
+ const elementBottom = element.getBoundingClientRect().bottom;
360
+
361
+ if (elementTop < window.innerHeight && elementBottom > 0) {
362
+ element.classList.add('slide-in');
363
+ }
364
+ });
365
+ };
366
+
367
+ window.addEventListener('scroll', animateOnScroll);
368
+ animateOnScroll();
369
+ </script>
370
+ </body>
371
+ </html>
index.html CHANGED
@@ -1,19 +1,483 @@
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>TravelinLite - Your Gateway to Lightweight Adventures</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://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
10
+ <script src="https://unpkg.com/feather-icons"></script>
11
+ <script src="https://cdn.jsdelivr.net/npm/animejs/lib/anime.min.js"></script>
12
+ <style>
13
+ @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
14
+
15
+ * {
16
+ font-family: 'Poppins', sans-serif;
17
+ }
18
+
19
+ .gradient-text {
20
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
21
+ -webkit-background-clip: text;
22
+ -webkit-text-fill-color: transparent;
23
+ background-clip: text;
24
+ }
25
+
26
+ .hero-gradient {
27
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
28
+ }
29
+
30
+ .card-hover {
31
+ transition: all 0.3s ease;
32
+ }
33
+
34
+ .card-hover:hover {
35
+ transform: translateY(-10px);
36
+ box-shadow: 0 20px 40px rgba(0,0,0,0.1);
37
+ }
38
+
39
+ .floating {
40
+ animation: float 6s ease-in-out infinite;
41
+ }
42
+
43
+ @keyframes float {
44
+ 0% { transform: translateY(0px); }
45
+ 50% { transform: translateY(-20px); }
46
+ 100% { transform: translateY(0px); }
47
+ }
48
+
49
+ .slide-in {
50
+ animation: slideIn 0.5s ease-out;
51
+ }
52
+
53
+ @keyframes slideIn {
54
+ from {
55
+ opacity: 0;
56
+ transform: translateX(-30px);
57
+ }
58
+ to {
59
+ opacity: 1;
60
+ transform: translateX(0);
61
+ }
62
+ }
63
+
64
+ .parallax-bg {
65
+ background-attachment: fixed;
66
+ background-position: center;
67
+ background-repeat: no-repeat;
68
+ background-size: cover;
69
+ }
70
+
71
+ .glass-effect {
72
+ background: rgba(255, 255, 255, 0.1);
73
+ backdrop-filter: blur(10px);
74
+ border: 1px solid rgba(255, 255, 255, 0.2);
75
+ }
76
+ </style>
77
+ </head>
78
+ <body class="bg-gray-50 overflow-x-hidden">
79
+ <!-- Navigation -->
80
+ <nav class="fixed w-full z-50 bg-white shadow-lg transition-all duration-300" id="navbar">
81
+ <div class="container mx-auto px-6 py-4">
82
+ <div class="flex items-center justify-between">
83
+ <div class="flex items-center space-x-2">
84
+ <i data-feather="map-pin" class="text-purple-600 w-8 h-8"></i>
85
+ <span class="text-2xl font-bold gradient-text">TravelinLite</span>
86
+ </div>
87
+ <div class="hidden md:flex items-center space-x-8">
88
+ <a href="#home" class="text-gray-700 hover:text-purple-600 transition-colors">Home</a>
89
+ <a href="destinations.html" class="text-gray-700 hover:text-purple-600 transition-colors">Destinations</a>
90
+ <a href="packages.html" class="text-gray-700 hover:text-purple-600 transition-colors">Packages</a>
91
+ <a href="blog.html" class="text-gray-700 hover:text-purple-600 transition-colors">Blog</a>
92
+ <a href="contact.html" class="text-gray-700 hover:text-purple-600 transition-colors">Contact</a>
93
+ <button class="bg-purple-600 text-white px-6 py-2 rounded-full hover:bg-purple-700 transition-colors">
94
+ Book Now
95
+ </button>
96
+ </div>
97
+ <button class="md:hidden" id="mobileMenuBtn">
98
+ <i data-feather="menu" class="w-6 h-6"></i>
99
+ </button>
100
+ </div>
101
+ </div>
102
+ <!-- Mobile Menu -->
103
+ <div class="hidden md:hidden bg-white border-t" id="mobileMenu">
104
+ <div class="px-6 py-4 space-y-3">
105
+ <a href="#home" class="block text-gray-700 hover:text-purple-600">Home</a>
106
+ <a href="destinations.html" class="block text-gray-700 hover:text-purple-600">Home</a>
107
+ <a href="destinations.html" class="block text-gray-700 hover:text-purple-600">Destinations</a>
108
+ <a href="packages.html" class="block text-gray-700 hover:text-purple-600">Destinations</a>
109
+ <a href="packages.html" class="block text-gray-700 hover:text-purple-600">Packages</a>
110
+ <a href="blog.html" class="block text-gray-700 hover:text-purple-600">Packages</a>
111
+ <a href="blog.html" class="block text-gray-700 hover:text-purple-600">Blog</a>
112
+ <a href="contact.html" class="block text-gray-700 hover:text-purple-600">Contact</a>
113
+ <button class="w-full bg-purple-600 text-white px-6 py-2 rounded-full hover:bg-purple-700">
114
+ Book Now
115
+ </button>
116
+ </div>
117
+ </div>
118
+ </nav>
119
+
120
+ <!-- Hero Section -->
121
+ <section id="home" class="min-h-screen flex items-center justify-center relative parallax-bg" style="background-image: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)), url('https://static.photos/travel/1200x630/101');">
122
+ <div class="container mx-auto px-6 text-center text-white">
123
+ <h1 class="text-5xl md:text-7xl font-bold mb-6 floating">
124
+ Travel Light, Live Bright
125
+ </h1>
126
+ <p class="text-xl md:text-2xl mb-8 max-w-3xl mx-auto">
127
+ Discover the world with minimal baggage and maximum experiences. Your journey to lightweight adventures starts here.
128
+ </p>
129
+ <div class="flex flex-col sm:flex-row gap-4 justify-center">
130
+ <a href="destinations.html" class="bg-white text-purple-600 px-8 py-4 rounded-full font-semibold hover:bg-gray-100 transition-all transform hover:scale-105">
131
+ Explore Destinations
132
+ </a>
133
+ <a href="packages.html" class="glass-effect text-white px-8 py-4 rounded-full font-semibold hover:bg-white hover:bg-opacity-20 transition-all text-center">
134
+ View Packages
135
+ </a>
136
+ </div>
137
+ </div>
138
+ <div class="absolute bottom-10 left-1/2 transform -translate-x-1/2 animate-bounce">
139
+ <i data-feather="chevron-down" class="w-8 h-8 text-white"></i>
140
+ </div>
141
+ </section>
142
+
143
+ <!-- Features Section -->
144
+ <section id="features" class="py-20 bg-white">
145
+ <div class="container mx-auto px-6">
146
+ <div class="text-center mb-16">
147
+ <h2 class="text-4xl font-bold mb-4 gradient-text">Why Choose TravelinLite?</h2>
148
+ <p class="text-gray-600 text-lg max-w-2xl mx-auto">
149
+ We make traveling easier, lighter, and more enjoyable with our innovative approach to adventure.
150
+ </p>
151
+ </div>
152
+ <div class="grid md:grid-cols-3 gap-8">
153
+ <div class="text-center card-hover bg-gray-50 p-8 rounded-2xl">
154
+ <div class="w-20 h-20 mx-auto mb-6 bg-purple-100 rounded-full flex items-center justify-center">
155
+ <i data-feather="zap" class="text-purple-600 w-10 h-10"></i>
156
+ </div>
157
+ <h3 class="text-2xl font-semibold mb-4">Lightning Fast</h3>
158
+ <p class="text-gray-600">
159
+ Quick booking process and instant confirmations for your peace of mind.
160
+ </p>
161
+ </div>
162
+ <div class="text-center card-hover bg-gray-50 p-8 rounded-2xl">
163
+ <div class="w-20 h-20 mx-auto mb-6 bg-purple-100 rounded-full flex items-center justify-center">
164
+ <i data-feather="shield" class="text-purple-600 w-10 h-10"></i>
165
+ </div>
166
+ <h3 class="text-2xl font-semibold mb-4">Safe & Secure</h3>
167
+ <p class="text-gray-600">
168
+ Your safety is our priority with 24/7 support and secure transactions.
169
+ </p>
170
+ </div>
171
+ <div class="text-center card-hover bg-gray-50 p-8 rounded-2xl">
172
+ <div class="w-20 h-20 mx-auto mb-6 bg-purple-100 rounded-full flex items-center justify-center">
173
+ <i data-feather="globe" class="text-purple-600 w-10 h-10"></i>
174
+ </div>
175
+ <h3 class="text-2xl font-semibold mb-4">Global Coverage</h3>
176
+ <p class="text-gray-600">
177
+ Access to destinations worldwide with local insights and recommendations.
178
+ </p>
179
+ </div>
180
+ </div>
181
+ </div>
182
+ </section>
183
+
184
+ <!-- Destinations Section -->
185
+ <section id="destinations" class="py-20 bg-gray-50">
186
+ <div class="container mx-auto px-6">
187
+ <div class="text-center mb-16">
188
+ <h2 class="text-4xl font-bold mb-4 gradient-text">Popular Destinations</h2>
189
+ <p class="text-gray-600 text-lg max-w-2xl mx-auto">
190
+ Explore our handpicked destinations perfect for lightweight travel enthusiasts.
191
+ </p>
192
+ </div>
193
+ <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
194
+ <div class="relative overflow-hidden rounded-2xl card-hover cursor-pointer">
195
+ <img src="https://static.photos/nature/640x360/201" alt="Bali" class="w-full h-64 object-cover">
196
+ <div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent flex items-end">
197
+ <div class="p-6 text-white">
198
+ <h3 class="text-2xl font-bold mb-2">Bali, Indonesia</h3>
199
+ <p class="text-sm">Tropical paradise with rich culture</p>
200
+ </div>
201
+ </div>
202
+ </div>
203
+ <div class="relative overflow-hidden rounded-2xl card-hover cursor-pointer">
204
+ <img src="https://static.photos/cityscape/640x360/202" alt="Tokyo" class="w-full h-64 object-cover">
205
+ <div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent flex items-end">
206
+ <div class="p-6 text-white">
207
+ <h3 class="text-2xl font-bold mb-2">Tokyo, Japan</h3>
208
+ <p class="text-sm">Modern metropolis meets tradition</p>
209
+ </div>
210
+ </div>
211
+ </div>
212
+ <div class="relative overflow-hidden rounded-2xl card-hover cursor-pointer">
213
+ <img src="https://static.photos/travel/640x360/203" alt="Paris" class="w-full h-64 object-cover">
214
+ <div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent flex items-end">
215
+ <div class="p-6 text-white">
216
+ <h3 class="text-2xl font-bold mb-2">Paris, France</h3>
217
+ <p class="text-sm">City of lights and romance</p>
218
+ </div>
219
+ </div>
220
+ </div>
221
+ <div class="relative overflow-hidden rounded-2xl card-hover cursor-pointer">
222
+ <img src="https://static.photos/nature/640x360/204" alt="Iceland" class="w-full h-64 object-cover">
223
+ <div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent flex items-end">
224
+ <div class="p-6 text-white">
225
+ <h3 class="text-2xl font-bold mb-2">Iceland</h3>
226
+ <p class="text-sm">Land of fire and ice</p>
227
+ </div>
228
+ </div>
229
+ </div>
230
+ <div class="relative overflow-hidden rounded-2xl card-hover cursor-pointer">
231
+ <img src="https://static.photos/technology/640x360/205" alt="Dubai" class="w-full h-64 object-cover">
232
+ <div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent flex items-end">
233
+ <div class="p-6 text-white">
234
+ <h3 class="text-2xl font-bold mb-2">Dubai, UAE</h3>
235
+ <p class="text-sm">Futuristic oasis in the desert</p>
236
+ </div>
237
+ </div>
238
+ </div>
239
+ <div class="relative overflow-hidden rounded-2xl card-hover cursor-pointer">
240
+ <img src="https://static.photos/food/640x360/206" alt="Italy" class="w-full h-64 object-cover">
241
+ <div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent flex items-end">
242
+ <div class="p-6 text-white">
243
+ <h3 class="text-2xl font-bold mb-2">Rome, Italy</h3>
244
+ <p class="text-sm">Ancient history comes alive</p>
245
+ </div>
246
+ </div>
247
+ </div>
248
+ </div>
249
+ </div>
250
+ </section>
251
+
252
+ <!-- Stats Section -->
253
+ <section class="py-20 hero-gradient text-white">
254
+ <div class="container mx-auto px-6">
255
+ <div class="grid md:grid-cols-4 gap-8 text-center">
256
+ <div>
257
+ <h3 class="text-4xl font-bold mb-2 counter" data-target="150">0</h3>
258
+ <p class="text-lg">Destinations</p>
259
+ </div>
260
+ <div>
261
+ <h3 class="text-4xl font-bold mb-2 counter" data-target="50000">0</h3>
262
+ <p class="text-lg">Happy Travelers</p>
263
+ </div>
264
+ <div>
265
+ <h3 class="text-4xl font-bold mb-2 counter" data-target="98">0</h3>
266
+ <p class="text-lg">Satisfaction %</p>
267
+ </div>
268
+ <div>
269
+ <h3 class="text-4xl font-bold mb-2 counter" data-target="24">0</h3>
270
+ <p class="text-lg">Support Hours</p>
271
+ </div>
272
+ </div>
273
+ </div>
274
+ </section>
275
+
276
+ <!-- About Section -->
277
+ <section id="about" class="py-20 bg-white">
278
+ <div class="container mx-auto px-6">
279
+ <div class="grid md:grid-cols-2 gap-12 items-center">
280
+ <div>
281
+ <h2 class="text-4xl font-bold mb-6 gradient-text">About TravelinLite</h2>
282
+ <p class="text-gray-600 mb-6">
283
+ Founded in 2020, TravelinLite revolutionized the way people explore the world. We believe that the best adventures come with the lightest baggage.
284
+ </p>
285
+ <p class="text-gray-600 mb-8">
286
+ Our platform connects travelers with curated experiences, ensuring every journey is memorable, affordable, and hassle-free. From backpacking through Southeast Asia to weekend getaways in Europe, we've got you covered.
287
+ </p>
288
+ <div class="flex flex-wrap gap-4">
289
+ <div class="flex items-center space-x-2">
290
+ <i data-feather="check-circle" class="text-green-500 w-5 h-5"></i>
291
+ <span class="text-gray-700">Expert Guides</span>
292
+ </div>
293
+ <div class="flex items-center space-x-2">
294
+ <i data-feather="check-circle" class="text-green-500 w-5 h-5"></i>
295
+ <span class="text-gray-700">Best Prices</span>
296
+ </div>
297
+ <div class="flex items-center space-x-2">
298
+ <i data-feather="check-circle" class="text-green-500 w-5 h-5"></i>
299
+ <span class="text-gray-700">24/7 Support</span>
300
+ </div>
301
+ </div>
302
+ </div>
303
+ <div class="relative">
304
+ <img src="https://static.photos/people/640x360/301" alt="Team" class="rounded-2xl shadow-2xl">
305
+ <div class="absolute -bottom-6 -right-6 bg-purple-600 text-white p-6 rounded-2xl">
306
+ <h3 class="text-2xl font-bold">4+ Years</h3>
307
+ <p>Of Excellence</p>
308
+ </div>
309
+ </div>
310
+ </div>
311
+ </div>
312
+ </section>
313
+
314
+ <!-- CTA Section -->
315
+ <section class="py-20 bg-gray-50">
316
+ <div class="container mx-auto px-6 text-center">
317
+ <h2 class="text-4xl font-bold mb-6 gradient-text">Ready to Start Your Journey?</h2>
318
+ <p class="text-gray-600 text-lg mb-8 max-w-2xl mx-auto">
319
+ Join thousands of travelers who have discovered the joy of lightweight adventures with TravelinLite.
320
+ </p>
321
+ <div class="flex flex-col sm:flex-row gap-4 justify-center max-w-md mx-auto">
322
+ <input type="email" placeholder="Enter your email" class="flex-1 px-6 py-3 rounded-full border border-gray-300 focus:outline-none focus:border-purple-600">
323
+ <button class="bg-purple-600 text-white px-8 py-3 rounded-full hover:bg-purple-700 transition-all transform hover:scale-105">
324
+ Sign Up
325
+ </button>
326
+ </div>
327
+ </div>
328
+ </section>
329
+ <!-- Footer -->
330
+ <footer class="bg-gray-900 text-white py-12">
331
+ <div class="container mx-auto px-6">
332
+ <div class="grid md:grid-cols-4 gap-8 mb-8">
333
+ <div>
334
+ <div class="flex items-center space-x-2 mb-4">
335
+ <i data-feather="map-pin" class="text-purple-400 w-6 h-6"></i>
336
+ <span class="text-xl font-bold">TravelinLite Pro</span>
337
+ </div>
338
+ <p class="text-gray-400">
339
+ Your gateway to featherweight adventures around the world.
340
+ </p>
341
+ </div>
342
+ <div>
343
+ <h4 class="font-semibold mb-4">Quick Links</h4>
344
+ <ul class="space-y-2 text-gray-400">
345
+ <li><a href="index.html" class="hover:text-white transition-colors">Home</a></li>
346
+ <li><a href="destinations.html" class="hover:text-white transition-colors">Destinations</a></li>
347
+ <li><a href="packages.html" class="hover:text-white transition-colors">Packages</a></li>
348
+ <li><a href="blog.html" class="hover:text-white transition-colors">Blog</a></li>
349
+ </ul>
350
+ </div>
351
+ <div>
352
+ <h4 class="font-semibold mb-4">Support</h4>
353
+ <ul class="space-y-2 text-gray-400">
354
+ <li><a href="contact.html" class="hover:text-white transition-colors">Contact</a></li>
355
+ <li><a href="#" class="hover:text-white transition-colors">Help Center</a></li>
356
+ <li><a href="#" class="hover:text-white transition-colors">Safety Info</a></li>
357
+ <li><a href="#" class="hover:text-white transition-colors">Terms</a></li>
358
+ </ul>
359
+ </div>
360
+ <div>
361
+ <h4 class="font-semibold mb-4">Follow Us</h4>
362
+ <div class="flex space-x-4">
363
+ <a href="#" class="text-gray-400 hover:text-white transition-colors">
364
+ <i data-feather="facebook" class="w-6 h-6"></i>
365
+ </a>
366
+ <a href="#" class="text-gray-400 hover:text-white transition-colors">
367
+ <i data-feather="twitter" class="w-6 h-6"></i>
368
+ </a>
369
+ <a href="#" class="text-gray-400 hover:text-white transition-colors">
370
+ <i data-feather="instagram" class="w-6 h-6"></i>
371
+ </a>
372
+ <a href="#" class="text-gray-400 hover:text-white transition-colors">
373
+ <i data-feather="youtube" class="w-6 h-6"></i>
374
+ </a>
375
+ </div>
376
+ </div>
377
+ </div>
378
+ <div class="border-t border-gray-800 pt-8 text-center text-gray-400">
379
+ <p>&copy; 2024 TravelinLite Pro. All rights reserved. Made with ❤️ for travelers.</p>
380
+ </div>
381
+ </div>
382
+ </footer>
383
+ <script>
384
+ // Initialize Feather Icons
385
+ feather.replace();
386
+
387
+ // Mobile Menu Toggle
388
+ const mobileMenuBtn = document.getElementById('mobileMenuBtn');
389
+ const mobileMenu = document.getElementById('mobileMenu');
390
+
391
+ mobileMenuBtn.addEventListener('click', () => {
392
+ mobileMenu.classList.toggle('hidden');
393
+ });
394
+
395
+ // Navbar Scroll Effect
396
+ window.addEventListener('scroll', () => {
397
+ const navbar = document.getElementById('navbar');
398
+ if (window.scrollY > 50) {
399
+ navbar.classList.add('shadow-xl');
400
+ } else {
401
+ navbar.classList.remove('shadow-xl');
402
+ }
403
+ });
404
+
405
+ // Smooth Scrolling for Navigation Links
406
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
407
+ anchor.addEventListener('click', function (e) {
408
+ e.preventDefault();
409
+ const target = document.querySelector(this.getAttribute('href'));
410
+ if (target) {
411
+ target.scrollIntoView({
412
+ behavior: 'smooth',
413
+ block: 'start'
414
+ });
415
+ // Close mobile menu if open
416
+ mobileMenu.classList.add('hidden');
417
+ }
418
+ });
419
+ });
420
+
421
+ // Counter Animation
422
+ const counters = document.querySelectorAll('.counter');
423
+ const speed = 200;
424
+
425
+ const countUp = () => {
426
+ counters.forEach(counter => {
427
+ const target = +counter.getAttribute('data-target');
428
+ const count = +counter.innerText;
429
+ const increment = target / speed;
430
+
431
+ if (count < target) {
432
+ counter.innerText = Math.ceil(count + increment);
433
+ setTimeout(countUp, 10);
434
+ } else {
435
+ counter.innerText = target.toLocaleString();
436
+ }
437
+ });
438
+ };
439
+
440
+ // Trigger counter animation when in viewport
441
+ const observerOptions = {
442
+ threshold: 0.5
443
+ };
444
+
445
+ const observer = new IntersectionObserver((entries) => {
446
+ entries.forEach(entry => {
447
+ if (entry.isIntersecting) {
448
+ countUp();
449
+ observer.unobserve(entry.target);
450
+ }
451
+ });
452
+ }, observerOptions);
453
+
454
+ const statsSection = document.querySelector('.counter').parentElement.parentElement;
455
+ observer.observe(statsSection);
456
+
457
+ // Fade in animations on scroll
458
+ const animateOnScroll = () => {
459
+ const elements = document.querySelectorAll('.card-hover');
460
+ elements.forEach(element => {
461
+ const elementTop = element.getBoundingClientRect().top;
462
+ const elementBottom = element.getBoundingClientRect().bottom;
463
+
464
+ if (elementTop < window.innerHeight && elementBottom > 0) {
465
+ element.classList.add('slide-in');
466
+ }
467
+ });
468
+ };
469
+
470
+ window.addEventListener('scroll', animateOnScroll);
471
+ animateOnScroll(); // Initial check
472
+
473
+ // Add parallax effect to hero section
474
+ window.addEventListener('scroll', () => {
475
+ const scrolled = window.pageYOffset;
476
+ const parallax = document.querySelector('.parallax-bg');
477
+ if (parallax) {
478
+ parallax.style.transform = `translateY(${scrolled * 0.5}px)`;
479
+ }
480
+ });
481
+ </script>
482
+ </body>
483
+ </html>
packages.html ADDED
@@ -0,0 +1,325 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>Travel Packages - TravelinLite Pro</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
+ <style>
11
+ @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
12
+
13
+ * {
14
+ font-family: 'Poppins', sans-serif;
15
+ }
16
+
17
+ .gradient-text {
18
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
19
+ -webkit-background-clip: text;
20
+ -webkit-text-fill-color: transparent;
21
+ background-clip: text;
22
+ }
23
+
24
+ .package-card {
25
+ transition: all 0.3s ease;
26
+ }
27
+
28
+ .package-card:hover {
29
+ transform: translateY(-5px);
30
+ box-shadow: 0 20px 40px rgba(0,0,0,0.1);
31
+ }
32
+
33
+ .popular {
34
+ border: 2px solid #667eea;
35
+ position: relative;
36
+ }
37
+
38
+ .popular::before {
39
+ content: 'Most Popular';
40
+ position: absolute;
41
+ top: -12px;
42
+ left: 50%;
43
+ transform: translateX(-50%);
44
+ background: #667eea;
45
+ color: white;
46
+ padding: 4px 12px;
47
+ border-radius: 20px;
48
+ font-size: 12px;
49
+ font-weight: 600;
50
+ }
51
+ </style>
52
+ </head>
53
+ <body class="bg-gray-50">
54
+ <!-- Navigation -->
55
+ <nav class="fixed w-full z-50 bg-white shadow-lg">
56
+ <div class="container mx-auto px-6 py-4">
57
+ <div class="flex items-center justify-between">
58
+ <div class="flex items-center space-x-2">
59
+ <a href="index.html" class="flex items-center space-x-2">
60
+ <i data-feather="map-pin" class="text-purple-600 w-8 h-8"></i>
61
+ <span class="text-2xl font-bold gradient-text">TravelinLite Pro</span>
62
+ </a>
63
+ </div>
64
+ <div class="hidden md:flex items-center space-x-8">
65
+ <a href="index.html" class="text-gray-700 hover:text-purple-600 transition-colors">Home</a>
66
+ <a href="destinations.html" class="text-gray-700 hover:text-purple-600 transition-colors">Destinations</a>
67
+ <a href="packages.html" class="text-purple-600 font-semibold">Packages</a>
68
+ <a href="blog.html" class="text-gray-700 hover:text-purple-600 transition-colors">Blog</a>
69
+ <a href="contact.html" class="text-gray-700 hover:text-purple-600 transition-colors">Contact</a>
70
+ <button class="bg-purple-600 text-white px-6 py-2 rounded-full hover:bg-purple-700 transition-colors">
71
+ Book Now
72
+ </button>
73
+ </div>
74
+ <button class="md:hidden" id="mobileMenuBtn">
75
+ <i data-feather="menu" class="w-6 h-6"></i>
76
+ </button>
77
+ </div>
78
+ </div>
79
+ </nav>
80
+
81
+ <!-- Hero Section -->
82
+ <section class="pt-32 pb-20 bg-gradient-to-r from-purple-600 to-blue-600 text-white">
83
+ <div class="container mx-auto px-6 text-center">
84
+ <h1 class="text-5xl md:text-6xl font-bold mb-6">
85
+ Travel Packages
86
+ </h1>
87
+ <p class="text-xl mb-8 max-w-3xl mx-auto">
88
+ Choose from our curated lightweight travel packages designed for maximum experience with minimal hassle.
89
+ </p>
90
+ </div>
91
+ </section>
92
+
93
+ <!-- Packages Grid -->
94
+ <section class="py-20 bg-white">
95
+ <div class="container mx-auto px-6">
96
+ <div class="grid md:grid-cols-3 gap-8">
97
+ <!-- Budget Package -->
98
+ <div class="package-card bg-white rounded-2xl shadow-lg border border-gray-200 p-8 text-center">
99
+ <h3 class="text-2xl font-bold mb-4">Budget Explorer</h3>
100
+ <div class="text-4xl font-bold mb-6 text-purple-600">$699</h3>
101
+ <p class="text-gray-600 mb-6">Perfect for solo travelers on a budget</p>
102
+ <ul class="space-y-3 mb-8">
103
+ <li class="flex items-center space-x-2">
104
+ <i data-feather="check" class="w-5 h-5 text-green-500"></i>
105
+ <span>Basic Accommodation</span>
106
+ </li>
107
+ <li class="flex items-center space-x-2">
108
+ <i data-feather="check" class="w-5 h-5 text-green-500"></i>
109
+ <span>Local Transportation</span>
110
+ </li>
111
+ <li class="flex items-center space-x-2">
112
+ <i data-feather="check" class="w-5 h-5 text-green-500"></i>
113
+ <span>City Guide</span>
114
+ </li>
115
+ <li class="flex items-center space-x-2">
116
+ <i data-feather="check" class="w-5 h-5 text-green-500"></i>
117
+ <span>24/7 Support</span>
118
+ </li>
119
+ </ul>
120
+ <button class="w-full bg-gray-200 text-gray-700 py-3 rounded-full hover:bg-gray-300 transition-colors">
121
+ Select Package
122
+ </button>
123
+ </div>
124
+
125
+ <!-- Popular Package -->
126
+ <div class="package-card popular bg-white rounded-2xl shadow-xl p-8 text-center">
127
+ <h3 class="text-2xl font-bold mb-4">Premium Adventurer</h3>
128
+ <div class="text-4xl font-bold mb-6 text-purple-600">$1,299</h3>
129
+ <p class="text-gray-600 mb-6">Our most popular all-inclusive package</p>
130
+ <ul class="space-y-3 mb-8">
131
+ <li class="flex items-center space-x-2">
132
+ <i data-feather="check" class="w-5 h-5 text-green-500"></i>
133
+ <span>Luxury Accommodation</span>
134
+ </li>
135
+ <li class="flex items-center space-x-2">
136
+ <i data-feather="check" class="w-5 h-5 text-green-500"></i>
137
+ <span>All Transportation</span>
138
+ </li>
139
+ <li class="flex items-center space-x-2">
140
+ <i data-feather="check" class="w-5 h-5 text-green-500"></i>
141
+ <span>Expert Local Guide</span>
142
+ </li>
143
+ <li class="flex items-center space-x-2">
144
+ <i data-feather="check" class="w-5 h-5 text-green-500"></i>
145
+ <span>Meals Included</span>
146
+ </li>
147
+ </ul>
148
+ <button class="w-full bg-purple-600 text-white py-3 rounded-full hover:bg-purple-700 transition-colors">
149
+ Select Package
150
+ </button>
151
+ </div>
152
+
153
+ <!-- Luxury Package -->
154
+ <div class="package-card bg-white rounded-2xl shadow-lg border border-gray-200 p-8 text-center">
155
+ <h3 class="text-2xl font-bold mb-4">Ultimate Experience</h3>
156
+ <div class="text-4xl font-bold mb-6 text-purple-600">$2,199</h3>
157
+ <p class="text-gray-600 mb-6">The ultimate luxury travel experience</p>
158
+ <ul class="space-y-3 mb-8">
159
+ <li class="flex items-center space-x-2">
160
+ <i data-feather="check" class="w-5 h-5 text-green-500"></i>
161
+ <span>5-Star Accommodation</span>
162
+ </li>
163
+ <li class="flex items-center space-x-2">
164
+ <i data-feather="check" class="w-5 h-5 text-green-500"></i>
165
+ <span>Private Transportation</span>
166
+ </li>
167
+ <li class="flex items-center space-x-2">
168
+ <i data-feather="check" class="w-5 h-5 text-green-500"></i>
169
+ <span>Personal Concierge</span>
170
+ </li>
171
+ <li class="flex items-center space-x-2">
172
+ <i data-feather="check" class="w-5 h-5 text-green-500"></i>
173
+ <span>VIP Experiences</span>
174
+ </li>
175
+ </ul>
176
+ <button class="w-full bg-gray-200 text-gray-700 py-3 rounded-full hover:bg-gray-300 transition-colors">
177
+ Select Package
178
+ </button>
179
+ </div>
180
+ </div>
181
+ </section>
182
+
183
+ <!-- Features Comparison -->
184
+ <section class="py-20 bg-gray-50">
185
+ <div class="container mx-auto px-6">
186
+ <h2 class="text-4xl font-bold text-center mb-16 gradient-text">Package Comparison</h2>
187
+ <div class="overflow-x-auto">
188
+ <table class="w-full bg-white rounded-2xl shadow-lg">
189
+ <thead>
190
+ <tr class="border-b border-gray-200">
191
+ <th class="py-4 px-6 text-left">Features</th>
192
+ <th class="py-4 px-6 text-center">Budget Explorer</th>
193
+ <th class="py-4 px-6 text-center">Premium Adventurer</th>
194
+ <th class="py-4 px-6 text-center">Ultimate Experience</th>
195
+ </tr>
196
+ </thead>
197
+ <tbody>
198
+ <tr class="border-b border-gray-100">
199
+ <td class="py-4 px-6">Accommodation</td>
200
+ <td class="py-4 px-6 text-center">
201
+ <i data-feather="check" class="w-5 h-5 text-green-500 mx-auto"></i>
202
+ </td>
203
+ <td class="py-4 px-6 text-center">
204
+ <i data-feather="check" class="w-5 h-5 text-green-500 mx-auto"></i>
205
+ </td>
206
+ <td class="py-4 px-6 text-center">
207
+ <i data-feather="check" class="w-5 h-5 text-green-500 mx-auto"></i>
208
+ </td>
209
+ </tr>
210
+ <tr class="border-b border-gray-100">
211
+ <td class="py-4 px-6">Meals Included</td>
212
+ <td class="py-4 px-6 text-center">
213
+ <i data-feather="x" class="w-5 h-5 text-red-500 mx-auto"></i>
214
+ </td>
215
+ <td class="py-4 px-6 text-center">
216
+ <i data-feather="check" class="w-5 h-5 text-green-500 mx-auto"></i>
217
+ </td>
218
+ <td class="py-4 px-6 text-center">
219
+ <i data-feather="check" class="w-5 h-5 text-green-500 mx-auto"></i>
220
+ </td>
221
+ </tr>
222
+ <tr class="border-b border-gray-100">
223
+ <td class="py-4 px-6">Private Guide</td>
224
+ <td class="py-4 px-6 text-center">
225
+ <i data-feather="x" class="w-5 h-5 text-red-500 mx-auto"></i>
226
+ </td>
227
+ <td class="py-4 px-6 text-center">
228
+ <i data-feather="check" class="w-5 h-5 text-green-500 mx-auto"></i>
229
+ </td>
230
+ <td class="py-4 px-6 text-center">
231
+ <i data-feather="check" class="w-5 h-5 text-green-500 mx-auto"></i>
232
+ </td>
233
+ </tr>
234
+ <tr>
235
+ <td class="py-4 px-6">VIP Access</td>
236
+ <td class="py-4 px-6 text-center">
237
+ <i data-feather="x" class="w-5 h-5 text-red-500 mx-auto"></i>
238
+ </td>
239
+ <td class="py-4 px-6 text-center">
240
+ <i data-feather="x" class="w-5 h-5 text-red-500 mx-auto"></i>
241
+ </td>
242
+ <td class="py-4 px-6 text-center">
243
+ <i data-feather="check" class="w-5 h-5 text-green-500 mx-auto"></i>
244
+ </td>
245
+ </tr>
246
+ </tbody>
247
+ </table>
248
+ </div>
249
+ </section>
250
+
251
+ <!-- Footer -->
252
+ <footer class="bg-gray-900 text-white py-12">
253
+ <div class="container mx-auto px-6">
254
+ <div class="grid md:grid-cols-4 gap-8 mb-8">
255
+ <div>
256
+ <div class="flex items-center space-x-2 mb-4">
257
+ <i data-feather="map-pin" class="text-purple-400 w-6 h-6"></i>
258
+ <span class="text-xl font-bold">TravelinLite Pro</span>
259
+ </div>
260
+ <p class="text-gray-400">
261
+ Your gateway to featherweight adventures around the world.
262
+ </p>
263
+ </div>
264
+ <div>
265
+ <h4 class="font-semibold mb-4">Quick Links</h4>
266
+ <ul class="space-y-2 text-gray-400">
267
+ <li><a href="index.html" class="hover:text-white transition-colors">Home</a></li>
268
+ <li><a href="destinations.html" class="hover:text-white transition-colors">Destinations</a></li>
269
+ <li><a href="packages.html" class="hover:text-white transition-colors">Packages</a></li>
270
+ <li><a href="blog.html" class="hover:text-white transition-colors">Blog</a></li>
271
+ </ul>
272
+ </div>
273
+ <div>
274
+ <h4 class="font-semibold mb-4">Support</h4>
275
+ <ul class="space-y-2 text-gray-400">
276
+ <li><a href="contact.html" class="hover:text-white transition-colors">Contact</a></li>
277
+ <li><a href="#" class="hover:text-white transition-colors">Help Center</a></li>
278
+ <li><a href="#" class="hover:text-white transition-colors">Safety Info</a></li>
279
+ <li><a href="#" class="hover:text-white transition-colors">Terms</a></li>
280
+ </ul>
281
+ </div>
282
+ <div>
283
+ <h4 class="font-semibold mb-4">Follow Us</h4>
284
+ <div class="flex space-x-4">
285
+ <a href="#" class="text-gray-400 hover:text-white transition-colors">
286
+ <i data-feather="facebook" class="w-6 h-6"></i>
287
+ </a>
288
+ <a href="#" class="text-gray-400 hover:text-white transition-colors">
289
+ <i data-feather="twitter" class="w-6 h-6"></i>
290
+ </a>
291
+ <a href="#" class="text-gray-400 hover:text-white transition-colors">
292
+ <i data-feather="instagram" class="w-6 h-6"></i>
293
+ </a>
294
+ <a href="#" class="text-gray-400 hover:text-white transition-colors">
295
+ <i data-feather="youtube" class="w-6 h-6"></i>
296
+ </a>
297
+ </div>
298
+ </div>
299
+ </div>
300
+ <div class="border-t border-gray-800 pt-8 text-center text-gray-400">
301
+ <p>&copy; 2024 TravelinLite Pro. All rights reserved. Made with ❤️ for travelers.</p>
302
+ </div>
303
+ </div>
304
+ </footer>
305
+
306
+ <script>
307
+ feather.replace();
308
+
309
+ // Package selection
310
+ document.querySelectorAll('button').forEach(btn => {
311
+ if (btn.textContent.includes('Select Package')) {
312
+ btn.addEventListener('click', function() {
313
+ const packageName = this.closest('.package-card').querySelector('h3').textContent;
314
+ alert(`You've selected the ${packageName} package! Our team will contact you shortly.');
315
+ });
316
+ }
317
+
318
+ // Mobile menu toggle
319
+ const mobileMenuBtn = document.getElementById('mobileMenuBtn');
320
+ mobileMenuBtn.addEventListener('click', function() {
321
+ alert('Mobile menu would open here');
322
+ });
323
+ </script>
324
+ </body>
325
+ </html>