I need it to be in Swedish, also, the club is called Stardust.
Browse files- README.md +9 -5
- history.html +255 -0
- index.html +244 -18
- menu.html +605 -0
- performances.html +387 -0
- reservation.html +293 -0
README.md
CHANGED
|
@@ -1,10 +1,14 @@
|
|
| 1 |
---
|
| 2 |
-
title:
|
| 3 |
-
|
| 4 |
-
|
| 5 |
-
|
| 6 |
sdk: static
|
| 7 |
pinned: false
|
|
|
|
|
|
|
| 8 |
---
|
| 9 |
|
| 10 |
-
|
|
|
|
|
|
|
|
|
| 1 |
---
|
| 2 |
+
title: undefined
|
| 3 |
+
colorFrom: blue
|
| 4 |
+
colorTo: blue
|
| 5 |
+
emoji: 🐳
|
| 6 |
sdk: static
|
| 7 |
pinned: false
|
| 8 |
+
tags:
|
| 9 |
+
- deepsite-v3
|
| 10 |
---
|
| 11 |
|
| 12 |
+
# Welcome to your new DeepSite project!
|
| 13 |
+
This project was created with [DeepSite](https://deepsite.hf.co).
|
| 14 |
+
|
history.html
ADDED
|
@@ -0,0 +1,255 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 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>Performance History | Groovy Beats & Smooth Seats</title>
|
| 7 |
+
<link rel="icon" type="image/x-icon" href="/static/favicon.ico">
|
| 8 |
+
<script src="https://cdn.tailwindcss.com"></script>
|
| 9 |
+
<script src="https://unpkg.com/feather-icons"></script>
|
| 10 |
+
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
|
| 11 |
+
<style>
|
| 12 |
+
.timeline-item:not(:last-child):after {
|
| 13 |
+
content: '';
|
| 14 |
+
position: absolute;
|
| 15 |
+
left: 50%;
|
| 16 |
+
bottom: 0;
|
| 17 |
+
transform: translateX(-50%);
|
| 18 |
+
width: 2px;
|
| 19 |
+
height: 40px;
|
| 20 |
+
background: linear-gradient(to bottom, rgba(217, 119, 6, 0.5), transparent);
|
| 21 |
+
}
|
| 22 |
+
.timeline-dot {
|
| 23 |
+
box-shadow: 0 0 0 4px rgba(217, 119, 6, 0.2);
|
| 24 |
+
}
|
| 25 |
+
</style>
|
| 26 |
+
</head>
|
| 27 |
+
<body class="bg-gray-900 text-gray-100 font-sans">
|
| 28 |
+
<!-- Navigation -->
|
| 29 |
+
<nav class="bg-black bg-opacity-70 backdrop-filter backdrop-blur-sm sticky top-0 z-50">
|
| 30 |
+
<div class="container mx-auto px-6 py-4">
|
| 31 |
+
<div class="flex items-center justify-between">
|
| 32 |
+
<div class="flex items-center space-x-4">
|
| 33 |
+
<i data-feather="music" class="text-amber-500"></i>
|
| 34 |
+
<span class="text-xl font-bold bg-gradient-to-r from-amber-400 to-amber-600 bg-clip-text text-transparent">Groovy Beats</span>
|
| 35 |
+
</div>
|
| 36 |
+
<div class="hidden md:flex items-center space-x-8">
|
| 37 |
+
<a href="index.html" class="text-gray-300 hover:text-amber-400 transition">Home</a>
|
| 38 |
+
<a href="performances.html" class="text-gray-300 hover:text-amber-400 transition">Performances</a>
|
| 39 |
+
<a href="history.html" class="text-amber-400 font-medium hover:text-amber-300 transition">History</a>
|
| 40 |
+
<a href="menu.html" class="text-gray-300 hover:text-amber-400 transition">Menu</a>
|
| 41 |
+
<a href="reservation.html" class="bg-amber-600 hover:bg-amber-700 text-white px-4 py-2 rounded-full transition">Reserve Table</a>
|
| 42 |
+
</div>
|
| 43 |
+
<button class="md:hidden text-gray-300 focus:outline-none">
|
| 44 |
+
<i data-feather="menu"></i>
|
| 45 |
+
</button>
|
| 46 |
+
</div>
|
| 47 |
+
</div>
|
| 48 |
+
</nav>
|
| 49 |
+
|
| 50 |
+
<!-- Main Content -->
|
| 51 |
+
<main class="relative z-10 py-12">
|
| 52 |
+
<div class="container mx-auto px-6">
|
| 53 |
+
<div class="mb-12 text-center">
|
| 54 |
+
<h1 class="text-4xl md:text-5xl font-bold mb-4">
|
| 55 |
+
<span class="bg-gradient-to-r from-amber-400 to-amber-600 bg-clip-text text-transparent">Legendary</span> Performances
|
| 56 |
+
</h1>
|
| 57 |
+
<p class="text-gray-400 max-w-2xl mx-auto">
|
| 58 |
+
For over five decades, Groovy Beats has hosted the most iconic names in jazz. Relive our storied past through these memorable performances.
|
| 59 |
+
</p>
|
| 60 |
+
</div>
|
| 61 |
+
|
| 62 |
+
<!-- Timeline -->
|
| 63 |
+
<div class="relative max-w-4xl mx-auto">
|
| 64 |
+
<!-- Timeline Line -->
|
| 65 |
+
<div class="absolute left-1/2 top-0 bottom-0 w-1 bg-gradient-to-b from-amber-500 to-transparent transform -translate-x-1/2"></div>
|
| 66 |
+
|
| 67 |
+
<!-- Timeline Items -->
|
| 68 |
+
<div class="space-y-16">
|
| 69 |
+
<!-- Timeline Item 1 -->
|
| 70 |
+
<div class="relative timeline-item">
|
| 71 |
+
<div class="flex flex-col md:flex-row items-center">
|
| 72 |
+
<div class="md:w-1/2 md:pr-12 mb-8 md:mb-0 md:text-right">
|
| 73 |
+
<div class="space-y-2">
|
| 74 |
+
<span class="text-sm text-amber-400 font-medium">May 12, 1967</span>
|
| 75 |
+
<h3 class="text-2xl font-bold">Miles Davis Quintet</h3>
|
| 76 |
+
<p class="text-gray-400">
|
| 77 |
+
Our opening night featured the legendary Miles Davis Quintet in one of their last performances before disbanding.
|
| 78 |
+
</p>
|
| 79 |
+
</div>
|
| 80 |
+
</div>
|
| 81 |
+
<div class="hidden md:block absolute left-1/2 transform -translate-x-1/2 w-4 h-4 bg-amber-500 rounded-full timeline-dot"></div>
|
| 82 |
+
<div class="md:w-1/2 md:pl-12">
|
| 83 |
+
<div class="bg-gray-800 rounded-xl overflow-hidden group">
|
| 84 |
+
<img src="http://static.photos/black/640x360/10" alt="Miles Davis performance" class="w-full h-64 object-cover group-hover:scale-105 transition duration-500">
|
| 85 |
+
</div>
|
| 86 |
+
</div>
|
| 87 |
+
</div>
|
| 88 |
+
</div>
|
| 89 |
+
|
| 90 |
+
<!-- Timeline Item 2 -->
|
| 91 |
+
<div class="relative timeline-item">
|
| 92 |
+
<div class="flex flex-col md:flex-row items-center">
|
| 93 |
+
<div class="md:w-1/2 md:pr-12 order-2 md:order-1 mb-8 md:mb-0">
|
| 94 |
+
<div class="bg-gray-800 rounded-xl overflow-hidden group">
|
| 95 |
+
<img src="http://static.photos/black/640x360/11" alt="Ella Fitzgerald performance" class="w-full h-64 object-cover group-hover:scale-105 transition duration-500">
|
| 96 |
+
</div>
|
| 97 |
+
</div>
|
| 98 |
+
<div class="hidden md:block absolute left-1/2 transform -translate-x-1/2 w-4 h-4 bg-amber-500 rounded-full timeline-dot"></div>
|
| 99 |
+
<div class="md:w-1/2 md:pl-12 order-1 md:order-2 md:text-left text-right">
|
| 100 |
+
<div class="space-y-2">
|
| 101 |
+
<span class="text-sm text-amber-400 font-medium">November 8, 1972</span>
|
| 102 |
+
<h3 class="text-2xl font-bold">Ella Fitzgerald</h3>
|
| 103 |
+
<p class="text-gray-400">
|
| 104 |
+
The First Lady of Song graced our stage for three unforgettable nights, including a birthday celebration for a surprised audience member.
|
| 105 |
+
</p>
|
| 106 |
+
</div>
|
| 107 |
+
</div>
|
| 108 |
+
</div>
|
| 109 |
+
</div>
|
| 110 |
+
|
| 111 |
+
<!-- Timeline Item 3 -->
|
| 112 |
+
<div class="relative timeline-item">
|
| 113 |
+
<div class="flex flex-col md:flex-row items-center">
|
| 114 |
+
<div class="md:w-1/2 md:pr-12 mb-8 md:mb-0 md:text-right">
|
| 115 |
+
<div class="space-y-2">
|
| 116 |
+
<span class="text-sm text-amber-400 font-medium">July 20, 1985</span>
|
| 117 |
+
<h3 class="text-2xl font-bold">Weather Report</h3>
|
| 118 |
+
<p class="text-gray-400">
|
| 119 |
+
The legendary fusion band delivered an explosive performance that had the audience dancing in the aisles.
|
| 120 |
+
</p>
|
| 121 |
+
</div>
|
| 122 |
+
</div>
|
| 123 |
+
<div class="hidden md:block absolute left-1/2 transform -translate-x-1/2 w-4 h-4 bg-amber-500 rounded-full timeline-dot"></div>
|
| 124 |
+
<div class="md:w-1/2 md:pl-12">
|
| 125 |
+
<div class="bg-gray-800 rounded-xl overflow-hidden group">
|
| 126 |
+
<img src="http://static.photos/black/640x360/12" alt="Weather Report performance" class="w-full h-64 object-cover group-hover:scale-105 transition duration-500">
|
| 127 |
+
</div>
|
| 128 |
+
</div>
|
| 129 |
+
</div>
|
| 130 |
+
</div>
|
| 131 |
+
|
| 132 |
+
<!-- Timeline Item 4 -->
|
| 133 |
+
<div class="relative timeline-item">
|
| 134 |
+
<div class="flex flex-col md:flex-row items-center">
|
| 135 |
+
<div class="md:w-1/2 md:pr-12 order-2 md:order-1 mb-8 md:mb-0">
|
| 136 |
+
<div class="bg-gray-800 rounded-xl overflow-hidden group">
|
| 137 |
+
<img src="http://static.photos/black/640x360/13" alt="Diana Krall performance" class="w-full h-64 object-cover group-hover:scale-105 transition duration-500">
|
| 138 |
+
</div>
|
| 139 |
+
</div>
|
| 140 |
+
<div class="hidden md:block absolute left-1/2 transform -translate-x-1/2 w-4 h-4 bg-amber-500 rounded-full timeline-dot"></div>
|
| 141 |
+
<div class="md:w-1/2 md:pl-12 order-1 md:order-2 md:text-left text-right">
|
| 142 |
+
<div class="space-y-2">
|
| 143 |
+
<span class="text-sm text-amber-400 font-medium">March 15, 1999</span>
|
| 144 |
+
<h3 class="text-2xl font-bold">Diana Krall</h3>
|
| 145 |
+
<p class="text-gray-400">
|
| 146 |
+
Before her international fame, Diana Krall played an intimate set that showcased her incredible talent as both pianist and vocalist.
|
| 147 |
+
</p>
|
| 148 |
+
</div>
|
| 149 |
+
</div>
|
| 150 |
+
</div>
|
| 151 |
+
</div>
|
| 152 |
+
|
| 153 |
+
<!-- Timeline Item 5 -->
|
| 154 |
+
<div class="relative">
|
| 155 |
+
<div class="flex flex-col md:flex-row items-center">
|
| 156 |
+
<div class="md:w-1/2 md:pr-12 mb-8 md:mb-0 md:text-right">
|
| 157 |
+
<div class="space-y-2">
|
| 158 |
+
<span class="text-sm text-amber-400 font-medium">October 5, 2015</span>
|
| 159 |
+
<h3 class="text-2xl font-bold">50th Anniversary Gala</h3>
|
| 160 |
+
<p class="text-gray-400">
|
| 161 |
+
A star-studded evening featuring alumni performers including Wynton Marsalis, Cassandra Wilson, and Chick Corea.
|
| 162 |
+
</p>
|
| 163 |
+
</div>
|
| 164 |
+
</div>
|
| 165 |
+
<div class="hidden md:block absolute left-1/2 transform -translate-x-1/2 w-4 h-4 bg-amber-500 rounded-full"></div>
|
| 166 |
+
<div class="md:w-1/2 md:pl-12">
|
| 167 |
+
<div class="bg-gray-800 rounded-xl overflow-hidden group">
|
| 168 |
+
<img src="http://static.photos/black/640x360/14" alt="Anniversary gala" class="w-full h-64 object-cover group-hover:scale-105 transition duration-500">
|
| 169 |
+
</div>
|
| 170 |
+
</div>
|
| 171 |
+
</div>
|
| 172 |
+
</div>
|
| 173 |
+
</div>
|
| 174 |
+
</div>
|
| 175 |
+
|
| 176 |
+
<!-- Gallery CTA -->
|
| 177 |
+
<div class="mt-20 text-center">
|
| 178 |
+
<h2 class="text-3xl font-bold mb-6">
|
| 179 |
+
Want to see more from our history?
|
| 180 |
+
</h2>
|
| 181 |
+
<p class="text-gray-400 max-w-2xl mx-auto mb-8">
|
| 182 |
+
Visit our photo gallery to explore hundreds of memorable moments from our club's rich history.
|
| 183 |
+
</p>
|
| 184 |
+
<a href="#" class="inline-block bg-amber-600 hover:bg-amber-700 text-white px-8 py-3 rounded-full text-lg font-medium transition">
|
| 185 |
+
View Photo Gallery
|
| 186 |
+
</a>
|
| 187 |
+
</div>
|
| 188 |
+
</div>
|
| 189 |
+
</main>
|
| 190 |
+
|
| 191 |
+
<!-- Footer -->
|
| 192 |
+
<footer class="relative z-10 bg-black bg-opacity-90 py-12">
|
| 193 |
+
<div class="container mx-auto px-6">
|
| 194 |
+
<div class="grid grid-cols-1 md:grid-cols-4 gap-8">
|
| 195 |
+
<div>
|
| 196 |
+
<div class="flex items-center space-x-2 mb-4">
|
| 197 |
+
<i data-feather="music" class="text-amber-500"></i>
|
| 198 |
+
<span class="text-xl font-bold bg-gradient-to-r from-amber-400 to-amber-600 bg-clip-text text-transparent">Groovy Beats</span>
|
| 199 |
+
</div>
|
| 200 |
+
<p class="text-gray-400">
|
| 201 |
+
The finest jazz experience in the city since 1965.
|
| 202 |
+
</p>
|
| 203 |
+
</div>
|
| 204 |
+
<div>
|
| 205 |
+
<h3 class="text-white font-medium mb-4">Quick Links</h3>
|
| 206 |
+
<ul class="space-y-2">
|
| 207 |
+
<li><a href="index.html" class="text-gray-400 hover:text-amber-400 transition">Home</a></li>
|
| 208 |
+
<li><a href="performances.html" class="text-gray-400 hover:text-amber-400 transition">Performances</a></li>
|
| 209 |
+
<li><a href="history.html" class="text-gray-400 hover:text-amber-400 transition">History</a></li>
|
| 210 |
+
<li><a href="menu.html" class="text-gray-400 hover:text-amber-400 transition">Menu</a></li>
|
| 211 |
+
</ul>
|
| 212 |
+
</div>
|
| 213 |
+
<div>
|
| 214 |
+
<h3 class="text-white font-medium mb-4">Information</h3>
|
| 215 |
+
<ul class="space-y-2">
|
| 216 |
+
<li class="text-gray-400">123 Jazz Avenue</li>
|
| 217 |
+
<li class="text-gray-400">New York, NY 10001</li>
|
| 218 |
+
<li class="text-gray-400">(212) 555-7890</li>
|
| 219 |
+
<li class="text-gray-400">info@groovybeats.com</li>
|
| 220 |
+
</ul>
|
| 221 |
+
</div>
|
| 222 |
+
<div>
|
| 223 |
+
<h3 class="text-white font-medium mb-4">Opening Hours</h3>
|
| 224 |
+
<ul class="space-y-2">
|
| 225 |
+
<li class="text-gray-400">Monday - Thursday: 6PM - 1AM</li>
|
| 226 |
+
<li class="text-gray-400">Friday - Saturday: 6PM - 2AM</li>
|
| 227 |
+
<li class="text-gray-400">Sunday: 5PM - 12AM</li>
|
| 228 |
+
</ul>
|
| 229 |
+
</div>
|
| 230 |
+
</div>
|
| 231 |
+
<div class="border-t border-gray-800 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center">
|
| 232 |
+
<p class="text-gray-500 text-sm mb-4 md:mb-0">
|
| 233 |
+
© 2023 Groovy Beats & Smooth Seats. All rights reserved.
|
| 234 |
+
</p>
|
| 235 |
+
<div class="flex space-x-4">
|
| 236 |
+
<a href="#" class="text-gray-400 hover:text-amber-400 transition">
|
| 237 |
+
<i data-feather="facebook"></i>
|
| 238 |
+
</a>
|
| 239 |
+
<a href="#" class="text-gray-400 hover:text-amber-400 transition">
|
| 240 |
+
<i data-feather="instagram"></i>
|
| 241 |
+
</a>
|
| 242 |
+
<a href="#" class="text-gray-400 hover:text-amber-400 transition">
|
| 243 |
+
<i data-feather="twitter"></i>
|
| 244 |
+
</a>
|
| 245 |
+
</div>
|
| 246 |
+
</div>
|
| 247 |
+
</div>
|
| 248 |
+
</footer>
|
| 249 |
+
|
| 250 |
+
<script>
|
| 251 |
+
// Initialize Feather Icons
|
| 252 |
+
feather.replace();
|
| 253 |
+
</script>
|
| 254 |
+
</body>
|
| 255 |
+
</html>
|
index.html
CHANGED
|
@@ -1,19 +1,245 @@
|
|
| 1 |
-
<!
|
| 2 |
-
<html>
|
| 3 |
-
|
| 4 |
-
|
| 5 |
-
|
| 6 |
-
|
| 7 |
-
|
| 8 |
-
|
| 9 |
-
|
| 10 |
-
|
| 11 |
-
|
| 12 |
-
|
| 13 |
-
|
| 14 |
-
|
| 15 |
-
|
| 16 |
-
|
| 17 |
-
|
| 18 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 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>Groovy Beats & Smooth Seats | Jazz Club</title>
|
| 7 |
+
<link rel="icon" type="image/x-icon" href="/static/favicon.ico">
|
| 8 |
+
<script src="https://cdn.tailwindcss.com"></script>
|
| 9 |
+
<script src="https://unpkg.com/feather-icons"></script>
|
| 10 |
+
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
|
| 11 |
+
<script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.waves.min.js"></script>
|
| 12 |
+
<style>
|
| 13 |
+
.hero-clip {
|
| 14 |
+
clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);
|
| 15 |
+
}
|
| 16 |
+
@keyframes float {
|
| 17 |
+
0% { transform: translateY(0px); }
|
| 18 |
+
50% { transform: translateY(-15px); }
|
| 19 |
+
100% { transform: translateY(0px); }
|
| 20 |
+
}
|
| 21 |
+
.floating {
|
| 22 |
+
animation: float 6s ease-in-out infinite;
|
| 23 |
+
}
|
| 24 |
+
</style>
|
| 25 |
+
</head>
|
| 26 |
+
<body class="bg-gray-900 text-gray-100 font-sans">
|
| 27 |
+
<div id="vanta-bg" class="fixed top-0 left-0 w-full h-full z-0"></div>
|
| 28 |
+
|
| 29 |
+
<!-- Navigation -->
|
| 30 |
+
<nav class="relative z-10 bg-black bg-opacity-70 backdrop-filter backdrop-blur-sm">
|
| 31 |
+
<div class="container mx-auto px-6 py-4">
|
| 32 |
+
<div class="flex items-center justify-between">
|
| 33 |
+
<div class="flex items-center space-x-4">
|
| 34 |
+
<i data-feather="music" class="text-amber-500"></i>
|
| 35 |
+
<span class="text-xl font-bold bg-gradient-to-r from-amber-400 to-amber-600 bg-clip-text text-transparent">Groovy Beats</span>
|
| 36 |
+
</div>
|
| 37 |
+
<div class="hidden md:flex items-center space-x-8">
|
| 38 |
+
<a href="#" class="text-amber-400 font-medium hover:text-amber-300 transition">Home</a>
|
| 39 |
+
<a href="#" class="text-gray-300 hover:text-amber-400 transition">Performances</a>
|
| 40 |
+
<a href="#" class="text-gray-300 hover:text-amber-400 transition">History</a>
|
| 41 |
+
<a href="#" class="text-gray-300 hover:text-amber-400 transition">Menu</a>
|
| 42 |
+
<a href="#" class="bg-amber-600 hover:bg-amber-700 text-white px-4 py-2 rounded-full transition">Reserve Table</a>
|
| 43 |
+
</div>
|
| 44 |
+
<button class="md:hidden text-gray-300 focus:outline-none">
|
| 45 |
+
<i data-feather="menu"></i>
|
| 46 |
+
</button>
|
| 47 |
+
</div>
|
| 48 |
+
</div>
|
| 49 |
+
</nav>
|
| 50 |
+
|
| 51 |
+
<!-- Hero Section -->
|
| 52 |
+
<section class="relative hero-clip overflow-hidden">
|
| 53 |
+
<div class="container mx-auto px-6 py-24 relative z-10">
|
| 54 |
+
<div class="max-w-3xl">
|
| 55 |
+
<h1 class="text-5xl md:text-7xl font-bold mb-6 leading-tight">
|
| 56 |
+
<span class="bg-gradient-to-r from-amber-400 to-amber-600 bg-clip-text text-transparent">Smooth Jazz</span>
|
| 57 |
+
<br>Under City Lights
|
| 58 |
+
</h1>
|
| 59 |
+
<p class="text-xl text-gray-300 mb-8">
|
| 60 |
+
Experience the finest jazz performances in an intimate setting with craft cocktails and gourmet bites.
|
| 61 |
+
</p>
|
| 62 |
+
<div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">
|
| 63 |
+
<a href="#" class="bg-amber-600 hover:bg-amber-700 text-white px-8 py-4 rounded-full text-lg font-medium transition text-center">Book a Table</a>
|
| 64 |
+
<a href="#" class="border-2 border-amber-500 text-amber-400 hover:bg-amber-900 hover:bg-opacity-30 px-8 py-4 rounded-full text-lg font-medium transition text-center">View Performers</a>
|
| 65 |
+
</div>
|
| 66 |
+
</div>
|
| 67 |
+
</div>
|
| 68 |
+
<div class="absolute bottom-0 right-0 w-1/2 md:w-1/3 floating">
|
| 69 |
+
<img src="http://static.photos/monochrome/1200x630/42" alt="Jazz musician" class="opacity-90">
|
| 70 |
+
</div>
|
| 71 |
+
</section>
|
| 72 |
+
|
| 73 |
+
<!-- Upcoming Performances -->
|
| 74 |
+
<section class="relative z-10 py-20 bg-black bg-opacity-70">
|
| 75 |
+
<div class="container mx-auto px-6">
|
| 76 |
+
<div class="flex items-center justify-between mb-12">
|
| 77 |
+
<h2 class="text-3xl md:text-4xl font-bold">
|
| 78 |
+
<span class="bg-gradient-to-r from-amber-400 to-amber-600 bg-clip-text text-transparent">Upcoming</span> Performances
|
| 79 |
+
</h2>
|
| 80 |
+
<a href="#" class="text-amber-400 hover:text-amber-300 flex items-center">
|
| 81 |
+
View All <i data-feather="chevron-right" class="ml-2"></i>
|
| 82 |
+
</a>
|
| 83 |
+
</div>
|
| 84 |
+
|
| 85 |
+
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
|
| 86 |
+
<!-- Performance Card 1 -->
|
| 87 |
+
<div class="bg-gray-800 rounded-xl overflow-hidden hover:shadow-lg hover:shadow-amber-900/30 transition group">
|
| 88 |
+
<div class="relative overflow-hidden h-64">
|
| 89 |
+
<img src="http://static.photos/black/640x360/1" alt="Jazz quartet" class="w-full h-full object-cover group-hover:scale-105 transition duration-500">
|
| 90 |
+
<div class="absolute inset-0 bg-gradient-to-t from-black via-transparent to-transparent"></div>
|
| 91 |
+
<div class="absolute bottom-0 left-0 p-6">
|
| 92 |
+
<span class="bg-amber-600 text-white text-xs px-3 py-1 rounded-full">TONIGHT</span>
|
| 93 |
+
</div>
|
| 94 |
+
</div>
|
| 95 |
+
<div class="p-6">
|
| 96 |
+
<h3 class="text-xl font-bold mb-2">The Midnight Quartet</h3>
|
| 97 |
+
<p class="text-gray-400 text-sm mb-4">From 8:30 PM | Main Stage</p>
|
| 98 |
+
<p class="text-gray-300 mb-4">Smooth jazz with a modern twist featuring award-winning saxophonist Marcus Johnson.</p>
|
| 99 |
+
<a href="#" class="text-amber-400 hover:text-amber-300 font-medium flex items-center">
|
| 100 |
+
Learn More <i data-feather="chevron-right" class="ml-1 h-4"></i>
|
| 101 |
+
</a>
|
| 102 |
+
</div>
|
| 103 |
+
</div>
|
| 104 |
+
|
| 105 |
+
<!-- Performance Card 2 -->
|
| 106 |
+
<div class="bg-gray-800 rounded-xl overflow-hidden hover:shadow-lg hover:shadow-amber-900/30 transition group">
|
| 107 |
+
<div class="relative overflow-hidden h-64">
|
| 108 |
+
<img src="http://static.photos/black/640x360/2" alt="Jazz singer" class="w-full h-full object-cover group-hover:scale-105 transition duration-500">
|
| 109 |
+
<div class="absolute inset-0 bg-gradient-to-t from-black via-transparent to-transparent"></div>
|
| 110 |
+
<div class="absolute bottom-0 left-0 p-6">
|
| 111 |
+
<span class="bg-amber-600 text-white text-xs px-3 py-1 rounded-full">TOMORROW</span>
|
| 112 |
+
</div>
|
| 113 |
+
</div>
|
| 114 |
+
<div class="p-6">
|
| 115 |
+
<h3 class="text-xl font-bold mb-2">Ella Fitzgerald Tribute</h3>
|
| 116 |
+
<p class="text-gray-400 text-sm mb-4">From 9:00 PM | Main Stage</p>
|
| 117 |
+
<p class="text-gray-300 mb-4">Sarah Williams brings the timeless classics of Ella Fitzgerald to life.</p>
|
| 118 |
+
<a href="#" class="text-amber-400 hover:text-amber-300 font-medium flex items-center">
|
| 119 |
+
Learn More <i data-feather="chevron-right" class="ml-1 h-4"></i>
|
| 120 |
+
</a>
|
| 121 |
+
</div>
|
| 122 |
+
</div>
|
| 123 |
+
|
| 124 |
+
<!-- Performance Card 3 -->
|
| 125 |
+
<div class="bg-gray-800 rounded-xl overflow-hidden hover:shadow-lg hover:shadow-amber-900/30 transition group">
|
| 126 |
+
<div class="relative overflow-hidden h-64">
|
| 127 |
+
<img src="http://static.photos/black/640x360/3" alt="Jazz trio" class="w-full h-full object-cover group-hover:scale-105 transition duration-500">
|
| 128 |
+
<div class="absolute inset-0 bg-gradient-to-t from-black via-transparent to-transparent"></div>
|
| 129 |
+
<div class="absolute bottom-0 left-0 p-6">
|
| 130 |
+
<span class="bg-amber-600 text-white text-xs px-3 py-1 rounded-full">SATURDAY</span>
|
| 131 |
+
</div>
|
| 132 |
+
</div>
|
| 133 |
+
<div class="p-6">
|
| 134 |
+
<h3 class="text-xl font-bold mb-2">Blue Note Experience</h3>
|
| 135 |
+
<p class="text-gray-400 text-sm mb-4">From 10:00 PM | Main Stage</p>
|
| 136 |
+
<p class="text-gray-300 mb-4">A journey through the legendary Blue Note recordings with a stellar lineup.</p>
|
| 137 |
+
<a href="#" class="text-amber-400 hover:text-amber-300 font-medium flex items-center">
|
| 138 |
+
Learn More <i data-feather="chevron-right" class="ml-1 h-4"></i>
|
| 139 |
+
</a>
|
| 140 |
+
</div>
|
| 141 |
+
</div>
|
| 142 |
+
</div>
|
| 143 |
+
</div>
|
| 144 |
+
</section>
|
| 145 |
+
|
| 146 |
+
<!-- Membership CTA -->
|
| 147 |
+
<section class="relative z-10 py-20 bg-gradient-to-r from-amber-900 to-black">
|
| 148 |
+
<div class="container mx-auto px-6">
|
| 149 |
+
<div class="max-w-4xl mx-auto text-center">
|
| 150 |
+
<h2 class="text-3xl md:text-4xl font-bold mb-6">
|
| 151 |
+
<span class="bg-gradient-to-r from-amber-400 to-amber-600 bg-clip-text text-transparent">Become a Member</span> for Exclusive Benefits
|
| 152 |
+
</h2>
|
| 153 |
+
<p class="text-xl text-gray-300 mb-8 max-w-2xl mx-auto">
|
| 154 |
+
Enjoy priority seating, members-only events, complimentary drinks, and more with our VIP membership program.
|
| 155 |
+
</p>
|
| 156 |
+
<div class="flex flex-col sm:flex-row justify-center space-y-4 sm:space-y-0 sm:space-x-4">
|
| 157 |
+
<a href="#" class="bg-white hover:bg-gray-100 text-gray-900 px-8 py-4 rounded-full text-lg font-medium transition">Join Now</a>
|
| 158 |
+
<a href="#" class="border-2 border-white text-white hover:bg-white hover:bg-opacity-10 px-8 py-4 rounded-full text-lg font-medium transition">Learn More</a>
|
| 159 |
+
</div>
|
| 160 |
+
</div>
|
| 161 |
+
</div>
|
| 162 |
+
</section>
|
| 163 |
+
|
| 164 |
+
<!-- Footer -->
|
| 165 |
+
<footer class="relative z-10 bg-black bg-opacity-90 py-12">
|
| 166 |
+
<div class="container mx-auto px-6">
|
| 167 |
+
<div class="grid grid-cols-1 md:grid-cols-4 gap-8">
|
| 168 |
+
<div>
|
| 169 |
+
<div class="flex items-center space-x-2 mb-4">
|
| 170 |
+
<i data-feather="music" class="text-amber-500"></i>
|
| 171 |
+
<span class="text-xl font-bold bg-gradient-to-r from-amber-400 to-amber-600 bg-clip-text text-transparent">Groovy Beats</span>
|
| 172 |
+
</div>
|
| 173 |
+
<p class="text-gray-400">
|
| 174 |
+
The finest jazz experience in the city since 1965.
|
| 175 |
+
</p>
|
| 176 |
+
</div>
|
| 177 |
+
<div>
|
| 178 |
+
<h3 class="text-white font-medium mb-4">Quick Links</h3>
|
| 179 |
+
<ul class="space-y-2">
|
| 180 |
+
<li><a href="#" class="text-gray-400 hover:text-amber-400 transition">Home</a></li>
|
| 181 |
+
<li><a href="#" class="text-gray-400 hover:text-amber-400 transition">Events</a></li>
|
| 182 |
+
<li><a href="#" class="text-gray-400 hover:text-amber-400 transition">Gallery</a></li>
|
| 183 |
+
<li><a href="#" class="text-gray-400 hover:text-amber-400 transition">Contact</a></li>
|
| 184 |
+
</ul>
|
| 185 |
+
</div>
|
| 186 |
+
<div>
|
| 187 |
+
<h3 class="text-white font-medium mb-4">Information</h3>
|
| 188 |
+
<ul class="space-y-2">
|
| 189 |
+
<li class="text-gray-400">123 Jazz Avenue</li>
|
| 190 |
+
<li class="text-gray-400">New York, NY 10001</li>
|
| 191 |
+
<li class="text-gray-400">(212) 555-7890</li>
|
| 192 |
+
<li class="text-gray-400">info@groovybeats.com</li>
|
| 193 |
+
</ul>
|
| 194 |
+
</div>
|
| 195 |
+
<div>
|
| 196 |
+
<h3 class="text-white font-medium mb-4">Opening Hours</h3>
|
| 197 |
+
<ul class="space-y-2">
|
| 198 |
+
<li class="text-gray-400">Monday - Thursday: 6PM - 1AM</li>
|
| 199 |
+
<li class="text-gray-400">Friday - Saturday: 6PM - 2AM</li>
|
| 200 |
+
<li class="text-gray-400">Sunday: 5PM - 12AM</li>
|
| 201 |
+
</ul>
|
| 202 |
+
</div>
|
| 203 |
+
</div>
|
| 204 |
+
<div class="border-t border-gray-800 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center">
|
| 205 |
+
<p class="text-gray-500 text-sm mb-4 md:mb-0">
|
| 206 |
+
© 2023 Groovy Beats & Smooth Seats. All rights reserved.
|
| 207 |
+
</p>
|
| 208 |
+
<div class="flex space-x-4">
|
| 209 |
+
<a href="#" class="text-gray-400 hover:text-amber-400 transition">
|
| 210 |
+
<i data-feather="facebook"></i>
|
| 211 |
+
</a>
|
| 212 |
+
<a href="#" class="text-gray-400 hover:text-amber-400 transition">
|
| 213 |
+
<i data-feather="instagram"></i>
|
| 214 |
+
</a>
|
| 215 |
+
<a href="#" class="text-gray-400 hover:text-amber-400 transition">
|
| 216 |
+
<i data-feather="twitter"></i>
|
| 217 |
+
</a>
|
| 218 |
+
</div>
|
| 219 |
+
</div>
|
| 220 |
+
</div>
|
| 221 |
+
</footer>
|
| 222 |
+
|
| 223 |
+
<script>
|
| 224 |
+
// Initialize Vanta.js waves background
|
| 225 |
+
VANTA.WAVES({
|
| 226 |
+
el: "#vanta-bg",
|
| 227 |
+
mouseControls: true,
|
| 228 |
+
touchControls: true,
|
| 229 |
+
gyroControls: false,
|
| 230 |
+
minHeight: 200.00,
|
| 231 |
+
minWidth: 200.00,
|
| 232 |
+
scale: 1.00,
|
| 233 |
+
scaleMobile: 1.00,
|
| 234 |
+
color: 0xda8b20,
|
| 235 |
+
shininess: 80.00,
|
| 236 |
+
waveHeight: 20.00,
|
| 237 |
+
waveSpeed: 0.95,
|
| 238 |
+
zoom: 0.85
|
| 239 |
+
});
|
| 240 |
+
|
| 241 |
+
// Initialize Feather Icons
|
| 242 |
+
feather.replace();
|
| 243 |
+
</script>
|
| 244 |
+
</body>
|
| 245 |
</html>
|
menu.html
ADDED
|
@@ -0,0 +1,605 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 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>Club Menu | Groovy Beats & Smooth Seats</title>
|
| 7 |
+
<link rel="icon" type="image/x-icon" href="/static/favicon.ico">
|
| 8 |
+
<script src="https://cdn.tailwindcss.com"></script>
|
| 9 |
+
<script src="https://unpkg.com/feather-icons"></script>
|
| 10 |
+
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
|
| 11 |
+
<style>
|
| 12 |
+
.menu-category {
|
| 13 |
+
scroll-margin-top: 120px;
|
| 14 |
+
}
|
| 15 |
+
.menu-item:hover .menu-item-content {
|
| 16 |
+
transform: translateY(-5px);
|
| 17 |
+
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.4);
|
| 18 |
+
}
|
| 19 |
+
.menu-item-content {
|
| 20 |
+
transition: all 0.3s ease;
|
| 21 |
+
}
|
| 22 |
+
</style>
|
| 23 |
+
</head>
|
| 24 |
+
<body class="bg-gray-900 text-gray-100 font-sans">
|
| 25 |
+
<!-- Navigation -->
|
| 26 |
+
<nav class="bg-black bg-opacity-70 backdrop-filter backdrop-blur-sm sticky top-0 z-50">
|
| 27 |
+
<div class="container mx-auto px-6 py-4">
|
| 28 |
+
<div class="flex items-center justify-between">
|
| 29 |
+
<div class="flex items-center space-x-4">
|
| 30 |
+
<i data-feather="music" class="text-amber-500"></i>
|
| 31 |
+
<span class="text-xl font-bold bg-gradient-to-r from-amber-400 to-amber-600 bg-clip-text text-transparent">Groovy Beats</span>
|
| 32 |
+
</div>
|
| 33 |
+
<div class="hidden md:flex items-center space-x-8">
|
| 34 |
+
<a href="index.html" class="text-gray-300 hover:text-amber-400 transition">Home</a>
|
| 35 |
+
<a href="performances.html" class="text-gray-300 hover:text-amber-400 transition">Performances</a>
|
| 36 |
+
<a href="history.html" class="text-gray-300 hover:text-amber-400 transition">History</a>
|
| 37 |
+
<a href="menu.html" class="text-amber-400 font-medium hover:text-amber-300 transition">Menu</a>
|
| 38 |
+
<a href="reservation.html" class="bg-amber-600 hover:bg-amber-700 text-white px-4 py-2 rounded-full transition">Reserve Table</a>
|
| 39 |
+
</div>
|
| 40 |
+
<button class="md:hidden text-gray-300 focus:outline-none">
|
| 41 |
+
<i data-feather="menu"></i>
|
| 42 |
+
</button>
|
| 43 |
+
</div>
|
| 44 |
+
</div>
|
| 45 |
+
</nav>
|
| 46 |
+
|
| 47 |
+
<!-- Main Content -->
|
| 48 |
+
<main class="relative z-10 py-12">
|
| 49 |
+
<div class="container mx-auto px-6">
|
| 50 |
+
<div class="mb-12 text-center">
|
| 51 |
+
<h1 class="text-4xl md:text-5xl font-bold mb-4">
|
| 52 |
+
<span class="bg-gradient-to-r from-amber-400 to-amber-600 bg-clip-text text-transparent">Club</span> Menu
|
| 53 |
+
</h1>
|
| 54 |
+
<p class="text-gray-400 max-w-2xl mx-auto">
|
| 55 |
+
Our carefully crafted menu features gourmet small plates and innovative cocktails designed to complement your jazz experience.
|
| 56 |
+
</p>
|
| 57 |
+
</div>
|
| 58 |
+
|
| 59 |
+
<!-- Menu Navigation -->
|
| 60 |
+
<div class="sticky top-20 z-10 bg-gray-900 bg-opacity-90 py-4 mb-8">
|
| 61 |
+
<div class="flex overflow-x-auto space-x-4 pb-2 scrollbar-hide">
|
| 62 |
+
<a href="#cocktails" class="whitespace-nowrap px-4 py-2 bg-amber-600 text-white rounded-full">Cocktails</a>
|
| 63 |
+
<a href="#wines" class="whitespace-nowrap px-4 py-2 bg-gray-800 hover:bg-gray-700 rounded-full transition">Wines</a>
|
| 64 |
+
<a href="#beers" class="whitespace-nowrap px-4 py-2 bg-gray-800 hover:bg-gray-700 rounded-full transition">Beers</a>
|
| 65 |
+
<a href="#small-plates" class="whitespace-nowrap px-4 py-2 bg-gray-800 hover:bg-gray-700 rounded-full transition">Small Plates</a>
|
| 66 |
+
<a href="#desserts" class="whitespace-nowrap px-4 py-2 bg-gray-800 hover:bg-gray-700 rounded-full transition">Desserts</a>
|
| 67 |
+
</div>
|
| 68 |
+
</div>
|
| 69 |
+
|
| 70 |
+
<!-- Menu Sections -->
|
| 71 |
+
<div class="space-y-16">
|
| 72 |
+
<!-- Cocktails Section -->
|
| 73 |
+
<section id="cocktails" class="menu-category">
|
| 74 |
+
<div class="flex items-center justify-between mb-8">
|
| 75 |
+
<h2 class="text-3xl font-bold flex items-center">
|
| 76 |
+
<i data-feather="droplet" class="text-amber-500 mr-3"></i>
|
| 77 |
+
Signature Cocktails
|
| 78 |
+
</h2>
|
| 79 |
+
<span class="text-gray-400">$14 - $18</span>
|
| 80 |
+
</div>
|
| 81 |
+
|
| 82 |
+
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
| 83 |
+
<!-- Cocktail 1 -->
|
| 84 |
+
<div class="menu-item">
|
| 85 |
+
<div class="menu-item-content bg-gray-800 rounded-xl p-6 h-full">
|
| 86 |
+
<div class="flex justify-between items-start mb-4">
|
| 87 |
+
<h3 class="text-xl font-bold">Midnight Sax</h3>
|
| 88 |
+
<span class="text-amber-400 font-medium">$16</span>
|
| 89 |
+
</div>
|
| 90 |
+
<p class="text-gray-400 mb-4">
|
| 91 |
+
Bourbon, blackberry liqueur, lemon juice, mint, and a splash of soda. Served in a chilled coupe.
|
| 92 |
+
</p>
|
| 93 |
+
<div class="text-xs text-gray-500 flex items-center">
|
| 94 |
+
<i data-feather="clock" class="w-4 h-4 mr-1"></i>
|
| 95 |
+
Recommended with: Bebop performances
|
| 96 |
+
</div>
|
| 97 |
+
</div>
|
| 98 |
+
</div>
|
| 99 |
+
|
| 100 |
+
<!-- Cocktail 2 -->
|
| 101 |
+
<div class="menu-item">
|
| 102 |
+
<div class="menu-item-content bg-gray-800 rounded-xl p-6 h-full">
|
| 103 |
+
<div class="flex justify-between items-start mb-4">
|
| 104 |
+
<h3 class="text-xl font-bold">Blue Note</h3>
|
| 105 |
+
<span class="text-amber-400 font-medium">$17</span>
|
| 106 |
+
</div>
|
| 107 |
+
<p class="text-gray-400 mb-4">
|
| 108 |
+
Gin, crème de violette, elderflower liqueur, lime juice, and edible glitter for that stage sparkle.
|
| 109 |
+
</p>
|
| 110 |
+
<div class="text-xs text-gray-500 flex items-center">
|
| 111 |
+
<i data-feather="clock" class="w-4 h-4 mr-1"></i>
|
| 112 |
+
Recommended with: Vocal jazz nights
|
| 113 |
+
</div>
|
| 114 |
+
</div>
|
| 115 |
+
</div>
|
| 116 |
+
|
| 117 |
+
<!-- Cocktail 3 -->
|
| 118 |
+
<div class="menu-item">
|
| 119 |
+
<div class="menu-item-content bg-gray-800 rounded-xl p-6 h-full">
|
| 120 |
+
<div class="flex justify-between items-start mb-4">
|
| 121 |
+
<h3 class="text-xl font-bold">Smooth Operator</h3>
|
| 122 |
+
<span class="text-amber-400 font-medium">$18</span>
|
| 123 |
+
</div>
|
| 124 |
+
<p class="text-gray-400 mb-4">
|
| 125 |
+
Mezcal, pineapple juice, ginger syrup, lime, and a dash of chili tincture. Smoked with oak chips.
|
| 126 |
+
</p>
|
| 127 |
+
<div class="text-xs text-gray-500 flex items-center">
|
| 128 |
+
<i data-feather="clock" class="w-4 h-4 mr-1"></i>
|
| 129 |
+
Recommended with: Latin jazz nights
|
| 130 |
+
</div>
|
| 131 |
+
</div>
|
| 132 |
+
</div>
|
| 133 |
+
|
| 134 |
+
<!-- Cocktail 4 -->
|
| 135 |
+
<div class="menu-item">
|
| 136 |
+
<div class="menu-item-content bg-gray-800 rounded-xl p-6 h-full">
|
| 137 |
+
<div class="flex justify-between items-start mb-4">
|
| 138 |
+
<h3 class="text-xl font-bold">Jazz Hands</h3>
|
| 139 |
+
<span class="text-amber-400 font-medium">$15</span>
|
| 140 |
+
</div>
|
| 141 |
+
<p class="text-gray-400 mb-4">
|
| 142 |
+
Vodka, St. Germain, grapefruit juice, honey syrup, and a rosemary sprig for aroma.
|
| 143 |
+
</p>
|
| 144 |
+
<div class="text-xs text-gray-500 flex items-center">
|
| 145 |
+
<i data-feather="clock" class="w-4 h-4 mr-1"></i>
|
| 146 |
+
Recommended with: Cool jazz sets
|
| 147 |
+
</div>
|
| 148 |
+
</div>
|
| 149 |
+
</div>
|
| 150 |
+
|
| 151 |
+
<!-- Cocktail 5 -->
|
| 152 |
+
<div class="menu-item">
|
| 153 |
+
<div class="menu-item-content bg-gray-800 rounded-xl p-6 h-full">
|
| 154 |
+
<div class="flex justify-between items-start mb-4">
|
| 155 |
+
<h3 class="text-xl font-bold">The Standard</h3>
|
| 156 |
+
<span class="text-amber-400 font-medium">$14</span>
|
| 157 |
+
</div>
|
| 158 |
+
<p class="text-gray-400 mb-4">
|
| 159 |
+
Our perfect Manhattan: rye whiskey, sweet vermouth, bitters, and a luxardo cherry.
|
| 160 |
+
</p>
|
| 161 |
+
<div class="text-xs text-gray-500 flex items-center">
|
| 162 |
+
<i data-feather="clock" class="w-4 h-4 mr-1"></i>
|
| 163 |
+
Recommended with: Classic jazz performances
|
| 164 |
+
</div>
|
| 165 |
+
</div>
|
| 166 |
+
</div>
|
| 167 |
+
|
| 168 |
+
<!-- Cocktail 6 -->
|
| 169 |
+
<div class="menu-item">
|
| 170 |
+
<div class="menu-item-content bg-gray-800 rounded-xl p-6 h-full">
|
| 171 |
+
<div class="flex justify-between items-start mb-4">
|
| 172 |
+
<h3 class="text-xl font-bold">The Improviser</h3>
|
| 173 |
+
<span class="text-amber-400 font-medium">$18</span>
|
| 174 |
+
</div>
|
| 175 |
+
<p class="text-gray-400 mb-4">
|
| 176 |
+
Bartender's choice based on your preferences. Let our mixologists craft something special for you.
|
| 177 |
+
</p>
|
| 178 |
+
<div class="text-xs text-gray-500 flex items-center">
|
| 179 |
+
<i data-feather="clock" class="w-4 h-4 mr-1"></i>
|
| 180 |
+
Recommended when: You're feeling adventurous
|
| 181 |
+
</div>
|
| 182 |
+
</div>
|
| 183 |
+
</div>
|
| 184 |
+
</div>
|
| 185 |
+
</section>
|
| 186 |
+
|
| 187 |
+
<!-- Wines Section -->
|
| 188 |
+
<section id="wines" class="menu-category pt-16">
|
| 189 |
+
<div class="flex items-center justify-between mb-8">
|
| 190 |
+
<h2 class="text-3xl font-bold flex items-center">
|
| 191 |
+
<i data-feather="glass" class="text-amber-500 mr-3"></i>
|
| 192 |
+
Wine Selection
|
| 193 |
+
</h2>
|
| 194 |
+
<span class="text-gray-400">$10 - $25 / glass</span>
|
| 195 |
+
</div>
|
| 196 |
+
|
| 197 |
+
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
|
| 198 |
+
<!-- Wine Column 1 -->
|
| 199 |
+
<div>
|
| 200 |
+
<h3 class="text-xl font-bold mb-4 text-amber-400">Sparkling</h3>
|
| 201 |
+
<div class="space-y-6">
|
| 202 |
+
<div class="flex justify-between">
|
| 203 |
+
<div>
|
| 204 |
+
<h4 class="font-medium">Prosecco, Zardetto (Italy)</h4>
|
| 205 |
+
<p class="text-sm text-gray-400">Dry, crisp with apple and pear notes</p>
|
| 206 |
+
</div>
|
| 207 |
+
<span class="text-amber-400">$12</span>
|
| 208 |
+
</div>
|
| 209 |
+
<div class="flex justify-between">
|
| 210 |
+
<div>
|
| 211 |
+
<h4 class="font-medium">Crémant de Bourgogne (France)</h4>
|
| 212 |
+
<p class="text-sm text-gray-400">Elegant with brioche and citrus</p>
|
| 213 |
+
</div>
|
| 214 |
+
<span class="text-amber-400">$14</span>
|
| 215 |
+
</div>
|
| 216 |
+
</div>
|
| 217 |
+
|
| 218 |
+
<h3 class="text-xl font-bold mb-4 mt-8 text-amber-400">White</h3>
|
| 219 |
+
<div class="space-y-6">
|
| 220 |
+
<div class="flex justify-between">
|
| 221 |
+
<div>
|
| 222 |
+
<h4 class="font-medium">Sauvignon Blanc, Cloudy Bay (NZ)</h4>
|
| 223 |
+
<p class="text-sm text-gray-400">Vibrant acidity with tropical fruits</p>
|
| 224 |
+
</div>
|
| 225 |
+
<span class="text-amber-400">$16</span>
|
| 226 |
+
</div>
|
| 227 |
+
<div class="flex justify-between">
|
| 228 |
+
<div>
|
| 229 |
+
<h4 class="font-medium">Chardonnay, Rombauer (California)</h4>
|
| 230 |
+
<p class="text-sm text-gray-400">Buttery with oak and vanilla notes</p>
|
| 231 |
+
</div>
|
| 232 |
+
<span class="text-amber-400">$18</span>
|
| 233 |
+
</div>
|
| 234 |
+
</div>
|
| 235 |
+
</div>
|
| 236 |
+
|
| 237 |
+
<!-- Wine Column 2 -->
|
| 238 |
+
<div>
|
| 239 |
+
<h3 class="text-xl font-bold mb-4 text-amber-400">Red</h3>
|
| 240 |
+
<div class="space-y-6">
|
| 241 |
+
<div class="flex justify-between">
|
| 242 |
+
<div>
|
| 243 |
+
<h4 class="font-medium">Pinot Noir, Belle Glos (California)</h4>
|
| 244 |
+
<p class="text-sm text-gray-400">Silky with cherry and spice</p>
|
| 245 |
+
</div>
|
| 246 |
+
<span class="text-amber-400">$20</span>
|
| 247 |
+
</div>
|
| 248 |
+
<div class="flex justify-between">
|
| 249 |
+
<div>
|
| 250 |
+
<h4 class="font-medium">Cabernet Sauvignon, Caymus (California)</h4>
|
| 251 |
+
<p class="text-sm text-gray-400">Full-bodied with dark fruit and cocoa</p>
|
| 252 |
+
</div>
|
| 253 |
+
<span class="text-amber-400">$25</span>
|
| 254 |
+
</div>
|
| 255 |
+
</div>
|
| 256 |
+
|
| 257 |
+
<h3 class="text-xl font-bold mb-4 mt-8 text-amber-400">Dessert</h3>
|
| 258 |
+
<div class="space-y-6">
|
| 259 |
+
<div class="flex justify-between">
|
| 260 |
+
<div>
|
| 261 |
+
<h4 class="font-medium">Sauternes, Château d'Yquem (France)</h4>
|
| 262 |
+
<p class="text-sm text-gray-400">Luscious honey and apricot</p>
|
| 263 |
+
</div>
|
| 264 |
+
<span class="text-amber-400">$22</span>
|
| 265 |
+
</div>
|
| 266 |
+
<div class="flex justify-between">
|
| 267 |
+
<div>
|
| 268 |
+
<h4 class="font-medium">Port, Graham's 20 Year Tawny (Portugal)</h4>
|
| 269 |
+
<p class="text-sm text-gray-400">Nutty with dried fruit complexity</p>
|
| 270 |
+
</div>
|
| 271 |
+
<span class="text-amber-400">$15</span>
|
| 272 |
+
</div>
|
| 273 |
+
</div>
|
| 274 |
+
</div>
|
| 275 |
+
</div>
|
| 276 |
+
</section>
|
| 277 |
+
|
| 278 |
+
<!-- Beers Section -->
|
| 279 |
+
<section id="beers" class="menu-category pt-16">
|
| 280 |
+
<div class="flex items-center justify-between mb-8">
|
| 281 |
+
<h2 class="text-3xl font-bold flex items-center">
|
| 282 |
+
<i data-feather="zap" class="text-amber-500 mr-3"></i>
|
| 283 |
+
Craft Beers
|
| 284 |
+
</h2>
|
| 285 |
+
<span class="text-gray-400">$7 - $12</span>
|
| 286 |
+
</div>
|
| 287 |
+
|
| 288 |
+
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
| 289 |
+
<!-- Beer 1 -->
|
| 290 |
+
<div class="flex items-start space-x-4">
|
| 291 |
+
<div class="bg-amber-900 bg-opacity-50 rounded-lg p-3 flex items-center justify-center">
|
| 292 |
+
<i data-feather="box" class="text-amber-400"></i>
|
| 293 |
+
</div>
|
| 294 |
+
<div>
|
| 295 |
+
<h3 class="font-bold">Jazz IPA</h3>
|
| 296 |
+
<p class="text-sm text-gray-400 mb-1">Local Brewery | 6.8% ABV</p>
|
| 297 |
+
<p class="text-sm">Hoppy with citrus and pine notes</p>
|
| 298 |
+
<span class="text-amber-400 text-sm">$8</span>
|
| 299 |
+
</div>
|
| 300 |
+
</div>
|
| 301 |
+
|
| 302 |
+
<!-- Beer 2 -->
|
| 303 |
+
<div class="flex items-start space-x-4">
|
| 304 |
+
<div class="bg-amber-900 bg-opacity-50 rounded-lg p-3 flex items-center justify-center">
|
| 305 |
+
<i data-feather="box" class="text-amber-400"></i>
|
| 306 |
+
</div>
|
| 307 |
+
<div>
|
| 308 |
+
<h3 class="font-bold">Smooth Stout</h3>
|
| 309 |
+
<p class="text-sm text-gray-400 mb-1">Craft Brew Co | 5.5% ABV</p>
|
| 310 |
+
<p class="text-sm">Creamy with chocolate and coffee undertones</p>
|
| 311 |
+
<span class="text-amber-400 text-sm">$7</span>
|
| 312 |
+
</div>
|
| 313 |
+
</div>
|
| 314 |
+
|
| 315 |
+
<!-- Beer 3 -->
|
| 316 |
+
<div class="flex items-start space-x-4">
|
| 317 |
+
<div class="bg-amber-900 bg-opacity-50 rounded-lg p-3 flex items-center justify-center">
|
| 318 |
+
<i data-feather="box" class="text-amber-400"></i>
|
| 319 |
+
</div>
|
| 320 |
+
<div>
|
| 321 |
+
<h3 class="font-bold">Bebop Blonde</h3>
|
| 322 |
+
<p class="text-sm text-gray-400 mb-1">Artisan Ales | 5.0% ABV</p>
|
| 323 |
+
<p class="text-sm">Light and crisp with subtle fruitiness</p>
|
| 324 |
+
<span class="text-amber-400 text-sm">$7</span>
|
| 325 |
+
</div>
|
| 326 |
+
</div>
|
| 327 |
+
|
| 328 |
+
<!-- Beer 4 -->
|
| 329 |
+
<div class="flex items-start space-x-4">
|
| 330 |
+
<div class="bg-amber-900 bg-opacity-50 rounded-lg p-3 flex items-center justify-center">
|
| 331 |
+
<i data-feather="box" class="text-amber-400"></i>
|
| 332 |
+
</div>
|
| 333 |
+
<div>
|
| 334 |
+
<h3 class="font-bold">Improv Saison</h3>
|
| 335 |
+
<p class="text-sm text-gray-400 mb-1">Farmhouse Brews | 6.2% ABV</p>
|
| 336 |
+
<p class="text-sm">Peppery with earthy and citrus notes</p>
|
| 337 |
+
<span class="text-amber-400 text-sm">$9</span>
|
| 338 |
+
</div>
|
| 339 |
+
</div>
|
| 340 |
+
|
| 341 |
+
<!-- Beer 5 -->
|
| 342 |
+
<div class="flex items-start space-x-4">
|
| 343 |
+
<div class="bg-amber-900 bg-opacity-50 rounded-lg p-3 flex items-center justify-center">
|
| 344 |
+
<i data-feather="box" class="text-amber-400"></i>
|
| 345 |
+
</div>
|
| 346 |
+
<div>
|
| 347 |
+
<h3 class="font-bold">Resonance Pilsner</h3>
|
| 348 |
+
<p class="text-sm text-gray-400 mb-1">Euro Imports | 4.9% ABV</p>
|
| 349 |
+
<p class="text-sm">Clean and refreshing with noble hops</p>
|
| 350 |
+
<span class="text-amber-400 text-sm">$10</span>
|
| 351 |
+
</div>
|
| 352 |
+
</div>
|
| 353 |
+
|
| 354 |
+
<!-- Beer 6 -->
|
| 355 |
+
<div class="flex items-start space-x-4">
|
| 356 |
+
<div class="bg-amber-900 bg-opacity-50 rounded-lg p-3 flex items-center justify-center">
|
| 357 |
+
<i data-feather="box" class="text-amber-400"></i>
|
| 358 |
+
</div>
|
| 359 |
+
<div>
|
| 360 |
+
<h3 class="font-bold">Barrel-Aged Soloist</h3>
|
| 361 |
+
<p class="text-sm text-gray-400 mb-1">Limited Edition | 11.5% ABV</p>
|
| 362 |
+
<p class="text-sm">Bourbon barrel-aged strong ale</p>
|
| 363 |
+
<span class="text-amber-400 text-sm">$12</span>
|
| 364 |
+
</div>
|
| 365 |
+
</div>
|
| 366 |
+
</div>
|
| 367 |
+
</section>
|
| 368 |
+
|
| 369 |
+
<!-- Small Plates Section -->
|
| 370 |
+
<section id="small-plates" class="menu-category pt-16">
|
| 371 |
+
<div class="flex items-center justify-between mb-8">
|
| 372 |
+
<h2 class="text-3xl font-bold flex items-center">
|
| 373 |
+
<i data-feather="coffee" class="text-amber-500 mr-3"></i>
|
| 374 |
+
Small Plates
|
| 375 |
+
</h2>
|
| 376 |
+
<span class="text-gray-400">$12 - $24</span>
|
| 377 |
+
</div>
|
| 378 |
+
|
| 379 |
+
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
|
| 380 |
+
<!-- Small Plate 1 -->
|
| 381 |
+
<div class="menu-item">
|
| 382 |
+
<div class="menu-item-content bg-gray-800 rounded-xl overflow-hidden group">
|
| 383 |
+
<div class="h-48 overflow-hidden">
|
| 384 |
+
<img src="http://static.photos/food/640x360/1" alt="Tuna Tartare" class="w-full h-full object-cover group-hover:scale-105 transition duration-500">
|
| 385 |
+
</div>
|
| 386 |
+
<div class="p-6">
|
| 387 |
+
<div class="flex justify-between items-start mb-2">
|
| 388 |
+
<h3 class="text-xl font-bold">Tuna Tartare</h3>
|
| 389 |
+
<span class="text-amber-400 font-medium">$18</span>
|
| 390 |
+
</div>
|
| 391 |
+
<p class="text-gray-400 mb-4">
|
| 392 |
+
Sashimi-grade tuna with avocado, sesame oil, and crispy wontons. Served with house-made taro chips.
|
| 393 |
+
</p>
|
| 394 |
+
<div class="text-xs text-gray-500">Contains: Fish, Sesame</div>
|
| 395 |
+
</div>
|
| 396 |
+
</div>
|
| 397 |
+
</div>
|
| 398 |
+
|
| 399 |
+
<!-- Small Plate 2 -->
|
| 400 |
+
<div class="menu-item">
|
| 401 |
+
<div class="menu-item-content bg-gray-800 rounded-xl overflow-hidden group">
|
| 402 |
+
<div class="h-48 overflow-hidden">
|
| 403 |
+
<img src="http://static.photos/food/640x360/2" alt="Burrata Salad" class="w-full h-full object-cover group-hover:scale-105 transition duration-500">
|
| 404 |
+
</div>
|
| 405 |
+
<div class="p-6">
|
| 406 |
+
<div class="flex justify-between items-start mb-2">
|
| 407 |
+
<h3 class="text-xl font-bold">Burrata & Heirloom Tomatoes</h3>
|
| 408 |
+
<span class="text-amber-400 font-medium">$16</span>
|
| 409 |
+
</div>
|
| 410 |
+
<p class="text-gray-400 mb-4">
|
| 411 |
+
Creamy burrata with seasonal heirloom tomatoes, basil oil, aged balsamic, and grilled sourdough.
|
| 412 |
+
</p>
|
| 413 |
+
<div class="text-xs text-gray-500">Contains: Dairy, Gluten</div>
|
| 414 |
+
</div>
|
| 415 |
+
</div>
|
| 416 |
+
</div>
|
| 417 |
+
|
| 418 |
+
<!-- Small Plate 3 -->
|
| 419 |
+
<div class="menu-item">
|
| 420 |
+
<div class="menu-item-content bg-gray-800 rounded-xl overflow-hidden group">
|
| 421 |
+
<div class="h-48 overflow-hidden">
|
| 422 |
+
<img src="http://static.photos/food/640x360/3" alt="Duck Confit" class="w-full h-full object-cover group-hover:scale-105 transition duration-500">
|
| 423 |
+
</div>
|
| 424 |
+
<div class="p-6">
|
| 425 |
+
<div class="flex justify-between items-start mb-2">
|
| 426 |
+
<h3 class="text-xl font-bold">Duck Confit Croquettes</h3>
|
| 427 |
+
<span class="text-amber-400 font-medium">$22</span>
|
| 428 |
+
</div>
|
| 429 |
+
<p class="text-gray-400 mb-4">
|
| 430 |
+
Crispy fried duck confit with black truffle aioli and cherry mostarda. Served with micro greens.
|
| 431 |
+
</p>
|
| 432 |
+
<div class="text-xs text-gray-500">Contains: Poultry</div>
|
| 433 |
+
</div>
|
| 434 |
+
</div>
|
| 435 |
+
</div>
|
| 436 |
+
|
| 437 |
+
<!-- Small Plate 4 -->
|
| 438 |
+
<div class="menu-item">
|
| 439 |
+
<div class="menu-item-content bg-gray-800 rounded-xl overflow-hidden group">
|
| 440 |
+
<div class="h-48 overflow-hidden">
|
| 441 |
+
<img src="http://static.photos/food/640x360/4" alt="Lamb Lollipops" class="w-full h-full object-cover group-hover:scale-105 transition duration-500">
|
| 442 |
+
</div>
|
| 443 |
+
<div class="p-6">
|
| 444 |
+
<div class="flex justify-between items-start mb-2">
|
| 445 |
+
<h3 class="text-xl font-bold">Lamb Lollipops</h3>
|
| 446 |
+
<span class="text-amber-400 font-medium">$24</span>
|
| 447 |
+
</div>
|
| 448 |
+
<p class="text-gray-400 mb-4">
|
| 449 |
+
Herb-crusted lamb chops with mint chimichurri and roasted garlic mashed potatoes.
|
| 450 |
+
</p>
|
| 451 |
+
<div class="text-xs text-gray-500">Contains: Lamb, Dairy</div>
|
| 452 |
+
</div>
|
| 453 |
+
</div>
|
| 454 |
+
</div>
|
| 455 |
+
</div>
|
| 456 |
+
</section>
|
| 457 |
+
|
| 458 |
+
<!-- Desserts Section -->
|
| 459 |
+
<section id="desserts" class="menu-category pt-16">
|
| 460 |
+
<div class="flex items-center justify-between mb-8">
|
| 461 |
+
<h2 class="text-3xl font-bold flex items-center">
|
| 462 |
+
<i data-feather="pie-chart" class="text-amber-500 mr-3"></i>
|
| 463 |
+
Sweet Finales
|
| 464 |
+
</h2>
|
| 465 |
+
<span class="text-gray-400">$10 - $14</span>
|
| 466 |
+
</div>
|
| 467 |
+
|
| 468 |
+
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
| 469 |
+
<!-- Dessert 1 -->
|
| 470 |
+
<div class="menu-item">
|
| 471 |
+
<div class="menu-item-content bg-gray-800 rounded-xl p-6">
|
| 472 |
+
<div class="flex justify-between items-start mb-4">
|
| 473 |
+
<h3 class="text-xl font-bold">Chocolate Decadence</h3>
|
| 474 |
+
<span class="text-amber-400 font-medium">$12</span>
|
| 475 |
+
</div>
|
| 476 |
+
<p class="text-gray-400 mb-4">
|
| 477 |
+
Flourless chocolate cake with raspberry coulis and vanilla bean ice cream.
|
| 478 |
+
</p>
|
| 479 |
+
<div class="text-xs text-gray-500">Contains: Dairy, Eggs</div>
|
| 480 |
+
</div>
|
| 481 |
+
</div>
|
| 482 |
+
|
| 483 |
+
<!-- Dessert 2 -->
|
| 484 |
+
<div class="menu-item">
|
| 485 |
+
<div class="menu-item-content bg-gray-800 rounded-xl p-6">
|
| 486 |
+
<div class="flex justify-between items-start mb-4">
|
| 487 |
+
<h3 class="text-xl font-bold">Jazzberry Cheesecake</h3>
|
| 488 |
+
<span class="text-amber-400 font-medium">$14</span>
|
| 489 |
+
</div>
|
| 490 |
+
<p class="text-gray-400 mb-4">
|
| 491 |
+
New York-style cheesecake with mixed berry compote and almond brittle.
|
| 492 |
+
</p>
|
| 493 |
+
<div class="text-xs text-gray-500">Contains: Dairy, Eggs, Nuts</div>
|
| 494 |
+
</div>
|
| 495 |
+
</div>
|
| 496 |
+
|
| 497 |
+
<!-- Dessert 3 -->
|
| 498 |
+
<div class="menu-item">
|
| 499 |
+
<div class="menu-item-content bg-gray-800 rounded-xl p-6">
|
| 500 |
+
<div class="flex justify-between items-start mb-4">
|
| 501 |
+
<h3 class="text-xl font-bold">Bourbon Bread Pudding</h3>
|
| 502 |
+
<span class="text-amber-400 font-medium">$10</span>
|
| 503 |
+
</div>
|
| 504 |
+
<p class="text-gray-400 mb-4">
|
| 505 |
+
Warm brioche bread pudding with bourbon caramel sauce and whipped cream.
|
| 506 |
+
</p>
|
| 507 |
+
<div class="text-xs text-gray-500">Contains: Dairy, Eggs, Gluten, Alcohol</div>
|
| 508 |
+
</div>
|
| 509 |
+
</div>
|
| 510 |
+
|
| 511 |
+
<!-- Dessert 4 -->
|
| 512 |
+
<div class="menu-item">
|
| 513 |
+
<div class="menu-item-content bg-gray-800 rounded-xl p-6">
|
| 514 |
+
<div class="flex justify-between items-start mb-4">
|
| 515 |
+
<h3 class="text-xl font-bold">Seasonal Sorbet Trio</h3>
|
| 516 |
+
<span class="text-amber-400 font-medium">$10</span>
|
| 517 |
+
</div>
|
| 518 |
+
<p class="text-gray-400 mb-4">
|
| 519 |
+
Three scoops of house-made sorbet with fresh fruit and mint garnish.
|
| 520 |
+
</p>
|
| 521 |
+
<div class="text-xs text-gray-500">Vegan Option Available</div>
|
| 522 |
+
</div>
|
| 523 |
+
</div>
|
| 524 |
+
</div>
|
| 525 |
+
</section>
|
| 526 |
+
</div>
|
| 527 |
+
</div>
|
| 528 |
+
</main>
|
| 529 |
+
|
| 530 |
+
<!-- Footer -->
|
| 531 |
+
<footer class="relative z-10 bg-black bg-opacity-90 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 data-feather="music" class="text-amber-500"></i>
|
| 537 |
+
<span class="text-xl font-bold bg-gradient-to-r from-amber-400 to-amber-600 bg-clip-text text-transparent">Groovy Beats</span>
|
| 538 |
+
</div>
|
| 539 |
+
<p class="text-gray-400">
|
| 540 |
+
The finest jazz experience in the city since 1965.
|
| 541 |
+
</p>
|
| 542 |
+
</div>
|
| 543 |
+
<div>
|
| 544 |
+
<h3 class="text-white font-medium mb-4">Quick Links</h3>
|
| 545 |
+
<ul class="space-y-2">
|
| 546 |
+
<li><a href="index.html" class="text-gray-400 hover:text-amber-400 transition">Home</a></li>
|
| 547 |
+
<li><a href="performances.html" class="text-gray-400 hover:text-amber-400 transition">Performances</a></li>
|
| 548 |
+
<li><a href="history.html" class="text-gray-400 hover:text-amber-400 transition">History</a></li>
|
| 549 |
+
<li><a href="menu.html" class="text-gray-400 hover:text-amber-400 transition">Menu</a></li>
|
| 550 |
+
</ul>
|
| 551 |
+
</div>
|
| 552 |
+
<div>
|
| 553 |
+
<h3 class="text-white font-medium mb-4">Information</h3>
|
| 554 |
+
<ul class="space-y-2">
|
| 555 |
+
<li class="text-gray-400">123 Jazz Avenue</li>
|
| 556 |
+
<li class="text-gray-400">New York, NY 10001</li>
|
| 557 |
+
<li class="text-gray-400">(212) 555-7890</li>
|
| 558 |
+
<li class="text-gray-400">info@groovybeats.com</li>
|
| 559 |
+
</ul>
|
| 560 |
+
</div>
|
| 561 |
+
<div>
|
| 562 |
+
<h3 class="text-white font-medium mb-4">Opening Hours</h3>
|
| 563 |
+
<ul class="space-y-2">
|
| 564 |
+
<li class="text-gray-400">Monday - Thursday: 6PM - 1AM</li>
|
| 565 |
+
<li class="text-gray-400">Friday - Saturday: 6PM - 2AM</li>
|
| 566 |
+
<li class="text-gray-400">Sunday: 5PM - 12AM</li>
|
| 567 |
+
</ul>
|
| 568 |
+
</div>
|
| 569 |
+
</div>
|
| 570 |
+
<div class="border-t border-gray-800 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center">
|
| 571 |
+
<p class="text-gray-500 text-sm mb-4 md:mb-0">
|
| 572 |
+
© 2023 Groovy Beats & Smooth Seats. All rights reserved.
|
| 573 |
+
</p>
|
| 574 |
+
<div class="flex space-x-4">
|
| 575 |
+
<a href="#" class="text-gray-400 hover:text-amber-400 transition">
|
| 576 |
+
<i data-feather="facebook"></i>
|
| 577 |
+
</a>
|
| 578 |
+
<a href="#" class="text-gray-400 hover:text-amber-400 transition">
|
| 579 |
+
<i data-feather="instagram"></i>
|
| 580 |
+
</a>
|
| 581 |
+
<a href="#" class="text-gray-400 hover:text-amber-400 transition">
|
| 582 |
+
<i data-feather="twitter"></i>
|
| 583 |
+
</a>
|
| 584 |
+
</div>
|
| 585 |
+
</div>
|
| 586 |
+
</div>
|
| 587 |
+
</footer>
|
| 588 |
+
|
| 589 |
+
<script>
|
| 590 |
+
// Initialize Feather Icons
|
| 591 |
+
feather.replace();
|
| 592 |
+
|
| 593 |
+
// Smooth scrolling for menu navigation
|
| 594 |
+
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
|
| 595 |
+
anchor.addEventListener('click', function (e) {
|
| 596 |
+
e.preventDefault();
|
| 597 |
+
|
| 598 |
+
document.querySelector(this.getAttribute('href')).scrollIntoView({
|
| 599 |
+
behavior: 'smooth'
|
| 600 |
+
});
|
| 601 |
+
});
|
| 602 |
+
});
|
| 603 |
+
</script>
|
| 604 |
+
</body>
|
| 605 |
+
</html>
|
performances.html
ADDED
|
@@ -0,0 +1,387 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 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>Upcoming Performances | Groovy Beats & Smooth Seats</title>
|
| 7 |
+
<link rel="icon" type="image/x-icon" href="/static/favicon.ico">
|
| 8 |
+
<script src="https://cdn.tailwindcss.com"></script>
|
| 9 |
+
<script src="https://unpkg.com/feather-icons"></script>
|
| 10 |
+
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
|
| 11 |
+
<style>
|
| 12 |
+
.calendar-day {
|
| 13 |
+
transition: all 0.3s ease;
|
| 14 |
+
}
|
| 15 |
+
.calendar-day:hover {
|
| 16 |
+
transform: scale(1.05);
|
| 17 |
+
box-shadow: 0 0 0 2px rgba(217, 119, 6, 0.5);
|
| 18 |
+
}
|
| 19 |
+
.calendar-day.active {
|
| 20 |
+
background-color: rgb(217, 119, 6);
|
| 21 |
+
color: white;
|
| 22 |
+
}
|
| 23 |
+
</style>
|
| 24 |
+
</head>
|
| 25 |
+
<body class="bg-gray-900 text-gray-100 font-sans">
|
| 26 |
+
<!-- Navigation -->
|
| 27 |
+
<nav class="bg-black bg-opacity-70 backdrop-filter backdrop-blur-sm sticky top-0 z-50">
|
| 28 |
+
<div class="container mx-auto px-6 py-4">
|
| 29 |
+
<div class="flex items-center justify-between">
|
| 30 |
+
<div class="flex items-center space-x-4">
|
| 31 |
+
<i data-feather="music" class="text-amber-500"></i>
|
| 32 |
+
<span class="text-xl font-bold bg-gradient-to-r from-amber-400 to-amber-600 bg-clip-text text-transparent">Groovy Beats</span>
|
| 33 |
+
</div>
|
| 34 |
+
<div class="hidden md:flex items-center space-x-8">
|
| 35 |
+
<a href="index.html" class="text-gray-300 hover:text-amber-400 transition">Home</a>
|
| 36 |
+
<a href="performances.html" class="text-amber-400 font-medium hover:text-amber-300 transition">Performances</a>
|
| 37 |
+
<a href="history.html" class="text-gray-300 hover:text-amber-400 transition">History</a>
|
| 38 |
+
<a href="menu.html" class="text-gray-300 hover:text-amber-400 transition">Menu</a>
|
| 39 |
+
<a href="reservation.html" class="bg-amber-600 hover:bg-amber-700 text-white px-4 py-2 rounded-full transition">Reserve Table</a>
|
| 40 |
+
</div>
|
| 41 |
+
<button class="md:hidden text-gray-300 focus:outline-none">
|
| 42 |
+
<i data-feather="menu"></i>
|
| 43 |
+
</button>
|
| 44 |
+
</div>
|
| 45 |
+
</div>
|
| 46 |
+
</nav>
|
| 47 |
+
|
| 48 |
+
<!-- Main Content -->
|
| 49 |
+
<main class="relative z-10 py-12">
|
| 50 |
+
<div class="container mx-auto px-6">
|
| 51 |
+
<div class="mb-12">
|
| 52 |
+
<h1 class="text-4xl md:text-5xl font-bold mb-4">
|
| 53 |
+
<span class="bg-gradient-to-r from-amber-400 to-amber-600 bg-clip-text text-transparent">Performance</span> Calendar
|
| 54 |
+
</h1>
|
| 55 |
+
<p class="text-gray-400 max-w-2xl">
|
| 56 |
+
Discover all the incredible jazz artists gracing our stage this month. Book your table early as our shows often sell out.
|
| 57 |
+
</p>
|
| 58 |
+
</div>
|
| 59 |
+
|
| 60 |
+
<!-- Calendar & Filter -->
|
| 61 |
+
<div class="bg-gray-800 bg-opacity-70 rounded-xl p-6 mb-12">
|
| 62 |
+
<div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-8">
|
| 63 |
+
<h2 class="text-2xl font-bold mb-4 md:mb-0">
|
| 64 |
+
November 2023
|
| 65 |
+
</h2>
|
| 66 |
+
<div class="flex space-x-4">
|
| 67 |
+
<button class="bg-gray-700 hover:bg-gray-600 px-4 py-2 rounded-full transition">
|
| 68 |
+
<i data-feather="chevron-left" class="w-5 h-5"></i>
|
| 69 |
+
</button>
|
| 70 |
+
<button class="bg-amber-600 hover:bg-amber-700 text-white px-6 py-2 rounded-full transition">
|
| 71 |
+
Today
|
| 72 |
+
</button>
|
| 73 |
+
<button class="bg-gray-700 hover:bg-gray-600 px-4 py-2 rounded-full transition">
|
| 74 |
+
<i data-feather="chevron-right" class="w-5 h-5"></i>
|
| 75 |
+
</button>
|
| 76 |
+
</div>
|
| 77 |
+
</div>
|
| 78 |
+
|
| 79 |
+
<div class="grid grid-cols-7 gap-2 mb-6">
|
| 80 |
+
<div class="text-center text-gray-500 text-sm font-medium">Sun</div>
|
| 81 |
+
<div class="text-center text-gray-500 text-sm font-medium">Mon</div>
|
| 82 |
+
<div class="text-center text-gray-500 text-sm font-medium">Tue</div>
|
| 83 |
+
<div class="text-center text-gray-500 text-sm font-medium">Wed</div>
|
| 84 |
+
<div class="text-center text-gray-500 text-sm font-medium">Thu</div>
|
| 85 |
+
<div class="text-center text-gray-500 text-sm font-medium">Fri</div>
|
| 86 |
+
<div class="text-center text-gray-500 text-sm font-medium">Sat</div>
|
| 87 |
+
</div>
|
| 88 |
+
|
| 89 |
+
<div class="grid grid-cols-7 gap-2">
|
| 90 |
+
<!-- Calendar Days -->
|
| 91 |
+
<div class="h-12"></div>
|
| 92 |
+
<div class="h-12"></div>
|
| 93 |
+
<div class="h-12"></div>
|
| 94 |
+
<div class="h-12"></div>
|
| 95 |
+
<div class="h-12"></div>
|
| 96 |
+
<div class="h-12"></div>
|
| 97 |
+
<div class="h-12 calendar-day flex items-center justify-center rounded-full cursor-pointer hover:bg-gray-700">
|
| 98 |
+
<span>1</span>
|
| 99 |
+
</div>
|
| 100 |
+
<div class="h-12 calendar-day flex items-center justify-center rounded-full cursor-pointer hover:bg-gray-700">
|
| 101 |
+
<span>2</span>
|
| 102 |
+
</div>
|
| 103 |
+
<div class="h-12 calendar-day flex items-center justify-center rounded-full cursor-pointer hover:bg-gray-700">
|
| 104 |
+
<span>3</span>
|
| 105 |
+
</div>
|
| 106 |
+
<div class="h-12 calendar-day flex items-center justify-center rounded-full cursor-pointer hover:bg-gray-700">
|
| 107 |
+
<span>4</span>
|
| 108 |
+
</div>
|
| 109 |
+
<div class="h-12 calendar-day flex items-center justify-center rounded-full cursor-pointer hover:bg-gray-700">
|
| 110 |
+
<span>5</span>
|
| 111 |
+
</div>
|
| 112 |
+
<div class="h-12 calendar-day flex items-center justify-center rounded-full cursor-pointer hover:bg-gray-700">
|
| 113 |
+
<span>6</span>
|
| 114 |
+
</div>
|
| 115 |
+
<div class="h-12 calendar-day flex items-center justify-center rounded-full cursor-pointer hover:bg-gray-700">
|
| 116 |
+
<span>7</span>
|
| 117 |
+
</div>
|
| 118 |
+
<div class="h-12 calendar-day flex items-center justify-center rounded-full cursor-pointer hover:bg-gray-700">
|
| 119 |
+
<span>8</span>
|
| 120 |
+
</div>
|
| 121 |
+
<div class="h-12 calendar-day flex items-center justify-center rounded-full cursor-pointer hover:bg-gray-700">
|
| 122 |
+
<span>9</span>
|
| 123 |
+
</div>
|
| 124 |
+
<div class="h-12 calendar-day flex items-center justify-center rounded-full cursor-pointer hover:bg-gray-700">
|
| 125 |
+
<span>10</span>
|
| 126 |
+
</div>
|
| 127 |
+
<div class="h-12 calendar-day flex items-center justify-center rounded-full cursor-pointer hover:bg-gray-700">
|
| 128 |
+
<span>11</span>
|
| 129 |
+
</div>
|
| 130 |
+
<div class="h-12 calendar-day flex items-center justify-center rounded-full cursor-pointer hover:bg-gray-700">
|
| 131 |
+
<span>12</span>
|
| 132 |
+
</div>
|
| 133 |
+
<div class="h-12 calendar-day flex items-center justify-center rounded-full cursor-pointer hover:bg-gray-700">
|
| 134 |
+
<span>13</span>
|
| 135 |
+
</div>
|
| 136 |
+
<div class="h-12 calendar-day flex items-center justify-center rounded-full cursor-pointer hover:bg-gray-700">
|
| 137 |
+
<span>14</span>
|
| 138 |
+
</div>
|
| 139 |
+
<div class="h-12 calendar-day flex items-center justify-center rounded-full cursor-pointer hover:bg-gray-700 active">
|
| 140 |
+
<span>15</span>
|
| 141 |
+
</div>
|
| 142 |
+
<div class="h-12 calendar-day flex items-center justify-center rounded-full cursor-pointer hover:bg-gray-700">
|
| 143 |
+
<span>16</span>
|
| 144 |
+
</div>
|
| 145 |
+
<div class="h-12 calendar-day flex items-center justify-center rounded-full cursor-pointer hover:bg-gray-700">
|
| 146 |
+
<span>17</span>
|
| 147 |
+
</div>
|
| 148 |
+
<div class="h-12 calendar-day flex items-center justify-center rounded-full cursor-pointer hover:bg-gray-700">
|
| 149 |
+
<span>18</span>
|
| 150 |
+
</div>
|
| 151 |
+
<div class="h-12 calendar-day flex items-center justify-center rounded-full cursor-pointer hover:bg-gray-700">
|
| 152 |
+
<span>19</span>
|
| 153 |
+
</div>
|
| 154 |
+
<div class="h-12 calendar-day flex items-center justify-center rounded-full cursor-pointer hover:bg-gray-700">
|
| 155 |
+
<span>20</span>
|
| 156 |
+
</div>
|
| 157 |
+
<div class="h-12 calendar-day flex items-center justify-center rounded-full cursor-pointer hover:bg-gray-700">
|
| 158 |
+
<span>21</span>
|
| 159 |
+
</div>
|
| 160 |
+
<div class="h-12 calendar-day flex items-center justify-center rounded-full cursor-pointer hover:bg-gray-700">
|
| 161 |
+
<span>22</span>
|
| 162 |
+
</div>
|
| 163 |
+
<div class="h-12 calendar-day flex items-center justify-center rounded-full cursor-pointer hover:bg-gray-700">
|
| 164 |
+
<span>23</span>
|
| 165 |
+
</div>
|
| 166 |
+
<div class="h-12 calendar-day flex items-center justify-center rounded-full cursor-pointer hover:bg-gray-700">
|
| 167 |
+
<span>24</span>
|
| 168 |
+
</div>
|
| 169 |
+
<div class="h-12 calendar-day flex items-center justify-center rounded-full cursor-pointer hover:bg-gray-700">
|
| 170 |
+
<span>25</span>
|
| 171 |
+
</div>
|
| 172 |
+
<div class="h-12 calendar-day flex items-center justify-center rounded-full cursor-pointer hover:bg-gray-700">
|
| 173 |
+
<span>26</span>
|
| 174 |
+
</div>
|
| 175 |
+
<div class="h-12 calendar-day flex items-center justify-center rounded-full cursor-pointer hover:bg-gray-700">
|
| 176 |
+
<span>27</span>
|
| 177 |
+
</div>
|
| 178 |
+
<div class="h-12 calendar-day flex items-center justify-center rounded-full cursor-pointer hover:bg-gray-700">
|
| 179 |
+
<span>28</span>
|
| 180 |
+
</div>
|
| 181 |
+
<div class="h-12 calendar-day flex items-center justify-center rounded-full cursor-pointer hover:bg-gray-700">
|
| 182 |
+
<span>29</span>
|
| 183 |
+
</div>
|
| 184 |
+
<div class="h-12 calendar-day flex items-center justify-center rounded-full cursor-pointer hover:bg-gray-700">
|
| 185 |
+
<span>30</span>
|
| 186 |
+
</div>
|
| 187 |
+
</div>
|
| 188 |
+
</div>
|
| 189 |
+
|
| 190 |
+
<!-- Selected Day Performances -->
|
| 191 |
+
<div class="mb-8">
|
| 192 |
+
<h2 class="text-2xl font-bold mb-6 flex items-center">
|
| 193 |
+
<i data-feather="calendar" class="text-amber-500 mr-2"></i>
|
| 194 |
+
November 15, 2023
|
| 195 |
+
</h2>
|
| 196 |
+
|
| 197 |
+
<div class="space-y-6">
|
| 198 |
+
<!-- Performance 1 -->
|
| 199 |
+
<div class="bg-gray-800 bg-opacity-70 rounded-xl overflow-hidden group">
|
| 200 |
+
<div class="flex flex-col md:flex-row">
|
| 201 |
+
<div class="md:w-1/3 relative">
|
| 202 |
+
<img src="http://static.photos/black/640x360/4" alt="Jazz ensemble" class="w-full h-full object-cover md:min-h-64 group-hover:scale-105 transition duration-500">
|
| 203 |
+
<div class="absolute inset-0 bg-gradient-to-r from-black via-transparent to-transparent md:bg-gradient-to-t"></div>
|
| 204 |
+
</div>
|
| 205 |
+
<div class="md:w-2/3 p-6">
|
| 206 |
+
<div class="flex justify-between items-start mb-2">
|
| 207 |
+
<h3 class="text-2xl font-bold">The Midnight Quartet</h3>
|
| 208 |
+
<span class="bg-amber-600 text-white text-xs px-3 py-1 rounded-full">8:30 PM</span>
|
| 209 |
+
</div>
|
| 210 |
+
<p class="text-gray-400 mb-4">Main Stage</p>
|
| 211 |
+
<p class="text-gray-300 mb-6">
|
| 212 |
+
Experience the smooth sounds of The Midnight Quartet as they blend classic jazz with contemporary influences. Led by saxophonist Marcus Johnson, this ensemble has been captivating audiences worldwide with their unique sound.
|
| 213 |
+
</p>
|
| 214 |
+
<div class="flex flex-col sm:flex-row space-y-3 sm:space-y-0 sm:space-x-4">
|
| 215 |
+
<a href="#" class="bg-amber-600 hover:bg-amber-700 text-white px-6 py-2 rounded-full text-center transition">Book a Table</a>
|
| 216 |
+
<a href="#" class="border border-amber-500 text-amber-400 hover:bg-amber-900 hover:bg-opacity-30 px-6 py-2 rounded-full text-center transition">Learn More</a>
|
| 217 |
+
</div>
|
| 218 |
+
</div>
|
| 219 |
+
</div>
|
| 220 |
+
</div>
|
| 221 |
+
|
| 222 |
+
<!-- Performance 2 -->
|
| 223 |
+
<div class="bg-gray-800 bg-opacity-70 rounded-xl overflow-hidden group">
|
| 224 |
+
<div class="flex flex-col md:flex-row">
|
| 225 |
+
<div class="md:w-1/3 relative">
|
| 226 |
+
<img src="http://static.photos/black/640x360/5" alt="Jazz singer" class="w-full h-full object-cover md:min-h-64 group-hover:scale-105 transition duration-500">
|
| 227 |
+
<div class="absolute inset-0 bg-gradient-to-r from-black via-transparent to-transparent md:bg-gradient-to-t"></div>
|
| 228 |
+
</div>
|
| 229 |
+
<div class="md:w-2/3 p-6">
|
| 230 |
+
<div class="flex justify-between items-start mb-2">
|
| 231 |
+
<h3 class="text-2xl font-bold">Vocal Jazz Night</h3>
|
| 232 |
+
<span class="bg-amber-600 text-white text-xs px-3 py-1 rounded-full">10:30 PM</span>
|
| 233 |
+
</div>
|
| 234 |
+
<p class="text-gray-400 mb-4">Lounge Area</p>
|
| 235 |
+
<p class="text-gray-300 mb-6">
|
| 236 |
+
Join us for an intimate evening of vocal jazz featuring rising star Lisa Chen. Accompanied by a trio of exceptional musicians, Lisa will perform jazz standards and original compositions in our cozy lounge area.
|
| 237 |
+
</p>
|
| 238 |
+
<div class="flex flex-col sm:flex-row space-y-3 sm:space-y-0 sm:space-x-4">
|
| 239 |
+
<a href="#" class="bg-amber-600 hover:bg-amber-700 text-white px-6 py-2 rounded-full text-center transition">Book a Table</a>
|
| 240 |
+
<a href="#" class="border border-amber-500 text-amber-400 hover:bg-amber-900 hover:bg-opacity-30 px-6 py-2 rounded-full text-center transition">Learn More</a>
|
| 241 |
+
</div>
|
| 242 |
+
</div>
|
| 243 |
+
</div>
|
| 244 |
+
</div>
|
| 245 |
+
</div>
|
| 246 |
+
</div>
|
| 247 |
+
|
| 248 |
+
<!-- Coming Soon -->
|
| 249 |
+
<div>
|
| 250 |
+
<h2 class="text-2xl font-bold mb-6 flex items-center">
|
| 251 |
+
<i data-feather="clock" class="text-amber-500 mr-2"></i>
|
| 252 |
+
Coming Soon
|
| 253 |
+
</h2>
|
| 254 |
+
|
| 255 |
+
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
|
| 256 |
+
<!-- Coming Soon 1 -->
|
| 257 |
+
<div class="bg-gray-800 bg-opacity-70 rounded-xl overflow-hidden group">
|
| 258 |
+
<div class="relative h-48">
|
| 259 |
+
<img src="http://static.photos/black/640x360/6" alt="Jazz musician" class="w-full h-full object-cover group-hover:scale-105 transition duration-500">
|
| 260 |
+
<div class="absolute inset-0 bg-gradient-to-t from-black via-transparent to-transparent"></div>
|
| 261 |
+
<div class="absolute bottom-0 left-0 p-4">
|
| 262 |
+
<span class="bg-amber-600 text-white text-xs px-3 py-1 rounded-full">NOV 22</span>
|
| 263 |
+
</div>
|
| 264 |
+
</div>
|
| 265 |
+
<div class="p-4">
|
| 266 |
+
<h3 class="text-xl font-bold mb-2">Latin Jazz Night</h3>
|
| 267 |
+
<p class="text-gray-400 text-sm mb-3">8:00 PM | Main Stage</p>
|
| 268 |
+
<p class="text-gray-300 text-sm line-clamp-2">
|
| 269 |
+
The hottest Latin jazz ensemble in town brings fiery rhythms and sizzling melodies to our stage.
|
| 270 |
+
</p>
|
| 271 |
+
</div>
|
| 272 |
+
</div>
|
| 273 |
+
|
| 274 |
+
<!-- Coming Soon 2 -->
|
| 275 |
+
<div class="bg-gray-800 bg-opacity-70 rounded-xl overflow-hidden group">
|
| 276 |
+
<div class="relative h-48">
|
| 277 |
+
<img src="http://static.photos/black/640x360/7" alt="Jazz musician" class="w-full h-full object-cover group-hover:scale-105 transition duration-500">
|
| 278 |
+
<div class="absolute inset-0 bg-gradient-to-t from-black via-transparent to-transparent"></div>
|
| 279 |
+
<div class="absolute bottom-0 left-0 p-4">
|
| 280 |
+
<span class="bg-amber-600 text-white text-xs px-3 py-1 rounded-full">NOV 24</span>
|
| 281 |
+
</div>
|
| 282 |
+
</div>
|
| 283 |
+
<div class="p-4">
|
| 284 |
+
<h3 class="text-xl font-bold mb-2">Piano Legends Tribute</h3>
|
| 285 |
+
<p class="text-gray-400 text-sm mb-3">9:00 PM | Main Stage</p>
|
| 286 |
+
<p class="text-gray-300 text-sm line-clamp-2">
|
| 287 |
+
Celebrate the great jazz pianists from Art Tatum to Herbie Hancock in this special tribute performance.
|
| 288 |
+
</p>
|
| 289 |
+
</div>
|
| 290 |
+
</div>
|
| 291 |
+
|
| 292 |
+
<!-- Coming Soon 3 -->
|
| 293 |
+
<div class="bg-gray-800 bg-opacity-70 rounded-xl overflow-hidden group">
|
| 294 |
+
<div class="relative h-48">
|
| 295 |
+
<img src="http://static.photos/black/640x360/8" alt="Jazz musician" class="w-full h-full object-cover group-hover:scale-105 transition duration-500">
|
| 296 |
+
<div class="absolute inset-0 bg-gradient-to-t from-black via-transparent to-transparent"></div>
|
| 297 |
+
<div class="absolute bottom-0 left-0 p-4">
|
| 298 |
+
<span class="bg-amber-600 text-white text-xs px-3 py-1 rounded-full">NOV 29</span>
|
| 299 |
+
</div>
|
| 300 |
+
</div>
|
| 301 |
+
<div class="p-4">
|
| 302 |
+
<h3 class="text-xl font-bold mb-2">Jazz & Poetry</h3>
|
| 303 |
+
<p class="text-gray-400 text-sm mb-3">7:30 PM | Lounge Area</p>
|
| 304 |
+
<p class="text-gray-300 text-sm line-clamp-2">
|
| 305 |
+
An evening of improvisation where jazz musicians and spoken word artists create magic together.
|
| 306 |
+
</p>
|
| 307 |
+
</div>
|
| 308 |
+
</div>
|
| 309 |
+
</div>
|
| 310 |
+
</div>
|
| 311 |
+
</div>
|
| 312 |
+
</main>
|
| 313 |
+
|
| 314 |
+
<!-- Footer -->
|
| 315 |
+
<footer class="relative z-10 bg-black bg-opacity-90 py-12">
|
| 316 |
+
<div class="container mx-auto px-6">
|
| 317 |
+
<div class="grid grid-cols-1 md:grid-cols-4 gap-8">
|
| 318 |
+
<div>
|
| 319 |
+
<div class="flex items-center space-x-2 mb-4">
|
| 320 |
+
<i data-feather="music" class="text-amber-500"></i>
|
| 321 |
+
<span class="text-xl font-bold bg-gradient-to-r from-amber-400 to-amber-600 bg-clip-text text-transparent">Groovy Beats</span>
|
| 322 |
+
</div>
|
| 323 |
+
<p class="text-gray-400">
|
| 324 |
+
The finest jazz experience in the city since 1965.
|
| 325 |
+
</p>
|
| 326 |
+
</div>
|
| 327 |
+
<div>
|
| 328 |
+
<h3 class="text-white font-medium mb-4">Quick Links</h3>
|
| 329 |
+
<ul class="space-y-2">
|
| 330 |
+
<li><a href="index.html" class="text-gray-400 hover:text-amber-400 transition">Home</a></li>
|
| 331 |
+
<li><a href="performances.html" class="text-gray-400 hover:text-amber-400 transition">Performances</a></li>
|
| 332 |
+
<li><a href="history.html" class="text-gray-400 hover:text-amber-400 transition">History</a></li>
|
| 333 |
+
<li><a href="menu.html" class="text-gray-400 hover:text-amber-400 transition">Menu</a></li>
|
| 334 |
+
</ul>
|
| 335 |
+
</div>
|
| 336 |
+
<div>
|
| 337 |
+
<h3 class="text-white font-medium mb-4">Information</h3>
|
| 338 |
+
<ul class="space-y-2">
|
| 339 |
+
<li class="text-gray-400">123 Jazz Avenue</li>
|
| 340 |
+
<li class="text-gray-400">New York, NY 10001</li>
|
| 341 |
+
<li class="text-gray-400">(212) 555-7890</li>
|
| 342 |
+
<li class="text-gray-400">info@groovybeats.com</li>
|
| 343 |
+
</ul>
|
| 344 |
+
</div>
|
| 345 |
+
<div>
|
| 346 |
+
<h3 class="text-white font-medium mb-4">Opening Hours</h3>
|
| 347 |
+
<ul class="space-y-2">
|
| 348 |
+
<li class="text-gray-400">Monday - Thursday: 6PM - 1AM</li>
|
| 349 |
+
<li class="text-gray-400">Friday - Saturday: 6PM - 2AM</li>
|
| 350 |
+
<li class="text-gray-400">Sunday: 5PM - 12AM</li>
|
| 351 |
+
</ul>
|
| 352 |
+
</div>
|
| 353 |
+
</div>
|
| 354 |
+
<div class="border-t border-gray-800 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center">
|
| 355 |
+
<p class="text-gray-500 text-sm mb-4 md:mb-0">
|
| 356 |
+
© 2023 Groovy Beats & Smooth Seats. All rights reserved.
|
| 357 |
+
</p>
|
| 358 |
+
<div class="flex space-x-4">
|
| 359 |
+
<a href="#" class="text-gray-400 hover:text-amber-400 transition">
|
| 360 |
+
<i data-feather="facebook"></i>
|
| 361 |
+
</a>
|
| 362 |
+
<a href="#" class="text-gray-400 hover:text-amber-400 transition">
|
| 363 |
+
<i data-feather="instagram"></i>
|
| 364 |
+
</a>
|
| 365 |
+
<a href="#" class="text-gray-400 hover:text-amber-400 transition">
|
| 366 |
+
<i data-feather="twitter"></i>
|
| 367 |
+
</a>
|
| 368 |
+
</div>
|
| 369 |
+
</div>
|
| 370 |
+
</div>
|
| 371 |
+
</footer>
|
| 372 |
+
|
| 373 |
+
<script>
|
| 374 |
+
// Initialize Feather Icons
|
| 375 |
+
feather.replace();
|
| 376 |
+
|
| 377 |
+
// Calendar day selection
|
| 378 |
+
document.querySelectorAll('.calendar-day').forEach(day => {
|
| 379 |
+
day.addEventListener('click', function() {
|
| 380 |
+
document.querySelector('.calendar-day.active')?.classList.remove('active');
|
| 381 |
+
this.classList.add('active');
|
| 382 |
+
// Here you would typically fetch performances for the selected day
|
| 383 |
+
});
|
| 384 |
+
});
|
| 385 |
+
</script>
|
| 386 |
+
</body>
|
| 387 |
+
</html>
|
reservation.html
ADDED
|
@@ -0,0 +1,293 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 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>Reserve a Table | Groovy Beats & Smooth Seats</title>
|
| 7 |
+
<link rel="icon" type="image/x-icon" href="/static/favicon.ico">
|
| 8 |
+
<script src="https://cdn.tailwindcss.com"></script>
|
| 9 |
+
<script src="https://unpkg.com/feather-icons"></script>
|
| 10 |
+
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
|
| 11 |
+
<style>
|
| 12 |
+
.form-input {
|
| 13 |
+
transition: all 0.3s ease;
|
| 14 |
+
}
|
| 15 |
+
.form-input:focus {
|
| 16 |
+
box-shadow: 0 0 0 2px rgba(217, 119, 6, 0.5);
|
| 17 |
+
}
|
| 18 |
+
.seat:hover .seat-icon {
|
| 19 |
+
transform: scale(1.1);
|
| 20 |
+
}
|
| 21 |
+
.seat.selected .seat-icon {
|
| 22 |
+
color: rgb(217, 119, 6);
|
| 23 |
+
stroke-width: 3;
|
| 24 |
+
}
|
| 25 |
+
</style>
|
| 26 |
+
</head>
|
| 27 |
+
<body class="bg-gray-900 text-gray-100 font-sans">
|
| 28 |
+
<!-- Navigation -->
|
| 29 |
+
<nav class="bg-black bg-opacity-70 backdrop-filter backdrop-blur-sm sticky top-0 z-50">
|
| 30 |
+
<div class="container mx-auto px-6 py-4">
|
| 31 |
+
<div class="flex items-center justify-between">
|
| 32 |
+
<div class="flex items-center space-x-4">
|
| 33 |
+
<i data-feather="music" class="text-amber-500"></i>
|
| 34 |
+
<span class="text-xl font-bold bg-gradient-to-r from-amber-400 to-amber-600 bg-clip-text text-transparent">Groovy Beats</span>
|
| 35 |
+
</div>
|
| 36 |
+
<div class="hidden md:flex items-center space-x-8">
|
| 37 |
+
<a href="index.html" class="text-gray-300 hover:text-amber-400 transition">Home</a>
|
| 38 |
+
<a href="performances.html" class="text-gray-300 hover:text-amber-400 transition">Performances</a>
|
| 39 |
+
<a href="history.html" class="text-gray-300 hover:text-amber-400 transition">History</a>
|
| 40 |
+
<a href="menu.html" class="text-gray-300 hover:text-amber-400 transition">Menu</a>
|
| 41 |
+
<a href="reservation.html" class="bg-amber-600 hover:bg-amber-700 text-white px-4 py-2 rounded-full transition">Reserve Table</a>
|
| 42 |
+
</div>
|
| 43 |
+
<button class="md:hidden text-gray-300 focus:outline-none">
|
| 44 |
+
<i data-feather="menu"></i>
|
| 45 |
+
</button>
|
| 46 |
+
</div>
|
| 47 |
+
</div>
|
| 48 |
+
</nav>
|
| 49 |
+
|
| 50 |
+
<!-- Main Content -->
|
| 51 |
+
<main class="relative z-10 py-12">
|
| 52 |
+
<div class="container mx-auto px-6">
|
| 53 |
+
<div class="max-w-4xl mx-auto">
|
| 54 |
+
<div class="mb-12 text-center">
|
| 55 |
+
<h1 class="text-4xl md:text-5xl font-bold mb-4">
|
| 56 |
+
<span class="bg-gradient-to-r from-amber-400 to-amber-600 bg-clip-text text-transparent">Reserve</span> Your Table
|
| 57 |
+
</h1>
|
| 58 |
+
<p class="text-gray-400 max-w-2xl mx-auto">
|
| 59 |
+
Secure your spot for an unforgettable jazz experience. Our intimate venue fills up quickly, especially on performance nights.
|
| 60 |
+
</p>
|
| 61 |
+
</div>
|
| 62 |
+
|
| 63 |
+
<!-- Reservation Form -->
|
| 64 |
+
<div class="bg-gray-800 bg-opacity-70 rounded-xl p-8">
|
| 65 |
+
<form id="reservationForm">
|
| 66 |
+
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
|
| 67 |
+
<!-- Date Selection -->
|
| 68 |
+
<div>
|
| 69 |
+
<label for="reservationDate" class="block text-sm font-medium mb-2">Date</label>
|
| 70 |
+
<div class="relative">
|
| 71 |
+
<input type="date" id="reservationDate" class="form-input w-full bg-gray-700 border border-gray-600 rounded-lg px-4 py-3 focus:border-amber-500 focus:ring-amber-500">
|
| 72 |
+
<i data-feather="calendar" class="absolute right-3 top-3 text-gray-400"></i>
|
| 73 |
+
</div>
|
| 74 |
+
</div>
|
| 75 |
+
|
| 76 |
+
<!-- Time Selection -->
|
| 77 |
+
<div>
|
| 78 |
+
<label for="reservationTime" class="block text-sm font-medium mb-2">Time</label>
|
| 79 |
+
<div class="relative">
|
| 80 |
+
<select id="reservationTime" class="form-input w-full bg-gray-700 border border-gray-600 rounded-lg px-4 py-3 focus:border-amber-500 focus:ring-amber-500 appearance-none">
|
| 81 |
+
<option value="">Select a time</option>
|
| 82 |
+
<option value="18:00">6:00 PM</option>
|
| 83 |
+
<option value="18:30">6:30 PM</option>
|
| 84 |
+
<option value="19:00">7:00 PM</option>
|
| 85 |
+
<option value="19:30">7:30 PM</option>
|
| 86 |
+
<option value="20:00">8:00 PM</option>
|
| 87 |
+
<option value="20:30">8:30 PM</option>
|
| 88 |
+
<option value="21:00">9:00 PM</option>
|
| 89 |
+
<option value="21:30">9:30 PM</option>
|
| 90 |
+
<option value="22:00">10:00 PM</option>
|
| 91 |
+
</select>
|
| 92 |
+
<i data-feather="chevron-down" class="absolute right-3 top-3 text-gray-400"></i>
|
| 93 |
+
</div>
|
| 94 |
+
</div>
|
| 95 |
+
|
| 96 |
+
<!-- Party Size -->
|
| 97 |
+
<div>
|
| 98 |
+
<label for="partySize" class="block text-sm font-medium mb-2">Party Size</label>
|
| 99 |
+
<div class="relative">
|
| 100 |
+
<select id="partySize" class="form-input w-full bg-gray-700 border border-gray-600 rounded-lg px-4 py-3 focus:border-amber-500 focus:ring-amber-500 appearance-none">
|
| 101 |
+
<option value="">Number of guests</option>
|
| 102 |
+
<option value="1">1 person</option>
|
| 103 |
+
<option value="2">2 people</option>
|
| 104 |
+
<option value="3">3 people</option>
|
| 105 |
+
<option value="4">4 people</option>
|
| 106 |
+
<option value="5">5 people</option>
|
| 107 |
+
<option value="6">6 people</option>
|
| 108 |
+
<option value="7">7 people</option>
|
| 109 |
+
<option value="8">8 people</option>
|
| 110 |
+
<option value="9">9+ people</option>
|
| 111 |
+
</select>
|
| 112 |
+
<i data-feather="users" class="absolute right-3 top-3 text-gray-400"></i>
|
| 113 |
+
</div>
|
| 114 |
+
</div>
|
| 115 |
+
|
| 116 |
+
<!-- Performance Selection -->
|
| 117 |
+
<div>
|
| 118 |
+
<label for="performance" class="block text-sm font-medium mb-2">Performance (optional)</label>
|
| 119 |
+
<div class="relative">
|
| 120 |
+
<select id="performance" class="form-input w-full bg-gray-700 border border-gray-600 rounded-lg px-4 py-3 focus:border-amber-500 focus:ring-amber-500 appearance-none">
|
| 121 |
+
<option value="">None - Just drinks/dinner</option>
|
| 122 |
+
<option value="midnight-quartet">The Midnight Quartet - Nov 15, 8:30 PM</option>
|
| 123 |
+
<option value="vocal-jazz">Vocal Jazz Night - Nov 15, 10:30 PM</option>
|
| 124 |
+
<option value="latin-jazz">Latin Jazz Night - Nov 22, 8:00 PM</option>
|
| 125 |
+
<option value="piano-tribute">Piano Legends Tribute - Nov 24, 9:00 PM</option>
|
| 126 |
+
</select>
|
| 127 |
+
<i data-feather="music" class="absolute right-3 top-3 text-gray-400"></i>
|
| 128 |
+
</div>
|
| 129 |
+
</div>
|
| 130 |
+
</div>
|
| 131 |
+
|
| 132 |
+
<!-- Seating Preference -->
|
| 133 |
+
<div class="mb-8">
|
| 134 |
+
<label class="block text-sm font-medium mb-4">Seating Preference</label>
|
| 135 |
+
<div class="grid grid-cols-2 sm:grid-cols-4 gap-4">
|
| 136 |
+
<!-- Stage View -->
|
| 137 |
+
<div class="seat flex flex-col items-center justify-center p-4 bg-gray-700 rounded-lg cursor-pointer">
|
| 138 |
+
<i data-feather="eye" class="seat-icon w-8 h-8 mb-2 transition"></i>
|
| 139 |
+
<span>Stage View</span>
|
| 140 |
+
</div>
|
| 141 |
+
|
| 142 |
+
<!-- Lounge Area -->
|
| 143 |
+
<div class="seat flex flex-col items-center justify-center p-4 bg-gray-700 rounded-lg cursor-pointer">
|
| 144 |
+
<i data-feather="coffee" class="seat-icon w-8 h-8 mb-2 transition"></i>
|
| 145 |
+
<span>Lounge Area</span>
|
| 146 |
+
</div>
|
| 147 |
+
|
| 148 |
+
<!-- Bar Seating -->
|
| 149 |
+
<div class="seat flex flex-col items-center justify-center p-4 bg-gray-700 rounded-lg cursor-pointer">
|
| 150 |
+
<i data-feather="home" class="seat-icon w-8 h-8 mb-2 transition"></i>
|
| 151 |
+
<span>Bar Seating</span>
|
| 152 |
+
</div>
|
| 153 |
+
|
| 154 |
+
<!-- No Preference -->
|
| 155 |
+
<div class="seat selected flex flex-col items-center justify-center p-4 bg-gray-700 rounded-lg cursor-pointer">
|
| 156 |
+
<i data-feather="help-circle" class="seat-icon w-8 h-8 mb-2 transition"></i>
|
| 157 |
+
<span>No Preference</span>
|
| 158 |
+
</div>
|
| 159 |
+
</div>
|
| 160 |
+
</div>
|
| 161 |
+
|
| 162 |
+
<!-- Contact Information -->
|
| 163 |
+
<div class="mb-8">
|
| 164 |
+
<h3 class="text-xl font-bold mb-6 flex items-center">
|
| 165 |
+
<i data-feather="user" class="text-amber-500 mr-2"></i>
|
| 166 |
+
Contact Information
|
| 167 |
+
</h3>
|
| 168 |
+
|
| 169 |
+
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
| 170 |
+
<div>
|
| 171 |
+
<label for="firstName" class="block text-sm font-medium mb-2">First Name</label>
|
| 172 |
+
<input type="text" id="firstName" class="form-input w-full bg-gray-700 border border-gray-600 rounded-lg px-4 py-3 focus:border-amber-500 focus:ring-amber-500">
|
| 173 |
+
</div>
|
| 174 |
+
<div>
|
| 175 |
+
<label for="lastName" class="block text-sm font-medium mb-2">Last Name</label>
|
| 176 |
+
<input type="text" id="lastName" class="form-input w-full bg-gray-700 border border-gray-600 rounded-lg px-4 py-3 focus:border-amber-500 focus:ring-amber-500">
|
| 177 |
+
</div>
|
| 178 |
+
<div>
|
| 179 |
+
<label for="email" class="block text-sm font-medium mb-2">Email</label>
|
| 180 |
+
<input type="email" id="email" class="form-input w-full bg-gray-700 border border-gray-600 rounded-lg px-4 py-3 focus:border-amber-500 focus:ring-amber-500">
|
| 181 |
+
</div>
|
| 182 |
+
<div>
|
| 183 |
+
<label for="phone" class="block text-sm font-medium mb-2">Phone</label>
|
| 184 |
+
<input type="tel" id="phone" class="form-input w-full bg-gray-700 border border-gray-600 rounded-lg px-4 py-3 focus:border-amber-500 focus:ring-amber-500">
|
| 185 |
+
</div>
|
| 186 |
+
</div>
|
| 187 |
+
</div>
|
| 188 |
+
|
| 189 |
+
<!-- Special Requests -->
|
| 190 |
+
<div class="mb-8">
|
| 191 |
+
<label for="specialRequests" class="block text-sm font-medium mb-2">Special Requests</label>
|
| 192 |
+
<textarea id="specialRequests" rows="3" class="form-input w-full bg-gray-700 border border-gray-600 rounded-lg px-4 py-3 focus:border-amber-500 focus:ring-amber-500" placeholder="Dietary restrictions, accessibility needs, celebrations..."></textarea>
|
| 193 |
+
</div>
|
| 194 |
+
|
| 195 |
+
<!-- Membership -->
|
| 196 |
+
<div class="mb-8">
|
| 197 |
+
<div class="flex items-start">
|
| 198 |
+
<div class="flex items-center h-5">
|
| 199 |
+
<input id="membership" name="membership" type="checkbox" class="form-checkbox h-4 w-4 text-amber-600 bg-gray-700 border-gray-600 rounded focus:ring-amber-500">
|
| 200 |
+
</div>
|
| 201 |
+
<div class="ml-3 text-sm">
|
| 202 |
+
<label for="membership" class="font-medium text-gray-300">I'm a Groovy Beats Member</label>
|
| 203 |
+
<p class="text-gray-500">Members enjoy priority seating and other benefits.</p>
|
| 204 |
+
</div>
|
| 205 |
+
</div>
|
| 206 |
+
</div>
|
| 207 |
+
|
| 208 |
+
<!-- Terms -->
|
| 209 |
+
<div class="mb-8">
|
| 210 |
+
<div class="flex items-start">
|
| 211 |
+
<div class="flex items-center h-5">
|
| 212 |
+
<input id="terms" name="terms" type="checkbox" class="form-checkbox h-4 w-4 text-amber-600 bg-gray-700 border-gray-600 rounded focus:ring-amber-500" required>
|
| 213 |
+
</div>
|
| 214 |
+
<div class="ml-3 text-sm">
|
| 215 |
+
<label for="terms" class="font-medium text-gray-300">I agree to the <a href="#" class="text-amber-400 hover:text-amber-300 underline">terms and conditions</a></label>
|
| 216 |
+
<p class="text-gray-500">Cancellations must be made at least 24 hours in advance.</p>
|
| 217 |
+
</div>
|
| 218 |
+
</div>
|
| 219 |
+
</div>
|
| 220 |
+
|
| 221 |
+
<!-- Submit Button -->
|
| 222 |
+
<div class="text-center">
|
| 223 |
+
<button type="submit" class="bg-amber-600 hover:bg-amber-700 text-white px-8 py-4 rounded-full text-lg font-medium transition w-full md:w-auto">
|
| 224 |
+
Complete Reservation
|
| 225 |
+
</button>
|
| 226 |
+
</div>
|
| 227 |
+
</form>
|
| 228 |
+
</div>
|
| 229 |
+
|
| 230 |
+
<!-- Reservation Policy -->
|
| 231 |
+
<div class="mt-12 bg-gray-800 bg-opacity-70 rounded-xl p-8">
|
| 232 |
+
<h3 class="text-xl font-bold mb-4 flex items-center">
|
| 233 |
+
<i data-feather="info" class="text-amber-500 mr-2"></i>
|
| 234 |
+
Reservation Policy
|
| 235 |
+
</h3>
|
| 236 |
+
<div class="space-y-4 text-gray-400">
|
| 237 |
+
<p>
|
| 238 |
+
<strong>Performance Nights:</strong> For reservations on performance nights, we require a $15 per person deposit that will be applied to your final bill. This deposit is non-refundable if cancellation is made less than 24 hours before the reservation time.
|
| 239 |
+
</p>
|
| 240 |
+
<p>
|
| 241 |
+
<strong>Regular Nights:</strong> While we don't require a deposit for regular nights, we appreciate at least 2 hours notice for cancellations or changes to your reservation.
|
| 242 |
+
</p>
|
| 243 |
+
<p>
|
| 244 |
+
<strong>Late Arrivals:</strong> Please arrive within 15 minutes of your reservation time. After this period, we may need to release your table to other guests.
|
| 245 |
+
</p>
|
| 246 |
+
<p>
|
| 247 |
+
<strong>Large Parties:</strong> For groups of 6 or more, a 18% gratuity will be automatically added to your bill.
|
| 248 |
+
</p>
|
| 249 |
+
</div>
|
| 250 |
+
</div>
|
| 251 |
+
</div>
|
| 252 |
+
</div>
|
| 253 |
+
</main>
|
| 254 |
+
|
| 255 |
+
<!-- Footer -->
|
| 256 |
+
<footer class="relative z-10 bg-black bg-opacity-90 py-12">
|
| 257 |
+
<div class="container mx-auto px-6">
|
| 258 |
+
<div class="grid grid-cols-1 md:grid-cols-4 gap-8">
|
| 259 |
+
<div>
|
| 260 |
+
<div class="flex items-center space-x-2 mb-4">
|
| 261 |
+
<i data-feather="music" class="text-amber-500"></i>
|
| 262 |
+
<span class="text-xl font-bold bg-gradient-to-r from-amber-400 to-amber-600 bg-clip-text text-transparent">Groovy Beats</span>
|
| 263 |
+
</div>
|
| 264 |
+
<p class="text-gray-400">
|
| 265 |
+
The finest jazz experience in the city since 1965.
|
| 266 |
+
</p>
|
| 267 |
+
</div>
|
| 268 |
+
<div>
|
| 269 |
+
<h3 class="text-white font-medium mb-4">Quick Links</h3>
|
| 270 |
+
<ul class="space-y-2">
|
| 271 |
+
<li><a href="index.html" class="text-gray-400 hover:text-amber-400 transition">Home</a></li>
|
| 272 |
+
<li><a href="performances.html" class="text-gray-400 hover:text-amber-400 transition">Performances</a></li>
|
| 273 |
+
<li><a href="history.html" class="text-gray-400 hover:text-amber-400 transition">History</a></li>
|
| 274 |
+
<li><a href="menu.html" class="text-gray-400 hover:text-amber-400 transition">Menu</a></li>
|
| 275 |
+
</ul>
|
| 276 |
+
</div>
|
| 277 |
+
<div>
|
| 278 |
+
<h3 class="text-white font-medium mb-4">Information</h3>
|
| 279 |
+
<ul class="space-y-2">
|
| 280 |
+
<li class="text-gray-400">123 Jazz Avenue</li>
|
| 281 |
+
<li class="text-gray-400">New York, NY 10001</li>
|
| 282 |
+
<li class="text-gray-400">(212) 555-7890</li>
|
| 283 |
+
<li class="text-gray-400">info@groovybeats.com</li>
|
| 284 |
+
</ul>
|
| 285 |
+
</div>
|
| 286 |
+
<div>
|
| 287 |
+
<h3 class="text-white font-medium mb-4">Opening Hours</h3>
|
| 288 |
+
<ul class="space-y-2">
|
| 289 |
+
<li class="text-gray-400">Monday - Thursday: 6PM - 1AM</li>
|
| 290 |
+
<li class="text-gray-400">Friday - Saturday: 6PM - 2AM</li>
|
| 291 |
+
<li class="text-gray-400">Sunday: 5PM - 12AM</li>
|
| 292 |
+
</body>
|
| 293 |
+
</html>
|