commit

.gitattributes

@@ -33,3 +33,11 @@ saved_model/**/* filter=lfs diff=lfs merge=lfs -text
 *.zip filter=lfs diff=lfs merge=lfs -text
 *.zst filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text
+assets/images/beignets_crevettes.png filter=lfs diff=lfs merge=lfs -text
+assets/images/burger.webp filter=lfs diff=lfs merge=lfs -text
+assets/images/menu_board.png filter=lfs diff=lfs merge=lfs -text
+assets/images/noodles.webp filter=lfs diff=lfs merge=lfs -text
+assets/images/sabaidi_logo.webp filter=lfs diff=lfs merge=lfs -text
+assets/images/sabaidi_sign.webp filter=lfs diff=lfs merge=lfs -text
+assets/images/samoussas.png filter=lfs diff=lfs merge=lfs -text
+assets/images/spring_rolls.webp filter=lfs diff=lfs merge=lfs -text

README.txt

@@ -0,0 +1,15 @@
+
+Sabaidi — Site multilingue (FR/ES/EN)
+------------------------------------
+• Changement de langue via les boutons FR/ES/EN (persistant).
+• Carte dynamique depuis assets/js/i18n.js (sections starters/mains).
+• Couleurs, fond, et présentation inspirés des images fournies.
+• Images originales placées dans assets/images/ (incluant la photo de la carte).
+
+Fichiers principaux :
+  - index.html (accueil + hero)
+  - menu.html (la carte)
+  - gallery.html (galerie d'images)
+  - contact.html (coordonnées)
+  - assets/css/styles.css (thème)
+  - assets/js/i18n.js (traductions + données de la carte)

assets/css/styles.css

@@ -0,0 +1,132 @@
+
+:root{
+  --primary:#F5C542;
+  --deep-teal:#0E4F4E;
+  --ocean:#0B6C6A;
+  --sand:#F4E9D8;
+  --ink:#1B1B1B;
+  --card-bg: rgba(255,255,255,0.08);
+}
+*{box-sizing:border-box}
+html,body{margin:0;padding:0;background: linear-gradient(180deg, var(--ocean), var(--deep-teal)); color: #FFFFFF; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Arial, sans-serif;}
+a{color:var(--primary);text-decoration:none}
+.container{width: min(1100px, 92%); margin: 0 auto;}
+header.nav{position:sticky;top:0;z-index:50; backdrop-filter: blur(10px); background: rgba(14,79,78,0.85); border-bottom:1px solid rgba(245,197,66,0.25);}
+header.nav .wrap{display:flex; align-items:center; justify-content:space-between; padding:10px 0;}
+.brand{display:flex; align-items:center; gap:12px;}
+.brand img.logo{height:42px; width:auto; border-radius:10px; box-shadow: 0 6px 20px rgba(0,0,0,.25);}
+.brand .title{font-size:1.3rem; letter-spacing:.5px; font-weight:700; color:var(--primary);}
+nav a{margin:0 10px; font-weight:600; opacity:.95}
+.lang-switch button{margin-left:8px;border:1px solid rgba(255,255,255,.2); background:transparent; color:#fff; padding:6px 10px; border-radius:10px; cursor:pointer}
+.lang-switch button.active{border-color:var(--primary); color:var(--primary);}
+
+.hero{position:relative; padding:60px 0 40px; background: radial-gradient(1200px 600px at 60% -10%, rgba(255,255,255,.12), transparent 60%);}
+.hero .content{display:grid; grid-template-columns: 1.1fr .9fr; gap:28px; align-items:center;}
+.hero h1{font-weight:900; font-size: clamp(2rem, 4vw, 3.2rem); margin:0; color:var(--primary); text-shadow:0 2px 0 rgba(0,0,0,.2);}
+.tagline{font-size:1.05rem; opacity:.95; line-height:1.5}
+.cta{display:inline-block; margin-top:18px; background:var(--primary); color:#2a2307; padding:12px 18px; border-radius:12px; font-weight:800; box-shadow:0 8px 25px rgba(245,197,66,.35);}
+.hero .art img{width:100%; border-radius:18px; box-shadow: 0 12px 50px rgba(0,0,0,.35);}
+
+.section{padding:36px 0;}
+.section h2{color:var(--primary); margin:0 0 12px 0; font-size:1.8rem}
+.grid{display:grid; gap:18px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));}
+.card{background:var(--card-bg); border:1px solid rgba(255,255,255,.12); border-radius:18px; overflow:hidden; box-shadow:0 10px 30px rgba(0,0,0,.25);}
+.card img{display:block;width:100%; height:180px; object-fit:cover}
+.card .pad{padding:14px}
+.card .title{font-weight:800; letter-spacing:.3px; font-size:1.05rem}
+.card .row{display:flex; align-items:center; justify-content:space-between; margin-top:6px}
+.badge{background:rgba(245,197,66,.1); color:var(--primary); padding:4px 8px; border-radius:999px; font-size:.85rem; border:1px solid rgba(245,197,66,.35);}
+
+footer{padding:30px 0; border-top:1px solid rgba(255,255,255,.12); background: rgba(0,0,0,.15);}
+footer .small{opacity:.8; font-size:.92rem}
+
+.note{opacity:.85; font-size:.92rem}
+.gallery img{height:210px}
+
+@media (max-width: 850px){
+  .hero .content{grid-template-columns: 1fr; }
+}
+
+/* --- Typography upgrade to match Sabaidi poster --- */
+body{font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Arial, sans-serif;}
+h1,h2,h3,h4,.title{font-family:"Montserrat", "Inter", Arial, sans-serif;}
+.brand .title{font-family:"Pacifico","Montserrat",cursive; font-weight:400; font-size:1.7rem; letter-spacing:.5px;}
+
+/* Gold text effect for brand and key headings */
+.brand .title, .gold {
+  background: linear-gradient(180deg,#FFD76A 0%, #F5C542 40%, #D79C12 100%);
+  -webkit-background-clip: text; background-clip:text; color: transparent;
+  text-shadow: 0 2px 0 rgba(0,0,0,.25);
+}
+
+.hero{ padding:70px 0 40px; }
+.hero .content h1{ font-family:"Montserrat", "Inter", sans-serif; font-weight:900; }
+.hero .content .tagline{ font-family:"Inter", sans-serif; }
+nav a{font-family:"Montserrat","Inter",sans-serif; letter-spacing:.2px}
+.lang-switch button{font-family:"Montserrat","Inter",sans-serif}
+
+
+/* --- Carousel & Animations --- */
+.hero-carousel{position:relative; overflow:hidden; border-radius:18px; box-shadow: 0 12px 50px rgba(0,0,0,.35);}
+.hero-carousel img{width:100%; height:420px; object-fit:cover; display:block; opacity:0; transition: opacity 900ms ease-in-out;}
+.hero-carousel img.active{opacity:1}
+.hero .content{grid-template-columns: 1fr 1.15fr}
+
+/* --- Forms --- */
+.form{background: var(--card-bg); border:1px solid rgba(255,255,255,.12); border-radius:18px; padding:16px; box-shadow:0 10px 30px rgba(0,0,0,.25);}
+.input-row{display:grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap:12px; margin-bottom:10px}
+label{font-size:.92rem; opacity:.9; display:block; margin-bottom:4px}
+input,select,textarea{width:100%; padding:10px 12px; border-radius:12px; border:1px solid rgba(255,255,255,.25); background: rgba(255,255,255,.06); color:#fff}
+textarea{min-height:90px}
+.btn{display:inline-block; padding:10px 14px; border-radius:12px; background:var(--primary); color:#2a2307; font-weight:800; border:0; cursor:pointer; box-shadow:0 8px 25px rgba(245,197,66,.35)}
+.btn.secondary{background:transparent; color:#fff; border:1px solid rgba(255,255,255,.35)}
+.alert{margin-top:10px; padding:10px 12px; border-radius:12px; background:rgba(12,115,85,.25); border:1px solid rgba(255,255,255,.2)}
+.alert.error{background:rgba(150,12,12,.25)}
+
+
+/* Mobile fine-tuning */
+@media (max-width: 540px){
+  header.nav .wrap{padding:8px 0}
+  nav a{margin:0 6px; font-size:.95rem}
+  .hero .content{gap:16px}
+  .hero-carousel img{height:260px}
+  .card img{height:160px}
+}
+
+
+/* --- Centered hero carousel with overlay text --- */
+.hero { padding: 30px 0 20px; }
+.hero .content { display:block; }
+.hero-carousel { position: relative; max-width: 1100px; margin: 0 auto; border-radius: 22px; overflow: hidden; }
+.hero-carousel img { height: 520px; }
+.carousel-overlay {
+  position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
+  text-align:center; padding: 20px;
+  background: linear-gradient(180deg, rgba(0,0,0,.25) 0%, rgba(0,0,0,.15) 30%, rgba(0,0,0,.25) 100%);
+}
+.carousel-overlay h1 { font-size: clamp(2.2rem, 6vw, 4rem); margin:0 0 6px 0; line-height:1.05; }
+.carousel-overlay p { max-width: 820px; margin: 8px auto 12px; font-size: clamp(1rem, 2.2vw, 1.25rem); }
+.carousel-overlay .cta { margin-top: 10px; }
+
+@media (max-width: 900px){
+  .hero-carousel img { height: 380px; }
+}
+@media (max-width: 560px){
+  .hero-carousel img { height: 260px; }
+}
+
+
+/* --- v7: absolute slides + theme toggle --- */
+.hero-carousel{position:relative}
+.hero-carousel img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
+.theme-switch button{margin-left:8px;border:1px solid rgba(255,255,255,.2); background:transparent; color:#fff; padding:6px 10px; border-radius:10px; cursor:pointer}
+.theme-light .theme-switch button{color:#0b3d3d; border-color: rgba(0,0,0,.2)}
+
+/* Light theme overrides */
+.theme-light body{background: linear-gradient(180deg, #E9FAFF, #FFF7E4); color:#0b3d3d}
+.theme-light .card{background: rgba(0,0,0,0.04); border-color: rgba(0,0,0,.12)}
+.theme-light header.nav{background: rgba(255,255,255,.7); border-bottom-color: rgba(0,0,0,.1)}
+.theme-light nav a{color:#0b3d3d}
+.theme-light .note{opacity:.9}
+.theme-light .badge{background: rgba(215,156,18,.08); color:#a06b00; border-color: rgba(215,156,18,.35)}
+.theme-light footer{background: rgba(0,0,0,.05); border-top-color: rgba(0,0,0,.1)}

assets/js/app.js

@@ -0,0 +1,113 @@
+
+// Config
+const BOOKING_EMAIL = 'book@sabaidi.example';   // change to your inbox
+const WEBHOOK_URL = null; // set to an https endpoint to receive JSON payloads (optional)
+const THEME_KEY = 'sabaidi_theme';
+const WHATSAPP_PHONE = '18090000000'; // commander
+
+function q(sel,root=document){return root.querySelector(sel)}
+function qa(sel,root=document){return Array.from(root.querySelectorAll(sel))}
+
+
+// Theme
+function setTheme(theme){
+  const root = document.documentElement;
+  const isLight = theme === 'light';
+  root.classList.toggle('theme-light', isLight);
+  localStorage.setItem(THEME_KEY, theme);
+  const btn = document.getElementById('themeToggle');
+  if(btn) btn.textContent = isLight ? '🌞' : '🌙';
+}
+function getTheme(){
+  return localStorage.getItem(THEME_KEY) || (window.matchMedia && window.matchMedia('(prefers-color-scheme: light)').matches ? 'light' : 'dark');
+}
+
+// Carousel (supports multiple instances)
+
+}
+
+// Reservation form: send via mailto + optional webhook
+async function submitReservation(form, ok, err){
+  const lang = getLanguage();
+  const t = window.SABAIDI_I18N[lang];
+  const data = {
+    name: form.name.value.trim(),
+    phone: form.phone.value.trim(),
+    email: form.email.value.trim(),
+    people: form.people.value,
+    date: form.date.value,
+    time: form.time.value,
+    notes: form.notes.value.trim()
+  };
+  if(!data.name || !data.phone || !data.people || !data.date || !data.time){
+    err.style.display='block'; return;
+  }
+  // mailto
+  const subject = encodeURIComponent(t.reserve_email_subject + ' • ' + data.date + ' ' + data.time + ' • ' + data.people + 'p');
+  const body = encodeURIComponent(
+    `Nom: ${data.name}\nTéléphone: ${data.phone}\nEmail: ${data.email}\nCouverts: ${data.people}\nDate: ${data.date}\nHeure: ${data.time}\nNotes: ${data.notes}`
+  );
+  const mailtoUrl = `mailto:${BOOKING_EMAIL}?subject=${subject}&body=${body}`;
+  window.open(mailtoUrl, '_blank');
+
+  // optional webhook
+  if(WEBHOOK_URL){
+    try{
+      await fetch(WEBHOOK_URL, {method:'POST', headers:{'Content-Type':'application/json'}, body: JSON.stringify({type:'reservation', lang, ...data})});
+    }catch(e){ /* ignore network errors for static site */ }
+  }
+  ok.style.display='block'; form.reset();
+}
+
+// Init reservation form
+function initReserveForm(){
+  const form = q('#reserveForm');
+  if(!form) return;
+  const ok = q('#reserveOk'), err = q('#reserveErr');
+  form.addEventListener('submit', (e)=>{
+    e.preventDefault(); err.style.display='none'; ok.style.display='none';
+    submitReservation(form, ok, err);
+  });
+}
+
+// WhatsApp prefill (Commander)
+function initWhatsApp(){
+  const form = q('#orderForm');
+  if(!form) return;
+  const btn = q('#waBtn');
+  const lang = getLanguage();
+  const t = window.SABAIDI_I18N[lang];
+  btn.addEventListener('click', ()=>{
+    const name = form.name.value.trim() || '—';
+    const time = form.time.value.trim() || '—';
+    const order = form.order.value.trim() || '—';
+    let msg = t.wa_template_order.replace('{order}', order).replace('{time}', time).replace('{name}', name);
+    const url = 'https://wa.me/' + WHATSAPP_PHONE + '?text=' + encodeURIComponent(msg);
+    window.open(url, '_blank');
+  });
+}
+
+document.addEventListener('DOMContentLoaded', function(){ setTheme(getTheme()); 
+  startHeroCarousels();
+  initReserveForm();
+  initWhatsApp();
+});
+
+function startHeroCarousels(){
+  document.querySelectorAll('.hero-carousel').forEach((wrap)=>{
+    const slides = Array.from(wrap.querySelectorAll('img'));
+    if(!slides.length) return;
+    let i = 0;
+    const show = (idx)=> slides.forEach((img, k)=> img.classList.toggle('active', k === idx));
+    function fit(){
+      const img = slides[i];
+      let ratio = (img.naturalWidth && img.naturalHeight) ? img.naturalHeight / img.naturalWidth : (9/16);
+      const h = Math.max(260, Math.min(640, Math.round(wrap.clientWidth * ratio)));
+      wrap.style.height = h + 'px';
+    }
+    slides.forEach(img => img.addEventListener('load', fit, {once:false}));
+    show(0); setTimeout(fit, 50);
+    window.addEventListener('resize', fit);
+    setInterval(()=>{ i = (i+1) % slides.length; show(i); fit(); }, 3000);
+  });
+}

assets/js/i18n.js

@@ -0,0 +1,250 @@
+window.SABAIDI_I18N = {
+  "fr": {
+    "nav_home": "Accueil",
+    "nav_menu": "La Carte",
+    "nav_gallery": "Galerie",
+    "nav_contact": "Contact",
+    "hero_title": "Sabaidi — Restaurant & Bar",
+    "hero_subtitle": "Cuisine d'inspiration asiatique, cocktails au bord de la piscine, et bonne humeur sur la plage de Las Terrenas.",
+    "hero_cta": "Voir la carte",
+    "home_section_title": "Goûtez nos classiques",
+    "home_section_sub": "Sélection de plats populaires",
+    "menu_title": "Notre carte",
+    "menu_starters": "Entrées",
+    "menu_mains": "Plats",
+    "menu_note": "Prix en RDS. Options avec œuf pour les plats 'loc lac' (+60 RDS).",
+    "footer": "Aligio Apart‑Hotel & Spa • Las Terrenas • République Dominicaine",
+    "nav_reserve": "Réserver",
+    "nav_order": "Commander",
+    "nav_events": "Événements",
+    "nav_loyalty": "Fidélité",
+    "events_title": "Événements & Mariages",
+    "events_sub": "Organisez vos moments spéciaux dans un cadre idyllique, cuisine asiatique raffinée.",
+    "reserve_title": "Réserver une table",
+    "order_title": "Commander",
+    "loyalty_title": "Carte de fidélité",
+    "reserve_intro": "Réservez votre table en quelques secondes.",
+    "form_name": "Nom",
+    "form_phone": "Téléphone",
+    "form_email": "Email",
+    "form_date": "Date",
+    "form_time": "Heure",
+    "form_people": "Couverts",
+    "form_notes": "Notes (allergies, préférences...)",
+    "form_submit": "Réserver",
+    "form_success": "Merci ! Votre demande a été prise en compte. Nous vous confirmons rapidement.",
+    "form_error_validation": "Merci de remplir les champs requis.",
+    "order_intro": "Passez commande et récupérez sur place.",
+    "order_call": "Commander par téléphone",
+    "order_whatsapp": "Envoyer sur WhatsApp",
+    "order_hours_title": "Horaires",
+    "order_hours_value": "Tous les jours 12:00 – 22:30",
+    "wa_template_order": "Bonjour, je souhaite passer commande: {order}. Retrait {time}. Nom: {name}. Merci !",
+    "reserve_email_subject": "Réservation – Sabaidi"
+  },
+  "es": {
+    "nav_home": "Inicio",
+    "nav_menu": "Carta",
+    "nav_gallery": "Galería",
+    "nav_contact": "Contacto",
+    "hero_title": "Sabaidi — Restaurante & Bar",
+    "hero_subtitle": "Cocina de inspiración asiática, cócteles junto a la piscina y buena vibra en la playa de Las Terrenas.",
+    "hero_cta": "Ver la carta",
+    "home_section_title": "Prueba nuestros clásicos",
+    "home_section_sub": "Selección de platos populares",
+    "menu_title": "Nuestra carta",
+    "menu_starters": "Entradas",
+    "menu_mains": "Platos fuertes",
+    "menu_note": "Precios en RDS. Opción con huevo para los 'loc lac' (+60 RDS).",
+    "footer": "Aligio Apart‑Hotel & Spa • Las Terrenas • República Dominicana",
+    "nav_reserve": "Reservar",
+    "nav_order": "Pedir",
+    "nav_events": "Eventos",
+    "nav_loyalty": "Fidelidad",
+    "events_title": "Eventos & Bodas",
+    "events_sub": "Organiza tus momentos especiales en un marco idílico con cocina asiática.",
+    "reserve_title": "Reservar mesa",
+    "order_title": "Hacer pedido",
+    "loyalty_title": "Tarjeta de fidelidad",
+    "reserve_intro": "Reserva tu mesa en segundos.",
+    "form_name": "Nombre",
+    "form_phone": "Teléfono",
+    "form_email": "Email",
+    "form_date": "Fecha",
+    "form_time": "Hora",
+    "form_people": "Comensales",
+    "form_notes": "Notas (alergias, preferencias...)",
+    "form_submit": "Reservar",
+    "form_success": "¡Gracias! Hemos recibido tu solicitud. Te confirmamos pronto.",
+    "form_error_validation": "Por favor, completa los campos obligatorios.",
+    "order_intro": "Haz tu pedido y recógelo en el local.",
+    "order_call": "Pedir por teléfono",
+    "order_whatsapp": "Enviar por WhatsApp",
+    "order_hours_title": "Horarios",
+    "order_hours_value": "Todos los días 12:00 – 22:30",
+    "wa_template_order": "Hola, quiero hacer un pedido: {order}. Retiro {time}. Nombre: {name}. ¡Gracias!",
+    "reserve_email_subject": "Reserva – Sabaidi"
+  },
+  "en": {
+    "nav_home": "Home",
+    "nav_menu": "Menu",
+    "nav_gallery": "Gallery",
+    "nav_contact": "Contact",
+    "hero_title": "Sabaidi — Restaurant & Bar",
+    "hero_subtitle": "Asian‑inspired cooking, poolside cocktails, and sunny vibes on Las Terrenas beach.",
+    "hero_cta": "See the menu",
+    "home_section_title": "Taste our classics",
+    "home_section_sub": "Selection of popular dishes",
+    "menu_title": "Our menu",
+    "menu_starters": "Starters",
+    "menu_mains": "Main courses",
+    "menu_note": "Prices in RDS. 'Loc lac' dishes can be served with egg (+60 RDS).",
+    "footer": "Aligio Apart‑Hotel & Spa • Las Terrenas • Dominican Republic",
+    "nav_reserve": "Reserve",
+    "nav_order": "Order",
+    "nav_events": "Events",
+    "nav_loyalty": "Loyalty",
+    "events_title": "Events & Weddings",
+    "events_sub": "Host your special moments in an idyllic setting with refined Asian cuisine.",
+    "reserve_title": "Book a table",
+    "order_title": "Order",
+    "loyalty_title": "Loyalty card",
+    "reserve_intro": "Book your table in seconds.",
+    "form_name": "Name",
+    "form_phone": "Phone",
+    "form_email": "Email",
+    "form_date": "Date",
+    "form_time": "Time",
+    "form_people": "Guests",
+    "form_notes": "Notes (allergies, preferences...)",
+    "form_submit": "Reserve",
+    "form_success": "Thanks! We’ve received your request and will confirm shortly.",
+    "form_error_validation": "Please fill in the required fields.",
+    "order_intro": "Place your order and pick it up at the restaurant.",
+    "order_call": "Order by phone",
+    "order_whatsapp": "Send via WhatsApp",
+    "order_hours_title": "Opening hours",
+    "order_hours_value": "Every day 12:00 – 22:30",
+    "wa_template_order": "Hello, I'd like to place an order: {order}. Pickup {time}. Name: {name}. Thank you!",
+    "reserve_email_subject": "Reservation – Sabaidi"
+  }
+};
+window.SABAIDI_MENU = {
+  "starters": [
+    {
+      "code": "E1",
+      "image": "spring_rolls.webp",
+      "fr": "Nem porc (x4)",
+      "es": "Nem cerdo (x4)",
+      "en": "Nem pork (x4)",
+      "price": "350 RDS"
+    },
+    {
+      "code": "E2",
+      "image": "spring_rolls.webp",
+      "fr": "Nem poulet (x4)",
+      "es": "Nem pollo (x4)",
+      "en": "Nem chicken (x4)",
+      "price": "350 RDS"
+    },
+    {
+      "code": "E3",
+      "image": "beignets_crevettes.png",
+      "fr": "Beignet de crevettes (x4)",
+      "es": "Buñuelo de camarones (x4)",
+      "en": "Shrimp fritter (x4)",
+      "price": "400 RDS"
+    },
+    {
+      "code": "E4",
+      "image": "spring_rolls.webp",
+      "fr": "Rouleau de printemps (x2)",
+      "es": "Rollo de primavera (x2)",
+      "en": "Spring roll (x2)",
+      "price": "400 RDS"
+    },
+    {
+      "code": "E5",
+      "image": "samoussas.png",
+      "fr": "Samoussa (x4)",
+      "es": "Samosa (x4)",
+      "en": "Samosa (x4)",
+      "price": "400 RDS"
+    }
+  ],
+  "mains": [
+    {
+      "code": "P1",
+      "image": "burger.webp",
+      "fr": "Bo bun poulet",
+      "es": "Bo bun pollo",
+      "en": "Bo bun chicken",
+      "price": "650 RDS"
+    },
+    {
+      "code": "P2",
+      "image": "noodles.webp",
+      "fr": "Pad Thaï crevettes",
+      "es": "Pad Thai camarones",
+      "en": "Pad Thai shrimp",
+      "price": "850 RDS"
+    },
+    {
+      "code": "P3",
+      "image": "noodles.webp",
+      "fr": "Pad Thaï poulet",
+      "es": "Pad Thai pollo",
+      "en": "Pad Thai chicken",
+      "price": "700 RDS"
+    },
+    {
+      "code": "P4",
+      "image": "sabaidi_sign.webp",
+      "fr": "Riz loc lac poulet (+ œuf +60 RDS)",
+      "es": "Arroz loc lac pollo (con huevo +60 RDS)",
+      "en": "Rice loc lac chicken (with egg +60 RDS)",
+      "price": "700 RDS"
+    },
+    {
+      "code": "P5",
+      "image": "sabaidi_sign.webp",
+      "fr": "Riz loc lac bœuf (+ œuf +60 RDS)",
+      "es": "Arroz loc lac res (con huevo +60 RDS)",
+      "en": "Rice loc lac beef (with egg +60 RDS)",
+      "price": "900 RDS"
+    },
+    {
+      "code": "P6",
+      "image": "sabaidi_sign.webp",
+      "fr": "Riz cantonnais",
+      "es": "Arroz cantonés",
+      "en": "Cantonese rice",
+      "price": "400 RDS"
+    }
+  ]
+};
+(function(){
+  const LS_KEY = "sabaidi_lang";
+  function setLangButtonsActive(lang) {
+    document.querySelectorAll('.lang-switch button').forEach(b=>{b.classList.toggle('active', b.dataset.lang===lang)});
+  }
+  window.setLanguage = function(lang) {
+    const dict = window.SABAIDI_I18N[lang] || window.SABAIDI_I18N.fr;
+    document.querySelectorAll('[data-i18n]').forEach(el=>{ 
+      const key = el.getAttribute('data-i18n');
+      if(dict[key]) el.textContent = dict[key];
+    });
+    localStorage.setItem(LS_KEY, lang);
+    setLangButtonsActive(lang);
+    // re-render menu if present
+    if (typeof renderMenu === 'function') renderMenu(lang);
+  };
+  window.getLanguage = function() {
+    return localStorage.getItem(LS_KEY) || 'fr';
+  };
+  document.addEventListener('DOMContentLoaded', function(){
+    const lang = getLanguage();
+    setLanguage(lang);
+    setLangButtonsActive(lang);
+  });
+})();

commander.html

@@ -0,0 +1,76 @@
+<!doctype html>
+<html lang="fr">
+<head>
+  <meta charset="utf-8"/>
+  <meta name="viewport" content="width=device-width, initial-scale=1"/>
+  <title>Sabaidi — Commander</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"/>
+</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="section">
+  <div class="container">
+    <h2 class="gold" data-i18n="nav_order">Commander</h2>
+    <p class="note" data-i18n="order_intro">Passez commande et récupérez sur place.</p>
+    <div class="form" style="margin-top:14px">
+      <form id="orderForm">
+        <div class="input-row">
+          <div><label data-i18n="form_name">Nom</label><input type="text" name="name" placeholder="Jane Doe"/></div>
+          <div><label data-i18n="form_time">Heure</label><input type="time" name="time"/></div>
+        </div>
+        <div class="input-row">
+          <div style="grid-column:1/-1">
+            <label>Commande</label>
+            <textarea name="order" placeholder="Pad Thaï crevettes x2, Bo bun poulet x1..."></textarea>
+          </div>
+        </div>
+        <div class="input-row">
+          <button type="button" id="waBtn" class="btn" data-i18n="order_whatsapp">Envoyer sur WhatsApp</button>
+          <a class="btn secondary" href="tel:+18090000000" data-i18n="order_call">Commander par téléphone</a>
+        </div>
+      </form>
+    </div>
+    <div class="card" style="margin-top:16px">
+      <div class="pad">
+        <div class="title" data-i18n="order_hours_title">Horaires</div>
+        <p class="note" data-i18n="order_hours_value">Tous les jours 12:00 – 22:30</p>
+      </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 src="assets/js/app.js"></script>
+<script>document.addEventListener('DOMContentLoaded',()=>setLanguage(getLanguage()));</script>
+</body>
+</html>

contact.html

@@ -0,0 +1,56 @@
+<!doctype html>
+<html lang="fr">
+<head>
+  <meta charset="utf-8"/>
+  <meta name="viewport" content="width=device-width, initial-scale=1"/>
+  <title>Sabaidi — Contact</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"/>
+</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="section">
+  <div class="container">
+    <h2 data-i18n="nav_contact">Contact</h2>
+    <p>Sabaidi • Aligio Apart‑Hotel & Spa • Las Terrenas</p>
+    <p>Email: <a href="mailto:hello@sabaidi.example">hello@sabaidi.example</a> · Tel: +1 809 000 0000</p>
+  </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 src="assets/js/app.js"></script>
+</body>
+</html>

evenements.html

@@ -0,0 +1,73 @@
+<!doctype html>
+<html lang="fr">
+<head>
+  <meta charset="utf-8"/>
+  <meta name="viewport" content="width=device-width, initial-scale=1"/>
+  <title>Sabaidi — Page</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"/>
+</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>
+      <h1 class="gold" data-i18n="events_title">events_title</h1>
+      <p class="tagline" data-i18n="events_sub">Organisez vos moments spéciaux dans un cadre idyllique, cuisine asiatique raffinée.</p>
+    </div>
+    <div class="art hero-carousel">
+      
+      <img src="assets/images/sabaidi_sign.webp" class="active" alt="Sabaidi beach"/>
+      <img src="assets/images/beignets_crevettes.png" alt="Beignets de crevettes"/>
+      <img src="assets/images/samoussas.png" alt="Samoussas"/>
+      <img src="assets/images/noodles.webp" alt="Pad Thai"/>
+    </div>
+  </div>
+</section>
+
+
+<section class="section">
+  <div class="container">
+    <div class="grid">
+      <div class="card"><img src="assets/images/spring_rolls.webp" alt=""><div class="pad"><div class="title">Mariages sur-mesure</div><p class="note">Cérémonie, banquet, musique — nous orchestrons votre journée parfaite.</p></div></div>
+      <div class="card"><img src="assets/images/burger.webp" alt=""><div class="pad"><div class="title">Événements d’entreprise</div><p class="note">Séminaires, fêtes d’équipe, lancements — espaces privatifs et menu dédié.</p></div></div>
+      <div class="card"><img src="assets/images/noodles.webp" alt=""><div class="pad"><div class="title">Anniversaires & fêtes</div><p class="note">Formules conviviales, cocktails signature, ambiance bord de mer.</p></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>document.addEventListener('DOMContentLoaded',()=>setLanguage(getLanguage()));</script>
+<script src="assets/js/app.js"></script>
+</body>
+</html>

fidelite.html

@@ -0,0 +1,72 @@
+<!doctype html>
+<html lang="fr">
+<head>
+  <meta charset="utf-8"/>
+  <meta name="viewport" content="width=device-width, initial-scale=1"/>
+  <title>Sabaidi — Page</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"/>
+</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>
+      <h1 class="gold" data-i18n="loyalty_title">loyalty_title</h1>
+      <p class="tagline" data-i18n="events_sub">Organisez vos moments spéciaux dans un cadre idyllique, cuisine asiatique raffinée.</p>
+    </div>
+    <div class="art">
+      <img src="assets/images/sabaidi_sign.webp" alt="Sabaidi sign"/>
+    </div>
+  </div>
+</section>
+
+
+<section class="section">
+  <div class="container">
+    <div class="card"><div class="pad">
+      <div class="title">Avantages</div>
+      <ul class="note">
+        <li>• 10% de remise dès 5 visites</li>
+        <li>• Boisson offerte pour votre anniversaire</li>
+        <li>• Invites à des événements privés</li>
+      </ul>
+    </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>document.addEventListener('DOMContentLoaded',()=>setLanguage(getLanguage()));</script>
+<script src="assets/js/app.js"></script>
+</body>
+</html>

gallery.html

@@ -0,0 +1,62 @@
+<!doctype html>
+<html lang="fr">
+<head>
+  <meta charset="utf-8"/>
+  <meta name="viewport" content="width=device-width, initial-scale=1"/>
+  <title>Sabaidi — Galerie</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"/>
+</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="section">
+  <div class="container">
+    <h2 data-i18n="nav_gallery">Galerie</h2>
+    <div class="grid gallery">
+      <img class="card" src="assets/images/sabaidi_sign.webp" alt="Sabaidi sign"/>
+      <img class="card" src="assets/images/spring_rolls.webp" alt="Spring rolls"/>
+      <img class="card" src="assets/images/noodles.webp" alt="Noodles"/>
+      <img class="card" src="assets/images/burger.webp" alt="Burger"/>
+      <img class="card" src="assets/images/beignets_crevettes.png" alt="Beignets de crevettes"/>
+      <img class="card" src="assets/images/samoussas.png" alt="Samoussas"/>
+    </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 src="assets/js/app.js"></script>
+</body>
+</html>

index.html

@@ -0,0 +1,197 @@
+<!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>

menu.html

@@ -0,0 +1,87 @@
+<!doctype html>
+<html lang="fr">
+<head>
+  <meta charset="utf-8"/>
+  <meta name="viewport" content="width=device-width, initial-scale=1"/>
+  <title>Sabaidi — Menu</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"/>
+</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="section">
+  <div class="container">
+    <h2 data-i18n="menu_title">Notre carte</h2>
+    <p class="note" data-i18n="menu_note">Prix en RDS. Options avec œuf pour les plats 'loc lac' (+60 RDS).</p>
+    <h3 style="color:#F5C542;margin:20px 0 10px" data-i18n="menu_starters">Entrées</h3>
+    <div id="grid-starters" class="grid"></div>
+    <h3 style="color:#F5C542;margin:26px 0 10px" data-i18n="menu_mains">Plats</h3>
+    <div id="grid-mains" class="grid"></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>
+  function createCard(item, lang) {
+    const title = item[lang] || item.fr;
+    const img = "assets/images/" + (item.image || "sabaidi_logo.webp");
+    const el = document.createElement('div');
+    el.className = 'card';
+    el.innerHTML = `
+      <img src="${img}" alt="${title}"/>
+      <div class="pad">
+        <div class="title">${title}</div>
+        <div class="row"><span class="badge">${item.code}</span><span>${item.price}</span></div>
+      </div>`;
+    return el;
+  }
+  window.renderMenu = function(lang) {
+    lang = lang || getLanguage();
+    const starters = window.SABAIDI_MENU.starters;
+    const mains = window.SABAIDI_MENU.mains;
+    const gs = document.getElementById('grid-starters');
+    const gm = document.getElementById('grid-mains');
+    gs.innerHTML = ''; gm.innerHTML = '';
+    starters.forEach(i=> gs.appendChild(createCard(i, lang)));
+    mains.forEach(i=> gm.appendChild(createCard(i, lang)));
+  };
+  document.addEventListener('DOMContentLoaded', function(){
+    renderMenu(getLanguage());
+  });
+</script>
+<script src="assets/js/app.js"></script>
+</body>
+</html>

reserver.html

@@ -0,0 +1,76 @@
+<!doctype html>
+<html lang="fr">
+<head>
+  <meta charset="utf-8"/>
+  <meta name="viewport" content="width=device-width, initial-scale=1"/>
+  <title>Sabaidi — Réserver</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"/>
+</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="section">
+  <div class="container">
+    <h2 class="gold" data-i18n="reserve_title">Réserver une table</h2>
+    <p class="note" data-i18n="reserve_intro">Réservez votre table en quelques secondes.</p>
+    <div class="form">
+      <form id="reserveForm">
+        <div class="input-row">
+          <div><label data-i18n="form_name">Nom</label><input name="name" required placeholder="Jane Doe"></div>
+          <div><label data-i18n="form_phone">Téléphone</label><input name="phone" required placeholder="+1 809 ..."></div>
+        </div>
+        <div class="input-row">
+          <div><label data-i18n="form_email">Email</label><input type="email" name="email" placeholder="you@example.com"></div>
+          <div><label data-i18n="form_people">Couverts</label><input type="number" min="1" max="20" name="people" required value="2"></div>
+        </div>
+        <div class="input-row">
+          <div><label data-i18n="form_date">Date</label><input type="date" name="date" required></div>
+          <div><label data-i18n="form_time">Heure</label><input type="time" name="time" required></div>
+        </div>
+        <div class="input-row" style="grid-column:1/-1">
+          <div style="grid-column:1/-1"><label data-i18n="form_notes">Notes (allergies, préférences...)</label><textarea name="notes"></textarea></div>
+        </div>
+        <div class="input-row">
+          <button class="btn" type="submit" data-i18n="form_submit">Réserver</button>
+        </div>
+        <div id="reserveOk" class="alert" style="display:none" data-i18n="form_success">Merci ! Votre demande a été prise en compte. Nous vous confirmons rapidement.</div>
+        <div id="reserveErr" class="alert error" style="display:none" data-i18n="form_error_validation">Merci de remplir les champs requis.</div>
+      </form>
+    </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 src="assets/js/app.js"></script>
+<script>document.addEventListener('DOMContentLoaded',()=>setLanguage(getLanguage()));</script>
+</body>
+</html>