Hugging Face's logo

Spaces:
Yalexis
/
airbnb-rental
Running

App Files Community
Yalexis commited on
Commit
9b44b7b
·
verified ·
1 Parent(s): f204eae

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +527 -19
  3. prompts.txt +1 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Airbnb Rental
3
- emoji: 📊
4
- colorFrom: indigo
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: airbnb-rental
3
+ emoji: 🐳
4
+ colorFrom: pink
5
+ colorTo: gray
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,527 @@
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>Casa Loba - Luxury Vacation Rental</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
+ @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700&family=Poppins:wght@300;400;500;600&display=swap');
11
+
12
+ body {
13
+ font-family: 'Poppins', sans-serif;
14
+ }
15
+
16
+ .heading-font {
17
+ font-family: 'Playfair Display', serif;
18
+ }
19
+
20
+ .hero-image {
21
+ background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url('https://images.unsplash.com/photo-1582719471385-c1c7b389a42e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80');
22
+ background-size: cover;
23
+ background-position: center;
24
+ height: 80vh;
25
+ }
26
+
27
+ .amenity-icon {
28
+ transition: all 0.3s ease;
29
+ }
30
+
31
+ .amenity-card:hover .amenity-icon {
32
+ transform: scale(1.1);
33
+ color: #d4a373;
34
+ }
35
+
36
+ .datepicker-input {
37
+ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='h-5 w-5' viewBox='0 0 20 20' fill='currentColor'%3E%3Cpath fill-rule='evenodd' d='M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z' clip-rule='evenodd' /%3E%3C/svg%3E");
38
+ background-repeat: no-repeat;
39
+ background-position: right 0.5rem center;
40
+ background-size: 1.5em;
41
+ }
42
+
43
+ .gallery-image {
44
+ transition: transform 0.3s ease;
45
+ }
46
+
47
+ .gallery-image:hover {
48
+ transform: scale(1.03);
49
+ }
50
+
51
+ .testimonial-card {
52
+ transition: all 0.3s ease;
53
+ }
54
+
55
+ .testimonial-card:hover {
56
+ transform: translateY(-5px);
57
+ box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
58
+ }
59
+ </style>
60
+ </head>
61
+ <body class="bg-gray-50">
62
+ <!-- Navigation -->
63
+ <nav class="bg-white shadow-md sticky top-0 z-50">
64
+ <div class="container mx-auto px-6 py-4">
65
+ <div class="flex justify-between items-center">
66
+ <div class="flex items-center">
67
+ <a href="#" class="text-2xl font-bold text-gray-800 heading-font">Casa Loba</a>
68
+ </div>
69
+ <div class="hidden md:flex items-center space-x-8">
70
+ <a href="#home" class="text-gray-800 hover:text-amber-600 transition">Home</a>
71
+ <a href="#about" class="text-gray-800 hover:text-amber-600 transition">About</a>
72
+ <a href="#gallery" class="text-gray-800 hover:text-amber-600 transition">Gallery</a>
73
+ <a href="#amenities" class="text-gray-800 hover:text-amber-600 transition">Amenities</a>
74
+ <a href="#reviews" class="text-gray-800 hover:text-amber-600 transition">Reviews</a>
75
+ <a href="#contact" class="text-gray-800 hover:text-amber-600 transition">Contact</a>
76
+ </div>
77
+ <div class="md:hidden">
78
+ <button class="text-gray-800 focus:outline-none">
79
+ <i class="fas fa-bars text-2xl"></i>
80
+ </button>
81
+ </div>
82
+ </div>
83
+ </div>
84
+ </nav>
85
+
86
+ <!-- Hero Section -->
87
+ <section id="home" class="hero-image flex items-center justify-center text-white">
88
+ <div class="container mx-auto px-6 text-center">
89
+ <h1 class="text-4xl md:text-6xl font-bold mb-6 heading-font">Casa Loba</h1>
90
+ <p class="text-xl md:text-2xl mb-8 max-w-2xl mx-auto">Luxury vacation rental in the heart of nature</p>
91
+ <a href="#booking" class="bg-amber-600 hover:bg-amber-700 text-white font-bold py-3 px-8 rounded-full transition duration-300 inline-block">Book Now</a>
92
+ </div>
93
+ </section>
94
+
95
+ <!-- About Section -->
96
+ <section id="about" class="py-20 bg-white">
97
+ <div class="container mx-auto px-6">
98
+ <div class="flex flex-col md:flex-row items-center">
99
+ <div class="md:w-1/2 mb-10 md:mb-0 md:pr-10">
100
+ <h2 class="text-3xl md:text-4xl font-bold mb-6 heading-font">About Casa Loba</h2>
101
+ <p class="text-gray-700 mb-4">Nestled in a serene landscape, Casa Loba offers a perfect blend of modern luxury and rustic charm. Our property is designed to provide an unforgettable experience for those seeking tranquility and comfort.</p>
102
+ <p class="text-gray-700 mb-6">With breathtaking views, premium amenities, and personalized service, we ensure your stay is nothing short of extraordinary.</p>
103
+ <div class="flex flex-wrap gap-4">
104
+ <div class="flex items-center">
105
+ <i class="fas fa-home text-amber-600 mr-2"></i>
106
+ <span>3 Bedrooms</span>
107
+ </div>
108
+ <div class="flex items-center">
109
+ <i class="fas fa-bath text-amber-600 mr-2"></i>
110
+ <span>2.5 Bathrooms</span>
111
+ </div>
112
+ <div class="flex items-center">
113
+ <i class="fas fa-users text-amber-600 mr-2"></i>
114
+ <span>Sleeps 6</span>
115
+ </div>
116
+ </div>
117
+ </div>
118
+ <div class="md:w-1/2">
119
+ <div class="relative rounded-xl overflow-hidden shadow-xl">
120
+ <img src="https://images.unsplash.com/photo-1600585154340-be6161a56a0c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Casa Loba exterior" class="w-full h-auto">
121
+ <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black to-transparent p-6">
122
+ <h3 class="text-white text-xl font-semibold">Experience Luxury in Nature</h3>
123
+ </div>
124
+ </div>
125
+ </div>
126
+ </div>
127
+ </div>
128
+ </section>
129
+
130
+ <!-- Booking Section -->
131
+ <section id="booking" class="py-16 bg-gray-100">
132
+ <div class="container mx-auto px-6">
133
+ <div class="max-w-4xl mx-auto bg-white rounded-xl shadow-lg overflow-hidden">
134
+ <div class="md:flex">
135
+ <div class="md:w-1/2 p-8">
136
+ <h2 class="text-3xl font-bold mb-6 heading-font">Book Your Stay</h2>
137
+ <p class="text-gray-700 mb-6">Check availability and reserve your dates at Casa Loba. We offer flexible booking options to suit your travel plans.</p>
138
+ <div class="flex items-center mb-6">
139
+ <i class="fas fa-star text-amber-400 mr-2"></i>
140
+ <span class="font-semibold">4.9 (128 reviews)</span>
141
+ </div>
142
+ <div class="flex items-center mb-6">
143
+ <i class="fas fa-map-marker-alt text-amber-600 mr-2"></i>
144
+ <span>Santa Teresa, Costa Rica</span>
145
+ </div>
146
+ <div class="flex items-center">
147
+ <i class="fas fa-dollar-sign text-amber-600 mr-2"></i>
148
+ <span class="font-semibold">From $250/night</span>
149
+ </div>
150
+ </div>
151
+ <div class="md:w-1/2 bg-amber-50 p-8">
152
+ <form class="space-y-4">
153
+ <div>
154
+ <label class="block text-gray-700 mb-2">Check-in</label>
155
+ <input type="date" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-amber-500 datepicker-input">
156
+ </div>
157
+ <div>
158
+ <label class="block text-gray-700 mb-2">Check-out</label>
159
+ <input type="date" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-amber-500 datepicker-input">
160
+ </div>
161
+ <div>
162
+ <label class="block text-gray-700 mb-2">Guests</label>
163
+ <select class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-amber-500">
164
+ <option>1 guest</option>
165
+ <option>2 guests</option>
166
+ <option>3 guests</option>
167
+ <option>4 guests</option>
168
+ <option>5 guests</option>
169
+ <option>6 guests</option>
170
+ </select>
171
+ </div>
172
+ <button type="submit" class="w-full bg-amber-600 hover:bg-amber-700 text-white font-bold py-3 px-4 rounded-lg transition duration-300">Check Availability</button>
173
+ </form>
174
+ <div class="mt-6 text-center text-sm text-gray-600">
175
+ <p>Need help? <a href="#contact" class="text-amber-600 hover:underline">Contact us</a></p>
176
+ </div>
177
+ </div>
178
+ </div>
179
+ </div>
180
+ </div>
181
+ </section>
182
+
183
+ <!-- Gallery Section -->
184
+ <section id="gallery" class="py-20 bg-white">
185
+ <div class="container mx-auto px-6">
186
+ <h2 class="text-3xl md:text-4xl font-bold mb-12 text-center heading-font">Gallery</h2>
187
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
188
+ <div class="rounded-xl overflow-hidden shadow-lg gallery-image">
189
+ <img src="https://images.unsplash.com/photo-1600566752355-35792bedcfea?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1374&q=80" alt="Living room" class="w-full h-64 object-cover">
190
+ </div>
191
+ <div class="rounded-xl overflow-hidden shadow-lg gallery-image">
192
+ <img src="https://images.unsplash.com/photo-1600585152220-90363fe7e115?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Kitchen" class="w-full h-64 object-cover">
193
+ </div>
194
+ <div class="rounded-xl overflow-hidden shadow-lg gallery-image">
195
+ <img src="https://images.unsplash.com/photo-1600121848594-d8644e57abab?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Bedroom" class="w-full h-64 object-cover">
196
+ </div>
197
+ <div class="rounded-xl overflow-hidden shadow-lg gallery-image">
198
+ <img src="https://images.unsplash.com/photo-1600566753190-17f0baa2a6c3?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Bathroom" class="w-full h-64 object-cover">
199
+ </div>
200
+ <div class="rounded-xl overflow-hidden shadow-lg gallery-image">
201
+ <img src="https://images.unsplash.com/photo-1600607688969-a5bfcd646154?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Dining area" class="w-full h-64 object-cover">
202
+ </div>
203
+ <div class="rounded-xl overflow-hidden shadow-lg gallery-image">
204
+ <img src="https://images.unsplash.com/photo-1600607687939-ce8a6c25118c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1453&q=80" alt="Outdoor area" class="w-full h-64 object-cover">
205
+ </div>
206
+ </div>
207
+ <div class="text-center mt-10">
208
+ <a href="#" class="inline-block px-6 py-3 border-2 border-amber-600 text-amber-600 font-medium rounded-full hover:bg-amber-600 hover:text-white transition duration-300">View Full Gallery</a>
209
+ </div>
210
+ </div>
211
+ </section>
212
+
213
+ <!-- Amenities Section -->
214
+ <section id="amenities" class="py-20 bg-gray-100">
215
+ <div class="container mx-auto px-6">
216
+ <h2 class="text-3xl md:text-4xl font-bold mb-12 text-center heading-font">Amenities</h2>
217
+ <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8">
218
+ <div class="bg-white p-6 rounded-xl shadow-md amenity-card">
219
+ <div class="text-4xl mb-4 text-amber-600 amenity-icon">
220
+ <i class="fas fa-wifi"></i>
221
+ </div>
222
+ <h3 class="text-xl font-semibold mb-2">High-Speed WiFi</h3>
223
+ <p class="text-gray-700">Stay connected with our ultra-fast fiber optic internet connection throughout the property.</p>
224
+ </div>
225
+ <div class="bg-white p-6 rounded-xl shadow-md amenity-card">
226
+ <div class="text-4xl mb-4 text-amber-600 amenity-icon">
227
+ <i class="fas fa-swimming-pool"></i>
228
+ </div>
229
+ <h3 class="text-xl font-semibold mb-2">Infinity Pool</h3>
230
+ <p class="text-gray-700">Enjoy breathtaking views while relaxing in our temperature-controlled infinity pool.</p>
231
+ </div>
232
+ <div class="bg-white p-6 rounded-xl shadow-md amenity-card">
233
+ <div class="text-4xl mb-4 text-amber-600 amenity-icon">
234
+ <i class="fas fa-utensils"></i>
235
+ </div>
236
+ <h3 class="text-xl font-semibold mb-2">Gourmet Kitchen</h3>
237
+ <p class="text-gray-700">Fully equipped with premium appliances and cookware for your culinary adventures.</p>
238
+ </div>
239
+ <div class="bg-white p-6 rounded-xl shadow-md amenity-card">
240
+ <div class="text-4xl mb-4 text-amber-600 amenity-icon">
241
+ <i class="fas fa-hot-tub"></i>
242
+ </div>
243
+ <h3 class="text-xl font-semibold mb-2">Hot Tub</h3>
244
+ <p class="text-gray-700">Private hot tub with stunning sunset views - perfect for relaxation after a day of exploring.</p>
245
+ </div>
246
+ <div class="bg-white p-6 rounded-xl shadow-md amenity-card">
247
+ <div class="text-4xl mb-4 text-amber-600 amenity-icon">
248
+ <i class="fas fa-parking"></i>
249
+ </div>
250
+ <h3 class="text-xl font-semibold mb-2">Secure Parking</h3>
251
+ <p class="text-gray-700">Covered parking space for two vehicles with 24/7 security monitoring.</p>
252
+ </div>
253
+ <div class="bg-white p-6 rounded-xl shadow-md amenity-card">
254
+ <div class="text-4xl mb-4 text-amber-600 amenity-icon">
255
+ <i class="fas fa-concierge-bell"></i>
256
+ </div>
257
+ <h3 class="text-xl font-semibold mb-2">Concierge Service</h3>
258
+ <p class="text-gray-700">Our local team can arrange tours, transportation, and special requests to enhance your stay.</p>
259
+ </div>
260
+ </div>
261
+ </div>
262
+ </section>
263
+
264
+ <!-- Reviews Section -->
265
+ <section id="reviews" class="py-20 bg-white">
266
+ <div class="container mx-auto px-6">
267
+ <h2 class="text-3xl md:text-4xl font-bold mb-12 text-center heading-font">Guest Reviews</h2>
268
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
269
+ <div class="bg-gray-50 p-6 rounded-xl shadow-md testimonial-card">
270
+ <div class="flex items-center mb-4">
271
+ <div class="flex items-center">
272
+ <i class="fas fa-star text-amber-400"></i>
273
+ <i class="fas fa-star text-amber-400"></i>
274
+ <i class="fas fa-star text-amber-400"></i>
275
+ <i class="fas fa-star text-amber-400"></i>
276
+ <i class="fas fa-star text-amber-400"></i>
277
+ </div>
278
+ </div>
279
+ <p class="text-gray-700 mb-4">"Casa Loba exceeded all our expectations. The views are breathtaking, the house is beautifully designed, and every detail has been thought of. We can't wait to return!"</p>
280
+ <div class="flex items-center">
281
+ <img src="https://randomuser.me/api/portraits/women/32.jpg" alt="Sarah J." class="w-10 h-10 rounded-full mr-3">
282
+ <div>
283
+ <h4 class="font-semibold">Sarah J.</h4>
284
+ <p class="text-sm text-gray-600">March 2023</p>
285
+ </div>
286
+ </div>
287
+ </div>
288
+ <div class="bg-gray-50 p-6 rounded-xl shadow-md testimonial-card">
289
+ <div class="flex items-center mb-4">
290
+ <div class="flex items-center">
291
+ <i class="fas fa-star text-amber-400"></i>
292
+ <i class="fas fa-star text-amber-400"></i>
293
+ <i class="fas fa-star text-amber-400"></i>
294
+ <i class="fas fa-star text-amber-400"></i>
295
+ <i class="fas fa-star text-amber-400"></i>
296
+ </div>
297
+ </div>
298
+ <p class="text-gray-700 mb-4">"The perfect getaway! The infinity pool was our favorite spot, and the kitchen had everything we needed. The hosts were incredibly responsive and helpful."</p>
299
+ <div class="flex items-center">
300
+ <img src="https://randomuser.me/api/portraits/men/45.jpg" alt="Michael T." class="w-10 h-10 rounded-full mr-3">
301
+ <div>
302
+ <h4 class="font-semibold">Michael T.</h4>
303
+ <p class="text-sm text-gray-600">January 2023</p>
304
+ </div>
305
+ </div>
306
+ </div>
307
+ <div class="bg-gray-50 p-6 rounded-xl shadow-md testimonial-card">
308
+ <div class="flex items-center mb-4">
309
+ <div class="flex items-center">
310
+ <i class="fas fa-star text-amber-400"></i>
311
+ <i class="fas fa-star text-amber-400"></i>
312
+ <i class="fas fa-star text-amber-400"></i>
313
+ <i class="fas fa-star text-amber-400"></i>
314
+ <i class="fas fa-star text-amber-400"></i>
315
+ </div>
316
+ </div>
317
+ <p class="text-gray-700 mb-4">"We've stayed at many vacation rentals, but Casa Loba stands out. The attention to detail, comfort, and stunning location made our family vacation unforgettable."</p>
318
+ <div class="flex items-center">
319
+ <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="Lisa M." class="w-10 h-10 rounded-full mr-3">
320
+ <div>
321
+ <h4 class="font-semibold">Lisa M.</h4>
322
+ <p class="text-sm text-gray-600">December 2022</p>
323
+ </div>
324
+ </div>
325
+ </div>
326
+ </div>
327
+ <div class="text-center mt-12">
328
+ <a href="#" class="inline-flex items-center px-6 py-3 border border-amber-600 text-amber-600 rounded-full hover:bg-amber-600 hover:text-white transition duration-300">
329
+ Read More Reviews
330
+ <i class="fas fa-arrow-right ml-2"></i>
331
+ </a>
332
+ </div>
333
+ </div>
334
+ </section>
335
+
336
+ <!-- Location Section -->
337
+ <section class="py-16 bg-gray-100">
338
+ <div class="container mx-auto px-6">
339
+ <div class="flex flex-col md:flex-row items-center">
340
+ <div class="md:w-1/2 mb-10 md:mb-0">
341
+ <h2 class="text-3xl md:text-4xl font-bold mb-6 heading-font">Our Location</h2>
342
+ <p class="text-gray-700 mb-6">Casa Loba is located in the picturesque region of Santa Teresa, Costa Rica, known for its stunning beaches, lush jungles, and vibrant local culture.</p>
343
+ <div class="space-y-4">
344
+ <div class="flex items-start">
345
+ <i class="fas fa-map-marker-alt text-amber-600 mt-1 mr-3"></i>
346
+ <div>
347
+ <h4 class="font-semibold">Address</h4>
348
+ <p class="text-gray-700">Playa Hermosa, Santa Teresa, Puntarenas, Costa Rica</p>
349
+ </div>
350
+ </div>
351
+ <div class="flex items-start">
352
+ <i class="fas fa-plane text-amber-600 mt-1 mr-3"></i>
353
+ <div>
354
+ <h4 class="font-semibold">Nearest Airport</h4>
355
+ <p class="text-gray-700">Tambor Airport (TMU) - 30 minutes drive</p>
356
+ </div>
357
+ </div>
358
+ <div class="flex items-start">
359
+ <i class="fas fa-umbrella-beach text-amber-600 mt-1 mr-3"></i>
360
+ <div>
361
+ <h4 class="font-semibold">Beach Access</h4>
362
+ <p class="text-gray-700">5-minute walk to Playa Hermosa beach</p>
363
+ </div>
364
+ </div>
365
+ </div>
366
+ </div>
367
+ <div class="md:w-1/2 md:pl-10">
368
+ <div class="rounded-xl overflow-hidden shadow-xl h-96">
369
+ <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3929.982715315905!2d-84.6417229246916!3d9.9318895733641!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x8fa024d9f8e3a9e5%3A0xec8b0a5e8e5a5a5e!2sPlaya%20Hermosa%2C%20Santa%20Teresa%2C%20Puntarenas%2C%20Costa%20Rica!5e0!3m2!1sen!2sus!4v1689876543210!5m2!1sen!2sus" width="100%" height="100%" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
370
+ </div>
371
+ </div>
372
+ </div>
373
+ </div>
374
+ </section>
375
+
376
+ <!-- Contact Section -->
377
+ <section id="contact" class="py-20 bg-white">
378
+ <div class="container mx-auto px-6">
379
+ <h2 class="text-3xl md:text-4xl font-bold mb-12 text-center heading-font">Contact Us</h2>
380
+ <div class="max-w-4xl mx-auto">
381
+ <div class="bg-gray-50 rounded-xl shadow-md p-8 md:p-12">
382
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
383
+ <div>
384
+ <h3 class="text-2xl font-semibold mb-6 heading-font">Get in Touch</h3>
385
+ <p class="text-gray-700 mb-6">Have questions about Casa Loba or ready to book your stay? Our team is here to help.</p>
386
+ <div class="space-y-4">
387
+ <div class="flex items-start">
388
+ <i class="fas fa-envelope text-amber-600 mt-1 mr-3"></i>
389
+ <div>
390
+ <h4 class="font-semibold">Email</h4>
391
+ <p class="text-gray-700">bookings@casaloba.com</p>
392
+ </div>
393
+ </div>
394
+ <div class="flex items-start">
395
+ <i class="fas fa-phone-alt text-amber-600 mt-1 mr-3"></i>
396
+ <div>
397
+ <h4 class="font-semibold">Phone</h4>
398
+ <p class="text-gray-700">+506 8888 8888</p>
399
+ </div>
400
+ </div>
401
+ <div class="flex items-start">
402
+ <i class="fas fa-clock text-amber-600 mt-1 mr-3"></i>
403
+ <div>
404
+ <h4 class="font-semibold">Availability</h4>
405
+ <p class="text-gray-700">24/7 for urgent matters</p>
406
+ </div>
407
+ </div>
408
+ </div>
409
+ </div>
410
+ <div>
411
+ <form class="space-y-4">
412
+ <div>
413
+ <label class="block text-gray-700 mb-2">Name</label>
414
+ <input type="text" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-amber-500">
415
+ </div>
416
+ <div>
417
+ <label class="block text-gray-700 mb-2">Email</label>
418
+ <input type="email" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-amber-500">
419
+ </div>
420
+ <div>
421
+ <label class="block text-gray-700 mb-2">Message</label>
422
+ <textarea rows="4" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-amber-500"></textarea>
423
+ </div>
424
+ <button type="submit" class="w-full bg-amber-600 hover:bg-amber-700 text-white font-bold py-3 px-4 rounded-lg transition duration-300">Send Message</button>
425
+ </form>
426
+ </div>
427
+ </div>
428
+ </div>
429
+ </div>
430
+ </div>
431
+ </section>
432
+
433
+ <!-- Newsletter Section -->
434
+ <section class="py-16 bg-amber-600 text-white">
435
+ <div class="container mx-auto px-6 text-center">
436
+ <h2 class="text-3xl md:text-4xl font-bold mb-6 heading-font">Stay Updated</h2>
437
+ <p class="text-xl mb-8 max-w-2xl mx-auto">Subscribe to our newsletter for special offers and updates about Casa Loba.</p>
438
+ <form class="max-w-md mx-auto flex">
439
+ <input type="email" placeholder="Your email address" class="flex-grow px-4 py-3 rounded-l-lg focus:outline-none text-gray-900">
440
+ <button type="submit" class="bg-amber-800 hover:bg-amber-900 px-6 py-3 rounded-r-lg font-semibold transition duration-300">Subscribe</button>
441
+ </form>
442
+ </div>
443
+ </section>
444
+
445
+ <!-- Footer -->
446
+ <footer class="bg-gray-900 text-white py-12">
447
+ <div class="container mx-auto px-6">
448
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
449
+ <div>
450
+ <h3 class="text-xl font-bold mb-4 heading-font">Casa Loba</h3>
451
+ <p class="text-gray-400">Luxury vacation rental in Santa Teresa, Costa Rica. Experience nature with modern comforts.</p>
452
+ </div>
453
+ <div>
454
+ <h4 class="font-bold mb-4">Quick Links</h4>
455
+ <ul class="space-y-2">
456
+ <li><a href="#home" class="text-gray-400 hover:text-white transition">Home</a></li>
457
+ <li><a href="#about" class="text-gray-400 hover:text-white transition">About</a></li>
458
+ <li><a href="#gallery" class="text-gray-400 hover:text-white transition">Gallery</a></li>
459
+ <li><a href="#amenities" class="text-gray-400 hover:text-white transition">Amenities</a></li>
460
+ <li><a href="#contact" class="text-gray-400 hover:text-white transition">Contact</a></li>
461
+ </ul>
462
+ </div>
463
+ <div>
464
+ <h4 class="font-bold mb-4">Legal</h4>
465
+ <ul class="space-y-2">
466
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Privacy Policy</a></li>
467
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Terms of Service</a></li>
468
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Cancellation Policy</a></li>
469
+ </ul>
470
+ </div>
471
+ <div>
472
+ <h4 class="font-bold mb-4">Connect With Us</h4>
473
+ <div class="flex space-x-4">
474
+ <a href="#" class="text-gray-400 hover:text-white text-xl transition"><i class="fab fa-facebook-f"></i></a>
475
+ <a href="#" class="text-gray-400 hover:text-white text-xl transition"><i class="fab fa-instagram"></i></a>
476
+ <a href="#" class="text-gray-400 hover:text-white text-xl transition"><i class="fab fa-airbnb"></i></a>
477
+ <a href="#" class="text-gray-400 hover:text-white text-xl transition"><i class="fab fa-tripadvisor"></i></a>
478
+ </div>
479
+ </div>
480
+ </div>
481
+ <div class="border-t border-gray-800 mt-10 pt-6 text-center text-gray-400">
482
+ <p>&copy; 2023 Casa Loba. All rights reserved.</p>
483
+ </div>
484
+ </div>
485
+ </footer>
486
+
487
+ <script>
488
+ // Simple datepicker enhancement
489
+ document.addEventListener('DOMContentLoaded', function() {
490
+ // Set minimum date to today for check-in
491
+ const today = new Date().toISOString().split('T')[0];
492
+ const checkinInputs = document.querySelectorAll('input[type="date"]');
493
+
494
+ checkinInputs.forEach(input => {
495
+ input.min = today;
496
+
497
+ // Add event listener to set checkout date after checkin
498
+ if(input.previousElementSibling && input.previousElementSibling.textContent.includes('Check-in')) {
499
+ input.addEventListener('change', function() {
500
+ const checkoutInput = this.nextElementSibling.nextElementSibling.nextElementSibling;
501
+ if(this.value) {
502
+ const nextDay = new Date(this.value);
503
+ nextDay.setDate(nextDay.getDate() + 1);
504
+ checkoutInput.min = nextDay.toISOString().split('T')[0];
505
+
506
+ // If checkout is before new min date, reset it
507
+ if(checkoutInput.value && new Date(checkoutInput.value) < nextDay) {
508
+ checkoutInput.value = '';
509
+ }
510
+ }
511
+ });
512
+ }
513
+ });
514
+
515
+ // Mobile menu toggle would go here
516
+ // This is just a placeholder for the functionality
517
+ const mobileMenuButton = document.querySelector('.md\\:hidden button');
518
+ if(mobileMenuButton) {
519
+ mobileMenuButton.addEventListener('click', function() {
520
+ // This would toggle a mobile menu
521
+ console.log('Mobile menu would open');
522
+ });
523
+ }
524
+ });
525
+ </script>
526
+ <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=Yalexis/airbnb-rental" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
527
+ </html>
prompts.txt ADDED
@@ -0,0 +1 @@
 
 
1
+ Make a revervation website for a airbnb called Casa Loba