/* global React, ReactDOM, TweaksPanel, useTweaks, TweakSection, TweakRadio */
const { useState, useEffect } = React;
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
"palette": "ocean",
"heroImage": "gazebo",
"showFloatingWA": true
}/*EDITMODE-END*/;
/* ---------- Real info ---------- */
const INFO = {
phoneDisplay: "(809) 469-7660",
phoneIntl: "18094697660",
instagramUrl: "https://www.instagram.com/apibeachhouse/",
instagramHandle: "@apibeachhouse",
location: "Cap Cana · La Marina",
locationFull: "La Marina, Cap Cana, Punta Cana, República Dominicana",
mapsUrl: "https://maps.google.com/?q=Cap+Cana+La+Marina+Punta+Cana",
};
/* ---------- Translations ---------- */
const TEXTS = {
es: {
nav: { home: "Inicio", house: "La Casa", contact: "Contacto", book: "Reservar" },
hero: {
subtitle: "El espacio frente al mar. Ven con amigos. Quédate con familia.",
cta: "Reservar por Instagram",
explore: "Conocer la casa",
petFriendly: "Pet friendly",
family: "Familia y amigos",
},
intro: {
eyebrow: "Bienvenidos",
title1: "Vístete para impresionar.",
title2: "Código de vestimenta: “Refinado y Costero”.",
body1: "Api Beach House es un club social para quienes quieren ir a donde van los locales. Los invitados son bienvenidos y se espera que vistan acorde a la ocasión. Nos reservamos el derecho de admisión.",
body2: "Por favor, ten en cuenta: No se permiten camisetas sin mangas (singlets) ni altavoces personales de música.",
},
cards: {
eyebrow: "Lo que somos",
title: "Cuatro cosas, nada más.",
items: [
{ t: "Familia y amigos", d: "Un lugar relajado para pasar el día acompañado de la gente que quieres." },
{ t: "Frente al mar", d: "Cap Cana, La Marina. Arena, brisa y vista al Caribe." },
{ t: "Entrada · $25", d: "Precio de entrada USD, no consumible más impuestos. Reserva por Instagram." },
{ t: "Reservas directas", d: "Sin formularios. Escríbenos por Instagram y te confirmamos." },
],
},
daypass: {
eyebrow: "Acceso",
title: "Entrada",
price: "$25",
per: "USD entrada (no consumible + imp.)",
body: "Incluye acceso a la playa, sombrillas y camastros por el día. Mascotas bienvenidas. Reserva directamente por Instagram.",
cta: "Reservar por Instagram",
note: "Mascotas bienvenidas · Cap Cana, La Marina",
},
menu: {
eyebrow: "Lo que servimos",
title: "Carta",
food: "Para comer",
drinks: "Para tomar",
items: {
food: [
{ name: "Double Smash Burger / infamous API burger", desc: "Dos Carnes de Res, Tocino, Queso, Lechuga, Tomate, Salsa Secreta Api" },
{ name: "Camarones Costeros y Papas Fritas (A la Parrilla)", desc: "Ajo, Sal, Infusión Cítrica" },
{ name: "Camarones Costeros y Papas Fritas (Empanizados)", desc: "Panko, Salsa Tártara" },
{ name: "Trío de Tacos de Pescado", desc: "Taco de Maíz con Ensalada de Col, Lechuga, Pescado Crujiente, Mayonesa de Cilantro" },
{ name: "Pescado y Papas", desc: "Pescado Rebozado en Cerveza y Papas en Gajos, Salsa Tártara" },
{ name: "Milanesa de Pollo en Tiras", desc: "Milanesa de Pollo Crujiente Empanizada y Condimentada, Papas Fritas" },
{ name: "Sándwich de Pollo Oporto Desmenuzado", desc: "Pechuga de Pollo Desmenuzada Marinada, Lechuga, Queso, 2da Salsa Secreta" },
{ name: "Empanaditas (Queso)", desc: "" },
{ name: "Empanaditas (Pollo)", desc: "" },
{ name: "Tequeños (Queso Derretido)", desc: "" },
{ name: "Tequeños (Queso y Guayaba)", desc: "" },
{ name: "Croquetas (Pollo)", desc: "" },
{ name: "Croquetas (Res)", desc: "" },
{ name: "Quipes de Res", desc: "" },
{ name: "Ensalada Tibia de Pollo", desc: "Lechuga Romana, Tomates Cherry, Pepinos, Maíz, Aceitunas Kalamata, Queso Feta, Aceite de Oliva, Vinagre Balsámico" },
{ name: "Calamares", desc: "" }
],
drinks: [
{ name: "Api Piña Colada", desc: "Cóctel Costero de la Casa" },
{ name: "Mojito de Jardín", desc: "Cóctel Costero de la Casa" },
{ name: "Margarita de Maracuyá", desc: "Cóctel Costero de la Casa" },
{ name: "Daiquiri de Fresa", desc: "Cóctel Costero de la Casa" },
{ name: "Esprit", desc: "Cóctel Costero de la Casa" },
{ name: "Nozimchelada", desc: "Cóctel Costero de la Casa" },
{ name: "Cerveza Nacional", desc: "" },
{ name: "Cerveza Internacional", desc: "" }
],
},
note: "Menú sujeto a disponibilidad · Consulta opciones por Instagram",
},
hours: {
eyebrow: "Horario",
days: "Lunes a domingo",
time: "11:00 AM – 7:00 PM",
note: "Abierto todos los días",
},
quote: { line1: "la playa,", line2: "como debería ser." },
gallery: { eyebrow: "Galería", title: "Un día por aquí.", more: "Más en Instagram" },
ig: { tagline: "Beach club familiar", follow: "Seguir" },
experience: {
eyebrow: "La casa",
heroTitle1: "Frente al mar,",
heroTitle2: "en familia.",
intro: "Api Beach House es una casa de playa en Cap Cana — un lugar tranquilo para venir a pasar el día con la familia y los amigos. Cocina, bar y mar. Sin más complicación.",
rows: [
{ t: "Frente al mar", d: "Playa, sombrillas y camastros para pasar el día. La brisa hace el resto." },
{ t: "Cocina y bar", d: "Comida sencilla, fresca y rica. Bar con coctelería y bebidas frías para acompañar." },
{ t: "Para los peluditos", d: "Pet friendly. Tu perro es bienvenido — agua fresca, sombra y mucho cariño." },
{ t: "Familia y amigos", d: "Espacio relajado pensado para grupos. Mesas para compartir, sin ruido innecesario." },
],
ctaEyebrow: "Reservas",
ctaTitle: "¿Te esperamos?",
ctaBody: "Escríbenos por Instagram para reservar tu mesa o tu día de playa.",
},
contact: {
eyebrow: "Contacto",
title1: "Nos vemos",
title2: "en la playa.",
subtitle: "Reservas y consultas directamente por Instagram. Te respondemos personalmente.",
waLabel: "Instagram · Reservas",
waBody: "Toca para abrir una conversación. Atendemos en horario de la casa.",
waAction: "Escribir ahora",
location: "Ubicación",
phone: "Teléfono",
phoneBody: "Llámanos o escríbenos",
igBody: "Síguenos para ver el día a día",
petBody: "Bienvenidos los peluditos de la casa.",
directions: "Encuéntranos",
},
footer: {
tagline: "Casa de playa para familia y amigos. Pet friendly. Cap Cana, La Marina.",
map: "Mapa",
contact: "Contacto",
copy: "© 2026 Api Beach House.",
sub: "Cap Cana · La Marina · Pet friendly",
},
},
en: {
nav: { home: "Home", house: "The House", contact: "Contact", book: "Book Now" },
hero: {
subtitle: "The beachfront space. Come with friends. Stay with family.",
cta: "Book on Instagram",
explore: "Explore the house",
petFriendly: "Pet friendly",
family: "Family & friends",
},
intro: {
eyebrow: "Welcome",
title1: "Dress to impress.",
title2: "We have a dress code, “Refined Coastal Comfort”.",
body1: "Api Beach House is a social club for those who want to go where the locals go. Guests are welcome, and you’re expected to look the part. We reserve the right to admission.",
body2: "Kindly note: No singlets and no personal music speakers are permitted.",
},
cards: {
eyebrow: "What we are",
title: "Four things, nothing more.",
items: [
{ t: "Family & friends", d: "A relaxed spot to spend the day with the people you love." },
{ t: "Beachfront", d: "Cap Cana, La Marina. Sand, breeze and Caribbean views." },
{ t: "Entrance Fee · $25", d: "USD entrance fee, not consumable plus taxes. Book directly on Instagram." },
{ t: "Direct bookings", d: "No forms. Write us on Instagram and we'll confirm." },
],
},
daypass: {
eyebrow: "Access",
title: "Entrance Fee",
price: "$25",
per: "USD entrance fee (not consumable + taxes)",
body: "Includes beach access, umbrellas and sun loungers for the day. Pets welcome. Book directly on Instagram.",
cta: "Book on Instagram",
note: "Pets welcome · Cap Cana, La Marina",
},
menu: {
eyebrow: "What we serve",
title: "Menu",
food: "To eat",
drinks: "To drink",
items: {
food: [
{ name: "Double Smash Burger / infamous API burger", desc: "Two Beef Patties, Bacon, Cheese, Lettuce, Tomato, Secret Api Sauce" },
{ name: "Coastal Shrimp & Fresh Cut Fries (Grilled)", desc: "Garlic, Salt, Citrus Infused" },
{ name: "Coastal Shrimp & Fresh Cut Fries (Crispy Breaded)", desc: "Panko, Tartare" },
{ name: "Trio Fish Taco", desc: "Corn Taco with Coleslaw, Lettuce, Crispy Fish, Cilantro Mayo" },
{ name: "Fish & Wedges", desc: "Beer Battered Fish & Potato Wedges, Tartare" },
{ name: "Stripped Chicken Milanese", desc: "Breaded & Seasoned Crispy Chicken Cutlet, Fries" },
{ name: "Shredded Oporto Sandwich", desc: "Pulled Marinaded Chicken Breast, Lettuce, Cheese, 2nd Secret Sauce" },
{ name: "Empanaditas (Cheese)", desc: "" },
{ name: "Empanaditas (Chicken)", desc: "" },
{ name: "Tequeños (Melted Cheese)", desc: "" },
{ name: "Tequeños (Sweet & Savoury Cheese & Guava)", desc: "" },
{ name: "Croquetas (Chicken)", desc: "" },
{ name: "Croquetas (Beef)", desc: "" },
{ name: "Quipes de Res", desc: "" },
{ name: "Warm Chicken Salad", desc: "Romaine, Cherry Tomatoes, Cucumbers, Corn, Kalamata Olives, Feta Cheese, Olive Oil, Balsamic Vinegar" },
{ name: "Calamari", desc: "" }
],
drinks: [
{ name: "Api Pina Colada", desc: "Signature Coastal Cocktail" },
{ name: "Garden Mojito", desc: "Signature Coastal Cocktail" },
{ name: "Passionfruit Margarita", desc: "Signature Coastal Cocktail" },
{ name: "Strawberry Daiquiri", desc: "Signature Coastal Cocktail" },
{ name: "Esprit", desc: "Signature Coastal Cocktail" },
{ name: "Nozimchelada", desc: "Signature Coastal Cocktail" },
{ name: "Domestic Beer", desc: "" },
{ name: "International Beer", desc: "" }
],
},
note: "Menu subject to availability · Ask us on Instagram",
},
hours: {
eyebrow: "Hours",
days: "Monday to Sunday",
time: "11:00 AM – 7:00 PM",
note: "Open every day",
},
quote: { line1: "the beach,", line2: "as it should be." },
gallery: { eyebrow: "Gallery", title: "A day here.", more: "More on Instagram" },
ig: { tagline: "Family beach club", follow: "Follow" },
experience: {
eyebrow: "The house",
heroTitle1: "By the sea,",
heroTitle2: "with family.",
intro: "Api Beach House is a beach house in Cap Cana — a quiet spot to spend the day with family and friends. Kitchen, bar and sea. Nothing more complicated than that.",
rows: [
{ t: "Beachfront", d: "Beach, umbrellas and sun loungers for the day. The breeze does the rest." },
{ t: "Kitchen & bar", d: "Simple, fresh, delicious food. Bar with cocktails and cold drinks to go along." },
{ t: "Pet friendly", d: "Your dog is welcome — fresh water, shade and lots of love." },
{ t: "Family & friends", d: "Relaxed space designed for groups. Tables for sharing, no unnecessary noise." },
],
ctaEyebrow: "Reservations",
ctaTitle: "Shall we expect you?",
ctaBody: "Write to us on Instagram to book your table or beach day.",
},
contact: {
eyebrow: "Contact",
title1: "See you",
title2: "at the beach.",
subtitle: "Bookings and inquiries directly via Instagram. We reply personally.",
waLabel: "Instagram · Bookings",
waBody: "Tap to open a conversation. We attend during house hours.",
waAction: "Write now",
location: "Location",
phone: "Phone",
phoneBody: "Call or message us",
igBody: "Follow us to see day-to-day life",
petBody: "Furry friends are always welcome.",
directions: "Come find us",
},
footer: {
tagline: "Beach house for family and friends. Pet friendly. Cap Cana, La Marina.",
map: "Map",
contact: "Contact",
copy: "© 2026 Api Beach House.",
sub: "Cap Cana · La Marina · Pet friendly",
},
},
};
/* ---------- Palettes ---------- */
const PALETTES = {
ocean: { bg: "#f6f2ea", paper: "#fbf8f2", ink: "#13243a", ink2: "#3b4a5e", accent: "#3aa6b9", line: "#e7decf" },
dusk: { bg: "#efeae0", paper: "#f7f2e8", ink: "#2a1f3a", ink2: "#52465e", accent: "#c97b5b", line: "#e3d8c4" },
reef: { bg: "#eef2f0", paper: "#f6f8f5", ink: "#0f2b2a", ink2: "#3a5454", accent: "#1f7a6b", line: "#dbe4dd" },
};
/* ---------- Icons ---------- */
const I = {
menu: (p) => ,
x: (p) => ,
wa: (p) => ,
ig: (p) => ,
phone: (p) => ,
pin: (p) => ,
arrow: (p) => ,
wave: (p) => ,
paw: (p) => ,
heart: (p) => ,
sun: (p) => ,
family:(p) => ,
verified: (p) => ,
mail: (p) => ,
};
/* ---------- Wordmark ---------- */
function Wordmark({ size = 1, light = false, palette }) {
const ink = light ? "#fff" : palette.ink;
return (
Api
Beach House Social Club
);
}
/* ---------- Lang Toggle ---------- */
function LangToggle({ lang, setLang, palette }) {
return (
);
}
/* ---------- Nav ---------- */
function Nav({ page, setPage, palette, lang, setLang, t }) {
const [open, setOpen] = useState(false);
const items = [
{ id: "home", label: t.nav.home },
{ id: "experience", label: t.nav.house },
{ id: "contact", label: t.nav.contact },
];
const go = (id) => { setPage(id); setOpen(false); window.scrollTo({ top: 0, behavior: "instant" }); };
return (
{t.nav.book}
{open && (
{items.map(it => (
))}
)}
);
}
/* ---------- Bits ---------- */
function Eyebrow({ children, palette, light }) {
return (
{children}
);
}
function Display({ children, palette, style }) {
return (
{children}
);
}
function Body({ children, palette, style }) {
return (
{children}
);
}
/* ---------- HOME ---------- */
function HomePage({ palette, tweaks, setPage, t }) {
const heroSrc = {
gazebo: "assets/gazebo-day.png",
interior: "assets/interior.png",
night: "assets/palms-night.jpg",
lounge: "assets/lounge-wide.png",
}[tweaks.heroImage] || "assets/gazebo-day.png";
return (
{/* Hero */}
{INFO.location}
Api Beach House
Social Club.
{t.hero.subtitle}
{t.hero.cta}
{/* corner chip */}
{/* Intro band */}
{t.intro.eyebrow}
{t.intro.title1}
{t.intro.title2}
{t.intro.body1}
{t.intro.body2}
{/* Value props */}
{t.cards.eyebrow}
{t.cards.title}
{t.cards.items.map((s, idx) => {
const icons = [
,
,
,
];
const nums = ["01", "02", "03", "04"];
return (
{icons[idx]}
{nums[idx]}
{s.t}
{s.d}
);
})}
{/* Come find us map */}
{t.contact.location}
{t.contact.directions}
{/* Day Pass */}
{t.daypass.eyebrow}
{t.daypass.price}
{t.daypass.per}
{t.daypass.body}
{t.daypass.note}
{t.daypass.cta}
{/* Menu */}
{t.menu.eyebrow}
{t.menu.title}
{/* Food */}
{t.menu.food}
{t.menu.items.food.map((item, i) => (
))}
{/* Drinks */}
{t.menu.drinks}
{t.menu.items.drinks.map((item, i) => (
))}
{t.menu.note}
{/* Hours strip */}
{t.hours.eyebrow}
{t.hours.days}
{t.hours.time}
{t.hours.note}
{/* Image quote band */}
{t.quote.line1}
{t.quote.line2}
{/* Gallery strip */}
{["assets/burger.png", "assets/lounge-wide.png", "assets/interior.png", "assets/palms-night.jpg"].map((src, i) => (
))}
apibeachhouse
Api Beach House · {t.ig.tagline}
Cap Cana · La Marina · {t.hero.petFriendly}
{t.ig.follow}
);
}
/* ---------- LA CASA (Experience) ---------- */
function ExperiencePage({ palette, t }) {
return (
{t.experience.eyebrow}
{t.experience.heroTitle1} {t.experience.heroTitle2}
{t.experience.rows.map((row, i) => {
const imgs = ["assets/lounge-wide.png", "assets/burger.png", "assets/palms-night.jpg", "assets/interior.png"];
return (
);
})}
{t.contact.eyebrow}
{t.contact.title1}
{t.contact.title2}
{t.contact.subtitle}
{t.contact.waLabel}
{INFO.instagramHandle}
{t.contact.waBody}
{t.contact.waAction}
} title={t.contact.location} lines={[INFO.locationFull]} link={{ href: INFO.mapsUrl, label: t.contact.directions }} />
} title="Email" lines={[]} link={{ href: `mailto:reserva@apibeach.com`, label: "reserva@apibeach.com" }} />
} title="Instagram" lines={[t.contact.igBody]} link={{ href: INFO.instagramUrl, label: INFO.instagramHandle }} />
} title="Pet friendly" lines={[t.contact.petBody]} />
);
}
function InfoBlock({ icon, title, lines, link, palette }) {
return (
);
}
/* ---------- Footer ---------- */
function Footer({ palette, setPage, t }) {
return (
);
}
/* ---------- Floating Instagram ---------- */
function FloatingWA({ palette, t }) {
return (
e.currentTarget.style.transform = "scale(1.08)"} onMouseLeave={e => e.currentTarget.style.transform = "scale(1)"}>
);
}
/* ---------- App ---------- */
function App() {
const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);
const [page, setPage] = useState("home");
const [lang, setLang] = useState("en");
const palette = PALETTES[tweaks.palette] || PALETTES.ocean;
const t = TEXTS[lang];
useEffect(() => {
document.body.style.background = palette.bg;
document.body.style.color = palette.ink;
}, [palette]);
return (
{page === "home" && }
{page === "experience" && }
{page === "contact" && }
{tweaks.showFloatingWA && }
setTweak("palette", v)}
options={[
{ value: "ocean", label: "Ocean" },
{ value: "dusk", label: "Dusk" },
{ value: "reef", label: "Reef" },
]}/>
setTweak("heroImage", v)}
options={[
{ value: "gazebo", label: "Gazebo" },
{ value: "interior", label: "Interior" },
{ value: "lounge", label: "Lounge" },
{ value: "night", label: "Noche" },
]}/>
);
}
ReactDOM.createRoot(document.getElementById("root")).render();
))}