// Hero, Features, Marquee, Final CTA, Footer
const CRED_PALETTE = {
red: '#E53E3E',
yellow: '#E8C547',
green: '#10B981'
};
// Tri-color credit bar — used as architectural element across the site
const CredBar = ({ height = 3, style }) => (
);
// Continuous gradient version
const CredGradient = ({ height = 2, style }) => (
);
const Eyebrow = ({ children, color }) => (
{children}
);
const EmailForm = ({ ctaText, accent, compact, onSubmit }) => {
const [email, setEmail] = React.useState('');
const [status, setStatus] = React.useState(() => window.getSportsCredWaitlistEmail?.() ? 'saved' : 'idle');
React.useEffect(() => {
const handleJoined = () => setStatus('saved');
window.addEventListener('sportscred:waitlist-joined', handleJoined);
return () => window.removeEventListener('sportscred:waitlist-joined', handleJoined);
}, []);
const handle = async (e) => {
e.preventDefault();
if (!email || status === 'saving') return;
setStatus('saving');
const result = onSubmit
? await onSubmit(email)
: await window.saveWaitlistLead?.({ email, source: 'waitlist_form' });
setStatus(result?.ok === true ? 'saved' : 'error');
};
if (status === 'saved' || status === 'error') {
const isSaved = status === 'saved';
return (
{isSaved ? "You're on the list." : 'SAVE FAILED. CHECK SUPABASE SETUP AND TRY AGAIN.'}
);
}
return (
);
};
const Hero = ({ accent, showCounter = true }) => {
return (
{/* top cred bar — credit-gauge palette anchor */}
{/* animated gradient mesh */}
{/* grain */}
")',
pointerEvents: 'none'
}}>
{/* nav removed — sticky brand bar at page top handles this now */}
{/* hero content + ACS card side-by-side */}
Waitlist · Now Open
Your sports
credibility
starts here.
SportsCred is the platform where sports knowledge is currency.
Your takes deserve more than likes — join the waitlist and be first in.
window.saveWaitlistLead?.({ email, source: 'waitlist_form' })} />
{/* Founding member perk pill */}
Founding Member Perks
Verified status · Bonus ACS · Locked in for life
No spam.
·
Just early access.
{/* Right column — ACS card */}
{/* corner stat — moved to bottom-left so it doesn't clash with the card */}
{showCounter && }
);
};
const Logo = ({ accent, size = 28 }) => {
return (
SPORTSCRED
);
};
const Features = ({ accent }) => {
const items = [
{
n: "01",
t: "Just Sports",
d: "A platform built for one thing only. No noise, no distractions, no diet content. The whole feed is the game.",
tier: CRED_PALETTE.red,
grade: "C"
},
{
n: "02",
t: "Earn Your Cred",
d: "Your ACS Score — Analysis, Credibility, Sports IQ — grows the smarter you engage. Followers don't matter. Receipts do.",
tier: CRED_PALETTE.yellow,
grade: "B"
},
{
n: "03",
t: "Real Fan Energy",
d: "Casuals, die-hards, fantasy minds, and analysts. Every fan tier has a voice — and a way to prove it.",
tier: CRED_PALETTE.green,
grade: "A"
}
];
return (
What is SportsCred
A home for fans who actually watch the tape.
{items.map((it, i) => (
e.currentTarget.style.background = '#0F0F0F'}
onMouseLeave={(e) => e.currentTarget.style.background = '#0A0A0A'}
>
{/* tier letter — credit-grade in top right */}
{it.grade}
{it.n} · TIER
{it.t}
{it.d}
))}
);
};
const Marquee = ({ accent }) => {
const lines = [
"Built for the fan who actually watches the tape.",
"Your league. Your cred. Your platform.",
"The sports app fans have been waiting for.",
"Knowledge is currency.",
"No followers. Just receipts."
];
const MarqueeGroup = ({ groupIndex }) => (
{lines.map((ln, i) => {
const itemIndex = i;
const credColors = [CRED_PALETTE.red, CRED_PALETTE.yellow, CRED_PALETTE.green];
const diamondColor = credColors[itemIndex % 3];
return (
{ln}
◆
);
})}
);
return (
);
};
const FinalCTA = ({ accent }) => {
return (
{/* credit palette gauge above CTA */}
Limited Early Access
Be first.
Build your cred early.
SportsCred is coming. The earlier you're in, the bigger the head start.
Founding members get verified status and ACS bonus points.
window.saveWaitlistLead?.({ email, source: 'waitlist_form' })} />
);
};
const Footer = ({ accent }) => {
const Social = ({ label, href }) => (
{
e.currentTarget.style.borderColor = accent;
e.currentTarget.style.color = accent;
}}
onMouseLeave={(e) => {
e.currentTarget.style.borderColor = 'rgba(255,255,255,0.12)';
e.currentTarget.style.color = '#888';
}}
>{label}
);
return (
);
};
Object.assign(window, { Hero, Features, Marquee, FinalCTA, Footer, Eyebrow, EmailForm, Logo, CredBar, CredGradient, CRED_PALETTE });