Hugging Face's logo

Spaces:
arkleinberg
/
Sabaidi
No application file

App Files Community
Sabaidi
File size: 9,289 Bytes 
1548014
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
 
<!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>