Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Restaurant Profile | GourmetGlide</title> | |
| <link rel="icon" type="image/x-icon" href="/static/favicon.ico"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700&family=Poppins:wght@300;400;500;600&display=swap'); | |
| body { | |
| font-family: 'Poppins', sans-serif; | |
| } | |
| .font-serif { | |
| font-family: 'Playfair Display', serif; | |
| } | |
| .menu-item:hover .menu-item-img { | |
| transform: scale(1.05); | |
| } | |
| .dietary-tag { | |
| @apply px-3 py-1 text-xs rounded-full border border-gray-200; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50"> | |
| <!-- Restaurant Header --> | |
| <div class="relative h-screen max-h-[80vh] overflow-hidden"> | |
| <img src="http://static.photos/restaurant/1200x630/1" alt="Restaurant" class="w-full h-full object-cover"> | |
| <div class="absolute inset-0 bg-black bg-opacity-10"></div> | |
| <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black to-transparent pt-16 pb-8 px-8"> | |
| <div class="max-w-6xl mx-auto"> | |
| <h1 class="font-serif text-4xl md:text-6xl font-light text-white tracking-tight">La Belle Époque</h1> | |
| <div class="flex items-center mt-4 text-gray-100"> | |
| <div class="flex items-center text-yellow-300"> | |
| <i data-feather="star" class="w-5 h-5 fill-current"></i> | |
| <span class="ml-1 text-lg">4.9</span> | |
| <span class="mx-2">•</span> | |
| </div> | |
| <span>French • $$$ • 2.3 miles away</span> | |
| </div> | |
| <div class="mt-8 flex flex-wrap gap-3"> | |
| <span class="bg-white bg-opacity-10 text-white px-4 py-1.5 rounded-full text-sm border border-white border-opacity-30">Fine Dining</span> | |
| <span class="bg-white bg-opacity-10 text-white px-4 py-1.5 rounded-full text-sm border border-white border-opacity-30">Romantic</span> | |
| <span class="bg-white bg-opacity-10 text-white px-4 py-1.5 rounded-full text-sm border border-white border-opacity-30">Wine Pairings</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Restaurant Navigation --> | |
| <div class="bg-white bg-opacity-90 backdrop-blur-sm shadow-sm sticky top-0 z-10"> | |
| <div class="max-w-6xl mx-auto"> | |
| <div class="flex overflow-x-auto"> | |
| <a href="#" class="px-6 py-4 font-medium text-gray-900 border-b-2 border-yellow-400">Menu</a> | |
| <a href="#" class="px-6 py-4 font-medium text-gray-500 hover:text-gray-900">About</a> | |
| <a href="#" class="px-6 py-4 font-medium text-gray-500 hover:text-gray-900">Reviews</a> | |
| <a href="#" class="px-6 py-4 font-medium text-gray-500 hover:text-gray-900">Photos</a> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Restaurant Content --> | |
| <div class="max-w-6xl mx-auto px-4 py-8"> | |
| <div class="flex flex-col md:flex-row gap-8"> | |
| <!-- Main Content --> | |
| <div class="md:w-2/3"> | |
| <!-- Featured Items --> | |
| <div class="mb-12"> | |
| <h2 class="font-serif text-3xl font-bold mb-6">Chef's Specialties</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> | |
| <!-- Featured Item 1 --> | |
| <div class="bg-white rounded-xl shadow-md overflow-hidden"> | |
| <div class="relative h-48 overflow-hidden bg-gray-50"> | |
| <img src="http://static.photos/food/640x360/201" alt="Dish" class="menu-item-img w-full h-full object-cover transition-transform duration-500"> | |
| </div> | |
| <div class="p-5"> | |
| <div class="flex justify-between items-start"> | |
| <h3 class="font-bold text-lg">Duck Confit</h3> | |
| <span class="font-bold text-gray-900">$32</span> | |
| </div> | |
| <p class="mt-2 text-gray-600">Slow-cooked duck leg with garlic potatoes and cherry reduction</p> | |
| <div class="mt-3 flex flex-wrap gap-2"> | |
| <span class="dietary-tag bg-green-100 text-green-800">Gluten Free</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Featured Item 2 --> | |
| <div class="bg-white rounded-xl shadow-md overflow-hidden"> | |
| <div class="relative h-48 overflow-hidden"> | |
| <img src="http://static.photos/food/640x360/202" alt="Dish" class="menu-item-img w-full h-full object-cover transition-transform duration-300"> | |
| </div> | |
| <div class="p-4"> | |
| <div class="flex justify-between items-start"> | |
| <h3 class="font-bold text-lg">Bouillabaisse</h3> | |
| <span class="font-bold text-gray-900">$38</span> | |
| </div> | |
| <p class="mt-2 text-gray-600">Traditional Provençal fish stew with rouille and croutons</p> | |
| <div class="mt-3 flex flex-wrap gap-2"> | |
| <span class="dietary-tag bg-blue-100 text-blue-800">Pescatarian</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Menu Sections --> | |
| <div> | |
| <h2 class="font-serif text-3xl font-bold mb-6">Menu</h2> | |
| <!-- Starters --> | |
| <div class="mb-8"> | |
| <h3 class="text-xl font-bold mb-4 pb-2 border-b border-gray-200">Starters</h3> | |
| <div class="space-y-6"> | |
| <!-- Menu Item 1 --> | |
| <div class="flex justify-between"> | |
| <div> | |
| <h4 class="font-bold">French Onion Soup</h4> | |
| <p class="text-gray-600 text-sm">Caramelized onions in rich beef broth with gruyère crouton</p> | |
| <div class="mt-1 flex gap-2"> | |
| <span class="dietary-tag bg-green-100 text-green-800">GF</span> | |
| </div> | |
| </div> | |
| <span class="font-bold text-gray-900">$14</span> | |
| </div> | |
| <!-- Menu Item 2 --> | |
| <div class="flex justify-between"> | |
| <div> | |
| <h4 class="font-bold">Escargots</h4> | |
| <p class="text-gray-600 text-sm">Burgundy snails in garlic-parsley butter</p> | |
| </div> | |
| <span class="font-bold text-gray-900">$18</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Mains --> | |
| <div class="mb-8"> | |
| <h3 class="text-xl font-bold mb-4 pb-2 border-b border-gray-200">Main Courses</h3> | |
| <div class="space-y-6"> | |
| <!-- Menu Item 1 --> | |
| <div class="flex justify-between"> | |
| <div> | |
| <h4 class="font-bold">Filet Mignon</h4> | |
| <p class="text-gray-600 text-sm">8oz beef tenderloin with béarnaise sauce and frites</p> | |
| <div class="mt-1 flex gap-2"> | |
| <span class="dietary-tag bg-green-100 text-green-800">GF</span> | |
| </div> | |
| </div> | |
| <span class="font-bold text-gray-900">$46</span> | |
| </div> | |
| <!-- Menu Item 2 --> | |
| <div class="flex justify-between"> | |
| <div> | |
| <h4 class="font-bold">Ratatouille</h4> | |
| <p class="text-gray-600 text-sm">Provençal vegetable stew with herbed polenta</p> | |
| <div class="mt-1 flex gap-2"> | |
| <span class="dietary-tag bg-green-100 text-green-800">GF</span> | |
| <span class="dietary-tag bg-purple-100 text-purple-800">Vegan</span> | |
| </div> | |
| </div> | |
| <span class="font-bold text-gray-900">$24</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Order Sidebar --> | |
| <div class="md:w-1/3"> | |
| <div class="bg-white rounded-lg shadow-sm sticky top-24 p-6 border border-gray-100"> | |
| <h3 class="font-bold text-lg mb-4">Order Options</h3> | |
| <!-- Delivery/Takeaway --> | |
| <div class="mb-6"> | |
| <div class="flex border rounded-lg overflow-hidden"> | |
| <button class="flex-1 py-3 bg-yellow-400 text-gray-900 font-medium">Delivery</button> | |
| <button class="flex-1 py-3 bg-gray-100 text-gray-700 font-medium">Takeaway</button> | |
| <button class="flex-1 py-3 bg-gray-100 text-gray-700 font-medium">Dine In</button> | |
| </div> | |
| <div class="mt-4"> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Delivery Address</label> | |
| <input type="text" class="w-full px-3 py-2 border border-gray-300 rounded-md" placeholder="Enter your address"> | |
| </div> | |
| </div> | |
| <!-- Cart --> | |
| <div class="border-t pt-4"> | |
| <h4 class="font-medium mb-3">Your Order</h4> | |
| <div class="text-center py-8 text-gray-400"> | |
| <i data-feather="shopping-bag" class="w-8 h-8 mx-auto"></i> | |
| <p class="mt-2">Your cart is empty</p> | |
| </div> | |
| <button class="w-full bg-gray-900 text-white py-3 rounded-lg font-medium mt-4">Checkout</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| feather.replace(); | |
| </script> | |
| </body> | |
| </html> |