forked from UKSOURCE/ipv6
72 lines
3.4 KiB
TypeScript
72 lines
3.4 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-[80vh] lg:min-h-[90vh] 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 flex-wrap items-center gap-3 lg:gap-4 px-4 lg:px-8 py-2.5 lg:py-3.5 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-[14px] text-on-surface">
|
|
{data.badgeText}
|
|
</span>
|
|
<a
|
|
href="https://maps.app.goo.gl/DXwWCY4BKAV6BZbc8"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="ml-1 lg:ml-2 px-3 py-1 rounded-full bg-primary/20 text-primary hover:bg-primary hover:text-background text-xs font-semibold uppercase tracking-wider transition-colors inline-flex items-center gap-1.5 border border-primary/40"
|
|
title="Open Google Maps"
|
|
>
|
|
<span>📍 Google Maps</span>
|
|
<svg className="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" strokeWidth={2}>
|
|
<path strokeLinecap="round" strokeLinejoin="round" d="M13.5 6H5.25A2.25 2.25 0 0 0 3 8.25v10.5A2.25 2.25 0 0 0 5.25 21h10.5A2.25 2.25 0 0 0 18 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25" />
|
|
</svg>
|
|
</a>
|
|
</div>
|
|
<h1 className="font-[var(--font-display-lg)] text-on-surface mb-6 lg:mb-8 leading-[1.1] text-[clamp(1.75rem,3.5vw+1rem,4.25rem)]">
|
|
{data.title.includes(" AI") ? (
|
|
<>
|
|
{data.title.split(" AI")[0]}
|
|
<br />
|
|
{"AI" + data.title.split(" AI").slice(1).join(" AI")}
|
|
</>
|
|
) : (
|
|
data.title
|
|
)}
|
|
</h1>
|
|
<p className="text-on-surface-variant text-base lg:text-[22px] mb-8 lg:mb-16 max-w-3xl 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-12 py-4 lg:py-5 font-[var(--font-display-lg)] text-sm lg:text-[18px] 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-12 py-4 lg:py-5 font-[var(--font-display-lg)] text-sm lg:text-[18px] font-bold uppercase tracking-widest rounded-xl hover:bg-surface-container-highest transition-all text-center"
|
|
>
|
|
{data.secondaryCta.label}
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|