// Wapido Landing v4 — wireframe const { useState, useEffect, useRef } = React; const PALETTES = { paper: { '--paper': '#F6F1E8', '--paper-deep': '#EFE7D6' }, white: { '--paper': '#FFFFFF', '--paper-deep': '#F4F4F2' }, cream: { '--paper': '#FAF3E0', '--paper-deep': '#F2E9D2' }, bone: { '--paper': '#F0EBE0', '--paper-deep': '#E6E0D2' }, sage: { '--paper': '#EEF1E6', '--paper-deep': '#E2E7D6' } }; // ─── Wireframe primitives ────────────────────────────── const Mono = ({ children, style }) => {children}; // gray placeholder box w/ label — for things that aren't built yet const Box = ({ label, height = 200, children, style }) =>
{children || label}
; // section label (top-left, monospaced) const SectionLabel = ({ num, name }) =>
{num} ─ {name}
; // section wrapper — consistent vertical rhythm const Section = ({ id, label, num, children, minHeight = '90vh' }) =>
{children}
; // ─── NAV ────────────────────────────────────────────── function Nav() { const [hidden, setHidden] = useState(false); const lastY = useRef(0); useEffect(() => { const onScroll = () => { const y = window.scrollY; const dy = y - lastY.current; if (y < 80) setHidden(false);else if (dy > 4) setHidden(true);else if (dy < -4) setHidden(false); lastY.current = y; }; window.addEventListener('scroll', onScroll, { passive: true }); return () => window.removeEventListener('scroll', onScroll); }, []); const linkStyle = { fontSize: 14, color: 'var(--ink-soft)' }; return ( ); } // ─── 01 HERO ────────────────────────────────────────── function Hero() { return (
Wapi

Contesta Wápido,{' '}tú cocinas

Wápido toma los pedidos a domicilio y pickup por WhatsApp de tu restaurante, pasa la comanda a tu cocina, y los datos de entrega al repartidor

Inicia ahora
); } // ─── PARA QUIÉN — estilo Opennote (split + card grid) ─ const PARA_QUIEN_TITLES = { ideal: '¿Wápido es para tu restaurante?', paraTi: '¿Wapido es para tu restaurante?', hecho: 'Hecho para restaurantes ocupados', suena: 'Si esto te suena, Wapido es para ti', pegado: 'Pensado para quien vive pegado al WhatsApp', comoEl: 'Para restaurantes como el tuyo' }; function ParaQuien({ titleKey = 'ideal' }) { const tipos = [ { label: 'Para los dueños/gerentes que toman los pedidos por WhatsApp', body: 'La tarea que parecía imposible delegarle a tu equipo, ahora es más fácil que nunca. Recupera horas diarias de tu día y libérate de estar pegado al celular atendiendo pedidos.', quote: '"En la noche entran 80 chats al mismo tiempo. Wapi los atiende todos sin que yo levante el celular."', author: 'Lalo, Tacos El Compa', illu: 'tacos' }, { label: 'Para restaurantes con 10+ pedidos al día', body: 'De primera mano, sabemos el trabajo que lleva responder los pedidos y, por eso mismo, sabemos la importancia de ofrecer un servicio rápido y consistente. Wapido te ayuda a llevar esa parte al siguiente nivel sin tener que depender de tu personal para ofrecer un servicio extraordinario.', quote: '"Antes contestaba yo todo el día. Ahora Wapi atiende y yo cocino. Vendo más sin trabajar más."', author: 'Sebastián, dueño de Sabor Casero', illu: 'cocina' }]; const [active, setActive] = useState(1); const tipo = tipos[active]; return (
{/* Izquierda — título + lista */}

{PARA_QUIEN_TITLES[titleKey] || PARA_QUIEN_TITLES.ideal}

{tipos.map((t, i) => { const isActive = i === active; return ( ); })}
{/* Derecha — card con grid + ilustración + quote */}
{/* Grid pattern */}
{/* Ilustración a mano — cambia según tipo activo */}
{tipo.illu === 'tacos' && {/* Comal con tortillas */} {/* Taco 1 */} {/* Taco 2 */} {/* Vapor */} {/* Notas */} x200/noche } {tipo.illu === 'cocina' && {/* Mano arriba */} {/* Stack de tickets */} } {tipo.illu === 'delivery' && {/* Moto delivery */} {/* Caja del delivery con bolsa */} Wapido {/* Líneas de velocidad */} {/* Pin de mapa */} 180/día }
{/* Quote */}

{tipo.quote}

{tipo.author}
); } // ─── BENEFICIOS — estilo Opennote (doodles + scroll) ── function Beneficios() { const items = [ { title: 'Te recuerda en el cumpleaños', body: 'Wapi guarda la fecha y manda un mensaje en tu nombre con un detalle. El cliente regresa porque alguien se acordó de él.' }, { title: '"Lo de siempre" funciona', body: 'Reconoce a tus clientes habituales, recuerda qué pidieron y les contesta como si los conociera de toda la vida.' }, { title: 'Pide reseña en el momento justo', body: 'Después de la entrega, Wapi pide la reseña con el tono de tu marca. Más estrellas, sin que tú tengas que hacer nada.' }, { title: 'Re‑activa al que se enfrió', body: 'Si un cliente lleva semanas sin pedir, Wapi le manda un mensaje suave con algo que sabe que le gusta. No spam, contexto.' }]; // SVG doodles — pequeños y dibujados a mano const doodles = [ // Pastel + vela , // Corazón con flechita otra vez! , // Estrellas + carita , // Flecha + reloj 3 semanas... ]; // Garabatos decorativos para los márgenes (sticky) return (
{/* Garabatos sticky en los márgenes */}
{/* Izquierda */} cliente VIP {/* Derecha */} + ticket vuelve!
{/* Título */}

Wapi fideliza a tus clientes,
no solo responde mensajes.

{/* Bullets en columna central, mucho aire */}
{items.map((it, i) =>
{doodles[i]}

{it.title}

{it.body}

)}
); } // ─── BENEFITS MARQUEE ───────────────────────────────── function BenefitsMarquee() { const items = [ 'Atiende 24/7', 'Toma pedidos completos', 'Valida pago y ubicaci', 'Suena como tu negocio', 'Manda todo a cocina', 'Setup en 1 día', 'Sin app que descargar', 'Funciona con tu WhatsApp Business']; const repeat = [...items, ...items, ...items]; return (
{repeat.map((it, i) => {it} )}
); } // ─── 02 DOLOR → VALOR ───────────────────────────────── function DolorValor() { const rows = [ { antes: 'Tu celular vibra desde las 11am hasta cierre.', despues: 'Wapido contesta en segundos, todo el día.' }, { antes: 'Pedidos a medias, sin dirección ni pago.', despues: 'Pide lo que falta, valida pago y dirección.' }, { antes: 'El que toma pedidos hoy no es el de mañana.', despues: 'La voz del negocio es siempre la misma.' }, { antes: 'Cada error es comida regalada.', despues: 'Lo que llega a cocina, llega completo.' }]; return (

Atender pedidos por WhatsApp no debería costarte el día.

{/* Split ticket — antes / después como una sola comanda partida */}
{/* Holes / perforación central */}
{/* ANTES — sticky note amarillo, ligeramente rotado */}
{/* Tape */}
Hoy · sin wapido
    {rows.map((r, i) =>
  • ✗ {r.antes}
    • )}
{/* DESPUÉS — comanda impresa limpia */}
{/* Esquina doblada */}
Mañana · con wapido ✓
    {rows.map((r, i) =>
  • ✓ {r.despues}
    • )}
{/* Pie de tabla — micro copy */}
— el mismo trabajo, sin la migraña —
); } // ─── 02 QUÉ ES WAPIDO ───────────────────────────────── function QueEsWapido() { const messages = [ { from: 'them', text: 'Hola! quiero ordenar para llevar', time: '2:14 p.m.' }, { from: 'us', text: '¡Hola! 👋 Bienvenido a Sabor Casero. ¿Te paso el menú o ya sabes qué se te antoja?', time: '2:14 p.m.' }, { from: 'them', text: '2 quesadillas de pastor y una agua de jamaica grande', time: '2:15 p.m.' }, { from: 'us', text: 'Listo. ¿Las quesadillas con todo (cebolla, cilantro, salsa)?', time: '2:15 p.m.' }, { from: 'them', text: 'sí porfa, sin cebolla una', time: '2:16 p.m.' }, { from: 'us', text: 'Anotado. ¿Me confirmas la dirección de entrega?', time: '2:16 p.m.' }, { from: 'them', text: 'Av. Reforma 234, depto 5', time: '2:17 p.m.' }, { from: 'us', text: 'Perfecto. Tu total es $245. ¿Pagas en efectivo o transferencia?', time: '2:17 p.m.' }, { from: 'them', text: 'transferencia', time: '2:18 p.m.' }, { from: 'us', text: 'Te paso los datos. En cuanto confirmes te aviso el tiempo estimado 🛵', time: '2:18 p.m.' }]; const bullets = [ { icon: '◐', title: 'Conversaciones naturales y fluidas', body: 'Wapi recopila todos los datos del pedido de una manera eficiente y sin fricción para tu cliente.' }, { icon: '✓', title: 'Domina la hora pico', body: '3, 5 o 10 conversaciones simultaneas, todas atendidas con el mismo nivel de atención y rapidez.' }, { icon: '↗', title: 'Reconoce a tus clientes más fieles', body: 'Recuerda nombres, ubicaciones y preferencias de órdenes anteriores para ofrecer una experiencia personalizada.' }]; return (
{/* Columna izquierda — texto */}
Qué es Wapido

Tu nuevo especialista en pedidos pickup y domicilio

Ofrece un servicio extraordinario por WhatsApp totalmente especializado para restaurantes.

    {bullets.map((b, i) =>
  • {b.icon}
    {b.title}
    {b.body}
    • )}
{/* Columna derecha — mockup WhatsApp */}
{/* Glow verde sutil detrás */}
); } function WhatsappMockup({ messages }) { return (
{/* Header WhatsApp Business */}
‹
🌮
Sabor Casero {/* Verified check */}
en línea
⋮
{/* Chat area */}
{/* Date pill */}
HOY
{messages.map((m, i) =>
{m.text} {m.time} {m.from === 'us' && }
)} {/* Typing indicator */}
{[0, 1, 2].map((i) => )}
{/* Input bar */}
😊 Mensaje
🎤
); } // ─── 02b PROCESO — scroll numerado estilo Fruitful ──── function ProcesoScroll() { const steps = [ { n: '01', title: 'Reunión para conocer tu restaurante', body: 'Platicamos acerca de tu flujo de toma de pedidos actual: ¿Cuáles son tus desafíos y objetivos? Nos metemos a profundidad en el menú y todos los detalles necesarios para la atención de tus clientes.', links: [{ label: 'Ver requisitos', href: 'https://wa.me/message/YD77UWPNTWO2P1' }, { label: 'Cómo migramos tu número', href: 'https://wa.me/message/YD77UWPNTWO2P1' }], bg: 'var(--post-mint)', accent: 'var(--mint-deep)' }, { n: '02', title: 'Subimos toda la información a tu cuenta ', body: 'Menú, horarios, zonas de entrega y costos, y cualquier instrucción personalizada que hayamos visto durante la reunión, para que Wapi tenga todas las herramientas listas antes de empezar.', links: [{ label: 'Formatos aceptados', href: 'https://wa.me/message/YD77UWPNTWO2P1' }, { label: 'Editar al vuelo', href: 'https://wa.me/message/YD77UWPNTWO2P1' }], bg: 'var(--post-peach)', accent: '#C8553D' }, { n: '03', title: 'Realizamos pruebas', body: 'En una cuenta demo, realizamos pruebas de conversaciones normales que tendrían los clientes con tu restaurante.', links: [{ label: 'Ver una conversación real', href: 'https://wa.me/message/YD77UWPNTWO2P1' }, { label: 'Cuándo te interrumpe', href: 'https://wa.me/message/YD77UWPNTWO2P1' }], bg: 'var(--post-cyan)', accent: '#1F6F7A' }, { n: '04', title: 'Conectamos tu WhatsApp Business', body: 'A través de nuestro proceso verificado con Meta, tu número siempre estará seguro y nunca será necesario que nos compartas las credenciales de tu cuenta.', links: [{ label: 'Integraciones', href: 'https://wa.me/message/YD77UWPNTWO2P1' }, { label: 'Panel de cocina', href: 'https://wa.me/message/YD77UWPNTWO2P1' }], bg: 'var(--post-lilac)', accent: '#5B3FA8' }]; return (
{/* Header — estilo Fruitful (label arriba, título grande) */}
Cómo iniciar

Implementamos en 1 día

El servicio es completamente personalizado: te acompañamos durante todo el proceso hasta asegurarnos de que todo está funcionando correctamente.

{/* Layout: pasos a la izquierda (scroll), visual sticky a la derecha */}
{/* Columna izq: pasos numerados */}
{steps.map((s, i) =>
{s.n}

{s.title}

{s.body}

)}
{/* Columna der: visual sticky que cambia de color según el paso visible */}
); } function ProcesoStickyVisual({ steps }) { const [active, setActive] = useState(0); const containerRef = useRef(null); useEffect(() => { const onScroll = () => { const sec = document.getElementById('proceso'); if (!sec) return; const rect = sec.getBoundingClientRect(); const total = rect.height - window.innerHeight; const scrolled = -rect.top; const progress = Math.max(0, Math.min(1, scrolled / total)); const idx = Math.min(steps.length - 1, Math.floor(progress * steps.length)); setActive(idx); }; window.addEventListener('scroll', onScroll, { passive: true }); onScroll(); return () => window.removeEventListener('scroll', onScroll); }, [steps.length]); const s = steps[active]; return (
{/* Líneas tipo cuaderno */}
{/* Step indicator */}
{steps.map((_, i) =>
)}
{/* Numeral grande */}
{s.n}
{s.title}
); } // ─── 03 CAPACIDADES — tabs estilo Opennote ──────────── function Capacidades() { const tabs = [ { key: 'carta', label: 'Aprende tu operación', title: 'Le enseñas una vez y siempre resolverá', body: 'Wapi aprende tu menú, horarios, zonas y costos de entrega ¡Y más! ', bullets: ['Resuelve cualquier duda relacionada a tu restaurante', 'Escribe con tu voz ', 'Consistencia del servicio sin importar la rotación de personal'] }, { key: 'pedido', label: 'Toma la orden', title: 'Desde el saludo hasta la confirmación', body: 'Wapi conversa de forma natural con tus clientes mientras recopila todos los datos del pedido.', bullets: ['Guarda notas del pedido', 'Sugiere combos y maneja personalizaciones de platillos', 'Calcula costo de envío según ubicación'] }, { key: 'entrega', label: 'Prepara comanda y entrega', title: 'Manda la comanda a cocina y coordina el envío.', body: 'En cuanto Wapi cierra el pedido por WhatsApp, tu equipo recibe el pedido con todos los detalles, y la información del cliente organizada para su entrega.', bullets: ['Comanda lista para cocina', 'Panel de pedidos para organizarlos y prepararlos fácilmente', 'Comparte todos los datos de entrega a tu repartidor con un clic'] }]; const [active, setActive] = useState(0); const tab = tabs[active]; // Each tab gets its own background color for the band below (post-it palette) const bandColors = ['var(--post-mint)', 'var(--post-peach)', 'var(--post-cyan)', 'var(--post-lilac)']; const cardColors = ['var(--mint)', '#FF7A8A', '#5BB8C2', '#9B7FE8']; const band = bandColors[active]; const card = cardColors[active]; return (
{/* Title + tabs sit on paper */}

Wapido resuelve la toma de pedidos por WhatsApp

{/* Underlined-text tabs */}
{tabs.map((t, i) => )}
{/* Colored band — content lives here */}
{/* Subtle horizontal rule lines like notebook paper */}
{/* Left: colored info card */}

{tab.title}

{tab.body}

    {tab.bullets.map((b, i) =>
  • {b}
    • )}
Inicia ahora
{/* Right: live mini-product demo on white */}
{active === 0 ? ( ) : active === 1 ? ( ) : active === 2 ? ( ) : ( )}
); } // ─── 04 PRICING ─────────────────────────────────────── function Pricing() { const plans = [ { name: 'Básico', price: '$900', currency: 'MXN', rate: '100 pedidos · $9.00/pedido', features: ['100 pedidos incluidos', 'Menú ilimitado', 'Miembros ilimitados', 'Agente de WhatsApp con IA'], cta: 'Inicia ahora' }, { name: 'Popular', price: '$2,000', currency: 'MXN', rate: '250 pedidos · $8.00/pedido', features: ['250 pedidos incluidos', 'Menú ilimitado', 'Miembros ilimitados', 'Agente de WhatsApp con IA'], cta: 'Inicia ahora', featured: true }, { name: 'Pro', price: '$3,500', currency: 'MXN', rate: '500 pedidos · $7.00/pedido', features: ['500 pedidos incluidos', 'Menú ilimitado', 'Miembros ilimitados', 'Agente de WhatsApp con IA'], cta: 'Inicia ahora' }]; // íconos minimalistas para las features (en orden) const featureIcons = [ // bowl / pedidos , // menu , // members , // bot / whatsapp ai ]; return (

Pagas por lo que vendes. Nada más.

Sin contratos. Cancela cuando quieras.

{plans.map((p, i) =>
{p.featured &&
Popular
}
{p.name}
{p.price} {p.currency}
{p.rate}
    {p.features.map((f, j) =>
  • {featureIcons[j]} {f}
    • )}
e.currentTarget.style.filter = 'brightness(0.94)'} onMouseLeave={(e) => e.currentTarget.style.filter = 'none'}> {p.cta}
)}
); } // ─── 05 FAQ ─────────────────────────────────────────── function FAQ() { const items = [ { q: '¿Wapido es un chatbot?', a: '¡No lo es! Los chatbots son cosa del pasado, Wapido fue creado para ofrecer conversaciones fluidas e inteligentes con tus clientes. Usamos IA como cerebro de las conversaciones para lograr este resultado.' }, { q: '¿Necesito cambiar mi número de WhatsApp?', a: 'No. Wapido se conecta a tu WhatsApp Business actual mediante conexión directa y oficial con Meta. Puedes seguir usando la aplicación en tu celular sin interrupciones.' }, { q: '¿La implementación tiene costo?', a: '¡Para los primeros 10 restaurantes en Cancún la implementación será gratis! De ahí se cobrará un fee de $2,500+IVA' }, { q: '¿Cuánto tarda en estar listo Wapido en mi restaurante?', a: 'Uno a dos días más tardar. ¡Te acompañamos personalmente en toda la configuración hasta que quede al 100!' }, { q: '¿Y si Wapido se equivoca con un pedido?', a: 'Puedes intervenir cualquier conversación en tiempo real si se detecta un error en la toma de pedido. Háznoslo saber y te regalaremos 1 crédito de cortesía por el error.' }, { q: '¿Cómo funcionan los paquetes?', a: 'Los paquetes son prepagados y se manejan por créditos, donde 1 crédito = 1 pedido. Cada vez que el agente recibe un pedido, se descuenta automáticamente un crédito de tu saldo. Compras el paquete que mejor se ajuste al volumen de tu restaurante y, mientras más grande el paquete, menor el costo por pedido.' }, { q: '¿Cuáles son los métodos de pago para los paquetes?', a: 'Podrás adquirir los paquetes directamente desde tu cuenta de Wapido con cualquier tarjeta de débito o crédito a través de un link de pago, o si lo prefieres lo puedes abonar mediante depósito o transferencia bancaria a la cuenta correspondiente.' }]; return (

Preguntas frecuentes

{items.map((it, i) => )}
); } function FAQItem({ q, a }) { const [open, setOpen] = useState(false); return (
{open &&

{a}

}
); } // ─── 06 CTA FINAL ───────────────────────────────────── function CTA() { return (
{/* Izquierda — texto + botón */}

Tus pedidos merecen
una mejor herramienta

No importa qué tan grande sea tu restaurante, Wapido es donde todo se arma solo.

Inicia ahora
{/* Derecha — ilustración a mano */}
{/* Tres personajes sonrientes */} {/* Persona 1 */} {/* Pelo rizado */} {/* Persona 2 (centro) */} {/* Persona 3 */} {/* Ornamentos */} ε
); } // ─── FOOTER ─────────────────────────────────────────── function Footer() { return ( ); } // ─── APP ────────────────────────────────────────────── function App() { const [tweaks, setTweak] = useTweaks(window.__WAPIDO_TWEAK_DEFAULTS); useEffect(() => { const p = PALETTES[tweaks.palette] || PALETTES.paper; Object.entries(p).forEach(([k, v]) => document.documentElement.style.setProperty(k, v)); }, [tweaks.palette]); return ( <>