Hugging Face's logo

Spaces:
mesy10
/
qr-menu-1
Running

App Files Community
mesy10 commited on
Commit
1fad007
·
verified ·
1 Parent(s): 3d14a32

Ubaci sekciju da je moguće uraditi prevode na sve potrebne jezike svijeta u samo jednom kliku! - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +996 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Qr Menu 1
3
- emoji: 🚀
4
- colorFrom: red
5
- colorTo: gray
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: qr-menu-1
3
+ emoji: 🐳
4
+ colorFrom: yellow
5
+ colorTo: red
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,996 @@
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
+ <meta name="description" content="Transform your restaurant with our SaaS QR Menu solution. Create digital menus, track analytics, and enhance customer experience.">
7
+ <meta name="keywords" content="QR menu, digital menu, restaurant technology, contactless ordering, SaaS menu">
8
+ <title>MenuQR | Next-Generation Digital Menu Solution</title>
9
+ <script src="https://cdn.tailwindcss.com"></script>
10
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
11
+ <link rel="preconnect" href="https://fonts.googleapis.com">
12
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
13
+ <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
14
+ <script>
15
+ tailwind.config = {
16
+ theme: {
17
+ extend: {
18
+ colors: {
19
+ primary: '#4F46E5',
20
+ secondary: '#10B981',
21
+ dark: '#1F2937',
22
+ light: '#F9FAFB',
23
+ accent: '#F59E0B'
24
+ },
25
+ fontFamily: {
26
+ 'sans': ['Inter', 'sans-serif'],
27
+ 'heading': ['Poppins', 'sans-serif']
28
+ }
29
+ }
30
+ }
31
+ }
32
+ </script>
33
+ <style>
34
+ .gradient-bg {
35
+ background: linear-gradient(135deg, #4F46E5 0%, #7C3AED 100%);
36
+ }
37
+ .hero-pattern {
38
+ background-image: radial-gradient(circle at 10% 20%, rgba(79, 70, 229, 0.1) 0%, rgba(124, 58, 237, 0.05) 40%, transparent 60%);
39
+ }
40
+ .feature-card:hover {
41
+ transform: translateY(-5px);
42
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
43
+ }
44
+ .pricing-card:hover {
45
+ transform: scale(1.03);
46
+ }
47
+ .testimonial-card {
48
+ transition: all 0.3s ease;
49
+ }
50
+ .testimonial-card:hover {
51
+ box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
52
+ }
53
+ .accordion-content {
54
+ max-height: 0;
55
+ overflow: hidden;
56
+ transition: max-height 0.3s ease-out;
57
+ }
58
+ .animate-pulse-slow {
59
+ animation: pulse 4s cubic-bezier(0.4, 0, 0.6, 1) infinite;
60
+ }
61
+ @keyframes pulse {
62
+ 0%, 100% { opacity: 1; }
63
+ 50% { opacity: 0.8; }
64
+ }
65
+ .qr-animation {
66
+ animation: float 6s ease-in-out infinite;
67
+ }
68
+ @keyframes float {
69
+ 0% { transform: translateY(0px); }
70
+ 50% { transform: translateY(-20px); }
71
+ 100% { transform: translateY(0px); }
72
+ }
73
+ </style>
74
+ </head>
75
+ <body class="font-sans bg-light text-dark">
76
+ <!-- Navigation -->
77
+ <nav class="fixed w-full bg-white shadow-sm z-50">
78
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
79
+ <div class="flex justify-between h-16">
80
+ <div class="flex items-center">
81
+ <div class="flex-shrink-0 flex items-center">
82
+ <div class="bg-primary p-2 rounded-lg">
83
+ <i class="fas fa-qrcode text-white text-2xl"></i>
84
+ </div>
85
+ <span class="ml-3 text-xl font-bold text-primary">MenuQR</span>
86
+ </div>
87
+ <div class="hidden md:ml-10 md:flex md:space-x-8">
88
+ <a href="#features" class="text-gray-500 hover:text-primary transition">Features</a>
89
+ <a href="#how-it-works" class="text-gray-500 hover:text-primary transition">How It Works</a>
90
+ <a href="#pricing" class="text-gray-500 hover:text-primary transition">Pricing</a>
91
+ <a href="#testimonials" class="text-gray-500 hover:text-primary transition">Testimonials</a>
92
+ <a href="#faq" class="text-gray-500 hover:text-primary transition">FAQ</a>
93
+ </div>
94
+ </div>
95
+ <div class="flex items-center">
96
+ <a href="#" class="text-gray-500 hover:text-primary mr-4">Sign In</a>
97
+ <a href="#pricing" class="bg-primary text-white px-4 py-2 rounded-md hover:bg-indigo-700 transition">Get Started</a>
98
+ </div>
99
+ <div class="md:hidden flex items-center">
100
+ <button id="menu-btn" class="text-gray-500 hover:text-primary">
101
+ <i class="fas fa-bars text-2xl"></i>
102
+ </button>
103
+ </div>
104
+ </div>
105
+ </div>
106
+ <!-- Mobile menu -->
107
+ <div id="mobile-menu" class="md:hidden hidden">
108
+ <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3 bg-white shadow-lg">
109
+ <a href="#features" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-primary hover:bg-gray-50">Features</a>
110
+ <a href="#how-it-works" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-primary hover:bg-gray-50">How It Works</a>
111
+ <a href="#pricing" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-primary hover:bg-gray-50">Pricing</a>
112
+ <a href="#testimonials" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-primary hover:bg-gray-50">Testimonials</a>
113
+ <a href="#faq" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-primary hover:bg-gray-50">FAQ</a>
114
+ </div>
115
+ </div>
116
+ </nav>
117
+
118
+ <!-- Hero Section -->
119
+ <section class="pt-24 pb-20 hero-pattern">
120
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
121
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-12 items-center">
122
+ <div class="mt-10">
123
+ <h1 class="text-4xl md:text-5xl lg:text-6xl font-heading font-bold leading-tight">
124
+ Transform Your Restaurant with <span class="text-primary">Digital QR Menus</span>
125
+ </h1>
126
+ <p class="mt-6 text-xl text-gray-600">
127
+ Create beautiful digital menus, track customer engagement, and boost your sales with our all-in-one SaaS solution.
128
+ </p>
129
+ <div class="mt-8 flex flex-wrap gap-4">
130
+ <a href="#pricing" class="bg-primary text-white px-8 py-4 rounded-lg font-medium hover:bg-indigo-700 transition transform hover:scale-105">
131
+ Start Free Trial - No Credit Card Needed
132
+ </a>
133
+ <a href="#how-it-works" class="bg-white text-primary border-2 border-primary px-8 py-4 rounded-lg font-medium hover:bg-gray-50 transition">
134
+ <i class="fas fa-play-circle mr-2"></i> See Demo
135
+ </a>
136
+ </div>
137
+ <div class="mt-10 flex items-center">
138
+ <div class="flex -space-x-2">
139
+ <img class="w-10 h-10 rounded-full border-2 border-white" src="https://randomuser.me/api/portraits/women/12.jpg" alt="">
140
+ <img class="w-10 h-10 rounded-full border-2 border-white" src="https://randomuser.me/api/portraits/men/32.jpg" alt="">
141
+ <img class="w-10 h-10 rounded-full border-2 border-white" src="https://randomuser.me/api/portraits/women/44.jpg" alt="">
142
+ <img class="w-10 h-10 rounded-full border-2 border-white" src="https://randomuser.me/api/portraits/men/22.jpg" alt="">
143
+ </div>
144
+ <div class="ml-4">
145
+ <p class="text-gray-600"><span class="font-bold text-primary">2,500+</span> restaurants trust MenuQR</p>
146
+ </div>
147
+ </div>
148
+ </div>
149
+ <div class="relative">
150
+ <div class="relative qr-animation">
151
+ <div class="absolute top-0 left-0 w-full h-full bg-primary rounded-3xl opacity-10 blur-2xl"></div>
152
+ <div class="bg-white rounded-3xl shadow-xl overflow-hidden transform rotate-3 w-full max-w-md">
153
+ <div class="p-6 bg-gradient-to-r from-primary to-indigo-600">
154
+ <div class="flex justify-between items-center">
155
+ <h3 class="text-white font-bold text-xl">Bistro Delight</h3>
156
+ <div class="flex items-center space-x-2">
157
+ <div class="bg-white bg-opacity-20 p-1 rounded-full">
158
+ <i class="fas fa-qrcode text-white text-sm"></i>
159
+ </div>
160
+ <span class="text-white text-sm">Scan to Order</span>
161
+ </div>
162
+ </div>
163
+ </div>
164
+ <div class="p-6">
165
+ <div class="mb-4">
166
+ <h4 class="font-bold text-lg border-b pb-2 mb-3">Appetizers</h4>
167
+ <div class="space-y-3">
168
+ <div class="flex justify-between">
169
+ <div>
170
+ <p class="font-medium">Bruschetta</p>
171
+ <p class="text-sm text-gray-500">Tomato, basil, garlic on toast</p>
172
+ </div>
173
+ <p class="font-bold">$8.99</p>
174
+ </div>
175
+ <div class="flex justify-between">
176
+ <div>
177
+ <p class="font-medium">Calamari</p>
178
+ <p class="text-sm text-gray-500">Fried squid with lemon aioli</p>
179
+ </div>
180
+ <p class="font-bold">$12.99</p>
181
+ </div>
182
+ </div>
183
+ </div>
184
+ <div class="mb-4">
185
+ <h4 class="font-bold text-lg border-b pb-2 mb-3">Main Courses</h4>
186
+ <div class="space-y-3">
187
+ <div class="flex justify-between">
188
+ <div>
189
+ <p class="font-medium">Pasta Carbonara</p>
190
+ <p class="text-sm text-gray-500">Spaghetti, eggs, pancetta, parmesan</p>
191
+ </div>
192
+ <p class="font-bold">$16.99</p>
193
+ </div>
194
+ <div class="flex justify-between">
195
+ <div>
196
+ <p class="font-medium">Grilled Salmon</p>
197
+ <p class="text-sm text-gray-500">With seasonal vegetables</p>
198
+ </div>
199
+ <p class="font-bold">$22.99</p>
200
+ </div>
201
+ </div>
202
+ </div>
203
+ <div class="flex justify-center mt-4">
204
+ <div class="bg-primary bg-opacity-10 p-2 rounded-lg">
205
+ <p class="text-xs text-primary font-medium">Scan QR code to view full menu</p>
206
+ </div>
207
+ </div>
208
+ </div>
209
+ </div>
210
+ </div>
211
+ <div class="absolute -bottom-10 -right-10 bg-secondary text-white p-4 rounded-xl shadow-lg transform rotate-12">
212
+ <div class="flex items-center">
213
+ <div class="bg-white bg-opacity-20 p-2 rounded-full">
214
+ <i class="fas fa-chart-line"></i>
215
+ </div>
216
+ <div class="ml-3">
217
+ <p class="font-bold">+35%</p>
218
+ <p class="text-sm">Avg. Sales Increase</p>
219
+ </div>
220
+ </div>
221
+ </div>
222
+ </div>
223
+ </div>
224
+ </div>
225
+ </section>
226
+
227
+ <!-- Features Section -->
228
+ <section id="features" class="py-20 bg-white">
229
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
230
+ <div class="text-center">
231
+ <h2 class="text-3xl md:text-4xl font-heading font-bold">Powerful Features for <span class="text-primary">Modern Restaurants</span></h2>
232
+ <p class="mt-4 text-xl text-gray-600 max-w-3xl mx-auto">
233
+ Everything you need to create stunning digital menus and enhance customer experience.
234
+ </p>
235
+ </div>
236
+
237
+ <div class="mt-16 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
238
+ <!-- Feature 1 -->
239
+ <div class="feature-card bg-white rounded-xl shadow-lg p-8 transition duration-300">
240
+ <div class="bg-primary bg-opacity-10 p-4 rounded-full w-16 h-16 flex items-center justify-center">
241
+ <i class="fas fa-palette text-primary text-2xl"></i>
242
+ </div>
243
+ <h3 class="mt-6 text-xl font-bold">Beautiful Menu Designs</h3>
244
+ <p class="mt-3 text-gray-600">
245
+ Choose from professionally designed templates or create your own custom menu with our drag-and-drop editor.
246
+ </p>
247
+ </div>
248
+
249
+ <!-- Feature 2 -->
250
+ <div class="feature-card bg-white rounded-xl shadow-lg p-8 transition duration-300">
251
+ <div class="bg-secondary bg-opacity-10 p-4 rounded-full w-16 h-16 flex items-center justify-center">
252
+ <i class="fas fa-chart-pie text-secondary text-2xl"></i>
253
+ </div>
254
+ <h3 class="mt-6 text-xl font-bold">Real-time Analytics</h3>
255
+ <p class="mt-3 text-gray-600">
256
+ Track menu views, popular items, and customer engagement to make data-driven decisions.
257
+ </p>
258
+ </div>
259
+
260
+ <!-- Feature 3 -->
261
+ <div class="feature-card bg-white rounded-xl shadow-lg p-8 transition duration-300">
262
+ <div class="bg-accent bg-opacity-10 p-4 rounded-full w-16 h-16 flex items-center justify-center">
263
+ <i class="fas fa-sync text-accent text-2xl"></i>
264
+ </div>
265
+ <h3 class="mt-6 text-xl font-bold">Instant Updates</h3>
266
+ <p class="mt-3 text-gray-600">
267
+ Change menu items, prices, or specials in real-time without reprinting QR codes.
268
+ </p>
269
+ </div>
270
+
271
+ <!-- Feature 4 -->
272
+ <div class="feature-card bg-white rounded-xl shadow-lg p-8 transition duration-300">
273
+ <div class="bg-purple-500 bg-opacity-10 p-4 rounded-full w-16 h-16 flex items-center justify-center">
274
+ <i class="fas fa-language text-purple-500 text-2xl"></i>
275
+ </div>
276
+ <h3 class="mt-6 text-xl font-bold">Multi-language Support</h3>
277
+ <p class="mt-3 text-gray-600">
278
+ Offer menus in multiple languages to cater to international customers.
279
+ </p>
280
+ </div>
281
+
282
+ <!-- Feature 5 -->
283
+ <div class="feature-card bg-white rounded-xl shadow-lg p-8 transition duration-300">
284
+ <div class="bg-pink-500 bg-opacity-10 p-4 rounded-full w-16 h-16 flex items-center justify-center">
285
+ <i class="fas fa-mobile-alt text-pink-500 text-2xl"></i>
286
+ </div>
287
+ <h3 class="mt-6 text-xl font-bold">Mobile-Optimized</h3>
288
+ <p class="mt-3 text-gray-600">
289
+ Menus look stunning on any device, from smartphones to tablets.
290
+ </p>
291
+ </div>
292
+
293
+ <!-- Feature 6 -->
294
+ <div class="feature-card bg-white rounded-xl shadow-lg p-8 transition duration-300">
295
+ <div class="bg-green-500 bg-opacity-10 p-4 rounded-full w-16 h-16 flex items-center justify-center">
296
+ <i class="fas fa-lock text-green-500 text-2xl"></i>
297
+ </div>
298
+ <h3 class="mt-6 text-xl font-bold">Secure & Reliable</h3>
299
+ <p class="mt-3 text-gray-600">
300
+ Enterprise-grade security and 99.9% uptime guarantee for your business.
301
+ </p>
302
+ </div>
303
+ </div>
304
+ </div>
305
+ </section>
306
+
307
+ <!-- Template Library Section -->
308
+ <section class="py-20 bg-gray-50">
309
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
310
+ <div class="text-center">
311
+ <h2 class="text-3xl md:text-4xl font-heading font-bold">Over <span class="text-primary">100+ Professionally Designed Templates</span></h2>
312
+ <p class="mt-4 text-xl text-gray-600 max-w-3xl mx-auto">
313
+ We're one of the few offering specialized templates for every type of food service business.
314
+ </p>
315
+ </div>
316
+
317
+ <div class="mt-16 grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-6">
318
+ <!-- Template 1 -->
319
+ <div class="bg-white rounded-xl shadow-md overflow-hidden">
320
+ <div class="h-40 bg-gradient-to-r from-blue-100 to-indigo-100 flex items-center justify-center">
321
+ <i class="fas fa-utensils text-4xl text-primary"></i>
322
+ </div>
323
+ <div class="p-4">
324
+ <h3 class="font-bold text-center">Restaurants</h3>
325
+ </div>
326
+ </div>
327
+
328
+ <!-- Template 2 -->
329
+ <div class="bg-white rounded-xl shadow-md overflow-hidden">
330
+ <div class="h-40 bg-gradient-to-r from-green-100 to-emerald-100 flex items-center justify-center">
331
+ <i class="fas fa-coffee text-4xl text-secondary"></i>
332
+ </div>
333
+ <div class="p-4">
334
+ <h3 class="font-bold text-center">Cafés</h3>
335
+ </div>
336
+ </div>
337
+
338
+ <!-- Template 3 -->
339
+ <div class="bg-white rounded-xl shadow-md overflow-hidden">
340
+ <div class="h-40 bg-gradient-to-r from-yellow-100 to-amber-100 flex items-center justify-center">
341
+ <i class="fas fa-beer text-4xl text-accent"></i>
342
+ </div>
343
+ <div class="p-4">
344
+ <h3 class="font-bold text-center">Bars & Pubs</h3>
345
+ </div>
346
+ </div>
347
+
348
+ <!-- Template 4 -->
349
+ <div class="bg-white rounded-xl shadow-md overflow-hidden">
350
+ <div class="h-40 bg-gradient-to-r from-red-100 to-pink-100 flex items-center justify-center">
351
+ <i class="fas fa-pizza-slice text-4xl text-red-500"></i>
352
+ </div>
353
+ <div class="p-4">
354
+ <h3 class="font-bold text-center">Pizzerias</h3>
355
+ </div>
356
+ </div>
357
+
358
+ <!-- Template 5 -->
359
+ <div class="bg-white rounded-xl shadow-md overflow-hidden">
360
+ <div class="h-40 bg-gradient-to-r from-purple-100 to-fuchsia-100 flex items-center justify-center">
361
+ <i class="fas fa-ice-cream text-4xl text-purple-500"></i>
362
+ </div>
363
+ <div class="p-4">
364
+ <h3 class="font-bold text-center">Dessert Shops</h3>
365
+ </div>
366
+ </div>
367
+ </div>
368
+
369
+ <div class="mt-12 text-center">
370
+ <a href="#" class="inline-flex items-center text-primary font-medium hover:underline">
371
+ View all templates <i class="fas fa-arrow-right ml-2"></i>
372
+ </a>
373
+ </div>
374
+ </div>
375
+ </section>
376
+
377
+ <!-- Translation Section -->
378
+ <section class="py-20 bg-white">
379
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
380
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-12 items-center">
381
+ <div class="order-2 md:order-1">
382
+ <h2 class="text-3xl md:text-4xl font-heading font-bold">Translate to Any Language <span class="text-primary">With One Click</span></h2>
383
+ <p class="mt-6 text-xl text-gray-600">
384
+ Expand your customer base globally with our instant translation feature. Your menu can be available in any language instantly - no extra work needed!
385
+ </p>
386
+ <ul class="mt-8 space-y-3">
387
+ <li class="flex items-start">
388
+ <i class="fas fa-check-circle text-green-500 mt-1 mr-3"></i>
389
+ <span class="text-gray-700">Automatic translations for 100+ languages</span>
390
+ </li>
391
+ <li class="flex items-start">
392
+ <i class="fas fa-check-circle text-green-500 mt-1 mr-3"></i>
393
+ <span class="text-gray-700">Professional human translations available</span>
394
+ </li>
395
+ <li class="flex items-start">
396
+ <i class="fas fa-check-circle text-green-500 mt-1 mr-3"></i>
397
+ <span class="text-gray-700">Customers see menu in their preferred language automatically</span>
398
+ </li>
399
+ </ul>
400
+ <div class="mt-8">
401
+ <a href="#pricing" class="bg-primary text-white px-8 py-4 rounded-lg font-medium hover:bg-indigo-700 transition inline-flex items-center">
402
+ <i class="fas fa-globe mr-2"></i> Try Translation Feature
403
+ </a>
404
+ </div>
405
+ </div>
406
+ <div class="order-1 md:order-2 flex justify-center">
407
+ <div class="relative">
408
+ <div class="bg-gray-100 rounded-2xl p-6 w-full max-w-md">
409
+ <div class="flex justify-between items-center mb-6">
410
+ <h3 class="font-bold text-lg">Select Languages</h3>
411
+ <div class="bg-primary text-white text-xs px-2 py-1 rounded">Auto-translate</div>
412
+ </div>
413
+ <div class="space-y-4">
414
+ <div class="flex items-center justify-between p-3 bg-white rounded-lg shadow-sm">
415
+ <span>English</span>
416
+ <i class="fas fa-check-circle text-green-500"></i>
417
+ </div>
418
+ <div class="flex items-center justify-between p-3 bg-white rounded-lg shadow-sm">
419
+ <span>Spanish</span>
420
+ <i class="fas fa-plus-circle text-gray-400"></i>
421
+ </div>
422
+ <div class="flex items-center justify-between p-3 bg-white rounded-lg shadow-sm">
423
+ <span>French</span>
424
+ <i class="fas fa-plus-circle text-gray-400"></i>
425
+ </div>
426
+ <div class="flex items-center justify-between p-3 bg-white rounded-lg shadow-sm">
427
+ <span>German</span>
428
+ <i class="fas fa-plus-circle text-gray-400"></i>
429
+ </div>
430
+ <div class="flex items-center justify-between p-3 bg-white rounded-lg shadow-sm">
431
+ <span>Chinese</span>
432
+ <i class="fas fa-plus-circle text-gray-400"></i>
433
+ </div>
434
+ </div>
435
+ <div class="mt-6 text-center">
436
+ <button class="text-primary text-sm font-medium">+ Add More Languages</button>
437
+ </div>
438
+ </div>
439
+ <div class="absolute -bottom-6 -right-6 bg-secondary text-white px-4 py-2 rounded-lg shadow-lg">
440
+ <p class="font-bold text-sm">100+ Languages Supported</p>
441
+ </div>
442
+ </div>
443
+ </div>
444
+ </div>
445
+ </div>
446
+ </section>
447
+
448
+ <!-- How It Works Section -->
449
+ <section id="how-it-works" class="py-20 gradient-bg">
450
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
451
+ <div class="text-center">
452
+ <h2 class="text-3xl md:text-4xl font-heading font-bold text-white">How MenuQR Works</h2>
453
+ <p class="mt-4 text-xl text-indigo-100 max-w-3xl mx-auto">
454
+ Simple setup, powerful results. Get started in just 3 easy steps.
455
+ </p>
456
+ </div>
457
+
458
+ <div class="mt-16 grid grid-cols-1 md:grid-cols-3 gap-8">
459
+ <!-- Step 1 -->
460
+ <div class="bg-white rounded-xl shadow-lg p-8">
461
+ <div class="flex justify-center">
462
+ <div class="bg-primary text-white rounded-full w-12 h-12 flex items-center justify-center text-xl font-bold">1</div>
463
+ </div>
464
+ <h3 class="mt-6 text-xl font-bold text-center">Create Your Menu</h3>
465
+ <p class="mt-3 text-gray-600 text-center">
466
+ Use our intuitive editor to design your digital menu with photos, descriptions, and prices.
467
+ </p>
468
+ <div class="mt-6 flex justify-center">
469
+ <div class="bg-gray-200 border-2 border-dashed rounded-xl w-48 h-48"></div>
470
+ </div>
471
+ </div>
472
+
473
+ <!-- Step 2 -->
474
+ <div class="bg-white rounded-xl shadow-lg p-8">
475
+ <div class="flex justify-center">
476
+ <div class="bg-primary text-white rounded-full w-12 h-12 flex items-center justify-center text-xl font-bold">2</div>
477
+ </div>
478
+ <h3 class="mt-6 text-xl font-bold text-center">Generate QR Codes</h3>
479
+ <p class="mt-3 text-gray-600 text-center">
480
+ Instantly generate printable QR codes to place on tables, menus, or promotional materials.
481
+ </p>
482
+ <div class="mt-6 flex justify-center">
483
+ <div class="bg-gray-200 border-2 border-dashed rounded-xl w-48 h-48 flex items-center justify-center">
484
+ <div class="grid grid-cols-3 gap-1">
485
+ <div class="w-6 h-6 bg-primary rounded-sm"></div>
486
+ <div class="w-6 h-6 bg-primary rounded-sm"></div>
487
+ <div class="w-6 h-6 bg-primary rounded-sm"></div>
488
+ <div class="w-6 h-6 bg-primary rounded-sm"></div>
489
+ <div class="w-6 h-6 bg-white rounded-sm"></div>
490
+ <div class="w-6 h-6 bg-primary rounded-sm"></div>
491
+ <div class="w-6 h-6 bg-primary rounded-sm"></div>
492
+ <div class="w-6 h-6 bg-white rounded-sm"></div>
493
+ <div class="w-6 h-6 bg-primary rounded-sm"></div>
494
+ </div>
495
+ </div>
496
+ </div>
497
+ </div>
498
+
499
+ <!-- Step 3 -->
500
+ <div class="bg-white rounded-xl shadow-lg p-8">
501
+ <div class="flex justify-center">
502
+ <div class="bg-primary text-white rounded-full w-12 h-12 flex items-center justify-center text-xl font-bold">3</div>
503
+ </div>
504
+ <h3 class="mt-6 text-xl font-bold text-center">Engage Customers</h3>
505
+ <p class="mt-3 text-gray-600 text-center">
506
+ Customers scan QR codes to view your menu on their phones, browse items, and place orders.
507
+ </p>
508
+ <div class="mt-6 flex justify-center">
509
+ <div class="bg-gray-200 border-2 border-dashed rounded-xl w-48 h-48"></div>
510
+ </div>
511
+ </div>
512
+ </div>
513
+
514
+ <div class="mt-16 text-center">
515
+ <a href="#pricing" class="bg-white text-primary px-8 py-4 rounded-lg font-medium hover:bg-gray-100 transition transform hover:scale-105 inline-flex items-center">
516
+ <i class="fas fa-rocket mr-2"></i> Start Your Free Trial
517
+ </a>
518
+ </div>
519
+ </div>
520
+ </section>
521
+
522
+ <!-- Pricing Section -->
523
+ <section id="pricing" class="py-20 bg-gray-50">
524
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
525
+ <div class="text-center">
526
+ <h2 class="text-3xl md:text-4xl font-heading font-bold">Simple, Transparent <span class="text-primary">Pricing</span></h2>
527
+ <p class="mt-4 text-xl text-gray-600 max-w-3xl mx-auto">
528
+ Choose the perfect plan for your restaurant. No hidden fees, cancel anytime.
529
+ </p>
530
+ </div>
531
+
532
+ <div class="mt-12 flex justify-center">
533
+ <div class="inline-flex rounded-md p-1 bg-gray-200">
534
+ <button type="button" class="px-4 py-2 text-sm font-medium rounded-md bg-white text-primary shadow-sm monthly-btn">Monthly</button>
535
+ <button type="button" class="px-4 py-2 text-sm font-medium rounded-md text-gray-600 hover:text-primary yearly-btn">Yearly (Save 20%)</button>
536
+ </div>
537
+ </div>
538
+
539
+ <div class="mt-16 grid grid-cols-1 md:grid-cols-3 gap-8">
540
+ <!-- Starter Plan -->
541
+ <div class="pricing-card bg-white rounded-xl shadow-lg overflow-hidden transition duration-300">
542
+ <div class="p-8">
543
+ <h3 class="text-2xl font-bold">Starter</h3>
544
+ <p class="mt-2 text-gray-600">Perfect for small cafes and food trucks</p>
545
+ <div class="mt-6">
546
+ <span class="text-4xl font-bold">$19</span>
547
+ <span class="text-gray-600">/month</span>
548
+ </div>
549
+ <ul class="mt-8 space-y-4">
550
+ <li class="flex items-center">
551
+ <i class="fas fa-check-circle text-green-500 mr-2"></i>
552
+ <span>1 Menu</span>
553
+ </li>
554
+ <li class="flex items-center">
555
+ <i class="fas fa-check-circle text-green-500 mr-2"></i>
556
+ <span>Unlimited QR Codes</span>
557
+ </li>
558
+ <li class="flex items-center">
559
+ <i class="fas fa-check-circle text-green-500 mr-2"></i>
560
+ <span>Basic Analytics</span>
561
+ </li>
562
+ <li class="flex items-center text-gray-400">
563
+ <i class="fas fa-times-circle mr-2"></i>
564
+ <span>Multi-language Support</span>
565
+ </li>
566
+ <li class="flex items-center text-gray-400">
567
+ <i class="fas fa-times-circle mr-2"></i>
568
+ <span>Priority Support</span>
569
+ </li>
570
+ </ul>
571
+ <a href="#" class="mt-8 block w-full bg-gray-100 text-gray-800 text-center py-3 rounded-lg font-medium hover:bg-gray-200 transition">Get Started</a>
572
+ </div>
573
+ </div>
574
+
575
+ <!-- Professional Plan -->
576
+ <div class="pricing-card bg-white rounded-xl shadow-xl overflow-hidden border-2 border-primary relative transition duration-300">
577
+ <div class="absolute top-0 right-0 bg-primary text-white px-4 py-1 rounded-bl-lg font-bold">
578
+ Most Popular
579
+ </div>
580
+ <div class="p-8">
581
+ <h3 class="text-2xl font-bold">Professional</h3>
582
+ <p class="mt-2 text-gray-600">Ideal for restaurants and bars</p>
583
+ <div class="mt-6">
584
+ <span class="text-4xl font-bold">$49</span>
585
+ <span class="text-gray-600">/month</span>
586
+ </div>
587
+ <ul class="mt-8 space-y-4">
588
+ <li class="flex items-center">
589
+ <i class="fas fa-check-circle text-green-500 mr-2"></i>
590
+ <span>5 Menus</span>
591
+ </li>
592
+ <li class="flex items-center">
593
+ <i class="fas fa-check-circle text-green-500 mr-2"></i>
594
+ <span>Unlimited QR Codes</span>
595
+ </li>
596
+ <li class="flex items-center">
597
+ <i class="fas fa-check-circle text-green-500 mr-2"></i>
598
+ <span>Advanced Analytics</span>
599
+ </li>
600
+ <li class="flex items-center">
601
+ <i class="fas fa-check-circle text-green-500 mr-2"></i>
602
+ <span>Multi-language Support</span>
603
+ </li>
604
+ <li class="flex items-center">
605
+ <i class="fas fa-check-circle text-green-500 mr-2"></i>
606
+ <span>Priority Support</span>
607
+ </li>
608
+ </ul>
609
+ <a href="#" class="mt-8 block w-full bg-primary text-white text-center py-3 rounded-lg font-medium hover:bg-indigo-700 transition">Get Started</a>
610
+ </div>
611
+ </div>
612
+
613
+ <!-- Enterprise Plan -->
614
+ <div class="pricing-card bg-white rounded-xl shadow-lg overflow-hidden transition duration-300">
615
+ <div class="p-8">
616
+ <h3 class="text-2xl font-bold">Enterprise</h3>
617
+ <p class="mt-2 text-gray-600">For chains and large venues</p>
618
+ <div class="mt-6">
619
+ <span class="text-4xl font-bold">$99</span>
620
+ <span class="text-gray-600">/month</span>
621
+ </div>
622
+ <ul class="mt-8 space-y-4">
623
+ <li class="flex items-center">
624
+ <i class="fas fa-check-circle text-green-500 mr-2"></i>
625
+ <span>Unlimited Menus</span>
626
+ </li>
627
+ <li class="flex items-center">
628
+ <i class="fas fa-check-circle text-green-500 mr-2"></i>
629
+ <span>Unlimited QR Codes</span>
630
+ </li>
631
+ <li class="flex items-center">
632
+ <i class="fas fa-check-circle text-green-500 mr-2"></i>
633
+ <span>Premium Analytics</span>
634
+ </li>
635
+ <li class="flex items-center">
636
+ <i class="fas fa-check-circle text-green-500 mr-2"></i>
637
+ <span>Multi-language Support</span>
638
+ </li>
639
+ <li class="flex items-center">
640
+ <i class="fas fa-check-circle text-green-500 mr-2"></i>
641
+ <span>24/7 Dedicated Support</span>
642
+ </li>
643
+ </ul>
644
+ <a href="#" class="mt-8 block w-full bg-gray-100 text-gray-800 text-center py-3 rounded-lg font-medium hover:bg-gray-200 transition">Get Started</a>
645
+ </div>
646
+ </div>
647
+ </div>
648
+
649
+ <div class="mt-12 text-center text-gray-600">
650
+ <p>All plans include a 14-day free trial. No credit card required.</p>
651
+ </div>
652
+ </div>
653
+ </section>
654
+
655
+ <!-- Testimonials Section -->
656
+ <section id="testimonials" class="py-20 bg-white">
657
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
658
+ <div class="text-center">
659
+ <h2 class="text-3xl md:text-4xl font-heading font-bold">Trusted by <span class="text-primary">Restaurants Worldwide</span></h2>
660
+ <p class="mt-4 text-xl text-gray-600 max-w-3xl mx-auto">
661
+ Hear from our satisfied customers who transformed their business with MenuQR.
662
+ </p>
663
+ </div>
664
+
665
+ <div class="mt-16 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
666
+ <!-- Testimonial 1 -->
667
+ <div class="testimonial-card bg-gray-50 rounded-xl p-8">
668
+ <div class="flex items-center">
669
+ <img class="w-12 h-12 rounded-full" src="https://randomuser.me/api/portraits/women/32.jpg" alt="Sarah Johnson">
670
+ <div class="ml-4">
671
+ <h4 class="font-bold">Sarah Johnson</h4>
672
+ <p class="text-gray-600">Owner, Bistro Cafe</p>
673
+ </div>
674
+ </div>
675
+ <p class="mt-6 text-gray-700 italic">
676
+ "Since implementing MenuQR, our customers love the convenience and our staff saves hours each week. Sales increased by 28% in the first month!"
677
+ </p>
678
+ <div class="mt-6 flex text-yellow-400">
679
+ <i class="fas fa-star"></i>
680
+ <i class="fas fa-star"></i>
681
+ <i class="fas fa-star"></i>
682
+ <i class="fas fa-star"></i>
683
+ <i class="fas fa-star"></i>
684
+ </div>
685
+ </div>
686
+
687
+ <!-- Testimonial 2 -->
688
+ <div class="testimonial-card bg-gray-50 rounded-xl p-8">
689
+ <div class="flex items-center">
690
+ <img class="w-12 h-12 rounded-full" src="https://randomuser.me/api/portraits/men/54.jpg" alt="Michael Rodriguez">
691
+ <div class="ml-4">
692
+ <h4 class="font-bold">Michael Rodriguez</h4>
693
+ <p class="text-gray-600">Manager, Urban Grill</p>
694
+ </div>
695
+ </div>
696
+ <p class="mt-6 text-gray-700 italic">
697
+ "The analytics feature alone is worth the price. We've optimized our menu based on customer engagement data, resulting in higher average order values."
698
+ </p>
699
+ <div class="mt-6 flex text-yellow-400">
700
+ <i class="fas fa-star"></i>
701
+ <i class="fas fa-star"></i>
702
+ <i class="fas fa-star"></i>
703
+ <i class="fas fa-star"></i>
704
+ <i class="fas fa-star"></i>
705
+ </div>
706
+ </div>
707
+
708
+ <!-- Testimonial 3 -->
709
+ <div class="testimonial-card bg-gray-50 rounded-xl p-8">
710
+ <div class="flex items-center">
711
+ <img class="w-12 h-12 rounded-full" src="https://randomuser.me/api/portraits/women/68.jpg" alt="Jennifer Kim">
712
+ <div class="ml-4">
713
+ <h4 class="font-bold">Jennifer Kim</h4>
714
+ <p class="text-gray-600">Owner, Sushi Haven</p>
715
+ </div>
716
+ </div>
717
+ <p class="mt-6 text-gray-700 italic">
718
+ "Updating our menu used to be a nightmare. With MenuQR, we change items instantly. The multi-language feature has been a game-changer for our tourist customers."
719
+ </p>
720
+ <div class="mt-6 flex text-yellow-400">
721
+ <i class="fas fa-star"></i>
722
+ <i class="fas fa-star"></i>
723
+ <i class="fas fa-star"></i>
724
+ <i class="fas fa-star"></i>
725
+ <i class="fas fa-star"></i>
726
+ </div>
727
+ </div>
728
+ </div>
729
+ </div>
730
+ </section>
731
+
732
+ <!-- FAQ Section -->
733
+ <section id="faq" class="py-20 bg-gray-50">
734
+ <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
735
+ <div class="text-center">
736
+ <h2 class="text-3xl md:text-4xl font-heading font-bold">Frequently Asked <span class="text-primary">Questions</span></h2>
737
+ <p class="mt-4 text-xl text-gray-600 max-w-3xl mx-auto">
738
+ Everything you need to know about MenuQR. Can't find an answer? Contact us.
739
+ </p>
740
+ </div>
741
+
742
+ <div class="mt-16 space-y-6">
743
+ <!-- FAQ 1 -->
744
+ <div class="bg-white rounded-xl shadow-md overflow-hidden">
745
+ <button class="faq-question w-full text-left p-6 font-bold text-lg flex justify-between items-center">
746
+ <span>How long does it take to set up MenuQR?</span>
747
+ <i class="fas fa-chevron-down"></i>
748
+ </button>
749
+ <div class="accordion-content">
750
+ <div class="p-6 pt-0 text-gray-600">
751
+ You can have your digital menu up and running in less than 30 minutes! Our intuitive editor makes it easy to create and customize your menu. Just upload your items, add descriptions and prices, and generate your QR code.
752
+ </div>
753
+ </div>
754
+ </div>
755
+
756
+ <!-- FAQ 2 -->
757
+ <div class="bg-white rounded-xl shadow-md overflow-hidden">
758
+ <button class="faq-question w-full text-left p-6 font-bold text-lg flex justify-between items-center">
759
+ <span>Do customers need to download an app?</span>
760
+ <i class="fas fa-chevron-down"></i>
761
+ </button>
762
+ <div class="accordion-content">
763
+ <div class="p-6 pt-0 text-gray-600">
764
+ No, customers don't need to download anything! They simply scan the QR code with their phone's camera, which opens your menu directly in their mobile browser. It works on both iOS and Android devices.
765
+ </div>
766
+ </div>
767
+ </div>
768
+
769
+ <!-- FAQ 3 -->
770
+ <div class="bg-white rounded-xl shadow-md overflow-hidden">
771
+ <button class="faq-question w-full text-left p-6 font-bold text-lg flex justify-between items-center">
772
+ <span>Can I update my menu after publishing?</span>
773
+ <i class="fas fa-chevron-down"></i>
774
+ </button>
775
+ <div class="accordion-content">
776
+ <div class="p-6 pt-0 text-gray-600">
777
+ Absolutely! One of the biggest advantages of MenuQR is that you can update your menu anytime. Changes appear instantly for customers scanning your QR code. You don't need to reprint anything.
778
+ </div>
779
+ </div>
780
+ </div>
781
+
782
+ <!-- FAQ 4 -->
783
+ <div class="bg-white rounded-xl shadow-md overflow-hidden">
784
+ <button class="faq-question w-full text-left p-6 font-bold text-lg flex justify-between items-center">
785
+ <span>What kind of analytics do you provide?</span>
786
+ <i class="fas fa-chevron-down"></i>
787
+ </button>
788
+ <div class="accordion-content">
789
+ <div class="p-6 pt-0 text-gray-600">
790
+ Our analytics dashboard shows you how many people view your menu, which items are most popular, peak usage times, and customer engagement metrics. Professional and Enterprise plans include more advanced analytics features.
791
+ </div>
792
+ </div>
793
+ </div>
794
+
795
+ <!-- FAQ 5 -->
796
+ <div class="bg-white rounded-xl shadow-md overflow-hidden">
797
+ <button class="faq-question w-full text-left p-6 font-bold text-lg flex justify-between items-center">
798
+ <span>Is there a long-term contract?</span>
799
+ <i class="fas fa-chevron-down"></i>
800
+ </button>
801
+ <div class="accordion-content">
802
+ <div class="p-6 pt-0 text-gray-600">
803
+ No, MenuQR is a month-to-month service. You can cancel anytime with no penalties. We also offer discounted annual billing if you prefer to pay upfront.
804
+ </div>
805
+ </div>
806
+ </div>
807
+ </div>
808
+ </div>
809
+ </section>
810
+
811
+ <!-- CTA Section -->
812
+ <section class="py-20 gradient-bg">
813
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
814
+ <div class="bg-white rounded-3xl shadow-xl p-8 md:p-12">
815
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-12 items-center">
816
+ <div>
817
+ <h2 class="text-3xl md:text-4xl font-heading font-bold">Ready to Transform Your Restaurant?</h2>
818
+ <p class="mt-4 text-xl text-gray-600">
819
+ Join thousands of restaurants using MenuQR to enhance their customer experience and boost sales.
820
+ </p>
821
+ <div class="mt-8">
822
+ <a href="#pricing" class="bg-primary text-white px-8 py-4 rounded-lg font-medium hover:bg-indigo-700 transition inline-flex items-center">
823
+ <i class="fas fa-play-circle mr-2"></i> Start Free Trial
824
+ </a>
825
+ </div>
826
+ </div>
827
+ <div class="flex justify-center">
828
+ <div class="relative">
829
+ <div class="bg-gray-200 border-2 border-dashed rounded-xl w-64 h-64 flex items-center justify-center">
830
+ <div class="grid grid-cols-3 gap-1">
831
+ <div class="w-6 h-6 bg-primary rounded-sm"></div>
832
+ <div class="w-6 h-6 bg-primary rounded-sm"></div>
833
+ <div class="w-6 h-6 bg-primary rounded-sm"></div>
834
+ <div class="w-6 h-6 bg-primary rounded-sm"></div>
835
+ <div class="w-6 h-6 bg-white rounded-sm"></div>
836
+ <div class="w-6 h-6 bg-primary rounded-sm"></div>
837
+ <div class="w-6 h-6 bg-primary rounded-sm"></div>
838
+ <div class="w-6 h-6 bg-white rounded-sm"></div>
839
+ <div class="w-6 h-6 bg-primary rounded-sm"></div>
840
+ </div>
841
+ </div>
842
+ <div class="absolute -bottom-4 -right-4 bg-secondary text-white px-4 py-2 rounded-lg shadow-lg">
843
+ <p class="font-bold">Scan to see demo</p>
844
+ </div>
845
+ </div>
846
+ </div>
847
+ </div>
848
+ </div>
849
+ </div>
850
+ </section>
851
+
852
+ <!-- Footer -->
853
+ <footer class="bg-dark text-white py-16">
854
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
855
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-12">
856
+ <div>
857
+ <div class="flex items-center">
858
+ <div class="bg-primary p-2 rounded-lg">
859
+ <i class="fas fa-qrcode text-white text-2xl"></i>
860
+ </div>
861
+ <span class="ml-3 text-xl font-bold text-white">MenuQR</span>
862
+ </div>
863
+ <p class="mt-4 text-gray-400">
864
+ Transforming restaurant experiences with modern digital menu solutions.
865
+ </p>
866
+ <div class="mt-6 flex space-x-4">
867
+ <a href="#" class="text-gray-400 hover:text-white">
868
+ <i class="fab fa-facebook-f"></i>
869
+ </a>
870
+ <a href="#" class="text-gray-400 hover:text-white">
871
+ <i class="fab fa-twitter"></i>
872
+ </a>
873
+ <a href="#" class="text-gray-400 hover:text-white">
874
+ <i class="fab fa-instagram"></i>
875
+ </a>
876
+ <a href="#" class="text-gray-400 hover:text-white">
877
+ <i class="fab fa-linkedin-in"></i>
878
+ </a>
879
+ </div>
880
+ </div>
881
+
882
+ <div>
883
+ <h3 class="text-lg font-bold mb-4">Product</h3>
884
+ <ul class="space-y-2">
885
+ <li><a href="#features" class="text-gray-400 hover:text-white transition">Features</a></li>
886
+ <li><a href="#pricing" class="text-gray-400 hover:text-white transition">Pricing</a></li>
887
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Integrations</a></li>
888
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Updates</a></li>
889
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Demo</a></li>
890
+ </ul>
891
+ </div>
892
+
893
+ <div>
894
+ <h3 class="text-lg font-bold mb-4">Resources</h3>
895
+ <ul class="space-y-2">
896
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Blog</a></li>
897
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Documentation</a></li>
898
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Guides</a></li>
899
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Help Center</a></li>
900
+ <li><a href="#" class="text-gray-400 hover:text-white transition">API Status</a></li>
901
+ </ul>
902
+ </div>
903
+
904
+ <div>
905
+ <h3 class="text-lg font-bold mb-4">Contact</h3>
906
+ <ul class="space-y-2">
907
+ <li class="flex items-start">
908
+ <i class="fas fa-map-marker-alt mt-1 text-gray-400 mr-3"></i>
909
+ <span class="text-gray-400">123 Restaurant Blvd, Food City</span>
910
+ </li>
911
+ <li class="flex items-start">
912
+ <i class="fas fa-phone mt-1 text-gray-400 mr-3"></i>
913
+ <span class="text-gray-400">+1 (555) 123-4567</span>
914
+ </li>
915
+ <li class="flex items-start">
916
+ <i class="fas fa-envelope mt-1 text-gray-400 mr-3"></i>
917
+ <span class="text-gray-400">[email protected]</span>
918
+ </li>
919
+ </ul>
920
+ </div>
921
+ </div>
922
+
923
+ <div class="mt-16 pt-8 border-t border-gray-800 text-center text-gray-400">
924
+ <p>&copy; 2023 MenuQR. All rights reserved.</p>
925
+ </div>
926
+ </div>
927
+ </footer>
928
+
929
+ <script>
930
+ // Mobile menu toggle
931
+ const menuBtn = document.getElementById('menu-btn');
932
+ const mobileMenu = document.getElementById('mobile-menu');
933
+
934
+ menuBtn.addEventListener('click', () => {
935
+ mobileMenu.classList.toggle('hidden');
936
+ });
937
+
938
+ // FAQ accordion
939
+ const faqQuestions = document.querySelectorAll('.faq-question');
940
+
941
+ faqQuestions.forEach(question => {
942
+ question.addEventListener('click', () => {
943
+ const content = question.nextElementSibling;
944
+ const icon = question.querySelector('i');
945
+
946
+ if (content.style.maxHeight) {
947
+ content.style.maxHeight = null;
948
+ icon.classList.remove('fa-chevron-up');
949
+ icon.classList.add('fa-chevron-down');
950
+ } else {
951
+ content.style.maxHeight = content.scrollHeight + "px";
952
+ icon.classList.remove('fa-chevron-down');
953
+ icon.classList.add('fa-chevron-up');
954
+ }
955
+ });
956
+ });
957
+
958
+ // Pricing toggle
959
+ const monthlyBtn = document.querySelector('.monthly-btn');
960
+ const yearlyBtn = document.querySelector('.yearly-btn');
961
+
962
+ monthlyBtn.addEventListener('click', () => {
963
+ monthlyBtn.classList.add('bg-white', 'text-primary', 'shadow-sm');
964
+ yearlyBtn.classList.remove('bg-white', 'text-primary', 'shadow-sm');
965
+ yearlyBtn.classList.add('text-gray-600', 'hover:text-primary');
966
+ });
967
+
968
+ yearlyBtn.addEventListener('click', () => {
969
+ yearlyBtn.classList.add('bg-white', 'text-primary', 'shadow-sm');
970
+ monthlyBtn.classList.remove('bg-white', 'text-primary', 'shadow-sm');
971
+ monthlyBtn.classList.add('text-gray-600', 'hover:text-primary');
972
+ });
973
+
974
+ // Smooth scrolling for anchor links
975
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
976
+ anchor.addEventListener('click', function (e) {
977
+ e.preventDefault();
978
+
979
+ const targetId = this.getAttribute('href');
980
+ if (targetId === '#') return;
981
+
982
+ const targetElement = document.querySelector(targetId);
983
+ if (targetElement) {
984
+ window.scrollTo({
985
+ top: targetElement.offsetTop - 80,
986
+ behavior: 'smooth'
987
+ });
988
+
989
+ // Close mobile menu if open
990
+ mobileMenu.classList.add('hidden');
991
+ }
992
+ });
993
+ });
994
+ </script>
995
+ <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=mesy10/qr-menu-1" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
996
+ </html>