forked from UKSOURCE/ipv6
52 lines
1.8 KiB
TypeScript
52 lines
1.8 KiB
TypeScript
import Link from "next/link";
|
|
|
|
type SponsorHeroData = {
|
|
eyebrow: string;
|
|
title: string;
|
|
subtitle: string;
|
|
description: string;
|
|
primaryCta: { label: string; href: string };
|
|
secondaryCta: { label: string; href: string };
|
|
};
|
|
|
|
export default function SponsorHero({ data }: { data: SponsorHeroData }) {
|
|
return (
|
|
<section className="relative py-16 lg:py-32 overflow-hidden">
|
|
<div className="absolute inset-0 bg-[radial-gradient(circle_at_50%_50%,rgba(197,160,89,0.08),transparent_70%)]" />
|
|
|
|
<div className="max-w-[1280px] mx-auto px-gutter relative z-10 text-center">
|
|
<span className="font-label-caps text-label-caps text-primary mb-4 block">
|
|
{data.eyebrow}
|
|
</span>
|
|
|
|
<h1 className="font-display-lg text-display-lg mb-6">
|
|
{data.title}
|
|
</h1>
|
|
|
|
<h2 className="font-headline-md text-headline-md text-on-surface-variant mb-8 max-w-3xl mx-auto">
|
|
{data.subtitle}
|
|
</h2>
|
|
|
|
<p className="font-body-base text-body-base text-on-surface-variant/80 max-w-2xl mx-auto mb-12">
|
|
{data.description}
|
|
</p>
|
|
|
|
<div className="flex flex-col sm:flex-row justify-center gap-stack-md">
|
|
<Link
|
|
href={data.primaryCta.href}
|
|
className="gold-gradient-bg text-on-primary font-title-sm px-10 py-4 rounded-lg hover:opacity-90 transition-all active:scale-95 text-center"
|
|
>
|
|
{data.primaryCta.label}
|
|
</Link>
|
|
<Link
|
|
href={data.secondaryCta.href}
|
|
className="border border-primary text-primary font-title-sm px-10 py-4 rounded-lg hover:bg-primary/5 transition-all active:scale-95 text-center"
|
|
>
|
|
{data.secondaryCta.label}
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|