Hugging Face's logo

Spaces:
Faustrix
/
tamarindo
Running

App Files Community
Faustrix commited on
Commit
118ccb2
·
verified ·
1 Parent(s): 4c444ba

this has to be a video - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +461 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Tamarindo
3
- emoji: 😻
4
- colorFrom: indigo
5
- colorTo: green
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: tamarindo
3
+ emoji: 🐳
4
+ colorFrom: green
5
+ colorTo: purple
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,461 @@
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>Tamarindo Beach | Guanacaste, Costa Rica</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <style>
10
+ :root {
11
+ --sand: #F0E6D2;
12
+ --teal: #1BA8B1;
13
+ --jungle: #2C5E4F;
14
+ --sunset: #F47D4A;
15
+ --wave: #4A90E2;
16
+ }
17
+
18
+ .hero {
19
+ background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url('https://images.unsplash.com/photo-1566438480900-0609be27a4be?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1792&q=80');
20
+ background-size: cover;
21
+ background-position: center;
22
+ height: 90vh;
23
+ clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);
24
+ }
25
+
26
+ .gallery-item {
27
+ transition: transform 0.3s ease;
28
+ }
29
+
30
+ .gallery-item:hover {
31
+ transform: scale(1.03);
32
+ }
33
+
34
+ .map-container {
35
+ overflow: hidden;
36
+ padding-bottom: 56.25%;
37
+ position: relative;
38
+ height: 0;
39
+ }
40
+
41
+ .map-container iframe {
42
+ left: 0;
43
+ top: 0;
44
+ height: 100%;
45
+ width: 100%;
46
+ position: absolute;
47
+ }
48
+
49
+ .nav-link {
50
+ position: relative;
51
+ }
52
+
53
+ .nav-link::after {
54
+ content: '';
55
+ position: absolute;
56
+ width: 0;
57
+ height: 2px;
58
+ bottom: -2px;
59
+ left: 0;
60
+ background-color: #f59e0b;
61
+ transition: width 0.3s ease;
62
+ }
63
+
64
+ .nav-link:hover::after {
65
+ width: 100%;
66
+ }
67
+
68
+ .active::after {
69
+ width: 100%;
70
+ }
71
+
72
+ @keyframes fadeIn {
73
+ from { opacity: 0; transform: translateY(20px); }
74
+ to { opacity: 1; transform: translateY(0); }
75
+ }
76
+
77
+ .animate-fade-in {
78
+ animation: fadeIn 1s ease-out forwards;
79
+ }
80
+
81
+ .delay-100 {
82
+ animation-delay: 0.1s;
83
+ }
84
+
85
+ .delay-200 {
86
+ animation-delay: 0.2s;
87
+ }
88
+ </style>
89
+ </head>
90
+ <body class="font-sans bg-gray-50">
91
+ <!-- Header -->
92
+ <header class="bg-white/90 backdrop-blur-md sticky top-0 z-50 shadow-lg">
93
+ <div class="container mx-auto px-4 py-3 flex justify-between items-center">
94
+ <div class="flex items-center">
95
+ <img src="https://cdn-icons-png.flaticon.com/512/8067/8067779.png" alt="Tamarindo Logo" class="h-12 mr-3">
96
+ <h1 class="text-2xl font-bold bg-gradient-to-r from-amber-400 to-teal-300 bg-clip-text text-transparent">Tamarindo Beach</h1>
97
+ </div>
98
+ <nav class="hidden md:flex space-x-8">
99
+ <a href="#home" class="nav-link text-gray-700 hover:text-amber-500 active">Home</a>
100
+ <a href="#about" class="nav-link text-gray-700 hover:text-amber-500">About</a>
101
+ <a href="#activities" class="nav-link text-gray-700 hover:text-amber-500">Activities</a>
102
+ <a href="#gallery" class="nav-link text-gray-700 hover:text-amber-500">Gallery</a>
103
+ <a href="#contact" class="nav-link text-gray-700 hover:text-amber-500">Contact</a>
104
+ </nav>
105
+ <button class="md:hidden text-gray-700" id="menu-toggle">
106
+ <i class="fas fa-bars text-2xl"></i>
107
+ </button>
108
+ </div>
109
+ <!-- Mobile Menu -->
110
+ <div class="md:hidden hidden bg-white py-2 px-4 shadow-md" id="mobile-menu">
111
+ <a href="#home" class="block py-2 text-gray-700 hover:text-amber-500">Home</a>
112
+ <a href="#about" class="block py-2 text-gray-700 hover:text-amber-500">About</a>
113
+ <a href="#activities" class="block py-2 text-gray-700 hover:text-amber-500">Activities</a>
114
+ <a href="#gallery" class="block py-2 text-gray-700 hover:text-amber-500">Gallery</a>
115
+ <a href="#contact" class="block py-2 text-gray-700 hover:text-amber-500">Contact</a>
116
+ </div>
117
+ </header>
118
+
119
+ <!-- Hero Section with Video Background -->
120
+ <section id="home" class="relative h-screen overflow-hidden">
121
+ <div class="absolute inset-0">
122
+ <video autoplay loop muted playsinline class="w-full h-full object-cover">
123
+ <source src="https://assets.mixkit.co/videos/preview/mixkit-sunset-over-the-beach-in-tamarindo-1080-large.mp4" type="video/mp4">
124
+ Your browser does not support the video tag.
125
+ </video>
126
+ <div class="absolute inset-0 bg-black/30"></div>
127
+ </div>
128
+ <div class="relative z-10 flex items-center justify-center h-full text-center px-4">
129
+ <div class="max-w-4xl">
130
+ <h1 class="text-5xl md:text-7xl font-bold mb-6 text-shadow-lg animate-fade-in">Welcome to <span class="text-amber-300">Tamarindo</span></h1>
131
+ <p class="text-2xl md:text-3xl mb-10 font-light text-white animate-fade-in delay-100">Where golden sands meet Pacific waves</p>
132
+ <a href="#about" class="bg-gradient-to-r from-amber-400 to-amber-500 hover:from-amber-500 hover:to-amber-600 text-white font-bold py-4 px-8 rounded-full transition-all duration-300 inline-block transform hover:scale-105 shadow-lg hover:shadow-xl animate-fade-in delay-200">
133
+ Discover Paradise <i class="fas fa-arrow-down ml-2 animate-bounce"></i>
134
+ </a>
135
+ </div>
136
+ </div>
137
+ <div class="absolute bottom-0 left-0 right-0 h-16 bg-gradient-to-t from-white to-transparent"></div>
138
+ </section>
139
+
140
+ <!-- About Section -->
141
+ <section id="about" class="py-16 bg-white">
142
+ <div class="container mx-auto px-4">
143
+ <h2 class="text-3xl font-bold text-center text-gray-800 mb-12">About Tamarindo</h2>
144
+ <div class="flex flex-col md:flex-row items-center">
145
+ <div class="md:w-1/2 mb-8 md:mb-0 md:pr-8">
146
+ <img src="https://images.unsplash.com/photo-1507525428034-b723cf961d3e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2073&q=80"
147
+ alt="Tamarindo Beach Sunset"
148
+ class="rounded-2xl shadow-xl w-full hover:shadow-2xl transition-all duration-300">
149
+ </div>
150
+ <div class="md:w-1/2">
151
+ <p class="text-gray-700 mb-4">
152
+ Tamarindo is a vibrant beach town located on the Pacific coast of Guanacaste, Costa Rica. Known for its stunning golden sand beaches, world-class surfing, and lush tropical surroundings, Tamarindo offers the perfect blend of adventure and relaxation.
153
+ </p>
154
+ <p class="text-gray-700 mb-4">
155
+ Originally a quiet fishing village, Tamarindo has grown into one of Costa Rica's most popular tourist destinations while maintaining its laid-back charm. The town boasts a diverse international community and offers excellent dining, shopping, and nightlife options.
156
+ </p>
157
+ <p class="text-gray-700">
158
+ The beach stretches for nearly 2 kilometers and is famous for its consistent waves, making it ideal for surfers of all levels. Beyond surfing, visitors can enjoy sport fishing, snorkeling, scuba diving, and breathtaking sunsets.
159
+ </p>
160
+ </div>
161
+ </div>
162
+ </div>
163
+ </section>
164
+
165
+ <!-- Activities Section -->
166
+ <section id="activities" class="py-20 bg-gradient-to-b from-white to-blue-50">
167
+ <div class="container mx-auto px-4">
168
+ <h2 class="text-4xl font-bold text-center text-gray-800 mb-4">Experience Tamarindo</h2>
169
+ <p class="text-xl text-center text-gray-600 mb-12 max-w-2xl mx-auto">Discover the best adventures in Costa Rica's Pacific paradise</p>
170
+
171
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
172
+ <!-- Activity 1 -->
173
+ <div class="relative group overflow-hidden rounded-2xl shadow-lg hover:shadow-xl transition-all duration-500 h-96">
174
+ <img src="https://images.unsplash.com/photo-1505228395891-9a51e7e86bf6?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80"
175
+ alt="Surfing in Tamarindo"
176
+ class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500">
177
+ <div class="absolute inset-0 bg-gradient-to-t from-black/70 via-black/30 to-transparent"></div>
178
+ <div class="absolute bottom-0 left-0 p-6 w-full">
179
+ <div class="flex items-center mb-3">
180
+ <div class="w-8 h-1 bg-amber-400 mr-3"></div>
181
+ <span class="text-amber-400 font-medium">Adventure</span>
182
+ </div>
183
+ <h3 class="text-2xl font-bold text-white mb-3">Surfing</h3>
184
+ <p class="text-gray-200 mb-4">Ride the famous waves of Tamarindo with expert instructors</p>
185
+ <a href="#" class="inline-flex items-center text-white font-medium group-hover:text-amber-300 transition-colors">
186
+ Book now <i class="fas fa-arrow-right ml-2 group-hover:translate-x-1 transition-transform"></i>
187
+ </a>
188
+ </div>
189
+ </div>
190
+
191
+ <!-- Activity 2 -->
192
+ <div class="bg-white rounded-lg overflow-hidden shadow-lg hover:shadow-xl transition duration-300 gallery-item">
193
+ <img src="https://images.unsplash.com/photo-1544551763-46a013bb70d5?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Sport Fishing" class="w-full h-48 object-cover">
194
+ <div class="p-6">
195
+ <h3 class="text-xl font-bold text-gray-800 mb-2">Sport Fishing</h3>
196
+ <p class="text-gray-700">
197
+ Known as one of the best sport fishing destinations in Costa Rica. Catch sailfish, marlin, dorado, and roosterfish in the rich Pacific waters.
198
+ </p>
199
+ </div>
200
+ </div>
201
+
202
+ <!-- Activity 3 -->
203
+ <div class="bg-white rounded-lg overflow-hidden shadow-lg hover:shadow-xl transition duration-300 gallery-item">
204
+ <img src="https://images.unsplash.com/photo-1566438480900-0609be27a4be?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1792&q=80" alt="Wildlife Tours" class="w-full h-48 object-cover">
205
+ <div class="p-6">
206
+ <h3 class="text-xl font-bold text-gray-800 mb-2">Wildlife Tours</h3>
207
+ <p class="text-gray-700">
208
+ Explore the nearby Las Baulas National Marine Park, home to leatherback turtles, or take a boat tour through the mangrove estuaries to see monkeys, crocodiles, and exotic birds.
209
+ </p>
210
+ </div>
211
+ </div>
212
+
213
+ <!-- Activity 4 -->
214
+ <div class="bg-white rounded-lg overflow-hidden shadow-lg hover:shadow-xl transition duration-300 gallery-item">
215
+ <img src="https://images.unsplash.com/photo-1566438480900-0609be27a4be?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1792&q=80" alt="Sunset Sailing" class="w-full h-48 object-cover">
216
+ <div class="p-6">
217
+ <h3 class="text-xl font-bold text-gray-800 mb-2">Sunset Sailing</h3>
218
+ <p class="text-gray-700">
219
+ Experience Tamarindo's legendary sunsets from the water on a catamaran cruise, complete with snorkeling, dolphin watching, and tropical drinks.
220
+ </p>
221
+ </div>
222
+ </div>
223
+
224
+ <!-- Activity 5 -->
225
+ <div class="bg-white rounded-lg overflow-hidden shadow-lg hover:shadow-xl transition duration-300 gallery-item">
226
+ <img src="https://images.unsplash.com/photo-1566438480900-0609be27a4be?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1792&q=80" alt="ATV Adventures" class="w-full h-48 object-cover">
227
+ <div class="p-6">
228
+ <h3 class="text-xl font-bold text-gray-800 mb-2">ATV Adventures</h3>
229
+ <p class="text-gray-700">
230
+ Explore the backcountry of Guanacaste on an ATV tour, visiting hidden beaches, waterfalls, and local villages off the beaten path.
231
+ </p>
232
+ </div>
233
+ </div>
234
+
235
+ <!-- Activity 6 -->
236
+ <div class="bg-white rounded-lg overflow-hidden shadow-lg hover:shadow-xl transition duration-300 gallery-item">
237
+ <img src="https://images.unsplash.com/photo-1566438480900-0609be27a4be?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1792&q=80" alt="Yoga & Wellness" class="w-full h-48 object-cover">
238
+ <div class="p-6">
239
+ <h3 class="text-xl font-bold text-gray-800 mb-2">Yoga & Wellness</h3>
240
+ <p class="text-gray-700">
241
+ Rejuvenate with beachfront yoga classes, spa treatments, and wellness retreats that take advantage of Tamarindo's natural beauty and peaceful atmosphere.
242
+ </p>
243
+ </div>
244
+ </div>
245
+ </div>
246
+ </div>
247
+ </section>
248
+
249
+ <!-- Gallery Section -->
250
+ <section id="gallery" class="py-16 bg-white">
251
+ <div class="container mx-auto px-4">
252
+ <h2 class="text-3xl font-bold text-center text-gray-800 mb-12">Gallery</h2>
253
+ <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
254
+ <div class="gallery-item relative group overflow-hidden rounded-xl">
255
+ <img src="https://images.unsplash.com/photo-1564501049412-61c2a3083791?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1932&q=80"
256
+ alt="Tamarindo Beach"
257
+ class="w-full h-48 object-cover rounded-xl group-hover:scale-110 transition-transform duration-500">
258
+ <div class="absolute inset-0 bg-black/20 group-hover:bg-black/40 transition-colors duration-300 flex items-center justify-center opacity-0 group-hover:opacity-100">
259
+ <span class="text-white font-medium">View More</span>
260
+ </div>
261
+ </div>
262
+ <div class="gallery-item">
263
+ <img src="https://images.unsplash.com/photo-1566438480900-0609be27a4be?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1792&q=80" alt="Tamarindo Sunset" class="w-full h-48 object-cover rounded-lg">
264
+ </div>
265
+ <div class="gallery-item">
266
+ <img src="https://images.unsplash.com/photo-1566438480900-0609be27a4be?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1792&q=80" alt="Surfing" class="w-full h-48 object-cover rounded-lg">
267
+ </div>
268
+ <div class="gallery-item">
269
+ <img src="https://images.unsplash.com/photo-1566438480900-0609be27a4be?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1792&q=80" alt="Wildlife" class="w-full h-48 object-cover rounded-lg">
270
+ </div>
271
+ <div class="gallery-item">
272
+ <img src="https://images.unsplash.com/photo-1566438480900-0609be27a4be?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1792&q=80" alt="Town" class="w-full h-48 object-cover rounded-lg">
273
+ </div>
274
+ <div class="gallery-item">
275
+ <img src="https://images.unsplash.com/photo-1566438480900-0609be27a4be?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1792&q=80" alt="Restaurants" class="w-full h-48 object-cover rounded-lg">
276
+ </div>
277
+ <div class="gallery-item">
278
+ <img src="https://images.unsplash.com/photo-1566438480900-0609be27a4be?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1792&q=80" alt="Nature" class="w-full h-48 object-cover rounded-lg">
279
+ </div>
280
+ <div class="gallery-item">
281
+ <img src="https://images.unsplash.com/photo-1566438480900-0609be27a4be?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1792&q=80" alt="Activities" class="w-full h-48 object-cover rounded-lg">
282
+ </div>
283
+ </div>
284
+ </div>
285
+ </section>
286
+
287
+ <!-- Map Section -->
288
+ <section class="py-16 bg-gray-100">
289
+ <div class="container mx-auto px-4">
290
+ <h2 class="text-3xl font-bold text-center text-gray-800 mb-12">Location</h2>
291
+ <div class="map-container rounded-lg shadow-xl">
292
+ <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3929.96373069395!2d-85.8415499241759!3d10.29873408987635!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x8f9e3a8b9d8e8e9d%3A0x8f8e8e8e8e8e8e8e!2sTamarindo%20Beach%2C%20Guanacaste%2C%20Costa%20Rica!5e0!3m2!1sen!2sus!4v1620000000000!5m2!1sen!2sus" allowfullscreen="" loading="lazy"></iframe>
293
+ </div>
294
+ </div>
295
+ </section>
296
+
297
+ <!-- Contact Section -->
298
+ <section id="contact" class="py-16 bg-white">
299
+ <div class="container mx-auto px-4">
300
+ <h2 class="text-3xl font-bold text-center text-gray-800 mb-12">Contact Us</h2>
301
+ <div class="flex flex-col md:flex-row">
302
+ <div class="md:w-1/2 mb-8 md:mb-0 md:pr-8">
303
+ <h3 class="text-xl font-bold text-gray-800 mb-4">Get in Touch</h3>
304
+ <p class="text-gray-700 mb-6">
305
+ Have questions about visiting Tamarindo? Want recommendations for activities or accommodations? Contact us and we'll be happy to help!
306
+ </p>
307
+ <div class="space-y-4">
308
+ <div class="flex items-center">
309
+ <i class="fas fa-map-marker-alt text-amber-500 mr-4 text-xl"></i>
310
+ <p class="text-gray-700">Tamarindo Beach, Guanacaste, Costa Rica</p>
311
+ </div>
312
+ <div class="flex items-center">
313
+ <i class="fas fa-phone text-amber-500 mr-4 text-xl"></i>
314
+ <p class="text-gray-700">+506 2653 0078</p>
315
+ </div>
316
+ <div class="flex items-center">
317
+ <i class="fas fa-envelope text-amber-500 mr-4 text-xl"></i>
318
+ <p class="text-gray-700">[email protected]</p>
319
+ </div>
320
+ </div>
321
+ <div class="mt-8">
322
+ <h4 class="text-lg font-bold text-gray-800 mb-4">Follow Us</h4>
323
+ <div class="flex space-x-4">
324
+ <a href="#" class="text-gray-700 hover:text-amber-500 text-2xl"><i class="fab fa-facebook"></i></a>
325
+ <a href="#" class="text-gray-700 hover:text-amber-500 text-2xl"><i class="fab fa-instagram"></i></a>
326
+ <a href="#" class="text-gray-700 hover:text-amber-500 text-2xl"><i class="fab fa-twitter"></i></a>
327
+ <a href="#" class="text-gray-700 hover:text-amber-500 text-2xl"><i class="fab fa-tripadvisor"></i></a>
328
+ </div>
329
+ </div>
330
+ </div>
331
+ <div class="md:w-1/2">
332
+ <form class="bg-white/90 backdrop-blur-sm p-8 rounded-xl shadow-xl border border-white/20">
333
+ <div class="mb-4">
334
+ <label for="name" class="block text-gray-700 font-bold mb-2">Name</label>
335
+ <input type="text" id="name" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-amber-500">
336
+ </div>
337
+ <div class="mb-4">
338
+ <label for="email" class="block text-gray-700 font-bold mb-2">Email</label>
339
+ <input type="email" id="email" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-amber-500">
340
+ </div>
341
+ <div class="mb-4">
342
+ <label for="subject" class="block text-gray-700 font-bold mb-2">Subject</label>
343
+ <input type="text" id="subject" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-amber-500">
344
+ </div>
345
+ <div class="mb-4">
346
+ <label for="message" class="block text-gray-700 font-bold mb-2">Message</label>
347
+ <textarea id="message" rows="4" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-amber-500"></textarea>
348
+ </div>
349
+ <button type="submit" class="bg-amber-500 hover:bg-amber-600 text-white font-bold py-2 px-6 rounded-lg transition duration-300 w-full">
350
+ Send Message
351
+ </button>
352
+ </form>
353
+ </div>
354
+ </div>
355
+ </div>
356
+ </section>
357
+
358
+ <!-- Footer -->
359
+ <footer class="bg-gradient-to-b from-jungle to-gray-900 text-white py-12">
360
+ <div class="container mx-auto px-4">
361
+ <div class="flex flex-col md:flex-row justify-between">
362
+ <div class="mb-6 md:mb-0">
363
+ <div class="flex items-center mb-4">
364
+ <img src="https://cdn-icons-png.flaticon.com/512/3212/3212567.png" alt="Tamarindo Logo" class="h-8 mr-2">
365
+ <h3 class="text-xl font-bold">Tamarindo Beach</h3>
366
+ </div>
367
+ <p class="text-gray-400">
368
+ The premier destination for beach lovers, surfers, and nature enthusiasts in Guanacaste, Costa Rica.
369
+ </p>
370
+ </div>
371
+ <div class="grid grid-cols-2 md:grid-cols-3 gap-8">
372
+ <div>
373
+ <h4 class="text-lg font-bold mb-4">Quick Links</h4>
374
+ <ul class="space-y-2">
375
+ <li><a href="#home" class="text-gray-400 hover:text-white transition duration-300">Home</a></li>
376
+ <li><a href="#about" class="text-gray-400 hover:text-white transition duration-300">About</a></li>
377
+ <li><a href="#activities" class="text-gray-400 hover:text-white transition duration-300">Activities</a></li>
378
+ <li><a href="#gallery" class="text-gray-400 hover:text-white transition duration-300">Gallery</a></li>
379
+ <li><a href="#contact" class="text-gray-400 hover:text-white transition duration-300">Contact</a></li>
380
+ </ul>
381
+ </div>
382
+ <div>
383
+ <h4 class="text-lg font-bold mb-4">Activities</h4>
384
+ <ul class="space-y-2">
385
+ <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Surfing</a></li>
386
+ <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Fishing</a></li>
387
+ <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Tours</a></li>
388
+ <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Yoga</a></li>
389
+ <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">ATV Tours</a></li>
390
+ </ul>
391
+ </div>
392
+ <div>
393
+ <h4 class="text-lg font-bold mb-4">Information</h4>
394
+ <ul class="space-y-2">
395
+ <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Getting Here</a></li>
396
+ <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Weather</a></li>
397
+ <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Tides</a></li>
398
+ <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Local Events</a></li>
399
+ <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">FAQ</a></li>
400
+ </ul>
401
+ </div>
402
+ </div>
403
+ </div>
404
+ <div class="border-t border-gray-700 mt-8 pt-8 text-center text-gray-400">
405
+ <p>&copy; 2023 Tamarindo Beach, Guanacaste. All rights reserved.</p>
406
+ </div>
407
+ </div>
408
+ </footer>
409
+
410
+ <script>
411
+ // Mobile menu toggle
412
+ document.getElementById('menu-toggle').addEventListener('click', function() {
413
+ const menu = document.getElementById('mobile-menu');
414
+ menu.classList.toggle('hidden');
415
+ });
416
+
417
+ // Smooth scrolling for navigation links
418
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
419
+ anchor.addEventListener('click', function (e) {
420
+ e.preventDefault();
421
+
422
+ document.querySelector(this.getAttribute('href')).scrollIntoView({
423
+ behavior: 'smooth'
424
+ });
425
+
426
+ // Update active state
427
+ document.querySelectorAll('.nav-link').forEach(link => {
428
+ link.classList.remove('active');
429
+ });
430
+ this.classList.add('active');
431
+
432
+ // Hide mobile menu if open
433
+ const mobileMenu = document.getElementById('mobile-menu');
434
+ if (!mobileMenu.classList.contains('hidden')) {
435
+ mobileMenu.classList.add('hidden');
436
+ }
437
+ });
438
+ });
439
+
440
+ // Update active nav link on scroll
441
+ window.addEventListener('scroll', function() {
442
+ const scrollPosition = window.scrollY;
443
+
444
+ document.querySelectorAll('section').forEach(section => {
445
+ const sectionTop = section.offsetTop - 100;
446
+ const sectionHeight = section.offsetHeight;
447
+ const sectionId = section.getAttribute('id');
448
+
449
+ if (scrollPosition >= sectionTop && scrollPosition < sectionTop + sectionHeight) {
450
+ document.querySelectorAll('.nav-link').forEach(link => {
451
+ link.classList.remove('active');
452
+ if (link.getAttribute('href') === `#${sectionId}`) {
453
+ link.classList.add('active');
454
+ }
455
+ });
456
+ }
457
+ });
458
+ });
459
+ </script>
460
+ <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=Faustrix/tamarindo" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
461
+ </html>