Hugging Face's logo

Spaces:
pramai
/
wanderlust
Running

App Files Community
pramai commited on
Commit
96f60e6
·
verified ·
1 Parent(s): c5b2f9c

Packages full page views required - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +821 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Wanderlust
3
- emoji: 🐨
4
- colorFrom: purple
5
- colorTo: indigo
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: wanderlust
3
+ emoji: 🐳
4
+ colorFrom: gray
5
+ colorTo: yellow
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,821 @@
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>Wanderlust - Travel Destination Manager</title>
7
+ <script src="https://cdn.tailwindcss.com/3.4.1"></script>
8
+ <script src="https://kit.fontawesome.com/yourcode.js" crossorigin="anonymous"></script>
9
+ <style>
10
+ /* Custom CSS for elements that need more precise control */
11
+ .destination-card:hover .destination-overlay {
12
+ opacity: 1;
13
+ transform: translateY(0);
14
+ }
15
+ .destination-overlay {
16
+ transition: all 0.3s ease;
17
+ transform: translateY(20px);
18
+ }
19
+ .search-box:focus-within {
20
+ box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3);
21
+ }
22
+ .map-container {
23
+ height: 400px;
24
+ background-image: url('https://maps.googleapis.com/maps/api/staticmap?center=0,0&zoom=2&size=800x400&maptype=roadmap&key=YOUR_API_KEY');
25
+ background-size: cover;
26
+ background-position: center;
27
+ }
28
+ @keyframes pulse {
29
+ 0%, 100% { transform: scale(1); }
30
+ 50% { transform: scale(1.05); }
31
+ }
32
+ .pulse-animation {
33
+ animation: pulse 2s infinite;
34
+ }
35
+ </style>
36
+ </head>
37
+ <body class="bg-gray-50 font-sans">
38
+ <!-- Navigation -->
39
+ <nav class="bg-white shadow-lg sticky top-0 z-50">
40
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
41
+ <div class="flex justify-between h-16">
42
+ <div class="flex items-center">
43
+ <div class="flex-shrink-0 flex items-center">
44
+ <i class="fas fa-globe-americas text-blue-500 text-2xl mr-2"></i>
45
+ <span class="text-xl font-bold text-blue-600">Wanderlust</span>
46
+ </div>
47
+ <div class="hidden sm:ml-6 sm:flex sm:space-x-8">
48
+ <a href="#" class="border-blue-500 text-gray-900 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Home</a>
49
+ <a href="#" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Destinations</a>
50
+ <a href="#" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Trips</a>
51
+ <a href="#" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">About</a>
52
+ </div>
53
+ </div>
54
+ <div class="hidden sm:ml-6 sm:flex sm:items-center">
55
+ <button class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-md text-sm font-medium transition duration-300 flex items-center">
56
+ <i class="fas fa-plus mr-2"></i> Add Destination
57
+ </button>
58
+ <div class="ml-4 relative flex-shrink-0">
59
+ <div>
60
+ <button class="bg-white rounded-full flex text-sm focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500" id="user-menu">
61
+ <img class="h-8 w-8 rounded-full" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="">
62
+ </button>
63
+ </div>
64
+ </div>
65
+ </div>
66
+ <div class="-mr-2 flex items-center sm:hidden">
67
+ <button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-blue-500" aria-controls="mobile-menu" aria-expanded="false" id="mobile-menu-button">
68
+ <span class="sr-only">Open main menu</span>
69
+ <i class="fas fa-bars text-xl"></i>
70
+ </button>
71
+ </div>
72
+ </div>
73
+ </div>
74
+
75
+ <!-- Mobile menu -->
76
+ <div class="sm:hidden hidden" id="mobile-menu">
77
+ <div class="pt-2 pb-3 space-y-1">
78
+ <a href="#" class="bg-blue-50 border-blue-500 text-blue-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Home</a>
79
+ <a href="#" class="border-transparent text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Destinations</a>
80
+ <a href="#" class="border-transparent text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Trips</a>
81
+ <a href="#" class="border-transparent text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">About</a>
82
+ <div class="mt-4 pl-3">
83
+ <button class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-md text-sm font-medium transition duration-300 flex items-center">
84
+ <i class="fas fa-plus mr-2"></i> Add Destination
85
+ </button>
86
+ </div>
87
+ </div>
88
+ </div>
89
+ </nav>
90
+
91
+ <!-- Hero Section -->
92
+ <div class="relative bg-blue-700 overflow-hidden">
93
+ <div class="max-w-7xl mx-auto">
94
+ <div class="relative z-10 pb-8 bg-blue-700 sm:pb-16 md:pb-20 lg:max-w-2xl lg:w-full lg:pb-28 xl:pb-32">
95
+ <div class="pt-10 sm:pt-16 lg:pt-8 lg:pb-14 lg:overflow-hidden">
96
+ <div class="mt-10 mx-auto max-w-7xl px-4 sm:mt-12 sm:px-6 md:mt-16 lg:mt-20 lg:px-8 xl:mt-28">
97
+ <div class="sm:text-center lg:text-left">
98
+ <h1 class="text-4xl tracking-tight font-extrabold text-white sm:text-5xl md:text-6xl">
99
+ <span class="block">Discover Your Next</span>
100
+ <span class="block text-blue-200">Adventure</span>
101
+ </h1>
102
+ <p class="mt-3 text-base text-blue-100 sm:mt-5 sm:text-lg sm:max-w-xl sm:mx-auto md:mt-5 md:text-xl lg:mx-0">
103
+ Plan, organize and manage your dream destinations with our comprehensive travel management system.
104
+ </p>
105
+ <div class="mt-5 sm:mt-8 sm:flex sm:justify-center lg:justify-start">
106
+ <div class="rounded-md shadow">
107
+ <a href="#" class="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-blue-700 bg-white hover:bg-gray-50 md:py-4 md:text-lg md:px-10">
108
+ Explore Now
109
+ </a>
110
+ </div>
111
+ <div class="mt-3 sm:mt-0 sm:ml-3">
112
+ <a href="#" class="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-white bg-blue-500 bg-opacity-60 hover:bg-opacity-70 md:py-4 md:text-lg md:px-10">
113
+ <i class="fas fa-play mr-2"></i> Watch Demo
114
+ </a>
115
+ </div>
116
+ </div>
117
+ </div>
118
+ </div>
119
+ </div>
120
+ </div>
121
+ </div>
122
+ <div class="lg:absolute lg:inset-y-0 lg:right-0 lg:w-1/2">
123
+ <img class="h-56 w-full object-cover sm:h-72 md:h-96 lg:w-full lg:h-full" src="https://images.unsplash.com/photo-1506929562872-bb421503ef21?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1368&q=80" alt="">
124
+ </div>
125
+ </div>
126
+
127
+ <!-- Search and Filter Section -->
128
+ <div class="bg-white shadow-md -mt-8 mx-auto max-w-5xl rounded-lg relative z-20 p-6">
129
+ <div class="search-box border border-gray-200 rounded-lg p-4 transition-all duration-300">
130
+ <h3 class="text-lg font-semibold text-gray-800 mb-4">Find Your Perfect Destination</h3>
131
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
132
+ <div class="relative">
133
+ <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
134
+ <i class="fas fa-map-marker-alt text-gray-400"></i>
135
+ </div>
136
+ <input type="text" class="block w-full pl-10 pr-3 py-2 border border-gray-300 rounded-md leading-5 bg-white placeholder-gray-500 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm" placeholder="Where to?">
137
+ </div>
138
+ <div class="relative">
139
+ <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
140
+ <i class="far fa-calendar-alt text-gray-400"></i>
141
+ </div>
142
+ <input type="text" class="block w-full pl-10 pr-3 py-2 border border-gray-300 rounded-md leading-5 bg-white placeholder-gray-500 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm" placeholder="When?">
143
+ </div>
144
+ <div class="relative">
145
+ <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
146
+ <i class="fas fa-user-friends text-gray-400"></i>
147
+ </div>
148
+ <select class="block w-full pl-10 pr-3 py-2 border border-gray-300 rounded-md leading-5 bg-white focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm">
149
+ <option>Travelers</option>
150
+ <option>1 Traveler</option>
151
+ <option>2 Travelers</option>
152
+ <option>3-5 Travelers</option>
153
+ <option>6+ Travelers</option>
154
+ </select>
155
+ </div>
156
+ <button class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md text-sm font-medium transition duration-300 flex items-center justify-center">
157
+ <i class="fas fa-search mr-2"></i> Search
158
+ </button>
159
+ </div>
160
+
161
+ <div class="mt-4 flex flex-wrap gap-2">
162
+ <span class="text-sm text-gray-600 mr-2">Filter by:</span>
163
+ <button class="px-3 py-1 bg-blue-100 text-blue-800 text-xs font-medium rounded-full hover:bg-blue-200 transition">Beach</button>
164
+ <button class="px-3 py-1 bg-green-100 text-green-800 text-xs font-medium rounded-full hover:bg-green-200 transition">Mountain</button>
165
+ <button class="px-3 py-1 bg-purple-100 text-purple-800 text-xs font-medium rounded-full hover:bg-purple-200 transition">City</button>
166
+ <button class="px-3 py-1 bg-yellow-100 text-yellow-800 text-xs font-medium rounded-full hover:bg-yellow-200 transition">Historical</button>
167
+ <button class="px-3 py-1 bg-red-100 text-red-800 text-xs font-medium rounded-full hover:bg-red-200 transition">Adventure</button>
168
+ </div>
169
+ </div>
170
+ </div>
171
+
172
+ <!-- Packages Section -->
173
+ <div class="bg-gray-50 py-16">
174
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
175
+ <div class="text-center mb-12">
176
+ <h2 class="text-2xl font-bold text-gray-900">Travel Packages</h2>
177
+ <p class="mt-4 max-w-2xl text-gray-500 mx-auto">
178
+ Choose from our carefully curated travel packages for the perfect getaway
179
+ </p>
180
+ </div>
181
+
182
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
183
+ <!-- Package 1 -->
184
+ <div class="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-xl transition-shadow">
185
+ <div class="relative h-48">
186
+ <img class="w-full h-full object-cover" src="https://images.unsplash.com/photo-1520250497591-112f2f40a3f4?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" alt="European Tour">
187
+ <div class="absolute top-2 right-2 bg-white rounded-full p-2 shadow">
188
+ <span class="text-xs font-bold bg-blue-500 text-white px-2 py-1 rounded-full">POPULAR</span>
189
+ </div>
190
+ </div>
191
+ <div class="p-6">
192
+ <div class="flex justify-between items-start">
193
+ <h3 class="text-lg font-bold text-gray-900">European Explorer</h3>
194
+ <span class="text-blue-600 font-bold">$2,499</span>
195
+ </div>
196
+ <p class="mt-2 text-gray-600 text-sm">10 days across 4 countries</p>
197
+ <div class="mt-4 flex items-center">
198
+ <i class="fas fa-map-marker-alt text-gray-400 mr-2"></i>
199
+ <span class="text-sm text-gray-500">Paris, Rome, Barcelona, Amsterdam</span>
200
+ </div>
201
+ <div class="mt-4 pt-4 border-t border-gray-100">
202
+ <ul class="space-y-2 text-sm text-gray-600">
203
+ <li class="flex items-center"><i class="fas fa-check text-green-500 mr-2"></i> Flights included</li>
204
+ <li class="flex items-center"><i class="fas fa-check text-green-500 mr-2"></i> 4-star hotels</li>
205
+ <li class="flex items-center"><i class="fas fa-check text-green-500 mr-2"></i> Daily breakfast</li>
206
+ </ul>
207
+ </div>
208
+ <button class="mt-6 w-full bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded-md transition duration-300">
209
+ Book Now
210
+ </button>
211
+ </div>
212
+ </div>
213
+
214
+ <!-- Package 2 -->
215
+ <div class="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-xl transition-shadow">
216
+ <div class="relative h-48">
217
+ <img class="w-full h-full object-cover" src="https://images.unsplash.com/photo-1503917988258-f87a78e3c995?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" alt="Asian Adventure">
218
+ </div>
219
+ <div class="p-6">
220
+ <div class="flex justify-between items-start">
221
+ <h3 class="text-lg font-bold text-gray-900">Asian Adventure</h3>
222
+ <span class="text-blue-600 font-bold">$1,799</span>
223
+ </div>
224
+ <p class="mt-2 text-gray-600 text-sm">14 days across 3 countries</p>
225
+ <div class="mt-4 flex items-center">
226
+ <i class="fas fa-map-marker-alt text-gray-400 mr-2"></i>
227
+ <span class="text-sm text-gray-500">Bali, Tokyo, Bangkok</span>
228
+ </div>
229
+ <div class="mt-4 pt-4 border-t border-gray-100">
230
+ <ul class="space-y-2 text-sm text-gray-600">
231
+ <li class="flex items-center"><i class="fas fa-check text-green-500 mr-2"></i> Flights included</li>
232
+ <li class="flex items-center"><i class="fas fa-check text-green-500 mr-2"></i> 5-star resorts</li>
233
+ <li class="flex items-center"><i class="fas fa-check text-green-500 mr-2"></i> All meals included</li>
234
+ </ul>
235
+ </div>
236
+ <button class="mt-6 w-full bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded-md transition duration-300">
237
+ Book Now
238
+ </button>
239
+ </div>
240
+ </div>
241
+
242
+ <!-- Package 3 -->
243
+ <div class="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-xl transition-shadow">
244
+ <div class="relative h-48">
245
+ <img class="w-full h-full object-cover" src="https://images.unsplash.com/photo-1501594907352-04cda38ebc29?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" alt="Caribbean Cruise">
246
+ <div class="absolute top-2 right-2 bg-white rounded-full p-2 shadow">
247
+ <span class="text-xs font-bold bg-green-500 text-white px-2 py-1 rounded-full">NEW</span>
248
+ </div>
249
+ </div>
250
+ <div class="p-6">
251
+ <div class="flex justify-between items-start">
252
+ <h3 class="text-lg font-bold text-gray-900">Caribbean Cruise</h3>
253
+ <span class="text-blue-600 font-bold">$1,299</span>
254
+ </div>
255
+ <p class="mt-2 text-gray-600 text-sm">7-day luxury cruise</p>
256
+ <div class="mt-4 flex items-center">
257
+ <i class="fas fa-map-marker-alt text-gray-400 mr-2"></i>
258
+ <span class="text-sm text-gray-500">Bahamas, Jamaica, Cayman Islands</span>
259
+ </div>
260
+ <div class="mt-4 pt-4 border-t border-gray-100">
261
+ <ul class="space-y-2 text-sm text-gray-600">
262
+ <li class="flex items-center"><i class="fas fa-check text-green-500 mr-2"></i> All-inclusive</li>
263
+ <li class="flex items-center"><i class="fas fa-check text-green-500 mr-2"></i> Premium cabin</li>
264
+ <li class="flex items-center"><i class="fas fa-check text-green-500 mr-2"></i> Shore excursions</li>
265
+ </ul>
266
+ </div>
267
+ <button class="mt-6 w-full bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded-md transition duration-300">
268
+ Book Now
269
+ </button>
270
+ </div>
271
+ </div>
272
+ </div>
273
+
274
+ <div class="mt-10 text-center">
275
+ <a href="#" class="inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50">
276
+ View All Packages <i class="fas fa-chevron-right ml-1"></i>
277
+ </a>
278
+ </div>
279
+ </div>
280
+ </div>
281
+
282
+ <!-- Popular Destinations Section -->
283
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
284
+ <div class="flex justify-between items-center mb-8">
285
+ <h2 class="text-2xl font-bold text-gray-900">Popular Destinations</h2>
286
+ <a href="#" class="text-blue-600 hover:text-blue-800 font-medium flex items-center">
287
+ View all <i class="fas fa-chevron-right ml-1 text-sm"></i>
288
+ </a>
289
+ </div>
290
+
291
+ <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
292
+ <!-- Destination Card 1 -->
293
+ <div class="destination-card bg-white rounded-lg overflow-hidden shadow-md hover:shadow-xl transition-shadow duration-300 relative">
294
+ <div class="relative h-48 overflow-hidden">
295
+ <img class="w-full h-full object-cover" src="https://images.unsplash.com/photo-1503917988258-f87a78e3c995?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1368&q=80" alt="Bali, Indonesia">
296
+ <div class="absolute top-2 right-2 bg-white rounded-full p-2 shadow">
297
+ <i class="far fa-heart text-gray-400 hover:text-red-500 cursor-pointer"></i>
298
+ </div>
299
+ <div class="destination-overlay absolute inset-0 bg-gradient-to-t from-black/70 via-black/30 to-transparent opacity-0 flex items-end p-4">
300
+ <div>
301
+ <div class="flex items-center text-white mb-1">
302
+ <i class="fas fa-map-marker-alt text-sm mr-1"></i>
303
+ <span class="text-sm">Bali, Indonesia</span>
304
+ </div>
305
+ <h3 class="text-white font-semibold text-lg">Tropical Paradise</h3>
306
+ </div>
307
+ </div>
308
+ </div>
309
+ <div class="p-4">
310
+ <div class="flex justify-between items-start">
311
+ <div>
312
+ <h3 class="font-semibold text-gray-900">Bali, Indonesia</h3>
313
+ <p class="text-gray-500 text-sm mt-1">Tropical beaches & vibrant culture</p>
314
+ </div>
315
+ <div class="bg-blue-100 text-blue-800 px-2 py-1 rounded text-xs font-medium">
316
+ 4.8 <i class="fas fa-star ml-1"></i>
317
+ </div>
318
+ </div>
319
+ <div class="mt-4 flex justify-between items-center">
320
+ <span class="text-gray-900 font-medium">$1,200</span>
321
+ <button class="text-blue-600 hover:text-blue-800 text-sm font-medium flex items-center">
322
+ View details <i class="fas fa-chevron-right ml-1 text-xs"></i>
323
+ </button>
324
+ </div>
325
+ </div>
326
+ </div>
327
+
328
+ <!-- Destination Card 2 -->
329
+ <div class="destination-card bg-white rounded-lg overflow-hidden shadow-md hover:shadow-xl transition-shadow duration-300 relative">
330
+ <div class="relative h-48 overflow-hidden">
331
+ <img class="w-full h-full object-cover" src="https://images.unsplash.com/photo-1518391846015-55a9cc003b25?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1368&q=80" alt="Paris, France">
332
+ <div class="absolute top-2 right-2 bg-white rounded-full p-2 shadow">
333
+ <i class="far fa-heart text-gray-400 hover:text-red-500 cursor-pointer"></i>
334
+ </div>
335
+ <div class="destination-overlay absolute inset-0 bg-gradient-to-t from-black/70 via-black/30 to-transparent opacity-0 flex items-end p-4">
336
+ <div>
337
+ <div class="flex items-center text-white mb-1">
338
+ <i class="fas fa-map-marker-alt text-sm mr-1"></i>
339
+ <span class="text-sm">Paris, France</span>
340
+ </div>
341
+ <h3 class="text-white font-semibold text-lg">City of Lights</h3>
342
+ </div>
343
+ </div>
344
+ </div>
345
+ <div class="p-4">
346
+ <div class="flex justify-between items-start">
347
+ <div>
348
+ <h3 class="font-semibold text-gray-900">Paris, France</h3>
349
+ <p class="text-gray-500 text-sm mt-1">Romantic city with rich history</p>
350
+ </div>
351
+ <div class="bg-blue-100 text-blue-800 px-2 py-1 rounded text-xs font-medium">
352
+ 4.9 <i class="fas fa-star ml-1"></i>
353
+ </div>
354
+ </div>
355
+ <div class="mt-4 flex justify-between items-center">
356
+ <span class="text-gray-900 font-medium">$1,500</span>
357
+ <button class="text-blue-600 hover:text-blue-800 text-sm font-medium flex items-center">
358
+ View details <i class="fas fa-chevron-right ml-1 text-xs"></i>
359
+ </button>
360
+ </div>
361
+ </div>
362
+ </div>
363
+
364
+ <!-- Destination Card 3 -->
365
+ <div class="destination-card bg-white rounded-lg overflow-hidden shadow-md hover:shadow-xl transition-shadow duration-300 relative">
366
+ <div class="relative h-48 overflow-hidden">
367
+ <img class="w-full h-full object-cover" src="https://images.unsplash.com/photo-1523482580672-f109ba8cb9be?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1368&q=80" alt="Tokyo, Japan">
368
+ <div class="absolute top-2 right-2 bg-white rounded-full p-2 shadow">
369
+ <i class="far fa-heart text-gray-400 hover:text-red-500 cursor-pointer"></i>
370
+ </div>
371
+ <div class="destination-overlay absolute inset-0 bg-gradient-to-t from-black/70 via-black/30 to-transparent opacity-0 flex items-end p-4">
372
+ <div>
373
+ <div class="flex items-center text-white mb-1">
374
+ <i class="fas fa-map-marker-alt text-sm mr-1"></i>
375
+ <span class="text-sm">Tokyo, Japan</span>
376
+ </div>
377
+ <h3 class="text-white font-semibold text-lg">Modern Metropolis</h3>
378
+ </div>
379
+ </div>
380
+ </div>
381
+ <div class="p-4">
382
+ <div class="flex justify-between items-start">
383
+ <div>
384
+ <h3 class="font-semibold text-gray-900">Tokyo, Japan</h3>
385
+ <p class="text-gray-500 text-sm mt-1">Futuristic city with ancient traditions</p>
386
+ </div>
387
+ <div class="bg-blue-100 text-blue-800 px-2 py-1 rounded text-xs font-medium">
388
+ 4.7 <i class="fas fa-star ml-1"></i>
389
+ </div>
390
+ </div>
391
+ <div class="mt-4 flex justify-between items-center">
392
+ <span class="text-gray-900 font-medium">$1,800</span>
393
+ <button class="text-blue-600 hover:text-blue-800 text-sm font-medium flex items-center">
394
+ View details <i class="fas fa-chevron-right ml-1 text-xs"></i>
395
+ </button>
396
+ </div>
397
+ </div>
398
+ </div>
399
+ </div>
400
+ </div>
401
+
402
+ <!-- Featured Section -->
403
+ <div class="bg-gray-100 py-16">
404
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
405
+ <div class="lg:text-center">
406
+ <h2 class="text-base text-blue-600 font-semibold tracking-wide uppercase">Features</h2>
407
+ <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl">
408
+ Plan Your Perfect Trip
409
+ </p>
410
+ <p class="mt-4 max-w-2xl text-xl text-gray-500 lg:mx-auto">
411
+ Everything you need to organize your travel destinations in one place.
412
+ </p>
413
+ </div>
414
+
415
+ <div class="mt-10">
416
+ <div class="grid grid-cols-1 gap-10 sm:grid-cols-2 lg:grid-cols-3">
417
+ <div class="bg-white rounded-lg shadow p-6 hover:shadow-md transition-shadow">
418
+ <div class="flex items-center justify-center h-12 w-12 rounded-md bg-blue-500 text-white mb-4">
419
+ <i class="fas fa-map-marked-alt text-xl"></i>
420
+ </div>
421
+ <h3 class="text-lg font-medium text-gray-900 mb-2">Destination Management</h3>
422
+ <p class="text-gray-500">
423
+ Easily add, organize and categorize all your dream destinations with our intuitive interface.
424
+ </p>
425
+ </div>
426
+
427
+ <div class="bg-white rounded-lg shadow p-6 hover:shadow-md transition-shadow">
428
+ <div class="flex items-center justify-center h-12 w-12 rounded-md bg-green-500 text-white mb-4">
429
+ <i class="fas fa-calendar-check text-xl"></i>
430
+ </div>
431
+ <h3 class="text-lg font-medium text-gray-900 mb-2">Trip Planning</h3>
432
+ <p class="text-gray-500">
433
+ Create detailed itineraries with dates, activities, and notes for each destination.
434
+ </p>
435
+ </div>
436
+
437
+ <div class="bg-white rounded-lg shadow p-6 hover:shadow-md transition-shadow">
438
+ <div class="flex items-center justify-center h-12 w-12 rounded-md bg-purple-500 text-white mb-4">
439
+ <i class="fas fa-images text-xl"></i>
440
+ </div>
441
+ <h3 class="text-lg font-medium text-gray-900 mb-2">Photo Gallery</h3>
442
+ <p class="text-gray-500">
443
+ Upload and organize photos from your travels to relive your favorite moments.
444
+ </p>
445
+ </div>
446
+
447
+ <div class="bg-white rounded-lg shadow p-6 hover:shadow-md transition-shadow">
448
+ <div class="flex items-center justify-center h-12 w-12 rounded-md bg-yellow-500 text-white mb-4">
449
+ <i class="fas fa-star text-xl"></i>
450
+ </div>
451
+ <h3 class="text-lg font-medium text-gray-900 mb-2">Ratings & Reviews</h3>
452
+ <p class="text-gray-500">
453
+ Rate and review destinations to remember what you loved (or didn't) about each place.
454
+ </p>
455
+ </div>
456
+
457
+ <div class="bg-white rounded-lg shadow p-6 hover:shadow-md transition-shadow">
458
+ <div class="flex items-center justify-center h-12 w-12 rounded-md bg-red-500 text-white mb-4">
459
+ <i class="fas fa-users text-xl"></i>
460
+ </div>
461
+ <h3 class="text-lg font-medium text-gray-900 mb-2">Collaboration</h3>
462
+ <p class="text-gray-500">
463
+ Share your travel plans with friends and family and plan trips together.
464
+ </p>
465
+ </div>
466
+
467
+ <div class="bg-white rounded-lg shadow p-6 hover:shadow-md transition-shadow">
468
+ <div class="flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white mb-4">
469
+ <i class="fas fa-mobile-alt text-xl"></i>
470
+ </div>
471
+ <h3 class="text-lg font-medium text-gray-900 mb-2">Mobile Access</h3>
472
+ <p class="text-gray-500">
473
+ Access your travel plans on the go with our mobile-friendly interface.
474
+ </p>
475
+ </div>
476
+ </div>
477
+ </div>
478
+ </div>
479
+ </div>
480
+
481
+ <!-- Map Section -->
482
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
483
+ <div class="lg:grid lg:grid-cols-2 lg:gap-8 items-center">
484
+ <div class="mb-8 lg:mb-0">
485
+ <h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl">
486
+ Visualize Your Travels
487
+ </h2>
488
+ <p class="mt-3 max-w-3xl text-lg text-gray-500">
489
+ See all your visited and planned destinations on an interactive map. Track your travel history and discover new places to explore.
490
+ </p>
491
+ <div class="mt-8">
492
+ <div class="inline-flex rounded-md shadow">
493
+ <a href="#" class="inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700">
494
+ View My Map
495
+ <i class="fas fa-arrow-right ml-2"></i>
496
+ </a>
497
+ </div>
498
+ </div>
499
+ </div>
500
+ <div class="map-container rounded-xl shadow-xl overflow-hidden">
501
+ <!-- Map would be rendered here with JavaScript -->
502
+ <div class="h-full w-full flex items-center justify-center bg-gray-200">
503
+ <div class="text-center p-6">
504
+ <i class="fas fa-map-marked-alt text-4xl text-gray-400 mb-4"></i>
505
+ <h3 class="text-lg font-medium text-gray-700">Interactive Travel Map</h3>
506
+ <p class="mt-2 text-gray-500">Your visited and planned destinations will appear here</p>
507
+ </div>
508
+ </div>
509
+ </div>
510
+ </div>
511
+ </div>
512
+
513
+ <!-- Testimonials -->
514
+ <div class="bg-blue-700 py-16">
515
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
516
+ <div class="lg:text-center mb-12">
517
+ <h2 class="text-base text-blue-300 font-semibold tracking-wide uppercase">Testimonials</h2>
518
+ <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-white sm:text-4xl">
519
+ What travelers are saying
520
+ </p>
521
+ </div>
522
+
523
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
524
+ <div class="bg-white p-6 rounded-lg shadow-lg">
525
+ <div class="flex items-center mb-4">
526
+ <img class="h-10 w-10 rounded-full" src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="">
527
+ <div class="ml-3">
528
+ <h4 class="text-sm font-medium text-gray-900">Sarah Johnson</h4>
529
+ <div class="flex text-yellow-400 text-xs mt-1">
530
+ <i class="fas fa-star"></i>
531
+ <i class="fas fa-star"></i>
532
+ <i class="fas fa-star"></i>
533
+ <i class="fas fa-star"></i>
534
+ <i class="fas fa-star"></i>
535
+ </div>
536
+ </div>
537
+ </div>
538
+ <p class="text-gray-600 italic">
539
+ "This platform completely transformed how I plan my trips. Being able to see all my potential destinations in one place is a game changer!"
540
+ </p>
541
+ </div>
542
+
543
+ <div class="bg-white p-6 rounded-lg shadow-lg">
544
+ <div class="flex items-center mb-4">
545
+ <img class="h-10 w-10 rounded-full" src="https://images.unsplash.com/photo-1519244703995-f4e0f30006d5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="">
546
+ <div class="ml-3">
547
+ <h4 class="text-sm font-medium text-gray-900">Michael Chen</h4>
548
+ <div class="flex text-yellow-400 text-xs mt-1">
549
+ <i class="fas fa-star"></i>
550
+ <i class="fas fa-star"></i>
551
+ <i class="fas fa-star"></i>
552
+ <i class="fas fa-star"></i>
553
+ <i class="fas fa-star-half-alt"></i>
554
+ </div>
555
+ </div>
556
+ </div>
557
+ <p class="text-gray-600 italic">
558
+ "As a frequent traveler, I've tried many apps. Wanderlust stands out for its simplicity and powerful features. The map visualization is brilliant."
559
+ </p>
560
+ </div>
561
+
562
+ <div class="bg-white p-6 rounded-lg shadow-lg">
563
+ <div class="flex items-center mb-4">
564
+ <img class="h-10 w-10 rounded-full" src="https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="">
565
+ <div class="ml-3">
566
+ <h4 class="text-sm font-medium text-gray-900">David Rodriguez</h4>
567
+ <div class="flex text-yellow-400 text-xs mt-1">
568
+ <i class="fas fa-star"></i>
569
+ <i class="fas fa-star"></i>
570
+ <i class="fas fa-star"></i>
571
+ <i class="fas fa-star"></i>
572
+ <i class="fas fa-star"></i>
573
+ </div>
574
+ </div>
575
+ </div>
576
+ <p class="text-gray-600 italic">
577
+ "Planning our family vacation was never this easy. The collaboration features allowed everyone to contribute ideas and we ended up with the perfect itinerary."
578
+ </p>
579
+ </div>
580
+ </div>
581
+ </div>
582
+ </div>
583
+
584
+ <!-- CTA Section -->
585
+ <div class="bg-white">
586
+ <div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:py-16 lg:px-8 lg:flex lg:items-center lg:justify-between">
587
+ <h2 class="text-3xl font-extrabold tracking-tight text-gray-900 sm:text-4xl">
588
+ <span class="block">Ready to start your next adventure?</span>
589
+ <span class="block text-blue-600">Create your free account today.</span>
590
+ </h2>
591
+ <div class="mt-8 flex lg:mt-0 lg:flex-shrink-0">
592
+ <div class="inline-flex rounded-md shadow">
593
+ <a href="#" class="inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700">
594
+ Get started
595
+ <i class="fas fa-arrow-right ml-2"></i>
596
+ </a>
597
+ </div>
598
+ <div class="ml-3 inline-flex rounded-md shadow">
599
+ <a href="#" class="inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-blue-600 bg-white hover:bg-gray-50">
600
+ Learn more
601
+ <i class="fas fa-info-circle ml-2"></i>
602
+ </a>
603
+ </div>
604
+ </div>
605
+ </div>
606
+ </div>
607
+
608
+ <!-- Footer -->
609
+ <footer class="bg-gray-800">
610
+ <div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8">
611
+ <div class="grid grid-cols-2 md:grid-cols-4 gap-8">
612
+ <div>
613
+ <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">Company</h3>
614
+ <ul class="mt-4 space-y-4">
615
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">About</a></li>
616
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">Careers</a></li>
617
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">Blog</a></li>
618
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">Press</a></li>
619
+ </ul>
620
+ </div>
621
+ <div>
622
+ <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">Product</h3>
623
+ <ul class="mt-4 space-y-4">
624
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">Features</a></li>
625
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">Pricing</a></li>
626
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">API</a></li>
627
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">Integrations</a></li>
628
+ </ul>
629
+ </div>
630
+ <div>
631
+ <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">Resources</h3>
632
+ <ul class="mt-4 space-y-4">
633
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">Documentation</a></li>
634
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">Guides</a></li>
635
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">Support</a></li>
636
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">Community</a></li>
637
+ </ul>
638
+ </div>
639
+ <div>
640
+ <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">Legal</h3>
641
+ <ul class="mt-4 space-y-4">
642
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">Privacy</a></li>
643
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">Terms</a></li>
644
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">Cookie Policy</a></li>
645
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">GDPR</a></li>
646
+ </ul>
647
+ </div>
648
+ </div>
649
+ <div class="mt-8 border-t border-gray-700 pt-8 md:flex md:items-center md:justify-between">
650
+ <div class="flex space-x-6 md:order-2">
651
+ <a href="#" class="text-gray-400 hover:text-gray-300">
652
+ <span class="sr-only">Facebook</span>
653
+ <i class="fab fa-facebook-f"></i>
654
+ </a>
655
+ <a href="#" class="text-gray-400 hover:text-gray-300">
656
+ <span class="sr-only">Instagram</span>
657
+ <i class="fab fa-instagram"></i>
658
+ </a>
659
+ <a href="#" class="text-gray-400 hover:text-gray-300">
660
+ <span class="sr-only">Twitter</span>
661
+ <i class="fab fa-twitter"></i>
662
+ </a>
663
+ <a href="#" class="text-gray-400 hover:text-gray-300">
664
+ <span class="sr-only">YouTube</span>
665
+ <i class="fab fa-youtube"></i>
666
+ </a>
667
+ </div>
668
+ <p class="mt-8 text-base text-gray-400 md:mt-0 md:order-1">
669
+ &copy; 2023 Wanderlust. All rights reserved.
670
+ </p>
671
+ </div>
672
+ </div>
673
+ </footer>
674
+
675
+ <!-- Add Destination Modal (hidden by default) -->
676
+ <div class="fixed z-50 inset-0 overflow-y-auto hidden" id="addDestinationModal" aria-labelledby="modal-title" role="dialog" aria-modal="true">
677
+ <div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
678
+ <div class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" aria-hidden="true"></div>
679
+ <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
680
+ <div class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full">
681
+ <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
682
+ <div class="sm:flex sm:items-start">
683
+ <div class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10">
684
+ <i class="fas fa-map-marker-alt text-blue-600"></i>
685
+ </div>
686
+ <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
687
+ <h3 class="text-lg leading-6 font-medium text-gray-900" id="modal-title">
688
+ Add New Destination
689
+ </h3>
690
+ <div class="mt-2">
691
+ <form class="space-y-4">
692
+ <div>
693
+ <label for="destination-name" class="block text-sm font-medium text-gray-700">Destination Name</label>
694
+ <input type="text" id="destination-name" class="mt-1 focus:ring-blue-500 focus:border-blue-500 block w-full shadow-sm sm:text-sm border-gray-300 rounded-md">
695
+ </div>
696
+ <div>
697
+ <label for="destination-location" class="block text-sm font-medium text-gray-700">Location</label>
698
+ <input type="text" id="destination-location" class="mt-1 focus:ring-blue-500 focus:border-blue-500 block w-full shadow-sm sm:text-sm border-gray-300 rounded-md">
699
+ </div>
700
+ <div>
701
+ <label for="destination-type" class="block text-sm font-medium text-gray-700">Type</label>
702
+ <select id="destination-type" class="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm rounded-md">
703
+ <option>Beach</option>
704
+ <option>Mountain</option>
705
+ <option>City</option>
706
+ <option>Historical</option>
707
+ <option>Adventure</option>
708
+ </select>
709
+ </div>
710
+ <div>
711
+ <label for="destination-description" class="block text-sm font-medium text-gray-700">Description</label>
712
+ <textarea id="destination-description" rows="3" class="mt-1 focus:ring-blue-500 focus:border-blue-500 block w-full shadow-sm sm:text-sm border-gray-300 rounded-md"></textarea>
713
+ </div>
714
+ </form>
715
+ </div>
716
+ </div>
717
+ </div>
718
+ </div>
719
+ <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
720
+ <button type="button" class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm">
721
+ Save Destination
722
+ </button>
723
+ <button type="button" class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm" id="cancel-add-destination">
724
+ Cancel
725
+ </button>
726
+ </div>
727
+ </div>
728
+ </div>
729
+ </div>
730
+
731
+ <script>
732
+ // Mobile menu toggle
733
+ document.getElementById('mobile-menu-button').addEventListener('click', function() {
734
+ const menu = document.getElementById('mobile-menu');
735
+ menu.classList.toggle('hidden');
736
+ });
737
+
738
+ // Add destination modal
739
+ const addDestinationButtons = document.querySelectorAll('[data-target="addDestinationModal"]');
740
+ const addDestinationModal = document.getElementById('addDestinationModal');
741
+ const cancelAddDestination = document.getElementById('cancel-add-destination');
742
+
743
+ // Show modal
744
+ addDestinationButtons.forEach(button => {
745
+ button.addEventListener('click', function() {
746
+ addDestinationModal.classList.remove('hidden');
747
+ });
748
+ });
749
+
750
+ // Hide modal
751
+ cancelAddDestination.addEventListener('click', function() {
752
+ addDestinationModal.classList.add('hidden');
753
+ });
754
+
755
+ // Close modal when clicking outside
756
+ window.addEventListener('click', function(event) {
757
+ if (event.target === addDestinationModal) {
758
+ addDestinationModal.classList.add('hidden');
759
+ }
760
+ });
761
+
762
+ // Favorite button functionality
763
+ const favoriteButtons = document.querySelectorAll('.fa-heart');
764
+ favoriteButtons.forEach(button => {
765
+ button.addEventListener('click', function() {
766
+ if (this.classList.contains('far')) {
767
+ this.classList.remove('far');
768
+ this.classList.add('fas', 'text-red-500');
769
+ } else {
770
+ this.classList.remove('fas', 'text-red-500');
771
+ this.classList.add('far');
772
+ }
773
+ });
774
+ });
775
+
776
+ // Simple destination search functionality
777
+ const searchInput = document.querySelector('input[placeholder="Where to?"]');
778
+ const destinationCards = document.querySelectorAll('.destination-card');
779
+
780
+ searchInput.addEventListener('input', function() {
781
+ const searchTerm = this.value.toLowerCase();
782
+
783
+ destinationCards.forEach(card => {
784
+ const title = card.querySelector('h3').textContent.toLowerCase();
785
+ const description = card.querySelector('p').textContent.toLowerCase();
786
+
787
+ if (title.includes(searchTerm) || description.includes(searchTerm)) {
788
+ card.style.display = 'block';
789
+ } else {
790
+ card.style.display = 'none';
791
+ }
792
+ });
793
+ });
794
+
795
+ // Filter buttons functionality
796
+ const filterButtons = document.querySelectorAll('.bg-blue-100, .bg-green-100, .bg-purple-100, .bg-yellow-100, .bg-red-100');
797
+ filterButtons.forEach(button => {
798
+ button.addEventListener('click', function() {
799
+ // Remove active class from all buttons
800
+ filterButtons.forEach(btn => {
801
+ btn.classList.remove('bg-blue-200', 'bg-green-200', 'bg-purple-200', 'bg-yellow-200', 'bg-red-200');
802
+ });
803
+
804
+ // Add active class to clicked button
805
+ const colorClass = Array.from(this.classList).find(cls => cls.startsWith('bg-') && cls.endsWith('-100'));
806
+ if (colorClass) {
807
+ const activeColorClass = colorClass.replace('-100', '-200');
808
+ this.classList.add(activeColorClass);
809
+ }
810
+
811
+ // Filter destinations (simplified example)
812
+ const filter = this.textContent.trim();
813
+ destinationCards.forEach(card => {
814
+ // In a real app, you would filter based on actual data attributes
815
+ card.style.display = 'block';
816
+ });
817
+ });
818
+ });
819
+ </script>
820
+ <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=pramai/wanderlust" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
821
+ </html>