Sabaidi / index.html
arkleinberg's picture
commit
1548014 verified
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<title>Sabaidi — Restaurant & Bar</title>
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Pacifico&family=Montserrat:wght@400;600;700;900&family=Inter:wght@400;600&display=swap" rel="stylesheet">
<link rel="stylesheet" href="assets/css/styles.css"/>
<meta name="description" content="Sabaidi Restaurant & Bar — Las Terrenas"/>
</head>
<body>
<header class="nav">
<div class="container wrap">
<div class="brand">
<img class="logo" src="assets/images/sabaidi_logo.webp" alt="Sabaidi logo"/>
<div class="title">Sabaidi</div>
</div>
<nav>
<a href="index.html" data-i18n="nav_home">Accueil</a>
<a href="reserver.html" data-i18n="nav_reserve">Réserver</a>
<a href="commander.html" data-i18n="nav_order">Commander</a>
<a href="evenements.html" data-i18n="nav_events">Événements</a>
<a href="menu.html" data-i18n="nav_menu">La Carte</a>
<a href="fidelite.html" data-i18n="nav_loyalty">Fidélité</a>
<a href="gallery.html" data-i18n="nav_gallery">Galerie</a>
<a href="contact.html" data-i18n="nav_contact">Contact</a>
</nav>
<div class="lang-switch"><div class="theme-switch"><button id="themeToggle" onclick="setTheme(getTheme()==='light'?'dark':'light')">🌙</button></div>
<button data-lang="fr" onclick="setLanguage('fr')">FR</button>
<button data-lang="es" onclick="setLanguage('es')">ES</button>
<button data-lang="en" onclick="setLanguage('en')">EN</button>
</div>
</div>
</header>
<section class="hero">
<div class="container content">
<div class="hero-carousel">
<img src="assets/images/sabaidi_sign.webp" class="active" alt="Sabaidi beach"/>
<img src="assets/images/noodles.webp" alt="Noodles"/>
<img src="assets/images/spring_rolls.webp" alt="Spring rolls"/>
<img src="assets/images/burger.webp" alt="Burger"/>
<div class="carousel-overlay">
<h1 class="gold" data-i18n="hero_title">Sabaidi — Restaurant & Bar</h1>
<p class="tagline" data-i18n="hero_subtitle">Cuisine d'inspiration asiatique, cocktails au bord de la piscine, et bonne humeur sur la plage de Las Terrenas.</p>
<a class="cta" href="menu.html" data-i18n="hero_cta">Voir la carte</a>
</div>
</div>
</div>
</section>
<section class="section">
<div class="container">
<h2 data-i18n="home_section_title">Goûtez nos classiques</h2>
<p class="note" data-i18n="home_section_sub">Sélection de plats populaires</p>
<div class="grid gallery">
<div class="card">
<img src="assets/images/spring_rolls.webp" alt="Spring rolls"/>
<div class="pad">
<div class="title">Spring Rolls</div>
<div class="row"><span class="badge">E4</span><span>400 RDS</span></div>
</div>
</div>
<div class="card">
<img src="assets/images/noodles.webp" alt="Pad Thai"/>
<div class="pad">
<div class="title">Pad Thaï</div>
<div class="row"><span class="badge">P2/P3</span><span>700–850 RDS</span></div>
</div>
</div>
<div class="card">
<img src="assets/images/burger.webp" alt="Bo bun chicken"/>
<div class="pad">
<div class="title">Bo bun poulet</div>
<div class="row"><span class="badge">P1</span><span>650 RDS</span></div>
</div>
</div>
</div>
</div>
</section>
<section class="section">
<div class="container">
<div class="grid">
<div class="card">
<img src="assets/images/menu_board.png" alt="Original menu board"/>
<div class="pad">
<div class="title">Menu Board</div>
<p class="note">Version photographiée de la carte pour référence.</p>
<div class="row"><a class="badge" href="assets/images/menu_board.png" download>PNG</a><span></span></div>
</div>
</div>
</div>
</div>
</section>
<section class="section">
<div class="container">
<h2 class="gold">À propos</h2>
<div class="grid">
<div class="card"><div class="pad"><div class="title">À propos</div><div class="note"><!-- Navigation -->
<nav class="bg-white shadow-lg fixed w-full z-50">
<div class="max-w-7xl mx-auto px-4">
<div class="flex justify-between items-center h-20">
<div class="flex items-center">
<a href="index.html" class="flex items-center">
<span class="text-2xl font-bold text-red-600">Sabaidi</span>
</a>
</div>
<div class="hidden md:flex items-center space-x-8">
<a href="index.html" class="text-gray-700 hover:text-red-600 transition">Accueil</a>
<a href="reserver.html" class="text-gray-700 hover:text-red-600 transition">Réserver</a>
<a href="commander.html" class="text-gray-700 hover:text-red-600 transition">Commander</a>
<a href="evenements.html" class="text-red-600 font-medium">Événements & Mariages</a>
<a href="carte.html" class="text-gray-700 hover:text-red-600 transition">Notre Carte</a>
<a href="fidelite.html" class="text-gray-700 hover:text-red-600 transition">Carte de Fidélité</a>
<div class="language-selector relative">
<button class="flex items-center space-x-1 text-gray-700">
<i data-feather="globe"></i>
<span>FR</span>
</button>
<div class="language-dropdown hidden absolute right-0 mt-2 w-32 bg-white shadow-lg rounded-md py-1 z-50">
<a href="#" class="block px-4 py-2 text-gray-700 hover:bg-gray-100">Français</a>
<a href="#" class="block px-4 py-2 text-gray-700 hover:bg-gray-100">Español</a>
<a href="#" class="block px-4 py-2 text-gray-700 hover:bg-gray-100">English</a>
</div>
</div>
</div>
<div class="md:hidden">
<button class="mobile-menu-button p-2 focus:outline-none">
<i data-feather="menu"></i>
</button>
</div>
</div>
</div>
</nav>
<!-- Events Hero -->
<section class="pt-32 pb-20 bg-gray-900 text-white">
<div class="max-w-7xl mx-auto px-4 text-center">
<h1 class="text-4xl md:text-5xl font-bold mb-6">Événements & Mariages</h1>
<p class="text-xl text-gray-300 max-w-3xl mx-auto">Organisez vos événements spéciaux dans un cadre exceptionnel avec une cuisine asiatique raffinée.</p>
</div>
</section>
<!-- Events Content -->
<section class="py-16 bg-white">
<div class="max-w-7xl mx-auto px-4">
<div class="text-center mb-16">
<h2 class="text-3xl font-bold text-gray-800 mb-4">Un lieu unique pour vos moments spéciaux</h2>
<p class="text-gray-600 max-w-3xl mx-auto">Que ce soit pour un mariage, un anniversaire, un dîner d'entreprise ou tout autre événement, Sabaidi offre un cadre idyllique avec une vue imprenable sur la mer, une piscine et une équipe dédiée à faire de votre événement un moment inoubliable.</p>
</div>
<div class="grid md:grid-cols-3 gap-8 mb-16">
<!-- Event 1 -->
<div class="event-card bg-white rounded-xl shadow-md overflow-hidden" data-aos="fade-up">
<div class="h-48 overflow-hidden">
<img src="http://static.photos/event/640x360/1" alt="Mariages" class="w-full h-full object-cover">
</div>
<div class="p-6">
<h3 class="text-xl font-bold text-gray-800 mb-2">Mariages</h3>
<p class="text-gray-600 mb-4">Célébrez votre union dans un cadre romantique avec un menu personnalisé et un service d'exception.</p>
<div class="flex items-center text-red-600 font-medium">
<span>À partir de 50€/personne</span>
</div>
</div>
</div>
<!-- Event 2 -->
<div class="event-card bg-white rounded-xl shadow-md overflow-hidden" data-aos="fade-up" data-aos-delay="100">
<div class="h-48 overflow-hidden">
<img src="http://static.photos/event/</div></div></div>
</div>
</div>
</section>
<footer>
<div class="container">
<p class="small" data-i18n="footer">Aligio Apart‑Hotel & Spa • Las Terrenas • République Dominicaine</p>
</div>
</footer>
<script src="assets/js/i18n.js"></script>
<script>
// Ensure the landing page picks the saved language
document.addEventListener('DOMContentLoaded', () => setLanguage(getLanguage()));
</script>
<script src="assets/js/app.js"></script>
</body>
</html>