// ───────────────────────────────────────────────────────────── // Hero visual A: LAUNCH CONSOLE — 60-second countdown w/ stages // ───────────────────────────────────────────────────────────── function LaunchConsoleVisual() { const [t, setT] = React.useState(60); React.useEffect(() => { const id = setInterval(() => setT((v) => (v <= 0 ? 60 : v - 1)), 1000); return () => clearInterval(id); }, []); const elapsed = 60 - t; const stages = [ { l: "Domain verified", at: 12, c: "#7A52FF" }, { l: "PSP connected", at: 24, c: "#FF5A1F" }, { l: "Client area provisioned", at: 38, c: "#FFB000" }, { l: "Trading provider bridged", at: 52, c: "#2BD974" }, { l: "FIRM LIVE", at: 60, c: "#2BD974" }, ]; const pct = Math.min(100, (elapsed / 60) * 100); const ss = String(t).padStart(2, "0"); return (
launch.60seconds.io/new-firm
LIVE
TIME TO LAUNCH
00 : {ss}
{t === 0 ? "✓ deployed" : "seconds remaining"}
{Math.round(pct)}%
{stages.map((s, i) => { const done = elapsed >= s.at; const active = !done && (i === 0 || elapsed >= stages[i - 1].at); return (
{done ? ( ) : active ? : null}
{s.l}
{done ? "✓" : active ? "···" : ""}
); })}
DOMAIN
app. yourfirm .com
PSP KEY
sk_live_ ••••••••••••• ●
); } // ───────────────────────────────────────────────────────────── // Hero visual B: AGENT CONSOLE — operator chats with AI agent // (The signature 60Seconds differentiator) // ───────────────────────────────────────────────────────────── function AgentConsoleVisual() { const turns = [ { who: "ops", text: 'create challenge: 3d streak, $5 fee, $1000 payout, PL positive 3 days', }, { who: "agent", text: '✓ Created challenge "3-Day Streak"', card: { title: "3-Day Streak Challenge", rows: [ ["Fee", "$5.00"], ["Payout", "$1,000.00"], ["Rule", "PL > $0 on 3 consecutive days"], ["Status", "LIVE · published to website"], ], accent: "#7A52FF", }, }, { who: "ops", text: "filter all clients from this week who won more than $500", }, { who: "agent", text: "Found 47 clients · here's the top 5:", table: [ ["#A1042", "Carlos M.", "+$1,820"], ["#A0998", "Priya S.", "+$1,140"], ["#A0871", "Tom K.", "+$980"], ["#A0834", "Anna L.", "+$760"], ["#A0801", "Yuki T.", "+$612"], ], }, ]; const [shown, setShown] = React.useState(1); const [typing, setTyping] = React.useState(""); const fullPrompt = turns[shown]?.who === "ops" ? turns[shown].text : ""; // Reveal turns sequentially React.useEffect(() => { if (shown >= turns.length) { const r = setTimeout(() => setShown(1), 6000); return () => clearTimeout(r); } const cur = turns[shown]; if (cur.who === "ops") { // typing effect setTyping(""); let i = 0; const tick = setInterval(() => { i++; setTyping(cur.text.slice(0, i)); if (i >= cur.text.length) { clearInterval(tick); setTimeout(() => setShown((s) => s + 1), 600); } }, 22); return () => clearInterval(tick); } else { // agent reply pause const t = setTimeout(() => setShown((s) => s + 1), 2200); return () => clearTimeout(t); } }, [shown]); return (
ops.60seconds.io · agent online
claude-ops-v4
{turns.slice(0, shown).map((t, i) => ( ))} {shown < turns.length && turns[shown]?.who === "ops" && (
{typing}
)}
›
tell the agent what you need…
); } function AgentTurn({ turn }) { if (turn.who === "ops") { return (
{turn.text}
); } return (
{turn.text}
{turn.card && (
{turn.card.title}
{turn.card.rows.map(([k, v]) => (
{k}
{v}
))}
)} {turn.table && (
ID
CLIENT
WEEK PL
{turn.table.map(([id, name, pl]) => (
{id}
{name}
{pl}
))}
)}
); } // ───────────────────────────────────────────────────────────── // Hero visual C: TWO INPUTS — domain + PSP — big and focused // ───────────────────────────────────────────────────────────── function TwoInputsHeroVisual() { return (
01 · DOMAIN
app. yourfirm .com
Point one A record. We verify it on the spot.
+
02 · PSP / GATEWAY
sk_live_ ••••••••••••••• ✓ verified
Stripe, Adyen, NOWPayments — your merchant, your fees.
Ready in 60s · No code · No infra
); } window.LaunchConsoleVisual = LaunchConsoleVisual; window.AgentConsoleVisual = AgentConsoleVisual; window.TwoInputsHeroVisual = TwoInputsHeroVisual;