// Ambition landing page — root composition const { useState, useEffect, useRef } = React; const LogoFull = () => ( ); const LogoIcon = ({ color = "#205FA6" }) => ( ); // ── Brand mark ──────────────────────────────────────────────────── const LogoMark = ({ color = "#fff", size = 18 }) => ( {/* A-shape (rocket exterior) */} {/* astronaut head */} {/* rocket fin/tail */} ); // ── Tweak defaults (persisted to disk) ──────────────────────────── const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/ { accent: "#205FA6", headline: "real-life", ctaCopy: "Get Ambition", heroLayout: "split", heroScreen: "dashboard", darkMode: false, }; /*EDITMODE-END*/ const HEADLINES = { "real-life": { h1: ( <> Help your teen get ready for real life. ), sub: "Ambition turns career exploration and life-skill learning into short, rewarding lessons teens actually stick with — and gives you the tools to support them.", }, "future-now": { h1: ( <> Their future starts now. ), sub: "Short career internships, life lessons, and guided conversations — all designed to get teens thinking seriously about what comes next.", }, "actually-use": { h1: ( <> Career and life skills they'll{" "} actually use. ), sub: "Built for the gap between school and adulthood — money, work, relationships, decisions. The stuff teens need but rarely get.", }, "you-help": { h1: ( <> You want to help. Ambition shows you how. ), sub: "Most parents don't know where to start. We give your family a structure — learn, set goals, talk, and reward — that makes preparing for adulthood feel doable.", }, }; // ── Reveal-on-scroll hook ──────────────────────────────────────── function useReveal() { useEffect(() => { const els = document.querySelectorAll(".reveal"); const io = new IntersectionObserver( (entries) => { entries.forEach((e) => { if (e.isIntersecting) { e.target.classList.add("in"); io.unobserve(e.target); } }); }, { rootMargin: "0px 0px -10% 0px" }, ); els.forEach((el) => io.observe(el)); return () => io.disconnect(); }, []); } // ── Sticky nav scroll-state ────────────────────────────────────── function useScrollClass() { useEffect(() => { const nav = document.querySelector(".nav"); const fn = () => nav?.classList.toggle("scrolled", window.scrollY > 8); fn(); window.addEventListener("scroll", fn, { passive: true }); return () => window.removeEventListener("scroll", fn); }, []); } // ── App store buttons (real-looking) ───────────────────────────── const AppleSVG = ( ); const GoogleSVG = ( ); const StoreButton = ({ store = "apple", accent }) => { const storeLinks = { apple: "https://apps.apple.com/us/app/ambition-shape-your-future/id1557562279", google: "https://play.google.com/store/apps/details?id=com.theambitionapp.ambitionappRN", }; return ( {store === "apple" ? AppleSVG : GoogleSVG}
{store === "apple" ? "Download on the" : "Get it on"}
{store === "apple" ? "App Store" : "Google Play"}
); }; // ── Section: Nav ───────────────────────────────────────────────── function Nav({ ctaCopy, accent }) { return ( ); } // ── Section: HERO ──────────────────────────────────────────────── function Hero({ t }) { const headline = HEADLINES[t.headline] || HEADLINES["real-life"]; return (
For parents & adults who care

{headline.h1}

{headline.sub}

✦ Free 14-day trial ✦ Cancel anytime ✦ Designed for ages 14–19
4.9 ★ App Store rating
3,000+ Families
7-MIN Daily lessons
{t.heroLayout === "gallery" ? (
) : ( )}
); } // ── Section: Problem ───────────────────────────────────────────── function Problem() { const cards = [ { num: "01", label: "The blank stare", body: '"What do you want to do after school?" — and your teen has no idea where to begin.', }, { num: "02", label: "Phone, all day", body: "Hours of scrolling, not much that prepares them for life beyond the screen.", }, { num: "03", label: "Future feels far", body: "Adulthood is around the corner. Motivation to think seriously about it isn't.", }, { num: "04", label: "The hard talks", body: "Money, careers, choices — you want to start them but never know quite how.", }, ]; return (
Sound familiar?

You're not alone.{" "} Almost every parent of a teen is here.

Schools teach a lot. But the bridge from teenager to capable adult — careers, money, life decisions — that one's mostly on you. Ambition makes that bridge shorter.

{cards.map((c, i) => (
{c.num}
{c.label}
{c.body}
))}
); } // ── Section: How it works ──────────────────────────────────────── function HowItWorks({ accent }) { const steps = [ { num: 1, title: "They browse a library of topics", body: "Career internships and life lessons across dozens of topics — your teen picks whatever catches their eye.", art: (
EXPLORE
{["Entrepreneurship", "Healthcare", "Filmmaking", "Money"].map( (x, i) => ( {x} ), )}
), }, { num: 2, title: "They complete short lessons", body: 'Short, video-based "internships" and life skills they can do on the bus or in line. No homework feel.', art: (
DAY 4 OF 30 · ENTREPRENEUR
Intro to a Business Model
▶ 1:32 min remaining
), }, { num: 3, title: "You set rewards & track", body: "Pick a real reward — gift card, privileges, something they'll want — and watch progress in real time.", art: (
REWARD
1 hr extended curfew
PROGRESS
18 of 30 lessons complete
), }, { num: 4, title: "Talk about the future", body: "Use guided prompts to talk with your teen about careers, money, lifestyle, goals, and the future they want.", art: (
💵
Future Lifestyle
"Different careers lead to different lifestyles. What do you want yours to look like?"
), }, ]; return (
How it works

A simple structure for the most important conversation.

{steps.map((s) => (
{s.num}

{s.title}

{s.body}

{s.art}
))}
); } // ── Section: Features (dark) ───────────────────────────────────── function Features({ accent }) { const features = [ { tag: "Career Internships", title: "Real careers, a few minutes at a time.", body: 'Short video "internships" that show what real careers look like — entrepreneurship, healthcare, design, tech, trades, sports business. Teens explore at their own pace.', screen: "internships", }, { tag: "Life Lessons", title: "The stuff school skips.", body: 'Money. Taxes. Resumes. Healthy relationships. Confidence. The practical skills teens are supposed to "figure out somehow."', screen: "lesson", }, { tag: "Family Agreements", title: "Real rewards. Real motivation.", body: "You set the goal and the reward — a privilege, an experience, a milestone bonus. Your teen approves it. Then both of you watch progress climb.", screen: "agreement", }, { tag: "Guided Conversations", title: "Better talks, less awkward.", body: "Prompts on big topics — money, work, what they want from life — that you both answer privately in the app, then can discuss together.", screen: "conversation", }, ]; return (
What's inside

Four things, working together.
So you're not piecing it together yourself.

{features.map((f, i) => (
{f.tag}

{f.title}

{f.body}

))}
); } // ── Section: Testimonials ─────────────────────────────────────── function Testimonials() { const quotes = [ { body: "My 16-year-old was completely directionless last fall. Two months in, he's telling me about cost of living and asking real questions. I have no idea who this kid is and I love it.", name: "Rachel M.", meta: "Mom of 2 · Austin, TX", }, { body: "The prompts gave me a window into how she thinks about her future. Her responses help me start conversations we probably would have avoided.", name: "David T.", meta: "Dad of 1 · Atlanta, GA", }, { body: "I was skeptical that another app was the answer. But this one has structure, the lessons are short, and the rewards actually motivate him. It earned its place.", name: "Priya K.", meta: "Mom of 1 · New York, NY", }, ]; return (
From parents using it now

What we hear most: {" "} "I wish we'd had this sooner."

{quotes.map((q, i) => (
{q.body}
{q.name .split(" ") .map((w) => w[0]) .join("") .slice(0, 2)}
{q.name}
{q.meta}
))}
); } // ── Section: Pricing ───────────────────────────────────────────── function Pricing({ ctaCopy, accent }) { return (
Pricing

One plan. The whole family.

Start with a free 2-week trial in the app. After that, pick the plan that fits your family.

{/* Free trial */}
Free Trial
$0
for 14 days
Full access for the whole family. Cancel anytime — no charge until the trial ends.
  • Every internship & lesson
  • Guided conversations
  • Family agreements & rewards
Trial begins when you sign up in the app.
{/* Monthly */}
Monthly
$9.99
/ month
Pay month to month. Cancel anytime from your account.
  • Everything in the trial
  • Add up to 4 teens
  • Add up to 4 adults
No commitment.
{/* Yearly (featured) */}
Best value
Yearly
$99.99
/ year
Everything in Monthly, billed once a year. The price of two months.
  • Everything in Monthly
  • Save over 80% vs monthly
  • 12 months of access
Most families choose yearly.
✦ Cancel anytime ✦ No ads, ever ✦ Your teen's data stays private School district?{" "} Reach out
); } // ── Section: FAQ ──────────────────────────────────────────────── function FAQ() { const faqs = [ { q: "What age is Ambition for?", a: "Ambition is designed for teens ages 13 to 19. The content scales — early teens start with simpler career and money lessons, older teens get into deeper material like resumes, financial planning, and life decisions.", }, { q: "How much time does it take?", a: "Lessons are 5 minutes. Most teens use the app 3–4 times a week on their own once they get going. Adults check in for a minute or two when they want — Ambition pings you when there's new progress or a conversation reply.", }, { q: 'My teen won\'t use another "learning" app.', a: "Fair. Ambition is built around real motivation: short videos with real people, real rewards you set with them, and topics teens actually care about (money, lifestyle, what work feels like). It doesn't feel like school.", }, { q: "What if I don't know what to talk about?", a: 'That\'s exactly what guided conversations are for. You both answer the same prompt privately, then can compare and discuss. No "how was your day" energy.', }, { q: "How does the reward system work?", a: "You set a goal (say, 30 internship days + 10 life lessons) and a reward (say, $50 Amazon gift card or a special privilege). Your teen has to agree to it before it starts. When they hit the goal, you fulfill the reward.", }, { q: "Is my teen's data private?", a: "Yes. Their reflections and conversation answers are shared only with the adult supporters they invite — not used for advertising, not sold to anyone, not used to train AI. Full details on our privacy page.", }, ]; const [open, setOpen] = useState(0); return (
FAQ

Questions parents ask before signing up.

Don't see yours?{" "} Email us {" "} — we read everything.

{faqs.map((f, i) => (
{f.a}
))}
); } // ── Section: Final CTA ────────────────────────────────────────── function FinalCTA({ accent, ctaCopy }) { return (
Ready when you are

Your teen's future matters.
Help them start preparing for it now.

Free for 14 days. Set up your family in under 5 minutes.

No credit card. Cancel anytime.
); } // ── Footer ────────────────────────────────────────────────────── function Footer({ accent }) { return ( ); } // ── Tweaks panel ──────────────────────────────────────────────── function Tweaks({ tweaks, setTweak }) { return ( setTweak("headline", v)} options={[ { value: "real-life", label: "Real-life" }, { value: "future-now", label: "Future" }, { value: "actually-use", label: "Skills" }, { value: "you-help", label: "You help" }, ]} />
{HEADLINES[tweaks.headline] && ( " {typeof HEADLINES[tweaks.headline].h1 === "string" ? HEADLINES[tweaks.headline].h1 : (HEADLINES[tweaks.headline].sub || "").slice(0, 70) + "…"} " )}
setTweak("accent", v)} options={["#205FA6", "#E26A4A", "#2F7D5C", "#5B3A8E"]} /> setTweak("heroLayout", v)} options={[ { value: "split", label: "Split" }, { value: "centered", label: "Center" }, { value: "gallery", label: "Gallery" }, ]} /> {tweaks.heroLayout !== "gallery" && ( setTweak("heroScreen", v)} options={[ { value: "dashboard", label: "Parent dashboard" }, { value: "internships", label: "Career internships" }, { value: "conversation", label: "Conversations" }, { value: "lesson", label: "Life lesson" }, { value: "rewards", label: "Pick a reward" }, { value: "agreement", label: "New agreement" }, ]} /> )} setTweak("ctaCopy", v)} options={[ { value: "Get Ambition", label: "Get Ambition" }, { value: "Download free", label: "Download free" }, { value: "Start with your teen", label: "Start with teen" }, ]} /> ); } // ── App root ──────────────────────────────────────────────────── function App() { const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS); useReveal(); useScrollClass(); // Apply accent color as CSS variable useEffect(() => { document.documentElement.style.setProperty("--accent", tweaks.accent); }, [tweaks.accent]); return ( <>