Hugging Face's logo

Spaces:
jargon7
/
silk-and-falls
Running

App Files Community
jargon7 commited on
Commit
74c211f
·
verified ·
1 Parent(s): 79a7a2a

The name of the Jazz Lounge is Silk and Falls - Initial Deployment

Browse files
Files changed (7) hide show
  1. README.md +7 -5
  2. barber-shop.html +285 -0
  3. cigar-lounge.html +259 -0
  4. events.html +128 -0
  5. index.html +309 -18
  6. prompts.txt +2 -0
  7. restaurant.html +289 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Silk And Falls
3
- emoji: 📚
4
- colorFrom: purple
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: silk-and-falls
3
+ emoji: 🐳
4
+ colorFrom: green
5
+ colorTo: red
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
barber-shop.html ADDED
@@ -0,0 +1,285 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>Barber Shop | The Saxophone Lounge</title>
7
+ <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
10
+ <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
11
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
12
+ <style>
13
+ @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Montserrat:wght@300;400;600&display=swap');
14
+
15
+ :root {
16
+ --gold: #D4AF37;
17
+ --black: #0A0A0A;
18
+ --deep-black: #000000;
19
+ --warm-white: #FAF8F3;
20
+ --dark-gold: #B8941F;
21
+ }
22
+
23
+ .font-display { font-family: 'Playfair Display', serif; }
24
+ .font-body { font-family: 'Montserrat', sans-serif; }
25
+
26
+ .gold-text {
27
+ background: linear-gradient(135deg, #D4AF37 0%, #F7E7A1 50%, #D4AF37 100%);
28
+ -webkit-background-clip: text;
29
+ -webkit-text-fill-color: transparent;
30
+ background-clip: text;
31
+ }
32
+
33
+ .glass-effect {
34
+ backdrop-filter: blur(10px);
35
+ background: rgba(0,0,0,0.3);
36
+ border: 1px solid rgba(212,175,55,0.2);
37
+ }
38
+
39
+ .barber-gradient {
40
+ background: linear-gradient(135deg, rgba(139,69,19,0.2) 0%, rgba(0,0,0,0.9) 100%);
41
+ }
42
+
43
+ .scissor-animation {
44
+ animation: scissorCut 2s ease-in-out infinite;
45
+ }
46
+
47
+ @keyframes scissorCut {
48
+ 0%, 100% { transform: rotate(0deg); }
49
+ 50% { transform: rotate(15deg); }
50
+ }
51
+
52
+ .razor-glide {
53
+ animation: razorSlide 3s ease-in-out infinite;
54
+ }
55
+
56
+ @keyframes razorSlide {
57
+ 0%, 100% { transform: translateX(0); }
58
+ 50% { transform: translateX(20px); }
59
+ }
60
+
61
+ .beard-pattern {
62
+ background-image:
63
+ radial-gradient(circle at 20% 50%, rgba(212,175,55,0.1) 0%, transparent 50%),
64
+ radial-gradient(circle at 80% 80%, rgba(212,175,55,0.1) 0%, transparent 50%);
65
+ }
66
+
67
+ .vintage-border {
68
+ border: 2px solid;
69
+ border-image: linear-gradient(45deg, #D4AF37, #8B4513) 1;
70
+ }
71
+ </style>
72
+ </head>
73
+ <body class="bg-gray-900 text-white font-body">
74
+ <!-- Navigation -->
75
+ <nav class="fixed w-full z-50 glass-effect transition-all duration-300" id="navbar">
76
+ <div class="container mx-auto px-6 py-4">
77
+ <div class="flex justify-between items-center">
78
+ <div class="font-display text-2xl font-bold gold-text">
79
+ Silk and Falls
80
+ </div>
81
+ <div class="hidden md:flex space-x-8">
82
+ <a href="index.html" class="hover:text-yellow-400 transition-colors duration-300">Home</a>
83
+ <a href="cigar-lounge.html" class="hover:text-yellow-400 transition-colors duration-300">Cigar Lounge</a>
84
+ <a href="restaurant.html" class="hover:text-yellow-400 transition-colors duration-300">Restaurant</a>
85
+ <a href="barber-shop.html" class="hover:text-yellow-400 transition-colors duration-300">Barber Shop</a>
86
+ <a href="events.html" class="hover:text-yellow-400 transition-colors duration-300">Events</a>
87
+ <a href="contact.html" class="hover:text-yellow-400 transition-colors duration-300">Contact</a>
88
+ </div>
89
+ <button class="md:hidden" id="mobile-menu-button">
90
+ <i data-feather="menu" class="w-6 h-6"></i>
91
+ </button>
92
+ </div>
93
+ </div>
94
+ </nav>
95
+
96
+ <!-- Hero Section -->
97
+ <section class="relative h-screen overflow-hidden">
98
+ <div class="absolute inset-0">
99
+ <img src="http://static.photos/people/1200x630/88" alt="Barber Shop" class="w-full h-full object-cover">
100
+ <div class="barber-gradient absolute inset-0"></div>
101
+ </div>
102
+
103
+ <div class="absolute inset-0 flex items-center justify-center">
104
+ <div class="text-center px-6" data-aos="fade-up" data-aos-duration="2000">
105
+ <h1 class="font-display text-6xl md:text-8xl font-bold mb-4 gold-text">
106
+ Gentlemen's Grooming
107
+ </h1>
108
+ <p class="text-xl md:text-2xl mb-8 text-gray-300 max-w-2xl mx-auto">
109
+ Where traditional barbering meets modern sophistication
110
+ </p>
111
+ </div>
112
+ </div>
113
+ </section>
114
+
115
+ <!-- Services Section -->
116
+ <section class="py-20 bg-gradient-to-b from-black to-gray-900 beard-pattern">
117
+ <div class="container mx-auto px-6">
118
+ <div class="grid md:grid-cols-2 gap-12 items-center">
119
+ <div data-aos="fade-right">
120
+ <h2 class="font-display text-4xl md:text-5xl mb-6 gold-text">Premium Grooming Services</h2>
121
+ <p class="text-gray-300 mb-6 text-lg">
122
+ Experience the art of traditional barbering in an atmosphere of luxury and relaxation. Our master barbers provide precision cuts, hot towel shaves, and beard grooming services.
123
+ </p>
124
+ <div class="space-y-4">
125
+ <div class="flex justify-between items-center border-b border-yellow-900 pb-2">
126
+ <span class="text-yellow-400 font-semibold">Classic Cut & Style</span>
127
+ <span class="gold-text">R350</span>
128
+ </div>
129
+ <div class="flex justify-between items-center border-b border-yellow-900 pb-2">
130
+ <span class="text-yellow-400 font-semibold">Hot Towel Shave</span>
131
+ <span class="gold-text">R280</span>
132
+ </div>
133
+ <div class="flex justify-between items-center border-b border-yellow-900 pb-2">
134
+ <span class="text-yellow-400 font-semibold">Beard Grooming</span>
135
+ <span class="gold-text">R200</span>
136
+ </div>
137
+ <div class="flex justify-between items-center border-b border-yellow-900 pb-2">
138
+ <span class="text-yellow-400 font-semibold">Royal Package</span>
139
+ <span class="gold-text">R650</span>
140
+ </div>
141
+ </div>
142
+ </div>
143
+ <div class="relative" data-aos="fade-left">
144
+ <img src="http://static.photos/studio/640x360/99" alt="Barber Tools" class="rounded-lg shadow-2xl">
145
+ <div class="scissor-animation absolute -top-4 -right-4 w-16 h-16 bg-gradient-to-br from-yellow-600 to-yellow-400 rounded-lg flex items-center justify-center transform rotate-45">
146
+ <i data-feather="scissors" class="w-8 h-8 text-black transform -rotate-45"></i>
147
+ </div>
148
+ </div>
149
+ </div>
150
+ </div>
151
+ </section>
152
+
153
+ <!-- Atmosphere Section -->
154
+ <section class="py-20 bg-black">
155
+ <div class="container mx-auto px-6">
156
+ <h2 class="font-display text-4xl md:text-5xl text-center mb-16 gold-text" data-aos="fade-up">
157
+ The Gentleman's Retreat
158
+ </h2>
159
+
160
+ <div class="grid md:grid-cols-3 gap-8">
161
+ <div class="glass-effect p-8 rounded-lg text-center hover:transform hover:scale-105 transition-all duration-300" data-aos="fade-up" data-aos-delay="100">
162
+ <div class="w-20 h-20 mx-auto mb-6 bg-gradient-to-br from-yellow-600 to-yellow-400 rounded-full flex items-center justify-center razor-glide">
163
+ <i data-feather="user" class="w-10 h-10 text-black"></i>
164
+ </div>
165
+ <h3 class="font-display text-2xl mb-4 gold-text">Master Barbers</h3>
166
+ <p class="text-gray-400">Experienced craftsmen dedicated to the art of traditional grooming</p>
167
+ </div>
168
+
169
+ <div class="glass-effect p-8 rounded-lg text-center hover:transform hover:scale-105 transition-all duration-300" data-aos="fade-up" data-aos-delay="200">
170
+ <div class="w-20 h-20 mx-auto mb-6 bg-gradient-to-br from-yellow-600 to-yellow-400 rounded-full flex items-center justify-center">
171
+ <i data-feather="music" class="w-10 h-10 text-black"></i>
172
+ </div>
173
+ <h3 class="font-display text-2xl mb-4 gold-text">Jazz Ambiance</h3>
174
+ <p class="text-gray-400">Relax to smooth jazz while enjoying your grooming experience</p>
175
+ </div>
176
+
177
+ <div class="glass-effect p-8 rounded-lg text-center hover:transform hover:scale-105 transition-all duration-300" data-aos="fade-up" data-aos-delay="300">
178
+ <div class="w-20 h-20 mx-auto mb-6 bg-gradient-to-br from-yellow-600 to-yellow-400 rounded-full flex items-center justify-center">
179
+ <i data-feather="coffee" class="w-10 h-10 text-black"></i>
180
+ </div>
181
+ <h3 class="font-display text-2xl mb-4 gold-text">Complimentary Beverages</h3>
182
+ <p class="text-gray-400">Enjoy premium whiskey, coffee, or cigars with your service</p>
183
+ </div>
184
+ </div>
185
+ </div>
186
+ </section>
187
+
188
+ <!-- Booking Section -->
189
+ <section class="py-20 bg-gradient-to-r from-gray-900 to-black vintage-border">
190
+ <div class="container mx-auto px-6 text-center">
191
+ <h2 class="font-display text-4xl md:text-5xl mb-6 gold-text" data-aos="fade-up">
192
+ Book Your Experience
193
+ </h2>
194
+ <p class="text-xl text-gray-300 mb-8 max-w-2xl mx-auto" data-aos="fade-up" data-aos-delay="100">
195
+ Reserve your appointment and step into a world where grooming becomes an art form
196
+ </p>
197
+ <button class="bg-gradient-to-r from-yellow-600 to-yellow-500 text-black px-8 py-3 rounded-full font-semibold hover:from-yellow-500 hover:to-yellow-400 transition-all duration-300 transform hover:scale-105" data-aos="fade-up" data-aos-delay="200">
198
+ Schedule Appointment
199
+ </button>
200
+ </div>
201
+ </section>
202
+
203
+ <!-- Footer -->
204
+ <footer class="bg-gray-900 py-12 border-t border-yellow-900">
205
+ <div class="container mx-auto px-6">
206
+ <div class="grid md:grid-cols-4 gap-8">
207
+ <div>
208
+ <h3 class="font-display text-2xl mb-4 gold-text">The Saxophone Lounge</h3>
209
+ <p class="text-gray-400">Glenvista's premier destination for jazz, fine dining, and sophisticated relaxation.</p>
210
+ </div>
211
+ <div>
212
+ <h4 class="font-semibold mb-4 text-yellow-500">Quick Links</h4>
213
+ <ul class="space-y-2 text-gray-400">
214
+ <li><a href="cigar-lounge.html" class="hover:text-yellow-400">Cigar Lounge</a></li>
215
+ <li><a href="restaurant.html" class="hover:text-yellow-400">Restaurant</a></li>
216
+ <li><a href="barber-shop.html" class="hover:text-yellow-400">Barber Shop</a></li>
217
+ <li><a href="events.html" class="hover:text-yellow-400">Events</a></li>
218
+ </ul>
219
+ </div>
220
+ <div>
221
+ <h4 class="font-semibold mb-4 text-yellow-500">Hours</h4>
222
+ <p class="text-gray-400 mb-2">Monday - Thursday: 5 PM - 12 AM</p>
223
+ <p class="text-gray-400 mb-2">Friday - Saturday: 5 PM - 2 AM</p>
224
+ <p class="text-gray-400">Sunday: 3 PM - 11 PM</p>
225
+ </div>
226
+ <div>
227
+ <h4 class="font-semibold mb-4 text-yellow-500">Contact</h4>
228
+ <p class="text-gray-400 mb-2">123 Jazz Street, Glenvista</p>
229
+ <p class="text-gray-400 mb-2">Johannesburg, South Africa</p>
230
+ <p class="text-gray-400">+27 11 123 4567</p>
231
+ </div>
232
+ </div>
233
+ <div class="mt-8 pt-8 border-t border-gray-800 text-center text-gray-500">
234
+ <p>&copy; 2024 Silk and Falls. All rights reserved.</p>
235
+ </div>
236
+ </div>
237
+ </footer>
238
+
239
+ <script>
240
+ // Initialize AOS
241
+ AOS.init();
242
+
243
+ // Initialize Feather Icons
244
+ feather.replace();
245
+
246
+ // Navbar scroll effect
247
+ window.addEventListener('scroll', function() {
248
+ const navbar = document.getElementById('navbar');
249
+ if (window.scrollY > 50) {
250
+ navbar.classList.add('bg-black', 'bg-opacity-90');
251
+ navbar.classList.remove('bg-transparent');
252
+ } else {
253
+ navbar.classList.remove('bg-black', 'bg-opacity-90');
254
+ navbar.classList.add('bg-transparent');
255
+ }
256
+ });
257
+
258
+ // Mobile menu toggle
259
+ const mobileMenuButton = document.getElementById('mobile-menu-button');
260
+ const mobileMenu = document.createElement('div');
261
+ mobileMenu.innerHTML = `
262
+ <div class="fixed inset-0 bg-black bg-opacity-90 z-50 flex flex-col items-center justify-center space-y-8 text-xl">
263
+ <button id="close-menu" class="absolute top-8 right-8">
264
+ <i data-feather="x" class="w-8 h-8"></i>
265
+ </button>
266
+ <a href="index.html" class="hover:text-yellow-400">Home</a>
267
+ <a href="cigar-lounge.html" class="hover:text-yellow-400">Cigar Lounge</a>
268
+ <a href="restaurant.html" class="hover:text-yellow-400">Restaurant</a>
269
+ <a href="barber-shop.html" class="hover:text-yellow-400">Barber Shop</a>
270
+ <a href="events.html" class="hover:text-yellow-400">Events</a>
271
+ <a href="contact.html" class="hover:text-yellow-400">Contact</a>
272
+ </div>
273
+ `;
274
+
275
+ mobileMenuButton.addEventListener('click', function() {
276
+ document.body.appendChild(mobileMenu);
277
+ feather.replace();
278
+
279
+ document.getElementById('close-menu').addEventListener('click', function() {
280
+ mobileMenu.remove();
281
+ });
282
+ });
283
+ </script>
284
+ </body>
285
+ </html>
cigar-lounge.html ADDED
@@ -0,0 +1,259 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>Cigar Lounge | The Saxophone Lounge</title>
7
+ <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
10
+ <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
11
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
12
+ <style>
13
+ @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Montserrat:wght@300;400;600&display=swap');
14
+
15
+ :root {
16
+ --gold: #D4AF37;
17
+ --black: #0A0A0A;
18
+ --deep-black: #000000;
19
+ --warm-white: #FAF8F3;
20
+ --dark-gold: #B8941F;
21
+ }
22
+
23
+ .font-display { font-family: 'Playfair Display', serif; }
24
+ .font-body { font-family: 'Montserrat', sans-serif; }
25
+
26
+ .gold-text {
27
+ background: linear-gradient(135deg, #D4AF37 0%, #F7E7A1 50%, #D4AF37 100%);
28
+ -webkit-background-clip: text;
29
+ -webkit-text-fill-color: transparent;
30
+ background-clip: text;
31
+ }
32
+
33
+ .glass-effect {
34
+ backdrop-filter: blur(10px);
35
+ background: rgba(0,0,0,0.3);
36
+ border: 1px solid rgba(212,175,55,0.2);
37
+ }
38
+
39
+ .cigar-gradient {
40
+ background: linear-gradient(135deg, rgba(139,69,19,0.1) 0%, rgba(0,0,0,0.8) 100%);
41
+ }
42
+
43
+ .smoke-animation {
44
+ animation: smokeRise 8s ease-in-out infinite;
45
+ }
46
+
47
+ @keyframes smokeRise {
48
+ 0% { transform: translateY(0) translateX(0) scale(1); opacity: 0; }
49
+ 20% { opacity: 0.3; }
50
+ 100% { transform: translateY(-200px) translateX(50px) scale(1.5); opacity: 0; }
51
+ }
52
+
53
+ .leather-texture {
54
+ background-image:
55
+ repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(139,69,19,0.1) 10px, rgba(139,69,19,0.1) 20px);
56
+ }
57
+ </style>
58
+ </head>
59
+ <body class="bg-gray-900 text-white font-body">
60
+ <!-- Navigation -->
61
+ <nav class="fixed w-full z-50 glass-effect transition-all duration-300" id="navbar">
62
+ <div class="container mx-auto px-6 py-4">
63
+ <div class="flex justify-between items-center">
64
+ <div class="font-display text-2xl font-bold gold-text">
65
+ Silk and Falls
66
+ </div>
67
+ <div class="hidden md:flex space-x-8">
68
+ <a href="index.html" class="hover:text-yellow-400 transition-colors duration-300">Home</a>
69
+ <a href="cigar-lounge.html" class="hover:text-yellow-400 transition-colors duration-300">Cigar Lounge</a>
70
+ <a href="restaurant.html" class="hover:text-yellow-400 transition-colors duration-300">Restaurant</a>
71
+ <a href="barber-shop.html" class="hover:text-yellow-400 transition-colors duration-300">Barber Shop</a>
72
+ <a href="events.html" class="hover:text-yellow-400 transition-colors duration-300">Events</a>
73
+ <a href="contact.html" class="hover:text-yellow-400 transition-colors duration-300">Contact</a>
74
+ </div>
75
+ <button class="md:hidden" id="mobile-menu-button">
76
+ <i data-feather="menu" class="w-6 h-6"></i>
77
+ </button>
78
+ </div>
79
+ </div>
80
+ </nav>
81
+
82
+ <!-- Hero Section -->
83
+ <section class="relative h-screen overflow-hidden">
84
+ <div class="absolute inset-0">
85
+ <img src="http://static.photos/lounge/1200x630/88" alt="Cigar Lounge" class="w-full h-full object-cover">
86
+ <div class="cigar-gradient absolute inset-0"></div>
87
+ </div>
88
+
89
+ <div class="absolute inset-0 flex items-center justify-center">
90
+ <div class="text-center px-6" data-aos="fade-up" data-aos-duration="2000">
91
+ <h1 class="font-display text-6xl md:text-8xl font-bold mb-4 gold-text">
92
+ Cigar Lounge
93
+ </h1>
94
+ <p class="text-xl md:text-2xl mb-8 text-gray-300 max-w-2xl mx-auto">
95
+ Indulge in the finest selection of premium cigars in an atmosphere of sophisticated elegance
96
+ </p>
97
+ </div>
98
+ </div>
99
+ </section>
100
+
101
+ <!-- Features Section -->
102
+ <section class="py-20 bg-gradient-to-b from-black to-gray-900 leather-texture">
103
+ <div class="container mx-auto px-6">
104
+ <div class="grid md:grid-cols-2 gap-12 items-center">
105
+ <div data-aos="fade-right">
106
+ <h2 class="font-display text-4xl md:text-5xl mb-6 gold-text">Premium Selection</h2>
107
+ <p class="text-gray-300 mb-6 text-lg">
108
+ Our walk-in humidor maintains the perfect temperature and humidity to preserve the quality of our hand-selected cigars from Cuba, Nicaragua, and the Dominican Republic.
109
+ </p>
110
+ <ul class="space-y-3 text-gray-400">
111
+ <li class="flex items-center"><i data-feather="check" class="w-5 h-5 mr-3 text-yellow-500"></i> Cuban Cohiba Behike</li>
112
+ <li class="flex items-center"><i data-feather="check" class="w-5 h-5 mr-3 text-yellow-500"></i> Arturo Fuente OpusX</li>
113
+ <li class="flex items-center"><i data-feather="check" class="w-5 h-5 mr-3 text-yellow-500"></i> Padron 1964 Anniversary</li>
114
+ <li class="flex items-center"><i data-feather="check" class="w-5 h-5 mr-3 text-yellow-500"></i> Montecristo No. 2</li>
115
+ </ul>
116
+ </div>
117
+ <div class="relative" data-aos="fade-left">
118
+ <img src="http://static.photos/lounge/640x360/99" alt="Humidor" class="rounded-lg shadow-2xl">
119
+ <div class="smoke-animation absolute top-0 left-0 w-full h-full pointer-events-none">
120
+ <div class="text-6xl opacity-20">💨</div>
121
+ </div>
122
+ </div>
123
+ </div>
124
+ </div>
125
+ </section>
126
+
127
+ <!-- Atmosphere Section -->
128
+ <section class="py-20 bg-black">
129
+ <div class="container mx-auto px-6">
130
+ <h2 class="font-display text-4xl md:text-5xl text-center mb-16 gold-text" data-aos="fade-up">
131
+ Sophisticated Atmosphere
132
+ </h2>
133
+
134
+ <div class="grid md:grid-cols-3 gap-8">
135
+ <div class="glass-effect p-8 rounded-lg text-center hover:transform hover:scale-105 transition-all duration-300" data-aos="fade-up" data-aos-delay="100">
136
+ <div class="w-20 h-20 mx-auto mb-6 bg-gradient-to-br from-yellow-600 to-yellow-400 rounded-full flex items-center justify-center">
137
+ <i data-feather="coffee" class="w-10 h-10 text-black"></i>
138
+ </div>
139
+ <h3 class="font-display text-2xl mb-4 gold-text">Leather Armchairs</h3>
140
+ <p class="text-gray-400">Sink into our plush leather seating while enjoying your premium cigar selection</p>
141
+ </div>
142
+
143
+ <div class="glass-effect p-8 rounded-lg text-center hover:transform hover:scale-105 transition-all duration-300" data-aos="fade-up" data-aos-delay="200">
144
+ <div class="w-20 h-20 mx-auto mb-6 bg-gradient-to-br from-yellow-600 to-yellow-400 rounded-full flex items-center justify-center">
145
+ <i data-feather="music" class="w-10 h-10 text-black"></i>
146
+ </div>
147
+ <h3 class="font-display text-2xl mb-4 gold-text">Jazz Ambiance</h3>
148
+ <p class="text-gray-400">Smooth jazz creates the perfect backdrop for your cigar experience</p>
149
+ </div>
150
+
151
+ <div class="glass-effect p-8 rounded-lg text-center hover:transform hover:scale-105 transition-all duration-300" data-aos="fade-up" data-aos-delay="300">
152
+ <div class="w-20 h-20 mx-auto mb-6 bg-gradient-to-br from-yellow-600 to-yellow-400 rounded-full flex items-center justify-center">
153
+ <i data-feather="wine" class="w-10 h-10 text-black"></i>
154
+ </div>
155
+ <h3 class="font-display text-2xl mb-4 gold-text">Whiskey Pairings</h3>
156
+ <p class="text-gray-400">Expertly curated whiskey and cognac selections to complement your cigar</p>
157
+ </div>
158
+ </div>
159
+ </div>
160
+ </section>
161
+
162
+ <!-- Membership Section -->
163
+ <section class="py-20 bg-gradient-to-r from-gray-900 to-black">
164
+ <div class="container mx-auto px-6 text-center">
165
+ <h2 class="font-display text-4xl md:text-5xl mb-6 gold-text" data-aos="fade-up">
166
+ Exclusive Membership
167
+ </h2>
168
+ <p class="text-xl text-gray-300 mb-8 max-w-2xl mx-auto" data-aos="fade-up" data-aos-delay="100">
169
+ Join our elite cigar club and enjoy exclusive access to rare collections, private events, and personalized service
170
+ </p>
171
+ <button class="bg-gradient-to-r from-yellow-600 to-yellow-500 text-black px-8 py-3 rounded-full font-semibold hover:from-yellow-500 hover:to-yellow-400 transition-all duration-300 transform hover:scale-105" data-aos="fade-up" data-aos-delay="200">
172
+ Apply for Membership
173
+ </button>
174
+ </div>
175
+ </section>
176
+
177
+ <!-- Footer -->
178
+ <footer class="bg-gray-900 py-12 border-t border-yellow-900">
179
+ <div class="container mx-auto px-6">
180
+ <div class="grid md:grid-cols-4 gap-8">
181
+ <div>
182
+ <h3 class="font-display text-2xl mb-4 gold-text">The Saxophone Lounge</h3>
183
+ <p class="text-gray-400">Glenvista's premier destination for jazz, fine dining, and sophisticated relaxation.</p>
184
+ </div>
185
+ <div>
186
+ <h4 class="font-semibold mb-4 text-yellow-500">Quick Links</h4>
187
+ <ul class="space-y-2 text-gray-400">
188
+ <li><a href="cigar-lounge.html" class="hover:text-yellow-400">Cigar Lounge</a></li>
189
+ <li><a href="restaurant.html" class="hover:text-yellow-400">Restaurant</a></li>
190
+ <li><a href="barber-shop.html" class="hover:text-yellow-400">Barber Shop</a></li>
191
+ <li><a href="events.html" class="hover:text-yellow-400">Events</a></li>
192
+ </ul>
193
+ </div>
194
+ <div>
195
+ <h4 class="font-semibold mb-4 text-yellow-500">Hours</h4>
196
+ <p class="text-gray-400 mb-2">Monday - Thursday: 5 PM - 12 AM</p>
197
+ <p class="text-gray-400 mb-2">Friday - Saturday: 5 PM - 2 AM</p>
198
+ <p class="text-gray-400">Sunday: 3 PM - 11 PM</p>
199
+ </div>
200
+ <div>
201
+ <h4 class="font-semibold mb-4 text-yellow-500">Contact</h4>
202
+ <p class="text-gray-400 mb-2">123 Jazz Street, Glenvista</p>
203
+ <p class="text-gray-400 mb-2">Johannesburg, South Africa</p>
204
+ <p class="text-gray-400">+27 11 123 4567</p>
205
+ </div>
206
+ </div>
207
+ <div class="mt-8 pt-8 border-t border-gray-800 text-center text-gray-500">
208
+ <p>&copy; 2024 Silk and Falls. All rights reserved.</p>
209
+ </div>
210
+ </div>
211
+ </footer>
212
+
213
+ <script>
214
+ // Initialize AOS
215
+ AOS.init();
216
+
217
+ // Initialize Feather Icons
218
+ feather.replace();
219
+
220
+ // Navbar scroll effect
221
+ window.addEventListener('scroll', function() {
222
+ const navbar = document.getElementById('navbar');
223
+ if (window.scrollY > 50) {
224
+ navbar.classList.add('bg-black', 'bg-opacity-90');
225
+ navbar.classList.remove('bg-transparent');
226
+ } else {
227
+ navbar.classList.remove('bg-black', 'bg-opacity-90');
228
+ navbar.classList.add('bg-transparent');
229
+ }
230
+ });
231
+
232
+ // Mobile menu toggle
233
+ const mobileMenuButton = document.getElementById('mobile-menu-button');
234
+ const mobileMenu = document.createElement('div');
235
+ mobileMenu.innerHTML = `
236
+ <div class="fixed inset-0 bg-black bg-opacity-90 z-50 flex flex-col items-center justify-center space-y-8 text-xl">
237
+ <button id="close-menu" class="absolute top-8 right-8">
238
+ <i data-feather="x" class="w-8 h-8"></i>
239
+ </button>
240
+ <a href="index.html" class="hover:text-yellow-400">Home</a>
241
+ <a href="cigar-lounge.html" class="hover:text-yellow-400">Cigar Lounge</a>
242
+ <a href="restaurant.html" class="hover:text-yellow-400">Restaurant</a>
243
+ <a href="barber-shop.html" class="hover:text-yellow-400">Barber Shop</a>
244
+ <a href="events.html" class="hover:text-yellow-400">Events</a>
245
+ <a href="contact.html" class="hover:text-yellow-400">Contact</a>
246
+ </div>
247
+ `;
248
+
249
+ mobileMenuButton.addEventListener('click', function() {
250
+ document.body.appendChild(mobileMenu);
251
+ feather.replace();
252
+
253
+ document.getElementById('close-menu').addEventListener('click', function() {
254
+ mobileMenu.remove();
255
+ });
256
+ });
257
+ </script>
258
+ </body>
259
+ </html>
events.html ADDED
@@ -0,0 +1,128 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>Events | The Saxophone Lounge</title>
7
+ <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
10
+ <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
11
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
12
+ <style>
13
+ @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Montserrat:wght@300;400;600&display=swap');
14
+
15
+ :root {
16
+ --gold: #D4AF37;
17
+ --black: #0A0A0A;
18
+ --deep-black: #000000;
19
+ --warm-white: #FAF8F3;
20
+ --dark-gold: #B8941F;
21
+ }
22
+
23
+ .font-display { font-family: 'Playfair Display', serif; }
24
+ .font-body { font-family: 'Montserrat', sans-serif; }
25
+
26
+ .gold-text {
27
+ background: linear-gradient(135deg, #D4AF37 0%, #F7E7A1 50%, #D4AF37 100%);
28
+ -webkit-background-clip: text;
29
+ -webkit-text-fill-color: transparent;
30
+ background-clip: text;
31
+ }
32
+
33
+ .glass-effect {
34
+ backdrop-filter: blur(10px);
35
+ background: rgba(0,0,0,0.3);
36
+ border: 1px solid rgba(212,175,55,0.2);
37
+ }
38
+
39
+ .event-gradient {
40
+ background: linear-gradient(135deg, rgba(212,175,55,0.2) 0%, rgba(0,0,0,0.8) 100%);
41
+ }
42
+
43
+ .spotlight-animation {
44
+ animation: spotlight 4s ease-in-out infinite;
45
+ }
46
+
47
+ @keyframes spotlight {
48
+ 0%, 100% { opacity: 0.3; transform: scale(1); }
49
+ 50% { opacity: 0.6; transform: scale(1.1); }
50
+ }
51
+
52
+ .stage-light {
53
+ animation: stagePulse 3s ease-in-out infinite;
54
+ }
55
+
56
+ @keyframes stagePulse {
57
+ 0%, 100% { box-shadow: 0 0 20px rgba(212,175,55,0.3); }
58
+ 50% { box-shadow: 0 0 40px rgba(212,175,55,0.6); }
59
+ }
60
+
61
+ .calendar-pattern {
62
+ background-image:
63
+ repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(212,175,55,0.05) 10px, rgba(212,175,55,0.05) 20px);
64
+ }
65
+
66
+ .ticket-border {
67
+ border: 2px dashed #D4AF37;
68
+ border-radius: 10px;
69
+ }
70
+ </style>
71
+ </head>
72
+ <body class="bg-gray-900 text-white font-body">
73
+ <!-- Navigation -->
74
+ <nav class="fixed w-full z-50 glass-effect transition-all duration-300" id="navbar">
75
+ <div class="container mx-auto px-6 py-4">
76
+ <div class="flex justify-between items-center">
77
+ <div class="font-display text-2xl font-bold gold-text">
78
+ Silk and Falls
79
+ </div>
80
+ <div class="hidden md:flex space-x-8">
81
+ <a href="index.html" class="hover:text-yellow-400 transition-colors duration-300">Home</a>
82
+ <a href="cigar-lounge.html" class="hover:text-yellow-400 transition-colors duration-300">Cigar Lounge</a>
83
+ <a href="restaurant.html" class="hover:text-yellow-400 transition-colors duration-300">Restaurant</a>
84
+ <a href="barber-shop.html" class="hover:text-yellow-400 transition-colors duration-300">Barber Shop</a>
85
+ <a href="events.html" class="hover:text-yellow-400 transition-colors duration-300">Events</a>
86
+ <a href="contact.html" class="hover:text-yellow-400 transition-colors duration-300">Contact</a>
87
+ </div>
88
+ <button class="md:hidden" id="mobile-menu-button">
89
+ <i data-feather="menu" class="w-6 h-6"></i>
90
+ </button>
91
+ </div>
92
+ </div>
93
+ </nav>
94
+
95
+ <!-- Hero Section -->
96
+ <section class="relative h-screen overflow-hidden">
97
+ <div class="absolute inset-0">
98
+ <img src="http://static.photos/event/1200x630/42" alt="Jazz Event" class="w-full h-full object-cover">
99
+ <div class="event-gradient absolute inset-0"></div>
100
+ </div>
101
+
102
+ <div class="absolute inset-0 flex items-center justify-center">
103
+ <div class="text-center px-6" data-aos="fade-up" data-aos-duration="2000">
104
+ <h1 class="font-display text-6xl md:text-8xl font-bold mb-4 gold-text">
105
+ Live Events
106
+ </h1>
107
+ <p class="text-xl md:text-2xl mb-8 text-gray-300 max-w-2xl mx-auto">
108
+ Experience the magic of live jazz performances in an intimate setting
109
+ </p>
110
+ </div>
111
+ </div>
112
+ </section>
113
+
114
+ <!-- Weekly Schedule -->
115
+ <section class="py-20 bg-gradient-to-b from-black to-gray-900 calendar-pattern">
116
+ <div class="container mx-auto px-6">
117
+ <h2 class="font-display text-4xl md:text-5xl text-center mb-16 gold-text" data-aos="fade-up">
118
+ Weekly Jazz Schedule
119
+ </h2>
120
+
121
+ <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
122
+ <div class="glass-effect p-6 rounded-lg text-center stage-light" data-aos="fade-up" data-aos-delay="100">
123
+ <div class="text-yellow-500 font-bold text-sm mb-2">MONDAY</div>
124
+ <h3 class="font-display text-xl mb-2 gold-text">Jazz Standards Night</h3>
125
+ <p class="text-gray-400 text-sm mb-2">7:00 PM - 10:00 PM</p>
126
+ <p class
127
+ </body>
128
+ </html>
index.html CHANGED
@@ -1,19 +1,310 @@
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>The Saxophone Lounge | Glenvista's Premier Jazz Experience</title>
7
+ <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
10
+ <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
11
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
12
+ <script src="https://cdn.jsdelivr.net/npm/animejs/lib/anime.iife.min.js"></script>
13
+ <script src="https://cdn.jsdelivr.net/npm/three@0.119.1/build/three.min.js"></script>
14
+ <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.net.min.js"></script>
15
+ <style>
16
+ @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Montserrat:wght@300;400;600&display=swap');
17
+
18
+ :root {
19
+ --gold: #D4AF37;
20
+ --black: #0A0A0A;
21
+ --deep-black: #000000;
22
+ --warm-white: #FAF8F3;
23
+ --dark-gold: #B8941F;
24
+ }
25
+
26
+ .font-display { font-family: 'Playfair Display', serif; }
27
+ .font-body { font-family: 'Montserrat', sans-serif; }
28
+
29
+ .hero-gradient {
30
+ background: linear-gradient(135deg, rgba(0,0,0,0.8) 0%, rgba(180,148,31,0.3) 100%);
31
+ }
32
+
33
+ .gold-text {
34
+ background: linear-gradient(135deg, #D4AF37 0%, #F7E7A1 50%, #D4AF37 100%);
35
+ -webkit-background-clip: text;
36
+ -webkit-text-fill-color: transparent;
37
+ background-clip: text;
38
+ }
39
+
40
+ .glass-effect {
41
+ backdrop-filter: blur(10px);
42
+ background: rgba(0,0,0,0.3);
43
+ border: 1px solid rgba(212,175,55,0.2);
44
+ }
45
+
46
+ .jazz-pattern {
47
+ background-image:
48
+ radial-gradient(circle at 20% 50%, rgba(212,175,55,0.1) 0%, transparent 50%),
49
+ radial-gradient(circle at 80% 80%, rgba(212,175,55,0.1) 0%, transparent 50%);
50
+ }
51
+
52
+ .floating {
53
+ animation: float 6s ease-in-out infinite;
54
+ }
55
+
56
+ @keyframes float {
57
+ 0%, 100% { transform: translateY(0px); }
58
+ 50% { transform: translateY(-20px); }
59
+ }
60
+
61
+ .saxophone-silhouette {
62
+ background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M30 20 Q50 30 60 50 L60 70 Q50 80 30 80 Z' fill='%23D4AF37' opacity='0.3'/%3E%3C/svg%3E") no-repeat center;
63
+ background-size: contain;
64
+ }
65
+
66
+ .note-animation {
67
+ animation: noteFloat 4s ease-in-out infinite;
68
+ }
69
+
70
+ @keyframes noteFloat {
71
+ 0%, 100% { transform: translateX(0) translateY(0) rotate(0deg); opacity: 0.3; }
72
+ 25% { transform: translateX(20px) translateY(-30px) rotate(15deg); opacity: 0.6; }
73
+ 50% { transform: translateX(-10px) translateY(-50px) rotate(-10deg); opacity: 0.8; }
74
+ 75% { transform: translateX(30px) translateY(-20px) rotate(20deg); opacity: 0.6; }
75
+ }
76
+ </style>
77
+ </head>
78
+ <body class="bg-gray-900 text-white font-body">
79
+ <!-- Navigation -->
80
+ <nav class="fixed w-full z-50 glass-effect transition-all duration-300" id="navbar">
81
+ <div class="container mx-auto px-6 py-4">
82
+ <div class="flex justify-between items-center">
83
+ <div class="font-display text-2xl font-bold gold-text">
84
+ Silk and Falls
85
+ </div>
86
+ <div class="hidden md:flex space-x-8">
87
+ <a href="index.html" class="hover:text-yellow-400 transition-colors duration-300">Home</a>
88
+ <a href="cigar-lounge.html" class="hover:text-yellow-400 transition-colors duration-300">Cigar Lounge</a>
89
+ <a href="restaurant.html" class="hover:text-yellow-400 transition-colors duration-300">Restaurant</a>
90
+ <a href="barber-shop.html" class="hover:text-yellow-400 transition-colors duration-300">Barber Shop</a>
91
+ <a href="events.html" class="hover:text-yellow-400 transition-colors duration-300">Events</a>
92
+ <a href="contact.html" class="hover:text-yellow-400 transition-colors duration-300">Contact</a>
93
+ </div>
94
+ <button class="md:hidden" id="mobile-menu-button">
95
+ <i data-feather="menu" class="w-6 h-6"></i>
96
+ </button>
97
+ </div>
98
+ </div>
99
+ </nav>
100
+
101
+ <!-- Hero Section -->
102
+ <section class="relative h-screen overflow-hidden" id="hero">
103
+ <div id="vanta-bg" class="absolute inset-0"></div>
104
+ <div class="hero-gradient absolute inset-0"></div>
105
+
106
+ <!-- Floating musical notes -->
107
+ <div class="absolute inset-0 pointer-events-none">
108
+ <div class="note-animation absolute top-20 left-10 text-4xl gold-text">♪</div>
109
+ <div class="note-animation absolute top-40 right-20 text-6xl gold-text" style="animation-delay: 1s;">♫</div>
110
+ <div class="note-animation absolute bottom-40 left-32 text-5xl gold-text" style="animation-delay: 2s;">♪</div>
111
+ <div class="note-animation absolute top-60 right-40 text-4xl gold-text" style="animation-delay: 3s;">♬</div>
112
+ </div>
113
+
114
+ <div class="relative z-10 h-full flex items-center justify-center text-center px-6">
115
+ <div data-aos="fade-up" data-aos-duration="2000">
116
+ <h1 class="font-display text-6xl md:text-8xl font-bold mb-4 gold-text">
117
+ Silk and Falls
118
+ </h1>
119
+ <p class="text-xl md:text-2xl mb-8 text-gray-300">
120
+ Where Jazz Meets Elegance in Glenvista
121
+ </p>
122
+ <div class="flex flex-col md:flex-row gap-4 justify-center">
123
+ <button class="bg-gradient-to-r from-yellow-600 to-yellow-500 text-black px-8 py-3 rounded-full font-semibold hover:from-yellow-500 hover:to-yellow-400 transition-all duration-300 transform hover:scale-105">
124
+ Reserve Your Table
125
+ </button>
126
+ <button class="border-2 border-yellow-500 text-yellow-500 px-8 py-3 rounded-full font-semibold hover:bg-yellow-500 hover:text-black transition-all duration-300">
127
+ View Events
128
+ </button>
129
+ </div>
130
+ </div>
131
+ </div>
132
+
133
+ <div class="absolute bottom-10 left-1/2 transform -translate-x-1/2 floating">
134
+ <i data-feather="chevron-down" class="w-8 h-8 gold-text"></i>
135
+ </div>
136
+ </section>
137
+
138
+ <!-- Features Section -->
139
+ <section class="py-20 bg-gradient-to-b from-black to-gray-900 jazz-pattern">
140
+ <div class="container mx-auto px-6">
141
+ <h2 class="font-display text-4xl md:text-5xl text-center mb-16 gold-text" data-aos="fade-up">
142
+ Experience Luxury
143
+ </h2>
144
+
145
+ <div class="grid md:grid-cols-3 gap-8">
146
+ <div class="glass-effect p-8 rounded-lg text-center hover:transform hover:scale-105 transition-all duration-300" data-aos="fade-up" data-aos-delay="100">
147
+ <div class="w-20 h-20 mx-auto mb-6 bg-gradient-to-br from-yellow-600 to-yellow-400 rounded-full flex items-center justify-center">
148
+ <i data-feather="music" class="w-10 h-10 text-black"></i>
149
+ </div>
150
+ <h3 class="font-display text-2xl mb-4 gold-text">Live Jazz</h3>
151
+ <p class="text-gray-400">Immerse yourself in the smooth sounds of live jazz performances every night</p>
152
+ </div>
153
+
154
+ <div class="glass-effect p-8 rounded-lg text-center hover:transform hover:scale-105 transition-all duration-300" data-aos="fade-up" data-aos-delay="200">
155
+ <div class="w-20 h-20 mx-auto mb-6 bg-gradient-to-br from-yellow-600 to-yellow-400 rounded-full flex items-center justify-center">
156
+ <i data-feather="coffee" class="w-10 h-10 text-black"></i>
157
+ </div>
158
+ <h3 class="font-display text-2xl mb-4 gold-text">Waterfall Deck</h3>
159
+ <p class="text-gray-400">Study or work while enjoying the serene view of our cascading waterfall</p>
160
+ </div>
161
+
162
+ <div class="glass-effect p-8 rounded-lg text-center hover:transform hover:scale-105 transition-all duration-300" data-aos="fade-up" data-aos-delay="300">
163
+ <div class="w-20 h-20 mx-auto mb-6 bg-gradient-to-br from-yellow-600 to-yellow-400 rounded-full flex items-center justify-center">
164
+ <i data-feather="scissors" class="w-10 h-10 text-black"></i>
165
+ </div>
166
+ <h3 class="font-display text-2xl mb-4 gold-text">Gentlemen's Grooming</h3>
167
+ <p class="text-gray-400">Premium barber shop services in an atmosphere of refined masculinity</p>
168
+ </div>
169
+ </div>
170
+ </div>
171
+ </section>
172
+
173
+ <!-- Upcoming Events -->
174
+ <section class="py-20 bg-black">
175
+ <div class="container mx-auto px-6">
176
+ <h2 class="font-display text-4xl md:text-5xl text-center mb-16 gold-text" data-aos="fade-up">
177
+ Upcoming Events
178
+ </h2>
179
+
180
+ <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
181
+ <div class="glass-effect rounded-lg overflow-hidden hover:transform hover:scale-105 transition-all duration-300" data-aos="fade-up" data-aos-delay="100">
182
+ <img src="http://static.photos/jazz/640x360/42" alt="Jazz Night" class="w-full h-48 object-cover">
183
+ <div class="p-6">
184
+ <h3 class="font-display text-xl mb-2 gold-text">Soulful Thursday</h3>
185
+ <p class="text-gray-400 mb-4">Every Thursday at 8 PM</p>
186
+ <p class="text-sm text-gray-500">Experience the smoothest jazz vocals with our featured artists</p>
187
+ </div>
188
+ </div>
189
+
190
+ <div class="glass-effect rounded-lg overflow-hidden hover:transform hover:scale-105 transition-all duration-300" data-aos="fade-up" data-aos-delay="200">
191
+ <img src="http://static.photos/cocktail/640x360/133" alt="Cocktail Night" class="w-full h-48 object-cover">
192
+ <div class="p-6">
193
+ <h3 class="font-display text-xl mb-2 gold-text">Cocktail Jazz Fridays</h3>
194
+ <p class="text-gray-400 mb-4">Every Friday at 9 PM</p>
195
+ <p class="text-sm text-gray-500">Sip on signature cocktails while enjoying live jazz performances</p>
196
+ </div>
197
+ </div>
198
+
199
+ <div class="glass-effect rounded-lg overflow-hidden hover:transform hover:scale-105 transition-all duration-300" data-aos="fade-up" data-aos-delay="300">
200
+ <img src="http://static.photos/lounge/640x360/77" alt="Weekend Jazz" class="w-full h-48 object-cover">
201
+ <div class="p-6">
202
+ <h3 class="font-display text-xl mb-2 gold-text">Saturday Jazz Brunch</h3>
203
+ <p class="text-gray-400 mb-4">Saturdays 11 AM - 3 PM</p>
204
+ <p class="text-sm text-gray-500">Weekend brunch with smooth jazz and bottomless mimosas</p>
205
+ </div>
206
+ </div>
207
+ </div>
208
+ </div>
209
+ </section>
210
+
211
+ <!-- Footer -->
212
+ <footer class="bg-gray-900 py-12 border-t border-yellow-900">
213
+ <div class="container mx-auto px-6">
214
+ <div class="grid md:grid-cols-4 gap-8">
215
+ <div>
216
+ <h3 class="font-display text-2xl mb-4 gold-text">The Saxophone Lounge</h3>
217
+ <p class="text-gray-400">Glenvista's premier destination for jazz, fine dining, and sophisticated relaxation.</p>
218
+ </div>
219
+ <div>
220
+ <h4 class="font-semibold mb-4 text-yellow-500">Quick Links</h4>
221
+ <ul class="space-y-2 text-gray-400">
222
+ <li><a href="cigar-lounge.html" class="hover:text-yellow-400">Cigar Lounge</a></li>
223
+ <li><a href="restaurant.html" class="hover:text-yellow-400">Restaurant</a></li>
224
+ <li><a href="barber-shop.html" class="hover:text-yellow-400">Barber Shop</a></li>
225
+ <li><a href="events.html" class="hover:text-yellow-400">Events</a></li>
226
+ </ul>
227
+ </div>
228
+ <div>
229
+ <h4 class="font-semibold mb-4 text-yellow-500">Hours</h4>
230
+ <p class="text-gray-400 mb-2">Monday - Thursday: 5 PM - 12 AM</p>
231
+ <p class="text-gray-400 mb-2">Friday - Saturday: 5 PM - 2 AM</p>
232
+ <p class="text-gray-400">Sunday: 3 PM - 11 PM</p>
233
+ </div>
234
+ <div>
235
+ <h4 class="font-semibold mb-4 text-yellow-500">Contact</h4>
236
+ <p class="text-gray-400 mb-2">123 Jazz Street, Glenvista</p>
237
+ <p class="text-gray-400 mb-2">Johannesburg, South Africa</p>
238
+ <p class="text-gray-400">+27 11 123 4567</p>
239
+ </div>
240
+ </div>
241
+ <div class="mt-8 pt-8 border-t border-gray-800 text-center text-gray-500">
242
+ <p>&copy; 2024 Silk and Falls. All rights reserved.</p>
243
+ </div>
244
+ </div>
245
+ </footer>
246
+
247
+ <script>
248
+ // Initialize AOS
249
+ AOS.init();
250
+
251
+ // Initialize Feather Icons
252
+ feather.replace();
253
+
254
+ // Vanta.js Background
255
+ VANTA.NET({
256
+ el: "#vanta-bg",
257
+ mouseControls: true,
258
+ touchControls: true,
259
+ gyroControls: false,
260
+ minHeight: 200.00,
261
+ minWidth: 200.00,
262
+ scale: 1.00,
263
+ scaleMobile: 1.00,
264
+ color: 0xd4af37,
265
+ backgroundColor: 0x0a0a0a,
266
+ points: 8.00,
267
+ maxDistance: 25.00,
268
+ spacing: 18.00
269
+ });
270
+
271
+ // Navbar scroll effect
272
+ window.addEventListener('scroll', function() {
273
+ const navbar = document.getElementById('navbar');
274
+ if (window.scrollY > 50) {
275
+ navbar.classList.add('bg-black', 'bg-opacity-90');
276
+ navbar.classList.remove('bg-transparent');
277
+ } else {
278
+ navbar.classList.remove('bg-black', 'bg-opacity-90');
279
+ navbar.classList.add('bg-transparent');
280
+ }
281
+ });
282
+
283
+ // Mobile menu toggle
284
+ const mobileMenuButton = document.getElementById('mobile-menu-button');
285
+ const mobileMenu = document.createElement('div');
286
+ mobileMenu.innerHTML = `
287
+ <div class="fixed inset-0 bg-black bg-opacity-90 z-50 flex flex-col items-center justify-center space-y-8 text-xl">
288
+ <button id="close-menu" class="absolute top-8 right-8">
289
+ <i data-feather="x" class="w-8 h-8"></i>
290
+ </button>
291
+ <a href="index.html" class="hover:text-yellow-400">Home</a>
292
+ <a href="cigar-lounge.html" class="hover:text-yellow-400">Cigar Lounge</a>
293
+ <a href="restaurant.html" class="hover:text-yellow-400">Restaurant</a>
294
+ <a href="barber-shop.html" class="hover:text-yellow-400">Barber Shop</a>
295
+ <a href="events.html" class="hover:text-yellow-400">Events</a>
296
+ <a href="contact.html" class="hover:text-yellow-400">Contact</a>
297
+ </div>
298
+ `;
299
+
300
+ mobileMenuButton.addEventListener('click', function() {
301
+ document.body.appendChild(mobileMenu);
302
+ feather.replace();
303
+
304
+ document.getElementById('close-menu').addEventListener('click', function() {
305
+ mobileMenu.remove();
306
+ });
307
+ });
308
+ </script>
309
+ </body>
310
  </html>
prompts.txt ADDED
@@ -0,0 +1,2 @@
 
 
 
1
+ Create an interactive site for a jazz lounge based in glenvista Johannesburg, the jazz lounge has a cigar lounge, restaurant, and barber shop men's grooming area. Create each page separately. The jazz lounge has a cocktail bar live music and a waterfall with a studying view from the deck. They are live events that happen. Create a beautiful site that flows with ambiance and with gold Black and jazzy colours
2
+ The name of the Jazz Lounge is Silk and Falls
restaurant.html ADDED
@@ -0,0 +1,289 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>Restaurant | The Saxophone Lounge</title>
7
+ <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
10
+ <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
11
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
12
+ <style>
13
+ @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Montserrat:wght@300;400;600&display=swap');
14
+
15
+ :root {
16
+ --gold: #D4AF37;
17
+ --black: #0A0A0A;
18
+ --deep-black: #000000;
19
+ --warm-white: #FAF8F3;
20
+ --dark-gold: #B8941F;
21
+ }
22
+
23
+ .font-display { font-family: 'Playfair Display', serif; }
24
+ .font-body { font-family: 'Montserrat', sans-serif; }
25
+
26
+ .gold-text {
27
+ background: linear-gradient(135deg, #D4AF37 0%, #F7E7A1 50%, #D4AF37 100%);
28
+ -webkit-background-clip: text;
29
+ -webkit-text-fill-color: transparent;
30
+ background-clip: text;
31
+ }
32
+
33
+ .glass-effect {
34
+ backdrop-filter: blur(10px);
35
+ background: rgba(0,0,0,0.3);
36
+ border: 1px solid rgba(212,175,55,0.2);
37
+ }
38
+
39
+ .menu-gradient {
40
+ background: linear-gradient(135deg, rgba(212,175,55,0.1) 0%, rgba(0,0,0,0.9) 100%);
41
+ }
42
+
43
+ .plate-animation {
44
+ animation: plateSpin 20s linear infinite;
45
+ }
46
+
47
+ @keyframes plateSpin {
48
+ 0% { transform: rotate(0deg); }
49
+ 100% { transform: rotate(360deg); }
50
+ }
51
+
52
+ .steam-animation {
53
+ animation: steamRise 3s ease-in-out infinite;
54
+ }
55
+
56
+ @keyframes steamRise {
57
+ 0%, 100% { transform: translateY(0) scale(1); opacity: 0.6; }
58
+ 50% { transform: translateY(-10px) scale(1.1); opacity: 0.3; }
59
+ }
60
+
61
+ .wine-stain {
62
+ background: radial-gradient(circle at 50% 50%, rgba(139,29,19,0.1) 0%, transparent 70%);
63
+ }
64
+ </style>
65
+ </head>
66
+ <body class="bg-gray-900 text-white font-body">
67
+ <!-- Navigation -->
68
+ <nav class="fixed w-full z-50 glass-effect transition-all duration-300" id="navbar">
69
+ <div class="container mx-auto px-6 py-4">
70
+ <div class="flex justify-between items-center">
71
+ <div class="font-display text-2xl font-bold gold-text">
72
+ Silk and Falls
73
+ </div>
74
+ <div class="hidden md:flex space-x-8">
75
+ <a href="index.html" class="hover:text-yellow-400 transition-colors duration-300">Home</a>
76
+ <a href="cigar-lounge.html" class="hover:text-yellow-400 transition-colors duration-300">Cigar Lounge</a>
77
+ <a href="restaurant.html" class="hover:text-yellow-400 transition-colors duration-300">Restaurant</a>
78
+ <a href="barber-shop.html" class="hover:text-yellow-400 transition-colors duration-300">Barber Shop</a>
79
+ <a href="events.html" class="hover:text-yellow-400 transition-colors duration-300">Events</a>
80
+ <a href="contact.html" class="hover:text-yellow-400 transition-colors duration-300">Contact</a>
81
+ </div>
82
+ <button class="md:hidden" id="mobile-menu-button">
83
+ <i data-feather="menu" class="w-6 h-6"></i>
84
+ </button>
85
+ </div>
86
+ </div>
87
+ </nav>
88
+
89
+ <!-- Hero Section -->
90
+ <section class="relative h-screen overflow-hidden">
91
+ <div class="absolute inset-0">
92
+ <img src="http://static.photos/restaurant/1200x630/66" alt="Restaurant" class="w-full h-full object-cover">
93
+ <div class="absolute inset-0 bg-gradient-to-b from-black via-transparent to-black opacity-80"></div>
94
+ </div>
95
+
96
+ <div class="absolute inset-0 flex items-center justify-center">
97
+ <div class="text-center px-6" data-aos="fade-up" data-aos-duration="2000">
98
+ <h1 class="font-display text-6xl md:text-8xl font-bold mb-4 gold-text">
99
+ Culinary Excellence
100
+ </h1>
101
+ <p class="text-xl md:text-2xl mb-8 text-gray-300 max-w-2xl mx-auto">
102
+ A symphony of flavors where jazz meets gastronomic artistry
103
+ </p>
104
+ </div>
105
+ </div>
106
+ </section>
107
+
108
+ <!-- Cuisine Section -->
109
+ <section class="py-20 bg-gradient-to-b from-black to-gray-900 wine-stain">
110
+ <div class="container mx-auto px-6">
111
+ <div class="grid md:grid-cols-2 gap-12 items-center">
112
+ <div data-aos="fade-right">
113
+ <h2 class="font-display text-4xl md:text-5xl mb-6 gold-text">Contemporary Cuisine</h2>
114
+ <p class="text-gray-300 mb-6 text-lg">
115
+ Our award-winning chefs create culinary masterpieces that harmonize with the jazz ambiance. From succulent steaks to delicate seafood, every dish is a celebration of flavor.
116
+ </p>
117
+ <div class="space-y-4">
118
+ <div class="flex justify-between items-center border-b border-yellow-900 pb-2">
119
+ <span class="text-yellow-400 font-semibold">Wagyu Ribeye</span>
120
+ <span class="gold-text">R850</span>
121
+ </div>
122
+ <div class="flex justify-between items-center border-b border-yellow-900 pb-2">
123
+ <span class="text-yellow-400 font-semibold">Lobster Thermidor</span>
124
+ <span class="gold-text">R650</span>
125
+ </div>
126
+ <div class="flex justify-between items-center border-b border-yellow-900 pb-2">
127
+ <span class="text-yellow-400 font-semibold">Truffle Risotto</span>
128
+ <span class="gold-text">R420</span>
129
+ </div>
130
+ </div>
131
+ </div>
132
+ <div class="relative" data-aos="fade-left">
133
+ <img src="http://static.photos/food/640x360/42" alt="Fine Dining" class="rounded-lg shadow-2xl">
134
+ <div class="plate-animation absolute -top-4 -right-4 w-24 h-24 bg-gradient-to-br from-yellow-600 to-yellow-400 rounded-full flex items-center justify-center">
135
+ <i data-feather="star" class="w-12 h-12 text-black"></i>
136
+ </div>
137
+ </div>
138
+ </div>
139
+ </div>
140
+ </section>
141
+
142
+ <!-- Jazz Brunch Section -->
143
+ <section class="py-20 bg-black">
144
+ <div class="container mx-auto px-6">
145
+ <h2 class="font-display text-4xl md:text-5xl text-center mb-16 gold-text" data-aos="fade-up">
146
+ Jazz Brunch Experience
147
+ </h2>
148
+
149
+ <div class="grid md:grid-cols-3 gap-8">
150
+ <div class="glass-effect p-8 rounded-lg text-center hover:transform hover:scale-105 transition-all duration-300" data-aos="fade-up" data-aos-delay="100">
151
+ <div class="w-20 h-20 mx-auto mb-6 bg-gradient-to-br from-yellow-600 to-yellow-400 rounded-full flex items-center justify-center steam-animation">
152
+ <i data-feather="coffee" class="w-10 h-10 text-black"></i>
153
+ </div>
154
+ <h3 class="font-display text-2xl mb-4 gold-text">Weekend Jazz Brunch</h3>
155
+ <p class="text-gray-400">Every Saturday & Sunday 11 AM - 3 PM</p>
156
+ <p class="text-sm text-gray-500 mt-2">Bottomless mimosas and live jazz</p>
157
+ </div>
158
+
159
+ <div class="glass-effect p-8 rounded-lg text-center hover:transform hover:scale-105 transition-all duration-300" data-aos="fade-up" data-aos-delay="200">
160
+ <div class="w-20 h-20 mx-auto mb-6 bg-gradient-to-br from-yellow-600 to-yellow-400 rounded-full flex items-center justify-center">
161
+ <i data-feather="music" class="w-10 h-10 text-black"></i>
162
+ </div>
163
+ <h3 class="font-display text-2xl mb-4 gold-text">Live Cooking Station</h3>
164
+ <p class="text-gray-400">Interactive dining experience</p>
165
+ <p class="text-sm text-gray-500 mt-2">Watch our chefs create magic</p>
166
+ </div>
167
+
168
+ <div class="glass-effect p-8 rounded-lg text-center hover:transform hover:scale-105 transition-all duration-300" data-aos="fade-up" data-aos-delay="300">
169
+ <div class="w-20 h-20 mx-auto mb-6 bg-gradient-to-br from-yellow-600 to-yellow-400 rounded-full flex items-center justify-center">
170
+ <i data-feather="wine" class="w-10 h-10 text-black"></i>
171
+ </div>
172
+ <h3 class="font-display text-2xl mb-4 gold-text">Wine Pairings</h3>
173
+ <p class="text-gray-400">Curated wine selections</p>
174
+ <p class="text-sm text-gray-500 mt-2">Perfect pairings with every course</p>
175
+ </div>
176
+ </div>
177
+ </div>
178
+ </section>
179
+
180
+ <!-- Chef's Table Section -->
181
+ <section class="py-20 bg-gradient-to-r from-gray-900 to-black">
182
+ <div class="container mx-auto px-6">
183
+ <div class="grid md:grid-cols-2 gap-12 items-center">
184
+ <div class="relative" data-aos="fade-right">
185
+ <img src="http://static.photos/restaurant/640x360/77" alt="Chef's Table" class="rounded-lg shadow-2xl">
186
+ <div class="steam-animation absolute top-4 right-4 text-4xl opacity-30">💨</div>
187
+ </div>
188
+ <div data-aos="fade-left">
189
+ <h2 class="font-display text-4xl md:text-5xl mb-6 gold-text">Chef's Table Experience</h2>
190
+ <p class="text-gray-300 mb-6 text-lg">
191
+ An intimate culinary journey where our executive chef creates a personalized multi-course tasting menu paired with live jazz performances.
192
+ </p>
193
+ <ul class="space-y-3 text-gray-400 mb-8">
194
+ <li class="flex items-center"><i data-feather="star" class="w-5 h-5 mr-3 text-yellow-500"></i> 7-Course Tasting Menu</li>
195
+ <li class="flex items-center"><i data-feather="star" class="w-5 h-5 mr-3 text-yellow-500"></i> Private Jazz Trio</li>
196
+ <li class="flex items-center"><i data-feather="star" class="w-5 h-5 mr-3 text-yellow-500"></i> Wine Pairing Included</li>
197
+ <li class="flex items-center"><i data-feather="star" class="w-5 h-5 mr-3 text-yellow-500"></i> Maximum 8 Guests</li>
198
+ </ul>
199
+ <button class="bg-gradient-to-r from-yellow-600 to-yellow-500 text-black px-8 py-3 rounded-full font-semibold hover:from-yellow-500 hover:to-yellow-400 transition-all duration-300 transform hover:scale-105">
200
+ Reserve Chef's Table
201
+ </button>
202
+ </div>
203
+ </div>
204
+ </div>
205
+ </section>
206
+
207
+ <!-- Footer -->
208
+ <footer class="bg-gray-900 py-12 border-t border-yellow-900">
209
+ <div class="container mx-auto px-6">
210
+ <div class="grid md:grid-cols-4 gap-8">
211
+ <div>
212
+ <h3 class="font-display text-2xl mb-4 gold-text">The Saxophone Lounge</h3>
213
+ <p class="text-gray-400">Glenvista's premier destination for jazz, fine dining, and sophisticated relaxation.</p>
214
+ </div>
215
+ <div>
216
+ <h4 class="font-semibold mb-4 text-yellow-500">Quick Links</h4>
217
+ <ul class="space-y-2 text-gray-400">
218
+ <li><a href="cigar-lounge.html" class="hover:text-yellow-400">Cigar Lounge</a></li>
219
+ <li><a href="restaurant.html" class="hover:text-yellow-400">Restaurant</a></li>
220
+ <li><a href="barber-shop.html" class="hover:text-yellow-400">Barber Shop</a></li>
221
+ <li><a href="events.html" class="hover:text-yellow-400">Events</a></li>
222
+ </ul>
223
+ </div>
224
+ <div>
225
+ <h4 class="font-semibold mb-4 text-yellow-500">Hours</h4>
226
+ <p class="text-gray-400 mb-2">Monday - Thursday: 5 PM - 12 AM</p>
227
+ <p class="text-gray-400 mb-2">Friday - Saturday: 5 PM - 2 AM</p>
228
+ <p class="text-gray-400">Sunday: 3 PM - 11 PM</p>
229
+ </div>
230
+ <div>
231
+ <h4 class="font-semibold mb-4 text-yellow-500">Contact</h4>
232
+ <p class="text-gray-400 mb-2">123 Jazz Street, Glenvista</p>
233
+ <p class="text-gray-400 mb-2">Johannesburg, South Africa</p>
234
+ <p class="text-gray-400">+27 11 123 4567</p>
235
+ </div>
236
+ </div>
237
+ <div class="mt-8 pt-8 border-t border-gray-800 text-center text-gray-500">
238
+ <p>&copy; 2024 Silk and Falls. All rights reserved.</p>
239
+ </div>
240
+ </div>
241
+ </footer>
242
+
243
+ <script>
244
+ // Initialize AOS
245
+ AOS.init();
246
+
247
+ // Initialize Feather Icons
248
+ feather.replace();
249
+
250
+ // Navbar scroll effect
251
+ window.addEventListener('scroll', function() {
252
+ const navbar = document.getElementById('navbar');
253
+ if (window.scrollY > 50) {
254
+ navbar.classList.add('bg-black', 'bg-opacity-90');
255
+ navbar.classList.remove('bg-transparent');
256
+ } else {
257
+ navbar.classList.remove('bg-black', 'bg-opacity-90');
258
+ navbar.classList.add('bg-transparent');
259
+ }
260
+ });
261
+
262
+ // Mobile menu toggle
263
+ const mobileMenuButton = document.getElementById('mobile-menu-button');
264
+ const mobileMenu = document.createElement('div');
265
+ mobileMenu.innerHTML = `
266
+ <div class="fixed inset-0 bg-black bg-opacity-90 z-50 flex flex-col items-center justify-center space-y-8 text-xl">
267
+ <button id="close-menu" class="absolute top-8 right-8">
268
+ <i data-feather="x" class="w-8 h-8"></i>
269
+ </button>
270
+ <a href="index.html" class="hover:text-yellow-400">Home</a>
271
+ <a href="cigar-lounge.html" class="hover:text-yellow-400">Cigar Lounge</a>
272
+ <a href="restaurant.html" class="hover:text-yellow-400">Restaurant</a>
273
+ <a href="barber-shop.html" class="hover:text-yellow-400">Barber Shop</a>
274
+ <a href="events.html" class="hover:text-yellow-400">Events</a>
275
+ <a href="contact.html" class="hover:text-yellow-400">Contact</a>
276
+ </div>
277
+ `;
278
+
279
+ mobileMenuButton.addEventListener('click', function() {
280
+ document.body.appendChild(mobileMenu);
281
+ feather.replace();
282
+
283
+ document.getElementById('close-menu').addEventListener('click', function() {
284
+ mobileMenu.remove();
285
+ });
286
+ });
287
+ </script>
288
+ </body>
289
+ </html>