/* ───────────────────────────────────────────────────────────────────────── MENÚ FACTORY — Cinematic Landing v7.0 Single hero + immersive in-page live demo (no scroll journey). Exports window.MFLanding / window.MFLandingView. Props: { onStart, onSignIn } ───────────────────────────────────────────────────────────────────── */ const { useState, useEffect, useRef, useCallback } = React; const C = { bg: '#080604', copper: '#C4813A', copperL: '#E8A855', text: '#F5F0E8', muted: 'rgba(245,240,232,0.52)', dim: 'rgba(245,240,232,0.24)', faint: 'rgba(245,240,232,0.08)', green: '#6DB86D', }; /* Typography — aligned with the rest of Menú Factory: Fraunces (serif) for display / personality / prices, Inter Tight (sans) for labels, navigation, buttons and body. Both already loaded by index.html. */ const SF = '"Fraunces","Georgia",serif'; const UI = '"Inter Tight",system-ui,-apple-system,sans-serif'; const IMGS = { hero: '/img-hero.png', }; /* MXN currency formatting — never raw integers for money. */ const mx = n => Number(n).toLocaleString('es-MX', { minimumFractionDigits: 0, maximumFractionDigits: 0 }); /* ── CSS ──────────────────────────────────────────────────────────── */ const CSS = ` @import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300..600;1,9..144,300..600&family=Inter+Tight:ital,wght@0,400;0,500;0,600;1,400&display=swap'); .mfc *{box-sizing:border-box;margin:0;padding:0} .mfc button,.mfc a{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit;text-decoration:none} .mfc button:disabled{opacity:.45;cursor:not-allowed} @keyframes mfc-grain{0%,100%{transform:translate(0,0)}20%{transform:translate(-3%,-2%)}40%{transform:translate(2%,3%)}60%{transform:translate(-2%,1%)}80%{transform:translate(3%,-2%)}} @keyframes mfc-blink{0%,100%{opacity:1}50%{opacity:0}} @keyframes mfc-ring{0%,100%{opacity:.20;transform:scale(1)}50%{opacity:.55;transform:scale(1.05)}} @keyframes mfc-pulse{0%,100%{opacity:.30;transform:scale(1)}50%{opacity:.95;transform:scale(1.18)}} @keyframes mfc-up{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}} @keyframes mfc-up-sm{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}} @keyframes mfc-in{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:scale(1)}} @keyframes mfc-scan{0%{transform:translateY(-120%)}100%{transform:translateY(2200%)}} @keyframes mfc-stripe{0%{transform:translateX(-100%)}100%{transform:translateX(320%)}} @keyframes mfc-pop{0%{transform:scale(.6);opacity:0}60%{transform:scale(1.12)}100%{transform:scale(1);opacity:1}} @keyframes mfc-fadeout{from{opacity:1}to{opacity:0}} @keyframes mfc-draw{to{stroke-dashoffset:0}} .mfc-nav{position:fixed;top:0;left:0;right:0;z-index:120;display:flex;align-items:center;justify-content:space-between;padding:18px 40px;transition:background .4s,border-color .4s} .mfc-nav.sc{background:rgba(8,6,4,.93);border-bottom:1px solid rgba(196,129,58,.1);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)} .mfc-nav-btn{font-family:${UI};font-size:9px;letter-spacing:.22em;text-transform:uppercase;color:#C4813A;border:1px solid rgba(196,129,58,.4);padding:9px 18px;min-height:34px;background:transparent;transition:background .26s,border-color .26s,color .26s,transform .12s} .mfc-nav-btn:hover{background:rgba(196,129,58,.1);border-color:#C4813A} .mfc-nav-btn:active{transform:scale(.97)} .mfc-nav-btn:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(196,129,58,.22)} .mfc-nav-btn.ghost{color:rgba(245,240,232,.52);border-color:rgba(245,240,232,.18)} .mfc-nav-btn.ghost:hover{color:#F5F0E8;border-color:rgba(245,240,232,.4);background:rgba(245,240,232,.04)} /* hero CTAs */ .mfc-cta{font-family:${UI};font-size:10px;letter-spacing:.22em;text-transform:uppercase;padding:0 34px;height:52px;display:inline-flex;align-items:center;justify-content:center;min-width:44px;transition:background .28s,border-color .28s,color .28s,box-shadow .28s,transform .12s} .mfc-cta:active{transform:scale(.97)} .mfc-cta:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(196,129,58,.3)} .mfc-cta.primary{background:#C4813A;color:#0c0905;border:1px solid #C4813A} .mfc-cta.primary:hover{background:#E8A855;border-color:#E8A855} .mfc-cta.primary:focus-visible{box-shadow:0 0 0 3px rgba(232,168,85,.35)} .mfc-cta.ghost{background:transparent;color:#F5F0E8;border:1px solid rgba(245,240,232,.28)} .mfc-cta.ghost:hover{border-color:#C4813A;color:#C4813A} /* generic demo button */ .mfc-btn{font-family:${SF};display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;min-width:44px;font-size:11px;letter-spacing:.16em;text-transform:uppercase;padding:0 22px;border-radius:2px;transition:background .2s,border-color .2s,color .2s,box-shadow .2s,transform .12s;border:1px solid transparent} .mfc-btn:active{transform:scale(.97)} .mfc-btn:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(196,129,58,.28)} .mfc-btn.primary{background:#C4813A;color:#0c0905} .mfc-btn.primary:hover{background:#E8A855} .mfc-btn.ghost{background:transparent;color:rgba(245,240,232,.7);border-color:rgba(196,129,58,.28)} .mfc-btn.ghost:hover{color:#F5F0E8;border-color:#C4813A;background:rgba(196,129,58,.07)} .mfc-btn.lg{height:54px;font-size:12px;letter-spacing:.2em} .mfc-glass{background:rgba(8,6,4,.86);border:1px solid rgba(196,129,58,.16);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-radius:4px} .mfc-glass-lt{background:rgba(14,10,6,.7);border:1px solid rgba(196,129,58,.11);border-radius:4px} /* dish row interactivity */ .mfc-dish{display:flex;align-items:flex-start;gap:14px;padding:16px 0;border-bottom:1px solid rgba(196,129,58,.08);transition:opacity .2s} .mfc-dish:last-child{border-bottom:none} .mfc-add{flex-shrink:0;width:34px;height:34px;border-radius:50%;border:1px solid rgba(196,129,58,.4);color:#C4813A;display:flex;align-items:center;justify-content:center;font-size:18px;line-height:1;transition:background .18s,border-color .18s,color .18s,transform .12s;background:transparent} .mfc-add:hover{background:rgba(196,129,58,.12);border-color:#C4813A} .mfc-add:active{transform:scale(.9)} .mfc-add:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(196,129,58,.28)} .mfc-add.in{background:#C4813A;color:#0c0905;border-color:#C4813A} .mfc-step{display:flex;align-items:center;gap:8px} .mfc-step-dot{width:7px;height:7px;border-radius:50%;background:rgba(245,240,232,.18);transition:background .3s,transform .3s} .mfc-step-dot.on{background:#C4813A;transform:scale(1.25)} .mfc-step-dot.done{background:rgba(196,129,58,.45)} .mfc-scanline{position:absolute;left:8%;right:8%;height:2px;background:linear-gradient(90deg,transparent,#E8A855,transparent);animation:mfc-scan 2.1s ease-in-out infinite} .mfc-x{width:36px;height:36px;border-radius:50%;background:rgba(245,240,232,.06);border:1px solid rgba(245,240,232,.14);color:rgba(245,240,232,.7);display:flex;align-items:center;justify-content:center;transition:background .2s,color .2s,transform .12s;flex-shrink:0} .mfc-x:hover{background:rgba(245,240,232,.12);color:#F5F0E8} .mfc-x:active{transform:scale(.92)} .mfc-x:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(196,129,58,.28)} .mfc-prog{height:3px;background:rgba(196,129,58,.12);border-radius:2px;overflow:hidden;position:relative} .mfc-prog-stripe{position:absolute;top:0;bottom:0;width:40%;background:linear-gradient(90deg,transparent,#C4813A,transparent);animation:mfc-stripe 1.1s linear infinite} .mfc-scroll::-webkit-scrollbar{width:0;display:none} .mfc-scroll{scrollbar-width:none} /* the product, told in three icon+word beats */ .mfc-what{display:flex;align-items:center;justify-content:center;flex-wrap:wrap} .mfc-what-item{display:flex;align-items:center;gap:9px} .mfc-what-sep{width:22px;height:1px;background:rgba(196,129,58,.28);margin:0 18px;flex-shrink:0} /* contextual POV label in the demo header */ .mfc-ctx{display:inline-flex;align-items:center;gap:8px} @media(max-width:767px){ .mfc-nav{padding:13px 18px} .mfc-nav-btn{padding:7px 13px;font-size:8px;letter-spacing:.16em} .mfc-hero-ctas{flex-direction:column;width:100%;max-width:320px} .mfc-cta{width:100%} .mfc-demo-grid{grid-template-columns:1fr!important;gap:16px!important} .mfc-demo-pad{padding:18px!important} .mfc-ctx{display:none} } @media(max-width:540px){ .mfc-what{flex-direction:column;gap:14px} .mfc-what-sep{display:none} } `; /* ── Utilities ───────────────────────────────────────────────────── */ function useScrollY() { const [y, setY] = useState(0); useEffect(() => { const fn = () => setY(window.scrollY); window.addEventListener('scroll', fn, { passive: true }); return () => window.removeEventListener('scroll', fn); }, []); return y; } function useIsMobile() { const [m, setM] = useState(typeof window !== 'undefined' ? window.innerWidth < 768 : false); useEffect(() => { const fn = () => setM(window.innerWidth < 768); window.addEventListener('resize', fn); return () => window.removeEventListener('resize', fn); }, []); return m; } /* ── Atoms ───────────────────────────────────────────────────────── */ function Grain() { return (
); } function Logo({ sz = 26, style }) { return (
MF
Menú Factory by sinapsys
); } /* small reusable caption label */ function Cap({ children, color = C.copper, style }) { return (
{children}
); } function LiveDot({ color = C.green }) { return ( ); } /* avatar chip */ function Avatar({ name, active, size = 30 }) { const initial = (name || '?').trim().charAt(0).toUpperCase(); return (
{initial}
); } /* ── What Menú Factory is, told in icons ───────────────────────────── Three glyphs that carry the whole product without a paragraph. Reused by the hero explainer and the demo intro so the promise reads identically. */ function IconScan({ s = 20 }) { return ( ); } function IconGroup({ s = 20 }) { return ( ); } function IconPay({ s = 20 }) { return ( ); } /* The product in three beats — concrete, low-text, used in two places. */ const WHAT = [ { label: 'Escanean la mesa', Icon: IconScan }, { label: 'Piden en grupo', Icon: IconGroup }, { label: 'Pagan dividido', Icon: IconPay }, ]; /* horizontal icon+word explainer; sep dividers collapse on narrow screens */ function WhatRow({ size = 20, fontSize = 12, color = C.text }) { return (
{WHAT.map((w, i) => ( {i > 0 && }
{w.label}
))}
); } /* ── Navigation ──────────────────────────────────────────────────── */ function CNav({ onStart, onSignIn, onShowPricing, hidden }) { const y = useScrollY(); if (hidden) return null; return ( ); } /* ───────────────────────────────────────────────────────────────────────── HERO — typewriter, kept faithful, now with a primary "Vivir la demo" CTA ───────────────────────────────────────────────────────────────────── */ function Hero({ onStart }) { const PROBLEM = 'Convertimos la experiencia de siempre en una conexión de otro nivel.'; const SOLUTION = 'Menú Factory.'; const TAGLINE = 'El comensal se une a tu restaurante como en su propia casa: lo que piensa es lo que pide.'; const [txt, setTxt] = useState(''); const [phase, setPhase] = useState('idle'); const [showSub, setShowSub] = useState(false); const [showCTA, setShowCTA] = useState(false); const [isSolution, setIsSolution] = useState(false); const [heroLoaded, setHeroLoaded] = useState(false); useEffect(() => { const img = new Image(); img.onload = () => setHeroLoaded(true); img.src = IMGS.hero; if (img.complete) setHeroLoaded(true); }, []); useEffect(() => { const t = setTimeout(() => setPhase('typing-p'), 900); return () => clearTimeout(t); }, []); useEffect(() => { let t; if (phase === 'typing-p') { if (txt.length < PROBLEM.length) { t = setTimeout(() => setTxt(PROBLEM.slice(0, txt.length + 1)), 46); } else { t = setTimeout(() => setPhase('pause'), 2400); } } else if (phase === 'pause') { t = setTimeout(() => setPhase('deleting'), 200); } else if (phase === 'deleting') { if (txt.length > 0) { t = setTimeout(() => setTxt(s => s.slice(0, -1)), 24); } else { setIsSolution(true); t = setTimeout(() => setPhase('typing-s'), 380); } } else if (phase === 'typing-s') { if (txt.length < SOLUTION.length) { t = setTimeout(() => setTxt(SOLUTION.slice(0, txt.length + 1)), 72); } else { setPhase('done'); setTimeout(() => setShowSub(true), 700); setTimeout(() => setShowCTA(true), 1400); } } return () => clearTimeout(t); }, [phase, txt]); const showCursor = phase !== 'done'; return (
Menú Factory

{txt} {showCursor && ( | )}

{isSolution && (
by sinapsys
)}

{TAGLINE}

{/* What it actually is — the carta digital, in three concrete beats */}
{showCTA && (

Sin instalar nada. Vívela como la vive tu comensal.

)}
); } /* ───────────────────────────────────────────────────────────────────────── THE LIVE DEMO — immersive, in-page, five felt steps ───────────────────────────────────────────────────────────────────── */ const MENU = [ { id:'d1', name:'Aguachile de camarón', desc:'Limón, serrano, pepino, cebolla morada.', price:185, tag:'Picante' }, { id:'d2', name:'Tostada de atún', desc:'Atún sellado, aguacate, chile macha.', price:165, tag:'Del mar' }, { id:'d3', name:'Tlayuda Oaxaqueña', desc:'Asiento, quesillo, tasajo, frijol.', price:220, tag:'Para compartir' }, { id:'d4', name:'Mezcal Tobalá', desc:'Espadín silvestre, naranja, sal de gusano.', price:140, tag:'Casa' }, { id:'d5', name:'Flan de cajeta', desc:'Cajeta de Celaya, nuez garapiñada.', price:95, tag:'Dulce' }, ]; const STEPS = [ { key:'scan', label:'Escanear' }, { key:'menu', label:'La carta' }, { key:'group', label:'En grupo' }, { key:'pay', label:'La cuenta' }, { key:'done', label:'El cierre' }, ]; function StepRail({ index }) { return (
{STEPS.map((s, i) => (
{s.label}
))}
); } /* STEP 1 — Scan / arrival */ function StepScan({ onNext }) { const [connecting, setConnecting] = useState(false); const [connected, setConnected] = useState(false); useEffect(() => { if (!connecting) return; const t = setTimeout(() => { setConnected(true); }, 1700); return () => clearTimeout(t); }, [connecting]); useEffect(() => { if (!connected) return; const t = setTimeout(onNext, 1300); return () => clearTimeout(t); }, [connected, onNext]); return (
Mesa 4 · Casa Amaranta
{/* concentric rings */} {[0,1,2].map(i => (
))} {/* QR plate */}
{!connected ? ( <> {[[6,6],[6,52],[52,6]].map(([x,y],k)=>( ))} {[[34,8],[44,8],[34,18],[54,18],[34,30],[46,30],[8,38],[20,38],[34,40],[50,42],[64,40], [38,52],[50,52],[62,54],[38,64],[52,62],[64,66],[34,52],[34,62]].map(([x,y],k)=>( ))} {connecting &&
} ) : (
)}
{!connected ? ( <>

{connecting ? 'Conectando tu mesa…' : 'Escanea para sentarte'}

{connecting ? 'Estás entrando a la mesa, como quien cruza la puerta de casa.' : 'Apunta tu cámara al código de la mesa. No hay app que descargar.'}

{!connecting && ( )} {connecting && (
)} ) : (

Mesa conectada.

Experiencia activa en Mesa 4
)}
); } /* STEP 2 — Browse the menu, add dishes */ function StepMenu({ cart, addDish, onNext }) { const total = cart.reduce((s, c) => s + c.price * c.qty, 0); const count = cart.reduce((s, c) => s + c.qty, 0); return (
La carta · Casa Amaranta

Pide como en casa.

Toca un platillo para sumarlo a la cuenta de la mesa.

{MENU.map(d => { const inCart = cart.find(c => c.id === d.id); return (
{d.name} ${mx(d.price)}
{d.desc}
{d.tag}
); })}
{count === 0 ? ( Tu mesa aún no pide nada. ) : (
Cuenta de la mesa ${mx(total)} {count} {count === 1 ? 'platillo' : 'platillos'}
)}
); } /* STEP 3 — A second guest joins live, multiplayer felt */ function StepGroup({ cart, addDish, onNext }) { const [sofiaJoined, setSofiaJoined] = useState(false); const [sofiaOrdered, setSofiaOrdered] = useState(false); useEffect(() => { const t1 = setTimeout(() => setSofiaJoined(true), 900); const t2 = setTimeout(() => { setSofiaOrdered(true); addDish(MENU[2], 'Sofía'); // Tlayuda, attributed to Sofía }, 2300); return () => { clearTimeout(t1); clearTimeout(t2); }; // eslint-disable-next-line }, []); const total = cart.reduce((s, c) => s + c.price * c.qty, 0); const guests = [ { name:'Tú', active:true, status:'En la carta' }, { name:'Sofía', active:false, status: sofiaOrdered ? 'Pidió Tlayuda' : sofiaJoined ? 'Mirando la carta' : 'Conectando…' }, ]; return (
Mesa 4 · En grupo

La mesa pide en conjunto.

Cada comensal escanea el mismo código. La cuenta es una sola, viva, compartida.

{/* guest cards */}
{guests.map((g, i) => (
{g.name}
{(g.active || sofiaJoined) && } {g.status}
))}
{/* shared cart */}
Cuenta compartida · Mesa 4 {cart.length === 0 ? (

Aún sin platillos.

) : cart.map((c, i) => (
{c.name} {c.qty > 1 && ×{c.qty}}
${mx(c.price * c.qty)}
))}
Total mesa ${mx(total)}
{sofiaOrdered ? 'Todos están sincronizados' : 'Sincronizando la mesa…'}
); } /* STEP 4 — Split + pay at table */ function StepPay({ cart, onNext }) { const total = cart.reduce((s, c) => s + c.price * c.qty, 0); const people = ['Tú', 'Sofía']; const per = total / people.length; const [paid, setPaid] = useState([]); const payAll = () => { people.forEach((p, i) => setTimeout(() => setPaid(prev => [...prev, p]), 500 + i * 700)); }; const allPaid = paid.length === people.length; useEffect(() => { if (!allPaid) return; const t = setTimeout(onNext, 1200); return () => clearTimeout(t); }, [allPaid, onNext]); return (
Mesa 4 · La cuenta

Se divide sin pedir la cuenta.

Cada quien paga desde su teléfono. Nadie espera al mesero con la terminal.

{/* total + split math */}
Total de la mesa
${mx(total)}
÷ {people.length} comensales = ${mx(per)} c/u
{/* per-person cards */}
{people.map(p => { const done = paid.includes(p); return (
{p}
{p === 'Tú' ? 'Apple Pay' : 'Tarjeta ·· 4291'}
${mx(per)} {done ? ( Pagado ) : ( Pendiente )}
); })}
); } /* STEP 5 — The close + invitation */ function StepDone({ onStart, onReplay }) { return (
{[0,1].map(i => (
))}

Completamente pagada.

La mesa se sentó, pidió en grupo y pagó dividido — sin esperar a nadie.

"La experiencia termina. La inteligencia de tu restaurante continúa."

); } /* STEP 0 — Intro: frame the demo so the restaurant owner knows what they're about to do — step into the comensal's shoes, not watch a marketing reel. */ function StepIntro({ onBegin }) { return (
La demo · 60 segundos

Ponte en el lugar de tu comensal.

Esto no es un video. Es la experiencia real que vive quien se sienta en tu mesa — tú la recorres paso a paso, desde el teléfono, como si fueras él.

{/* the three beats they're about to live */}

Tú tocas, nosotros simulamos al resto de la mesa.

); } /* ── Footer ──────────────────────────────────────────────────────── */ function Footer({ onStart }) { return (

El comensal se une a tu restaurante como en su propia casa.

{[ { t:'Producto', l:['Menú digital','Panel admin','Cuenta compartida','API'] }, { t:'Casas', l:['Casa Amaranta','Oryu omakase','La Huerta','Ver todas'] }, { t:'Empresa', l:['Manifiesto','Equipo','Contacto','Términos'] }, ].map(col => (
{col.t} {col.l.map(item => (
{item}
))}
))}
MMXXVI Menú Factory by sinapsys Version 7.0 · Immersive
); } /* ── Root export ─────────────────────────────────────────────────── */ window.MFLanding = function MFLanding({ onStart, onSignIn, onShowPricing }) { useEffect(() => { const style = document.createElement('style'); style.textContent = CSS; document.head.appendChild(style); return () => { try { document.head.removeChild(style); } catch (e) {} }; }, []); return (
); }; window.MFLandingView = window.MFLanding;