forked from UKSOURCE/ipv6
53 lines
2.3 KiB
TypeScript
53 lines
2.3 KiB
TypeScript
import Link from "next/link";
|
|
|
|
export default function HeroSection({
|
|
data,
|
|
}: {
|
|
data: {
|
|
badgeIcon: string;
|
|
badgeText: string;
|
|
title: string;
|
|
subtitle: string;
|
|
primaryCta: { label: string; href: string };
|
|
secondaryCta: { label: string; href: string };
|
|
};
|
|
}) {
|
|
return (
|
|
<section className="relative min-h-[90vh] lg:min-h-screen flex items-center overflow-hidden bg-background hero-glow px-[var(--spacing-gutter)]">
|
|
<div className="relative z-10 max-w-hd mx-auto w-full">
|
|
<div className="max-w-7xl">
|
|
<div className="inline-flex items-center gap-3 lg:gap-4 px-4 lg:px-8 py-2 lg:py-3 rounded-full bg-surface-container-high border border-primary/30 mb-8 lg:mb-16">
|
|
<span className="material-symbols-outlined text-primary text-[20px] lg:text-[26px]">
|
|
{data.badgeIcon}
|
|
</span>
|
|
<span className="font-[var(--font-label-caps)] text-xs lg:text-[16px] text-on-surface">
|
|
{data.badgeText}
|
|
</span>
|
|
</div>
|
|
<h1 className="font-[var(--font-display-lg)] text-on-surface mb-6 lg:mb-10 leading-[1.1] text-[clamp(2.25rem,5vw+1rem,6.875rem)]">
|
|
{data.title}
|
|
</h1>
|
|
<p className="text-on-surface-variant text-lg lg:text-[28px] mb-10 lg:mb-20 max-w-4xl leading-relaxed opacity-90">
|
|
{data.subtitle}
|
|
</p>
|
|
<div className="flex flex-col sm:flex-row gap-4 lg:gap-10">
|
|
<Link
|
|
href={data.primaryCta.href}
|
|
className="gold-gradient-bg text-on-primary px-8 lg:px-16 py-5 lg:py-7 font-[var(--font-display-lg)] text-sm lg:text-[20px] font-bold uppercase tracking-widest rounded-xl hover:shadow-[0_0_50px_rgba(197,160,89,0.4)] transition-all text-center"
|
|
>
|
|
{data.primaryCta.label}
|
|
</Link>
|
|
<Link
|
|
href={data.secondaryCta.href}
|
|
className="bg-surface-container-high border border-primary/40 text-on-surface px-8 lg:px-16 py-5 lg:py-7 font-[var(--font-display-lg)] text-sm lg:text-[20px] font-bold uppercase tracking-widest rounded-xl hover:bg-surface-container-highest transition-all text-center"
|
|
>
|
|
{data.secondaryCta.label}
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|
|
|