forked from UKSOURCE/ipv6
55 lines
2.2 KiB
TypeScript
55 lines
2.2 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 md:py-32 overflow-hidden text-center px-[var(--spacing-gutter)]">
|
|
<div className="relative z-10 max-w-4xl mx-auto w-full">
|
|
{/* Eyebrow */}
|
|
<p className="font-[var(--font-label-caps)] text-primary text-[10px] md:text-xs font-bold tracking-[0.3em] uppercase mb-4 md:mb-6">
|
|
{data.eyebrow}
|
|
</p>
|
|
|
|
{/* Title */}
|
|
<h1 className="font-[var(--font-display-lg)] text-on-surface mb-6 md:mb-8 leading-[1.2] text-3xl sm:text-4xl md:text-6xl lg:text-7xl break-words">
|
|
{data.title}
|
|
</h1>
|
|
|
|
{/* Subtitle */}
|
|
<p className="text-primary/90 font-[var(--font-display-lg)] text-[11px] md:text-sm lg:text-base mb-8 md:mb-10 uppercase tracking-[0.2em] max-w-2xl mx-auto leading-relaxed">
|
|
{data.subtitle}
|
|
</p>
|
|
|
|
{/* Description */}
|
|
<p className="font-body-base text-on-surface-variant text-sm md:text-lg max-w-2xl mx-auto mb-12 md:mb-16 leading-relaxed opacity-80">
|
|
{data.description}
|
|
</p>
|
|
|
|
{/* CTAs */}
|
|
<div className="flex flex-col sm:flex-row items-center justify-center gap-4 md:gap-6">
|
|
<Link
|
|
href={data.primaryCta.href}
|
|
className="gold-gradient-bg text-on-primary px-10 py-4 rounded-xl font-bold uppercase tracking-widest text-xs md:text-sm shadow-xl shadow-primary/20 hover:shadow-primary/30 transition-all duration-300 active:scale-95 w-full sm:w-auto"
|
|
>
|
|
{data.primaryCta.label}
|
|
</Link>
|
|
<Link
|
|
href={data.secondaryCta.href}
|
|
className="border border-white/10 text-on-surface px-10 py-4 rounded-xl font-bold uppercase tracking-widest text-xs md:text-sm hover:border-primary hover:bg-primary/5 transition-all duration-300 active:scale-95 w-full sm:w-auto"
|
|
>
|
|
{data.secondaryCta.label}
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|