Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Persian Bites Delight | Authentic Iranian Cuisine</title> | |
| <link rel="icon" type="image/x-icon" href="/static/favicon.ico"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://unpkg.com/feather-icons"></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;700&family=Poppins:wght@300;400;600&display=swap'); | |
| body { | |
| font-family: 'Poppins', sans-serif; | |
| } | |
| .hero-pattern { | |
| background-image: url('http://static.photos/food/1200x630/42'); | |
| background-size: cover; | |
| background-position: center; | |
| background-blend-mode: overlay; | |
| } | |
| .dish-card:hover .dish-img { | |
| transform: scale(1.05); | |
| } | |
| .spice-icon { | |
| animation: spin 6s linear infinite; | |
| } | |
| @keyframes spin { | |
| 0% { transform: rotate(0deg); } | |
| 100% { transform: rotate(360deg); } | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-amber-50"> | |
| <!-- Navigation --> | |
| <nav class="bg-amber-900 text-amber-50 shadow-lg sticky top-0 z-50"> | |
| <div class="container mx-auto px-4 py-3 flex justify-between items-center"> | |
| <div class="flex items-center space-x-2"> | |
| <i data-feather="award" class="text-amber-300"></i> | |
| <a href="#" class="text-2xl font-bold font-serif">Persian Bites</a> | |
| </div> | |
| <div class="hidden md:flex space-x-8"> | |
| <a href="#" class="hover:text-amber-300 transition">Home</a> | |
| <a href="#menu" class="hover:text-amber-300 transition">Menu</a> | |
| <a href="#about" class="hover:text-amber-300 transition">About</a> | |
| <a href="reservation.html" class="hover:text-amber-300 transition">Reservations</a> | |
| </div> | |
| <button class="md:hidden focus:outline-none" id="menu-btn"> | |
| <i data-feather="menu"></i> | |
| </button> | |
| </div> | |
| <!-- Mobile Menu --> | |
| <div class="md:hidden hidden bg-amber-800 px-4 py-2" id="mobile-menu"> | |
| <a href="#" class="block py-2 hover:text-amber-300">Home</a> | |
| <a href="#menu" class="block py-2 hover:text-amber-300">Menu</a> | |
| <a href="#about" class="block py-2 hover:text-amber-300">About</a> | |
| <a href="reservation.html" class="block py-2 hover:text-amber-300">Reservations</a> | |
| </div> | |
| </nav> | |
| <!-- Hero Section --> | |
| <section class="hero-pattern bg-amber-900/90 text-white py-24"> | |
| <div class="container mx-auto px-4 text-center"> | |
| <h1 class="text-4xl md:text-6xl font-serif font-bold mb-4">Taste the Magic of Persia</h1> | |
| <p class="text-xl mb-8 max-w-2xl mx-auto">Authentic Iranian cuisine crafted with traditional recipes and the finest ingredients</p> | |
| <div class="flex flex-col sm:flex-row justify-center gap-4"> | |
| <a href="#menu" class="bg-amber-600 hover:bg-amber-700 text-white px-6 py-3 rounded-lg font-medium transition">View Menu</a> | |
| <a href="reservation.html" class="bg-transparent border-2 border-amber-300 hover:bg-amber-300/20 text-white px-6 py-3 rounded-lg font-medium transition">Book a Table</a> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Special Dishes --> | |
| <section class="py-16 bg-white"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center mb-12"> | |
| <h2 class="text-3xl font-serif font-bold text-amber-900 mb-2">Our Signature Dishes</h2> | |
| <div class="w-24 h-1 bg-amber-600 mx-auto"></div> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> | |
| <!-- Dish 1 --> | |
| <div class="dish-card bg-amber-50 rounded-lg overflow-hidden shadow-md hover:shadow-xl transition"> | |
| <div class="overflow-hidden h-64"> | |
| <img src="http://static.photos/food/640x360/101" alt="Chelo Kabab" class="w-full h-full object-cover dish-img transition duration-500"> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-bold text-amber-900 mb-2">Chelo Kabab</h3> | |
| <p class="text-gray-600 mb-4">Juicy grilled lamb kabab served with saffron rice and grilled tomatoes</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-amber-700 font-bold">$18.99</span> | |
| <button class="text-amber-900 hover:text-amber-700"> | |
| <i data-feather="plus-circle" class="w-6 h-6"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Dish 2 --> | |
| <div class="dish-card bg-amber-50 rounded-lg overflow-hidden shadow-md hover:shadow-xl transition"> | |
| <div class="overflow-hidden h-64"> | |
| <img src="http://static.photos/food/640x360/102" alt="Ghormeh Sabzi" class="w-full h-full object-cover dish-img transition duration-500"> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-bold text-amber-900 mb-2">Ghormeh Sabzi</h3> | |
| <p class="text-gray-600 mb-4">Herb stew with kidney beans, dried lime and tender beef chunks</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-amber-700 font-bold">$16.99</span> | |
| <button class="text-amber-900 hover:text-amber-700"> | |
| <i data-feather="plus-circle" class="w-6 h-6"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Dish 3 --> | |
| <div class="dish-card bg-amber-50 rounded-lg overflow-hidden shadow-md hover:shadow-xl transition"> | |
| <div class="overflow-hidden h-64"> | |
| <img src="http://static.photos/food/640x360/103" alt="Fesenjan" class="w-full h-full object-cover dish-img transition duration-500"> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-bold text-amber-900 mb-2">Fesenjan</h3> | |
| <p class="text-gray-600 mb-4">Pomegranate walnut stew with chicken, served with saffron rice</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-amber-700 font-bold">$17.99</span> | |
| <button class="text-amber-900 hover:text-amber-700"> | |
| <i data-feather="plus-circle" class="w-6 h-6"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- About Section --> | |
| <section id="about" class="py-16 bg-amber-100"> | |
| <div class="container mx-auto px-4"> | |
| <div class="flex flex-col md:flex-row items-center"> | |
| <div class="md:w-1/2 mb-8 md:mb-0 md:pr-8"> | |
| <img src="http://static.photos/restaurant/640x360/50" alt="Restaurant Interior" class="rounded-lg shadow-lg w-full"> | |
| </div> | |
| <div class="md:w-1/2"> | |
| <h2 class="text-3xl font-serif font-bold text-amber-900 mb-4">Our Persian Heritage</h2> | |
| <p class="text-gray-700 mb-4">Founded in 2005, Persian Bites Delight brings the authentic flavors of Iran to your table. Our chef, trained in the culinary traditions of Isfahan, uses time-honored recipes passed down through generations.</p> | |
| <p class="text-gray-700 mb-6">We source the finest ingredients, from premium saffron to organic herbs, to create dishes that are both traditional and innovative.</p> | |
| <div class="flex items-center space-x-4"> | |
| <div class="spice-icon"> | |
| <i data-feather="star" class="text-amber-500 w-6 h-6"></i> | |
| </div> | |
| <p class="text-gray-700">100% Halal ingredients</p> | |
| </div> | |
| <div class="flex items-center space-x-4 mt-2"> | |
| <div class="spice-icon"> | |
| <i data-feather="star" class="text-amber-500 w-6 h-6"></i> | |
| </div> | |
| <p class="text-gray-700">Family-friendly atmosphere</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Menu Preview --> | |
| <section id="menu" class="py-16 bg-white"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center mb-12"> | |
| <h2 class="text-3xl font-serif font-bold text-amber-900 mb-2">Our Menu</h2> | |
| <p class="text-gray-600 max-w-2xl mx-auto">Explore our selection of traditional Persian dishes. Each plate tells a story of Persian culture and culinary excellence.</p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-8"> | |
| <!-- Appetizers --> | |
| <div class="bg-amber-50 p-6 rounded-lg shadow-sm"> | |
| <h3 class="text-xl font-bold text-amber-900 mb-4 border-b pb-2">Appetizers</h3> | |
| <div class="space-y-4"> | |
| <div class="flex justify-between"> | |
| <div> | |
| <h4 class="font-medium">Mirza Ghasemi</h4> | |
| <p class="text-sm text-gray-600">Smoked eggplant with tomato and garlic</p> | |
| </div> | |
| <span class="text-amber-700 font-bold">$8.99</span> | |
| </div> | |
| <div class="flex justify-between"> | |
| <div> | |
| <h4 class="font-medium">Kashk-e Bademjan</h4> | |
| <p class="text-sm text-gray-600">Eggplant dip with whey and mint</p> | |
| </div> | |
| <span class="text-amber-700 font-bold">$7.99</span> | |
| </div> | |
| <div class="flex justify-between"> | |
| <div> | |
| <h4 class="font-medium">Sabzi Khordan</h4> | |
| <p class="text-sm text-gray-600">Fresh herb platter with feta and walnuts</p> | |
| </div> | |
| <span class="text-amber-700 font-bold">$6.99</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Main Dishes --> | |
| <div class="bg-amber-50 p-6 rounded-lg shadow-sm"> | |
| <h3 class="text-xl font-bold text-amber-900 mb-4 border-b pb-2">Main Dishes</h3> | |
| <div class="space-y-4"> | |
| <div class="flex justify-between"> | |
| <div> | |
| <h4 class="font-medium">Baghali Polo</h4> | |
| <p class="text-sm text-gray-600">Dill rice with broad beans and lamb shank</p> | |
| </div> | |
| <span class="text-amber-700 font-bold">$19.99</span> | |
| </div> | |
| <div class="flex justify-between"> | |
| <div> | |
| <h4 class="font-medium">Zereshk Polo</h4> | |
| <p class="text-sm text-gray-600">Barberry rice with chicken</p> | |
| </div> | |
| <span class="text-amber-700 font-bold">$17.99</span> | |
| </div> | |
| <div class="flex justify-between"> | |
| <div> | |
| <h4 class="font-medium">Khoresht Gheimeh</h4> | |
| <p class="text-sm text-gray-600">Yellow split pea stew with beef</p> | |
| </div> | |
| <span class="text-amber-700 font-bold">$16.99</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="text-center mt-8"> | |
| <a href="menu.html" class="inline-block bg-amber-600 hover:bg-amber-700 text-white px-6 py-3 rounded-lg font-medium transition">View Full Menu</a> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Testimonials --> | |
| <section class="py-16 bg-amber-900 text-white"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center mb-12"> | |
| <h2 class="text-3xl font-serif font-bold mb-2">What Our Guests Say</h2> | |
| <div class="w-24 h-1 bg-amber-300 mx-auto"></div> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> | |
| <!-- Testimonial 1 --> | |
| <div class="bg-amber-800/50 p-6 rounded-lg"> | |
| <div class="flex items-center mb-4"> | |
| <img src="http://static.photos/people/200x200/1" alt="Sarah J." class="w-12 h-12 rounded-full mr-4"> | |
| <div> | |
| <h4 class="font-bold">Sarah J.</h4> | |
| <div class="flex text-amber-300"> | |
| <i data-feather="star" class="w-4 h-4 fill-current"></i> | |
| <i data-feather="star" class="w-4 h-4 fill-current"></i> | |
| <i data-feather="star" class="w-4 h-4 fill-current"></i> | |
| <i data-feather="star" class="w-4 h-4 fill-current"></i> | |
| <i data-feather="star" class="w-4 h-4 fill-current"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <p class="italic">"The Chelo Kabab was the most tender and flavorful I've ever had. The saffron rice is to die for!"</p> | |
| </div> | |
| <!-- Testimonial 2 --> | |
| <div class="bg-amber-800/50 p-6 rounded-lg"> | |
| <div class="flex items-center mb-4"> | |
| <img src="http://static.photos/people/200x200/2" alt="Michael T." class="w-12 h-12 rounded-full mr-4"> | |
| <div> | |
| <h4 class="font-bold">Michael T.</h4> | |
| <div class="flex text-amber-300"> | |
| <i data-feather="star" class="w-4 h-4 fill-current"></i> | |
| <i data-feather="star" class="w-4 h-4 fill-current"></i> | |
| <i data-feather="star" class="w-4 h-4 fill-current"></i> | |
| <i data-feather="star" class="w-4 h-4 fill-current"></i> | |
| <i data-feather="star" class="w-4 h-4 fill-current"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <p class="italic">"Authentic Persian flavors that remind me of my grandmother's cooking. The Fesenjan is a must-try!"</p> | |
| </div> | |
| <!-- Testimonial 3 --> | |
| <div class="bg-amber-800/50 p-6 rounded-lg"> | |
| <div class="flex items-center mb-4"> | |
| <img src="http://static.photos/people/200x200/3" alt="Amina K." class="w-12 h-12 rounded-full mr-4"> | |
| <div> | |
| <h4 class="font-bold">Amina K.</h4> | |
| <div class="flex text-amber-300"> | |
| <i data-feather="star" class="w-4 h-4 fill-current"></i> | |
| <i data-feather="star" class="w-4 h-4 fill-current"></i> | |
| <i data-feather="star" class="w-4 h-4 fill-current"></i> | |
| <i data-feather="star" class="w-4 h-4 fill-current"></i> | |
| <i data-feather="star" class="w-4 h-4 fill-current"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <p class="italic">"As someone from Tehran, I can say this is the most authentic Persian food I've had outside Iran."</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="bg-amber-950 text-amber-100 py-12"> | |
| <div class="container mx-auto px-4"> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-8"> | |
| <div> | |
| <h3 class="text-xl font-serif font-bold mb-4">Persian Bites</h3> | |
| <p class="mb-4">Bringing the authentic taste of Persia to your table since 2005.</p> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="hover:text-amber-300 transition"><i data-feather="instagram"></i></a> | |
| <a href="#" class="hover:text-amber-300 transition"><i data-feather="facebook"></i></a> | |
| <a href="#" class="hover:text-amber-300 transition"><i data-feather="twitter"></i></a> | |
| </div> | |
| </div> | |
| <div> | |
| <h4 class="font-bold mb-4">Hours</h4> | |
| <p class="mb-2">Monday - Thursday: 11am - 10pm</p> | |
| <p class="mb-2">Friday - Saturday: 11am - 11pm</p> | |
| <p>Sunday: 12pm - 9pm</p> | |
| </div> | |
| <div> | |
| <h4 class="font-bold mb-4">Location</h4> | |
| <p class="mb-2">123 Saffron Street</p> | |
| <p class="mb-2">Tehran District</p> | |
| <p>New York, NY 10001</p> | |
| </div> | |
| <div> | |
| <h4 class="font-bold mb-4">Contact</h4> | |
| <p class="mb-2 flex items-center"> | |
| <i data-feather="phone" class="mr-2 w-4 h-4"></i> (212) 555-0123 | |
| </p> | |
| <p class="mb-2 flex items-center"> | |
| <i data-feather="mail" class="mr-2 w-4 h-4"></i> info@persianbites.com | |
| </p> | |
| <a href="reservation.html" class="inline-block mt-4 bg-amber-800 hover:bg-amber-700 text-white px-4 py-2 rounded text-sm transition">Make Reservation</a> | |
| </div> | |
| </div> | |
| <div class="border-t border-amber-800 mt-8 pt-8 text-center text-sm"> | |
| <p>© 2023 Persian Bites Delight. All rights reserved.</p> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Mobile menu toggle | |
| document.getElementById('menu-btn').addEventListener('click', function() { | |
| const menu = document.getElementById('mobile-menu'); | |
| menu.classList.toggle('hidden'); | |
| }); | |
| // Smooth scrolling for anchor links | |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { | |
| anchor.addEventListener('click', function (e) { | |
| e.preventDefault(); | |
| document.querySelector(this.getAttribute('href')).scrollIntoView({ | |
| behavior: 'smooth' | |
| }); | |
| }); | |
| }); | |
| // Initialize feather icons | |
| feather.replace(); | |
| </script> | |
| </body> | |
| </html> | |