Hugging Face's logo

Spaces:
falls
/
hadi
Running

App Files Community
falls commited on
Commit
6451f94
·
verified ·
1 Parent(s): fcc86ec

undefined - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +936 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Hadi
3
- emoji: 🏆
4
- colorFrom: indigo
5
- colorTo: pink
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: hadi
3
+ emoji: 🐳
4
+ colorFrom: blue
5
+ colorTo: gray
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,936 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Savory Bites | Fine Dining Experience</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <style>
10
+ /* Custom CSS for elements that need more precise styling */
11
+ .hero {
12
+ background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('https://images.unsplash.com/photo-1517248135467-4c7edcad34c4?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80');
13
+ background-size: cover;
14
+ background-position: center;
15
+ }
16
+
17
+ .menu-item:hover .menu-img {
18
+ transform: scale(1.05);
19
+ }
20
+
21
+ .menu-img {
22
+ transition: transform 0.3s ease;
23
+ }
24
+
25
+ .testimonial-card {
26
+ box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.1);
27
+ }
28
+
29
+ .reservation-form input, .reservation-form select {
30
+ border-bottom: 2px solid #e5e7eb;
31
+ transition: all 0.3s ease;
32
+ }
33
+
34
+ .reservation-form input:focus, .reservation-form select:focus {
35
+ border-bottom-color: #d1a054;
36
+ }
37
+ </style>
38
+ </head>
39
+ <body class="font-sans text-gray-800">
40
+ <!-- Header/Navigation -->
41
+ <header class="fixed w-full bg-white shadow-md z-50">
42
+ <div class="container mx-auto px-4 py-3 flex justify-between items-center">
43
+ <div class="flex items-center">
44
+ <i class="fas fa-utensils text-3xl text-amber-600 mr-2"></i>
45
+ <h1 class="text-2xl font-bold text-gray-800">Savory <span class="text-amber-600">Bites</span></h1>
46
+ </div>
47
+
48
+ <nav class="hidden md:flex space-x-8">
49
+ <a href="#home" class="text-amber-600 font-medium">Home</a>
50
+ <a href="#about" class="hover:text-amber-600 transition">About</a>
51
+ <a href="#menu" class="hover:text-amber-600 transition">Menu</a>
52
+ <a href="#gallery" class="hover:text-amber-600 transition">Gallery</a>
53
+ <a href="#contact" class="hover:text-amber-600 transition">Contact</a>
54
+ </nav>
55
+
56
+ <div class="hidden md:flex items-center space-x-4">
57
+ <a href="#reservation" class="bg-amber-600 hover:bg-amber-700 text-white px-6 py-2 rounded-full transition">Reservations</a>
58
+ <div class="relative">
59
+ <i class="fas fa-shopping-cart text-xl text-gray-700 cursor-pointer"></i>
60
+ <span class="absolute -top-2 -right-2 bg-amber-600 text-white text-xs w-5 h-5 flex items-center justify-center rounded-full">0</span>
61
+ </div>
62
+ </div>
63
+
64
+ <button id="mobile-menu-button" class="md:hidden text-gray-700">
65
+ <i class="fas fa-bars text-2xl"></i>
66
+ </button>
67
+ </div>
68
+
69
+ <!-- Mobile Menu -->
70
+ <div id="mobile-menu" class="hidden md:hidden bg-white py-4 px-4 shadow-lg">
71
+ <div class="flex flex-col space-y-4">
72
+ <a href="#home" class="text-amber-600 font-medium">Home</a>
73
+ <a href="#about" class="hover:text-amber-600 transition">About</a>
74
+ <a href="#menu" class="hover:text-amber-600 transition">Menu</a>
75
+ <a href="#gallery" class="hover:text-amber-600 transition">Gallery</a>
76
+ <a href="#contact" class="hover:text-amber-600 transition">Contact</a>
77
+ <a href="#reservation" class="bg-amber-600 hover:bg-amber-700 text-white px-6 py-2 rounded-full transition text-center">Reservations</a>
78
+ </div>
79
+ </div>
80
+ </header>
81
+
82
+ <!-- Hero Section -->
83
+ <section id="home" class="hero min-h-screen flex items-center pt-20">
84
+ <div class="container mx-auto px-4 text-center md:text-left">
85
+ <div class="max-w-2xl mx-auto md:mx-0">
86
+ <span class="text-amber-400 font-medium tracking-wider">PREMIUM RESTAURANT</span>
87
+ <h1 class="text-4xl md:text-6xl font-bold text-white mt-4 mb-6">Experience Culinary <span class="text-amber-400">Excellence</span></h1>
88
+ <p class="text-gray-200 text-lg mb-8">Discover our carefully crafted menu featuring the finest ingredients and innovative culinary techniques.</p>
89
+ <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4 justify-center md:justify-start">
90
+ <a href="#menu" class="bg-amber-600 hover:bg-amber-700 text-white px-8 py-3 rounded-full transition">View Menu</a>
91
+ <a href="#reservation" class="bg-transparent border-2 border-white hover:bg-white hover:text-gray-800 text-white px-8 py-3 rounded-full transition">Book a Table</a>
92
+ </div>
93
+ </div>
94
+ </div>
95
+ </section>
96
+
97
+ <!-- About Section -->
98
+ <section id="about" class="py-20 bg-gray-50">
99
+ <div class="container mx-auto px-4">
100
+ <div class="flex flex-col md:flex-row items-center">
101
+ <div class="md:w-1/2 mb-12 md:mb-0 md:pr-12">
102
+ <div class="relative">
103
+ <img src="https://images.unsplash.com/photo-1555396273-367ea4eb4db5?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1374&q=80" alt="Restaurant interior" class="rounded-lg shadow-xl w-full">
104
+ <div class="absolute -bottom-6 -right-6 bg-white p-4 rounded-lg shadow-lg hidden md:block">
105
+ <div class="flex items-center">
106
+ <div class="bg-amber-100 p-3 rounded-full mr-4">
107
+ <i class="fas fa-award text-amber-600 text-2xl"></i>
108
+ </div>
109
+ <div>
110
+ <p class="font-bold text-gray-800">Award Winning</p>
111
+ <p class="text-sm text-gray-600">Best Restaurant 2023</p>
112
+ </div>
113
+ </div>
114
+ </div>
115
+ </div>
116
+ </div>
117
+ <div class="md:w-1/2">
118
+ <span class="text-amber-600 font-medium tracking-wider">OUR STORY</span>
119
+ <h2 class="text-3xl md:text-4xl font-bold text-gray-800 mt-2 mb-6">Crafting Culinary Experiences Since 1995</h2>
120
+ <p class="text-gray-600 mb-6">Founded by Chef Michael Savory, our restaurant has been serving exceptional cuisine for over 25 years. What began as a small bistro has grown into one of the city's most celebrated dining destinations.</p>
121
+ <p class="text-gray-600 mb-8">We pride ourselves on using locally-sourced, seasonal ingredients to create dishes that are both innovative and rooted in tradition. Our team of passionate chefs works tirelessly to deliver unforgettable dining experiences.</p>
122
+ <div class="grid grid-cols-2 gap-6 mb-8">
123
+ <div class="flex items-center">
124
+ <i class="fas fa-seedling text-amber-600 text-xl mr-3"></i>
125
+ <span class="font-medium">Fresh Ingredients</span>
126
+ </div>
127
+ <div class="flex items-center">
128
+ <i class="fas fa-wine-glass-alt text-amber-600 text-xl mr-3"></i>
129
+ <span class="font-medium">Extensive Wine List</span>
130
+ </div>
131
+ <div class="flex items-center">
132
+ <i class="fas fa-utensils text-amber-600 text-xl mr-3"></i>
133
+ <span class="font-medium">Seasonal Menus</span>
134
+ </div>
135
+ <div class="flex items-center">
136
+ <i class="fas fa-user-tie text-amber-600 text-xl mr-3"></i>
137
+ <span class="font-medium">Expert Chefs</span>
138
+ </div>
139
+ </div>
140
+ <a href="#reservation" class="inline-block bg-amber-600 hover:bg-amber-700 text-white px-8 py-3 rounded-full transition">Reserve a Table</a>
141
+ </div>
142
+ </div>
143
+ </div>
144
+ </section>
145
+
146
+ <!-- Special Dishes -->
147
+ <section class="py-16 bg-white">
148
+ <div class="container mx-auto px-4">
149
+ <div class="text-center mb-16">
150
+ <span class="text-amber-600 font-medium tracking-wider">SPECIAL SELECTIONS</span>
151
+ <h2 class="text-3xl md:text-4xl font-bold text-gray-800 mt-2">Our Signature Dishes</h2>
152
+ </div>
153
+
154
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
155
+ <!-- Dish 1 -->
156
+ <div class="bg-gray-50 rounded-xl overflow-hidden shadow-lg hover:shadow-xl transition">
157
+ <div class="h-48 overflow-hidden">
158
+ <img src="https://images.unsplash.com/photo-1544025162-d76694265947?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1469&q=80" alt="Grilled Salmon" class="w-full h-full object-cover">
159
+ </div>
160
+ <div class="p-6">
161
+ <div class="flex justify-between items-start mb-3">
162
+ <h3 class="text-xl font-bold text-gray-800">Grilled Salmon</h3>
163
+ <span class="bg-amber-100 text-amber-800 px-3 py-1 rounded-full text-sm font-medium">$24</span>
164
+ </div>
165
+ <p class="text-gray-600 mb-4">Fresh Atlantic salmon with lemon butter sauce, served with seasonal vegetables.</p>
166
+ <button class="text-amber-600 font-medium flex items-center">
167
+ Add to Order <i class="fas fa-plus ml-2"></i>
168
+ </button>
169
+ </div>
170
+ </div>
171
+
172
+ <!-- Dish 2 -->
173
+ <div class="bg-gray-50 rounded-xl overflow-hidden shadow-lg hover:shadow-xl transition">
174
+ <div class="h-48 overflow-hidden">
175
+ <img src="https://images.unsplash.com/photo-1559847844-5315695dadae?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1398&q=80" alt="Filet Mignon" class="w-full h-full object-cover">
176
+ </div>
177
+ <div class="p-6">
178
+ <div class="flex justify-between items-start mb-3">
179
+ <h3 class="text-xl font-bold text-gray-800">Filet Mignon</h3>
180
+ <span class="bg-amber-100 text-amber-800 px-3 py-1 rounded-full text-sm font-medium">$38</span>
181
+ </div>
182
+ <p class="text-gray-600 mb-4">Premium cut beef tenderloin with red wine reduction and truffle mashed potatoes.</p>
183
+ <button class="text-amber-600 font-medium flex items-center">
184
+ Add to Order <i class="fas fa-plus ml-2"></i>
185
+ </button>
186
+ </div>
187
+ </div>
188
+
189
+ <!-- Dish 3 -->
190
+ <div class="bg-gray-50 rounded-xl overflow-hidden shadow-lg hover:shadow-xl transition">
191
+ <div class="h-48 overflow-hidden">
192
+ <img src="https://images.unsplash.com/photo-1473093295043-cdd812d0e601?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Truffle Pasta" class="w-full h-full object-cover">
193
+ </div>
194
+ <div class="p-6">
195
+ <div class="flex justify-between items-start mb-3">
196
+ <h3 class="text-xl font-bold text-gray-800">Truffle Pasta</h3>
197
+ <span class="bg-amber-100 text-amber-800 px-3 py-1 rounded-full text-sm font-medium">$22</span>
198
+ </div>
199
+ <p class="text-gray-600 mb-4">Handmade fettuccine with wild mushrooms, black truffle, and parmesan cream.</p>
200
+ <button class="text-amber-600 font-medium flex items-center">
201
+ Add to Order <i class="fas fa-plus ml-2"></i>
202
+ </button>
203
+ </div>
204
+ </div>
205
+ </div>
206
+
207
+ <div class="text-center mt-12">
208
+ <a href="#menu" class="inline-block border-2 border-amber-600 text-amber-600 hover:bg-amber-600 hover:text-white px-8 py-3 rounded-full transition">View Full Menu</a>
209
+ </div>
210
+ </div>
211
+ </section>
212
+
213
+ <!-- Menu Section -->
214
+ <section id="menu" class="py-20 bg-gray-50">
215
+ <div class="container mx-auto px-4">
216
+ <div class="text-center mb-16">
217
+ <span class="text-amber-600 font-medium tracking-wider">DELICIOUS OFFERINGS</span>
218
+ <h2 class="text-3xl md:text-4xl font-bold text-gray-800 mt-2">Our Menu</h2>
219
+ </div>
220
+
221
+ <!-- Menu Tabs -->
222
+ <div class="flex justify-center mb-12">
223
+ <div class="inline-flex rounded-lg border border-gray-200 bg-white shadow-sm">
224
+ <button data-category="starters" class="menu-tab active px-6 py-3 border-r border-gray-200 text-amber-600 font-medium">Starters</button>
225
+ <button data-category="mains" class="menu-tab px-6 py-3 border-r border-gray-200 text-gray-600 hover:text-amber-600">Main Courses</button>
226
+ <button data-category="desserts" class="menu-tab px-6 py-3 text-gray-600 hover:text-amber-600">Desserts</button>
227
+ </div>
228
+ </div>
229
+
230
+ <!-- Menu Items -->
231
+ <div class="menu-content">
232
+ <!-- Starters (default visible) -->
233
+ <div id="starters" class="menu-category grid md:grid-cols-2 gap-8">
234
+ <!-- Starter 1 -->
235
+ <div class="menu-item bg-white p-6 rounded-xl shadow-md hover:shadow-lg transition">
236
+ <div class="flex">
237
+ <div class="w-24 h-24 overflow-hidden rounded-lg mr-6">
238
+ <img src="https://images.unsplash.com/photo-1510626176961-4b21dde57d97?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1374&q=80" alt="Bruschetta" class="menu-img w-full h-full object-cover">
239
+ </div>
240
+ <div class="flex-1">
241
+ <div class="flex justify-between items-start mb-2">
242
+ <h3 class="text-lg font-bold text-gray-800">Bruschetta</h3>
243
+ <span class="text-amber-600 font-medium">$9</span>
244
+ </div>
245
+ <p class="text-gray-600 text-sm">Toasted bread topped with tomatoes, garlic, and fresh basil.</p>
246
+ <button class="mt-3 text-amber-600 text-sm font-medium flex items-center">
247
+ Add to Order <i class="fas fa-plus ml-1"></i>
248
+ </button>
249
+ </div>
250
+ </div>
251
+ </div>
252
+
253
+ <!-- Starter 2 -->
254
+ <div class="menu-item bg-white p-6 rounded-xl shadow-md hover:shadow-lg transition">
255
+ <div class="flex">
256
+ <div class="w-24 h-24 overflow-hidden rounded-lg mr-6">
257
+ <img src="https://images.unsplash.com/photo-1601050690597-df0568f70950?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Calamari" class="menu-img w-full h-full object-cover">
258
+ </div>
259
+ <div class="flex-1">
260
+ <div class="flex justify-between items-start mb-2">
261
+ <h3 class="text-lg font-bold text-gray-800">Crispy Calamari</h3>
262
+ <span class="text-amber-600 font-medium">$12</span>
263
+ </div>
264
+ <p class="text-gray-600 text-sm">Lightly fried squid served with lemon aioli and marinara sauce.</p>
265
+ <button class="mt-3 text-amber-600 text-sm font-medium flex items-center">
266
+ Add to Order <i class="fas fa-plus ml-1"></i>
267
+ </button>
268
+ </div>
269
+ </div>
270
+ </div>
271
+
272
+ <!-- Starter 3 -->
273
+ <div class="menu-item bg-white p-6 rounded-xl shadow-md hover:shadow-lg transition">
274
+ <div class="flex">
275
+ <div class="w-24 h-24 overflow-hidden rounded-lg mr-6">
276
+ <img src="https://images.unsplash.com/photo-1603105037880-880cd4edfb1d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1374&q=80" alt="Soup" class="menu-img w-full h-full object-cover">
277
+ </div>
278
+ <div class="flex-1">
279
+ <div class="flex justify-between items-start mb-2">
280
+ <h3 class="text-lg font-bold text-gray-800">Creamy Mushroom Soup</h3>
281
+ <span class="text-amber-600 font-medium">$8</span>
282
+ </div>
283
+ <p class="text-gray-600 text-sm">Wild mushroom soup with truffle oil and crusty bread.</p>
284
+ <button class="mt-3 text-amber-600 text-sm font-medium flex items-center">
285
+ Add to Order <i class="fas fa-plus ml-1"></i>
286
+ </button>
287
+ </div>
288
+ </div>
289
+ </div>
290
+
291
+ <!-- Starter 4 -->
292
+ <div class="menu-item bg-white p-6 rounded-xl shadow-md hover:shadow-lg transition">
293
+ <div class="flex">
294
+ <div class="w-24 h-24 overflow-hidden rounded-lg mr-6">
295
+ <img src="https://images.unsplash.com/photo-1601050690771-4d15a6033c7b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1374&q=80" alt="Salad" class="menu-img w-full h-full object-cover">
296
+ </div>
297
+ <div class="flex-1">
298
+ <div class="flex justify-between items-start mb-2">
299
+ <h3 class="text-lg font-bold text-gray-800">Caprese Salad</h3>
300
+ <span class="text-amber-600 font-medium">$10</span>
301
+ </div>
302
+ <p class="text-gray-600 text-sm">Fresh mozzarella, tomatoes, and basil drizzled with balsamic glaze.</p>
303
+ <button class="mt-3 text-amber-600 text-sm font-medium flex items-center">
304
+ Add to Order <i class="fas fa-plus ml-1"></i>
305
+ </button>
306
+ </div>
307
+ </div>
308
+ </div>
309
+ </div>
310
+
311
+ <!-- Mains (hidden by default) -->
312
+ <div id="mains" class="menu-category hidden grid md:grid-cols-2 gap-8">
313
+ <!-- Main 1 -->
314
+ <div class="menu-item bg-white p-6 rounded-xl shadow-md hover:shadow-lg transition">
315
+ <div class="flex">
316
+ <div class="w-24 h-24 overflow-hidden rounded-lg mr-6">
317
+ <img src="https://images.unsplash.com/photo-1544025162-d76694265947?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1469&q=80" alt="Salmon" class="menu-img w-full h-full object-cover">
318
+ </div>
319
+ <div class="flex-1">
320
+ <div class="flex justify-between items-start mb-2">
321
+ <h3 class="text-lg font-bold text-gray-800">Grilled Salmon</h3>
322
+ <span class="text-amber-600 font-medium">$24</span>
323
+ </div>
324
+ <p class="text-gray-600 text-sm">Atlantic salmon with lemon butter sauce and seasonal vegetables.</p>
325
+ <button class="mt-3 text-amber-600 text-sm font-medium flex items-center">
326
+ Add to Order <i class="fas fa-plus ml-1"></i>
327
+ </button>
328
+ </div>
329
+ </div>
330
+ </div>
331
+
332
+ <!-- Main 2 -->
333
+ <div class="menu-item bg-white p-6 rounded-xl shadow-md hover:shadow-lg transition">
334
+ <div class="flex">
335
+ <div class="w-24 h-24 overflow-hidden rounded-lg mr-6">
336
+ <img src="https://images.unsplash.com/photo-1559847844-5315695dadae?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1398&q=80" alt="Steak" class="menu-img w-full h-full object-cover">
337
+ </div>
338
+ <div class="flex-1">
339
+ <div class="flex justify-between items-start mb-2">
340
+ <h3 class="text-lg font-bold text-gray-800">Filet Mignon</h3>
341
+ <span class="text-amber-600 font-medium">$38</span>
342
+ </div>
343
+ <p class="text-gray-600 text-sm">Premium beef tenderloin with red wine reduction and truffle mash.</p>
344
+ <button class="mt-3 text-amber-600 text-sm font-medium flex items-center">
345
+ Add to Order <i class="fas fa-plus ml-1"></i>
346
+ </button>
347
+ </div>
348
+ </div>
349
+ </div>
350
+
351
+ <!-- Main 3 -->
352
+ <div class="menu-item bg-white p-6 rounded-xl shadow-md hover:shadow-lg transition">
353
+ <div class="flex">
354
+ <div class="w-24 h-24 overflow-hidden rounded-lg mr-6">
355
+ <img src="https://images.unsplash.com/photo-1603105037880-880cd4edfb1d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1374&q=80" alt="Pasta" class="menu-img w-full h-full object-cover">
356
+ </div>
357
+ <div class="flex-1">
358
+ <div class="flex justify-between items-start mb-2">
359
+ <h3 class="text-lg font-bold text-gray-800">Truffle Pasta</h3>
360
+ <span class="text-amber-600 font-medium">$22</span>
361
+ </div>
362
+ <p class="text-gray-600 text-sm">Handmade fettuccine with wild mushrooms and black truffle.</p>
363
+ <button class="mt-3 text-amber-600 text-sm font-medium flex items-center">
364
+ Add to Order <i class="fas fa-plus ml-1"></i>
365
+ </button>
366
+ </div>
367
+ </div>
368
+ </div>
369
+
370
+ <!-- Main 4 -->
371
+ <div class="menu-item bg-white p-6 rounded-xl shadow-md hover:shadow-lg transition">
372
+ <div class="flex">
373
+ <div class="w-24 h-24 overflow-hidden rounded-lg mr-6">
374
+ <img src="https://images.unsplash.com/photo-1601050690801-28c5d54c8ab1?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1374&q=80" alt="Risotto" class="menu-img w-full h-full object-cover">
375
+ </div>
376
+ <div class="flex-1">
377
+ <div class="flex justify-between items-start mb-2">
378
+ <h3 class="text-lg font-bold text-gray-800">Mushroom Risotto</h3>
379
+ <span class="text-amber-600 font-medium">$20</span>
380
+ </div>
381
+ <p class="text-gray-600 text-sm">Creamy arborio rice with wild mushrooms and parmesan.</p>
382
+ <button class="mt-3 text-amber-600 text-sm font-medium flex items-center">
383
+ Add to Order <i class="fas fa-plus ml-1"></i>
384
+ </button>
385
+ </div>
386
+ </div>
387
+ </div>
388
+ </div>
389
+
390
+ <!-- Desserts (hidden by default) -->
391
+ <div id="desserts" class="menu-category hidden grid md:grid-cols-2 gap-8">
392
+ <!-- Dessert 1 -->
393
+ <div class="menu-item bg-white p-6 rounded-xl shadow-md hover:shadow-lg transition">
394
+ <div class="flex">
395
+ <div class="w-24 h-24 overflow-hidden rounded-lg mr-6">
396
+ <img src="https://images.unsplash.com/photo-1551024506-0bccd828d307?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1557&q=80" alt="Chocolate Cake" class="menu-img w-full h-full object-cover">
397
+ </div>
398
+ <div class="flex-1">
399
+ <div class="flex justify-between items-start mb-2">
400
+ <h3 class="text-lg font-bold text-gray-800">Chocolate Lava Cake</h3>
401
+ <span class="text-amber-600 font-medium">$9</span>
402
+ </div>
403
+ <p class="text-gray-600 text-sm">Warm chocolate cake with a molten center, served with vanilla ice cream.</p>
404
+ <button class="mt-3 text-amber-600 text-sm font-medium flex items-center">
405
+ Add to Order <i class="fas fa-plus ml-1"></i>
406
+ </button>
407
+ </div>
408
+ </div>
409
+ </div>
410
+
411
+ <!-- Dessert 2 -->
412
+ <div class="menu-item bg-white p-6 rounded-xl shadow-md hover:shadow-lg transition">
413
+ <div class="flex">
414
+ <div class="w-24 h-24 overflow-hidden rounded-lg mr-6">
415
+ <img src="https://images.unsplash.com/photo-1497034825429-c343d7c6a68f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1374&q=80" alt="Cheesecake" class="menu-img w-full h-full object-cover">
416
+ </div>
417
+ <div class="flex-1">
418
+ <div class="flex justify-between items-start mb-2">
419
+ <h3 class="text-lg font-bold text-gray-800">New York Cheesecake</h3>
420
+ <span class="text-amber-600 font-medium">$8</span>
421
+ </div>
422
+ <p class="text-gray-600 text-sm">Classic creamy cheesecake with berry compote.</p>
423
+ <button class="mt-3 text-amber-600 text-sm font-medium flex items-center">
424
+ Add to Order <i class="fas fa-plus ml-1"></i>
425
+ </button>
426
+ </div>
427
+ </div>
428
+ </div>
429
+
430
+ <!-- Dessert 3 -->
431
+ <div class="menu-item bg-white p-6 rounded-xl shadow-md hover:shadow-lg transition">
432
+ <div class="flex">
433
+ <div class="w-24 h-24 overflow-hidden rounded-lg mr-6">
434
+ <img src="https://images.unsplash.com/photo-1562440499-64c9a111f4aa?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1374&q=80" alt="Tiramisu" class="menu-img w-full h-full object-cover">
435
+ </div>
436
+ <div class="flex-1">
437
+ <div class="flex justify-between items-start mb-2">
438
+ <h3 class="text-lg font-bold text-gray-800">Tiramisu</h3>
439
+ <span class="text-amber-600 font-medium">$8</span>
440
+ </div>
441
+ <p class="text-gray-600 text-sm">Layers of coffee-soaked ladyfingers and mascarpone cream.</p>
442
+ <button class="mt-3 text-amber-600 text-sm font-medium flex items-center">
443
+ Add to Order <i class="fas fa-plus ml-1"></i>
444
+ </button>
445
+ </div>
446
+ </div>
447
+ </div>
448
+
449
+ <!-- Dessert 4 -->
450
+ <div class="menu-item bg-white p-6 rounded-xl shadow-md hover:shadow-lg transition">
451
+ <div class="flex">
452
+ <div class="w-24 h-24 overflow-hidden rounded-lg mr-6">
453
+ <img src="https://images.unsplash.com/photo-1571115177098-24ec42ed204d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1374&q=80" alt="Creme Brulee" class="menu-img w-full h-full object-cover">
454
+ </div>
455
+ <div class="flex-1">
456
+ <div class="flex justify-between items-start mb-2">
457
+ <h3 class="text-lg font-bold text-gray-800">Crème Brûlée</h3>
458
+ <span class="text-amber-600 font-medium">$9</span>
459
+ </div>
460
+ <p class="text-gray-600 text-sm">Rich custard topped with a layer of caramelized sugar.</p>
461
+ <button class="mt-3 text-amber-600 text-sm font-medium flex items-center">
462
+ Add to Order <i class="fas fa-plus ml-1"></i>
463
+ </button>
464
+ </div>
465
+ </div>
466
+ </div>
467
+ </div>
468
+ </div>
469
+ </div>
470
+ </section>
471
+
472
+ <!-- Gallery Section -->
473
+ <section id="gallery" class="py-16 bg-white">
474
+ <div class="container mx-auto px-4">
475
+ <div class="text-center mb-12">
476
+ <span class="text-amber-600 font-medium tracking-wider">VISUAL DELIGHTS</span>
477
+ <h2 class="text-3xl md:text-4xl font-bold text-gray-800 mt-2">Our Gallery</h2>
478
+ </div>
479
+
480
+ <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
481
+ <div class="overflow-hidden rounded-lg h-48">
482
+ <img src="https://images.unsplash.com/photo-1544025162-d76694265947?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1469&q=80" alt="Food 1" class="w-full h-full object-cover hover:scale-105 transition duration-300">
483
+ </div>
484
+ <div class="overflow-hidden rounded-lg h-48">
485
+ <img src="https://images.unsplash.com/photo-1559847844-5315695dadae?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1398&q=80" alt="Food 2" class="w-full h-full object-cover hover:scale-105 transition duration-300">
486
+ </div>
487
+ <div class="overflow-hidden rounded-lg h-48">
488
+ <img src="https://images.unsplash.com/photo-1473093295043-cdd812d0e601?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Food 3" class="w-full h-full object-cover hover:scale-105 transition duration-300">
489
+ </div>
490
+ <div class="overflow-hidden rounded-lg h-48">
491
+ <img src="https://images.unsplash.com/photo-1553105038-2fcd8455b861?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1374&q=80" alt="Food 4" class="w-full h-full object-cover hover:scale-105 transition duration-300">
492
+ </div>
493
+ <div class="overflow-hidden rounded-lg h-48">
494
+ <img src="https://images.unsplash.com/photo-1559847844-5315695dadae?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1398&q=80" alt="Food 5" class="w-full h-full object-cover hover:scale-105 transition duration-300">
495
+ </div>
496
+ <div class="overflow-hidden rounded-lg h-48">
497
+ <img src="https://images.unsplash.com/photo-1553105038-2fcd8455b861?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1374&q=80" alt="Food 6" class="w-full h-full object-cover hover:scale-105 transition duration-300">
498
+ </div>
499
+ <div class="overflow-hidden rounded-lg h-48">
500
+ <img src="https://images.unsplash.com/photo-1473093295043-cdd812d0e601?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Food 7" class="w-full h-full object-cover hover:scale-105 transition duration-300">
501
+ </div>
502
+ <div class="overflow-hidden rounded-lg h-48">
503
+ <img src="https://images.unsplash.com/photo-1544025162-d76694265947?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1469&q=80" alt="Food 8" class="w-full h-full object-cover hover:scale-105 transition duration-300">
504
+ </div>
505
+ </div>
506
+ </div>
507
+ </section>
508
+
509
+ <!-- Testimonials -->
510
+ <section class="py-20 bg-amber-50">
511
+ <div class="container mx-auto px-4">
512
+ <div class="text-center mb-16">
513
+ <span class="text-amber-600 font-medium tracking-wider">HAPPY CUSTOMERS</span>
514
+ <h2 class="text-3xl md:text-4xl font-bold text-gray-800 mt-2">What Our Guests Say</h2>
515
+ </div>
516
+
517
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
518
+ <!-- Testimonial 1 -->
519
+ <div class="testimonial-card bg-white p-8 rounded-xl">
520
+ <div class="flex items-center mb-6">
521
+ <div class="w-16 h-16 rounded-full overflow-hidden mr-4">
522
+ <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Sarah J." class="w-full h-full object-cover">
523
+ </div>
524
+ <div>
525
+ <h4 class="font-bold text-gray-800">Sarah J.</h4>
526
+ <div class="flex text-amber-400">
527
+ <i class="fas fa-star"></i>
528
+ <i class="fas fa-star"></i>
529
+ <i class="fas fa-star"></i>
530
+ <i class="fas fa-star"></i>
531
+ <i class="fas fa-star"></i>
532
+ </div>
533
+ </div>
534
+ </div>
535
+ <p class="text-gray-600 italic">"The filet mignon was cooked to perfection, and the service was impeccable. We celebrated our anniversary here and it was truly memorable."</p>
536
+ </div>
537
+
538
+ <!-- Testimonial 2 -->
539
+ <div class="testimonial-card bg-white p-8 rounded-xl">
540
+ <div class="flex items-center mb-6">
541
+ <div class="w-16 h-16 rounded-full overflow-hidden mr-4">
542
+ <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Michael T." class="w-full h-full object-cover">
543
+ </div>
544
+ <div>
545
+ <h4 class="font-bold text-gray-800">Michael T.</h4>
546
+ <div class="flex text-amber-400">
547
+ <i class="fas fa-star"></i>
548
+ <i class="fas fa-star"></i>
549
+ <i class="fas fa-star"></i>
550
+ <i class="fas fa-star"></i>
551
+ <i class="fas fa-star"></i>
552
+ </div>
553
+ </div>
554
+ </div>
555
+ <p class="text-gray-600 italic">"As a food critic, I've dined at many restaurants, but Savory Bites stands out. The truffle pasta is divine and the wine pairing suggestions were spot on."</p>
556
+ </div>
557
+
558
+ <!-- Testimonial 3 -->
559
+ <div class="testimonial-card bg-white p-8 rounded-xl">
560
+ <div class="flex items-center mb-6">
561
+ <div class="w-16 h-16 rounded-full overflow-hidden mr-4">
562
+ <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="Emily R." class="w-full h-full object-cover">
563
+ </div>
564
+ <div>
565
+ <h4 class="font-bold text-gray-800">Emily R.</h4>
566
+ <div class="flex text-amber-400">
567
+ <i class="fas fa-star"></i>
568
+ <i class="fas fa-star"></i>
569
+ <i class="fas fa-star"></i>
570
+ <i class="fas fa-star"></i>
571
+ <i class="fas fa-star-half-alt"></i>
572
+ </div>
573
+ </div>
574
+ </div>
575
+ <p class="text-gray-600 italic">"The ambiance is perfect for date night. We loved the chocolate lava cake - it's the best dessert I've had in years! Will definitely be back."</p>
576
+ </div>
577
+ </div>
578
+ </div>
579
+ </section>
580
+
581
+ <!-- Reservation Section -->
582
+ <section id="reservation" class="py-20 bg-gray-800 text-white">
583
+ <div class="container mx-auto px-4">
584
+ <div class="flex flex-col md:flex-row">
585
+ <div class="md:w-1/2 mb-12 md:mb-0 md:pr-12">
586
+ <span class="text-amber-400 font-medium tracking-wider">RESERVE A TABLE</span>
587
+ <h2 class="text-3xl md:text-4xl font-bold mt-2 mb-6">Book Your Dining Experience</h2>
588
+ <p class="text-gray-300 mb-8">Secure your table at Savory Bites for an unforgettable culinary journey. Our reservation team is available to accommodate your dining preferences and special requests.</p>
589
+
590
+ <div class="grid grid-cols-2 gap-6 mb-8">
591
+ <div class="flex items-center">
592
+ <i class="fas fa-phone-alt text-amber-400 text-xl mr-4"></i>
593
+ <div>
594
+ <p class="text-gray-400 text-sm">RESERVATIONS</p>
595
+ <p class="font-medium">(555) 123-4567</p>
596
+ </div>
597
+ </div>
598
+ <div class="flex items-center">
599
+ <i class="fas fa-clock text-amber-400 text-xl mr-4"></i>
600
+ <div>
601
+ <p class="text-gray-400 text-sm">OPENING HOURS</p>
602
+ <p class="font-medium">Mon-Sun: 11AM - 10PM</p>
603
+ </div>
604
+ </div>
605
+ <div class="flex items-center">
606
+ <i class="fas fa-map-marker-alt text-amber-400 text-xl mr-4"></i>
607
+ <div>
608
+ <p class="text-gray-400 text-sm">LOCATION</p>
609
+ <p class="font-medium">123 Gourmet Ave, Foodville</p>
610
+ </div>
611
+ </div>
612
+ <div class="flex items-center">
613
+ <i class="fas fa-utensils text-amber-400 text-xl mr-4"></i>
614
+ <div>
615
+ <p class="text-gray-400 text-sm">CUISINE</p>
616
+ <p class="font-medium">Contemporary International</p>
617
+ </div>
618
+ </div>
619
+ </div>
620
+
621
+ <div class="bg-gray-700 p-6 rounded-lg">
622
+ <h3 class="text-xl font-bold mb-4">Private Dining & Events</h3>
623
+ <p class="text-gray-300 mb-4">Our private dining room accommodates up to 30 guests for special occasions, corporate events, and celebrations.</p>
624
+ <a href="#" class="text-amber-400 font-medium hover:text-amber-300 transition">Inquire Now <i class="fas fa-arrow-right ml-1"></i></a>
625
+ </div>
626
+ </div>
627
+
628
+ <div class="md:w-1/2">
629
+ <form class="reservation-form bg-white text-gray-800 p-8 rounded-lg shadow-xl">
630
+ <h3 class="text-2xl font-bold mb-6">Make a Reservation</h3>
631
+
632
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
633
+ <div>
634
+ <label class="block text-gray-700 mb-2">Full Name</label>
635
+ <input type="text" class="w-full py-2 outline-none" placeholder="Your Name">
636
+ </div>
637
+ <div>
638
+ <label class="block text-gray-700 mb-2">Email</label>
639
+ <input type="email" class="w-full py-2 outline-none" placeholder="Your Email">
640
+ </div>
641
+ <div>
642
+ <label class="block text-gray-700 mb-2">Phone</label>
643
+ <input type="tel" class="w-full py-2 outline-none" placeholder="Your Phone">
644
+ </div>
645
+ <div>
646
+ <label class="block text-gray-700 mb-2">Number of Guests</label>
647
+ <select class="w-full py-2 outline-none">
648
+ <option>1 person</option>
649
+ <option>2 people</option>
650
+ <option>3 people</option>
651
+ <option>4 people</option>
652
+ <option>5+ people</option>
653
+ </select>
654
+ </div>
655
+ <div>
656
+ <label class="block text-gray-700 mb-2">Date</label>
657
+ <input type="date" class="w-full py-2 outline-none">
658
+ </div>
659
+ <div>
660
+ <label class="block text-gray-700 mb-2">Time</label>
661
+ <select class="w-full py-2 outline-none">
662
+ <option>11:00 AM</option>
663
+ <option>12:00 PM</option>
664
+ <option>1:00 PM</option>
665
+ <option>2:00 PM</option>
666
+ <option>5:00 PM</option>
667
+ <option>6:00 PM</option>
668
+ <option>7:00 PM</option>
669
+ <option>8:00 PM</option>
670
+ <option>9:00 PM</option>
671
+ </select>
672
+ </div>
673
+ </div>
674
+
675
+ <div class="mb-6">
676
+ <label class="block text-gray-700 mb-2">Special Requests</label>
677
+ <textarea class="w-full py-2 outline-none border-b-2 border-gray-200" rows="3" placeholder="Dietary restrictions, allergies, celebrations, etc."></textarea>
678
+ </div>
679
+
680
+ <button type="submit" class="w-full bg-amber-600 hover:bg-amber-700 text-white py-3 rounded-full transition">Book Table</button>
681
+ </form>
682
+ </div>
683
+ </div>
684
+ </div>
685
+ </section>
686
+
687
+ <!-- Contact Section -->
688
+ <section id="contact" class="py-20 bg-white">
689
+ <div class="container mx-auto px-4">
690
+ <div class="text-center mb-16">
691
+ <span class="text-amber-600 font-medium tracking-wider">GET IN TOUCH</span>
692
+ <h2 class="text-3xl md:text-4xl font-bold text-gray-800 mt-2">Contact Us</h2>
693
+ </div>
694
+
695
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8 mb-12">
696
+ <div class="bg-gray-50 p-8 rounded-lg text-center">
697
+ <div class="bg-amber-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
698
+ <i class="fas fa-map-marker-alt text-amber-600 text-2xl"></i>
699
+ </div>
700
+ <h3 class="text-xl font-bold text-gray-800 mb-2">Address</h3>
701
+ <p class="text-gray-600">123 Gourmet Avenue<br>Foodville, CA 90210</p>
702
+ </div>
703
+
704
+ <div class="bg-gray-50 p-8 rounded-lg text-center">
705
+ <div class="bg-amber-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
706
+ <i class="fas fa-phone-alt text-amber-600 text-2xl"></i>
707
+ </div>
708
+ <h3 class="text-xl font-bold text-gray-800 mb-2">Phone</h3>
709
+ <p class="text-gray-600">Reservations: (555) 123-4567<br>General Inquiries: (555) 765-4321</p>
710
+ </div>
711
+
712
+ <div class="bg-gray-50 p-8 rounded-lg text-center">
713
+ <div class="bg-amber-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
714
+ <i class="fas fa-envelope text-amber-600 text-2xl"></i>
715
+ </div>
716
+ <h3 class="text-xl font-bold text-gray-800 mb-2">Email</h3>
717
+ <p class="text-gray-600">reservations@savorybites.com<br>info@savorybites.com</p>
718
+ </div>
719
+ </div>
720
+
721
+ <div class="max-w-4xl mx-auto bg-gray-50 p-8 rounded-lg">
722
+ <form>
723
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
724
+ <div>
725
+ <label class="block text-gray-700 mb-2">Your Name</label>
726
+ <input type="text" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-amber-500">
727
+ </div>
728
+ <div>
729
+ <label class="block text-gray-700 mb-2">Your Email</label>
730
+ <input type="email" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-amber-500">
731
+ </div>
732
+ <div>
733
+ <label class="block text-gray-700 mb-2">Subject</label>
734
+ <input type="text" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-amber-500">
735
+ </div>
736
+ <div>
737
+ <label class="block text-gray-700 mb-2">Phone</label>
738
+ <input type="tel" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-amber-500">
739
+ </div>
740
+ </div>
741
+ <div class="mb-6">
742
+ <label class="block text-gray-700 mb-2">Message</label>
743
+ <textarea class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-amber-500" rows="5"></textarea>
744
+ </div>
745
+ <button type="submit" class="bg-amber-600 hover:bg-amber-700 text-white px-8 py-3 rounded-full transition">Send Message</button>
746
+ </form>
747
+ </div>
748
+ </div>
749
+ </section>
750
+
751
+ <!-- Newsletter -->
752
+ <section class="py-16 bg-amber-50">
753
+ <div class="container mx-auto px-4">
754
+ <div class="max-w-4xl mx-auto text-center">
755
+ <h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-4">Join Our Newsletter</h2>
756
+ <p class="text-gray-600 mb-8">Subscribe to receive updates on special events, seasonal menus, and exclusive offers.</p>
757
+
758
+ <form class="flex flex-col sm:flex-row max-w-md mx-auto sm:max-w-xl">
759
+ <input type="email" placeholder="Your email address" class="flex-grow px-6 py-3 rounded-full sm:rounded-r-none border-2 border-amber-300 focus:outline-none focus:border-amber-500 mb-3 sm:mb-0">
760
+ <button type="submit" class="bg-amber-600 hover:bg-amber-700 text-white px-8 py-3 rounded-full sm:rounded-l-none transition">Subscribe</button>
761
+ </form>
762
+ </div>
763
+ </div>
764
+ </section>
765
+
766
+ <!-- Footer -->
767
+ <footer class="bg-gray-900 text-white py-12">
768
+ <div class="container mx-auto px-4">
769
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-8">
770
+ <div>
771
+ <div class="flex items-center mb-4">
772
+ <i class="fas fa-utensils text-3xl text-amber-600 mr-2"></i>
773
+ <h3 class="text-2xl font-bold">Savory <span class="text-amber-600">Bites</span></h3>
774
+ </div>
775
+ <p class="text-gray-400 mb-4">Experience culinary excellence at our award-winning restaurant in the heart of the city.</p>
776
+ <div class="flex space-x-4">
777
+ <a href="#" class="text-gray-400 hover:text-amber-400 transition"><i class="fab fa-facebook-f"></i></a>
778
+ <a href="#" class="text-gray-400 hover:text-amber-400 transition"><i class="fab fa-twitter"></i></a>
779
+ <a href="#" class="text-gray-400 hover:text-amber-400 transition"><i class="fab fa-instagram"></i></a>
780
+ <a href="#" class="text-gray-400 hover:text-amber-400 transition"><i class="fab fa-tripadvisor"></i></a>
781
+ </div>
782
+ </div>
783
+
784
+ <div>
785
+ <h4 class="text-lg font-bold mb-4">Quick Links</h4>
786
+ <ul class="space-y-2">
787
+ <li><a href="#home" class="text-gray-400 hover:text-amber-400 transition">Home</a></li>
788
+ <li><a href="#about" class="text-gray-400 hover:text-amber-400 transition">About Us</a></li>
789
+ <li><a href="#menu" class="text-gray-400 hover:text-amber-400 transition">Our Menu</a></li>
790
+ <li><a href="#gallery" class="text-gray-400 hover:text-amber-400 transition">Gallery</a></li>
791
+ <li><a href="#contact" class="text-gray-400 hover:text-amber-400 transition">Contact</a></li>
792
+ </ul>
793
+ </div>
794
+
795
+ <div>
796
+ <h4 class="text-lg font-bold mb-4">Opening Hours</h4>
797
+ <ul class="space-y-2 text-gray-400">
798
+ <li class="flex justify-between"><span>Monday - Friday</span> <span>11AM - 10PM</span></li>
799
+ <li class="flex justify-between"><span>Saturday</span> <span>10AM - 11PM</span></li>
800
+ <li class="flex justify-between"><span>Sunday</span> <span>10AM - 9PM</span></li>
801
+ <li class="pt-4 text-amber-400">Happy Hour: 3PM - 6PM Daily</li>
802
+ </ul>
803
+ </div>
804
+
805
+ <div>
806
+ <h4 class="text-lg font-bold mb-4">Contact Info</h4>
807
+ <ul class="space-y-3 text-gray-400">
808
+ <li class="flex items-start">
809
+ <i class="fas fa-map-marker-alt text-amber-400 mt-1 mr-3"></i>
810
+ <span>123 Gourmet Avenue, Foodville, CA 90210</span>
811
+ </li>
812
+ <li class="flex items-center">
813
+ <i class="fas fa-phone-alt text-amber-400 mr-3"></i>
814
+ <span>(555) 123-4567</span>
815
+ </li>
816
+ <li class="flex items-center">
817
+ <i class="fas fa-envelope text-amber-400 mr-3"></i>
818
+ <span>info@savorybites.com</span>
819
+ </li>
820
+ </ul>
821
+ </div>
822
+ </div>
823
+
824
+ <div class="border-t border-gray-800 pt-8 flex flex-col md:flex-row justify-between items-center">
825
+ <p class="text-gray-500 mb-4 md:mb-0">© 2023 Savory Bites. All rights reserved.</p>
826
+ <div class="flex space-x-6">
827
+ <a href="#" class="text-gray-500 hover:text-amber-400 transition">Privacy Policy</a>
828
+ <a href="#" class="text-gray-500 hover:text-amber-400 transition">Terms of Service</a>
829
+ </div>
830
+ </div>
831
+ </div>
832
+ </footer>
833
+
834
+ <!-- Back to Top Button -->
835
+ <button id="back-to-top" class="fixed bottom-8 right-8 bg-amber-600 text-white w-12 h-12 rounded-full flex items-center justify-center shadow-lg hover:bg-amber-700 transition hidden">
836
+ <i class="fas fa-arrow-up"></i>
837
+ </button>
838
+
839
+ <script>
840
+ // Mobile Menu Toggle
841
+ const mobileMenuButton = document.getElementById('mobile-menu-button');
842
+ const mobileMenu = document.getElementById('mobile-menu');
843
+
844
+ mobileMenuButton.addEventListener('click', () => {
845
+ mobileMenu.classList.toggle('hidden');
846
+ });
847
+
848
+ // Menu Tab Switching
849
+ const menuTabs = document.querySelectorAll('.menu-tab');
850
+ const menuCategories = document.querySelectorAll('.menu-category');
851
+
852
+ menuTabs.forEach(tab => {
853
+ tab.addEventListener('click', () => {
854
+ // Remove active class from all tabs
855
+ menuTabs.forEach(t => t.classList.remove('active', 'text-amber-600'));
856
+ tab.classList.add('active', 'text-amber-600');
857
+
858
+ // Hide all menu categories
859
+ menuCategories.forEach(category => {
860
+ category.classList.add('hidden');
861
+ });
862
+
863
+ // Show selected category
864
+ const categoryId = tab.getAttribute('data-category');
865
+ document.getElementById(categoryId).classList.remove('hidden');
866
+ });
867
+ });
868
+
869
+ // Back to Top Button
870
+ const backToTopButton = document.getElementById('back-to-top');
871
+
872
+ window.addEventListener('scroll', () => {
873
+ if (window.pageYOffset > 300) {
874
+ backToTopButton.classList.remove('hidden');
875
+ } else {
876
+ backToTopButton.classList.add('hidden');
877
+ }
878
+ });
879
+
880
+ backToTopButton.addEventListener('click', () => {
881
+ window.scrollTo({ top: 0, behavior: 'smooth' });
882
+ });
883
+
884
+ // Smooth scrolling for navigation links
885
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
886
+ anchor.addEventListener('click', function(e) {
887
+ e.preventDefault();
888
+
889
+ const targetId = this.getAttribute('href');
890
+ const targetElement = document.querySelector(targetId);
891
+
892
+ if (targetElement) {
893
+ window.scrollTo({
894
+ top: targetElement.offsetTop - 80,
895
+ behavior: 'smooth'
896
+ });
897
+
898
+ // Close mobile menu if open
899
+ mobileMenu.classList.add('hidden');
900
+ }
901
+ });
902
+ });
903
+
904
+ // Add to cart functionality (simplified)
905
+ const addToCartButtons = document.querySelectorAll('button:contains("Add to Order")');
906
+ const cartCount = document.querySelector('.fa-shopping-cart + span');
907
+ let cartItems = 0;
908
+
909
+ addToCartButtons.forEach(button => {
910
+ button.addEventListener('click', () => {
911
+ cartItems++;
912
+ cartCount.textContent = cartItems;
913
+
914
+ // Animation effect
915
+ cartCount.classList.add('animate-ping');
916
+ setTimeout(() => {
917
+ cartCount.classList.remove('animate-ping');
918
+ }, 500);
919
+
920
+ // Show notification
921
+ const notification = document.createElement('div');
922
+ notification.className = 'fixed bottom-4 left-1/2 transform -translate-x-1/2 bg-green-500 text-white px-4 py-2 rounded-lg shadow-lg';
923
+ notification.textContent = 'Item added to cart!';
924
+ document.body.appendChild(notification);
925
+
926
+ setTimeout(() => {
927
+ notification.classList.add('opacity-0', 'translate-y-4', 'transition-all', 'duration-300');
928
+ setTimeout(() => {
929
+ notification.remove();
930
+ }, 300);
931
+ }, 2000);
932
+ });
933
+ });
934
+ </script>
935
+ <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=falls/hadi" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
936
+ </html>