/* global React, ReactDOM, Problem, PromiseSection, Pillars, Performance, Trust, Story, Quiz, Calculator, Privacy, FAQ */ const { useState, useEffect, useRef, useMemo } = React; // ============================================================ // i18n // ============================================================ const COPY = { fr: { nav: { features: "Fonctionnalités", story: "Histoire", quiz: "Ton rêve", faq: "FAQ", contact: "Contact" }, hero: { badge: "Disponible sur iOS · iPhone · Apple Watch", title1: "Pour ceux qui ont", title2: "un rêve à financer.", sub: "L'app iOS qui te montre, jour après jour, à quelle distance tu es de ce que tu veux vraiment.\nPas de pub. Pas de connexion bancaire. Pas de revente de données.", cta: "Télécharger sur l'App Store", cta2: "Voir comment ça marche", metric1: "7 jours gratuits", metric2: "Aucun engagement · Annulation en 1 tap", }, screens: { eyebrow: "Dans l'app", title: "Chaque écran résout un vrai problème.", sub: "Des outils pensés pour transformer ton rapport à l'argent, un geste à la fois.", features: [ { tag: "Vue d'ensemble", title: "Toute ta finance, en un coup d'œil.", desc: "Score de santé, budget quotidien restant, et répartition de tes revenus — tout est là dès l'ouverture de l'app. Aucun menu à explorer, aucune donnée à chercher.", bullets: ["Score /100 en temps réel", "Budget jour par jour", "Répartition automatique"], img: "dashboard", }, { tag: "Projections intelligentes", title: "Vois ton futur financier.", desc: "Trajectoire 3, 6 et 12 mois calculée sur tes données réelles. L'app détecte tes crédits qui se terminent et intègre automatiquement les libérations à ton épargne.", bullets: ["Projection basée sur l'historique réel", "Détection auto des libérations", "Gain de +2 713€ sur 12 mois"], img: "trajectory", }, { tag: "Répartition des revenus", title: "Où va vraiment ton argent ?", desc: "Un donut clair sépare engagements, épargne, vie courante et disponible. L'app alerte quand tes engagements dépassent 50% et suggère comment reprendre la main.", bullets: ["4 catégories claires", "Alertes automatiques à 50%", "Conseils contextuels"], img: "repartition", }, ], }, contact: { eyebrow: "Contact", title: "Une question ? Un retour ?", sub: "Nous lisons chaque message. Réponse sous 48 heures.", email: "Email", form: { name: "Ton nom", email: "Ton email", message: "Ton message", send: "Envoyer", sent: "Message envoyé. Merci !" }, }, footer: { rights: "Tous droits réservés.", legal: "Mentions légales", privacy: "Confidentialité", support: "Support", tagline: "Finance les rêves qui comptent." }, }, en: { nav: { features: "Features", story: "Story", quiz: "Your dream", faq: "FAQ", contact: "Contact" }, hero: { badge: "Available on iOS · iPhone · Apple Watch", title1: "For those who have", title2: "a dream to fund.", sub: "The iOS app that shows you, day after day, how close you are to what you actually want.\nNo ads. No bank connection. No data reselling.", cta: "Download on the App Store", cta2: "See how it works", metric1: "7 days free", metric2: "No commitment · 1-tap cancel", }, screens: { eyebrow: "Inside the app", title: "Every screen solves a real problem.", sub: "Tools designed to transform your relationship with money, one tap at a time.", features: [ { tag: "Overview", title: "Your whole finances at a glance.", desc: "Health score, daily budget left, and income breakdown — all there the moment you open the app. No menus to dig through, no data to hunt.", bullets: ["Real-time /100 score", "Day-by-day budget", "Automatic breakdown"], img: "dashboard", }, { tag: "Smart projections", title: "See your financial future.", desc: "3, 6 and 12 month trajectory computed from your real data. The app detects credits ending and automatically rolls those releases into your savings.", bullets: ["Based on real history", "Auto-detects releases", "+€2,713 gain over 12 months"], img: "trajectory", }, { tag: "Income breakdown", title: "Where does your money actually go?", desc: "A clear donut splits commitments, savings, daily life and available. The app warns when commitments exceed 50% and suggests how to take back control.", bullets: ["4 clear categories", "Auto alerts at 50%", "Contextual advice"], img: "repartition", }, ], }, contact: { eyebrow: "Contact", title: "A question? Feedback?", sub: "We read every message. Reply within 48 hours.", email: "Email", form: { name: "Your name", email: "Your email", message: "Your message", send: "Send", sent: "Message sent. Thanks!" }, }, footer: { rights: "All rights reserved.", legal: "Legal", privacy: "Privacy", support: "Support", tagline: "Fund the dreams that matter." }, }, }; // ============================================================ // Hooks // ============================================================ function useInView(options = {}) { const ref = useRef(null); const [inView, setInView] = useState(false); useEffect(() => { if (!ref.current) return; const io = new IntersectionObserver( ([entry]) => { if (entry.isIntersecting) setInView(true); }, { threshold: 0.15, ...options } ); io.observe(ref.current); return () => io.disconnect(); }, []); return [ref, inView]; } function useScrollY() { const [y, setY] = useState(0); useEffect(() => { const onScroll = () => setY(window.scrollY); window.addEventListener("scroll", onScroll, { passive: true }); return () => window.removeEventListener("scroll", onScroll); }, []); return y; } // ============================================================ // Reveal wrapper // ============================================================ function Reveal({ children, delay = 0, as = "div", className = "", ...rest }) { const [ref, inView] = useInView(); const Comp = as; return ( {children} ); } // Expose Reveal for sections.jsx window.Reveal = Reveal; // ============================================================ // Nav // ============================================================ function Nav({ lang, setLang, theme, setTheme, scrolled }) { const t = COPY[lang]; return ( ); } // ============================================================ // Hero // ============================================================ function Hero({ lang, tick, theme }) { const t = COPY[lang].hero; const scrollY = useScrollY(); return (
); } // ============================================================ // Screenshots — feature rows with real app screenshots // ============================================================ function Screens({ lang, theme }) { const t = COPY[lang].screens; return (
{t.eyebrow} {t.title} {t.sub}
{t.features.map((f, i) => (
{f.tag}

{f.title}

{f.desc}

    {f.bullets.map((b, j) => (
  • {b}
    • ))}
{f.title}
))}
); } // ============================================================ // Contact // ============================================================ function Contact({ lang }) { const t = COPY[lang].contact; const [sent, setSent] = useState(false); const [form, setForm] = useState({ name: "", email: "", message: "" }); const submit = (e) => { e.preventDefault(); const data = new URLSearchParams(); data.append("form-name", "contact"); data.append("name", form.name); data.append("email", form.email); data.append("message", form.message); fetch("/", { method: "POST", headers: { "Content-Type": "application/x-www-form-urlencoded" }, body: data.toString(), }).catch(() => { /* graceful: still show "sent" UI */ }); setSent(true); setTimeout(() => { setSent(false); setForm({ name: "", email: "", message: "" }); }, 3200); }; return (
{t.eyebrow} {t.title} {t.sub}
{t.email}
hello@targetsaver.app Twitter Mastodon LinkedIn