Hugging Face's logo

Spaces:
chatkenneth
/
demo-3
Running

App Files Community
chatkenneth commited on
Commit
e4e5ab0
·
verified ·
1 Parent(s): d294b28

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +621 -19
  3. prompts.txt +1 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Demo 3
3
- emoji: 🌖
4
- colorFrom: yellow
5
- colorTo: gray
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: demo-3
3
+ emoji: 🐳
4
+ colorFrom: blue
5
+ colorTo: pink
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,621 @@
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>Azure Dives - Summer Beach Adventures</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=Poppins:wght@300;400;600;700&display=swap');
11
+
12
+ body {
13
+ font-family: 'Poppins', sans-serif;
14
+ background-color: #f0f9ff;
15
+ }
16
+
17
+ .hero-gradient {
18
+ background: linear-gradient(135deg, #06b6d4 0%, #3b82f6 50%, #1d4ed8 100%);
19
+ }
20
+
21
+ .wave-shape {
22
+ position: absolute;
23
+ bottom: 0;
24
+ left: 0;
25
+ width: 100%;
26
+ overflow: hidden;
27
+ line-height: 0;
28
+ }
29
+
30
+ .wave-shape svg {
31
+ position: relative;
32
+ display: block;
33
+ width: calc(100% + 1.3px);
34
+ height: 150px;
35
+ }
36
+
37
+ .wave-shape .shape-fill {
38
+ fill: #f0f9ff;
39
+ }
40
+
41
+ .dive-card:hover {
42
+ transform: translateY(-10px);
43
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
44
+ }
45
+
46
+ .parallax {
47
+ background-attachment: fixed;
48
+ background-position: center;
49
+ background-repeat: no-repeat;
50
+ background-size: cover;
51
+ }
52
+
53
+ .water-effect {
54
+ position: relative;
55
+ overflow: hidden;
56
+ }
57
+
58
+ .water-effect::after {
59
+ content: "";
60
+ position: absolute;
61
+ top: 0;
62
+ left: 0;
63
+ right: 0;
64
+ bottom: 0;
65
+ background: linear-gradient(180deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.3) 100%);
66
+ animation: waterShimmer 3s infinite linear;
67
+ }
68
+
69
+ @keyframes waterShimmer {
70
+ 0% { transform: translateY(-100%); }
71
+ 100% { transform: translateY(100%); }
72
+ }
73
+ </style>
74
+ </head>
75
+ <body>
76
+ <!-- Navigation -->
77
+ <nav class="bg-blue-900 text-white shadow-lg fixed w-full z-50">
78
+ <div class="container mx-auto px-6 py-3">
79
+ <div class="flex justify-between items-center">
80
+ <div class="flex items-center space-x-4">
81
+ <i class="fas fa-water text-3xl text-blue-300"></i>
82
+ <span class="font-bold text-2xl">Azure<span class="text-blue-300">Dives</span></span>
83
+ </div>
84
+ <div class="hidden md:flex items-center space-x-8">
85
+ <a href="#" class="hover:text-blue-300 transition">Home</a>
86
+ <a href="#dives" class="hover:text-blue-300 transition">Dive Spots</a>
87
+ <a href="#courses" class="hover:text-blue-300 transition">Courses</a>
88
+ <a href="#gallery" class="hover:text-blue-300 transition">Gallery</a>
89
+ <a href="#contact" class="hover:text-blue-300 transition">Contact</a>
90
+ </div>
91
+ <button class="md:hidden focus:outline-none">
92
+ <i class="fas fa-bars text-2xl"></i>
93
+ </button>
94
+ </div>
95
+ </div>
96
+ </nav>
97
+
98
+ <!-- Hero Section -->
99
+ <section class="hero-gradient text-white pt-32 pb-20 relative overflow-hidden">
100
+ <div class="container mx-auto px-6 flex flex-col md:flex-row items-center">
101
+ <div class="md:w-1/2 mb-12 md:mb-0">
102
+ <h1 class="text-4xl md:text-6xl font-bold mb-6">Dive Into <span class="text-blue-200">Summer</span> Adventures</h1>
103
+ <p class="text-xl mb-8">Explore the most beautiful underwater worlds with our certified instructors. Perfect for beginners and experienced divers alike.</p>
104
+ <div class="flex space-x-4">
105
+ <button class="bg-white text-blue-600 px-8 py-3 rounded-full font-bold hover:bg-blue-100 transition">Book Now</button>
106
+ <button class="border-2 border-white px-8 py-3 rounded-full font-bold hover:bg-white hover:text-blue-600 transition">Learn More</button>
107
+ </div>
108
+ </div>
109
+ <div class="md:w-1/2 relative">
110
+ <img src="https://images.unsplash.com/photo-1530549387789-4c1017266635?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Diver underwater" class="rounded-xl shadow-2xl transform rotate-3 border-8 border-white">
111
+ <div class="absolute -bottom-6 -right-6 bg-blue-500 p-4 rounded-xl shadow-lg">
112
+ <div class="text-center">
113
+ <p class="text-2xl font-bold">50+</p>
114
+ <p class="text-sm">Dive Locations</p>
115
+ </div>
116
+ </div>
117
+ </div>
118
+ </div>
119
+ <div class="wave-shape">
120
+ <svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none">
121
+ <path d="M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V0H0V27.35A600.21,600.21,0,0,0,321.39,56.44Z" class="shape-fill"></path>
122
+ </svg>
123
+ </div>
124
+ </section>
125
+
126
+ <!-- Features Section -->
127
+ <section class="py-20 bg-white">
128
+ <div class="container mx-auto px-6">
129
+ <h2 class="text-3xl font-bold text-center text-blue-900 mb-16">Why Choose <span class="text-blue-500">Azure Dives</span></h2>
130
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-12">
131
+ <div class="text-center px-6">
132
+ <div class="bg-blue-100 w-20 h-20 mx-auto rounded-full flex items-center justify-center mb-6">
133
+ <i class="fas fa-shield-alt text-blue-600 text-3xl"></i>
134
+ </div>
135
+ <h3 class="text-xl font-bold mb-3 text-blue-900">Safety First</h3>
136
+ <p class="text-gray-600">All our instructors are PADI certified with years of experience. Your safety is our top priority.</p>
137
+ </div>
138
+ <div class="text-center px-6">
139
+ <div class="bg-blue-100 w-20 h-20 mx-auto rounded-full flex items-center justify-center mb-6">
140
+ <i class="fas fa-map-marked-alt text-blue-600 text-3xl"></i>
141
+ </div>
142
+ <h3 class="text-xl font-bold mb-3 text-blue-900">Best Locations</h3>
143
+ <p class="text-gray-600">We've carefully selected the most breathtaking dive spots with vibrant marine life.</p>
144
+ </div>
145
+ <div class="text-center px-6">
146
+ <div class="bg-blue-100 w-20 h-20 mx-auto rounded-full flex items-center justify-center mb-6">
147
+ <i class="fas fa-sun text-blue-600 text-3xl"></i>
148
+ </div>
149
+ <h3 class="text-xl font-bold mb-3 text-blue-900">Summer Specials</h3>
150
+ <p class="text-gray-600">Enjoy our exclusive summer packages with discounts on group bookings and equipment rental.</p>
151
+ </div>
152
+ </div>
153
+ </div>
154
+ </section>
155
+
156
+ <!-- Dive Spots Section -->
157
+ <section id="dives" class="py-20 bg-blue-50">
158
+ <div class="container mx-auto px-6">
159
+ <h2 class="text-3xl font-bold text-center text-blue-900 mb-16">Featured <span class="text-blue-500">Dive Spots</span></h2>
160
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
161
+ <!-- Dive Spot 1 -->
162
+ <div class="bg-white rounded-xl overflow-hidden shadow-lg dive-card transition duration-300">
163
+ <div class="relative overflow-hidden h-64">
164
+ <img src="https://images.unsplash.com/photo-1560279966-06d6f6a3e1f3?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Coral Reef" class="w-full h-full object-cover">
165
+ <div class="absolute inset-0 bg-gradient-to-t from-blue-900 to-transparent opacity-70"></div>
166
+ <div class="absolute bottom-4 left-4 text-white">
167
+ <span class="bg-blue-500 text-xs px-2 py-1 rounded-full">Beginner</span>
168
+ <h3 class="text-xl font-bold mt-2">Coral Paradise</h3>
169
+ </div>
170
+ </div>
171
+ <div class="p-6">
172
+ <div class="flex justify-between items-center mb-4">
173
+ <div class="flex items-center text-yellow-400">
174
+ <i class="fas fa-star"></i>
175
+ <i class="fas fa-star"></i>
176
+ <i class="fas fa-star"></i>
177
+ <i class="fas fa-star"></i>
178
+ <i class="fas fa-star-half-alt"></i>
179
+ <span class="text-gray-600 ml-2">4.7</span>
180
+ </div>
181
+ <span class="text-blue-600 font-bold">$89/person</span>
182
+ </div>
183
+ <p class="text-gray-600 mb-4">Shallow reef perfect for beginners with colorful corals and tropical fish.</p>
184
+ <div class="flex justify-between text-sm text-gray-500">
185
+ <span><i class="fas fa-clock mr-1"></i> 3 hours</span>
186
+ <span><i class="fas fa-ruler-combined mr-1"></i> 5-10m depth</span>
187
+ <span><i class="fas fa-users mr-1"></i> Small groups</span>
188
+ </div>
189
+ </div>
190
+ </div>
191
+
192
+ <!-- Dive Spot 2 -->
193
+ <div class="bg-white rounded-xl overflow-hidden shadow-lg dive-card transition duration-300">
194
+ <div class="relative overflow-hidden h-64">
195
+ <img src="https://images.unsplash.com/photo-1581595219315-a187dd40c322?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Shipwreck" class="w-full h-full object-cover">
196
+ <div class="absolute inset-0 bg-gradient-to-t from-blue-900 to-transparent opacity-70"></div>
197
+ <div class="absolute bottom-4 left-4 text-white">
198
+ <span class="bg-blue-700 text-xs px-2 py-1 rounded-full">Advanced</span>
199
+ <h3 class="text-xl font-bold mt-2">Sunken Treasure</h3>
200
+ </div>
201
+ </div>
202
+ <div class="p-6">
203
+ <div class="flex justify-between items-center mb-4">
204
+ <div class="flex items-center text-yellow-400">
205
+ <i class="fas fa-star"></i>
206
+ <i class="fas fa-star"></i>
207
+ <i class="fas fa-star"></i>
208
+ <i class="fas fa-star"></i>
209
+ <i class="fas fa-star"></i>
210
+ <span class="text-gray-600 ml-2">4.9</span>
211
+ </div>
212
+ <span class="text-blue-600 font-bold">$129/person</span>
213
+ </div>
214
+ <p class="text-gray-600 mb-4">Explore a historic shipwreck teeming with marine life in crystal clear waters.</p>
215
+ <div class="flex justify-between text-sm text-gray-500">
216
+ <span><i class="fas fa-clock mr-1"></i> 4 hours</span>
217
+ <span><i class="fas fa-ruler-combined mr-1"></i> 15-25m depth</span>
218
+ <span><i class="fas fa-users mr-1"></i> Private guide</span>
219
+ </div>
220
+ </div>
221
+ </div>
222
+
223
+ <!-- Dive Spot 3 -->
224
+ <div class="bg-white rounded-xl overflow-hidden shadow-lg dive-card transition duration-300">
225
+ <div class="relative overflow-hidden h-64">
226
+ <img src="https://images.unsplash.com/photo-1560279966-8ff6a1e7d0b2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Manta Rays" class="w-full h-full object-cover">
227
+ <div class="absolute inset-0 bg-gradient-to-t from-blue-900 to-transparent opacity-70"></div>
228
+ <div class="absolute bottom-4 left-4 text-white">
229
+ <span class="bg-blue-600 text-xs px-2 py-1 rounded-full">Intermediate</span>
230
+ <h3 class="text-xl font-bold mt-2">Manta Point</h3>
231
+ </div>
232
+ </div>
233
+ <div class="p-6">
234
+ <div class="flex justify-between items-center mb-4">
235
+ <div class="flex items-center text-yellow-400">
236
+ <i class="fas fa-star"></i>
237
+ <i class="fas fa-star"></i>
238
+ <i class="fas fa-star"></i>
239
+ <i class="fas fa-star"></i>
240
+ <i class="fas fa-star"></i>
241
+ <span class="text-gray-600 ml-2">5.0</span>
242
+ </div>
243
+ <span class="text-blue-600 font-bold">$159/person</span>
244
+ </div>
245
+ <p class="text-gray-600 mb-4">Swim with majestic manta rays in their natural habitat - a once in a lifetime experience.</p>
246
+ <div class="flex justify-between text-sm text-gray-500">
247
+ <span><i class="fas fa-clock mr-1"></i> 6 hours</span>
248
+ <span><i class="fas fa-ruler-combined mr-1"></i> 8-15m depth</span>
249
+ <span><i class="fas fa-users mr-1"></i> Small groups</span>
250
+ </div>
251
+ </div>
252
+ </div>
253
+ </div>
254
+ <div class="text-center mt-12">
255
+ <button class="bg-blue-600 text-white px-8 py-3 rounded-full font-bold hover:bg-blue-700 transition">View All Locations</button>
256
+ </div>
257
+ </div>
258
+ </section>
259
+
260
+ <!-- Courses Section -->
261
+ <section id="courses" class="py-20 bg-white">
262
+ <div class="container mx-auto px-6">
263
+ <h2 class="text-3xl font-bold text-center text-blue-900 mb-16">Diving <span class="text-blue-500">Courses</span></h2>
264
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
265
+ <!-- Course 1 -->
266
+ <div class="bg-blue-50 rounded-xl p-6 text-center hover:shadow-lg transition">
267
+ <div class="bg-blue-100 w-16 h-16 mx-auto rounded-full flex items-center justify-center mb-6">
268
+ <i class="fas fa-swimmer text-blue-600 text-2xl"></i>
269
+ </div>
270
+ <h3 class="text-xl font-bold mb-3 text-blue-900">Discover Scuba</h3>
271
+ <p class="text-gray-600 mb-4">Perfect introduction for first-time divers in a controlled environment.</p>
272
+ <div class="text-blue-600 font-bold mb-4">$99</div>
273
+ <button class="text-blue-600 border border-blue-600 px-4 py-2 rounded-full text-sm hover:bg-blue-600 hover:text-white transition">Learn More</button>
274
+ </div>
275
+
276
+ <!-- Course 2 -->
277
+ <div class="bg-blue-50 rounded-xl p-6 text-center hover:shadow-lg transition">
278
+ <div class="bg-blue-100 w-16 h-16 mx-auto rounded-full flex items-center justify-center mb-6">
279
+ <i class="fas fa-certificate text-blue-600 text-2xl"></i>
280
+ </div>
281
+ <h3 class="text-xl font-bold mb-3 text-blue-900">Open Water Diver</h3>
282
+ <p class="text-gray-600 mb-4">Get PADI certified with our comprehensive beginner course.</p>
283
+ <div class="text-blue-600 font-bold mb-4">$399</div>
284
+ <button class="text-blue-600 border border-blue-600 px-4 py-2 rounded-full text-sm hover:bg-blue-600 hover:text-white transition">Learn More</button>
285
+ </div>
286
+
287
+ <!-- Course 3 -->
288
+ <div class="bg-blue-50 rounded-xl p-6 text-center hover:shadow-lg transition">
289
+ <div class="bg-blue-100 w-16 h-16 mx-auto rounded-full flex items-center justify-center mb-6">
290
+ <i class="fas fa-fish text-blue-600 text-2xl"></i>
291
+ </div>
292
+ <h3 class="text-xl font-bold mb-3 text-blue-900">Advanced Diver</h3>
293
+ <p class="text-gray-600 mb-4">Expand your skills with deep diving, navigation, and specialty dives.</p>
294
+ <div class="text-blue-600 font-bold mb-4">$349</div>
295
+ <button class="text-blue-600 border border-blue-600 px-4 py-2 rounded-full text-sm hover:bg-blue-600 hover:text-white transition">Learn More</button>
296
+ </div>
297
+
298
+ <!-- Course 4 -->
299
+ <div class="bg-blue-50 rounded-xl p-6 text-center hover:shadow-lg transition">
300
+ <div class="bg-blue-100 w-16 h-16 mx-auto rounded-full flex items-center justify-center mb-6">
301
+ <i class="fas fa-camera text-blue-600 text-2xl"></i>
302
+ </div>
303
+ <h3 class="text-xl font-bold mb-3 text-blue-900">Underwater Photography</h3>
304
+ <p class="text-gray-600 mb-4">Learn to capture stunning images of marine life with professional guidance.</p>
305
+ <div class="text-blue-600 font-bold mb-4">$249</div>
306
+ <button class="text-blue-600 border border-blue-600 px-4 py-2 rounded-full text-sm hover:bg-blue-600 hover:text-white transition">Learn More</button>
307
+ </div>
308
+ </div>
309
+ </div>
310
+ </section>
311
+
312
+ <!-- Testimonials Section -->
313
+ <section class="py-20 bg-blue-900 text-white">
314
+ <div class="container mx-auto px-6">
315
+ <h2 class="text-3xl font-bold text-center mb-16">What Our <span class="text-blue-300">Divers Say</span></h2>
316
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
317
+ <!-- Testimonial 1 -->
318
+ <div class="bg-blue-800 rounded-xl p-8 relative">
319
+ <div class="absolute -top-4 -left-4 bg-blue-600 w-12 h-12 rounded-full flex items-center justify-center">
320
+ <i class="fas fa-quote-left text-white"></i>
321
+ </div>
322
+ <p class="mb-6 italic">"The best diving experience of my life! The instructors were patient and knowledgeable, and the marine life was breathtaking. Can't wait to come back next summer!"</p>
323
+ <div class="flex items-center">
324
+ <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Sarah J." class="w-12 h-12 rounded-full mr-4">
325
+ <div>
326
+ <h4 class="font-bold">Sarah J.</h4>
327
+ <div class="flex text-yellow-400 text-sm">
328
+ <i class="fas fa-star"></i>
329
+ <i class="fas fa-star"></i>
330
+ <i class="fas fa-star"></i>
331
+ <i class="fas fa-star"></i>
332
+ <i class="fas fa-star"></i>
333
+ </div>
334
+ </div>
335
+ </div>
336
+ </div>
337
+
338
+ <!-- Testimonial 2 -->
339
+ <div class="bg-blue-800 rounded-xl p-8 relative">
340
+ <div class="absolute -top-4 -left-4 bg-blue-600 w-12 h-12 rounded-full flex items-center justify-center">
341
+ <i class="fas fa-quote-left text-white"></i>
342
+ </div>
343
+ <p class="mb-6 italic">"As a beginner, I was nervous about my first dive, but the team made me feel completely safe. The coral reef was like something from a dream. Highly recommend!"</p>
344
+ <div class="flex items-center">
345
+ <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Michael T." class="w-12 h-12 rounded-full mr-4">
346
+ <div>
347
+ <h4 class="font-bold">Michael T.</h4>
348
+ <div class="flex text-yellow-400 text-sm">
349
+ <i class="fas fa-star"></i>
350
+ <i class="fas fa-star"></i>
351
+ <i class="fas fa-star"></i>
352
+ <i class="fas fa-star"></i>
353
+ <i class="fas fa-star-half-alt"></i>
354
+ </div>
355
+ </div>
356
+ </div>
357
+ </div>
358
+
359
+ <!-- Testimonial 3 -->
360
+ <div class="bg-blue-800 rounded-xl p-8 relative">
361
+ <div class="absolute -top-4 -left-4 bg-blue-600 w-12 h-12 rounded-full flex items-center justify-center">
362
+ <i class="fas fa-quote-left text-white"></i>
363
+ </div>
364
+ <p class="mb-6 italic">"The underwater photography course exceeded all my expectations. The instructor helped me capture amazing shots of turtles and reef sharks. Worth every penny!"</p>
365
+ <div class="flex items-center">
366
+ <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="Emma L." class="w-12 h-12 rounded-full mr-4">
367
+ <div>
368
+ <h4 class="font-bold">Emma L.</h4>
369
+ <div class="flex text-yellow-400 text-sm">
370
+ <i class="fas fa-star"></i>
371
+ <i class="fas fa-star"></i>
372
+ <i class="fas fa-star"></i>
373
+ <i class="fas fa-star"></i>
374
+ <i class="fas fa-star"></i>
375
+ </div>
376
+ </div>
377
+ </div>
378
+ </div>
379
+ </div>
380
+ </div>
381
+ </section>
382
+
383
+ <!-- Gallery Section -->
384
+ <section id="gallery" class="py-20 bg-white">
385
+ <div class="container mx-auto px-6">
386
+ <h2 class="text-3xl font-bold text-center text-blue-900 mb-16">Underwater <span class="text-blue-500">Gallery</span></h2>
387
+ <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
388
+ <div class="overflow-hidden rounded-xl h-48 water-effect">
389
+ <img src="https://images.unsplash.com/photo-1560279966-06d6f6a3e1f3?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Coral" class="w-full h-full object-cover">
390
+ </div>
391
+ <div class="overflow-hidden rounded-xl h-48 water-effect">
392
+ <img src="https://images.unsplash.com/photo-1581595219315-a187dd40c322?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Shipwreck" class="w-full h-full object-cover">
393
+ </div>
394
+ <div class="overflow-hidden rounded-xl h-48 water-effect">
395
+ <img src="https://images.unsplash.com/photo-1560279966-8ff6a1e7d0b2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Manta Ray" class="w-full h-full object-cover">
396
+ </div>
397
+ <div class="overflow-hidden rounded-xl h-48 water-effect">
398
+ <img src="https://images.unsplash.com/photo-1530549387789-4c1017266635?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Diver" class="w-full h-full object-cover">
399
+ </div>
400
+ <div class="overflow-hidden rounded-xl h-48 water-effect">
401
+ <img src="https://images.unsplash.com/photo-1506929562872-bb421503ef21?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Turtle" class="w-full h-full object-cover">
402
+ </div>
403
+ <div class="overflow-hidden rounded-xl h-48 water-effect">
404
+ <img src="https://images.unsplash.com/photo-1560279966-8ff6a1e7d0b2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Shark" class="w-full h-full object-cover">
405
+ </div>
406
+ <div class="overflow-hidden rounded-xl h-48 water-effect">
407
+ <img src="https://images.unsplash.com/photo-1506929562872-bb421503ef21?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Jellyfish" class="w-full h-full object-cover">
408
+ </div>
409
+ <div class="overflow-hidden rounded-xl h-48 water-effect">
410
+ <img src="https://images.unsplash.com/photo-1560279966-06d6f6a3e1f3?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Coral Reef" class="w-full h-full object-cover">
411
+ </div>
412
+ </div>
413
+ <div class="text-center mt-12">
414
+ <button class="bg-blue-600 text-white px-8 py-3 rounded-full font-bold hover:bg-blue-700 transition">View Full Gallery</button>
415
+ </div>
416
+ </div>
417
+ </section>
418
+
419
+ <!-- Summer Special Section -->
420
+ <section class="py-20 parallax" style="background-image: url('https://images.unsplash.com/photo-1507525428034-b723cf961d3e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1473&q=80')">
421
+ <div class="container mx-auto px-6 text-center text-white">
422
+ <div class="max-w-3xl mx-auto bg-blue-900 bg-opacity-80 p-12 rounded-xl">
423
+ <h2 class="text-3xl md:text-4xl font-bold mb-6">Summer <span class="text-blue-300">Special Offer</span></h2>
424
+ <p class="text-xl mb-8">Book before July 31st and get 20% off all dive packages and courses!</p>
425
+ <div class="flex justify-center">
426
+ <div class="bg-white text-blue-900 px-6 py-2 rounded-full font-bold inline-flex items-center">
427
+ <i class="fas fa-clock mr-2"></i>
428
+ <span id="countdown" class="font-mono">30 days 00:00:00</span>
429
+ </div>
430
+ </div>
431
+ <button class="mt-8 bg-blue-500 text-white px-8 py-3 rounded-full font-bold hover:bg-blue-600 transition">Claim Your Discount</button>
432
+ </div>
433
+ </div>
434
+ </section>
435
+
436
+ <!-- Contact Section -->
437
+ <section id="contact" class="py-20 bg-blue-50">
438
+ <div class="container mx-auto px-6">
439
+ <h2 class="text-3xl font-bold text-center text-blue-900 mb-16">Get In <span class="text-blue-500">Touch</span></h2>
440
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-12">
441
+ <div>
442
+ <h3 class="text-xl font-bold mb-6 text-blue-900">Contact Information</h3>
443
+ <div class="space-y-6">
444
+ <div class="flex items-start">
445
+ <div class="bg-blue-100 p-3 rounded-full mr-4">
446
+ <i class="fas fa-map-marker-alt text-blue-600"></i>
447
+ </div>
448
+ <div>
449
+ <h4 class="font-bold text-blue-900">Location</h4>
450
+ <p class="text-gray-600">123 Beachfront Avenue, Coral Bay, FL 33139</p>
451
+ </div>
452
+ </div>
453
+ <div class="flex items-start">
454
+ <div class="bg-blue-100 p-3 rounded-full mr-4">
455
+ <i class="fas fa-phone-alt text-blue-600"></i>
456
+ </div>
457
+ <div>
458
+ <h4 class="font-bold text-blue-900">Phone</h4>
459
+ <p class="text-gray-600">+1 (305) 555-0199</p>
460
+ </div>
461
+ </div>
462
+ <div class="flex items-start">
463
+ <div class="bg-blue-100 p-3 rounded-full mr-4">
464
+ <i class="fas fa-envelope text-blue-600"></i>
465
+ </div>
466
+ <div>
467
+ <h4 class="font-bold text-blue-900">Email</h4>
468
+ <p class="text-gray-600">info@azuredives.com</p>
469
+ </div>
470
+ </div>
471
+ <div class="flex items-start">
472
+ <div class="bg-blue-100 p-3 rounded-full mr-4">
473
+ <i class="fas fa-clock text-blue-600"></i>
474
+ </div>
475
+ <div>
476
+ <h4 class="font-bold text-blue-900">Hours</h4>
477
+ <p class="text-gray-600">Daily 8:00 AM - 6:00 PM</p>
478
+ </div>
479
+ </div>
480
+ </div>
481
+ <div class="mt-8">
482
+ <h4 class="font-bold text-blue-900 mb-4">Follow Us</h4>
483
+ <div class="flex space-x-4">
484
+ <a href="#" class="bg-blue-100 w-10 h-10 rounded-full flex items-center justify-center text-blue-600 hover:bg-blue-200 transition">
485
+ <i class="fab fa-facebook-f"></i>
486
+ </a>
487
+ <a href="#" class="bg-blue-100 w-10 h-10 rounded-full flex items-center justify-center text-blue-600 hover:bg-blue-200 transition">
488
+ <i class="fab fa-instagram"></i>
489
+ </a>
490
+ <a href="#" class="bg-blue-100 w-10 h-10 rounded-full flex items-center justify-center text-blue-600 hover:bg-blue-200 transition">
491
+ <i class="fab fa-twitter"></i>
492
+ </a>
493
+ <a href="#" class="bg-blue-100 w-10 h-10 rounded-full flex items-center justify-center text-blue-600 hover:bg-blue-200 transition">
494
+ <i class="fab fa-youtube"></i>
495
+ </a>
496
+ </div>
497
+ </div>
498
+ </div>
499
+ <div>
500
+ <h3 class="text-xl font-bold mb-6 text-blue-900">Send Us a Message</h3>
501
+ <form class="space-y-4">
502
+ <div>
503
+ <label for="name" class="block text-gray-700 mb-2">Name</label>
504
+ <input type="text" id="name" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
505
+ </div>
506
+ <div>
507
+ <label for="email" class="block text-gray-700 mb-2">Email</label>
508
+ <input type="email" id="email" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
509
+ </div>
510
+ <div>
511
+ <label for="subject" class="block text-gray-700 mb-2">Subject</label>
512
+ <select id="subject" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
513
+ <option>General Inquiry</option>
514
+ <option>Booking Question</option>
515
+ <option>Course Information</option>
516
+ <option>Feedback</option>
517
+ </select>
518
+ </div>
519
+ <div>
520
+ <label for="message" class="block text-gray-700 mb-2">Message</label>
521
+ <textarea id="message" rows="4" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"></textarea>
522
+ </div>
523
+ <button type="submit" class="bg-blue-600 text-white px-6 py-3 rounded-lg font-bold hover:bg-blue-700 transition w-full">Send Message</button>
524
+ </form>
525
+ </div>
526
+ </div>
527
+ </div>
528
+ </section>
529
+
530
+ <!-- Footer -->
531
+ <footer class="bg-blue-900 text-white py-12">
532
+ <div class="container mx-auto px-6">
533
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
534
+ <div>
535
+ <div class="flex items-center space-x-2 mb-4">
536
+ <i class="fas fa-water text-2xl text-blue-300"></i>
537
+ <span class="font-bold text-xl">Azure<span class="text-blue-300">Dives</span></span>
538
+ </div>
539
+ <p class="text-blue-200">Your gateway to unforgettable underwater adventures. Dive into summer with us!</p>
540
+ </div>
541
+ <div>
542
+ <h4 class="font-bold text-lg mb-4">Quick Links</h4>
543
+ <ul class="space-y-2">
544
+ <li><a href="#" class="text-blue-200 hover:text-white transition">Home</a></li>
545
+ <li><a href="#dives" class="text-blue-200 hover:text-white transition">Dive Spots</a></li>
546
+ <li><a href="#courses" class="text-blue-200 hover:text-white transition">Courses</a></li>
547
+ <li><a href="#gallery" class="text-blue-200 hover:text-white transition">Gallery</a></li>
548
+ <li><a href="#contact" class="text-blue-200 hover:text-white transition">Contact</a></li>
549
+ </ul>
550
+ </div>
551
+ <div>
552
+ <h4 class="font-bold text-lg mb-4">Dive Centers</h4>
553
+ <ul class="space-y-2">
554
+ <li><a href="#" class="text-blue-200 hover:text-white transition">Florida Keys</a></li>
555
+ <li><a href="#" class="text-blue-200 hover:text-white transition">Bahamas</a></li>
556
+ <li><a href="#" class="text-blue-200 hover:text-white transition">Hawaii</a></li>
557
+ <li><a href="#" class="text-blue-200 hover:text-white transition">Bonaire</a></li>
558
+ <li><a href="#" class="text-blue-200 hover:text-white transition">Cozumel</a></li>
559
+ </ul>
560
+ </div>
561
+ <div>
562
+ <h4 class="font-bold text-lg mb-4">Newsletter</h4>
563
+ <p class="text-blue-200 mb-4">Subscribe to get updates on special offers and new locations.</p>
564
+ <form class="flex">
565
+ <input type="email" placeholder="Your email" class="px-4 py-2 rounded-l-lg focus:outline-none text-gray-900 w-full">
566
+ <button type="submit" class="bg-blue-600 px-4 py-2 rounded-r-lg hover:bg-blue-700 transition">
567
+ <i class="fas fa-paper-plane"></i>
568
+ </button>
569
+ </form>
570
+ </div>
571
+ </div>
572
+ <div class="border-t border-blue-800 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center">
573
+ <p class="text-blue-300 text-sm mb-4 md:mb-0">© 2023 Azure Dives. All rights reserved.</p>
574
+ <div class="flex space-x-6">
575
+ <a href="#" class="text-blue-300 hover:text-white transition">Privacy Policy</a>
576
+ <a href="#" class="text-blue-300 hover:text-white transition">Terms of Service</a>
577
+ <a href="#" class="text-blue-300 hover:text-white transition">Sitemap</a>
578
+ </div>
579
+ </div>
580
+ </div>
581
+ </footer>
582
+
583
+ <script>
584
+ // Countdown timer for summer special
585
+ function updateCountdown() {
586
+ const endDate = new Date();
587
+ endDate.setDate(endDate.getDate() + 30); // 30 days from now
588
+
589
+ const now = new Date().getTime();
590
+ const distance = endDate - now;
591
+
592
+ const days = Math.floor(distance / (1000 * 60 * 60 * 24));
593
+ const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
594
+ const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
595
+ const seconds = Math.floor((distance % (1000 * 60)) / 1000);
596
+
597
+ document.getElementById("countdown").innerHTML = `${days} days ${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
598
+ }
599
+
600
+ updateCountdown();
601
+ setInterval(updateCountdown, 1000);
602
+
603
+ // Smooth scrolling for navigation
604
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
605
+ anchor.addEventListener('click', function (e) {
606
+ e.preventDefault();
607
+
608
+ document.querySelector(this.getAttribute('href')).scrollIntoView({
609
+ behavior: 'smooth'
610
+ });
611
+ });
612
+ });
613
+
614
+ // Mobile menu toggle (would need more implementation)
615
+ document.querySelector('.md\\:hidden').addEventListener('click', function() {
616
+ // This would toggle a mobile menu in a real implementation
617
+ console.log('Mobile menu clicked');
618
+ });
619
+ </script>
620
+ <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=chatkenneth/demo-3" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
621
+ </html>
prompts.txt ADDED
@@ -0,0 +1 @@
 
 
1
+ create a summer beach diving swimming website, blue