|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Bean Bliss Bistro | Artisanal Coffee Haven</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> |
|
|
<script> |
|
|
tailwind.config = { |
|
|
theme: { |
|
|
extend: { |
|
|
colors: { |
|
|
primary: { |
|
|
50: '#f0fdf4', |
|
|
100: '#dcfce7', |
|
|
200: '#bbf7d0', |
|
|
300: '#86efac', |
|
|
400: '#4ade80', |
|
|
500: '#22c55e', |
|
|
600: '#16a34a', |
|
|
700: '#15803d', |
|
|
800: '#166534', |
|
|
900: '#14532d', |
|
|
}, |
|
|
secondary: { |
|
|
50: '#f8fafc', |
|
|
100: '#f1f5f9', |
|
|
200: '#e2e8f0', |
|
|
300: '#cbd5e1', |
|
|
400: '#94a3b8', |
|
|
500: '#64748b', |
|
|
600: '#475569', |
|
|
700: '#334155', |
|
|
800: '#1e293b', |
|
|
900: '#0f172a', |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
</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; |
|
|
} |
|
|
|
|
|
.heading-font { |
|
|
font-family: 'Playfair Display', serif; |
|
|
} |
|
|
|
|
|
.hero-gradient { |
|
|
background: linear-gradient(135deg, rgba(34,197,94,0.1) 0%, rgba(248,250,252,1) 100%); |
|
|
} |
|
|
|
|
|
.menu-card:hover { |
|
|
transform: translateY(-5px); |
|
|
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); |
|
|
} |
|
|
|
|
|
.booking-form { |
|
|
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15); |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-gray-50"> |
|
|
|
|
|
<nav class="bg-white shadow-sm"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<div class="flex justify-between h-16"> |
|
|
<div class="flex items-center"> |
|
|
<div class="flex-shrink-0 flex items-center"> |
|
|
<i data-feather="coffee" class="text-primary-500 h-8 w-8"></i> |
|
|
<span class="ml-2 heading-font text-xl font-bold text-gray-900">Bean Bliss</span> |
|
|
</div> |
|
|
<div class="hidden sm:ml-6 sm:flex sm:space-x-8"> |
|
|
<a href="#" class="border-primary-500 text-gray-900 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Home</a> |
|
|
<a href="#" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Menu</a> |
|
|
<a href="#" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">About</a> |
|
|
<a href="#" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Contact</a> |
|
|
</div> |
|
|
</div> |
|
|
<div class="hidden sm:ml-6 sm:flex sm:items-center"> |
|
|
<button class="bg-primary-500 hover:bg-primary-600 text-white px-4 py-2 rounded-md text-sm font-medium transition duration-150 ease-in-out">Book a Table</button> |
|
|
</div> |
|
|
<div class="-mr-2 flex items-center sm:hidden"> |
|
|
<button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-primary-500" aria-controls="mobile-menu" aria-expanded="false"> |
|
|
<span class="sr-only">Open main menu</span> |
|
|
<i data-feather="menu"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</nav> |
|
|
|
|
|
|
|
|
<div class="hero-gradient"> |
|
|
<div class="max-w-7xl mx-auto py-16 px-4 sm:py-24 sm:px-6 lg:px-8"> |
|
|
<div class="text-center"> |
|
|
<h1 class="heading-font text-4xl font-extrabold tracking-tight text-gray-900 sm:text-5xl md:text-6xl"> |
|
|
<span class="block">Sip. Savor.</span> |
|
|
<span class="block text-primary-600">Repeat.</span> |
|
|
</h1> |
|
|
<p class="mt-3 max-w-md mx-auto text-base text-gray-500 sm:text-lg md:mt-5 md:text-xl md:max-w-3xl"> |
|
|
Artisanal coffee meets cozy ambiance at Bean Bliss. Reserve your table today for an unforgettable café experience. |
|
|
</p> |
|
|
<div class="mt-5 max-w-md mx-auto sm:flex sm:justify-center md:mt-8"> |
|
|
<div class="rounded-md shadow"> |
|
|
<a href="#" class="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-white bg-primary-500 hover:bg-primary-600 md:py-4 md:text-lg md:px-10"> |
|
|
Book Now |
|
|
</a> |
|
|
</div> |
|
|
<div class="mt-3 rounded-md shadow sm:mt-0 sm:ml-3"> |
|
|
<a href="#" class="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-primary-500 bg-white hover:bg-gray-50 md:py-4 md:text-lg md:px-10"> |
|
|
View Menu |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12 sm:py-16"> |
|
|
<div class="booking-form bg-white rounded-lg p-6 md:p-8 lg:p-10"> |
|
|
<h2 class="heading-font text-3xl font-bold text-gray-900 mb-6 text-center">Reserve Your Table</h2> |
|
|
<form class="space-y-6"> |
|
|
<div class="grid grid-cols-1 gap-y-6 gap-x-4 sm:grid-cols-2 md:grid-cols-3"> |
|
|
<div> |
|
|
<label for="name" class="block text-sm font-medium text-gray-700">Full Name</label> |
|
|
<div class="mt-1"> |
|
|
<input type="text" name="name" id="name" autocomplete="name" class="py-3 px-4 block w-full shadow-sm focus:ring-primary-500 focus:border-primary-500 border-gray-300 rounded-md"> |
|
|
</div> |
|
|
</div> |
|
|
<div> |
|
|
<label for="email" class="block text-sm font-medium text-gray-700">Email</label> |
|
|
<div class="mt-1"> |
|
|
<input type="email" name="email" id="email" autocomplete="email" class="py-3 px-4 block w-full shadow-sm focus:ring-primary-500 focus:border-primary-500 border-gray-300 rounded-md"> |
|
|
</div> |
|
|
</div> |
|
|
<div> |
|
|
<label for="phone" class="block text-sm font-medium text-gray-700">Phone Number</label> |
|
|
<div class="mt-1"> |
|
|
<input type="tel" name="phone" id="phone" autocomplete="tel" class="py-3 px-4 block w-full shadow-sm focus:ring-primary-500 focus:border-primary-500 border-gray-300 rounded-md"> |
|
|
</div> |
|
|
</div> |
|
|
<div> |
|
|
<label for="date" class="block text-sm font-medium text-gray-700">Date</label> |
|
|
<div class="mt-1"> |
|
|
<input type="date" name="date" id="date" class="py-3 px-4 block w-full shadow-sm focus:ring-primary-500 focus:border-primary-500 border-gray-300 rounded-md"> |
|
|
</div> |
|
|
</div> |
|
|
<div> |
|
|
<label for="time" class="block text-sm font-medium text-gray-700">Time</label> |
|
|
<div class="mt-1"> |
|
|
<input type="time" name="time" id="time" class="py-3 px-4 block w-full shadow-sm focus:ring-primary-500 focus:border-primary-500 border-gray-300 rounded-md"> |
|
|
</div> |
|
|
</div> |
|
|
<div> |
|
|
<label for="guests" class="block text-sm font-medium text-gray-700">Number of Guests</label> |
|
|
<div class="mt-1"> |
|
|
<select id="guests" name="guests" class="py-3 px-4 block w-full shadow-sm focus:ring-primary-500 focus:border-primary-500 border-gray-300 rounded-md"> |
|
|
<option>1 person</option> |
|
|
<option>2 people</option> |
|
|
<option>3 people</option> |
|
|
<option>4 people</option> |
|
|
<option>5 people</option> |
|
|
<option>6+ people</option> |
|
|
</select> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div> |
|
|
<label for="special-requests" class="block text-sm font-medium text-gray-700">Special Requests</label> |
|
|
<div class="mt-1"> |
|
|
<textarea id="special-requests" name="special-requests" rows="3" class="py-3 px-4 block w-full shadow-sm focus:ring-primary-500 focus:border-primary-500 border-gray-300 rounded-md"></textarea> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-center"> |
|
|
<input id="terms" name="terms" type="checkbox" class="h-4 w-4 text-primary-600 focus:ring-primary-500 border-gray-300 rounded"> |
|
|
<label for="terms" class="ml-2 block text-sm text-gray-700"> |
|
|
I agree to the <a href="#" class="text-primary-600 hover:text-primary-500">terms and conditions</a> |
|
|
</label> |
|
|
</div> |
|
|
<div> |
|
|
<button type="submit" class="w-full flex justify-center py-3 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-primary-500 hover:bg-primary-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500" onclick="alert('Your reservation has been done successfully')"> |
|
|
Confirm Reservation |
|
|
</button> |
|
|
</div> |
|
|
</form> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white py-12 sm:py-16"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<div class="text-center"> |
|
|
<h2 class="heading-font text-3xl font-extrabold tracking-tight text-gray-900 sm:text-4xl"> |
|
|
Why Choose Bean Bliss |
|
|
</h2> |
|
|
<p class="mt-4 max-w-2xl text-xl text-gray-500 mx-auto"> |
|
|
We're more than just a coffee shop. Here's what makes us special. |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
<div class="mt-10"> |
|
|
<div class="space-y-10 md:space-y-0 md:grid md:grid-cols-3 md:gap-x-8 md:gap-y-10"> |
|
|
<div class="relative"> |
|
|
<div class="absolute flex items-center justify-center h-12 w-12 rounded-md bg-primary-500 text-white"> |
|
|
<i data-feather="coffee"></i> |
|
|
</div> |
|
|
<p class="ml-16 text-lg leading-6 font-medium text-gray-900">Premium Coffee</p> |
|
|
<p class="mt-2 ml-16 text-base text-gray-500"> |
|
|
Single-origin beans roasted to perfection by our master baristas. |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
<div class="relative"> |
|
|
<div class="absolute flex items-center justify-center h-12 w-12 rounded-md bg-primary-500 text-white"> |
|
|
<i data-feather="clock"></i> |
|
|
</div> |
|
|
<p class="ml-16 text-lg leading-6 font-medium text-gray-900">Convenient Hours</p> |
|
|
<p class="mt-2 ml-16 text-base text-gray-500"> |
|
|
Open early for morning commuters and late for night owls. |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
<div class="relative"> |
|
|
<div class="absolute flex items-center justify-center h-12 w-12 rounded-md bg-primary-500 text-white"> |
|
|
<i data-feather="wifi"></i> |
|
|
</div> |
|
|
<p class="ml-16 text-lg leading-6 font-medium text-gray-900">Free WiFi</p> |
|
|
<p class="mt-2 ml-16 text-base text-gray-500"> |
|
|
Fast, reliable internet for remote workers and students. |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
<div class="relative"> |
|
|
<div class="absolute flex items-center justify-center h-12 w-12 rounded-md bg-primary-500 text-white"> |
|
|
<i data-feather="smile"></i> |
|
|
</div> |
|
|
<p class="ml-16 text-lg leading-6 font-medium text-gray-900">Friendly Staff</p> |
|
|
<p class="mt-2 ml-16 text-base text-gray-500"> |
|
|
Our team remembers your name and your favorite drink. |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
<div class="relative"> |
|
|
<div class="absolute flex items-center justify-center h-12 w-12 rounded-md bg-primary-500 text-white"> |
|
|
<i data-feather="users"></i> |
|
|
</div> |
|
|
<p class="ml-16 text-lg leading-6 font-medium text-gray-900">Community Hub</p> |
|
|
<p class="mt-2 ml-16 text-base text-gray-500"> |
|
|
Regular events, book clubs, and live music nights. |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
<div class="relative"> |
|
|
<div class="absolute flex items-center justify-center h-12 w-12 rounded-md bg-primary-500 text-white"> |
|
|
<i data-feather="heart"></i> |
|
|
</div> |
|
|
<p class="ml-16 text-lg leading-6 font-medium text-gray-900">Eco-Conscious</p> |
|
|
<p class="mt-2 ml-16 text-base text-gray-500"> |
|
|
Compostable cups and sustainable sourcing practices. |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<footer class="bg-secondary-900"> |
|
|
<div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8"> |
|
|
<div class="xl:grid xl:grid-cols-3 xl:gap-8"> |
|
|
<div class="space-y-8 xl:col-span-1"> |
|
|
<div class="flex items-center"> |
|
|
<i data-feather="coffee" class="text-primary-500 h-8 w-8"></i> |
|
|
<span class="ml-2 heading-font text-xl font-bold text-white">Bean Bliss</span> |
|
|
</div> |
|
|
<p class="text-gray-300 text-base"> |
|
|
Crafting exceptional coffee experiences since 2010. Join us for your next cup. |
|
|
</p> |
|
|
<div class="flex space-x-6"> |
|
|
<a href="#" class="text-gray-400 hover:text-white"> |
|
|
<i data-feather="facebook"></i> |
|
|
</a> |
|
|
<a href="#" class="text-gray-400 hover:text-white"> |
|
|
<i data-feather="instagram"></i> |
|
|
</a> |
|
|
<a href="#" class="text-gray-400 hover:text-white"> |
|
|
<i data-feather="twitter"></i> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mt-12 grid grid-cols-2 gap-8 xl:mt-0 xl:col-span-2"> |
|
|
<div class="md:grid md:grid-cols-2 md:gap-8"> |
|
|
<div> |
|
|
<h3 class="text-sm font-semibold text-gray-300 tracking-wider uppercase"> |
|
|
Navigation |
|
|
</h3> |
|
|
<ul class="mt-4 space-y-4"> |
|
|
<li> |
|
|
<a href="#" class="text-base text-gray-400 hover:text-white">Home</a> |
|
|
</li> |
|
|
<li> |
|
|
<a href="#" class="text-base text-gray-400 hover:text-white">Menu</a> |
|
|
</li> |
|
|
<li> |
|
|
<a href="#" class="text-base text-gray-400 hover:text-white">About Us</a> |
|
|
</li> |
|
|
<li> |
|
|
<a href="#" class="text-base text-gray-400 hover:text-white">Contact</a> |
|
|
</li> |
|
|
</ul> |
|
|
</div> |
|
|
<div class="mt-12 md:mt-0"> |
|
|
<h3 class="text-sm font-semibold text-gray-300 tracking-wider uppercase"> |
|
|
Legal |
|
|
</h3> |
|
|
<ul class="mt-4 space-y-4"> |
|
|
<li> |
|
|
<a href="#" class="text-base text-gray-400 hover:text-white">Privacy Policy</a> |
|
|
</li> |
|
|
<li> |
|
|
<a href="#" class="text-base text-gray-400 hover:text-white">Terms of Service</a> |
|
|
</li> |
|
|
<li> |
|
|
<a href="#" class="text-base text-gray-400 hover:text-white">Cookie Policy</a> |
|
|
</li> |
|
|
</ul> |
|
|
</div> |
|
|
</div> |
|
|
<div class="md:grid md:grid-cols-2 md:gap-8"> |
|
|
<div> |
|
|
<h3 class="text-sm font-semibold text-gray-300 tracking-wider uppercase"> |
|
|
Contact |
|
|
</h3> |
|
|
<ul class="mt-4 space-y-4"> |
|
|
<li class="flex"> |
|
|
<i data-feather="map-pin" class="flex-shrink-0 h-5 w-5 text-gray-400"></i> |
|
|
<span class="ml-3 text-base text-gray-400">123 Brew Street, Coffeetown</span> |
|
|
</li> |
|
|
<li class="flex"> |
|
|
<i data-feather="mail" class="flex-shrink-0 h-5 w-5 text-gray-400"></i> |
|
|
<span class="ml-3 text-base text-gray-400">hello@beanbliss.com</span> |
|
|
</li> |
|
|
<li class="flex"> |
|
|
<i data-feather="phone" class="flex-shrink-0 h-5 w-5 text-gray-400"></i> |
|
|
<span class="ml-3 text-base text-gray-400">(555) 123-4567</span> |
|
|
</li> |
|
|
</ul> |
|
|
</div> |
|
|
<div class="mt-12 md:mt-0"> |
|
|
<h3 class="text-sm font-semibold text-gray-300 tracking-wider uppercase"> |
|
|
Hours |
|
|
</h3> |
|
|
<ul class="mt-4 space-y-4"> |
|
|
<li> |
|
|
<span class="text-base text-gray-400">Mon-Fri: 6am - 10pm</span> |
|
|
</li> |
|
|
<li> |
|
|
<span class="text-base text-gray-400">Saturday: 7am - 11pm</span> |
|
|
</li> |
|
|
<li> |
|
|
<span class="text-base text-gray-400">Sunday: 7am - 9pm</span> |
|
|
</li> |
|
|
</ul> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mt-12 border-t border-gray-700 pt-8"> |
|
|
<p class="text-base text-gray-400 text-center"> |
|
|
© 2023 Bean Bliss Bistro. All rights reserved. |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
</footer> |
|
|
|
|
|
<script> |
|
|
feather.replace(); |
|
|
</script> |
|
|
</body> |
|
|
</html> |
