Hugging Face's logo

Spaces:
spwotton
/
taverna2
Running

App Files Community
taverna2 / index.html
spwotton's picture
spwotton
Add 3 files
1ef1b05 verified
raw
history blame contribute delete
40.1 kB
<!DOCTYPE html>
<html lang="en" class="scroll-smooth">
<head>
 <meta charset="UTF-8" />
 <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 <title>Taverna in Bayview | Authentic Mediterranean Cuisine</title>
 <meta name="description" content="Family-owned Mediterranean restaurant in Bayview serving fresh Greek & Italian classics since 2005." />
 <link rel="canonical" href="https://tavernainbayview.com/" />
 <!-- Open Graph / Twitter Card -->
 <meta property="og:title" content="Taverna in Bayview" />
 <meta property="og:description" content="Authentic Mediterranean flavors on the Bayview waterfront." />
 <meta property="og:image" content="/og-cover.jpg" />
 <meta property="og:url" content="https://tavernainbayview.com/" />
 <meta name="twitter:card" content="summary_large_image" />
<!-- Tailwind -->
 <script src="https://cdn.tailwindcss.com"></script>
 <script>
 tailwind.config = {
 darkMode: 'class',
 theme: {
 extend: {
 colors: {
 brand: {
 primary: '#f59e0b', // amber-500
 dark: '#92400e' // amber-900
 }
 },
 fontFamily: {
 base: ['Inter','sans-serif'],
 display: ['Playfair Display', 'serif']
 }
 }
 }
 }
 </script>
 <!-- Font Awesome -->
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" integrity="sha512-pq1pS4v..." crossorigin="anonymous" referrerpolicy="no-referrer" />
 <!-- AOS Animation -->
 <link rel="stylesheet" href="https://unpkg.com/aos@2.3.4/dist/aos.css" />
 <!-- Google Fonts -->
 <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&display=swap" rel="stylesheet">
 <!-- Favicon & Preload hero for LCP -->
 <link rel="icon" type="image/png" sizes="32x32" href="/favicon.png" />
 <link rel="preload" as="image" href="https://images.unsplash.com/photo-1555396273-367ea4eb4db5?auto=format&fit=crop&w=1920&q=80" />
<!-- Custom tweaks not possible with Tailwind utility alone -->
 <style>
 .hero::before{content:"";position:absolute;inset:0;background:rgba(0,0,0,.55);} /* overlay */
 .menu-item:hover{transform:translateY(-4px);box-shadow:0 8px 16px rgba(0,0,0,.15);} /* lift card */
 .nav-link:after{content:"";display:block;height:2px;background:#f59e0b;width:0;transition:width .3s;}
 .nav-link:hover:after{width:100%;}
 .footer-link{@apply text-gray-400 hover:text-brand-primary transition-colors;}
 .social-icon{@apply w-10 h-10 flex items-center justify-center rounded-full bg-gray-700 hover:bg-brand-primary text-white transition-colors;}
 .form-input{@apply w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-brand-primary focus:border-brand-primary outline-none transition dark:bg-gray-800 dark:text-white;}
 .scroll-top{@apply fixed bottom-8 right-8 w-12 h-12 flex items-center justify-center rounded-full bg-brand-primary text-white shadow-lg z-50 opacity-0 invisible transition-all duration-300;}
 .scroll-top.active{@apply opacity-100 visible;}
 .scroll-top:hover{@apply bg-brand-dark transform scale-110;}
 .special-badge{@apply absolute -top-3 -right-3 bg-brand-primary text-white font-bold text-sm px-3 py-1 rounded-full shadow-md z-10;}
 .floating-label{@apply absolute left-4 -top-2 px-2 bg-white dark:bg-gray-800 text-sm text-gray-500 transition-all duration-200 pointer-events-none;}
 .form-group{@apply relative;}
 input:focus + .floating-label,
 textarea:focus + .floating-label,
 input:not(:placeholder-shown) + .floating-label,
 textarea:not(:placeholder-shown) + .floating-label{@apply -top-2 text-brand-primary text-xs;}
 </style>
</head>
<body class="font-base bg-gray-50 text-gray-800 dark:bg-gray-900 dark:text-gray-200">
<!-- ================================================= HEADER -->
<header class="sticky top-0 z-50 bg-white/95 backdrop-blur shadow-md dark:bg-gray-800/95" data-aos="fade-down">
 <div class="max-w-7xl mx-auto px-6 py-4 flex items-center justify-between">
 <a href="#home" class="flex items-center gap-3">
 <i class="fas fa-utensils text-3xl text-brand-primary"></i>
 <span class="text-2xl font-bold">Taverna in Bayview</span>
 </a>
 <nav class="hidden md:flex gap-8">
 <a href="#home" class="nav-link">Home</a>
 <a href="#menu" class="nav-link">Menu</a>
 <a href="#about" class="nav-link">About</a>
 <a href="#gallery" class="nav-link">Gallery</a>
 <a href="#contact" class="nav-link">Contact</a>
 </nav>
 <div class="flex items-center gap-4">
 <button id="themeToggle" aria-label="Toggle dark mode" class="mr-3 text-xl">
 <i class="far fa-moon"></i>
 </button>
 <a href="#contact" class="hidden md:block bg-brand-primary hover:bg-brand-dark text-white font-bold py-2 px-6 rounded-full transition-transform hover:scale-105">
 Reserve Now
 </a>
 <button id="mobile-menu-button" class="md:hidden text-2xl" aria-label="Open menu">
 <i class="fas fa-bars"></i>
 </button>
 </div>
 </div>
 <nav id="mobile-menu" class="hidden md:hidden bg-white dark:bg-gray-800 pb-4">
 <a href="#home" class="block py-2 px-6 nav-link">Home</a>
 <a href="#menu" class="block py-2 px-6 nav-link">Menu</a>
 <a href="#about" class="block py-2 px-6 nav-link">About</a>
 <a href="#gallery" class="block py-2 px-6 nav-link">Gallery</a>
 <a href="#contact" class="block py-2 px-6 nav-link">Contact</a>
 </nav>
</header>
<!-- ================================================= HERO -->
<section id="home" class="relative hero min-h-screen flex items-center justify-center text-center text-white bg-[url('https://images.unsplash.com/photo-1555396273-367ea4eb4db5?auto=format&fit=crop&w=1920&q=80')] bg-cover bg-center" data-aos="fade">
 <div class="relative z-10 max-w-3xl px-6">
 <h1 class="text-5xl md:text-6xl font-extrabold mb-6 drop-shadow-lg font-display">Authentic Mediterranean Flavors</h1>
 <p class="text-xl md:text-2xl mb-8">Experience the taste of the Mediterranean right here in Bayview</p>
 <div class="flex flex-col sm:flex-row justify-center gap-4">
 <a href="#menu" class="bg-brand-primary hover:bg-brand-dark text-white font-bold py-3 px-8 rounded-full transition-transform hover:scale-105">View Our Menu</a>
 <a href="#contact" class="border-2 border-white hover:bg-white hover:text-gray-800 text-white font-bold py-3 px-8 rounded-full transition-transform hover:scale-105">Make a Reservation</a>
 </div>
 </div>
 <div class="absolute bottom-8 left-0 right-0 flex justify-center">
 <a href="#about" class="text-white text-3xl animate-bounce">
 <i class="fas fa-chevron-down"></i>
 </a>
 </div>
</section>
<!-- ================================================= SPECIALS -->
<section class="py-16 bg-white dark:bg-gray-900">
 <div class="max-w-7xl mx-auto px-6">
 <div class="text-center mb-12" data-aos="fade-up">
 <h2 class="text-3xl md:text-4xl font-bold mb-4 font-display">Today's Specials</h2>
 <p class="max-w-2xl mx-auto text-gray-600 dark:text-gray-300">Chef's selection of seasonal Mediterranean dishes</p>
 </div>
 <div class="grid grid-cols-1 md:grid-cols-3 gap-8" data-aos="fade-up" data-aos-delay="100">
 <!-- Special 1 -->
 <div class="relative bg-gray-50 dark:bg-gray-800 rounded-lg overflow-hidden shadow-lg group">
 <div class="absolute top-0 left-0 bg-brand-primary text-white px-4 py-1 font-bold">NEW</div>
 <img src="https://images.unsplash.com/photo-1546069901-ba9599a8e63c?auto=format&fit=crop&w=800&q=80" alt="Lamb Souvlaki" class="w-full h-64 object-cover group-hover:scale-105 transition duration-500">
 <div class="p-6">
 <div class="flex justify-between items-start mb-2">
 <h3 class="text-xl font-bold">Lamb Souvlaki</h3>
 <span class="text-brand-primary font-bold">$18.99</span>
 </div>
 <p class="text-gray-600 dark:text-gray-300 mb-4">Tender marinated lamb skewers with roasted vegetables and tzatziki.</p>
 <button class="w-full bg-brand-primary hover:bg-brand-dark text-white font-bold py-2 rounded-lg transition">
 Order Now
 </button>
 </div>
 </div>
 <!-- Special 2 -->
 <div class="relative bg-gray-50 dark:bg-gray-800 rounded-lg overflow-hidden shadow-lg group">
 <div class="absolute top-0 left-0 bg-red-500 text-white px-4 py-1 font-bold">CHEF'S PICK</div>
 <img src="https://images.unsplash.com/photo-1512621776951-a57141f2eefd?auto=format&fit=crop&w=800&q=80" alt="Seafood Paella" class="w-full h-64 object-cover group-hover:scale-105 transition duration-500">
 <div class="p-6">
 <div class="flex justify-between items-start mb-2">
 <h3 class="text-xl font-bold">Seafood Paella</h3>
 <span class="text-brand-primary font-bold">$22.99</span>
 </div>
 <p class="text-gray-600 dark:text-gray-300 mb-4">Traditional Spanish rice dish with fresh seafood and saffron.</p>
 <button class="w-full bg-brand-primary hover:bg-brand-dark text-white font-bold py-2 rounded-lg transition">
 Order Now
 </button>
 </div>
 </div>
 <!-- Special 3 -->
 <div class="relative bg-gray-50 dark:bg-gray-800 rounded-lg overflow-hidden shadow-lg group">
 <img src="https://images.unsplash.com/photo-1473093295043-cdd812d0e601?auto=format&fit=crop&w=800&q=80" alt="Eggplant Parmigiana" class="w-full h-64 object-cover group-hover:scale-105 transition duration-500">
 <div class="p-6">
 <div class="flex justify-between items-start mb-2">
 <h3 class="text-xl font-bold">Eggplant Parmigiana</h3>
 <span class="text-brand-primary font-bold">$15.99</span>
 </div>
 <p class="text-gray-600 dark:text-gray-300 mb-4">Layers of eggplant, tomato sauce, and melted mozzarella.</p>
 <button class="w-full bg-brand-primary hover:bg-brand-dark text-white font-bold py-2 rounded-lg transition">
 Order Now
 </button>
 </div>
 </div>
 </div>
 </div>
</section>
<!-- ================================================= ABOUT -->
<section id="about" class="py-20 bg-gray-50 dark:bg-gray-950" data-aos="fade-up">
 <div class="max-w-7xl mx-auto px-6 flex flex-col md:flex-row items-center gap-12">
 <div class="md:w-1/2 space-y-6">
 <h2 class="text-3xl md:text-4xl font-bold font-display">Our Story</h2>
 <p class="text-gray-600 dark:text-gray-300">Founded in 2005, Taverna in Bayview brings the authentic flavors of the Mediterranean to your table. Our recipes have been passed down through generations, ensuring an unforgettable dining experience.</p>
 <p class="text-gray-600 dark:text-gray-300">We source only the freshest ingredients, many imported directly from the Mediterranean region, to create dishes that transport you to the sunny coasts of Greece, Italy, and beyond.</p>
 <div class="grid grid-cols-2 gap-4">
 <div class="bg-brand-primary/10 p-4 rounded-lg text-center hover:bg-brand-primary/20 transition">
 <i class="fas fa-seedling text-brand-primary text-2xl mb-2"></i>
 <h3 class="font-semibold">Fresh Ingredients</h3>
 <p class="text-sm text-gray-600 dark:text-gray-300">Locally sourced & imported</p>
 </div>
 <div class="bg-brand-primary/10 p-4 rounded-lg text-center hover:bg-brand-primary/20 transition">
 <i class="fas fa-heart text-brand-primary text-2xl mb-2"></i>
 <h3 class="font-semibold">Family Recipes</h3>
 <p class="text-sm text-gray-600 dark:text-gray-300">Handed down for generations</p>
 </div>
 <div class="bg-brand-primary/10 p-4 rounded-lg text-center hover:bg-brand-primary/20 transition">
 <i class="fas fa-wine-glass-alt text-brand-primary text-2xl mb-2"></i>
 <h3 class="font-semibold">Fine Wines</h3>
 <p class="text-sm text-gray-600 dark:text-gray-300">Mediterranean selection</p>
 </div>
 <div class="bg-brand-primary/10 p-4 rounded-lg text-center hover:bg-brand-primary/20 transition">
 <i class="fas fa-utensils text-brand-primary text-2xl mb-2"></i>
 <h3 class="font-semibold">Authentic Cuisine</h3>
 <p class="text-sm text-gray-600 dark:text-gray-300">Traditional preparation</p>
 </div>
 </div>
 </div>
 <div class="md:w-1/2 relative">
 <img src="https://images.unsplash.com/photo-1559847844-5315695dadae?auto=format&fit=crop&w=1280&q=80" alt="Mediterranean cuisine" class="rounded-lg shadow-lg w-full h-auto" loading="lazy" />
 <div class="absolute -bottom-6 -right-6 bg-white dark:bg-gray-800 p-6 rounded-lg shadow-lg w-3/4" data-aos="fade-left" data-aos-delay="300">
 <h3 class="text-xl font-bold mb-2">Meet Our Chef</h3>
 <p class="text-gray-600 dark:text-gray-300 mb-4">Chef Andreas Papadopoulos brings 25 years of culinary expertise from Athens to Bayview.</p>
 <a href="#" class="text-brand-primary font-semibold hover:underline">Read Bio →</a>
 </div>
 </div>
 </div>
</section>
<!-- ================================================= GALLERY -->
<section id="gallery" class="py-20 bg-white dark:bg-gray-900">
 <div class="max-w-7xl mx-auto px-6">
 <div class="text-center mb-12" data-aos="fade-up">
 <h2 class="text-3xl md:text-4xl font-bold mb-4 font-display">Our Gallery</h2>
 <p class="max-w-2xl mx-auto text-gray-600 dark:text-gray-300">A glimpse into our restaurant and culinary creations</p>
 </div>
 <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6" data-aos="fade-up" data-aos-delay="100">
 <div class="group relative overflow-hidden rounded-lg shadow-lg">
 <img src="https://images.unsplash.com/photo-1555396273-367ea4eb4db5?auto=format&fit=crop&w=600&q=80" alt="Restaurant interior" class="w-full h-64 object-cover transform group-hover:scale-110 transition duration-500">
 <div class="absolute inset-0 bg-black/30 flex items-center justify-center opacity-0 group-hover:opacity-100 transition duration-300">
 <button class="bg-brand-primary hover:bg-brand-dark text-white p-3 rounded-full">
 <i class="fas fa-search-plus text-xl"></i>
 </button>
 </div>
 </div>
 <div class="group relative overflow-hidden rounded-lg shadow-lg">
 <img src="https://images.unsplash.com/photo-1544025162-d76694265947?auto=format&fit=crop&w=600&q=80" alt="Dining area" class="w-full h-64 object-cover transform group-hover:scale-110 transition duration-500">
 <div class="absolute inset-0 bg-black/30 flex items-center justify-center opacity-0 group-hover:opacity-100 transition duration-300">
 <button class="bg-brand-primary hover:bg-brand-dark text-white p-3 rounded-full">
 <i class="fas fa-search-plus text-xl"></i>
 </button>
 </div>
 </div>
 <div class="group relative overflow-hidden rounded-lg shadow-lg">
 <img src="https://images.unsplash.com/photo-1517248135467-4dbc1a927541?auto=format&fit=crop&w=600&q=80" alt="Bar area" class="w-full h-64 object-cover transform group-hover:scale-110 transition duration-500">
 <div class="absolute inset-0 bg-black/30 flex items-center justify-center opacity-0 group-hover:opacity-100 transition duration-300">
 <button class="bg-brand-primary hover:bg-brand-dark text-white p-3 rounded-full">
 <i class="fas fa-search-plus text-xl"></i>
 </button>
 </div>
 </div>
 <div class="group relative overflow-hidden rounded-lg shadow-lg">
 <img src="https://images.unsplash.com/photo-1565557623262-b51c2513a641?auto=format&fit=crop&w=600&q=80" alt="Food presentation" class="w-full h-64 object-cover transform group-hover:scale-110 transition duration-500">
 <div class="absolute inset-0 bg-black/30 flex items-center justify-center opacity-0 group-hover:opacity-100 transition duration-300">
 <button class="bg-brand-primary hover:bg-brand-dark text-white p-3 rounded-full">
 <i class="fas fa-search-plus text-xl"></i>
 </button>
 </div>
 </div>
 <div class="group relative overflow-hidden rounded-lg shadow-lg">
 <img src="https://images.unsplash.com/photo-1414235077428-338989a2e8c0?auto=format&fit=crop&w=600&q=80" alt="Chef preparing food" class="w-full h-64 object-cover transform group-hover:scale-110 transition duration-500">
 <div class="absolute inset-0 bg-black/30 flex items-center justify-center opacity-0 group-hover:opacity-100 transition duration-300">
 <button class="bg-brand-primary hover:bg-brand-dark text-white p-3 rounded-full">
 <i class="fas fa-search-plus text-xl"></i>
 </button>
 </div>
 </div>
 <div class="group relative overflow-hidden rounded-lg shadow-lg">
 <img src="https://images.unsplash.com/photo-1555396273-367ea4eb4db5?auto=format&fit=crop&w=600&q=80" alt="Outdoor seating" class="w-full h-64 object-cover transform group-hover:scale-110 transition duration-500">
 <div class="absolute inset-0 bg-black/30 flex items-center justify-center opacity-0 group-hover:opacity-100 transition duration-300">
 <button class="bg-brand-primary hover:bg-brand-dark text-white p-3 rounded-full">
 <i class="fas fa-search-plus text-xl"></i>
 </button>
 </div>
 </div>
 </div>
 <div class="text-center mt-12">
 <button class="bg-brand-primary hover:bg-brand-dark text-white font-bold py-3 px-8 rounded-full transition-transform hover:scale-105">
 View Full Gallery
 </button>
 </div>
 </div>
</section>
<!-- ================================================= MENU -->
<section id="menu" class="py-20 bg-gray-50 dark:bg-gray-950" data-aos="fade-up">
 <div class="max-w-7xl mx-auto px-6">
 <h2 class="text-3xl md:text-4xl font-bold text-center mb-6 font-display">Our Menu</h2>
 <p class="text-center text-gray-600 dark:text-gray-300 max-w-2xl mx-auto mb-12">Explore our selection of authentic Mediterranean dishes</p>
<div class="flex justify-center mb-12">
 <div class="inline-flex rounded-md shadow-sm" role="group">
 <button type="button" class="px-4 py-2 text-sm font-medium rounded-l-lg bg-brand-primary text-white">
 All Menu
 </button>
 <button type="button" class="px-4 py-2 text-sm font-medium bg-white dark:bg-gray-800 hover:bg-gray-100 dark:hover:bg-gray-700">
 Appetizers
 </button>
 <button type="button" class="px-4 py-2 text-sm font-medium bg-white dark:bg-gray-800 hover:bg-gray-100 dark:hover:bg-gray-700">
 Main Courses
 </button>
 <button type="button" class="px-4 py-2 text-sm font-medium rounded-r-lg bg-white dark:bg-gray-800 hover:bg-gray-100 dark:hover:bg-gray-700">
 Desserts
 </button>
 </div>
 </div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
 <!-- Greek Salad -->
 <article class="menu-item bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md transition duration-300">
 <header class="flex justify-between items-center mb-4">
 <h3 class="text-xl font-bold">Greek Salad</h3>
 <span class="bg-brand-primary/20 text-brand-primary px-3 py-1 rounded-full text-sm font-semibold">$9.99</span>
 </header>
 <p class="text-gray-600 dark:text-gray-300 mb-4">Fresh tomatoes, cucumbers, red onion, feta cheese, and Kalamata olives, dressed with olive oil and oregano.</p>
 <footer class="flex justify-between items-center">
 <span class="text-brand-primary font-medium">Appetizer</span>
 <button aria-label="Add Greek Salad" class="text-brand-primary text-xl hover:text-brand-dark"><i class="fas fa-plus-circle"></i></button>
 </footer>
 </article>
 <!-- Gyros Platter -->
 <article class="menu-item bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md transition duration-300">
 <header class="flex justify-between items-center mb-4">
 <h3 class="text-xl font-bold">Gyros Platter</h3>
 <span class="bg-brand-primary/20 text-brand-primary px-3 py-1 rounded-full text-sm font-semibold">$14.99</span>
 </header>
 <p class="text-gray-600 dark:text-gray-300 mb-4">Tender slices of seasoned meat with pita bread, tzatziki sauce, tomatoes, onions, and a side of Greek fries.</p>
 <footer class="flex justify-between items-center">
 <span class="text-brand-primary font-medium">Main Course</span>
 <button aria-label="Add Gyros Platter" class="text-brand-primary text-xl hover:text-brand-dark"><i class="fas fa-plus-circle"></i></button>
 </footer>
 </article>
 <!-- Moussaka -->
 <article class="menu-item bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md transition duration-300">
 <header class="flex justify-between items-center mb-4">
 <h3 class="text-xl font-bold">Moussaka</h3>
 <span class="bg-brand-primary/20 text-brand-primary px-3 py-1 rounded-full text-sm font-semibold">$16.99</span>
 </header>
 <p class="text-gray-600 dark:text-gray-300 mb-4">Layers of eggplant, spiced ground meat, and creamy béchamel sauce, baked to perfection.</p>
 <footer class="flex justify-between items-center">
 <span class="text-brand-primary font-medium">Main Course</span>
 <button aria-label="Add Moussaka" class="text-brand-primary text-xl hover:text-brand-dark"><i class="fas fa-plus-circle"></i></button>
 </footer>
 </article>
 <!-- Spanakopita -->
 <article class="menu-item bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md transition duration-300">
 <header class="flex justify-between items-center mb-4">
 <h3 class="text-xl font-bold">Spanakopita</h3>
 <span class="bg-brand-primary/20 text-brand-primary px-3 py-1 rounded-full text-sm font-semibold">$8.50</span>
 </header>
 <p class="text-gray-600 dark:text-gray-300 mb-4">Flaky phyllo dough filled with spinach, feta cheese, onions, and herbs.</p>
 <footer class="flex justify-between items-center">
 <span class="text-brand-primary font-medium">Appetizer</span>
 <button aria-label="Add Spanakopita" class="text-brand-primary text-xl hover:text-brand-dark"><i class="fas fa-plus-circle"></i></button>
 </footer>
 </article>
 <!-- Grilled Octopus -->
 <article class="menu-item bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md transition duration-300">
 <header class="flex justify-between items-center mb-4">
 <h3 class="text-xl font-bold">Grilled Octopus</h3>
 <span class="bg-brand-primary/20 text-brand-primary px-3 py-1 rounded-full text-sm font-semibold">$18.99</span>
 </header>
 <p class="text-gray-600 dark:text-gray-300 mb-4">Tender octopus grilled to perfection, served with lemon, olive oil, and oregano.</p>
 <footer class="flex justify-between items-center">
 <span class="text-brand-primary font-medium">Main Course</span>
 <button aria-label="Add Grilled Octopus" class="text-brand-primary text-xl hover:text-brand-dark"><i class="fas fa-plus-circle"></i></button>
 </footer>
 </article>
 <!-- Baklava -->
 <article class="menu-item bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md transition duration-300">
 <header class="flex justify-between items-center mb-4">
 <h3 class="text-xl font-bold">Baklava</h3>
 <span class="bg-brand-primary/20 text-brand-primary px-3 py-1 rounded-full text-sm font-semibold">$7.99</span>
 </header>
 <p class="text-gray-600 dark:text-gray-300 mb-4">Sweet pastry made of layers of phyllo filled with chopped nuts and sweetened with syrup.</p>
 <footer class="flex justify-between items-center">
 <span class="text-brand-primary font-medium">Dessert</span>
 <button aria-label="Add Baklava" class="text-brand-primary text-xl hover:text-brand-dark"><i class="fas fa-plus-circle"></i></button>
 </footer>
 </article>
 </div>
 <div class="text-center mt-12">
 <a href="/full-menu.pdf" target="_blank" class="inline-block bg-brand-primary hover:bg-brand-dark text-white font-bold py-3 px-8 rounded-full transition-transform hover:scale-105">
 Download Full Menu ↗
 </a>
 </div>
 </div>
</section>
<!-- ================================================= TESTIMONIALS -->
<section class="py-20 bg-brand-primary/10" data-aos="fade-up">
 <div class="max-w-7xl mx-auto px-6">
 <h2 class="text-3xl md:text-4xl font-bold mb-16 text-center text-gray-800 dark:text-gray-100 font-display">What Our Guests Say</h2>
 <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
 <figure class="bg-white dark:bg-gray-800 p-8 rounded-lg shadow-md" data-aos="fade-up" data-aos-delay="100">
 <div class="flex mb-4 text-brand-primary">★★★★★</div>
 <blockquote class="text-gray-600 dark:text-gray-300 mb-6">"The best Mediterranean food I've had outside of Greece! The moussaka is absolutely divine."</blockquote>
 <figcaption class="flex items-center">
 <img src="https://randomuser.me/api/portraits/women/32.jpg" alt="Sarah J." class="w-12 h-12 rounded-full mr-4" />
 <div><span class="font-bold">Sarah J.</span><br /><span class="text-sm text-gray-500">Local Food Critic</span></div>
 </figcaption>
 </figure>
 <figure class="bg-white dark:bg-gray-800 p-8 rounded-lg shadow-md" data-aos="fade-up" data-aos-delay="200">
 <div class="flex mb-4 text-brand-primary">★★★★★</div>
 <blockquote class="text-gray-600 dark:text-gray-300 mb-6">"Every dish is prepared with such care and authenticity. The grilled octopus is a must‑try!"</blockquote>
 <figcaption class="flex items-center">
 <img src="https://randomuser.me/api/portraits/men/75.jpg" alt="Michael T." class="w-12 h-12 rounded-full mr-4" />
 <div><span class="font-bold">Michael T.</span><br /><span class="text-sm text-gray-500">Regular Customer</span></div>
 </figcaption>
 </figure>
 <figure class="bg-white dark:bg-gray-800 p-8 rounded-lg shadow-md" data-aos="fade-up" data-aos-delay="300">
 <div class="flex mb-4 text-brand-primary">★★★★☆</div>
 <blockquote class="text-gray-600 dark:text-gray-300 mb-6">"The atmosphere is wonderful and the service is excellent. We come here for every special occasion."</blockquote>
 <figcaption class="flex items-center">
 <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="Lisa M." class="w-12 h-12 rounded-full mr-4" />
 <div><span class="font-bold">Lisa M.</span><br /><span class="text-sm text-gray-500">Bayview Resident</span></div>
 </figcaption>
 </figure>
 </div>
 </div>
</section>
<!-- ================================================= EVENTS -->
<section class="py-20 bg-white dark:bg-gray-900">
 <div class="max-w-7xl mx-auto px-6">
 <div class="text-center mb-12" data-aos="fade-up">
 <h2 class="text-3xl md:text-4xl font-bold mb-4 font-display">Upcoming Events</h2>
 <p class="max-w-2xl mx-auto text-gray-600 dark:text-gray-300">Join us for special evenings of food, wine, and Mediterranean culture</p>
 </div>
 <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
 <!-- Event 1 -->
 <div class="bg-gray-50 dark:bg-gray-800 rounded-lg overflow-hidden shadow-lg flex flex-col md:flex-row" data-aos="fade-right">
 <div class="md:w-1/3 bg-brand-primary text-white p-6 flex flex-col items-center justify-center">
 <div class="text-4xl font-bold">15</div>
 <div class="text-xl uppercase">June</div>
 <div class="mt-4 text-sm">7:00 PM</div>
 </div>
 <div class="md:w-2/3 p-6">
 <h3 class="text-xl font-bold mb-2">Greek Wine Tasting</h3>
 <p class="text-gray-600 dark:text-gray-300 mb-4">Sample a selection of premium Greek wines paired with artisanal cheeses.</p>
 <div class="flex justify-between items-center">
 <span class="text-sm text-gray-500">$45 per person</span>
 <button class="bg-brand-primary hover:bg-brand-dark text-white font-bold py-2 px-4 rounded-full text-sm transition">
 Reserve Spot
 </button>
 </div>
 </div>
 </div>
 <!-- Event 2 -->
 <div class="bg-gray-50 dark:bg-gray-800 rounded-lg overflow-hidden shadow-lg flex flex-col md:flex-row" data-aos="fade-left">
 <div class="md:w-1/3 bg-brand-primary text-white p-6 flex flex-col items-center justify-center">
 <div class="text-4xl font-bold">22</div>
 <div class="text-xl uppercase">June</div>
 <div class="mt-4 text-sm">6:30 PM</div>
 </div>
 <div class="md:w-2/3 p-6">
 <h3 class="text-xl font-bold mb-2">Live Bouzouki Night</h3>
 <p class="text-gray-600 dark:text-gray-300 mb-4">Traditional Greek music performance while you enjoy our special meze platter.</p>
 <div class="flex justify-between items-center">
 <span class="text-sm text-gray-500">No cover charge</span>
 <button class="bg-brand-primary hover:bg-brand-dark text-white font-bold py-2 px-4 rounded-full text-sm transition">
 Learn More
 </button>
 </div>
 </div>
 </div>
 </div>
 <div class="text-center mt-12">
 <button class="border-2 border-brand-primary text-brand-primary hover:bg-brand-primary hover:text-white font-bold py-3 px-8 rounded-full transition">
 View All Events
 </button>
 </div>
 </div>
</section>
<!-- ================================================= CONTACT -->
<section id="contact" class="py-20 bg-gray-50 dark:bg-gray-950" data-aos="fade-up">
 <div class="max-w-7xl mx-auto px-6 flex flex-col md:flex-row gap-12">
 <div class="md:w-1/2 space-y-8">
 <h3 class="text-2xl font-bold font-display">Visit Us</h3>
 <address class="not-italic space-y-4 text-gray-600 dark:text-gray-300">
 <p><i class="fas fa-map-marker-alt text-brand-primary mr-2"></i>123 Mediterranean Way, Bayview, CA 94010</p>
 <p><i class="fas fa-phone-alt text-brand-primary mr-2"></i>(123) 456-7890</p>
 <p><i class="fas fa-envelope text-brand-primary mr-2"></i><a href="mailto:info@tavernainbayview.com" class="hover:underline">info@tavernainbayview.com</a></p>
 </address>
<div class="relative h-96 rounded-lg overflow-hidden shadow-lg">
 <iframe
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3153.158217398083!2d-122.4194159242696!3d37.77492997185836!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x80859a6d00690021%3A0x4a501367f076adff!2sSan%20Francisco%2C%20CA!5e0!3m2!1sen!2sus!4v1710000000000!5m2!1sen!2sus"
width="100%"
height="100%"
style="border:0;"
allowfullscreen=""
loading="lazy"
referrerpolicy="no-referrer-when-downgrade">
 </iframe>
 </div>
<h3 class="text-2xl font-bold font-display">Hours</h3>
 <ul class="space-y-2 text-gray-600 dark:text-gray-300">
 <li class="flex justify-between"><span>Mon – Thu</span><span>11 AM – 10 PM</span></li>
 <li class="flex justify-between"><span>Fri & Sat</span><span>11 AM – 11 PM</span></li>
 <li class="flex justify-between"><span>Sunday</span><span>10 AM – 9 PM</span></li>
 </ul>
 </div>
 <div class="md:w-1/2">
 <h3 class="text-2xl font-bold mb-6 font-display">Make a Reservation</h3>
 <form class="grid grid-cols-1 gap-4" netlify>
 <div class="form-group">
 <input type="text" name="name" required class="form-input" placeholder=" " />
 <label class="floating-label">Full Name</label>
 </div>
 <div class="form-group">
 <input type="email" name="email" required class="form-input" placeholder=" " />
 <label class="floating-label">Email</label>
 </div>
 <div class="form-group">
 <input type="tel" name="phone" required class="form-input" placeholder=" " />
 <label class="floating-label">Phone</label>
 </div>
 <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
 <div class="form-group">
 <input type="date" name="date" class="form-input" required />
 <label class="floating-label">Date</label>
 </div>
 <div class="form-group">
 <input type="time" name="time" class="form-input" required />
 <label class="floating-label">Time</label>
 </div>
 </div>
 <div class="form-group">
 <select name="guests" class="form-input">
 <option value="" selected disabled hidden></option>
 <option value="1">1 person</option>
 <option value="2">2 people</option>
 <option value="3">3 people</option>
 <option value="4">4 people</option>
 <option value="5">5 people</option>
 <option value="6">6 + people</option>
 </select>
 <label class="floating-label">Guests</label>
 </div>
 <div class="form-group">
 <textarea name="message" class="form-input" rows="3" placeholder=" "></textarea>
 <label class="floating-label">Special Requests</label>
 </div>
 <button type="submit" class="bg-brand-primary hover:bg-brand-dark text-white font-bold py-3 rounded-lg transition transform hover:scale-105">
 Reserve Now
 </button>
 </form>
<div class="mt-12">
 <h3 class="text-2xl font-bold mb-6 font-display">Subscribe to Our Newsletter</h3>
 <form class="flex">
 <input type="email" placeholder="Your email" class="flex-grow px-4 py-3 rounded-l-lg border border-gray-300 dark:border-gray-600 focus:outline-none focus:ring-2 focus:ring-brand-primary dark:bg-gray-800">
 <button type="submit" class="bg-brand-primary hover:bg-brand-dark text-white font-bold px-6 rounded-r-lg transition">
 Subscribe
 </button>
 </form>
 </div>
 </div>
 </div>
</section>
<!-- ================================================= FOOTER -->
<footer class="bg-gray-800 dark:bg-gray-950 text-white py-12" data-aos="fade">
 <div class="max-w-7xl mx-auto px-6 grid grid-cols-1 md:grid-cols-4 gap-8">
 <div>
 <div class="flex items-center mb-4"><i class="fas fa-utensils text-3xl text-brand-primary mr-3"></i><h3 class="text-xl font-bold">Taverna in Bayview</h3></div>
 <p class="text-gray-400">Bringing authentic Mediterranean flavors to Bayview since 2005.</p>
 <div class="flex gap-4 mt-4">
 <a href="#" aria-label="Facebook" class="social-icon"><i class="fab fa-facebook-f"></i></a>
 <a href="#" aria-label="Instagram" class="social-icon"><i class="fab fa-instagram"></i></a>
 <a href="#" aria-label="Twitter" class="social-icon"><i class="fab fa-twitter"></i></a>
 </div>
 </div>
 <div>
 <h4 class="font-bold mb-4">Quick Links</h4>
 <nav class="space-y-2">
 <a href="#home" class="footer-link">Home</a>
 <a href="#menu" class="footer-link">Menu</a>
 <a href="#about" class="footer-link">About Us</a>
 <a href="#gallery" class="footer-link">Gallery</a>
 <a href="#contact" class="footer-link">Contact</a>
 </nav>
 </div>
 <div>
 <h4 class="font-bold mb-4">Contact</h4>
 <p class="text-gray-400">123 Mediterranean Way<br/>Bayview, CA 94010</p>
 <p class="text-gray-400">(123) 456-7890</p>
 <p><a href="mailto:info@tavernainbayview.com" class="text-gray-400 hover:text-brand-primary">info@tavernainbayview.com</a></p>
 </div>
 <div>
 <h4 class="font-bold mb-4">Newsletter</h4>
 <p class="text-gray-400 mb-4">Subscribe to receive updates on special events and promotions.</p>
 <form class="flex">
 <input type="email" placeholder="Your email" class="flex-grow px-4 py-2 rounded-l-lg bg-gray-700 text-white focus:outline-none">
 <button type="submit" class="bg-brand-primary hover:bg-brand-dark px-4 rounded-r-lg">
 <i class="fas fa-paper-plane"></i>
 </button>
 </form>
 </div>
 </div>
 <div class="max-w-7xl mx-auto px-6 pt-8 mt-8 border-t border-gray-700 text-center text-gray-400 text-sm">
 <p>&copy; 2023 Taverna in Bayview. All rights reserved.</p>
 </div>
</footer>
<!-- Scroll to Top Button -->
<button id="scrollTop" class="scroll-top">
 <i class="fas fa-arrow-up"></i>
</button>
<!-- Scripts -->
<script src="https://unpkg.com/aos@2.3.4/dist/aos.js"></script>
<script>
 // Initialize AOS animation
 AOS.init({
 duration: 800,
 easing: 'ease-in-out',
 once: true
 });
 // Mobile menu toggle
 const mobileMenuButton = document.getElementById('mobile-menu-button');
 const mobileMenu = document.getElementById('mobile-menu');
mobileMenuButton.addEventListener('click', () => {
 mobileMenu.classList.toggle('hidden');
 });
 // Dark mode toggle
 const themeToggle = document.getElementById('themeToggle');
 const html = document.documentElement;
// Check for saved user preference or system preference
 if (localStorage.getItem('theme') === 'dark' || (!localStorage.getItem('theme') && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
 html.classList.add('dark');
 themeToggle.innerHTML = '<i class="far fa-sun"></i>';
 } else {
 html.classList.remove('dark');
 themeToggle.innerHTML = '<i class="far fa-moon"></i>';
 }
themeToggle.addEventListener('click', () => {
 html.classList.toggle('dark');
 if (html.classList.contains('dark')) {
 localStorage.setItem('theme', 'dark');
 themeToggle.innerHTML = '<i class="far fa-sun"></i>';
 } else {
 localStorage.setItem('theme', 'light');
 themeToggle.innerHTML = '<i class="far fa-moon"></i>';
 }
 });
 // Scroll to top button
 const scrollTopButton = document.getElementById('scrollTop');
window.addEventListener('scroll', () => {
 if (window.pageYOffset > 300) {
 scrollTopButton.classList.add('active');
 } else {
 scrollTopButton.classList.remove('active');
 }
 });
scrollTopButton.addEventListener('click', () => {
 window.scrollTo({
 top: 0,
 behavior: 'smooth'
 });
 });
 // Form floating labels
 document.querySelectorAll('.form-input').forEach(input => {
 if (input.value) {
 input.nextElementSibling.classList.add('-top-2', 'text-xs', 'text-brand-primary');
 }
input.addEventListener('focus', () => {
 input.nextElementSibling.classList.add('-top-2', 'text-xs', 'text-brand-primary');
 });
input.addEventListener('blur', () => {
 if (!input.value) {
 input.nextElementSibling.classList.remove('-top-2', 'text-xs', 'text-brand-primary');
 }
 });
 });
</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=spwotton/taverna2" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>