/* global React, ReactDOM */ const { useState, useEffect } = 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("Características", "Features"), navHow: T("Cómo funciona", "How it works"), navPricing: T("Precios", "Pricing"), navDownload: T("Descargar", "Download"), heroEyebrow: T("Presupuesto por sobres, dale un uso a todo tu dinero", "Envelope budgeting — put every dollar to work"), heroHeadline: T("Mejora tu control financiero 1% a la vez.", "Improve your financial control 1% at a time."), heroSub: T("Asigna cada dólar a una categoría y mira tu plan evolucionar en tiempo real.", "Assign every dollar to a category and 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"), featEyebrow: T("Características", "Features"), featHead: T("Todo lo que necesitas para presupuestar bien.", "Everything you need to budget well."), feat1Title: T("Presupuesto por sobres", "Envelope budgeting"), feat1Body: T("Cada categoría es un sobre. Cuando se acaba, se acaba.", "Each category is an envelope. When it's gone, it's gone."), feat2Title: T("Tus cuentas en un solo lugar", "All your accounts in one place"), feat2Body: T("Banco, efectivo y tarjeta de crédito, todo conectado.", "Bank, cash and credit card — all connected."), feat3Title: T("7 tipos de movimientos", "7 transaction types"), feat3Body: T("Ingresos, gastos, transferencias, pagos y deudas de tarjeta, y cashback.", "Income, expenses, transfers, card payments and debt, and cashback."), feat4Title: T("Plantillas reutilizables", "Reusable templates"), feat4Body: T("Empieza cada mes con tu plantilla favorita y ajusta lo que cambió.", "Start each month from your favorite template and tweak what changed."), howEyebrow: T("Cómo funciona", "How it works"), howHead: T("Tres pasos para que cada dólar tenga una misión.", "Three 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"), 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. Cancela cuando quieras.", "Try it free for 30 days. Cancel anytime."), 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."), 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("Todas las características incluidas", "All features included"), 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"), ]; 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)}> {s.googlePlaySmall}{s.googlePlayBig} {hover && {s.soon}} ); const Sep = ({ band }) => (
); const HowPhone = ({ label }) => (
9:41
{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); 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 features = [ { icon: "envelope", title: s.feat1Title, body: s.feat1Body }, { icon: "wallet", title: s.feat2Title, body: s.feat2Body }, { icon: "arrows", title: s.feat3Title, body: s.feat3Body }, { icon: "template", title: s.feat4Title, body: s.feat4Body }, ]; const steps = [ { n: 1, title: s.step1Title, body: s.step1Body, shot: s.step1Shot }, { n: 2, title: s.step2Title, body: s.step2Body, shot: s.step2Shot }, { n: 3, title: s.step3Title, body: s.step3Body, shot: s.step3Shot }, ]; const faqs = [ { i: 1, q: s.faq1q, a: s.faq1a }, { i: 2, q: s.faq2q, a: s.faq2a }, { i: 3, q: s.faq3q, a: s.faq3a }, ]; return (
{/* NAV */} {/* HERO */}
{s.heroEyebrow}

{s.heroHeadline}

{s.heroSub}

9:41
{s.heroShot}
1179 × 2556
{/* TRUST */}
{s.trust0}
{s.trust1}
{s.trust2}
{/* FEATURES */}
{s.featEyebrow}

{s.featHead}

{features.map((f, i) => (
{featIcons[f.icon]}

{f.title}

{f.body}

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

{s.howHead}

{steps.map((st) => (
{st.n}

{st.title}

{st.body}

))}
{/* 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.planFootnote}
{s.includedTitle}
    {benefits.map((b, i) => (
  • {b}
    • ))}
{/* 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();