Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Brew Haven Café</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> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| primary: { | |
| 100: '#F9F5EB', | |
| 500: '#E4DCCF', | |
| 900: '#EA5455', | |
| }, | |
| secondary: { | |
| 100: '#E4DCCF', | |
| 500: '#002B5B', | |
| 900: '#1C3879', | |
| } | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&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; | |
| } | |
| .menu-item:hover .menu-overlay { | |
| opacity: 1; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-primary-100 text-secondary-500"> | |
| <!-- Navigation --> | |
| <nav class="bg-white shadow-lg sticky top-0 z-50"> | |
| <div class="max-w-6xl mx-auto px-4"> | |
| <div class="flex justify-between"> | |
| <div class="flex space-x-7"> | |
| <div> | |
| <a href="#" class="flex items-center py-4 px-2"> | |
| <i data-feather="coffee" class="h-8 w-8 text-primary-900 mr-2"></i> | |
| <span class="font-semibold text-secondary-500 text-lg">Brew Haven</span> | |
| </a> | |
| </div> | |
| <div class="hidden md:flex items-center space-x-1"> | |
| <a href="#" class="py-4 px-2 text-secondary-900 border-b-4 border-primary-900 font-semibold">Home</a> | |
| <a href="#menu" class="py-4 px-2 text-secondary-500 hover:text-secondary-900 transition duration-300">Menu</a> | |
| <a href="#about" class="py-4 px-2 text-secondary-500 hover:text-secondary-900 transition duration-300">About</a> | |
| <a href="#contact" class="py-4 px-2 text-secondary-500 hover:text-secondary-900 transition duration-300">Contact</a> | |
| </div> | |
| </div> | |
| <div class="hidden md:flex items-center space-x-3"> | |
| <a href="#" class="py-2 px-6 bg-primary-900 text-white rounded-full hover:bg-primary-700 transition duration-300 font-medium">Order Now</a> | |
| </div> | |
| <div class="md:hidden flex items-center"> | |
| <button class="outline-none mobile-menu-button"> | |
| <i data-feather="menu" class="w-6 h-6 text-secondary-500"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="hidden mobile-menu"> | |
| <ul> | |
| <li><a href="#" class="block text-sm px-2 py-4 hover:bg-primary-100 transition duration-300">Home</a></li> | |
| <li><a href="#menu" class="block text-sm px-2 py-4 hover:bg-primary-100 transition duration-300">Menu</a></li> | |
| <li><a href="#about" class="block text-sm px-2 py-4 hover:bg-primary-100 transition duration-300">About</a></li> | |
| <li><a href="#contact" class="block text-sm px-2 py-4 hover:bg-primary-100 transition duration-300">Contact</a></li> | |
| </ul> | |
| </div> | |
| </nav> | |
| <!-- Hero Section --> | |
| <section class="hero-pattern relative h-96 flex items-center"> | |
| <div class="absolute inset-0 bg-black opacity-40"></div> | |
| <div class="max-w-4xl mx-auto text-center relative z-10 px-4"> | |
| <h1 class="text-4xl md:text-6xl font-bold text-white mb-4">Artisan Coffee & Comfort Food</h1> | |
| <p class="text-xl text-white mb-8">Locally roasted beans paired with homemade pastries since 2012</p> | |
| <a href="#menu" class="inline-block bg-primary-900 text-white px-8 py-3 rounded-full hover:bg-primary-700 transition duration-300 font-medium">View Menu</a> | |
| </div> | |
| </section> | |
| <!-- Featured Items --> | |
| <section class="py-16 px-4"> | |
| <div class="max-w-6xl mx-auto"> | |
| <h2 class="text-3xl font-bold text-center mb-12">Our Specialties</h2> | |
| <div class="grid md:grid-cols-3 gap-8"> | |
| <div class="bg-white rounded-lg shadow-lg overflow-hidden"> | |
| <img src="http://static.photos/food/640x360/1" alt="Cold Brew" class="w-full h-48 object-cover"> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-bold mb-2">Honey Lavender Cold Brew</h3> | |
| <p class="text-secondary-500 mb-4">Our signature cold brew infused with local honey and organic lavender.</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="font-bold text-primary-900">$5.50</span> | |
| <button class="bg-secondary-500 text-white px-4 py-1 rounded-full text-sm hover:bg-secondary-700">Add +</button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-lg shadow-lg overflow-hidden"> | |
| <img src="http://static.photos/food/640x360/2" alt="Avocado Toast" class="w-full h-48 object-cover"> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-bold mb-2">Avocado Toast Deluxe</h3> | |
| <p class="text-secondary-500 mb-4">Sourdough bread with smashed avocado, cherry tomatoes, and microgreens.</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="font-bold text-primary-900">$8.50</span> | |
| <button class="bg-secondary-500 text-white px-4 py-1 rounded-full text-sm hover:bg-secondary-700">Add +</button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-lg shadow-lg overflow-hidden"> | |
| <img src="http://static.photos/food/640x360/3" alt="Cinnamon Roll" class="w-full h-48 object-cover"> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-bold mb-2">Cinnamon Roll</h3> | |
| <p class="text-secondary-500 mb-4">Freshly baked daily with our secret family recipe and cream cheese frosting.</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="font-bold text-primary-900">$4.25</span> | |
| <button class="bg-secondary-500 text-white px-4 py-1 rounded-full text-sm hover:bg-secondary-700">Add +</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Menu Section --> | |
| <section id="menu" class="py-16 bg-primary-500 px-4"> | |
| <div class="max-w-6xl mx-auto"> | |
| <h2 class="text-3xl font-bold text-center text-white mb-12">Our Menu</h2> | |
| <div class="grid md:grid-cols-2 gap-8"> | |
| <!-- Coffee Menu --> | |
| <div class="bg-white rounded-lg shadow-lg p-6"> | |
| <h3 class="text-xl font-bold mb-4 border-b-2 border-primary-100 pb-2 flex items-center"> | |
| <i data-feather="coffee" class="mr-2"></i> Coffee & Drinks | |
| </h3> | |
| <div class="space-y-4"> | |
| <div class="flex justify-between"> | |
| <div> | |
| <h4 class="font-medium">Espresso</h4> | |
| <p class="text-sm text-secondary-500">Single or double shot</p> | |
| </div> | |
| <span class="font-bold text-primary-900">$3.00</span> | |
| </div> | |
| <div class="flex justify-between"> | |
| <div> | |
| <h4 class="font-medium">Cappuccino</h4> | |
| <p class="text-sm text-secondary-500">Espresso with steamed milk foam</p> | |
| </div> | |
| <span class="font-bold text-primary-900">$4.50</span> | |
| </div> | |
| <div class="flex justify-between"> | |
| <div> | |
| <h4 class="font-medium">Matcha Latte</h4> | |
| <p class="text-sm text-secondary-500">Ceremonial grade matcha</p> | |
| </div> | |
| <span class="font-bold text-primary-900">$5.00</span> | |
| </div> | |
| <div class="flex justify-between"> | |
| <div> | |
| <h4 class="font-medium">Chai Latte</h4> | |
| <p class="text-sm text-secondary-500">House-blended spices</p> | |
| </div> | |
| <span class="font-bold text-primary-900">$4.75</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Food Menu --> | |
| <div class="bg-white rounded-lg shadow-lg p-6"> | |
| <h3 class="text-xl font-bold mb-4 border-b-2 border-primary-100 pb-2 flex items-center"> | |
| <i data-feather="croissant" class="mr-2"></i> Food & Pastries | |
| </h3> | |
| <div class="space-y-4"> | |
| <div class="flex justify-between"> | |
| <div> | |
| <h4 class="font-medium">Breakfast Sandwich</h4> | |
| <p class="text-sm text-secondary-500">Egg, cheese, and choice of bacon or sausage</p> | |
| </div> | |
| <span class="font-bold text-primary-900">$7.50</span> | |
| </div> | |
| <div class="flex justify-between"> | |
| <div> | |
| <h4 class="font-medium">Quiche of the Day</h4> | |
| <p class="text-sm text-secondary-500">Freshly baked with seasonal ingredients</p> | |
| </div> | |
| <span class="font-bold text-primary-900">$8.00</span> | |
| </div> | |
| <div class="flex justify-between"> | |
| <div> | |
| <h4 class="font-medium">Berry Parfait</h4> | |
| <p class="text-sm text-secondary-500">Greek yogurt with granola and fresh berries</p> | |
| </div> | |
| <span class="font-bold text-primary-900">$6.50</span> | |
| </div> | |
| <div class="flex justify-between"> | |
| <div> | |
| <h4 class="font-medium">Almond Croissant</h4> | |
| <p class="text-sm text-secondary-500">Flaky pastry with almond paste filling</p> | |
| </div> | |
| <span class="font-bold text-primary-900">$4.00</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- About Section --> | |
| <section id="about" class="py-16 px-4"> | |
| <div class="max-w-6xl mx-auto"> | |
| <div class="md:flex items-center"> | |
| <div class="md:w-1/2 mb-8 md:mb-0 md:pr-8"> | |
| <img src="http://static.photos/people/640x360/1" alt="Cafe interior" class="rounded-lg shadow-lg w-full"> | |
| </div> | |
| <div class="md:w-1/2"> | |
| <h2 class="text-3xl font-bold mb-6">Our Story</h2> | |
| <p class="mb-4">Founded in 2012 by two college friends passionate about coffee, Brew Haven started as a small cart at the local farmers market. Today, we're proud to serve our community from our cozy brick-and-mortar location downtown.</p> | |
| <p class="mb-6">We source our beans directly from sustainable farms and roast them in-house weekly to ensure maximum freshness. All our pastries are made from scratch daily using locally-sourced ingredients whenever possible.</p> | |
| <div class="flex items-center"> | |
| <div class="mr-4"> | |
| <i data-feather="award" class="w-8 h-8 text-primary-900"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold">Best Local Café 2022</h4> | |
| <p class="text-sm text-secondary-500">City Magazine Readers' Choice</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Testimonials --> | |
| <section class="py-16 bg-primary-100 px-4"> | |
| <div class="max-w-4xl mx-auto"> | |
| <h2 class="text-3xl font-bold text-center mb-12">What Our Customers Say</h2> | |
| <div class="grid md:grid-cols-2 gap-8"> | |
| <div class="bg-white p-6 rounded-lg shadow-lg"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-12 h-12 rounded-full overflow-hidden mr-4"> | |
| <img src="http://static.photos/people/200x200/1" alt="Customer" class="w-full h-full object-cover"> | |
| </div> | |
| <div> | |
| <h4 class="font-bold">Sarah M.</h4> | |
| <div class="flex"> | |
| <i data-feather="star" class="w-4 h-4 text-yellow-400 fill-yellow-400"></i> | |
| <i data-feather="star" class="w-4 h-4 text-yellow-400 fill-yellow-400"></i> | |
| <i data-feather="star" class="w-4 h-4 text-yellow-400 fill-yellow-400"></i> | |
| <i data-feather="star" class="w-4 h-4 text-yellow-400 fill-yellow-400"></i> | |
| <i data-feather="star" class="w-4 h-4 text-yellow-400 fill-yellow-400"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <p>"The honey lavender cold brew is absolutely divine! I come here every Saturday morning to get my fix. The atmosphere is so welcoming too."</p> | |
| </div> | |
| <div class="bg-white p-6 rounded-lg shadow-lg"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-12 h-12 rounded-full overflow-hidden mr-4"> | |
| <img src="http://static.photos/people/200x200/2" alt="Customer" class="w-full h-full object-cover"> | |
| </div> | |
| <div> | |
| <h4 class="font-bold">James T.</h4> | |
| <div class="flex"> | |
| <i data-feather="star" class="w-4 h-4 text-yellow-400 fill-yellow-400"></i> | |
| <i data-feather="star" class="w-4 h-4 text-yellow-400 fill-yellow-400"></i> | |
| <i data-feather="star" class="w-4 h-4 text-yellow-400 fill-yellow-400"></i> | |
| <i data-feather="star" class="w-4 h-4 text-yellow-400 fill-yellow-400"></i> | |
| <i data-feather="star" class="w-4 h-4 text-yellow-400 fill-yellow-400"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <p>"Best coffee in town, hands down. I've tried them all and nothing compares to Brew Haven's espresso. Their avocado toast is my go-to breakfast."</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Contact Section --> | |
| <section id="contact" class="py-16 px-4"> | |
| <div class="max-w-6xl mx-auto"> | |
| <div class="md:flex"> | |
| <div class="md:w-1/2 mb-8 md:mb-0 md:pr-8"> | |
| <h2 class="text-3xl font-bold mb-6">Visit Us</h2> | |
| <div class="mb-6"> | |
| <div class="flex items-start mb-4"> | |
| <i data-feather="map-pin" class="mr-3 mt-1"></i> | |
| <div> | |
| <h4 class="font-bold">Location</h4> | |
| <p>123 Main Street, Downtown<br>Your City, ST 12345</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start mb-4"> | |
| <i data-feather="clock" class="mr-3 mt-1"></i> | |
| <div> | |
| <h4 class="font-bold">Hours</h4> | |
| <p>Monday-Friday: 7am - 7pm<br>Saturday-Sunday: 8am - 6pm</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start mb-4"> | |
| <i data-feather="phone" class="mr-3 mt-1"></i> | |
| <div> | |
| <h4 class="font-bold">Phone</h4> | |
| <p>(555) 123-4567</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="bg-secondary-500 text-white p-2 rounded-full hover:bg-secondary-700 transition duration-300"> | |
| <i data-feather="instagram"></i> | |
| </a> | |
| <a href="#" class="bg-secondary-500 text-white p-2 rounded-full hover:bg-secondary-700 transition duration-300"> | |
| <i data-feather="facebook"></i> | |
| </a> | |
| <a href="#" class="bg-secondary-500 text-white p-2 rounded-full hover:bg-secondary-700 transition duration-300"> | |
| <i data-feather="twitter"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <div class="md:w-1/2"> | |
| <h2 class="text-3xl font-bold mb-6">Get in Touch</h2> | |
| <form class="space-y-4"> | |
| <div> | |
| <label for="name" class="block mb-1">Name</label> | |
| <input type="text" id="name" class="w-full px-4 py-2 border border-secondary-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-900 focus:border-transparent"> | |
| </div> | |
| <div> | |
| <label for="email" class="block mb-1">Email</label> | |
| <input type="email" id="email" class="w-full px-4 py-2 border border-secondary-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-900 focus:border-transparent"> | |
| </div> | |
| <div> | |
| <label for="message" class="block mb-1">Message</label> | |
| <textarea id="message" rows="4" class="w-full px-4 py-2 border border-secondary-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-900 focus:border-transparent"></textarea> | |
| </div> | |
| <button type="submit" class="bg-primary-900 text-white px-6 py-2 rounded-full hover:bg-primary-700 transition duration-300 font-medium">Send Message</button> | |
| </form> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="bg-secondary-500 text-white py-8 px-4"> | |
| <div class="max-w-6xl mx-auto"> | |
| <div class="md:flex md:justify-between"> | |
| <div class="mb-6 md:mb-0"> | |
| <a href="#" class="flex items-center"> | |
| <i data-feather="coffee" class="h-8 w-8 text-primary-100 mr-2"></i> | |
| <span class="text-xl font-semibold">Brew Haven</span> | |
| </a> | |
| </div> | |
| <div class="grid grid-cols-2 gap-8 sm:grid-cols-3"> | |
| <div> | |
| <h3 class="font-bold mb-4">Links</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="hover:text-primary-100 transition duration-300">Home</a></li> | |
| <li><a href="#menu" class="hover:text-primary-100 transition duration-300">Menu</a></li> | |
| <li><a href="#about" class="hover:text-primary-100 transition duration-300">About</a></li> | |
| <li><a href="#contact" class="hover:text-primary-100 transition duration-300">Contact</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="font-bold mb-4">Legal</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="hover:text-primary-100 transition duration-300">Privacy Policy</a></li> | |
| <li><a href="#" class="hover:text-primary-100 transition duration-300">Terms of Service</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="font-bold mb-4">Newsletter</h3> | |
| <div class="flex"> | |
| <input type="email" placeholder="Your email" class="px-4 py-2 rounded-l-lg text-secondary-900 focus:outline-none"> | |
| <button class="bg-primary-900 px-4 py-2 rounded-r-lg hover:bg-primary-700 transition duration-300"> | |
| <i data-feather="send"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <hr class="my-6 border-primary-500"> | |
| <div class="text-center"> | |
| <p>© 2023 Brew Haven Café. All rights reserved.</p> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Mobile menu toggle | |
| const btn = document.querySelector(".mobile-menu-button"); | |
| const menu = document.querySelector(".mobile-menu"); | |
| btn.addEventListener("click", () => { | |
| menu.classList.toggle("hidden"); | |
| }); | |
| // Close mobile menu when clicking outside | |
| document.addEventListener('click', (e) => { | |
| if (!menu.contains(e.target) && !btn.contains(e.target)) { | |
| menu.classList.add('hidden'); | |
| } | |
| }); | |
| </script> | |
| <script>feather.replace();</script> | |
| </body> | |
| </html> | |