/* YAPS · Landing + About pages, route transition portal, root app */ const I18N = { fr: { hero: { eyebrow: "v1.2.0 · iOS · Android · 9,99€/mois", title_a: "Votre nutrition,", title_grad: "réinventée par l'IA", sub: "Suivez vos repas, atteignez vos objectifs et bénéficiez d'un coach IA personnel 24/7. Disponible sur iPhone et Android.", scroll: "Faites défiler" }, stats: { eyebrow: "Aujourd'hui sur YAPS", title: "Une communauté qui mange plus intelligemment.", items: [ { n: 90, label: "de nos utilisateurs recommandent YAPS", suffix: "%" }, { n: 7.4, label: "Millions de repas analysés", suffix: "M" }, { n: 12800, label: "Recettes proposées", suffix: "+" }, { n: 2.1, label: "Milliards de calories suivies", suffix: "Mds" }] }, preview: { eyebrow: "Aperçu", title: "Conçue pour les vraies vies.", lead: "Trois interfaces. Une promesse simple : comprendre ce que vous mangez, sans effort.", items: [ { title: "Scan & analyse", body: "Prenez une photo de votre assiette — l'IA identifie les ingrédients et calcule les macros en quelques secondes." }, { title: "Coach IA 24/7", body: "Posez n'importe quelle question nutrition. Le coach connaît vos objectifs et adapte ses réponses." }, { title: "Progression claire", body: "Poids, énergie, micro-nutriments. Tout ce qui compte, jamais ce qui distrait." }] }, cta: { title: "Prêt à commencer ?", sub: "Téléchargez gratuitement. Sans engagement." } }, en: { hero: { eyebrow: "v1.2.0 · iOS · Android · €9.99/mo", title_a: "Your nutrition,", title_grad: "rethought by AI", sub: "Track your meals, hit your goals, and get a personal AI coach 24/7. Available on iPhone and Android.", scroll: "Scroll" }, stats: { eyebrow: "Today on YAPS", title: "A community eating more intelligently.", items: [ { n: 90, label: "of our users recommend YAPS", suffix: "%" }, { n: 7.4, label: "Million meals analyzed", suffix: "M" }, { n: 12800, label: "Recipes suggested", suffix: "+" }, { n: 2.1, label: "Billion calories tracked", suffix: "B" }] }, preview: { eyebrow: "Preview", title: "Designed for real life.", lead: "Three interfaces. One simple promise: understand what you eat, effortlessly.", items: [ { title: "Scan & analyze", body: "Snap a photo of your plate — AI identifies ingredients and computes macros in seconds." }, { title: "AI coach 24/7", body: "Ask any nutrition question. Your coach knows your goals and adapts." }, { title: "Clear progress", body: "Weight, energy, micronutrients. Everything that matters, none of the noise." }] }, cta: { title: "Ready to begin?", sub: "Download free. No commitment." } } }; /* ============ Reveal-on-scroll wrapper ============ */ function Reveal({ children, delay = 0, as = "div", ...rest }) { const ref = React.useRef(null); const [shown, setShown] = React.useState(false); React.useEffect(() => { const el = ref.current; if (!el) return; const io = new IntersectionObserver( (entries) => { for (const e of entries) { if (e.isIntersecting) { setTimeout(() => setShown(true), delay); io.disconnect(); break; } } }, { threshold: 0.15 } ); io.observe(el); return () => io.disconnect(); }, [delay]); const Tag = as; return ( {children} ); } /* ============ Animated counter ============ */ function CountUp({ to, suffix = "", decimals = 0 }) { const ref = React.useRef(null); const [val, setVal] = React.useState(0); React.useEffect(() => { const el = ref.current; if (!el) return; let raf = 0; let started = false; const io = new IntersectionObserver( (entries) => { if (entries.some((e) => e.isIntersecting) && !started) { started = true; const dur = 1600; const start = performance.now(); const tick = (now) => { const t = Math.min(1, (now - start) / dur); const eased = 1 - Math.pow(1 - t, 3); setVal(eased * to); if (t < 1) raf = requestAnimationFrame(tick); }; raf = requestAnimationFrame(tick); io.disconnect(); } }, { threshold: 0.4 } ); io.observe(el); return () => { io.disconnect(); cancelAnimationFrame(raf); }; }, [to]); const formatted = decimals > 0 ? val.toFixed(decimals) : Math.round(val).toLocaleString("fr-FR"); return ( {formatted} {suffix} ); } /* ============ Phone mockup with stubbed UI ============ */ function PhoneMock({ variant = "scan" }) { return (
{variant === "scan" && } {variant === "coach" && } {variant === "progress" && }
); } function PhoneScreenScan() { return (
Scan · 12:42
Bol poké saumon
{/* viewfinder corners */} {[[0, 0], [1, 0], [0, 1], [1, 1]].map(([x, y], i) =>
)}
587 kcal P 42 · G 48 · L 22
{["Saumon", "Riz", "Avocat"].map((x) =>
{x}
)}
); } function PhoneScreenCoach() { return (
Coach IA
YAPS
● en ligne
Que manger avant ma course de 10km demain matin ?
Idéalement 2h avant : flocons d'avoine, banane, miel. Glucides lents + rapides, faciles à digérer.
Je peux te générer la recette ?
Écrire un message…
); } function PhoneScreenProgress() { // Tiny SVG chart const points = [62, 58, 60, 55, 53, 54, 50, 48, 46, 47, 45, 43]; const max = Math.max(...points),min = Math.min(...points); const w = 200,h = 80,pad = 6; const path = points.map((v, i) => { const x = pad + i / (points.length - 1) * (w - pad * 2); const y = pad + (1 - (v - min) / (max - min)) * (h - pad * 2); return `${i === 0 ? "M" : "L"}${x.toFixed(1)} ${y.toFixed(1)}`; }).join(" "); return (
Progression
71,4 kg · –4,2 ce mois
{points.map((v, i) => { const x = pad + i / (points.length - 1) * (w - pad * 2); const y = pad + (1 - (v - min) / (max - min)) * (h - pad * 2); return ; })}
{[ ["Cal. moy.", "1 847"], ["Protéines", "112 g"], ["Hydratation", "2,1 L"], ["Sommeil", "7 h 24"]]. map(([k, v]) =>
{k}
{v}
)}
); } /* ============ Preview carousel (mobile: snap+dots) ============ */ function PreviewCarousel({ items, lang }) { const trackRef = React.useRef(null); const [active, setActive] = React.useState(0); const [isMobile, setIsMobile] = React.useState(false); React.useEffect(() => { const mq = window.matchMedia("(max-width: 720px)"); const upd = () => setIsMobile(mq.matches); upd(); mq.addEventListener("change", upd); return () => mq.removeEventListener("change", upd); }, []); // Track which card is centered in the scroll viewport React.useEffect(() => { if (!isMobile) return; const track = trackRef.current; if (!track) return; let raf = 0; const onScroll = () => { cancelAnimationFrame(raf); raf = requestAnimationFrame(() => { const kids = Array.from(track.children); const r = track.getBoundingClientRect(); const center = r.left + r.width / 2; let nearest = 0, minD = Infinity; kids.forEach((el, i) => { const cr = el.getBoundingClientRect(); const c = cr.left + cr.width / 2; const d = Math.abs(c - center); if (d < minD) { minD = d; nearest = i; } }); setActive(nearest); }); }; onScroll(); track.addEventListener("scroll", onScroll, { passive: true }); return () => { track.removeEventListener("scroll", onScroll); cancelAnimationFrame(raf); }; }, [isMobile]); const goTo = (i) => { const track = trackRef.current; if (!track) return; const kid = track.children[i]; if (kid) kid.scrollIntoView({ behavior: "smooth", inline: "center", block: "nearest" }); }; return ( <>
{["scan", "coach", "progress"].map((v, i) => (

{items[i].title}

{items[i].body}

))}
{[0, 1, 2].map((i) => (
); } /* ============ LANDING ============ */ function LandingPage({ lang }) { const t = I18N[lang]; return (
{/* HERO */}
{t.hero.eyebrow}

{t.hero.title_a}
{t.hero.title_grad}

{t.hero.sub}

{t.hero.scroll}
{/* STATS */}
{t.stats.eyebrow}

{t.stats.title}

{t.stats.items.map((s, i) =>
{s.label}
)}
{/* APP PREVIEW */}
{t.preview.eyebrow}

{t.preview.title}

{t.preview.lead}
{/* CTA */}

{t.cta.title.split(" ").slice(0, -1).join(" ")} {t.cta.title.split(" ").slice(-1)[0]}

{t.cta.sub}
); } /* ============ ABOUT ============ */ const ABOUT = { fr: { h1_a: "L'histoire", h1_b: "de YAPS", sub: "Une vision : rendre la nutrition intelligente accessible à tous.", paras: [ "YAPS est né d'une frustration. Pendant des années, j'ai voulu mieux comprendre ce que je mangeais — sans pour autant transformer chaque repas en équation. Les applis de suivi nutritionnel demandaient trop de saisie, les coachs étaient inaccessibles, et les recommandations changeaient chaque semaine selon la dernière tendance.", "L'idée a pris forme fin 2024 quand j'ai réalisé qu'un modèle multimodal pouvait faire en deux secondes ce qui me prenait dix minutes : regarder une assiette, identifier les ingrédients, estimer les portions, calculer les macros — et surtout, expliquer.", "YAPS, c'est cette idée portée à son terme : une IA entraînée sur des milliers de plats du monde réel, un coach conversationnel disponible 24/7, et une interface qui disparaît quand vous n'en avez plus besoin. Le but n'est pas de vous faire compter — c'est de vous faire comprendre.", "Aujourd'hui, 90% de nos utilisateurs recommandent YAPS. Athlètes, jeunes parents, étudiants, professionnels en reconversion. Chacun avec son propre objectif. La mission reste la même : démocratiser un coaching nutritionnel qui était jusqu'ici réservé à une minorité."], values_t: "Nos valeurs", values: [ { t: "Rigueur scientifique", d: "Nos recommandations s'appuient sur des sources peer-reviewed. Chaque affirmation est traçable." }, { t: "Respect de la vie privée", d: "Vos données vous appartiennent. Chiffrement de bout en bout. Aucun partage à des tiers." }, { t: "Accessibilité", d: "9,99€/mois, sans engagement. Une version gratuite généreuse. Disponible sur iOS et Android." }], cta: "Rejoignez YAPS" }, en: { h1_a: "The story", h1_b: "of YAPS", sub: "One vision: make intelligent nutrition accessible to everyone.", paras: [ "YAPS was born out of frustration. For years I wanted to better understand what I was eating — without turning every meal into an equation. Nutrition apps demanded too much manual entry, coaches were unreachable, and recommendations changed every week with the latest trend.", "The idea took shape in late 2024 when I realized a multimodal model could do in two seconds what was taking me ten minutes: look at a plate, identify ingredients, estimate portions, compute macros — and most importantly, explain.", "YAPS is that idea taken to its conclusion: an AI trained on thousands of real-world meals, a conversational coach available 24/7, and an interface that gets out of the way when you no longer need it. The goal isn't to make you count — it's to make you understand.", "Today, 90% of our users recommend YAPS. Athletes, new parents, students, career-changers. Each with their own goal. The mission stays the same: democratize a kind of nutrition coaching that used to be reserved for a few."], values_t: "Our values", values: [ { t: "Scientific rigor", d: "Our recommendations are grounded in peer-reviewed sources. Every claim is traceable." }, { t: "Privacy first", d: "Your data is yours. End-to-end encryption. No third-party sharing." }, { t: "Accessibility", d: "€9.99/mo, no commitment. Generous free tier. Available on iOS and Android." }], cta: "Join YAPS" } }; function ValueIcon({ kind }) { // Original, simple geometric glyphs only — no medical/branded marks if (kind === "science") return ( ); if (kind === "privacy") return ( ); return ( ); } function AboutPage({ lang, navigate }) { const t = ABOUT[lang]; return (
{/* Ambient backdrop blob (subtle brand reflection) */}
{t.paras.map((p, i) =>

{p}

)}
{t.values_t}

{lang === "fr" ? <>Trois principes non-négociables. : <>Three non-negotiables.}

{t.values.map((v, i) =>

{v.t}

{v.d}

 )}

{t.cta}

); } /* ============ Portal page transition ============ 12 meal-photo cards float in 3D, gently spinning. If the user has /public/meals/meal-NN.jpg in place they show as textures; otherwise a soft monogram placeholder card is drawn. Glassmorphism on edges. */ function PortalCard({ idx, x, y, w, h, rx, ry, rz, delay }) { const num = String(idx % 12 + 1).padStart(2, "0"); const src = `public/meals/meal-${num}.jpg`; const [hasImg, setHasImg] = React.useState(true); return (
{hasImg ? setHasImg(false)} style={{ width: "100%", height: "100%", objectFit: "cover", borderRadius: "inherit", display: "block" }} /> : } {/* Glass edge: subtle gradient frame + reflective highlight */}