Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Maple Brew - Authentic Canadian Coffee</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <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; | |
| scroll-behavior: smooth; | |
| } | |
| .hero { | |
| background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://images.unsplash.com/photo-1495474472287-4d71bcdd2085?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80'); | |
| background-size: cover; | |
| background-position: center; | |
| background-attachment: fixed; | |
| } | |
| .menu-item:hover .menu-overlay { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| .menu-overlay { | |
| transition: all 0.3s ease; | |
| opacity: 0; | |
| transform: translateY(20px); | |
| } | |
| .floating { | |
| animation: floating 3s ease-in-out infinite; | |
| } | |
| @keyframes floating { | |
| 0% { transform: translateY(0px); } | |
| 50% { transform: translateY(-15px); } | |
| 100% { transform: translateY(0px); } | |
| } | |
| .maple-leaf { | |
| position: absolute; | |
| width: 30px; | |
| height: 30px; | |
| background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23c2410c"><path d="M18.5,12c0,0.276-0.224,0.5-0.5,0.5s-0.5-0.224-0.5-0.5s0.224-0.5,0.5-0.5S18.5,11.724,18.5,12z M12,5.5 c0.276,0,0.5-0.224,0.5-0.5S12.276,4.5,12,4.5S11.5,4.724,11.5,5S11.724,5.5,12,5.5z M12,18.5c-0.276,0-0.5,0.224-0.5,0.5 s0.224,0.5,0.5,0.5s0.5-0.224,0.5-0.5S12.276,18.5,12,18.5z M5.5,12c0-0.276-0.224-0.5-0.5-0.5S4.5,11.724,4.5,12 s0.224,0.5,0.5,0.5S5.5,12.276,5.5,12z M14.5,12c0,1.381-1.119,2.5-2.5,2.5S9.5,13.381,9.5,12s1.119-2.5,2.5-2.5 S14.5,10.619,14.5,12z M22,12c0,5.514-4.486,10-10,10S2,17.514,2,12S6.486,2,12,2S22,6.486,22,12z"/></svg>'); | |
| background-size: contain; | |
| animation: falling linear infinite; | |
| z-index: -1; | |
| } | |
| @keyframes falling { | |
| 0% { | |
| transform: translate(0, -10vh) rotate(0deg); | |
| opacity: 1; | |
| } | |
| 100% { | |
| transform: translate(var(--end-x), 100vh) rotate(360deg); | |
| opacity: 0; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-amber-50 text-gray-800"> | |
| <!-- Floating Maple Leaves Background --> | |
| <div id="maple-leaves"></div> | |
| <!-- Navigation --> | |
| <nav class="fixed w-full bg-white bg-opacity-90 shadow-md z-50"> | |
| <div class="container mx-auto px-6 py-3 flex justify-between items-center"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-mug-hot text-amber-700 text-2xl mr-2"></i> | |
| <span class="font-playfair text-xl font-bold text-amber-800">Maple Brew</span> | |
| </div> | |
| <div class="hidden md:flex space-x-8"> | |
| <a href="#home" class="text-amber-800 hover:text-amber-600 transition">Home</a> | |
| <a href="#about" class="text-gray-700 hover:text-amber-600 transition">About</a> | |
| <a href="#menu" class="text-gray-700 hover:text-amber-600 transition">Menu</a> | |
| <a href="#locations" class="text-gray-700 hover:text-amber-600 transition">Locations</a> | |
| <a href="#contact" class="text-gray-700 hover:text-amber-600 transition">Contact</a> | |
| </div> | |
| <button class="md:hidden focus:outline-none" id="mobile-menu-button"> | |
| <i class="fas fa-bars text-amber-800 text-xl"></i> | |
| </button> | |
| </div> | |
| <!-- Mobile Menu --> | |
| <div class="md:hidden hidden bg-white w-full px-6 py-3" id="mobile-menu"> | |
| <div class="flex flex-col space-y-3"> | |
| <a href="#home" class="text-amber-800 hover:text-amber-600 transition">Home</a> | |
| <a href="#about" class="text-gray-700 hover:text-amber-600 transition">About</a> | |
| <a href="#menu" class="text-gray-700 hover:text-amber-600 transition">Menu</a> | |
| <a href="#locations" class="text-gray-700 hover:text-amber-600 transition">Locations</a> | |
| <a href="#contact" class="text-gray-700 hover:text-amber-600 transition">Contact</a> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Hero Section --> | |
| <section id="home" class="hero min-h-screen flex items-center justify-center text-white pt-20"> | |
| <div class="container mx-auto px-6 text-center"> | |
| <h1 class="font-playfair text-5xl md:text-7xl font-bold mb-6">Maple Brew</h1> | |
| <p class="text-xl md:text-2xl mb-8 max-w-2xl mx-auto">Authentic Canadian Coffee Experience</p> | |
| <div class="flex flex-col md:flex-row justify-center space-y-4 md:space-y-0 md:space-x-6"> | |
| <a href="#menu" class="bg-amber-700 hover:bg-amber-600 text-white px-8 py-3 rounded-full font-medium transition">View Menu</a> | |
| <a href="#locations" class="bg-transparent border-2 border-white hover:bg-white hover:bg-opacity-20 text-white px-8 py-3 rounded-full font-medium transition">Find Us</a> | |
| </div> | |
| </div> | |
| <div class="absolute bottom-10 left-0 right-0 text-center"> | |
| <a href="#about" class="text-white animate-bounce inline-block"> | |
| <i class="fas fa-chevron-down text-2xl"></i> | |
| </a> | |
| </div> | |
| </section> | |
| <!-- About Section --> | |
| <section id="about" class="py-20 bg-white"> | |
| <div class="container mx-auto px-6"> | |
| <div class="flex flex-col md:flex-row items-center"> | |
| <div class="md:w-1/2 mb-10 md:mb-0 md:pr-10"> | |
| <h2 class="font-playfair text-3xl md:text-4xl font-bold text-amber-800 mb-6">Our Canadian Coffee Story</h2> | |
| <p class="text-gray-700 mb-4">Founded in the heart of Toronto in 2010, Maple Brew brings together the warmth of Canadian hospitality with the finest coffee beans sourced from ethical growers worldwide.</p> | |
| <p class="text-gray-700 mb-6">Our signature blends incorporate subtle hints of maple, creating a uniquely Canadian coffee experience that warms you from the inside out.</p> | |
| <div class="flex space-x-4"> | |
| <div class="bg-amber-100 p-4 rounded-lg text-center"> | |
| <i class="fas fa-seedling text-amber-700 text-2xl mb-2"></i> | |
| <p class="font-medium">Ethically Sourced</p> | |
| </div> | |
| <div class="bg-amber-100 p-4 rounded-lg text-center"> | |
| <i class="fas fa-fire text-amber-700 text-2xl mb-2"></i> | |
| <p class="font-medium">Small Batch Roasted</p> | |
| </div> | |
| <div class="bg-amber-100 p-4 rounded-lg text-center"> | |
| <i class="fas fa-leaf text-amber-700 text-2xl mb-2"></i> | |
| <p class="font-medium">Sustainable</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="md:w-1/2 relative"> | |
| <div class="relative"> | |
| <img src="https://images.unsplash.com/photo-1511920170033-f8396924c348?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=774&q=80" alt="Coffee beans" class="rounded-lg shadow-xl w-full"> | |
| <div class="absolute -bottom-6 -right-6 bg-amber-700 text-white p-4 rounded-lg shadow-lg hidden md:block"> | |
| <p class="font-bold text-xl">10+</p> | |
| <p>Years of Experience</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Menu Section --> | |
| <section id="menu" class="py-20 bg-amber-50"> | |
| <div class="container mx-auto px-6"> | |
| <div class="text-center mb-16"> | |
| <h2 class="font-playfair text-3xl md:text-4xl font-bold text-amber-800 mb-4">Our Signature Brews</h2> | |
| <p class="text-gray-700 max-w-2xl mx-auto">From classic espresso to Canadian-inspired specialties, we craft each cup with care and precision.</p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <!-- Menu Item 1 --> | |
| <div class="menu-item bg-white rounded-lg overflow-hidden shadow-lg relative"> | |
| <img src="https://images.unsplash.com/photo-1517705008128-361805f42e86?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=774&q=80" alt="Maple Latte" class="w-full h-64 object-cover"> | |
| <div class="p-6"> | |
| <h3 class="font-bold text-xl text-amber-800 mb-2">Maple Latte</h3> | |
| <p class="text-gray-700 mb-4">Our signature blend with real Canadian maple syrup</p> | |
| <p class="font-bold text-amber-700">$5.50</p> | |
| </div> | |
| <div class="menu-overlay absolute inset-0 bg-amber-800 bg-opacity-90 flex items-center justify-center p-6 text-white"> | |
| <div> | |
| <h3 class="font-bold text-xl mb-2">Maple Latte</h3> | |
| <p class="mb-4">Espresso, steamed milk, and a touch of pure Canadian maple syrup topped with foam.</p> | |
| <p class="font-bold">$5.50</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Menu Item 2 --> | |
| <div class="menu-item bg-white rounded-lg overflow-hidden shadow-lg relative"> | |
| <img src="https://images.unsplash.com/photo-1568649929103-28ffbefaca1e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=870&q=80" alt="Double Double" class="w-full h-64 object-cover"> | |
| <div class="p-6"> | |
| <h3 class="font-bold text-xl text-amber-800 mb-2">The True North</h3> | |
| <p class="text-gray-700 mb-4">Double espresso with double cream and double sugar</p> | |
| <p class="font-bold text-amber-700">$4.75</p> | |
| </div> | |
| <div class="menu-overlay absolute inset-0 bg-amber-800 bg-opacity-90 flex items-center justify-center p-6 text-white"> | |
| <div> | |
| <h3 class="font-bold text-xl mb-2">The True North</h3> | |
| <p class="mb-4">A Canadian classic - two shots of espresso with two creams and two sugars for the perfect balance.</p> | |
| <p class="font-bold">$4.75</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Menu Item 3 --> | |
| <div class="menu-item bg-white rounded-lg overflow-hidden shadow-lg relative"> | |
| <img src="https://images.unsplash.com/photo-1536599424071-0b215a388ba7?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=774&q=80" alt="Iced Maple Mocha" class="w-full h-64 object-cover"> | |
| <div class="p-6"> | |
| <h3 class="font-bold text-xl text-amber-800 mb-2">Iced Maple Mocha</h3> | |
| <p class="text-gray-700 mb-4">Cold brew with chocolate and maple syrup</p> | |
| <p class="font-bold text-amber-700">$6.25</p> | |
| </div> | |
| <div class="menu-overlay absolute inset-0 bg-amber-800 bg-opacity-90 flex items-center justify-center p-6 text-white"> | |
| <div> | |
| <h3 class="font-bold text-xl mb-2">Iced Maple Mocha</h3> | |
| <p class="mb-4">Our cold brew coffee blended with rich chocolate and maple syrup, served over ice.</p> | |
| <p class="font-bold">$6.25</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Menu Item 4 --> | |
| <div class="menu-item bg-white rounded-lg overflow-hidden shadow-lg relative"> | |
| <img src="https://images.unsplash.com/photo-1517701550927-30cf4ba1d5a8?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=774&q=80" alt="Nanaimo Bar Latte" class="w-full h-64 object-cover"> | |
| <div class="p-6"> | |
| <h3 class="font-bold text-xl text-amber-800 mb-2">Nanaimo Bar Latte</h3> | |
| <p class="text-gray-700 mb-4">Inspired by the classic Canadian dessert</p> | |
| <p class="font-bold text-amber-700">$6.50</p> | |
| </div> | |
| <div class="menu-overlay absolute inset-0 bg-amber-800 bg-opacity-90 flex items-center justify-center p-6 text-white"> | |
| <div> | |
| <h3 class="font-bold text-xl mb-2">Nanaimo Bar Latte</h3> | |
| <p class="mb-4">A decadent blend of chocolate, coconut, and custard flavors in a creamy latte.</p> | |
| <p class="font-bold">$6.50</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Menu Item 5 --> | |
| <div class="menu-item bg-white rounded-lg overflow-hidden shadow-lg relative"> | |
| <img src="https://images.unsplash.com/photo-1522992319-0365e5f11656?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=774&q=80" alt="Canadian Breakfast Blend" class="w-full h-64 object-cover"> | |
| <div class="p-6"> | |
| <h3 class="font-bold text-xl text-amber-800 mb-2">Canadian Breakfast Blend</h3> | |
| <p class="text-gray-700 mb-4">Our signature house blend</p> | |
| <p class="font-bold text-amber-700">$4.00</p> | |
| </div> | |
| <div class="menu-overlay absolute inset-0 bg-amber-800 bg-opacity-90 flex items-center justify-center p-6 text-white"> | |
| <div> | |
| <h3 class="font-bold text-xl mb-2">Canadian Breakfast Blend</h3> | |
| <p class="mb-4">A smooth, medium roast with notes of caramel and nuts, perfect for starting your day.</p> | |
| <p class="font-bold">$4.00</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Menu Item 6 --> | |
| <div class="menu-item bg-white rounded-lg overflow-hidden shadow-lg relative"> | |
| <img src="https://images.unsplash.com/photo-1560717843-60cb1b42b0e5?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=774&q=80" alt="Beaver Tail Pastry" class="w-full h-64 object-cover"> | |
| <div class="p-6"> | |
| <h3 class="font-bold text-xl text-amber-800 mb-2">Beaver Tail Pastry</h3> | |
| <p class="text-gray-700 mb-4">Classic Canadian fried dough pastry</p> | |
| <p class="font-bold text-amber-700">$5.25</p> | |
| </div> | |
| <div class="menu-overlay absolute inset-0 bg-amber-800 bg-opacity-90 flex items-center justify-center p-6 text-white"> | |
| <div> | |
| <h3 class="font-bold text-xl mb-2">Beaver Tail Pastry</h3> | |
| <p class="mb-4">Fried dough pastry stretched to resemble a beaver's tail, topped with your choice of cinnamon sugar, chocolate hazelnut, or maple butter.</p> | |
| <p class="font-bold">$5.25</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="text-center mt-16"> | |
| <a href="#" class="inline-block bg-amber-700 hover:bg-amber-600 text-white px-8 py-3 rounded-full font-medium transition">View Full Menu</a> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Locations Section --> | |
| <section id="locations" class="py-20 bg-white"> | |
| <div class="container mx-auto px-6"> | |
| <div class="text-center mb-16"> | |
| <h2 class="font-playfair text-3xl md:text-4xl font-bold text-amber-800 mb-4">Our Canadian Locations</h2> | |
| <p class="text-gray-700 max-w-2xl mx-auto">Find your nearest Maple Brew café across Canada</p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> | |
| <!-- Location 1 --> | |
| <div class="bg-amber-50 rounded-lg overflow-hidden shadow-lg"> | |
| <img src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=870&q=80" alt="Toronto Location" class="w-full h-48 object-cover"> | |
| <div class="p-6"> | |
| <h3 class="font-bold text-xl text-amber-800 mb-2">Toronto</h3> | |
| <p class="text-gray-700 mb-4">123 Queen Street West</p> | |
| <p class="text-gray-700 mb-4"><i class="fas fa-phone mr-2"></i> (416) 555-1234</p> | |
| <p class="text-gray-700 mb-4"><i class="fas fa-clock mr-2"></i> Mon-Fri: 6:30am - 9pm<br>Sat-Sun: 7am - 10pm</p> | |
| <a href="#" class="inline-block border border-amber-700 text-amber-700 hover:bg-amber-700 hover:text-white px-4 py-2 rounded-full font-medium transition">Get Directions</a> | |
| </div> | |
| </div> | |
| <!-- Location 2 --> | |
| <div class="bg-amber-50 rounded-lg overflow-hidden shadow-lg"> | |
| <img src="https://images.unsplash.com/photo-1600528252983-e70a2c8f49c0?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=774&q=80" alt="Vancouver Location" class="w-full h-48 object-cover"> | |
| <div class="p-6"> | |
| <h3 class="font-bold text-xl text-amber-800 mb-2">Vancouver</h3> | |
| <p class="text-gray-700 mb-4">456 Robson Street</p> | |
| <p class="text-gray-700 mb-4"><i class="fas fa-phone mr-2"></i> (604) 555-5678</p> | |
| <p class="text-gray-700 mb-4"><i class="fas fa-clock mr-2"></i> Mon-Fri: 6am - 8pm<br>Sat-Sun: 7am - 9pm</p> | |
| <a href="#" class="inline-block border border-amber-700 text-amber-700 hover:bg-amber-700 hover:text-white px-4 py-2 rounded-full font-medium transition">Get Directions</a> | |
| </div> | |
| </div> | |
| <!-- Location 3 --> | |
| <div class="bg-amber-50 rounded-lg overflow-hidden shadow-lg"> | |
| <img src="https://images.unsplash.com/photo-1512429234305-12fe5b0b0f07?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=774&q=80" alt="Montreal Location" class="w-full h-48 object-cover"> | |
| <div class="p-6"> | |
| <h3 class="font-bold text-xl text-amber-800 mb-2">Montreal</h3> | |
| <p class="text-gray-700 mb-4">789 Rue Saint-Catherine</p> | |
| <p class="text-gray-700 mb-4"><i class="fas fa-phone mr-2"></i> (514) 555-9012</p> | |
| <p class="text-gray-700 mb-4"><i class="fas fa-clock mr-2"></i> Mon-Fri: 6:30am - 10pm<br>Sat-Sun: 7:30am - 11pm</p> | |
| <a href="#" class="inline-block border border-amber-700 text-amber-700 hover:bg-amber-700 hover:text-white px-4 py-2 rounded-full font-medium transition">Get Directions</a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="text-center mt-16"> | |
| <p class="text-gray-700 mb-6">Coming soon to Calgary and Halifax!</p> | |
| <a href="#" class="inline-block bg-amber-700 hover:bg-amber-600 text-white px-8 py-3 rounded-full font-medium transition">Join Our Mailing List</a> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Testimonials Section --> | |
| <section class="py-20 bg-amber-100"> | |
| <div class="container mx-auto px-6"> | |
| <div class="text-center mb-16"> | |
| <h2 class="font-playfair text-3xl md:text-4xl font-bold text-amber-800 mb-4">What Our Customers Say</h2> | |
| <p class="text-gray-700 max-w-2xl mx-auto">Hear from coffee lovers across Canada</p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> | |
| <!-- Testimonial 1 --> | |
| <div class="bg-white p-8 rounded-lg shadow-lg"> | |
| <div class="flex items-center mb-4"> | |
| <div class="flex-shrink-0"> | |
| <i class="fas fa-quote-left text-amber-600 text-2xl"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-star text-amber-500"></i> | |
| <i class="fas fa-star text-amber-500"></i> | |
| <i class="fas fa-star text-amber-500"></i> | |
| <i class="fas fa-star text-amber-500"></i> | |
| <i class="fas fa-star text-amber-500"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <p class="text-gray-700 mb-6">"The Maple Latte is hands down the best coffee I've ever had. It's become my daily ritual!"</p> | |
| <div class="flex items-center"> | |
| <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Sarah J." class="w-12 h-12 rounded-full"> | |
| <div class="ml-4"> | |
| <p class="font-bold text-gray-800">Sarah J.</p> | |
| <p class="text-gray-600">Toronto, ON</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Testimonial 2 --> | |
| <div class="bg-white p-8 rounded-lg shadow-lg"> | |
| <div class="flex items-center mb-4"> | |
| <div class="flex-shrink-0"> | |
| <i class="fas fa-quote-left text-amber-600 text-2xl"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-star text-amber-500"></i> | |
| <i class="fas fa-star text-amber-500"></i> | |
| <i class="fas fa-star text-amber-500"></i> | |
| <i class="fas fa-star text-amber-500"></i> | |
| <i class="fas fa-star text-amber-500"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <p class="text-gray-700 mb-6">"As a coffee connoisseur, I appreciate their attention to detail and quality beans. The Canadian Breakfast Blend is exceptional."</p> | |
| <div class="flex items-center"> | |
| <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Michael T." class="w-12 h-12 rounded-full"> | |
| <div class="ml-4"> | |
| <p class="font-bold text-gray-800">Michael T.</p> | |
| <p class="text-gray-600">Vancouver, BC</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Testimonial 3 --> | |
| <div class="bg-white p-8 rounded-lg shadow-lg"> | |
| <div class="flex items-center mb-4"> | |
| <div class="flex-shrink-0"> | |
| <i class="fas fa-quote-left text-amber-600 text-2xl"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-star text-amber-500"></i> | |
| <i class="fas fa-star text-amber-500"></i> | |
| <i class="fas fa-star text-amber-500"></i> | |
| <i class="fas fa-star text-amber-500"></i> | |
| <i class="fas fa-star-half-alt text-amber-500"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <p class="text-gray-700 mb-6">"The Nanaimo Bar Latte is like dessert in a cup! Perfect for when I need a sweet pick-me-up."</p> | |
| <div class="flex items-center"> | |
| <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="Emily R." class="w-12 h-12 rounded-full"> | |
| <div class="ml-4"> | |
| <p class="font-bold text-gray-800">Emily R.</p> | |
| <p class="text-gray-600">Montreal, QC</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Contact Section --> | |
| <section id="contact" class="py-20 bg-white"> | |
| <div class="container mx-auto px-6"> | |
| <div class="flex flex-col md:flex-row"> | |
| <div class="md:w-1/2 mb-10 md:mb-0 md:pr-10"> | |
| <h2 class="font-playfair text-3xl md:text-4xl font-bold text-amber-800 mb-6">Get In Touch</h2> | |
| <p class="text-gray-700 mb-6">Have questions about our coffee, locations, or catering services? We'd love to hear from you!</p> | |
| <div class="mb-8"> | |
| <div class="flex items-start mb-6"> | |
| <div class="bg-amber-100 p-3 rounded-full mr-4"> | |
| <i class="fas fa-envelope text-amber-700"></i> | |
| </div> | |
| <div> | |
| <h3 class="font-bold text-gray-800 mb-1">Email Us</h3> | |
| <p class="text-gray-700">hello@maplebrew.ca</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start mb-6"> | |
| <div class="bg-amber-100 p-3 rounded-full mr-4"> | |
| <i class="fas fa-phone text-amber-700"></i> | |
| </div> | |
| <div> | |
| <h3 class="font-bold text-gray-800 mb-1">Call Us</h3> | |
| <p class="text-gray-700">1-888-555-1234</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="bg-amber-100 p-3 rounded-full mr-4"> | |
| <i class="fas fa-map-marker-alt text-amber-700"></i> | |
| </div> | |
| <div> | |
| <h3 class="font-bold text-gray-800 mb-1">Headquarters</h3> | |
| <p class="text-gray-700">123 Queen Street West<br>Toronto, ON M5H 2M9</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div> | |
| <h3 class="font-bold text-gray-800 mb-4">Follow Us</h3> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="bg-amber-100 hover:bg-amber-200 text-amber-700 p-3 rounded-full transition"><i class="fab fa-instagram"></i></a> | |
| <a href="#" class="bg-amber-100 hover:bg-amber-200 text-amber-700 p-3 rounded-full transition"><i class="fab fa-facebook-f"></i></a> | |
| <a href="#" class="bg-amber-100 hover:bg-amber-200 text-amber-700 p-3 rounded-full transition"><i class="fab fa-twitter"></i></a> | |
| <a href="#" class="bg-amber-100 hover:bg-amber-200 text-amber-700 p-3 rounded-full transition"><i class="fab fa-tiktok"></i></a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="md:w-1/2"> | |
| <div class="bg-amber-50 p-8 rounded-lg shadow-lg"> | |
| <h3 class="font-bold text-xl text-amber-800 mb-6">Send Us a Message</h3> | |
| <form> | |
| <div class="mb-4"> | |
| <label for="name" class="block text-gray-700 mb-2">Name</label> | |
| <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-amber-500"> | |
| </div> | |
| <div class="mb-4"> | |
| <label for="email" class="block text-gray-700 mb-2">Email</label> | |
| <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-amber-500"> | |
| </div> | |
| <div class="mb-4"> | |
| <label for="subject" class="block text-gray-700 mb-2">Subject</label> | |
| <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-amber-500"> | |
| </div> | |
| <div class="mb-6"> | |
| <label for="message" class="block text-gray-700 mb-2">Message</label> | |
| <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-amber-500"></textarea> | |
| </div> | |
| <button type="submit" class="w-full bg-amber-700 hover:bg-amber-600 text-white px-6 py-3 rounded-full font-medium transition">Send Message</button> | |
| </form> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Newsletter Section --> | |
| <section class="py-16 bg-amber-800 text-white"> | |
| <div class="container mx-auto px-6 text-center"> | |
| <h2 class="font-playfair text-3xl font-bold mb-6">Join Our Coffee Club</h2> | |
| <p class="max-w-2xl mx-auto mb-8">Sign up for our newsletter and receive exclusive offers, new product announcements, and Canadian coffee stories straight to your inbox.</p> | |
| <div class="max-w-md mx-auto flex"> | |
| <input type="email" placeholder="Your email address" class="flex-grow px-4 py-3 rounded-l-lg focus:outline-none text-gray-800"> | |
| <button class="bg-amber-600 hover:bg-amber-700 px-6 py-3 rounded-r-lg font-medium transition">Subscribe</button> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="bg-gray-900 text-white py-12"> | |
| <div class="container mx-auto px-6"> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-8"> | |
| <div> | |
| <div class="flex items-center mb-4"> | |
| <i class="fas fa-mug-hot text-amber-600 text-2xl mr-2"></i> | |
| <span class="font-playfair text-xl font-bold">Maple Brew</span> | |
| </div> | |
| <p class="text-gray-400">Bringing authentic Canadian coffee experiences to you since 2010.</p> | |
| </div> | |
| <div> | |
| <h3 class="font-bold text-lg mb-4">Quick Links</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="#home" class="text-gray-400 hover:text-amber-500 transition">Home</a></li> | |
| <li><a href="#about" class="text-gray-400 hover:text-amber-500 transition">About</a></li> | |
| <li><a href="#menu" class="text-gray-400 hover:text-amber-500 transition">Menu</a></li> | |
| <li><a href="#locations" class="text-gray-400 hover:text-amber-500 transition">Locations</a></li> | |
| <li><a href="#contact" class="text-gray-400 hover:text-amber-500 transition">Contact</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="font-bold text-lg mb-4">Legal</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-amber-500 transition">Privacy Policy</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-amber-500 transition">Terms of Service</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-amber-500 transition">Cookie Policy</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-amber-500 transition">Accessibility</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="font-bold text-lg mb-4">Contact</h3> | |
| <ul class="space-y-2"> | |
| <li class="flex items-center"><i class="fas fa-map-marker-alt text-amber-500 mr-2"></i> <span class="text-gray-400">123 Queen St W, Toronto</span></li> | |
| <li class="flex items-center"><i class="fas fa-phone text-amber-500 mr-2"></i> <span class="text-gray-400">1-888-555-1234</span></li> | |
| <li class="flex items-center"><i class="fas fa-envelope text-amber-500 mr-2"></i> <span class="text-gray-400">hello@maplebrew.ca</span></li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-800 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center"> | |
| <p class="text-gray-500 mb-4 md:mb-0">© 2023 Maple Brew. All rights reserved.</p> | |
| <div class="flex space-x-6"> | |
| <a href="#" class="text-gray-500 hover:text-amber-500 transition"><i class="fab fa-instagram"></i></a> | |
| <a href="#" class="text-gray-500 hover:text-amber-500 transition"><i class="fab fa-facebook-f"></i></a> | |
| <a href="#" class="text-gray-500 hover:text-amber-500 transition"><i class="fab fa-twitter"></i></a> | |
| <a href="#" class="text-gray-500 hover:text-amber-500 transition"><i class="fab fa-tiktok"></i></a> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| <!-- Back to Top Button --> | |
| <button id="back-to-top" class="fixed bottom-6 right-6 bg-amber-700 text-white p-3 rounded-full shadow-lg opacity-0 invisible transition-all"> | |
| <i class="fas fa-arrow-up"></i> | |
| </button> | |
| <script> | |
| // Mobile Menu Toggle | |
| const mobileMenuButton = document.getElementById('mobile-menu-button'); | |
| const mobileMenu = document.getElementById('mobile-menu'); | |
| mobileMenuButton.addEventListener('click', () => { | |
| mobileMenu.classList.toggle('hidden'); | |
| }); | |
| // Back to Top Button | |
| const backToTopButton = document.getElementById('back-to-top'); | |
| window.addEventListener('scroll', () => { | |
| if (window.pageYOffset > 300) { | |
| backToTopButton.classList.remove('opacity-0', 'invisible'); | |
| backToTopButton.classList.add('opacity-100', 'visible'); | |
| } else { | |
| backToTopButton.classList.remove('opacity-100', 'visible'); | |
| backToTopButton.classList.add('opacity-0', 'invisible'); | |
| } | |
| }); | |
| backToTopButton.addEventListener('click', () => { | |
| window.scrollTo({ top: 0, behavior: 'smooth' }); | |
| }); | |
| // Smooth scrolling for anchor links | |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { | |
| anchor.addEventListener('click', function(e) { | |
| e.preventDefault(); | |
| const targetId = this.getAttribute('href'); | |
| const targetElement = document.querySelector(targetId); | |
| if (targetElement) { | |
| window.scrollTo({ | |
| top: targetElement.offsetTop - 80, | |
| behavior: 'smooth' | |
| }); | |
| // Close mobile menu if open | |
| if (!mobileMenu.classList.contains('hidden')) { | |
| mobileMenu.classList.add('hidden'); | |
| } | |
| } | |
| }); | |
| }); | |
| // Create floating maple leaves | |
| function createMapleLeaves() { | |
| const container = document.getElementById('maple-leaves'); | |
| const leafCount = 15; | |
| for (let i = 0; i < leafCount; i++) { | |
| const leaf = document.createElement('div'); | |
| leaf.classList.add('maple-leaf'); | |
| // Random position and animation duration | |
| const startX = Math.random() * 100; | |
| const endX = (Math.random() * 40) - 20; // -20 to 20 | |
| const duration = 10 + Math.random() * 20; // 10-30 seconds | |
| leaf.style.left = `${startX}%`; | |
| leaf.style.setProperty('--end-x', `${endX}px`); | |
| leaf.style.animationDuration = `${duration}s`; | |
| leaf.style.animationDelay = `${Math.random() * 10}s`; | |
| leaf.style.opacity = Math.random() * 0.5 + 0.3; // 0.3-0.8 | |
| leaf.style.width = `${Math.random() * 20 + 10}px`; // 10-30px | |
| leaf.style.height = leaf.style.width; | |
| container.appendChild(leaf); | |
| } | |
| } | |
| // Initialize maple leaves when page loads | |
| window.addEventListener('load', createMapleLeaves); | |
| </script> | |
| <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=tezzarida/maple-brew" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |