174 lines
13 KiB
HTML
174 lines
13 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>The Hearthstone Bistro - Rustic Comfort Dining</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<style>
|
|
/* Custom Utility Styles for richer feel */
|
|
.font-serif-display {
|
|
font-family: 'Playfair Display', Georgia, serif;
|
|
}
|
|
.font-body {
|
|
font-family: 'Inter', sans-serif;
|
|
}
|
|
/* Subtle hover effect for cards */
|
|
.card-hover:hover {
|
|
transform: translateY(-6px);
|
|
box-shadow: 0 15px 25px rgba(0, 0, 0, 0.1);
|
|
}
|
|
/* Keyframe animation for subtle entry */
|
|
@keyframes fadeInEntry {
|
|
from { opacity: 0; transform: translateY(20px); }
|
|
to { opacity: 1; transform: translateY(0); }
|
|
}
|
|
.animate-in {
|
|
animation: fadeInEntry 0.8s ease-out forwards;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="bg-gray-50 font-body antialiased text-gray-800">
|
|
|
|
<!-- Header & Navigation -->
|
|
<header class="bg-white shadow-lg sticky top-0 z-10">
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div class="flex justify-between items-center h-20">
|
|
<!-- Logo/Brand -->
|
|
<div class="flex-shrink-0">
|
|
<p class="text-4xl font-serif-display text-red-800 tracking-wider">Hearthstone</p>
|
|
<p class="text-sm text-gray-600 mt-[-4px]">Rustic Dining</p>
|
|
</div>
|
|
<!-- Navigation Links (Hidden on mobile, visible on desktop) -->
|
|
<nav class="hidden md:block">
|
|
<div class="ml-10 flex space-x-8">
|
|
<a href="#menu" class="text-gray-600 hover:text-red-700 px-3 py-2 rounded-md text-lg font-medium transition duration-150 focus:outline-none focus:ring-2 focus:ring-red-500">Menu</a>
|
|
<a href="#about" class="text-gray-600 hover:text-red-700 px-3 py-2 rounded-md text-lg font-medium transition duration-150 focus:outline-none focus:ring-2 focus:ring-red-500">Our Story</a>
|
|
<a href="#reservations" class="text-gray-600 hover:text-red-700 px-3 py-2 rounded-md text-lg font-medium transition duration-150 focus:outline-none focus:ring-2 focus:ring-red-500">Reservations</a>
|
|
<a href="#contact" class="text-gray-600 hover:text-red-700 px-3 py-2 rounded-md text-lg font-medium transition duration-150 focus:outline-none focus:ring-2 focus:ring-red-500">Visit</a>
|
|
</div>
|
|
</nav>
|
|
<!-- Mobile Menu Button (Hamburger Icon) -->
|
|
<div class="md:hidden flex items-center">
|
|
<button id="mobile-menu-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-red-500" aria-controls="mobile-menu" aria-expanded="false">
|
|
<span class="sr-only">Open main menu</span>
|
|
<!-- Icon when menu is closed -->
|
|
<svg id="menu-icon-open" class="block h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
|
|
</svg>
|
|
<!-- Icon when menu is open -->
|
|
<svg id="menu-icon-close" class="hidden h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Mobile Menu (Dropdown) -->
|
|
<div class="md:hidden hidden border-t border-gray-100" id="mobile-menu">
|
|
<div class="px-4 pt-2 pb-3 space-y-1 sm:px-6">
|
|
<a href="#menu" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:bg-red-50 hover:text-red-700 focus:outline-none focus:ring-2 focus:ring-red-500">Menu</a>
|
|
<a href="#about" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:bg-red-50 hover:text-red-700 focus:outline-none focus:ring-2 focus:ring-red-500">Our Story</a>
|
|
<a href="#reservations" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:bg-red-50 hover:text-red-700 focus:outline-none focus:ring-2 focus:ring-red-500">Reservations</a>
|
|
<a href="#contact" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:bg-red-50 hover:text-red-700 focus:outline-none focus:ring-2 focus:ring-red-500">Visit</a>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<main>
|
|
<!-- Hero Section -->
|
|
<section class="relative h-[60vh] md:h-[80vh] bg-cover bg-center flex items-center"
|
|
style="background-image: url('https://images.unsplash.com/photo-1556576859-27736f618c30?w=800&auto=format&fit=crop&q=80&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D');">
|
|
<!-- Overlay for contrast -->
|
|
<div class="absolute inset-0 bg-black/40"></div>
|
|
<div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center z-10">
|
|
<h1 class="text-6xl md:text-8xl font-serif-display text-white drop-shadow-lg leading-tight animate-in" style="animation-delay: 0.1s;">
|
|
Hearty Meals, Honest Flavors.
|
|
</h1>
|
|
<p class="mt-4 text-xl md:text-2xl text-gray-100 font-light max-w-3xl mx-auto animate-in" style="animation-delay: 0.3s;">
|
|
Where tradition meets contemporary comfort. Savor the warmth of a true home-cooked meal in every bite.
|
|
</p>
|
|
<a href="#reservations" class="mt-10 inline-flex items-center justify-center px-10 py-4 border border-transparent text-lg font-semibold rounded-lg shadow-2xl text-white bg-red-700 hover:bg-red-800 transition duration-300 transform hover:scale-105 focus:outline-none focus:ring-4 focus:ring-red-300 animate-in" style="animation-delay: 0.5s;">
|
|
Reserve Your Table
|
|
</a>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Menu Section -->
|
|
<section id="menu" class="py-20 bg-white">
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div class="text-center mb-12 animate-in" style="animation-delay: 0.1s;">
|
|
<h2 class="text-5xl font-serif-display text-red-800 mb-3">Our Culinary Offerings</h2>
|
|
<p class="text-xl text-gray-600">From slow-roasted mains to seasonal delights.</p>
|
|
</div>
|
|
|
|
<!-- Appetizers -->
|
|
<div class="mb-16">
|
|
<h3 class="text-4xl font-serif-display text-gray-700 border-b-4 border-amber-600 pb-2 mb-8 inline-block animate-in" style="animation-delay: 0.3s;">Appetizers</h3>
|
|
<div class="grid md:grid-cols-3 gap-8">
|
|
<!-- Item 1 -->
|
|
<div class="bg-white p-6 rounded-xl shadow-lg transition duration-300 transform card-hover border-t-4 border-amber-500 animate-in" style="animation-delay: 0.5s;">
|
|
<h4 class="text-2xl font-semibold text-red-700 mb-2">Roasted Herb Focaccia</h4>
|
|
<p class="text-gray-600 mb-3 text-sm">Warm, rustic bread topped with fresh rosemary, sea salt, and local olive oil.</p>
|
|
<p class="text-lg font-bold text-gray-900">$9.00</p>
|
|
</div>
|
|
<!-- Item 2 -->
|
|
<div class="bg-white p-6 rounded-xl shadow-lg transition duration-300 transform card-hover border-t-4 border-amber-500 animate-in" style="animation-delay: 0.7s;">
|
|
<h4 class="text-2xl font-semibold text-red-700 mb-2">Smoked Trout Dip</h4>
|
|
<p class="text-gray-600 mb-3 text-sm">Creamy smoked trout blended with sharp cheddar and dill, served with crisp cucumber slices.</p>
|
|
<p class="text-lg font-bold text-gray-900">$14.00</p>
|
|
</div>
|
|
<!-- Item 3 -->
|
|
<div class="bg-white p-6 rounded-xl shadow-lg transition duration-300 transform card-hover border-t-4 border-amber-500 animate-in" style="animation-delay: 0.9s;">
|
|
<h4 class="text-2xl font-semibold text-red-700 mb-2">Wild Mushroom Tartlets</h4>
|
|
<p class="text-gray-600 mb-3 text-sm">Flaky pastry filled with earthy wild mushrooms, goat cheese, and thyme.</p>
|
|
<p class="text-lg font-bold text-gray-900">$11.50</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Mains -->
|
|
<div>
|
|
<h3 class="text-4xl font-serif-display text-gray-700 border-b-4 border-red-600 pb-2 mb-8 inline-block animate-in" style="animation-delay: 0.1s;">Main Courses</h3>
|
|
<div class="space-y-8">
|
|
<!-- Dish 1 -->
|
|
<div class="flex flex-col md:flex-row bg-white p-6 rounded-xl shadow-lg border-l-8 border-red-500 transition duration-300 hover:shadow-2xl animate-in" style="animation-delay: 0.3s;">
|
|
<div class="md:w-2/3">
|
|
<h4 class="text-3xl font-serif-display text-red-800">Slow-Braised Lamb Shank</h4>
|
|
<p class="mt-1 text-gray-600">Tender lamb, slow-cooked for eight hours in rich red wine reduction, served over creamy root vegetable puree.</p>
|
|
<p class="mt-2 text-sm text-gray-500 italic">Accompanied by roasted garlic and seasonal greens.</p>
|
|
</div>
|
|
<div class="md:w-1/3 mt-4 md:mt-0 flex justify-end items-center">
|
|
<span class="text-4xl font-bold text-gray-900">$34.00</span>
|
|
</div>
|
|
</div>
|
|
<!-- Dish 2 -->
|
|
<div class="flex flex-col md:flex-row bg-white p-6 rounded-xl shadow-lg border-l-8 border-red-500 transition duration-300 hover:shadow-2xl animate-in" style="animation-delay: 0.5s;">
|
|
<div class="md:w-2/3">
|
|
<h4 class="text-3xl font-serif-display text-red-800">Pan-Seared Sea Bass</h4>
|
|
<p class="mt-1 text-gray-600">Freshly caught sea bass, perfectly seared, plated atop saffron risotto and drizzled with lemon-butter sauce.</p>
|
|
<p class="mt-2 text-sm text-gray-500 italic">A lighter, elegant choice for the coastal palate.</p>
|
|
</div>
|
|
<div class="md:w-1/3 mt-4 md:mt-0 flex justify-end items-center">
|
|
<span class="text-4xl font-bold text-gray-900">$32.00</span>
|
|
</div>
|
|
</div>
|
|
<!-- Dish 3 -->
|
|
<div class="flex flex-col md:flex-row bg-white p-6 rounded-xl shadow-lg border-l-8 border-red-500 transition duration-300 hover:shadow-2xl animate-in" style="animation-delay: 0.7s;">
|
|
<div class="md:w-2/3">
|
|
<h4 class="text-3xl font-serif-display text-red-800">Harvest Herb Chicken Breast</h4>
|
|
<p class="mt-1 text-gray-600">Pan-seared chicken breast stuffed with seasonal herbs and sun-dried tomatoes, served with truffle mashed potatoes.</p>
|
|
<p class="mt-2 text-sm text-gray-500 italic">A robust, comforting classic elevated.</p>
|
|
</div>
|
|
<div class="md:w-1/3 mt-4 md:mt-0 flex justify-end items-center">
|
|
<span class="text-4xl font-bold text-gray-900">$28.00</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- About Section -->
|
|
<section id="about" class="py-24 bg-gray-100"><div style="position:fixed;right:12px;bottom:12px;z-index:2147483647;background:rgba(17,24,39,.92);color:#fff;padding:8px 10px;border-radius:10px;font:12px/1.3 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;box-shadow:0 8px 20px rgba(0,0,0,.28)">Generated in 30.26s</div> |