// phone-screens.jsx — Hero iPhone component for Keisa landing // Renders real app screens (Home · Timeline · Chat) inside an iPhone shell const GRAD = 'linear-gradient(135deg, #6C63FF 0%, #5B8EFF 55%, #3FA9F5 100%)'; const INK = '#111827'; const GRY = '#6B7280'; const LGY = '#9CA3AF'; const PUR = '#6C63FF'; // ─── K Symbol ────────────────────────────────────────────────────────────── const PhKSymbol = ({ size = 22, white = false }) => { const fill = white ? '#FFFFFF' : 'url(#ph_ksym_g)'; return ( {!white && ( )} ); }; // ─── Shared sub-components ───────────────────────────────────────────────── const NavBottom = ({ active }) => { const items = [ { id: 'home', label: 'Inicio', icon: (c) => }, { id: 'timeline', label: 'Causa', icon: (c) => }, { id: 'chat', label: 'Asistente', icon: (c) => }, ]; return (
{items.map(it => { const isAct = it.id === active; const c = isAct ? PUR : LGY; return (
{it.icon(c)} {it.label}
); })}
); }; // ─── Screen 1: Home ──────────────────────────────────────────────────────── const PhScreenHome = () => (
{/* Top bar */}
Keisa
{/* Content */}
{/* Greeting */}
Hola, Valentina
Pensión alimenticia · Rol C-1234-2023
{/* Notification card (gradient) */}
Nueva resolución
El tribunal agendó una audiencia
15 de junio — confirma con tu abogado antes del 10/06.
¿Qué debo hacer?
{/* Status card */}
Estado actual
En espera de audiencia
● En espera
{/* Next deadline */}
Próximo plazo
Presentar documentos de ingresos antes del 15 de octubre.
); // ─── Screen 2: Timeline ──────────────────────────────────────────────────── const PhScreenTimeline = () => { const events = [ { date: '12 OCT', title: 'Tu audiencia ya tiene fecha', body: 'El tribunal agendó una reunión oficial. Debes confirmar asistencia con tu abogado.', action: 'Confirma con tu abogado antes del 10 de junio.', active: true }, { date: '11 OCT', title: 'Tu demanda fue entregada', body: 'Tu abogado presentó formalmente tu petición al tribunal.', action: null, active: false }, { date: '5 OCT', title: 'Causa conectada a Keisa', body: 'Monitoreamos cada movimiento desde esta fecha.', action: null, active: false }, ]; return (
{/* Top bar */}
Movimientos de la causa
{/* Content */}
En simple, esto ha pasado
Pensión · Rol C-1234-2023
{events.map((ev, i) => (
{/* Timeline spine */}
{i < events.length - 1 &&
}
{/* Card */}
{ev.date}
{ev.title}
{ev.body}
{ev.action && (
¿Qué hacer?
{ev.action}
)}
))}
); }; // ─── Screen 3: Chat ───────────────────────────────────────────────────────── const PhScreenChat = () => { const msgs = [ { text: 'Hola Valentina. El tribunal fijó una audiencia para el 15 de junio. ¿En qué te puedo ayudar hoy?', isUser: false }, { text: '¿Tengo que llevar algo el día de la audiencia?', isUser: true }, { text: 'Sí. Lleva tu carnet de identidad, el comprobante del RIT y, si los tienes, ingresos del mes pasado.', isUser: false }, ]; return (
{/* Top bar */}
Asistente Keisa
{/* Privacy banner */}
No estás sola. Todo lo que hablemos es 100% privado.
{/* Messages */}
{msgs.map((m, i) => (
{!m.isUser && (
)}
{m.text}
))}
{/* Input bar */}
Escribe tu pregunta...
); }; // ─── iPhone Shell ─────────────────────────────────────────────────────────── const HeroPhone = () => { const [screen, setScreen] = React.useState(0); const screens = [, , ]; React.useEffect(() => { const t = setInterval(() => { setScreen(prev => { const next = (prev + 1) % 3; document.dispatchEvent(new CustomEvent('ph:change', { detail: next })); return next; }); }, 3800); return () => clearInterval(t); }, []); React.useEffect(() => { window.goToPhoneScreen = n => { setScreen(n); document.dispatchEvent(new CustomEvent('ph:change', { detail: n })); }; }, []); return (
{/* Physical buttons */}
{/* Screen glass */}
{/* Dynamic Island */}
{/* Status bar */}
9:41
{/* Signal */} {/* Battery */}
{/* Screen frames */}
{screens.map((sc, i) => (
{sc}
))}
{/* Floating notification badge */}
Nueva resolución detectada
); }; // ─── Mount ────────────────────────────────────────────────────────────────── (function mount() { const el = document.getElementById('hero-phone-react'); if (!el) return; ReactDOM.createRoot(el).render(); // Sync HTML dots document.addEventListener('ph:change', e => { const n = e.detail; document.querySelectorAll('.screen-dot').forEach((d, i) => d.classList.toggle('active', i === n)); }); document.querySelectorAll('.screen-dot').forEach((d, i) => { d.onclick = () => { if (window.goToPhoneScreen) window.goToPhoneScreen(i); }; }); })();