o2o-triple-pick/components/Hero.tsx

27 lines
1.0 KiB
TypeScript

import { MATCH } from "@/lib/mockData";
export default function Hero() {
return (
<header className="pt-7 text-center">
<div className="font-impact text-[44px] leading-none tracking-tight">
TRIPLE PICK <span className="text-[var(--green)]">2026</span>
</div>
<div className="mt-2 text-[16px] font-extrabold text-[var(--green)]">
AI Prediction Arena
</div>
<div className="mt-2 inline-block rounded-full border border-white/12 bg-white/8 px-3 py-1 text-[13px] font-semibold text-white/85">
AI
</div>
<h1 className="mt-6 flex items-center justify-center gap-2 whitespace-nowrap text-[19px] font-extrabold leading-snug">
<span className="text-[var(--green)]"></span>
{MATCH.hookText}
<span className="text-[var(--green)]"></span>
</h1>
<div className="mt-1.5 text-[13px] font-semibold text-[var(--green)]">
Korea Republic vs Czechia · Matchday Prediction
</div>
</header>
);
}