Spaces:
Running
Running
This platform is a premium online food and product marketplace that blends the elegance of a fine dining experience with the convenience of smart eCommerce. It’s designed for restaurants, cafés, and gourmet stores that want to showcase their menu and products in one beautiful, seamless environment. The website opens with a rich, visual homepage — a full-screen display of signature dishes, trending cuisines, and chef’s specials — along with a powerful smart search bar where users can instantly find meals, ingredients, or restaurants near them.
Browse filesEach restaurant or store listing appears in a clean, modern card layout with high-quality photos, real-time delivery times, cuisine tags, and customer ratings. When users click through, they’re taken to an immersive profile page featuring the restaurant’s story, menu, best-selling items, and exclusive offers. Menus are presented with mouth-watering visuals, ingredient highlights, dietary filters, and personalized recommendations such as “Popular in your area” or “Frequently ordered together.”
Customers can choose between delivery, takeaway, or dine-in booking in just one click. The checkout experience is designed to be effortless — users can add multiple items from different stores, pay securely using their preferred method, and track their order live with accurate real-time updates. Subtle animations, smooth transitions, and a calm color palette give the platform a feeling of refinement and trust.
For business owners, the management dashboard offers complete control and flexibility. Every feature — menu, delivery, table booking, shipping, discounts, loyalty programs — can be switched on or off depending on the business model. Owners can upload photos, update menus instantly, track live orders, manage staff roles, view daily sales analytics, and even run automatic marketing campaigns. The dashboard also includes detailed insights on customer behavior, popular dishes, and best-performing products.
Advanced technology powers the experience behind the scenes: an AI recommendation engine personalizes what each user sees, a live tracking map shows every order’s journey, and automated messages keep customers informed at every stage. The platform also supports voice ordering, subscription meal plans, and smart reordering for returning customers.
Every design detail is crafted for elegance — clean spacing, soft shadows, premium typography, and a color scheme that feels fresh and professional. The overall experience is fast, mobile-friendly, and completely responsive. From curated food discovery to real-time delivery and business management, this website delivers a complete, high-end digital dining and shopping experience that looks beautiful, works seamlessly, and feels truly premium.
- README.md +9 -5
- index.html +436 -18
- restaurant.html +208 -0
README.md
CHANGED
|
@@ -1,10 +1,14 @@
|
|
| 1 |
---
|
| 2 |
-
title:
|
| 3 |
-
|
| 4 |
-
|
| 5 |
-
|
| 6 |
sdk: static
|
| 7 |
pinned: false
|
|
|
|
|
|
|
| 8 |
---
|
| 9 |
|
| 10 |
-
|
|
|
|
|
|
|
|
|
| 1 |
---
|
| 2 |
+
title: undefined
|
| 3 |
+
colorFrom: purple
|
| 4 |
+
colorTo: blue
|
| 5 |
+
emoji: 🐳
|
| 6 |
sdk: static
|
| 7 |
pinned: false
|
| 8 |
+
tags:
|
| 9 |
+
- deepsite-v3
|
| 10 |
---
|
| 11 |
|
| 12 |
+
# Welcome to your new DeepSite project!
|
| 13 |
+
This project was created with [DeepSite](https://deepsite.hf.co).
|
| 14 |
+
|
index.html
CHANGED
|
@@ -1,19 +1,437 @@
|
|
| 1 |
-
<!
|
| 2 |
-
<html>
|
| 3 |
-
|
| 4 |
-
|
| 5 |
-
|
| 6 |
-
|
| 7 |
-
|
| 8 |
-
|
| 9 |
-
|
| 10 |
-
|
| 11 |
-
|
| 12 |
-
|
| 13 |
-
|
| 14 |
-
|
| 15 |
-
|
| 16 |
-
|
| 17 |
-
|
| 18 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 19 |
</html>
|
|
|
|
| 1 |
+
<!DOCTYPE html>
|
| 2 |
+
<html lang="en">
|
| 3 |
+
<head>
|
| 4 |
+
<meta charset="UTF-8">
|
| 5 |
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| 6 |
+
<title>GourmetGlide - Luxe Eats & Elite Treats</title>
|
| 7 |
+
<link rel="icon" type="image/x-icon" href="/static/favicon.ico">
|
| 8 |
+
<script src="https://cdn.tailwindcss.com"></script>
|
| 9 |
+
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
|
| 10 |
+
<script src="https://unpkg.com/feather-icons"></script>
|
| 11 |
+
<script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"></script>
|
| 12 |
+
<style>
|
| 13 |
+
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
|
| 14 |
+
body {
|
| 15 |
+
font-family: 'Poppins', sans-serif;
|
| 16 |
+
}
|
| 17 |
+
.hero-gradient {
|
| 18 |
+
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
| 19 |
+
}
|
| 20 |
+
.feature-card:hover {
|
| 21 |
+
transform: translateY(-5px);
|
| 22 |
+
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
|
| 23 |
+
}
|
| 24 |
+
.cta-button {
|
| 25 |
+
transition: all 0.3s ease;
|
| 26 |
+
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
| 27 |
+
}
|
| 28 |
+
.cta-button:hover {
|
| 29 |
+
transform: translateY(-2px);
|
| 30 |
+
box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
|
| 31 |
+
}
|
| 32 |
+
</style>
|
| 33 |
+
</head>
|
| 34 |
+
<body class="bg-gray-50">
|
| 35 |
+
<!-- Hero Section with Vanta.js Background -->
|
| 36 |
+
<div id="vanta-bg" class="hero-gradient relative overflow-hidden">
|
| 37 |
+
<div class="absolute inset-0 bg-black opacity-30"></div>
|
| 38 |
+
<div class="relative max-w-7xl mx-auto px-4 py-24 sm:px-6 lg:px-8">
|
| 39 |
+
<div class="text-center">
|
| 40 |
+
<h1 class="text-4xl md:text-6xl font-extrabold text-white tracking-tight">
|
| 41 |
+
Where Culinary Art <span class="text-yellow-300">Meets Digital Elegance</span>
|
| 42 |
+
</h1>
|
| 43 |
+
<p class="mt-6 max-w-lg mx-auto text-xl text-gray-100">
|
| 44 |
+
Discover, savor, and order from the finest restaurants and gourmet stores in one seamless experience.
|
| 45 |
+
</p>
|
| 46 |
+
<div class="mt-8 w-full max-w-md mx-auto">
|
| 47 |
+
<div class="relative">
|
| 48 |
+
<input type="text" placeholder="Search dishes, ingredients, or restaurants..."
|
| 49 |
+
class="w-full py-4 px-6 rounded-full focus:outline-none focus:ring-2 focus:ring-yellow-300">
|
| 50 |
+
<button class="absolute right-2 top-2 bg-yellow-400 hover:bg-yellow-500 text-gray-900 rounded-full p-2">
|
| 51 |
+
<i data-feather="search"></i>
|
| 52 |
+
</button>
|
| 53 |
+
</div>
|
| 54 |
+
</div>
|
| 55 |
+
<div class="mt-10 flex justify-center gap-4">
|
| 56 |
+
<a href="#" class="cta-button bg-white text-indigo-700 px-8 py-4 rounded-full font-semibold text-lg">
|
| 57 |
+
Get Started Free
|
| 58 |
+
</a>
|
| 59 |
+
<a href="#" class="cta-button bg-indigo-700 text-white px-8 py-4 rounded-full font-semibold text-lg border-2 border-white">
|
| 60 |
+
Live Demo
|
| 61 |
+
</a>
|
| 62 |
+
</div>
|
| 63 |
+
</div>
|
| 64 |
+
</div>
|
| 65 |
+
</div>
|
| 66 |
+
<!-- Featured Restaurants Section -->
|
| 67 |
+
<div class="py-16 bg-white">
|
| 68 |
+
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
| 69 |
+
<div class="text-center">
|
| 70 |
+
<h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl">
|
| 71 |
+
Curated Culinary Experiences
|
| 72 |
+
</h2>
|
| 73 |
+
<p class="mt-4 max-w-2xl text-xl text-gray-500 mx-auto">
|
| 74 |
+
Handpicked restaurants and gourmet stores delivering excellence
|
| 75 |
+
</p>
|
| 76 |
+
</div>
|
| 77 |
+
<div class="mt-12 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8">
|
| 78 |
+
<!-- Featured Restaurant 1 -->
|
| 79 |
+
<div class="bg-white rounded-xl shadow-lg overflow-hidden transition-transform hover:scale-105">
|
| 80 |
+
<div class="relative h-64">
|
| 81 |
+
<img src="http://static.photos/food/640x360/101" alt="Restaurant" class="w-full h-full object-cover">
|
| 82 |
+
<div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black to-transparent p-4">
|
| 83 |
+
<div class="flex justify-between items-end">
|
| 84 |
+
<div>
|
| 85 |
+
<h3 class="text-white font-bold text-xl">La Belle Époque</h3>
|
| 86 |
+
<p class="text-gray-200">French • $$</p>
|
| 87 |
+
</div>
|
| 88 |
+
<div class="flex items-center text-yellow-300">
|
| 89 |
+
<i data-feather="star" class="w-4 h-4 fill-current"></i>
|
| 90 |
+
<span class="ml-1">4.9</span>
|
| 91 |
+
</div>
|
| 92 |
+
</div>
|
| 93 |
+
</div>
|
| 94 |
+
</div>
|
| 95 |
+
<div class="p-4">
|
| 96 |
+
<p class="text-gray-600">25-35 min • $3.99 delivery</p>
|
| 97 |
+
</div>
|
| 98 |
+
</div>
|
| 99 |
+
|
| 100 |
+
<!-- Featured Restaurant 2 -->
|
| 101 |
+
<div class="bg-white rounded-xl shadow-lg overflow-hidden transition-transform hover:scale-105">
|
| 102 |
+
<div class="relative h-64">
|
| 103 |
+
<img src="http://static.photos/food/640x360/102" alt="Restaurant" class="w-full h-full object-cover">
|
| 104 |
+
<div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black to-transparent p-4">
|
| 105 |
+
<div class="flex justify-between items-end">
|
| 106 |
+
<div>
|
| 107 |
+
<h3 class="text-white font-bold text-xl">Sakura Sushi</h3>
|
| 108 |
+
<p class="text-gray-200">Japanese • $</p>
|
| 109 |
+
</div>
|
| 110 |
+
<div class="flex items-center text-yellow-300">
|
| 111 |
+
<i data-feather="star" class="w-4 h-4 fill-current"></i>
|
| 112 |
+
<span class="ml-1">4.7</span>
|
| 113 |
+
</div>
|
| 114 |
+
</div>
|
| 115 |
+
</div>
|
| 116 |
+
</div>
|
| 117 |
+
<div class="p-4">
|
| 118 |
+
<p class="text-gray-600">15-25 min • Free delivery</p>
|
| 119 |
+
</div>
|
| 120 |
+
</div>
|
| 121 |
+
|
| 122 |
+
<!-- Featured Restaurant 3 -->
|
| 123 |
+
<div class="bg-white rounded-xl shadow-lg overflow-hidden transition-transform hover:scale-105">
|
| 124 |
+
<div class="relative h-64">
|
| 125 |
+
<img src="http://static.photos/food/640x360/103" alt="Restaurant" class="w-full h-full object-cover">
|
| 126 |
+
<div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black to-transparent p-4">
|
| 127 |
+
<div class="flex justify-between items-end">
|
| 128 |
+
<div>
|
| 129 |
+
<h3 class="text-white font-bold text-xl">The Artisan Bakery</h3>
|
| 130 |
+
<p class="text-gray-200">Bakery • $</p>
|
| 131 |
+
</div>
|
| 132 |
+
<div class="flex items-center text-yellow-300">
|
| 133 |
+
<i data-feather="star" class="w-4 h-4 fill-current"></i>
|
| 134 |
+
<span class="ml-1">4.8</span>
|
| 135 |
+
</div>
|
| 136 |
+
</div>
|
| 137 |
+
</div>
|
| 138 |
+
</div>
|
| 139 |
+
<div class="p-4">
|
| 140 |
+
<p class="text-gray-600">10-20 min • $1.99 delivery</p>
|
| 141 |
+
</div>
|
| 142 |
+
</div>
|
| 143 |
+
</div>
|
| 144 |
+
<div class="mt-20 grid gap-8 md:grid-cols-2 lg:grid-cols-3">
|
| 145 |
+
<!-- Feature 1 -->
|
| 146 |
+
<div class="feature-card bg-white p-8 rounded-xl shadow-lg transition-all duration-300">
|
| 147 |
+
<div class="flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white">
|
| 148 |
+
<i data-feather="shopping-bag"></i>
|
| 149 |
+
</div>
|
| 150 |
+
<h3 class="mt-6 text-lg font-medium text-gray-900">Restaurant Mode</h3>
|
| 151 |
+
<p class="mt-2 text-base text-gray-500">
|
| 152 |
+
Digital menus, table booking, food delivery, live kitchen - everything for your food business.
|
| 153 |
+
</p>
|
| 154 |
+
</div>
|
| 155 |
+
|
| 156 |
+
<!-- Feature 2 -->
|
| 157 |
+
<div class="feature-card bg-white p-8 rounded-xl shadow-lg transition-all duration-300">
|
| 158 |
+
<div class="flex items-center justify-center h-12 w-12 rounded-md bg-purple-500 text-white">
|
| 159 |
+
<i data-feather="box"></i>
|
| 160 |
+
</div>
|
| 161 |
+
<h3 class="mt-6 text-lg font-medium text-gray-900">Store Mode</h3>
|
| 162 |
+
<p class="mt-2 text-base text-gray-500">
|
| 163 |
+
Product listings, inventory management, shipping integration, and easy returns.
|
| 164 |
+
</p>
|
| 165 |
+
</div>
|
| 166 |
+
|
| 167 |
+
<!-- Feature 3 -->
|
| 168 |
+
<div class="feature-card bg-white p-8 rounded-xl shadow-lg transition-all duration-300">
|
| 169 |
+
<div class="flex items-center justify-center h-12 w-12 rounded-md bg-pink-500 text-white">
|
| 170 |
+
<i data-feather="layers"></i>
|
| 171 |
+
</div>
|
| 172 |
+
<h3 class="mt-6 text-lg font-medium text-gray-900">Hybrid Mode</h3>
|
| 173 |
+
<p class="mt-2 text-base text-gray-500">
|
| 174 |
+
Combine both! Sell food and products together with unified cart and checkout.
|
| 175 |
+
</p>
|
| 176 |
+
</div>
|
| 177 |
+
|
| 178 |
+
<!-- Feature 4 -->
|
| 179 |
+
<div class="feature-card bg-white p-8 rounded-xl shadow-lg transition-all duration-300">
|
| 180 |
+
<div class="flex items-center justify-center h-12 w-12 rounded-md bg-blue-500 text-white">
|
| 181 |
+
<i data-feather="bar-chart-2"></i>
|
| 182 |
+
</div>
|
| 183 |
+
<h3 class="mt-6 text-lg font-medium text-gray-900">Smart Dashboard</h3>
|
| 184 |
+
<p class="mt-2 text-base text-gray-500">
|
| 185 |
+
Real-time analytics, sales tracking, and AI-powered business insights.
|
| 186 |
+
</p>
|
| 187 |
+
</div>
|
| 188 |
+
|
| 189 |
+
<!-- Feature 5 -->
|
| 190 |
+
<div class="feature-card bg-white p-8 rounded-xl shadow-lg transition-all duration-300">
|
| 191 |
+
<div class="flex items-center justify-center h-12 w-12 rounded-md bg-green-500 text-white">
|
| 192 |
+
<i data-feather="truck"></i>
|
| 193 |
+
</div>
|
| 194 |
+
<h3 class="mt-6 text-lg font-medium text-gray-900">Delivery Network</h3>
|
| 195 |
+
<p class="mt-2 text-base text-gray-500">
|
| 196 |
+
Integrated with multiple couriers or use your own delivery fleet with live tracking.
|
| 197 |
+
</p>
|
| 198 |
+
</div>
|
| 199 |
+
|
| 200 |
+
<!-- Feature 6 -->
|
| 201 |
+
<div class="feature-card bg-white p-8 rounded-xl shadow-lg transition-all duration-300">
|
| 202 |
+
<div class="flex items-center justify-center h-12 w-12 rounded-md bg-yellow-500 text-white">
|
| 203 |
+
<i data-feather="smartphone"></i>
|
| 204 |
+
</div>
|
| 205 |
+
<h3 class="mt-6 text-lg font-medium text-gray-900">Mobile Ready</h3>
|
| 206 |
+
<p class="mt-2 text-base text-gray-500">
|
| 207 |
+
Progressive web app that works like a native app on any device.
|
| 208 |
+
</p>
|
| 209 |
+
</div>
|
| 210 |
+
</div>
|
| 211 |
+
</div>
|
| 212 |
+
</div>
|
| 213 |
+
|
| 214 |
+
<!-- How It Works Section -->
|
| 215 |
+
<div class="py-16 bg-gray-50">
|
| 216 |
+
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
| 217 |
+
<div class="lg:text-center">
|
| 218 |
+
<h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl">
|
| 219 |
+
How OmniBiz Works
|
| 220 |
+
</h2>
|
| 221 |
+
<p class="mt-4 max-w-2xl text-xl text-gray-500 lg:mx-auto">
|
| 222 |
+
Get your business online in just 3 simple steps
|
| 223 |
+
</p>
|
| 224 |
+
</div>
|
| 225 |
+
|
| 226 |
+
<div class="mt-20">
|
| 227 |
+
<div class="flex flex-col md:flex-row items-center justify-between gap-8">
|
| 228 |
+
<!-- Step 1 -->
|
| 229 |
+
<div class="flex flex-col items-center text-center max-w-xs">
|
| 230 |
+
<div class="flex items-center justify-center h-16 w-16 rounded-full bg-indigo-100 text-indigo-700 font-bold text-xl">
|
| 231 |
+
1
|
| 232 |
+
</div>
|
| 233 |
+
<h3 class="mt-4 text-lg font-medium text-gray-900">Choose Your Mode</h3>
|
| 234 |
+
<p class="mt-2 text-base text-gray-500">
|
| 235 |
+
Select restaurant, store, or hybrid based on your business type.
|
| 236 |
+
</p>
|
| 237 |
+
</div>
|
| 238 |
+
|
| 239 |
+
<!-- Arrow -->
|
| 240 |
+
<div class="hidden md:block rotate-90 md:rotate-0">
|
| 241 |
+
<i data-feather="arrow-right" class="text-gray-400 w-8 h-8"></i>
|
| 242 |
+
</div>
|
| 243 |
+
|
| 244 |
+
<!-- Step 2 -->
|
| 245 |
+
<div class="flex flex-col items-center text-center max-w-xs">
|
| 246 |
+
<div class="flex items-center justify-center h-16 w-16 rounded-full bg-purple-100 text-purple-700 font-bold text-xl">
|
| 247 |
+
2
|
| 248 |
+
</div>
|
| 249 |
+
<h3 class="mt-4 text-lg font-medium text-gray-900">Setup Your Content</h3>
|
| 250 |
+
<p class="mt-2 text-base text-gray-500">
|
| 251 |
+
Add your menu, products, or both with our easy-to-use dashboard.
|
| 252 |
+
</p>
|
| 253 |
+
</div>
|
| 254 |
+
|
| 255 |
+
<!-- Arrow -->
|
| 256 |
+
<div class="hidden md:block rotate-90 md:rotate-0">
|
| 257 |
+
<i data-feather="arrow-right" class="text-gray-400 w-8 h-8"></i>
|
| 258 |
+
</div>
|
| 259 |
+
|
| 260 |
+
<!-- Step 3 -->
|
| 261 |
+
<div class="flex flex-col items-center text-center max-w-xs">
|
| 262 |
+
<div class="flex items-center justify-center h-16 w-16 rounded-full bg-pink-100 text-pink-700 font-bold text-xl">
|
| 263 |
+
3
|
| 264 |
+
</div>
|
| 265 |
+
<h3 class="mt-4 text-lg font-medium text-gray-900">Go Live!</h3>
|
| 266 |
+
<p class="mt-2 text-base text-gray-500">
|
| 267 |
+
Launch your business and start accepting orders immediately.
|
| 268 |
+
</p>
|
| 269 |
+
</div>
|
| 270 |
+
</div>
|
| 271 |
+
</div>
|
| 272 |
+
</div>
|
| 273 |
+
</div>
|
| 274 |
+
|
| 275 |
+
<!-- Testimonial Section -->
|
| 276 |
+
<div class="py-16 bg-indigo-700 text-white">
|
| 277 |
+
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
| 278 |
+
<div class="text-center">
|
| 279 |
+
<h2 class="text-3xl font-extrabold sm:text-4xl">
|
| 280 |
+
Loved by Businesses Worldwide
|
| 281 |
+
</h2>
|
| 282 |
+
</div>
|
| 283 |
+
|
| 284 |
+
<div class="mt-16 grid gap-8 md:grid-cols-2 lg:grid-cols-3">
|
| 285 |
+
<!-- Testimonial 1 -->
|
| 286 |
+
<div class="bg-white bg-opacity-10 p-8 rounded-xl">
|
| 287 |
+
<div class="flex items-center">
|
| 288 |
+
<img class="h-12 w-12 rounded-full" src="http://static.photos/people/200x200/1" alt="Testimonial">
|
| 289 |
+
<div class="ml-4">
|
| 290 |
+
<h4 class="text-lg font-medium">Sarah Johnson</h4>
|
| 291 |
+
<p class="text-indigo-200">Café Owner</p>
|
| 292 |
+
</div>
|
| 293 |
+
</div>
|
| 294 |
+
<p class="mt-4">
|
| 295 |
+
"OmniBiz transformed my small café into a digital powerhouse. Online orders increased by 300%!"
|
| 296 |
+
</p>
|
| 297 |
+
</div>
|
| 298 |
+
|
| 299 |
+
<!-- Testimonial 2 -->
|
| 300 |
+
<div class="bg-white bg-opacity-10 p-8 rounded-xl">
|
| 301 |
+
<div class="flex items-center">
|
| 302 |
+
<img class="h-12 w-12 rounded-full" src="http://static.photos/people/200x200/2" alt="Testimonial">
|
| 303 |
+
<div class="ml-4">
|
| 304 |
+
<h4 class="text-lg font-medium">Raj Patel</h4>
|
| 305 |
+
<p class="text-indigo-200">Retail Store Owner</p>
|
| 306 |
+
</div>
|
| 307 |
+
</div>
|
| 308 |
+
<p class="mt-4">
|
| 309 |
+
"The hybrid mode lets me sell both my products and homemade snacks seamlessly."
|
| 310 |
+
</p>
|
| 311 |
+
</div>
|
| 312 |
+
|
| 313 |
+
<!-- Testimonial 3 -->
|
| 314 |
+
<div class="bg-white bg-opacity-10 p-8 rounded-xl">
|
| 315 |
+
<div class="flex items-center">
|
| 316 |
+
<img class="h-12 w-12 rounded-full" src="http://static.photos/people/200x200/3" alt="Testimonial">
|
| 317 |
+
<div class="ml-4">
|
| 318 |
+
<h4 class="text-lg font-medium">Miguel Rodriguez</h4>
|
| 319 |
+
<p class="text-indigo-200">Restaurant Chain Manager</p>
|
| 320 |
+
</div>
|
| 321 |
+
</div>
|
| 322 |
+
<p class="mt-4">
|
| 323 |
+
"The analytics dashboard gives me insights I never had before. Game changer!"
|
| 324 |
+
</p>
|
| 325 |
+
</div>
|
| 326 |
+
</div>
|
| 327 |
+
</div>
|
| 328 |
+
</div>
|
| 329 |
+
<!-- CTA Section -->
|
| 330 |
+
<div class="py-16 bg-gray-900 text-white">
|
| 331 |
+
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
| 332 |
+
<div class="text-center">
|
| 333 |
+
<h2 class="text-3xl font-extrabold sm:text-4xl">
|
| 334 |
+
Elevate Your Dining Experience
|
| 335 |
+
</h2>
|
| 336 |
+
<p class="mt-4 max-w-2xl text-xl text-gray-300 mx-auto">
|
| 337 |
+
Download our app for exclusive chef's table experiences and premium features
|
| 338 |
+
</p>
|
| 339 |
+
<div class="mt-8 flex justify-center gap-4">
|
| 340 |
+
<a href="#" class="flex items-center bg-black text-white px-6 py-3 rounded-lg">
|
| 341 |
+
<i data-feather="apple" class="w-6 h-6 mr-2"></i>
|
| 342 |
+
<div class="text-left">
|
| 343 |
+
<div class="text-xs">Download on the</div>
|
| 344 |
+
<div class="text-lg font-semibold">App Store</div>
|
| 345 |
+
</div>
|
| 346 |
+
</a>
|
| 347 |
+
<a href="#" class="flex items-center bg-black text-white px-6 py-3 rounded-lg">
|
| 348 |
+
<i data-feather="play" class="w-6 h-6 mr-2"></i>
|
| 349 |
+
<div class="text-left">
|
| 350 |
+
<div class="text-xs">Get it on</div>
|
| 351 |
+
<div class="text-lg font-semibold">Google Play</div>
|
| 352 |
+
</div>
|
| 353 |
+
</a>
|
| 354 |
+
</div>
|
| 355 |
+
</div>
|
| 356 |
+
</div>
|
| 357 |
+
</div>
|
| 358 |
+
<!-- Footer -->
|
| 359 |
+
<footer class="bg-gray-800 text-gray-300">
|
| 360 |
+
<div class="max-w-7xl mx-auto px-4 py-12 sm:px-6 lg:px-8">
|
| 361 |
+
<div class="grid grid-cols-2 md:grid-cols-4 gap-8">
|
| 362 |
+
<!-- Column 1 -->
|
| 363 |
+
<div>
|
| 364 |
+
<h3 class="text-white font-semibold">Product</h3>
|
| 365 |
+
<ul class="mt-4 space-y-2">
|
| 366 |
+
<li><a href="#" class="hover:text-white">Features</a></li>
|
| 367 |
+
<li><a href="#" class="hover:text-white">Pricing</a></li>
|
| 368 |
+
<li><a href="#" class="hover:text-white">Demo</a></li>
|
| 369 |
+
<li><a href="#" class="hover:text-white">Updates</a></li>
|
| 370 |
+
</ul>
|
| 371 |
+
</div>
|
| 372 |
+
|
| 373 |
+
<!-- Column 2 -->
|
| 374 |
+
<div>
|
| 375 |
+
<h3 class="text-white font-semibold">Resources</h3>
|
| 376 |
+
<ul class="mt-4 space-y-2">
|
| 377 |
+
<li><a href="#" class="hover:text-white">Documentation</a></li>
|
| 378 |
+
<li><a href="#" class="hover:text-white">Guides</a></li>
|
| 379 |
+
<li><a href="#" class="hover:text-white">Blog</a></li>
|
| 380 |
+
<li><a href="#" class="hover:text-white">Support</a></li>
|
| 381 |
+
</ul>
|
| 382 |
+
</div>
|
| 383 |
+
|
| 384 |
+
<!-- Column 3 -->
|
| 385 |
+
<div>
|
| 386 |
+
<h3 class="text-white font-semibold">Company</h3>
|
| 387 |
+
<ul class="mt-4 space-y-2">
|
| 388 |
+
<li><a href="#" class="hover:text-white">About</a></li>
|
| 389 |
+
<li><a href="#" class="hover:text-white">Careers</a></li>
|
| 390 |
+
<li><a href="#" class="hover:text-white">Privacy</a></li>
|
| 391 |
+
<li><a href="#" class="hover:text-white">Terms</a></li>
|
| 392 |
+
</ul>
|
| 393 |
+
</div>
|
| 394 |
+
|
| 395 |
+
<!-- Column 4 -->
|
| 396 |
+
<div>
|
| 397 |
+
<h3 class="text-white font-semibold">Connect</h3>
|
| 398 |
+
<ul class="mt-4 space-y-2">
|
| 399 |
+
<li><a href="#" class="hover:text-white">Twitter</a></li>
|
| 400 |
+
<li><a href="#" class="hover:text-white">Facebook</a></li>
|
| 401 |
+
<li><a href="#" class="hover:text-white">Instagram</a></li>
|
| 402 |
+
<li><a href="#" class="hover:text-white">LinkedIn</a></li>
|
| 403 |
+
</ul>
|
| 404 |
+
</div>
|
| 405 |
+
</div>
|
| 406 |
+
<div class="mt-12 pt-8 border-t border-gray-700 flex flex-col md:flex-row justify-between items-center">
|
| 407 |
+
<div class="flex items-center space-x-4">
|
| 408 |
+
<i data-feather="mail" class="w-5 h-5"></i>
|
| 409 |
+
<span>concierge@gourmetglide.com</span>
|
| 410 |
+
</div>
|
| 411 |
+
<div class="mt-4 md:mt-0">
|
| 412 |
+
<p>© 2023 GourmetGlide. All rights reserved.</p>
|
| 413 |
+
</div>
|
| 414 |
+
</div>
|
| 415 |
+
</div>
|
| 416 |
+
</footer>
|
| 417 |
+
|
| 418 |
+
<script>
|
| 419 |
+
// Initialize Vanta.js globe background
|
| 420 |
+
VANTA.GLOBE({
|
| 421 |
+
el: "#vanta-bg",
|
| 422 |
+
mouseControls: true,
|
| 423 |
+
touchControls: true,
|
| 424 |
+
gyroControls: false,
|
| 425 |
+
minHeight: 200.00,
|
| 426 |
+
minWidth: 200.00,
|
| 427 |
+
scale: 1.00,
|
| 428 |
+
scaleMobile: 1.00,
|
| 429 |
+
color: 0x5b6df1,
|
| 430 |
+
backgroundColor: 0x0
|
| 431 |
+
});
|
| 432 |
+
|
| 433 |
+
// Initialize Feather Icons
|
| 434 |
+
feather.replace();
|
| 435 |
+
</script>
|
| 436 |
+
</body>
|
| 437 |
</html>
|
restaurant.html
ADDED
|
@@ -0,0 +1,208 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
<!DOCTYPE html>
|
| 2 |
+
<html lang="en">
|
| 3 |
+
<head>
|
| 4 |
+
<meta charset="UTF-8">
|
| 5 |
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| 6 |
+
<title>Restaurant Profile | GourmetGlide</title>
|
| 7 |
+
<link rel="icon" type="image/x-icon" href="/static/favicon.ico">
|
| 8 |
+
<script src="https://cdn.tailwindcss.com"></script>
|
| 9 |
+
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
|
| 10 |
+
<style>
|
| 11 |
+
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700&family=Poppins:wght@300;400;500;600&display=swap');
|
| 12 |
+
body {
|
| 13 |
+
font-family: 'Poppins', sans-serif;
|
| 14 |
+
}
|
| 15 |
+
.font-serif {
|
| 16 |
+
font-family: 'Playfair Display', serif;
|
| 17 |
+
}
|
| 18 |
+
.menu-item:hover .menu-item-img {
|
| 19 |
+
transform: scale(1.05);
|
| 20 |
+
}
|
| 21 |
+
.dietary-tag {
|
| 22 |
+
@apply px-2 py-1 text-xs rounded-full;
|
| 23 |
+
}
|
| 24 |
+
</style>
|
| 25 |
+
</head>
|
| 26 |
+
<body class="bg-gray-50">
|
| 27 |
+
<!-- Restaurant Header -->
|
| 28 |
+
<div class="relative h-96 overflow-hidden">
|
| 29 |
+
<img src="http://static.photos/restaurant/1200x630/1" alt="Restaurant" class="w-full h-full object-cover">
|
| 30 |
+
<div class="absolute inset-0 bg-black bg-opacity-40"></div>
|
| 31 |
+
<div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black to-transparent pt-16 pb-8 px-8">
|
| 32 |
+
<div class="max-w-6xl mx-auto">
|
| 33 |
+
<h1 class="font-serif text-4xl md:text-6xl font-bold text-white">La Belle Époque</h1>
|
| 34 |
+
<div class="flex items-center mt-4 text-white">
|
| 35 |
+
<div class="flex items-center text-yellow-300">
|
| 36 |
+
<i data-feather="star" class="w-5 h-5 fill-current"></i>
|
| 37 |
+
<span class="ml-1 text-lg">4.9</span>
|
| 38 |
+
<span class="mx-2">•</span>
|
| 39 |
+
</div>
|
| 40 |
+
<span>French • $$$ • 2.3 miles away</span>
|
| 41 |
+
</div>
|
| 42 |
+
<div class="mt-6 flex flex-wrap gap-3">
|
| 43 |
+
<span class="bg-white bg-opacity-20 text-white px-3 py-1 rounded-full text-sm">Fine Dining</span>
|
| 44 |
+
<span class="bg-white bg-opacity-20 text-white px-3 py-1 rounded-full text-sm">Romantic</span>
|
| 45 |
+
<span class="bg-white bg-opacity-20 text-white px-3 py-1 rounded-full text-sm">Wine Pairings</span>
|
| 46 |
+
</div>
|
| 47 |
+
</div>
|
| 48 |
+
</div>
|
| 49 |
+
</div>
|
| 50 |
+
|
| 51 |
+
<!-- Restaurant Navigation -->
|
| 52 |
+
<div class="bg-white shadow-sm sticky top-0 z-10">
|
| 53 |
+
<div class="max-w-6xl mx-auto">
|
| 54 |
+
<div class="flex overflow-x-auto">
|
| 55 |
+
<a href="#" class="px-6 py-4 font-medium text-gray-900 border-b-2 border-yellow-400">Menu</a>
|
| 56 |
+
<a href="#" class="px-6 py-4 font-medium text-gray-500 hover:text-gray-900">About</a>
|
| 57 |
+
<a href="#" class="px-6 py-4 font-medium text-gray-500 hover:text-gray-900">Reviews</a>
|
| 58 |
+
<a href="#" class="px-6 py-4 font-medium text-gray-500 hover:text-gray-900">Photos</a>
|
| 59 |
+
</div>
|
| 60 |
+
</div>
|
| 61 |
+
</div>
|
| 62 |
+
|
| 63 |
+
<!-- Restaurant Content -->
|
| 64 |
+
<div class="max-w-6xl mx-auto px-4 py-8">
|
| 65 |
+
<div class="flex flex-col md:flex-row gap-8">
|
| 66 |
+
<!-- Main Content -->
|
| 67 |
+
<div class="md:w-2/3">
|
| 68 |
+
<!-- Featured Items -->
|
| 69 |
+
<div class="mb-12">
|
| 70 |
+
<h2 class="font-serif text-3xl font-bold mb-6">Chef's Specialties</h2>
|
| 71 |
+
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
| 72 |
+
<!-- Featured Item 1 -->
|
| 73 |
+
<div class="bg-white rounded-xl shadow-md overflow-hidden">
|
| 74 |
+
<div class="relative h-48 overflow-hidden">
|
| 75 |
+
<img src="http://static.photos/food/640x360/201" alt="Dish" class="menu-item-img w-full h-full object-cover transition-transform duration-300">
|
| 76 |
+
</div>
|
| 77 |
+
<div class="p-4">
|
| 78 |
+
<div class="flex justify-between items-start">
|
| 79 |
+
<h3 class="font-bold text-lg">Duck Confit</h3>
|
| 80 |
+
<span class="font-bold text-gray-900">$32</span>
|
| 81 |
+
</div>
|
| 82 |
+
<p class="mt-2 text-gray-600">Slow-cooked duck leg with garlic potatoes and cherry reduction</p>
|
| 83 |
+
<div class="mt-3 flex flex-wrap gap-2">
|
| 84 |
+
<span class="dietary-tag bg-green-100 text-green-800">Gluten Free</span>
|
| 85 |
+
</div>
|
| 86 |
+
</div>
|
| 87 |
+
</div>
|
| 88 |
+
|
| 89 |
+
<!-- Featured Item 2 -->
|
| 90 |
+
<div class="bg-white rounded-xl shadow-md overflow-hidden">
|
| 91 |
+
<div class="relative h-48 overflow-hidden">
|
| 92 |
+
<img src="http://static.photos/food/640x360/202" alt="Dish" class="menu-item-img w-full h-full object-cover transition-transform duration-300">
|
| 93 |
+
</div>
|
| 94 |
+
<div class="p-4">
|
| 95 |
+
<div class="flex justify-between items-start">
|
| 96 |
+
<h3 class="font-bold text-lg">Bouillabaisse</h3>
|
| 97 |
+
<span class="font-bold text-gray-900">$38</span>
|
| 98 |
+
</div>
|
| 99 |
+
<p class="mt-2 text-gray-600">Traditional Provençal fish stew with rouille and croutons</p>
|
| 100 |
+
<div class="mt-3 flex flex-wrap gap-2">
|
| 101 |
+
<span class="dietary-tag bg-blue-100 text-blue-800">Pescatarian</span>
|
| 102 |
+
</div>
|
| 103 |
+
</div>
|
| 104 |
+
</div>
|
| 105 |
+
</div>
|
| 106 |
+
</div>
|
| 107 |
+
|
| 108 |
+
<!-- Menu Sections -->
|
| 109 |
+
<div>
|
| 110 |
+
<h2 class="font-serif text-3xl font-bold mb-6">Menu</h2>
|
| 111 |
+
|
| 112 |
+
<!-- Starters -->
|
| 113 |
+
<div class="mb-8">
|
| 114 |
+
<h3 class="text-xl font-bold mb-4 pb-2 border-b border-gray-200">Starters</h3>
|
| 115 |
+
<div class="space-y-6">
|
| 116 |
+
<!-- Menu Item 1 -->
|
| 117 |
+
<div class="flex justify-between">
|
| 118 |
+
<div>
|
| 119 |
+
<h4 class="font-bold">French Onion Soup</h4>
|
| 120 |
+
<p class="text-gray-600 text-sm">Caramelized onions in rich beef broth with gruyère crouton</p>
|
| 121 |
+
<div class="mt-1 flex gap-2">
|
| 122 |
+
<span class="dietary-tag bg-green-100 text-green-800">GF</span>
|
| 123 |
+
</div>
|
| 124 |
+
</div>
|
| 125 |
+
<span class="font-bold text-gray-900">$14</span>
|
| 126 |
+
</div>
|
| 127 |
+
|
| 128 |
+
<!-- Menu Item 2 -->
|
| 129 |
+
<div class="flex justify-between">
|
| 130 |
+
<div>
|
| 131 |
+
<h4 class="font-bold">Escargots</h4>
|
| 132 |
+
<p class="text-gray-600 text-sm">Burgundy snails in garlic-parsley butter</p>
|
| 133 |
+
</div>
|
| 134 |
+
<span class="font-bold text-gray-900">$18</span>
|
| 135 |
+
</div>
|
| 136 |
+
</div>
|
| 137 |
+
</div>
|
| 138 |
+
|
| 139 |
+
<!-- Mains -->
|
| 140 |
+
<div class="mb-8">
|
| 141 |
+
<h3 class="text-xl font-bold mb-4 pb-2 border-b border-gray-200">Main Courses</h3>
|
| 142 |
+
<div class="space-y-6">
|
| 143 |
+
<!-- Menu Item 1 -->
|
| 144 |
+
<div class="flex justify-between">
|
| 145 |
+
<div>
|
| 146 |
+
<h4 class="font-bold">Filet Mignon</h4>
|
| 147 |
+
<p class="text-gray-600 text-sm">8oz beef tenderloin with béarnaise sauce and frites</p>
|
| 148 |
+
<div class="mt-1 flex gap-2">
|
| 149 |
+
<span class="dietary-tag bg-green-100 text-green-800">GF</span>
|
| 150 |
+
</div>
|
| 151 |
+
</div>
|
| 152 |
+
<span class="font-bold text-gray-900">$46</span>
|
| 153 |
+
</div>
|
| 154 |
+
|
| 155 |
+
<!-- Menu Item 2 -->
|
| 156 |
+
<div class="flex justify-between">
|
| 157 |
+
<div>
|
| 158 |
+
<h4 class="font-bold">Ratatouille</h4>
|
| 159 |
+
<p class="text-gray-600 text-sm">Provençal vegetable stew with herbed polenta</p>
|
| 160 |
+
<div class="mt-1 flex gap-2">
|
| 161 |
+
<span class="dietary-tag bg-green-100 text-green-800">GF</span>
|
| 162 |
+
<span class="dietary-tag bg-purple-100 text-purple-800">Vegan</span>
|
| 163 |
+
</div>
|
| 164 |
+
</div>
|
| 165 |
+
<span class="font-bold text-gray-900">$24</span>
|
| 166 |
+
</div>
|
| 167 |
+
</div>
|
| 168 |
+
</div>
|
| 169 |
+
</div>
|
| 170 |
+
</div>
|
| 171 |
+
|
| 172 |
+
<!-- Order Sidebar -->
|
| 173 |
+
<div class="md:w-1/3">
|
| 174 |
+
<div class="bg-white rounded-xl shadow-md sticky top-24 p-6">
|
| 175 |
+
<h3 class="font-bold text-lg mb-4">Order Options</h3>
|
| 176 |
+
|
| 177 |
+
<!-- Delivery/Takeaway -->
|
| 178 |
+
<div class="mb-6">
|
| 179 |
+
<div class="flex border rounded-lg overflow-hidden">
|
| 180 |
+
<button class="flex-1 py-3 bg-yellow-400 text-gray-900 font-medium">Delivery</button>
|
| 181 |
+
<button class="flex-1 py-3 bg-gray-100 text-gray-700 font-medium">Takeaway</button>
|
| 182 |
+
<button class="flex-1 py-3 bg-gray-100 text-gray-700 font-medium">Dine In</button>
|
| 183 |
+
</div>
|
| 184 |
+
<div class="mt-4">
|
| 185 |
+
<label class="block text-sm font-medium text-gray-700 mb-1">Delivery Address</label>
|
| 186 |
+
<input type="text" class="w-full px-3 py-2 border border-gray-300 rounded-md" placeholder="Enter your address">
|
| 187 |
+
</div>
|
| 188 |
+
</div>
|
| 189 |
+
|
| 190 |
+
<!-- Cart -->
|
| 191 |
+
<div class="border-t pt-4">
|
| 192 |
+
<h4 class="font-medium mb-3">Your Order</h4>
|
| 193 |
+
<div class="text-center py-8 text-gray-400">
|
| 194 |
+
<i data-feather="shopping-bag" class="w-8 h-8 mx-auto"></i>
|
| 195 |
+
<p class="mt-2">Your cart is empty</p>
|
| 196 |
+
</div>
|
| 197 |
+
<button class="w-full bg-gray-900 text-white py-3 rounded-lg font-medium mt-4">Checkout</button>
|
| 198 |
+
</div>
|
| 199 |
+
</div>
|
| 200 |
+
</div>
|
| 201 |
+
</div>
|
| 202 |
+
</div>
|
| 203 |
+
|
| 204 |
+
<script>
|
| 205 |
+
feather.replace();
|
| 206 |
+
</script>
|
| 207 |
+
</body>
|
| 208 |
+
</html>
|