;
}
// brand marks now come from brand.jsx — delegate for back-compat
function FMark({ size = 30, light = false }) {
return ;
}
function Wordmark({ size = 20, light = false }) {
return ;
}
// CTA button
function CTAButton({ children, primary, large, light, style = {} }) {
const T = TOKENS;
const h = large ? 52 : 44;
const base = { display: "inline-flex", alignItems: "center", gap: 9, height: h, padding: large ? "0 22px" : "0 18px", borderRadius: T.rMd, fontSize: large ? 15.5 : 14, fontWeight: 600, letterSpacing: -0.2, textDecoration: "none", cursor: "pointer", border: "1px solid transparent", whiteSpace: "nowrap" };
if (primary) return { e.preventDefault(); window.dispatchEvent(new CustomEvent("eighty4-join")); }} style={{ ...base, background: T.accent, color: "#fff", boxShadow: `0 1px 2px ${hexA(T.accent, 0.4)}, inset 0 1px 0 rgba(255,255,255,0.18)`, ...style }}>{children};
return {children};
}
function AppleGlyph({ size = 16, color = "#fff" }) {
return ;
}
/* ───────────────────────── NAV ───────────────────────── */
function Nav({ cfg }) {
const T = TOKENS;
const [scrolled, setScrolled] = useState(false);
useEffect(() => {
const f = () => setScrolled(window.scrollY > 8);
window.addEventListener("scroll", f); f();
return () => window.removeEventListener("scroll", f);
}, []);
return (
);
}
/* ───────────────────────── HERO ───────────────────────── */
function Hero({ cfg }) {
const T = TOKENS;
return (
Now in TestFlight · iPhone & Mac
{cfg.headline}
Eighty4 gives a 12-week cycle one clear focus each day. Your vision, goals, weekly priority, and daily tasks live in one native iPhone and Mac app, so the plan you make on Sunday is still running your Thursday.
{cfg.cta}See how it works Free during the beta · iOS 18 · macOS 15
{/* persona switcher */}
{/* hero visual */}
);
}
/* ───────────────────────── THE PROBLEM ───────────────────────── */
function Problem() {
const T = TOKENS;
const p = usePersona();
const scattered = ["A goals doc you never reopen", "Tasks in three different apps", "A calendar that forgot the goal", "Notes lost by Friday", "A habit tracker on its own island", "A vision you wrote once in January"];
return (
The problem
Most plans fall apart between the goal and the day.
Writing the 12-week goal was never the hard part. The hard part is keeping it in front of you when you sit down and decide what to actually do today. When the plan lives in six places, none of them wins.
{scattered.map((s) => (
{s}
))}
Eighty4
{/* one instrument */}
Today's mission
{p.mission}
One focus, chosen from the goal that needs it. Everything else supports it or waits.
);
}
/* ───────────────────────── THE LOOP / ALTITUDES ───────────────────────── */
const ALTITUDES = [
{ label: "Vision", eyebrow: "This cycle's vision", text: "Ship a v1 people pay for, hold a 25 mi/week running base, and protect my evenings.", meta: "The why and where", icon: "vision" },
{ label: "Goals", eyebrow: "Outcome 01 · 40%", text: "Ship Eighty4 v1 to TestFlight with 5 external testers.", meta: "The commitments", icon: "goals" },
{ label: "Weekly", eyebrow: "Week 3 priority", text: "Get the internal TestFlight build out the door.", meta: "The one move this week", icon: "weekly" },
{ label: "Daily", eyebrow: "Today's mission", text: "Build Eighty4's daily + home screens.", meta: "The one thing today", icon: "daily" },
];
function TheLoop() {
const T = TOKENS;
const p = usePersona();
const alts = [
{ label: "Vision", eyebrow: "This cycle's vision", text: p.vision, meta: "The why and where", icon: "vision" },
{ label: "Goals", eyebrow: `Outcome 01 · ${p.goals[0].pct}%`, text: p.goals[0].title, meta: "The commitments", icon: "goals" },
{ label: "Weekly", eyebrow: "Week 3 priority", text: p.weekPriority, meta: "The one move this week", icon: "weekly" },
{ label: "Daily", eyebrow: "Today's mission", text: p.mission, meta: "The one thing today", icon: "daily" },
];
return (
The loop
One focus at every altitude.
Eighty4 is built around one idea. Each level of planning sets up the one below it. Your vision points a direction, your goals name the few outcomes that count, and each week pulls the next move down into your days.
{[["vision", "Vision", "Where this cycle is headed."], ["goals", "Goals", "Up to three outcomes that define it."], ["weekly", "Weekly", "The priority that must finish this week."], ["daily", "Daily", "The one thing that moves today."], ["habits", "Habits", "The small reps that keep the chain alive."], ["notes", "Notes", "The day's thinking, kept with the day."]].map(([ic, t, d]) => (
{t}{d}
))}
{/* the stack of instruments */}
{alts.map((a, i) => (
{i < alts.length - 1 && (
)}
{a.eyebrow}{a.label}
{a.text}
{a.meta}
))}
);
}
/* ───────────────────────── DAILY ───────────────────────── */
function DailyFeature() {
const T = TOKENS;
return (
Daily workbench
You land on one thing, not a wall of tasks.
The day's main task sits in the dark card at the top, big and editable so you can't lose track of it. Your schedule, supporting tasks, and notes open underneath. You can scrub back to any past day to review it or fix the record.
{[
["The one thing", "Your main task for the day, front and center."],
["Schedule", "Time blocks with a live “now” marker through the day."],
["Supporting tasks", "The work behind the focus, with a single tap to finish."],
["Notes that stay put", "A running note and quick captures, kept with the day."],
].map(([t, d]) => (