// Bom Pain — Sections components // Depends on globals: React, Illus, BPData const { useState, useEffect, useRef } = React; // Hook: reveal-on-scroll for any element function useReveal(threshold = 0.18) { const ref = useRef(null); useEffect(() => { if (!ref.current) return; const obs = new IntersectionObserver( (entries) => { entries.forEach((e) => { if (e.isIntersecting) { e.target.classList.add("in"); // also draw any pencil illustrations within e.target.querySelectorAll(".bp-illus").forEach((s) => s.classList.add("bp-drawn")); } }); }, { threshold: 0.05, rootMargin: "0px 0px -8% 0px" } ); obs.observe(ref.current); return () => obs.disconnect(); }, [threshold]); return ref; } // Reveal wrapper function Reveal({ children, className = "", delay = 0, ...rest }) { const ref = useReveal(); return (
{children}
); } // ============= NAV ============= function Nav() { const [scrolled, setScrolled] = useState(false); useEffect(() => { const onScroll = () => setScrolled(window.scrollY > 60); window.addEventListener("scroll", onScroll); return () => window.removeEventListener("scroll", onScroll); }, []); return ( ); } // ============= FLOATING WHATSAPP ============= function FloatingWhatsApp() { return ( WhatsApp ); } // ============= HERO ============= function Hero({ variant = "a" }) { const ref = useReveal(0.05); useEffect(() => { if (ref.current) { ref.current.querySelectorAll(".bp-illus").forEach((s) => s.classList.add("bp-drawn")); ref.current.classList.add("in"); } }, []); return (
Boulangerie · Café · Ñemby

Bom Pain. El arte del pan.

Una panadería de barrio con alma francesa y corazón paraguayo. Café de origen, pan de masa madre y los sabores de la abuela, servidos con calma desde 2019.

Reservar mesa → Ver el menú →
Bom Pain Ñemby
{[...BPData.marquee, ...BPData.marquee].map((s, i) => ( {s} ))}
); } // ============= ABOUT ============= function About() { return (
Panaderos en el horno
Nuestra historia

Donde el pan — se hace con tiempo

Bom Pain nació en una pequeña esquina de Ñemby en 2019, con un horno a leña, dos manos pacientes y la convicción de que el pan se hornea sin prisa. Hoy seguimos amasando como el primer día.

Combinamos la tradición de la boulangerie francesa — masa madre, fermentaciones largas, mantequilla de calidad — con los sabores que aprendimos de nuestras abuelas: chipa al horno, sopa paraguaya recién hecha, mbeju en sartén caliente.

07 Años horneando
48h De fermentación
∞ Tazas de café
); } // ============= MENU ============= function Menu() { const [tab, setTab] = useState("cafe"); const tabs = Object.keys(BPData.menu); const active = BPData.menu[tab]; // Re-trigger draw animation when tab changes const gridRef = useRef(null); useEffect(() => { if (!gridRef.current) return; const items = gridRef.current.querySelectorAll(".bp-illus"); items.forEach((s) => s.classList.remove("bp-drawn")); requestAnimationFrame(() => { requestAnimationFrame(() => items.forEach((s) => s.classList.add("bp-drawn"))); }); }, [tab]); return ( ); } // ============= GALLERY + LIGHTBOX ============= function Gallery() { const [open, setOpen] = useState(null); // index const items = BPData.gallery; useEffect(() => { const onKey = (e) => { if (open === null) return; if (e.key === "Escape") setOpen(null); if (e.key === "ArrowRight") setOpen((o) => (o + 1) % items.length); if (e.key === "ArrowLeft") setOpen((o) => (o - 1 + items.length) % items.length); }; window.addEventListener("keydown", onKey); return () => window.removeEventListener("keydown", onKey); }, [open, items.length]); return ( ); } // ============= RESERVATIONS ============= function Reservations() { const today = new Date().toISOString().split("T")[0]; const [form, setForm] = useState({ name: "", phone: "", email: "", date: today, time: "12:30", party: 2, occasion: "Almuerzo", notes: "", }); const [submitted, setSubmitted] = useState(false); const [confirmation, setConfirmation] = useState(null); const update = (k, v) => setForm((f) => ({ ...f, [k]: v })); const submit = (e) => { e.preventDefault(); if (!form.name || !form.phone) return; const code = "BP-" + Math.random().toString(36).slice(2, 6).toUpperCase() + "-" + new Date().getFullYear().toString().slice(-2); setConfirmation({ ...form, code }); setSubmitted(true); }; const reset = () => { setSubmitted(false); setForm({ name: "", phone: "", email: "", date: today, time: "12:30", party: 2, occasion: "Almuerzo", notes: "" }); }; const times = []; for (let h = 8; h <= 20; h++) { times.push(`${String(h).padStart(2, "0")}:00`); times.push(`${String(h).padStart(2, "0")}:30`); } return (
Reservas

Aparta tu mesa— para una buena tarde

Confirma tu reserva en menos de un minuto. Te esperamos con el horno encendido y una mesa junto a la ventana, si así lo deseas.

Horarios de atención

{BPData.hours.map((h) => (
{h.day} {h.time}
))}
{!submitted ? (
update("name", e.target.value)} placeholder="María González" required />
update("phone", e.target.value)} placeholder="+595 981 000 000" required />
update("email", e.target.value)} placeholder="maria@correo.com" />
update("date", e.target.value)} required />
{form.party}