/* global React, ReactDOM */ const { useState, useEffect, useRef } = React; /* ============================================================ STRINGS — bilingual copy (ported from the Claude Design redesign) ============================================================ */ const buildStrings = (lang) => { const T = (es, en) => lang === "en" ? en : es; const s = { navFeatures: T("El problema", "The problem"), navHow: T("Cómo funciona", "How it works"), navPricing: T("Precios", "Pricing"), navDownload: T("Descargar", "Download"), heroEyebrow: T("El método de presupuesto más honesto que vas a encontrar", "The most honest budgeting method you'll find"), heroHeadA: T("Tu dinero necesita un plan,", "Your money needs a plan,"), heroHeadB: T(" no un historial.", " not a history."), heroSub: T("1% Budget te ayuda a decidir en qué vas a gastar antes de hacerlo, mira tu plan evolucionar en tiempo real.", "1% Budget helps you decide what you'll spend on before you spend — watch your plan evolve in real time."), heroShot: T("Pantalla principal — categorías con barras de progreso y badge “disponible”", "Home screen — categories with progress bars and “available” pill"), appStoreSmall: T("Descargar en el", "Download on the"), appStoreBig: "App Store", googlePlaySmall: T("Disponible en", "Get it on"), googlePlayBig: "Google Play", soon: T("Próximamente", "Coming soon"), trust0: T("Sin tarjeta para empezar", "No card to start"), trust1: T("Datos seguros en la nube", "Your data, safe in the cloud"), trust2: T("Prueba gratis de 30 días", "Free 30-day trial"), painEyebrow: T("El problema", "The problem"), painHead: T("¿Te suena familiar?", "Sound familiar?"), pain1q: T("“Gasté y gasté pensando que mi cuenta era infinita.”", "“I spent and spent like my account was infinite.”"), pain1b: T("Sin límites claros, cada compra parece pequeña… hasta que el saldo dice lo contrario.", "With no clear limits, every purchase feels small — until the balance says otherwise."), pain2q: T("“Empecé un excel pero lo abandoné a la semana.”", "“I started a spreadsheet but gave up within a week.”"), pain2b: T("Las hojas de cálculo funcionan hasta que dejan de funcionar — que es casi siempre.", "Spreadsheets work until they stop working — which is almost always."), pain3q: T("“Ahorro lo que me sobra. O sea, nada…”", "“I save whatever's left over. Which means, nothing…”"), pain3b: T("Sin un plan, el ahorro siempre pierde contra los gastos del día a día.", "Without a plan, saving always loses to day-to-day spending."), pain4q: T("“Mi presupuesto es como la dieta: siempre empiezo el lunes… o el próximo mes.”", "“My budget is like a diet: I always start Monday… or next month.”"), pain4b: T("Empezar no debería depender del lunes perfecto. Con un sistema, ya empezaste.", "Starting shouldn't depend on the perfect Monday. With a system, you already started."), painFoot1: T("Estos no son problemas de disciplina. Son problemas de método.", "These aren't discipline problems. They're method problems."), painFoot2: T("1% Budget te da el sistema.", "1% Budget gives you the system."), howEyebrow: T("Cómo funciona", "How it works"), howHead: T("Cuatro pasos para que tu dinero tenga una misión", "Four steps to give every dollar a job"), step1Title: T("Define tu plan mensual", "Define your monthly plan"), step1Body: T("Decide al inicio del mes cuánto va a cada categoría. La app te muestra cuánto te queda por asignar.", "Decide at the start of the month how much goes to each category. The app shows you what's left to assign."), step1Shot: T("Configuración del plan / selector de plantillas", "Budget setup / template picker"), step2Title: T("Registra cada movimiento", "Log every transaction"), step2Body: T("Anota gastos, ingresos y transferencias en segundos. Tus saldos se actualizan al instante.", "Capture expenses, income and transfers in seconds. Your balances update instantly."), step2Shot: T("Modal para agregar movimiento", "Add transaction modal"), step3Title: T("Ve a dónde va tu dinero en tiempo real", "See where your money goes, in real time"), step3Body: T("Mira cómo se mueven tus sobres durante el mes y ajusta antes de que sea tarde.", "Watch your envelopes shift through the month and adjust before it's too late."), step3Shot: T("Pantalla principal con saldos en vivo", "Home screen with live balances"), step4Title: T("Todas tus cuentas, en un solo lugar", "All your accounts in one place"), step4Body: T("Registra tus cuentas de banco, tu efectivo y tus tarjetas de crédito.", "Add your bank accounts, cash and credit cards."), step4Shot: T("Captura por agregar", "Screenshot to add"), priceEyebrow: T("Precios", "Pricing"), priceHead: T("Todas las funciones, en ambos planes", "All features, on both plans"), priceSub: T("Prueba gratis por 30 días.", "Try it free for 30 days."), cloudLine: T("Tu plan por menos de un café al mes.", "Your plan for less than a coffee a month."), pickLabel: T("Elige cómo pagar", "Choose how to pay"), annualPill: T("Mejor valor", "Best value"), annualName: T("Anual", "Annual"), annualPrice: T("$39.99 / año", "$39.99 / year"), annualSub: T("Solo $3.33 / mes · Ahorras 33%", "Just $3.33 / month · Save 33%"), monthlyName: T("Mensual", "Monthly"), monthlyPrice: T("$4.99 / mes", "$4.99 / month"), monthlySub: T("Misma app, mismas funciones, sin compromiso anual.", "Same app, same features, no annual commitment."), planCta: T("Empezar prueba de 30 días", "Start 30-day trial"), planFootnote: T("No se cobra nada hasta el día 31. Cancela cuando quieras.", "Nothing is charged until day 31. Cancel anytime."), includedTitle: T("Todo incluido en ambos planes", "Everything included on both plans"), faqEyebrow: T("Preguntas frecuentes", "FAQ"), faqHead: T("Lo que la gente nos pregunta.", "What people ask us."), faq1q: T("¿Hay una versión gratis?", "Is there a free version?"), faq1a: T("No hay un plan gratuito permanente, pero sí 30 días de prueba completa con todas las funciones. Si decides no continuar, simplemente cancela antes del día 30 y no se te cobra.", "There is no permanent free plan, but there is a full 30-day trial with every feature. If you decide not to continue, just cancel before day 30 and you aren't charged."), faq2q: T("¿Mis datos están seguros?", "Is my data safe?"), faq2a: T("Tus datos se sincronizan de forma segura en la nube usando Firebase. Solo tú tienes acceso desde tu cuenta.", "Your data is synced securely to the cloud through Firebase. Only you have access from your account."), faq3q: T("¿Necesito internet para usar la app?", "Do I need internet to use the app?"), faq3a: T("Sí. 1% Budget necesita conexión a internet para sincronizar tus movimientos, presupuestos y cuentas entre dispositivos. No funciona sin conexión.", "Yes. 1% Budget needs an internet connection to sync your transactions, budgets and accounts across devices. It doesn't work offline."), faq4q: T("¿La app se conecta con el banco?", "Does the app connect to my bank?"), faq4a: T("No, pero está diseñada para facilitar el mantenimiento de tus cuentas.", "No, but it's designed to make keeping your accounts up to date easy."), ctaEyebrow: T("Descarga la app", "Get the app"), ctaHead: T("Empieza a tomar control hoy", "Start taking control today"), ctaSub1: T("30 días gratis", "30 days free"), ctaSub2: T("Sin tarjeta para empezar", "No card to start"), footerTagline: T("Presupuesto por sobres para que puedas organizar cada dólar en donde debe ir.", "Envelope budgeting so you can put every dollar exactly where it belongs."), footerProducto: T("Producto", "Product"), footerEmpresa: T("Empresa", "Company"), footerLegal: "Legal", flAbout: T("Sobre nosotros", "About"), flContact: T("Contacto", "Contact"), flBlog: "Blog", flTerms: T("Términos de uso", "Terms of use"), flPrivacy: T("Privacidad", "Privacy"), flSupport: T("Soporte", "Support"), copyright: T("© 2026 1% academy · Hecho en Panamá", "© 2026 1% academy · Made in Panama") }; const benefits = [ T("Cada dólar tiene una misión", "Every dollar has a job"), T("Conoce en todo momento cuánto puedes gastar", "Always know how much you can spend"), T("Dile adiós a tu hoja de Excel", "Say goodbye to your spreadsheet"), T("Todas tus cuentas y tarjetas en un solo lugar", "All your accounts and cards in one place"), T("Sincronización en todos tus dispositivos", "Sync across all your devices"), T("Todas las funciones incluidas", "All features included")]; return { s, benefits }; }; /* ============================================================ ICONS ============================================================ */ const IconAppStore = () => ; const IconGooglePlay = () => ; const featIcons = { envelope: , wallet: , arrows: , template: }; const IconChevron = () => ; const IconCheckSm = () => ; /* ============================================================ SMALL COMPONENTS ============================================================ */ const AppStoreBadge = ({ s }) => {s.appStoreSmall}{s.appStoreBig} ; const PlayBadge = ({ s, hover, setHover }) => setHover(true)} onMouseLeave={() => setHover(false)} style={{ backgroundColor: "rgb(87, 92, 90)", width: "173px" }}> {s.googlePlaySmall}{s.googlePlayBig} {hover && {s.soon}} ; const Sep = ({ band }) =>
; const HowPhone = ({ img, label }) =>
{label}
; /* ============================================================ APP ============================================================ */ const App = () => { const [lang, setLang] = useState(() => { try {const l = localStorage.getItem("onepct_lang");if (l === "es" || l === "en") return l;} catch (e) {} return "es"; }); const [theme, setTheme] = useState(() => { try { const tm = localStorage.getItem("onepct_theme"); if (tm === "light" || tm === "dark") return tm; if (window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches) return "dark"; } catch (e) {} return "light"; }); const [openFaq, setOpenFaq] = useState(-1); const [gpHover, setGpHover] = useState(false); const [howActive, setHowActive] = useState(0); const [howPaused, setHowPaused] = useState(false); const phoneRef = useRef(null); useEffect(() => { if (howPaused) return; const t = setTimeout(() => setHowActive((a) => (a + 1) % 4), 6000); return () => clearTimeout(t); }, [howActive, howPaused]); useEffect(() => { const el = phoneRef.current; if (!el) return; let raf = null,lx = 0,ly = 0; const apply = () => { raf = null; el.style.transform = `rotateY(${lx * 28}deg) rotateX(${-ly * 18}deg) translateZ(12px)`; }; const onMove = (e) => { lx = e.clientX / window.innerWidth - 0.5; ly = e.clientY / window.innerHeight - 0.5; if (!raf) raf = requestAnimationFrame(apply); }; const onLeave = () => {el.style.transform = "rotateY(0deg) rotateX(0deg)";}; window.addEventListener("mousemove", onMove); document.addEventListener("mouseleave", onLeave); return () => { window.removeEventListener("mousemove", onMove); document.removeEventListener("mouseleave", onLeave); if (raf) cancelAnimationFrame(raf); }; }, []); useEffect(() => {document.documentElement.lang = lang;}, [lang]); useEffect(() => { document.documentElement.setAttribute("data-theme", theme); try {localStorage.setItem("onepct_theme", theme);} catch (e) {} }, [theme]); const changeLang = (l) => {setLang(l);try {localStorage.setItem("onepct_lang", l);} catch (e) {}}; const toggleFaq = (i) => setOpenFaq((cur) => cur === i ? -1 : i); const { s, benefits } = buildStrings(lang); const pains = [ { tone: "green", q: s.pain1q, b: s.pain1b }, { tone: "green", q: s.pain2q, b: s.pain2b }, { tone: "green", q: s.pain3q, b: s.pain3b }, { tone: "green", q: s.pain4q, b: s.pain4b }]; const steps = [ { n: 1, title: s.step1Title, body: s.step1Body, shot: s.step1Shot, img: "assets/screenshots/home.png" }, { n: 2, title: s.step2Title, body: s.step2Body, shot: s.step2Shot, img: "assets/screenshots/registro.png" }, { n: 3, title: s.step4Title, body: s.step4Body, shot: s.step4Shot, img: "assets/screenshots/accounts.png" }, { n: 4, title: s.step3Title, body: s.step3Body, shot: s.step3Shot, img: "assets/screenshots/informe.png" }]; const faqs = [ { i: 1, q: s.faq1q, a: s.faq1a }, { i: 2, q: s.faq2q, a: s.faq2a }, { i: 4, q: s.faq4q, a: s.faq4a }]; return (
{/* NAV */} {/* HERO */}
{s.heroEyebrow}

{s.heroHeadA}{s.heroHeadB}

{s.heroSub}

{s.trust0}
{s.trust2}
{s.heroShot}
{/* diamond separator (replaces trust band) */} {/* FEATURES */}
{s.painEyebrow}

{s.painHead}

{pains.map((p, i) =>

{p.q}

{p.b}

)}

{s.painFoot1}

{s.painFoot2}

{/* HOW IT WORKS */}
{s.howEyebrow}

{s.howHead}

{steps.map((st, i) => { const N = steps.length; const raw = (i - howActive + N) % N; const off = raw > N / 2 ? raw - N : raw; const pose = off === 0 ? { transform: "translateX(0%) translateZ(30px) rotateY(0deg) scale(1)", opacity: 1, filter: "none", zIndex: 4 } : off === 1 ? { transform: "translateX(58%) translateZ(-150px) rotateY(-38deg) scale(0.74)", opacity: 0.5, filter: "brightness(0.7)", zIndex: 3 } : off === -1 ? { transform: "translateX(-58%) translateZ(-150px) rotateY(38deg) scale(0.74)", opacity: 0.5, filter: "brightness(0.7)", zIndex: 3 } : { transform: "translateX(0%) translateZ(-330px) rotateY(0deg) scale(0.56)", opacity: 0.24, filter: "brightness(0.55)", zIndex: 1 }; return ( ); })}
{steps.map((st, i) => )}
{/* PRICING */}
{s.priceEyebrow}

{s.priceHead}

{s.priceSub}

{s.pickLabel}
{s.annualPill}
{s.annualName}
{s.annualPrice}
{s.annualSub}
{s.monthlyName}
{s.monthlyPrice}
{s.monthlySub}
{s.planCta}
{s.includedTitle}
    {benefits.map((b, i) =>
  • {b}
    • )}

{lang === "es" ? "Tu plan por menos de " : "Your plan for less than "}{lang === "es" ? "un café" : "a coffee"}{lang === "es" ? " al mes" : " a month"}

{/* FAQ */}
{s.faqEyebrow}

{s.faqHead}

{faqs.map((f, idx) => { const open = openFaq === f.i; const last = idx === faqs.length - 1; return (
{open &&
{f.a}
}
); })}
{/* FINAL CTA */}
{s.ctaEyebrow}

{s.ctaHead}

{s.ctaSub1}·{s.ctaSub2}

{/* FOOTER */}
); }; ReactDOM.createRoot(document.getElementById("root")).render();