// sections.jsx — All SAISA landing page sections // ─── TOKENS ─────────────────────────────────────────────────── const C = { bg: '#08091a', surface: '#0d0e1d', card: '#111325', border: '#1c1f38', borderHover: '#252848', blue: '#4e86f5', green: '#26c98a', amber: '#e8a030', red: '#f06060', textPrimary: '#eceffe', textSecondary: '#7d87a6', textMuted: '#3d4262', }; // ─── NAV ────────────────────────────────────────────────────── function Nav() { const [scrolled, setScrolled] = React.useState(false); React.useEffect(() => { const h = () => setScrolled(window.scrollY > 20); window.addEventListener('scroll', h); return () => window.removeEventListener('scroll', h); }, []); return ( ); } // ─── HERO ───────────────────────────────────────────────────── function Hero() { return (
{/* Radial glow */}
{/* Left */}
100% privado · Tus datos se quedan en tu dispositivo

Tu dinero,
bajo control

SAISA es la forma más simple de registrar ingresos, gastos y alcanzar metas financieras. Sin complicaciones. Sin conexiones bancarias. Solo tú y tu dinero.

{ e.target.style.background = '#5b94ff'; e.target.style.transform = 'scale(1.02)'; }} onMouseLeave={e => { e.target.style.background = C.blue; e.target.style.transform = 'scale(1)'; }} >Descargar Gratis { e.target.style.background = 'rgba(78,134,245,0.08)'; e.target.style.transform = 'scale(1.02)'; }} onMouseLeave={e => { e.target.style.background = 'transparent'; e.target.style.transform = 'scale(1)'; }} >Ver demo
{[ { num: '1,000+', label: 'Descargas' }, { num: '4.8★', label: 'App Store' }, { num: '12', label: 'Países' }, ].map(s => (
{s.num}
{s.label}
))}
{/* Right — Phone */}
{/* Floating stat card */}
+$627,450
Ingresos este mes
{/* Floating goal card */}
Meta activa
Arriendo
90% $500k
); } // ─── PROBLEM ────────────────────────────────────────────────── function Problem() { const items = [ { icon: ( ), title: 'Fin de mes sin respuestas', desc: 'Sabes que gastaste de más, pero no sabes en qué. El dinero desaparece sin explicación.', }, { icon: ( ), title: 'Herramientas que abruman', desc: 'Spreadsheets complejos o apps que piden conectar tu banco. Demasiada fricción.', }, { icon: ( ), title: 'Metas que se olvidan', desc: 'Quieres ahorrar, pero sin tracking claro, la meta se pierde semana a semana.', }, ]; return (

¿Te suena familiar?

Los problemas de siempre con las finanzas personales.

{items.map((item, i) => ( ))}
); } function ProblemCard({ icon, title, desc }) { const [hovered, setHovered] = React.useState(false); return (
setHovered(true)} onMouseLeave={() => setHovered(false)} style={{ background: C.card, border: `1px solid ${hovered ? C.borderHover : C.border}`, borderRadius: 16, padding: 28, transition: 'border-color 0.15s, transform 0.15s', transform: hovered ? 'translateY(-3px)' : 'none', }} >
{icon}

{title}

{desc}

); } // ─── SOLUTION ───────────────────────────────────────────────── function Solution() { const [step, setStep] = React.useState(0); React.useEffect(() => { const t = setInterval(() => setStep(s => (s + 1) % 3), 2200); return () => clearInterval(t); }, []); const steps = [ { label: 'Registra', desc: 'Toca +, ingresa el monto, elige categoría.', color: C.blue, icon: '＋' }, { label: 'Categoriza', desc: 'Las categorías se asignan en segundos.', color: C.amber, icon: '◉' }, { label: 'Controla', desc: 'Ve tu progreso en tiempo real.', color: C.green, icon: '✓' }, ]; return (
{/* Left copy */}
La solución

Claridad financiera
en tres movimientos

SAISA elimina el ruido. Registra cada transacción en segundos, categoriza y te muestra exactamente hacia dónde va tu dinero. Define metas y sigue tu progreso en tiempo real.

{steps.map((s, i) => (
setStep(i)} style={{ display: 'flex', alignItems: 'center', gap: 16, padding: '16px 20px', borderRadius: 12, cursor: 'pointer', background: step === i ? `rgba(${s.color === C.blue ? '78,134,245' : s.color === C.green ? '38,201,138' : '232,160,48'},0.08)` : 'transparent', border: `1px solid ${step === i ? s.color + '40' : 'transparent'}`, transition: 'all 0.2s', }} >
{i + 1}
{s.label}
{s.desc}
))}
{/* Right — animated phone */}
{/* Step indicator dots */}
{steps.map((s, i) => (
setStep(i)} style={{ width: step === i ? 24 : 8, height: 8, borderRadius: 99, background: step === i ? s.color : C.border, transition: 'all 0.3s', cursor: 'pointer', }} /> ))}
); } // ─── FEATURES ───────────────────────────────────────────────── function Features() { const features = [ { icon: ( ), title: 'Registro rápido', desc: 'Ingresa ingresos o gastos en menos de 15 segundos con categorías personalizables.', large: true, }, { icon: ( ), title: 'Metas flexibles', desc: 'Crea límites de gasto por categoría o metas de ahorro con fechas objetivo.', large: true, }, { icon: ( ), title: 'Progreso visual', desc: 'Barras y semáforos (verde/amarillo/rojo) que te dicen dónde estás sin leer números.', }, { icon: ( ), title: 'Balance en tiempo real', desc: 'Saldo disponible, ingresos y gastos del período en una sola tarjeta.', }, { icon: ( ), title: 'Aportes de ahorro', desc: 'Contribuciones manuales a metas que se reflejan en tu balance.', }, { icon: ( ), title: 'Privacidad total', desc: 'SQLite local, sin nube, sin bancos. Tus datos son tuyos.', }, ]; return (
Funcionalidades

Todo lo que necesitas,
nada que no

Diseñado para el uso diario, no para impresionar.

{/* Bento grid */}
{features.map((f, i) => ( ))}
); } function FeatureCard({ icon, title, desc, large }) { const [hovered, setHovered] = React.useState(false); return (
setHovered(true)} onMouseLeave={() => setHovered(false)} style={{ background: C.card, border: `1px solid ${hovered ? C.borderHover : C.border}`, borderRadius: 16, padding: large ? 32 : 24, transition: 'border-color 0.15s, transform 0.15s', transform: hovered ? 'translateY(-2px)' : 'none', gridColumn: large ? 'span 1' : undefined, }} >
{icon}

{title}

{desc}

); } // ─── BENEFITS ───────────────────────────────────────────────── function Benefits() { const benefits = [ { color: C.blue, title: 'Toma decisiones informadas', desc: 'Identifica patrones de gasto y ajusta antes de exceder tu presupuesto.', stat: '30%', statDesc: 'menos gastos hormiga en 4 semanas', }, { color: C.green, title: 'Alcanza metas reales', desc: 'Ahorra para viajes, emergencias o compras grandes con tracking semanal.', stat: '3x', statDesc: 'más probabilidad de cumplir una meta con tracking', }, { color: C.amber, title: 'Paz mental financiera', desc: 'Sin sorpresas a fin de mes. Sabes exactamente dónde estás parado.', stat: '0', statDesc: 'sorpresas a fin de mes', }, ]; return (
Beneficios

Lo que ganas con SAISA

{benefits.map((b, i) => ( ))}
); } function BenefitCard({ color, title, desc, stat, statDesc }) { const [hovered, setHovered] = React.useState(false); return (
setHovered(true)} onMouseLeave={() => setHovered(false)} style={{ background: C.card, border: `1px solid ${hovered ? color + '40' : C.border}`, borderRadius: 16, padding: 28, transition: 'all 0.2s', transform: hovered ? 'translateY(-3px)' : 'none', }} >
{stat}
{statDesc}

{title}

{desc}

); } // ─── HOW IT WORKS ───────────────────────────────────────────── function HowItWorks() { const steps = [ { src: 'assets/screen5.jpeg', label: 'Descarga la app', sub: 'Disponible iOS y Android' }, { src: 'assets/screen4.jpeg', label: 'Crea tus categorías', sub: 'Personaliza tu estilo de vida' }, { src: 'assets/screen3.jpeg', label: 'Registra tu primera transacción', sub: 'Toca +, ingresa monto, listo' }, ]; return (
Cómo funciona

Empieza en menos de 2 minutos

Tres pasos. Sin tutoriales. Sin configuraciones complejas.

{steps.map((s, i) => (
{i + 1}
{s.label}
{s.sub}
{i < 2 && (
→
)} ))}
); } // ─── SOCIAL PROOF ───────────────────────────────────────────── function SocialProof() { const testimonials = [ { quote: 'Por fin una app que no me pide conectar el banco. Registro mis gastos en el camión y ya no me pierdo.', name: 'Ana R.', role: 'Freelance Designer', country: '🇲🇽', }, { quote: 'Las metas con semáforo me ayudaron a no exceder mi presupuesto de restaurantes. Brillante.', name: 'Carlos M.', role: 'Developer', country: '🇨🇴', }, { quote: 'Simple, privada y gratis. No necesito más. Llevo 3 meses sin sorpresas a fin de mes.', name: 'Valeria S.', role: 'Marketing Manager', country: '🇦🇷', }, ]; return (
Testimonios

Usuarios que ya controlan
su dinero

{/* Country flags */}
{[['🇲🇽','CDMX'],['🇨🇴','Bogotá'],['🇦🇷','Buenos Aires'],['🇨🇱','Santiago']].map(([flag, city]) => (
{flag} {city}
))}
{testimonials.map((t, i) => ( ))}
); } function TestimonialCard({ quote, name, role, country }) { return (
"

{quote}

{name[0]}
{name} {country}
{role}
); } // ─── PRICING ────────────────────────────────────────────────── function Pricing() { const items = [ 'Registro ilimitado de transacciones', 'Metas de gasto y ahorro', 'Categorías personalizables', 'Semáforo de progreso visual', 'Funciona 100% offline', 'Sin anuncios · Sin suscripción', ]; return (
Precio

Gratis para siempre,
sin letras chiquitas

SAISA Free
$ 0

Todas las funciones. Para siempre.

{items.map(item => (
{item}
))}
e.target.style.opacity = '0.85'} onMouseLeave={e => e.target.style.opacity = '1'} >Comenzar ahora
); } // ─── FAQ ────────────────────────────────────────────────────── function FAQ() { const [open, setOpen] = React.useState(null); const items = [ { q: '¿Mis datos están seguros?', a: 'Totalmente. SAISA usa SQLite local en tu dispositivo. No hay nube, no hay servidores, no hay ventas de datos.' }, { q: '¿Necesito conectar mi cuenta bancaria?', a: 'No. SAISA es 100% manual. Tú controlas qué registrar y cuándo.' }, { q: '¿Puedo usar SAISA sin internet?', a: 'Sí. La app funciona completamente offline.' }, { q: '¿Cómo funcionan las metas de gasto vs. ahorro?', a: 'Límite de gasto: rastrea gastos de una categoría y te alerta al acercarte al límite. Meta de ahorro: registra aportes manuales hasta alcanzar tu objetivo.' }, { q: '¿Puedo editar o eliminar transacciones?', a: 'Sí. Mantén presionada cualquier transacción para editarla o eliminarla.' }, { q: '¿Hay versión web?', a: 'Por ahora SAISA es solo móvil (iOS/Android). Versión web en camino.' }, ]; return (
FAQ

Preguntas frecuentes

{items.map((item, i) => ( setOpen(open === i ? null : i)} /> ))}
); } function FAQItem({ q, a, isOpen, onToggle }) { return (
{isOpen && (
{a}
)}
); } // ─── FINAL CTA ──────────────────────────────────────────────── function FinalCTA() { return (

Toma el control de
tu dinero hoy

Únete a miles de usuarios que ya manejan sus finanzas con claridad.

e.currentTarget.style.opacity = '0.9'} onMouseLeave={e => e.currentTarget.style.opacity = '1'} > App Store e.currentTarget.style.opacity = '0.9'} onMouseLeave={e => e.currentTarget.style.opacity = '1'} > Google Play

Disponible en iOS y Android · 100% gratis · Sin tarjeta requerida

); } // ─── FOOTER ─────────────────────────────────────────────────── function Footer() { return ( ); } Object.assign(window, { Nav, Hero, Problem, Solution, Features, Benefits, HowItWorks, SocialProof, Pricing, FAQ, FinalCTA, Footer });