Hugging Face's logo

Spaces:
mesy10
/
qr-menu-1
Running

App Files Community
mesy10 commited on
Commit
7506d4f
·
verified ·
1 Parent(s): 2bd6d47

Treba da uradimo jednu web stranicu sa osnovnim informacijama za firmu koju ti pošaljem. irma se bavi uslužnim djelatnostima, digitalnim marketingom tačnije search arbitrazom, ali stranica treba da bude vrlo jednotavna samo da postoji i da imaj osnovne informacije. šta firma radi, kontakt i to je to. Adnera Advice Limited Adresse: Greenmount Industrial Estate, Office 4, Apex Building, Dublin, D12 FY56, Registernummer: 733992!Dizajn može biti elegantan i moderan. ne treba previše sekcija! - Follow Up Deployment

Browse files
Files changed (1) hide show
  1. index.html +223 -929
index.html CHANGED
@@ -3,986 +3,307 @@
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-pink-500 bg-opacity-10 p-4 rounded-full w-16 h-16 flex items-center justify-center">
296
- <i class="fas fa-camera text-pink-500 text-2xl"></i>
297
- </div>
298
- <h3 class="mt-6 text-xl font-bold">AI Photo Enhancement</h3>
299
- <p class="mt-3 text-gray-600">
300
- Transform smartphone photos into professional studio-quality images with our AI.
301
- </p>
302
- </div>
303
-
304
- <!-- Feature 7 -->
305
- <div class="feature-card bg-white rounded-xl shadow-lg p-8 transition duration-300">
306
- <div class="bg-green-500 bg-opacity-10 p-4 rounded-full w-16 h-16 flex items-center justify-center">
307
- <i class="fas fa-lock text-green-500 text-2xl"></i>
308
- </div>
309
- <h3 class="mt-6 text-xl font-bold">Secure & Reliable</h3>
310
- <p class="mt-3 text-gray-600">
311
- Enterprise-grade security and 99.9% uptime guarantee for your business.
312
- </p>
313
- </div>
314
- </div>
315
- </div>
316
- </section>
317
-
318
- <!-- Template Library Section -->
319
- <section class="py-20 bg-gray-50">
320
- <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
321
- <div class="text-center">
322
- <h2 class="text-3xl md:text-4xl font-heading font-bold">Over <span class="text-primary">100+ Professionally Designed Templates</span></h2>
323
- <p class="mt-4 text-xl text-gray-600 max-w-3xl mx-auto">
324
- We're one of the few offering specialized templates for every type of food service business.
325
- </p>
326
- </div>
327
-
328
- <div class="mt-16 grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-6">
329
- <!-- Template 1 -->
330
- <div class="bg-white rounded-xl shadow-md overflow-hidden">
331
- <div class="h-40 bg-gradient-to-r from-blue-100 to-indigo-100 flex items-center justify-center">
332
- <i class="fas fa-utensils text-4xl text-primary"></i>
333
- </div>
334
- <div class="p-4">
335
- <h3 class="font-bold text-center">Restaurants</h3>
336
- </div>
337
- </div>
338
-
339
- <!-- Template 2 -->
340
- <div class="bg-white rounded-xl shadow-md overflow-hidden">
341
- <div class="h-40 bg-gradient-to-r from-green-100 to-emerald-100 flex items-center justify-center">
342
- <i class="fas fa-coffee text-4xl text-secondary"></i>
343
- </div>
344
- <div class="p-4">
345
- <h3 class="font-bold text-center">Cafés</h3>
346
- </div>
347
- </div>
348
-
349
- <!-- Template 3 -->
350
- <div class="bg-white rounded-xl shadow-md overflow-hidden">
351
- <div class="h-40 bg-gradient-to-r from-yellow-100 to-amber-100 flex items-center justify-center">
352
- <i class="fas fa-beer text-4xl text-accent"></i>
353
- </div>
354
- <div class="p-4">
355
- <h3 class="font-bold text-center">Bars & Pubs</h3>
356
- </div>
357
- </div>
358
-
359
- <!-- Template 4 -->
360
- <div class="bg-white rounded-xl shadow-md overflow-hidden">
361
- <div class="h-40 bg-gradient-to-r from-red-100 to-pink-100 flex items-center justify-center">
362
- <i class="fas fa-pizza-slice text-4xl text-red-500"></i>
363
- </div>
364
- <div class="p-4">
365
- <h3 class="font-bold text-center">Pizzerias</h3>
366
- </div>
367
- </div>
368
-
369
- <!-- Template 5 -->
370
- <div class="bg-white rounded-xl shadow-md overflow-hidden">
371
- <div class="h-40 bg-gradient-to-r from-purple-100 to-fuchsia-100 flex items-center justify-center">
372
- <i class="fas fa-ice-cream text-4xl text-purple-500"></i>
373
- </div>
374
- <div class="p-4">
375
- <h3 class="font-bold text-center">Dessert Shops</h3>
376
- </div>
377
- </div>
378
- </div>
379
-
380
- <div class="mt-12 text-center">
381
- <a href="#" class="inline-flex items-center text-primary font-medium hover:underline">
382
- View all templates <i class="fas fa-arrow-right ml-2"></i>
383
- </a>
384
- </div>
385
- </div>
386
- </section>
387
-
388
- <!-- AI Photo Enhancement Section -->
389
- <section class="py-20 bg-gray-50">
390
- <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
391
- <div class="grid grid-cols-1 md:grid-cols-2 gap-12 items-center">
392
- <div class="flex justify-center">
393
- <div class="relative">
394
- <div class="grid grid-cols-2 gap-4">
395
- <div class="bg-white p-4 rounded-lg shadow-md">
396
- <img src="https://images.unsplash.com/photo-1546069901-ba9599a8e63c?w=500" alt="Before AI enhancement" class="rounded-lg">
397
- <p class="mt-2 text-center text-sm text-gray-600">Before AI</p>
398
  </div>
399
- <div class="bg-white p-4 rounded-lg shadow-md">
400
- <img src="https://images.unsplash.com/photo-1546069901-ba9599a8e63c?w=500" alt="After AI enhancement" class="rounded-lg filter brightness-110 contrast-110 saturate-110">
401
- <p class="mt-2 text-center text-sm text-gray-600">After AI</p>
402
  </div>
403
  </div>
404
- <div class="absolute -bottom-6 -right-6 bg-primary text-white px-4 py-2 rounded-lg shadow-lg">
405
- <p class="font-bold text-sm">One-Click Enhancement</p>
 
 
 
 
 
 
406
  </div>
407
  </div>
408
  </div>
409
- <div>
410
- <h2 class="text-3xl md:text-4xl font-heading font-bold">Professional Food Photos <span class="text-primary">Without the Studio</span></h2>
411
- <p class="mt-6 text-xl text-gray-600">
412
- Our AI automatically enhances your smartphone photos to look like they were taken by a professional food photographer.
413
- </p>
414
- <ul class="mt-8 space-y-3">
415
- <li class="flex items-start">
416
- <i class="fas fa-check-circle text-green-500 mt-1 mr-3"></i>
417
- <span class="text-gray-700">Automatically adjusts lighting, colors and composition</span>
418
- </li>
419
- <li class="flex items-start">
420
- <i class="fas fa-check-circle text-green-500 mt-1 mr-3"></i>
421
- <span class="text-gray-700">Removes distracting backgrounds</span>
422
- </li>
423
- <li class="flex items-start">
424
- <i class="fas fa-check-circle text-green-500 mt-1 mr-3"></i>
425
- <span class="text-gray-700">Applies professional food photography presets</span>
426
- </li>
427
- </ul>
428
- <div class="mt-8">
429
- <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">
430
- <i class="fas fa-magic mr-2"></i> Try AI Enhancement
431
- </a>
432
- </div>
433
- </div>
434
- </div>
435
- </div>
436
- </section>
437
-
438
- <!-- Translation Section -->
439
- <section class="py-20 bg-white">
440
- <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
441
- <div class="grid grid-cols-1 md:grid-cols-2 gap-12 items-center">
442
- <div class="order-2 md:order-1">
443
- <h2 class="text-3xl md:text-4xl font-heading font-bold">Translate to Any Language <span class="text-primary">With One Click</span></h2>
444
- <p class="mt-6 text-xl text-gray-600">
445
- Expand your customer base globally with our instant translation feature. Your menu can be available in any language instantly - no extra work needed!
446
- </p>
447
- <ul class="mt-8 space-y-3">
448
- <li class="flex items-start">
449
- <i class="fas fa-check-circle text-green-500 mt-1 mr-3"></i>
450
- <span class="text-gray-700">Automatic translations for 100+ languages</span>
451
- </li>
452
- <li class="flex items-start">
453
- <i class="fas fa-check-circle text-green-500 mt-1 mr-3"></i>
454
- <span class="text-gray-700">Professional human translations available</span>
455
- </li>
456
- <li class="flex items-start">
457
- <i class="fas fa-check-circle text-green-500 mt-1 mr-3"></i>
458
- <span class="text-gray-700">Customers see menu in their preferred language automatically</span>
459
- </li>
460
- </ul>
461
- <div class="mt-8">
462
- <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">
463
- <i class="fas fa-globe mr-2"></i> Try Translation Feature
464
- </a>
465
- </div>
466
- </div>
467
- <div class="order-1 md:order-2 flex justify-center">
468
- <div class="relative">
469
- <div class="bg-gray-100 rounded-2xl p-6 w-full max-w-md">
470
- <div class="flex justify-between items-center mb-6">
471
- <h3 class="font-bold text-lg">Select Languages</h3>
472
- <div class="bg-primary text-white text-xs px-2 py-1 rounded">Auto-translate</div>
473
- </div>
474
- <div class="space-y-4">
475
- <div class="flex items-center justify-between p-3 bg-white rounded-lg shadow-sm">
476
- <span>English</span>
477
- <i class="fas fa-check-circle text-green-500"></i>
478
- </div>
479
- <div class="flex items-center justify-between p-3 bg-white rounded-lg shadow-sm">
480
- <span>Spanish</span>
481
- <i class="fas fa-plus-circle text-gray-400"></i>
482
  </div>
483
- <div class="flex items-center justify-between p-3 bg-white rounded-lg shadow-sm">
484
- <span>French</span>
485
- <i class="fas fa-plus-circle text-gray-400"></i>
486
  </div>
487
- <div class="flex items-center justify-between p-3 bg-white rounded-lg shadow-sm">
488
- <span>German</span>
489
- <i class="fas fa-plus-circle text-gray-400"></i>
 
490
  </div>
491
- <div class="flex items-center justify-between p-3 bg-white rounded-lg shadow-sm">
492
- <span>Chinese</span>
493
- <i class="fas fa-plus-circle text-gray-400"></i>
494
  </div>
495
  </div>
496
- <div class="mt-6 text-center">
497
- <button class="text-primary text-sm font-medium">+ Add More Languages</button>
 
 
 
 
 
 
498
  </div>
499
  </div>
500
- <div class="absolute -bottom-6 -right-6 bg-secondary text-white px-4 py-2 rounded-lg shadow-lg">
501
- <p class="font-bold text-sm">100+ Languages Supported</p>
502
- </div>
503
  </div>
504
  </div>
505
  </div>
506
  </div>
507
  </section>
508
 
509
- <!-- How It Works Section -->
510
- <section id="how-it-works" class="py-20 gradient-bg">
511
- <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
512
- <div class="text-center">
513
- <h2 class="text-3xl md:text-4xl font-heading font-bold text-white">How MenuQR Works</h2>
514
- <p class="mt-4 text-xl text-indigo-100 max-w-3xl mx-auto">
515
- Simple setup, powerful results. Get started in just 3 easy steps.
516
- </p>
517
  </div>
518
-
519
- <div class="mt-16 grid grid-cols-1 md:grid-cols-3 gap-8">
520
- <!-- Step 1 -->
521
- <div class="bg-white rounded-xl shadow-lg p-8">
522
- <div class="flex justify-center">
523
- <div class="bg-primary text-white rounded-full w-12 h-12 flex items-center justify-center text-xl font-bold">1</div>
524
- </div>
525
- <h3 class="mt-6 text-xl font-bold text-center">Create Your Menu</h3>
526
- <p class="mt-3 text-gray-600 text-center">
527
- Use our intuitive editor to design your digital menu with photos, descriptions, and prices.
528
  </p>
529
- <div class="mt-6 flex justify-center">
530
- <div class="bg-gray-200 border-2 border-dashed rounded-xl w-48 h-48"></div>
531
- </div>
532
  </div>
533
-
534
- <!-- Step 2 -->
535
- <div class="bg-white rounded-xl shadow-lg p-8">
536
- <div class="flex justify-center">
537
- <div class="bg-primary text-white rounded-full w-12 h-12 flex items-center justify-center text-xl font-bold">2</div>
538
  </div>
539
- <h3 class="mt-6 text-xl font-bold text-center">Generate QR Codes</h3>
540
- <p class="mt-3 text-gray-600 text-center">
541
- Instantly generate printable QR codes to place on tables, menus, or promotional materials.
542
  </p>
543
- <div class="mt-6 flex justify-center">
544
- <div class="bg-gray-200 border-2 border-dashed rounded-xl w-48 h-48 flex items-center justify-center">
545
- <div class="grid grid-cols-3 gap-1">
546
- <div class="w-6 h-6 bg-primary rounded-sm"></div>
547
- <div class="w-6 h-6 bg-primary rounded-sm"></div>
548
- <div class="w-6 h-6 bg-primary rounded-sm"></div>
549
- <div class="w-6 h-6 bg-primary rounded-sm"></div>
550
- <div class="w-6 h-6 bg-white rounded-sm"></div>
551
- <div class="w-6 h-6 bg-primary rounded-sm"></div>
552
- <div class="w-6 h-6 bg-primary rounded-sm"></div>
553
- <div class="w-6 h-6 bg-white rounded-sm"></div>
554
- <div class="w-6 h-6 bg-primary rounded-sm"></div>
555
- </div>
556
- </div>
557
- </div>
558
  </div>
559
-
560
- <!-- Step 3 -->
561
- <div class="bg-white rounded-xl shadow-lg p-8">
562
- <div class="flex justify-center">
563
- <div class="bg-primary text-white rounded-full w-12 h-12 flex items-center justify-center text-xl font-bold">3</div>
564
  </div>
565
- <h3 class="mt-6 text-xl font-bold text-center">Engage Customers</h3>
566
- <p class="mt-3 text-gray-600 text-center">
567
- Customers scan QR codes to view your menu on their phones, browse items, and place orders.
568
  </p>
569
- <div class="mt-6 flex justify-center">
570
- <div class="bg-gray-200 border-2 border-dashed rounded-xl w-48 h-48"></div>
571
- </div>
572
  </div>
573
  </div>
574
-
575
- <div class="mt-16 text-center">
576
- <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">
577
- <i class="fas fa-rocket mr-2"></i> Start Your Free Trial
578
- </a>
579
- </div>
580
- </div>
581
- </section>
582
-
583
- <!-- Pricing Section -->
584
- <section id="pricing" class="py-20 bg-gray-50">
585
- <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
586
- <div class="text-center">
587
- <h2 class="text-3xl md:text-4xl font-heading font-bold">Simple, Transparent <span class="text-primary">Pricing</span></h2>
588
- <p class="mt-4 text-xl text-gray-600 max-w-3xl mx-auto">
589
- Choose the perfect plan for your restaurant. No hidden fees, cancel anytime.
590
- </p>
591
- </div>
592
-
593
- <div class="mt-12 flex justify-center">
594
- <div class="inline-flex rounded-md p-1 bg-gray-200">
595
- <button type="button" class="px-4 py-2 text-sm font-medium rounded-md bg-white text-primary shadow-sm monthly-btn">Monthly</button>
596
- <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>
597
- </div>
598
- </div>
599
-
600
- <div class="mt-16 grid grid-cols-1 md:grid-cols-3 gap-8">
601
- <!-- Starter Plan -->
602
- <div class="pricing-card bg-white rounded-xl shadow-lg overflow-hidden transition duration-300">
603
- <div class="p-8">
604
- <h3 class="text-2xl font-bold">Starter</h3>
605
- <p class="mt-2 text-gray-600">Perfect for small cafes and food trucks</p>
606
- <div class="mt-6">
607
- <span class="text-4xl font-bold">$19</span>
608
- <span class="text-gray-600">/month</span>
609
- </div>
610
- <ul class="mt-8 space-y-4">
611
- <li class="flex items-center">
612
- <i class="fas fa-check-circle text-green-500 mr-2"></i>
613
- <span>1 Menu</span>
614
- </li>
615
- <li class="flex items-center">
616
- <i class="fas fa-check-circle text-green-500 mr-2"></i>
617
- <span>Unlimited QR Codes</span>
618
- </li>
619
- <li class="flex items-center">
620
- <i class="fas fa-check-circle text-green-500 mr-2"></i>
621
- <span>Basic Analytics</span>
622
- </li>
623
- <li class="flex items-center text-gray-400">
624
- <i class="fas fa-times-circle mr-2"></i>
625
- <span>Multi-language Support</span>
626
- </li>
627
- <li class="flex items-center text-gray-400">
628
- <i class="fas fa-times-circle mr-2"></i>
629
- <span>Priority Support</span>
630
- </li>
631
- </ul>
632
- <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>
633
- </div>
634
- </div>
635
-
636
- <!-- Professional Plan -->
637
- <div class="pricing-card bg-white rounded-xl shadow-xl overflow-hidden border-2 border-primary relative transition duration-300">
638
- <div class="absolute top-0 right-0 bg-primary text-white px-4 py-1 rounded-bl-lg font-bold">
639
- Most Popular
640
- </div>
641
- <div class="p-8">
642
- <h3 class="text-2xl font-bold">Professional</h3>
643
- <p class="mt-2 text-gray-600">Ideal for restaurants and bars</p>
644
- <div class="mt-6">
645
- <span class="text-4xl font-bold">$49</span>
646
- <span class="text-gray-600">/month</span>
647
- </div>
648
- <ul class="mt-8 space-y-4">
649
- <li class="flex items-center">
650
- <i class="fas fa-check-circle text-green-500 mr-2"></i>
651
- <span>5 Menus</span>
652
- </li>
653
- <li class="flex items-center">
654
- <i class="fas fa-check-circle text-green-500 mr-2"></i>
655
- <span>Unlimited QR Codes</span>
656
- </li>
657
- <li class="flex items-center">
658
- <i class="fas fa-check-circle text-green-500 mr-2"></i>
659
- <span>Advanced Analytics</span>
660
- </li>
661
- <li class="flex items-center">
662
- <i class="fas fa-check-circle text-green-500 mr-2"></i>
663
- <span>Multi-language Support</span>
664
- </li>
665
- <li class="flex items-center">
666
- <i class="fas fa-check-circle text-green-500 mr-2"></i>
667
- <span>Priority Support</span>
668
- </li>
669
- </ul>
670
- <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>
671
- </div>
672
- </div>
673
-
674
- <!-- Enterprise Plan -->
675
- <div class="pricing-card bg-white rounded-xl shadow-lg overflow-hidden transition duration-300">
676
- <div class="p-8">
677
- <h3 class="text-2xl font-bold">Enterprise</h3>
678
- <p class="mt-2 text-gray-600">For chains and large venues</p>
679
- <div class="mt-6">
680
- <span class="text-4xl font-bold">$99</span>
681
- <span class="text-gray-600">/month</span>
682
- </div>
683
- <ul class="mt-8 space-y-4">
684
- <li class="flex items-center">
685
- <i class="fas fa-check-circle text-green-500 mr-2"></i>
686
- <span>Unlimited Menus</span>
687
- </li>
688
- <li class="flex items-center">
689
- <i class="fas fa-check-circle text-green-500 mr-2"></i>
690
- <span>Unlimited QR Codes</span>
691
- </li>
692
- <li class="flex items-center">
693
- <i class="fas fa-check-circle text-green-500 mr-2"></i>
694
- <span>Premium Analytics</span>
695
- </li>
696
- <li class="flex items-center">
697
- <i class="fas fa-check-circle text-green-500 mr-2"></i>
698
- <span>Multi-language Support</span>
699
- </li>
700
- <li class="flex items-center">
701
- <i class="fas fa-check-circle text-green-500 mr-2"></i>
702
- <span>24/7 Dedicated Support</span>
703
- </li>
704
- </ul>
705
- <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>
706
- </div>
707
- </div>
708
- </div>
709
-
710
- <div class="mt-12 text-center text-gray-600">
711
- <p>All plans include a 14-day free trial. No credit card required.</p>
712
- </div>
713
  </div>
714
  </section>
715
 
716
- <!-- Testimonials Section -->
717
- <section id="testimonials" class="py-20 bg-white">
718
- <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
719
- <div class="text-center">
720
- <h2 class="text-3xl md:text-4xl font-heading font-bold">Trusted by <span class="text-primary">Restaurants Worldwide</span></h2>
721
- <p class="mt-4 text-xl text-gray-600 max-w-3xl mx-auto">
722
- Hear from our satisfied customers who transformed their business with MenuQR.
723
- </p>
724
  </div>
725
-
726
- <div class="mt-16 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
727
- <!-- Testimonial 1 -->
728
- <div class="testimonial-card bg-gray-50 rounded-xl p-8">
729
- <div class="flex items-center">
730
- <img class="w-12 h-12 rounded-full" src="https://randomuser.me/api/portraits/women/32.jpg" alt="Sarah Johnson">
731
- <div class="ml-4">
732
- <h4 class="font-bold">Sarah Johnson</h4>
733
- <p class="text-gray-600">Owner, Bistro Cafe</p>
734
- </div>
735
- </div>
736
- <p class="mt-6 text-gray-700 italic">
737
- "Since implementing MenuQR, our customers love the convenience and our staff saves hours each week. Sales increased by 28% in the first month!"
738
  </p>
739
- <div class="mt-6 flex text-yellow-400">
740
- <i class="fas fa-star"></i>
741
- <i class="fas fa-star"></i>
742
- <i class="fas fa-star"></i>
743
- <i class="fas fa-star"></i>
744
- <i class="fas fa-star"></i>
745
- </div>
746
- </div>
747
-
748
- <!-- Testimonial 2 -->
749
- <div class="testimonial-card bg-gray-50 rounded-xl p-8">
750
- <div class="flex items-center">
751
- <img class="w-12 h-12 rounded-full" src="https://randomuser.me/api/portraits/men/54.jpg" alt="Michael Rodriguez">
752
- <div class="ml-4">
753
- <h4 class="font-bold">Michael Rodriguez</h4>
754
- <p class="text-gray-600">Manager, Urban Grill</p>
755
  </div>
756
- </div>
757
- <p class="mt-6 text-gray-700 italic">
758
- "The analytics feature alone is worth the price. We've optimized our menu based on customer engagement data, resulting in higher average order values."
759
- </p>
760
- <div class="mt-6 flex text-yellow-400">
761
- <i class="fas fa-star"></i>
762
- <i class="fas fa-star"></i>
763
- <i class="fas fa-star"></i>
764
- <i class="fas fa-star"></i>
765
- <i class="fas fa-star"></i>
766
- </div>
767
- </div>
768
-
769
- <!-- Testimonial 3 -->
770
- <div class="testimonial-card bg-gray-50 rounded-xl p-8">
771
- <div class="flex items-center">
772
- <img class="w-12 h-12 rounded-full" src="https://randomuser.me/api/portraits/women/68.jpg" alt="Jennifer Kim">
773
- <div class="ml-4">
774
- <h4 class="font-bold">Jennifer Kim</h4>
775
- <p class="text-gray-600">Owner, Sushi Haven</p>
776
  </div>
777
- </div>
778
- <p class="mt-6 text-gray-700 italic">
779
- "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."
780
- </p>
781
- <div class="mt-6 flex text-yellow-400">
782
- <i class="fas fa-star"></i>
783
- <i class="fas fa-star"></i>
784
- <i class="fas fa-star"></i>
785
- <i class="fas fa-star"></i>
786
- <i class="fas fa-star"></i>
787
- </div>
788
- </div>
789
- </div>
790
- </div>
791
- </section>
792
-
793
- <!-- FAQ Section -->
794
- <section id="faq" class="py-20 bg-gray-50">
795
- <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
796
- <div class="text-center">
797
- <h2 class="text-3xl md:text-4xl font-heading font-bold">Frequently Asked <span class="text-primary">Questions</span></h2>
798
- <p class="mt-4 text-xl text-gray-600 max-w-3xl mx-auto">
799
- Everything you need to know about MenuQR. Can't find an answer? Contact us.
800
- </p>
801
- </div>
802
-
803
- <div class="mt-16 space-y-6">
804
- <!-- FAQ 1 -->
805
- <div class="bg-white rounded-xl shadow-md overflow-hidden">
806
- <button class="faq-question w-full text-left p-6 font-bold text-lg flex justify-between items-center">
807
- <span>How long does it take to set up MenuQR?</span>
808
- <i class="fas fa-chevron-down"></i>
809
- </button>
810
- <div class="accordion-content">
811
- <div class="p-6 pt-0 text-gray-600">
812
- 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.
813
  </div>
814
  </div>
815
  </div>
816
-
817
- <!-- FAQ 2 -->
818
- <div class="bg-white rounded-xl shadow-md overflow-hidden">
819
- <button class="faq-question w-full text-left p-6 font-bold text-lg flex justify-between items-center">
820
- <span>Do customers need to download an app?</span>
821
- <i class="fas fa-chevron-down"></i>
822
- </button>
823
- <div class="accordion-content">
824
- <div class="p-6 pt-0 text-gray-600">
825
- 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.
826
  </div>
827
- </div>
828
- </div>
829
-
830
- <!-- FAQ 3 -->
831
- <div class="bg-white rounded-xl shadow-md overflow-hidden">
832
- <button class="faq-question w-full text-left p-6 font-bold text-lg flex justify-between items-center">
833
- <span>Can I update my menu after publishing?</span>
834
- <i class="fas fa-chevron-down"></i>
835
- </button>
836
- <div class="accordion-content">
837
- <div class="p-6 pt-0 text-gray-600">
838
- 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.
839
  </div>
840
- </div>
841
- </div>
842
-
843
- <!-- FAQ 4 -->
844
- <div class="bg-white rounded-xl shadow-md overflow-hidden">
845
- <button class="faq-question w-full text-left p-6 font-bold text-lg flex justify-between items-center">
846
- <span>What kind of analytics do you provide?</span>
847
- <i class="fas fa-chevron-down"></i>
848
- </button>
849
- <div class="accordion-content">
850
- <div class="p-6 pt-0 text-gray-600">
851
- 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.
852
  </div>
853
- </div>
854
- </div>
855
-
856
- <!-- FAQ 5 -->
857
- <div class="bg-white rounded-xl shadow-md overflow-hidden">
858
- <button class="faq-question w-full text-left p-6 font-bold text-lg flex justify-between items-center">
859
- <span>Is there a long-term contract?</span>
860
- <i class="fas fa-chevron-down"></i>
861
- </button>
862
- <div class="accordion-content">
863
- <div class="p-6 pt-0 text-gray-600">
864
- 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.
865
  </div>
866
- </div>
 
 
 
867
  </div>
868
  </div>
869
  </div>
870
  </section>
871
 
872
- <!-- CTA Section -->
873
- <section class="py-20 gradient-bg">
874
- <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
875
- <div class="bg-white rounded-3xl shadow-xl p-8 md:p-12">
876
- <div class="grid grid-cols-1 md:grid-cols-2 gap-12 items-center">
 
 
 
 
 
 
877
  <div>
878
- <h2 class="text-3xl md:text-4xl font-heading font-bold">Ready to Transform Your Restaurant?</h2>
879
- <p class="mt-4 text-xl text-gray-600">
880
- Join thousands of restaurants using MenuQR to enhance their customer experience and boost sales.
881
- </p>
882
- <div class="mt-8">
883
- <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">
884
- <i class="fas fa-play-circle mr-2"></i> Start Free Trial
885
- </a>
886
- </div>
887
  </div>
888
- <div class="flex justify-center">
889
- <div class="relative">
890
- <div class="bg-gray-200 border-2 border-dashed rounded-xl w-64 h-64 flex items-center justify-center">
891
- <div class="grid grid-cols-3 gap-1">
892
- <div class="w-6 h-6 bg-primary rounded-sm"></div>
893
- <div class="w-6 h-6 bg-primary rounded-sm"></div>
894
- <div class="w-6 h-6 bg-primary rounded-sm"></div>
895
- <div class="w-6 h-6 bg-primary rounded-sm"></div>
896
- <div class="w-6 h-6 bg-white rounded-sm"></div>
897
- <div class="w-6 h-6 bg-primary rounded-sm"></div>
898
- <div class="w-6 h-6 bg-primary rounded-sm"></div>
899
- <div class="w-6 h-6 bg-white rounded-sm"></div>
900
- <div class="w-6 h-6 bg-primary rounded-sm"></div>
901
- </div>
902
- </div>
903
- <div class="absolute -bottom-4 -right-4 bg-secondary text-white px-4 py-2 rounded-lg shadow-lg">
904
- <p class="font-bold">Scan to see demo</p>
905
- </div>
906
- </div>
907
  </div>
908
- </div>
909
- </div>
910
- </div>
911
- </section>
912
-
913
- <!-- Footer -->
914
- <footer class="bg-dark text-white py-16">
915
- <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
916
- <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-12">
917
- <div>
918
- <div class="flex items-center">
919
- <div class="bg-primary p-2 rounded-lg">
920
- <i class="fas fa-qrcode text-white text-2xl"></i>
921
  </div>
922
- <span class="ml-3 text-xl font-bold text-white">MenuQR</span>
923
- </div>
924
- <p class="mt-4 text-gray-400">
925
- Transforming restaurant experiences with modern digital menu solutions.
926
- </p>
927
- <div class="mt-6 flex space-x-4">
928
- <a href="#" class="text-gray-400 hover:text-white">
929
- <i class="fab fa-facebook-f"></i>
930
- </a>
931
- <a href="#" class="text-gray-400 hover:text-white">
932
- <i class="fab fa-twitter"></i>
933
- </a>
934
- <a href="#" class="text-gray-400 hover:text-white">
935
- <i class="fab fa-instagram"></i>
936
- </a>
937
- <a href="#" class="text-gray-400 hover:text-white">
938
- <i class="fab fa-linkedin-in"></i>
939
- </a>
940
  </div>
941
  </div>
942
-
943
- <div>
944
- <h3 class="text-lg font-bold mb-4">Product</h3>
945
- <ul class="space-y-2">
946
- <li><a href="#features" class="text-gray-400 hover:text-white transition">Features</a></li>
947
- <li><a href="#pricing" class="text-gray-400 hover:text-white transition">Pricing</a></li>
948
- <li><a href="#" class="text-gray-400 hover:text-white transition">Integrations</a></li>
949
- <li><a href="#" class="text-gray-400 hover:text-white transition">Updates</a></li>
950
- <li><a href="#" class="text-gray-400 hover:text-white transition">Demo</a></li>
951
- </ul>
952
- </div>
953
-
954
- <div>
955
- <h3 class="text-lg font-bold mb-4">Resources</h3>
956
- <ul class="space-y-2">
957
- <li><a href="#" class="text-gray-400 hover:text-white transition">Blog</a></li>
958
- <li><a href="#" class="text-gray-400 hover:text-white transition">Documentation</a></li>
959
- <li><a href="#" class="text-gray-400 hover:text-white transition">Guides</a></li>
960
- <li><a href="#" class="text-gray-400 hover:text-white transition">Help Center</a></li>
961
- <li><a href="#" class="text-gray-400 hover:text-white transition">API Status</a></li>
962
- </ul>
963
- </div>
964
-
965
- <div>
966
- <h3 class="text-lg font-bold mb-4">Contact</h3>
967
- <ul class="space-y-2">
968
- <li class="flex items-start">
969
- <i class="fas fa-map-marker-alt mt-1 text-gray-400 mr-3"></i>
970
- <span class="text-gray-400">123 Restaurant Blvd, Food City</span>
971
- </li>
972
- <li class="flex items-start">
973
- <i class="fas fa-phone mt-1 text-gray-400 mr-3"></i>
974
- <span class="text-gray-400">+1 (555) 123-4567</span>
975
- </li>
976
- <li class="flex items-start">
977
- <i class="fas fa-envelope mt-1 text-gray-400 mr-3"></i>
978
- <span class="text-gray-400">[email protected]</span>
979
- </li>
980
- </ul>
981
- </div>
982
  </div>
983
-
984
- <div class="mt-16 pt-8 border-t border-gray-800 text-center text-gray-400">
985
- <p>&copy; 2023 MenuQR. All rights reserved.</p>
986
  </div>
987
  </div>
988
  </footer>
@@ -996,51 +317,14 @@
996
  mobileMenu.classList.toggle('hidden');
997
  });
998
 
999
- // FAQ accordion
1000
- const faqQuestions = document.querySelectorAll('.faq-question');
1001
-
1002
- faqQuestions.forEach(question => {
1003
- question.addEventListener('click', () => {
1004
- const content = question.nextElementSibling;
1005
- const icon = question.querySelector('i');
1006
-
1007
- if (content.style.maxHeight) {
1008
- content.style.maxHeight = null;
1009
- icon.classList.remove('fa-chevron-up');
1010
- icon.classList.add('fa-chevron-down');
1011
- } else {
1012
- content.style.maxHeight = content.scrollHeight + "px";
1013
- icon.classList.remove('fa-chevron-down');
1014
- icon.classList.add('fa-chevron-up');
1015
- }
1016
- });
1017
- });
1018
-
1019
- // Pricing toggle
1020
- const monthlyBtn = document.querySelector('.monthly-btn');
1021
- const yearlyBtn = document.querySelector('.yearly-btn');
1022
-
1023
- monthlyBtn.addEventListener('click', () => {
1024
- monthlyBtn.classList.add('bg-white', 'text-primary', 'shadow-sm');
1025
- yearlyBtn.classList.remove('bg-white', 'text-primary', 'shadow-sm');
1026
- yearlyBtn.classList.add('text-gray-600', 'hover:text-primary');
1027
- });
1028
-
1029
- yearlyBtn.addEventListener('click', () => {
1030
- yearlyBtn.classList.add('bg-white', 'text-primary', 'shadow-sm');
1031
- monthlyBtn.classList.remove('bg-white', 'text-primary', 'shadow-sm');
1032
- monthlyBtn.classList.add('text-gray-600', 'hover:text-primary');
1033
- });
1034
-
1035
  // Smooth scrolling for anchor links
1036
  document.querySelectorAll('a[href^="#"]').forEach(anchor => {
1037
  anchor.addEventListener('click', function (e) {
1038
  e.preventDefault();
1039
 
1040
  const targetId = this.getAttribute('href');
1041
- if (targetId === '#') return;
1042
-
1043
  const targetElement = document.querySelector(targetId);
 
1044
  if (targetElement) {
1045
  window.scrollTo({
1046
  top: targetElement.offsetTop - 80,
@@ -1052,6 +336,16 @@
1052
  }
1053
  });
1054
  });
 
 
 
 
 
 
 
 
 
 
1055
  </script>
1056
  <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>
1057
  </html>
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Adnera Advice Limited - Digital Marketing Services</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
  .gradient-bg {
11
+ background: linear-gradient(135deg, #6b21a8 0%, #1e40af 100%);
 
 
 
12
  }
13
+ .hover-scale {
14
+ transition: transform 0.3s ease;
 
15
  }
16
+ .hover-scale:hover {
17
  transform: scale(1.03);
18
  }
19
+ .section-divider {
20
+ height: 100px;
21
+ background: linear-gradient(to bottom right, transparent 49%, white 50%), linear-gradient(to top right, white 49%, transparent 50%);
22
+ background-size: 50% 100%;
23
+ background-repeat: no-repeat;
24
+ background-position: left, right;
 
 
 
 
25
  }
26
+ @media (max-width: 768px) {
27
+ .section-divider {
28
+ height: 50px;
29
+ }
 
 
 
 
 
 
 
 
 
 
30
  }
31
  </style>
32
  </head>
33
+ <body class="font-sans antialiased text-gray-800">
34
  <!-- Navigation -->
35
+ <nav class="bg-white shadow-lg sticky top-0 z-50">
36
+ <div class="max-w-6xl mx-auto px-4">
37
+ <div class="flex justify-between items-center h-16">
38
  <div class="flex items-center">
39
+ <span class="text-xl font-bold text-purple-800">ADNERA</span>
 
 
 
 
 
 
 
 
 
 
 
 
40
  </div>
41
+ <div class="hidden md:flex space-x-8">
42
+ <a href="#about" class="text-gray-700 hover:text-purple-600 px-3 py-2 font-medium">About</a>
43
+ <a href="#services" class="text-gray-700 hover:text-purple-600 px-3 py-2 font-medium">Services</a>
44
+ <a href="#contact" class="text-gray-700 hover:text-purple-600 px-3 py-2 font-medium">Contact</a>
45
  </div>
46
+ <div class="md:hidden">
47
+ <button id="menu-btn" class="text-gray-700 focus:outline-none">
48
+ <i class="fas fa-bars text-xl"></i>
49
  </button>
50
  </div>
51
  </div>
52
  </div>
53
  <!-- Mobile menu -->
54
+ <div id="mobile-menu" class="hidden md:hidden bg-white pb-4 px-4">
55
+ <a href="#about" class="block px-3 py-2 text-gray-700 hover:text-purple-600 font-medium">About</a>
56
+ <a href="#services" class="block px-3 py-2 text-gray-700 hover:text-purple-600 font-medium">Services</a>
57
+ <a href="#contact" class="block px-3 py-2 text-gray-700 hover:text-purple-600 font-medium">Contact</a>
 
 
 
 
58
  </div>
59
  </nav>
60
 
61
  <!-- Hero Section -->
62
+ <section class="gradient-bg text-white">
63
+ <div class="max-w-6xl mx-auto px-4 py-24 md:py-32">
64
+ <div class="md:flex items-center">
65
+ <div class="md:w-1/2 mb-12 md:mb-0">
66
+ <h1 class="text-4xl md:text-5xl font-bold mb-6">Digital Marketing Excellence</h1>
67
+ <p class="text-xl md:text-2xl mb-8 opacity-90">Specializing in search arbitrage to maximize your digital presence and ROI.</p>
68
+ <a href="#contact" class="bg-white text-purple-800 hover:bg-gray-100 px-8 py-3 rounded-full font-semibold inline-block hover-scale transition-all duration-300">Get in Touch</a>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
69
  </div>
70
+ <div class="md:w-1/2 flex justify-center">
71
+ <img src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Digital Marketing" class="rounded-lg shadow-2xl max-w-full h-auto hover-scale" style="max-height: 400px;">
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
72
  </div>
73
  </div>
74
  </div>
75
  </section>
76
 
77
+ <!-- About Section -->
78
+ <section id="about" class="bg-white py-20">
79
+ <div class="max-w-6xl mx-auto px-4">
80
+ <div class="text-center mb-16">
81
+ <h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-4">About Adnera Advice</h2>
82
+ <div class="w-20 h-1 bg-purple-600 mx-auto"></div>
 
 
83
  </div>
84
+ <div class="md:flex items-center">
85
+ <div class="md:w-1/2 mb-12 md:mb-0 md:pr-12">
86
+ <h3 class="text-2xl font-semibold text-gray-800 mb-6">Our Company</h3>
87
+ <p class="text-gray-600 mb-6 leading-relaxed">
88
+ Adnera Advice Limited is a Dublin-based digital marketing firm specializing in search arbitrage services. We combine data-driven strategies with innovative approaches to help businesses maximize their online potential.
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
89
  </p>
90
+ <p class="text-gray-600 mb-6 leading-relaxed">
91
+ Registered in Ireland with company number 733992, we operate with transparency and professionalism to deliver exceptional results for our clients.
 
 
 
 
 
 
 
 
92
  </p>
93
+ <div class="bg-gray-50 p-6 rounded-lg">
94
+ <div class="flex items-start mb-4">
95
+ <div class="bg-purple-100 p-2 rounded-full mr-4">
96
+ <i class="fas fa-map-marker-alt text-purple-600"></i>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
97
  </div>
98
+ <div>
99
+ <h4 class="font-semibold text-gray-800">Our Address</h4>
100
+ <p class="text-gray-600">Greenmount Industrial Estate, Office 4, Apex Building, Dublin, D12 FY56, Ireland</p>
101
  </div>
102
  </div>
103
+ <div class="flex items-start">
104
+ <div class="bg-purple-100 p-2 rounded-full mr-4">
105
+ <i class="fas fa-id-card text-purple-600"></i>
106
+ </div>
107
+ <div>
108
+ <h4 class="font-semibold text-gray-800">Registration</h4>
109
+ <p class="text-gray-600">Company Number: 733992</p>
110
+ </div>
111
  </div>
112
  </div>
113
  </div>
114
+ <div class="md:w-1/2">
115
+ <div class="bg-gray-100 p-8 rounded-lg shadow-lg hover-scale">
116
+ <h3 class="text-2xl font-semibold text-gray-800 mb-6">Our Approach</h3>
117
+ <div class="space-y-6">
118
+ <div class="flex items-start">
119
+ <div class="bg-purple-600 text-white p-2 rounded-full mr-4">
120
+ <i class="fas fa-chart-line"></i>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
121
  </div>
122
+ <div>
123
+ <h4 class="font-semibold text-gray-800 mb-2">Data-Driven Strategies</h4>
124
+ <p class="text-gray-600">We analyze market trends and user behavior to create effective marketing campaigns.</p>
125
  </div>
126
+ </div>
127
+ <div class="flex items-start">
128
+ <div class="bg-purple-600 text-white p-2 rounded-full mr-4">
129
+ <i class="fas fa-lightbulb"></i>
130
  </div>
131
+ <div>
132
+ <h4 class="font-semibold text-gray-800 mb-2">Innovative Solutions</h4>
133
+ <p class="text-gray-600">Our team stays ahead of industry changes to implement cutting-edge techniques.</p>
134
  </div>
135
  </div>
136
+ <div class="flex items-start">
137
+ <div class="bg-purple-600 text-white p-2 rounded-full mr-4">
138
+ <i class="fas fa-shield-alt"></i>
139
+ </div>
140
+ <div>
141
+ <h4 class="font-semibold text-gray-800 mb-2">Ethical Practices</h4>
142
+ <p class="text-gray-600">We maintain the highest standards of compliance and transparency in all our operations.</p>
143
+ </div>
144
  </div>
145
  </div>
 
 
 
146
  </div>
147
  </div>
148
  </div>
149
  </div>
150
  </section>
151
 
152
+ <!-- Services Section -->
153
+ <section id="services" class="bg-gray-50 py-20">
154
+ <div class="section-divider"></div>
155
+ <div class="max-w-6xl mx-auto px-4">
156
+ <div class="text-center mb-16">
157
+ <h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-4">Our Services</h2>
158
+ <div class="w-20 h-1 bg-purple-600 mx-auto"></div>
 
159
  </div>
160
+ <div class="grid md:grid-cols-3 gap-8">
161
+ <div class="bg-white p-8 rounded-lg shadow-md hover-scale transition-all duration-300">
162
+ <div class="bg-purple-100 w-16 h-16 rounded-full flex items-center justify-center mb-6">
163
+ <i class="fas fa-search-dollar text-purple-600 text-2xl"></i>
164
+ </div>
165
+ <h3 class="text-xl font-semibold text-gray-800 mb-4">Search Arbitrage</h3>
166
+ <p class="text-gray-600">
167
+ Our core expertise lies in search arbitrage, optimizing the gap between paid search traffic and monetization to maximize your returns.
 
 
168
  </p>
 
 
 
169
  </div>
170
+ <div class="bg-white p-8 rounded-lg shadow-md hover-scale transition-all duration-300">
171
+ <div class="bg-purple-100 w-16 h-16 rounded-full flex items-center justify-center mb-6">
172
+ <i class="fas fa-ad text-purple-600 text-2xl"></i>
 
 
173
  </div>
174
+ <h3 class="text-xl font-semibold text-gray-800 mb-4">Digital Advertising</h3>
175
+ <p class="text-gray-600">
176
+ Strategic management of digital ad campaigns across platforms to ensure optimal reach and conversion rates.
177
  </p>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
178
  </div>
179
+ <div class="bg-white p-8 rounded-lg shadow-md hover-scale transition-all duration-300">
180
+ <div class="bg-purple-100 w-16 h-16 rounded-full flex items-center justify-center mb-6">
181
+ <i class="fas fa-chart-pie text-purple-600 text-2xl"></i>
 
 
182
  </div>
183
+ <h3 class="text-xl font-semibold text-gray-800 mb-4">Performance Analytics</h3>
184
+ <p class="text-gray-600">
185
+ Comprehensive tracking and analysis of campaign performance with actionable insights for continuous improvement.
186
  </p>
 
 
 
187
  </div>
188
  </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
189
  </div>
190
  </section>
191
 
192
+ <!-- Contact Section -->
193
+ <section id="contact" class="bg-white py-20">
194
+ <div class="section-divider" style="background: linear-gradient(to bottom right, transparent 49%, #f9fafb 50%), linear-gradient(to top right, #f9fafb 49%, transparent 50%);"></div>
195
+ <div class="max-w-6xl mx-auto px-4">
196
+ <div class="text-center mb-16">
197
+ <h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-4">Get In Touch</h2>
198
+ <div class="w-20 h-1 bg-purple-600 mx-auto"></div>
 
199
  </div>
200
+ <div class="md:flex">
201
+ <div class="md:w-1/2 mb-12 md:mb-0 md:pr-12">
202
+ <h3 class="text-2xl font-semibold text-gray-800 mb-6">Contact Information</h3>
203
+ <p class="text-gray-600 mb-8">
204
+ Reach out to us for inquiries about our digital marketing services or to discuss potential collaborations.
 
 
 
 
 
 
 
 
205
  </p>
206
+ <div class="space-y-6">
207
+ <div class="flex items-start">
208
+ <div class="bg-purple-100 p-3 rounded-full mr-4">
209
+ <i class="fas fa-map-marker-alt text-purple-600"></i>
210
+ </div>
211
+ <div>
212
+ <h4 class="font-semibold text-gray-800 mb-1">Address</h4>
213
+ <p class="text-gray-600">Greenmount Industrial Estate, Office 4, Apex Building, Dublin, D12 FY56, Ireland</p>
214
+ </div>
 
 
 
 
 
 
 
215
  </div>
216
+ <div class="flex items-start">
217
+ <div class="bg-purple-100 p-3 rounded-full mr-4">
218
+ <i class="fas fa-envelope text-purple-600"></i>
219
+ </div>
220
+ <div>
221
+ <h4 class="font-semibold text-gray-800 mb-1">Email</h4>
222
+ <p class="text-gray-600">[email protected]</p>
223
+ </div>
 
 
 
 
 
 
 
 
 
 
 
 
224
  </div>
225
+ <div class="flex items-start">
226
+ <div class="bg-purple-100 p-3 rounded-full mr-4">
227
+ <i class="fas fa-phone-alt text-purple-600"></i>
228
+ </div>
229
+ <div>
230
+ <h4 class="font-semibold text-gray-800 mb-1">Phone</h4>
231
+ <p class="text-gray-600">+353 1 123 4567</p>
232
+ </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
233
  </div>
234
  </div>
235
  </div>
236
+ <div class="md:w-1/2">
237
+ <form class="bg-gray-50 p-8 rounded-lg shadow-lg">
238
+ <div class="mb-6">
239
+ <label for="name" class="block text-gray-700 font-medium mb-2">Your Name</label>
240
+ <input type="text" id="name" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-600">
 
 
 
 
 
241
  </div>
242
+ <div class="mb-6">
243
+ <label for="email" class="block text-gray-700 font-medium mb-2">Email Address</label>
244
+ <input type="email" id="email" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-600">
 
 
 
 
 
 
 
 
 
245
  </div>
246
+ <div class="mb-6">
247
+ <label for="subject" class="block text-gray-700 font-medium mb-2">Subject</label>
248
+ <input type="text" id="subject" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-600">
 
 
 
 
 
 
 
 
 
249
  </div>
250
+ <div class="mb-6">
251
+ <label for="message" class="block text-gray-700 font-medium mb-2">Message</label>
252
+ <textarea id="message" rows="4" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-600"></textarea>
 
 
 
 
 
 
 
 
 
253
  </div>
254
+ <button type="submit" class="bg-purple-600 hover:bg-purple-700 text-white px-6 py-3 rounded-lg font-medium w-full transition duration-300">
255
+ Send Message
256
+ </button>
257
+ </form>
258
  </div>
259
  </div>
260
  </div>
261
  </section>
262
 
263
+ <!-- Footer -->
264
+ <footer class="bg-gray-900 text-white py-12">
265
+ <div class="max-w-6xl mx-auto px-4">
266
+ <div class="md:flex md:justify-between">
267
+ <div class="mb-8 md:mb-0">
268
+ <h3 class="text-xl font-bold mb-4">ADNERA ADVICE LIMITED</h3>
269
+ <p class="text-gray-400 max-w-xs">
270
+ Specializing in digital marketing and search arbitrage services to help businesses grow their online presence.
271
+ </p>
272
+ </div>
273
+ <div class="grid grid-cols-2 gap-8 md:grid-cols-3">
274
  <div>
275
+ <h4 class="text-lg font-semibold mb-4">Company</h4>
276
+ <ul class="space-y-2">
277
+ <li><a href="#about" class="text-gray-400 hover:text-white">About</a></li>
278
+ <li><a href="#services" class="text-gray-400 hover:text-white">Services</a></li>
279
+ <li><a href="#contact" class="text-gray-400 hover:text-white">Contact</a></li>
280
+ </ul>
 
 
 
281
  </div>
282
+ <div>
283
+ <h4 class="text-lg font-semibold mb-4">Legal</h4>
284
+ <ul class="space-y-2">
285
+ <li><a href="#" class="text-gray-400 hover:text-white">Privacy Policy</a></li>
286
+ <li><a href="#" class="text-gray-400 hover:text-white">Terms of Service</a></li>
287
+ </ul>
 
 
 
 
 
 
 
 
 
 
 
 
 
288
  </div>
289
+ <div>
290
+ <h4 class="text-lg font-semibold mb-4">Connect</h4>
291
+ <div class="flex space-x-4">
292
+ <a href="#" class="text-gray-400 hover:text-white">
293
+ <i class="fab fa-linkedin-in text-xl"></i>
294
+ </a>
295
+ <a href="#" class="text-gray-400 hover:text-white">
296
+ <i class="fab fa-twitter text-xl"></i>
297
+ </a>
298
+ <a href="#" class="text-gray-400 hover:text-white">
299
+ <i class="fab fa-facebook-f text-xl"></i>
300
+ </a>
 
301
  </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
302
  </div>
303
  </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
304
  </div>
305
+ <div class="border-t border-gray-800 mt-12 pt-8 text-center text-gray-400">
306
+ <p>&copy; 2023 Adnera Advice Limited. All rights reserved. Registered in Ireland No. 733992</p>
 
307
  </div>
308
  </div>
309
  </footer>
 
317
  mobileMenu.classList.toggle('hidden');
318
  });
319
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
320
  // Smooth scrolling for anchor links
321
  document.querySelectorAll('a[href^="#"]').forEach(anchor => {
322
  anchor.addEventListener('click', function (e) {
323
  e.preventDefault();
324
 
325
  const targetId = this.getAttribute('href');
 
 
326
  const targetElement = document.querySelector(targetId);
327
+
328
  if (targetElement) {
329
  window.scrollTo({
330
  top: targetElement.offsetTop - 80,
 
336
  }
337
  });
338
  });
339
+
340
+ // Form submission (basic example)
341
+ const contactForm = document.querySelector('form');
342
+ if (contactForm) {
343
+ contactForm.addEventListener('submit', (e) => {
344
+ e.preventDefault();
345
+ alert('Thank you for your message! We will get back to you soon.');
346
+ contactForm.reset();
347
+ });
348
+ }
349
  </script>
350
  <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>
351
  </html>