forked from UKSOURCE/ipv6
81 lines
3.2 KiB
TypeScript
81 lines
3.2 KiB
TypeScript
type SponsorContactData = {
|
|
id: string;
|
|
title: string;
|
|
description: string;
|
|
phone: { label: string; value: string };
|
|
email: { label: string; value: string };
|
|
cta: string;
|
|
image: { src: string; alt: string };
|
|
};
|
|
|
|
export default function SponsorContact({ data }: { data: SponsorContactData }) {
|
|
return (
|
|
<section id={data.id} className="py-16 lg:py-32 relative">
|
|
<div className="max-w-[1280px] mx-auto px-gutter">
|
|
|
|
{/* glass-panel gold-border — p-stack-lg lg:p-section-gap */}
|
|
<div className="glass-panel gold-border p-stack-lg lg:p-section-gap rounded-3xl overflow-hidden relative">
|
|
{/* Glow */}
|
|
<div className="absolute -bottom-24 -right-24 w-64 h-64 bg-primary/20 blur-[100px] rounded-full" />
|
|
|
|
<div className="relative z-10 grid grid-cols-1 lg:grid-cols-2 gap-stack-lg items-center">
|
|
{/* Left */}
|
|
<div>
|
|
<h2 className="font-display-lg text-display-lg mb-6">{data.title}</h2>
|
|
|
|
<p className="font-body-base text-body-base text-on-surface-variant/80 mb-8">
|
|
{data.description}
|
|
</p>
|
|
|
|
<div className="space-y-6 mb-12">
|
|
{/* Phone */}
|
|
<div className="flex items-center gap-4">
|
|
<div className="w-10 h-10 border border-primary/30 rounded-full flex items-center justify-center">
|
|
<span className="material-symbols-outlined text-primary">call</span>
|
|
</div>
|
|
<div>
|
|
<p className="text-label-caps opacity-60">{data.phone.label}</p>
|
|
<p className="font-title-sm">{data.phone.value}</p>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Email */}
|
|
<div className="flex items-center gap-4">
|
|
<div className="w-10 h-10 border border-primary/30 rounded-full flex items-center justify-center">
|
|
<span className="material-symbols-outlined text-primary">mail</span>
|
|
</div>
|
|
<div>
|
|
<p className="text-label-caps opacity-60">{data.email.label}</p>
|
|
<p className="font-title-sm">{data.email.value}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<button
|
|
type="button"
|
|
className="gold-gradient-bg text-on-primary font-title-sm px-12 py-5 rounded-lg hover:opacity-90 transition-all active:scale-95 flex items-center gap-3"
|
|
>
|
|
{data.cta}
|
|
<span className="material-symbols-outlined">arrow_forward</span>
|
|
</button>
|
|
</div>
|
|
|
|
{/* Right: image */}
|
|
<div className="hidden lg:block">
|
|
<div className="relative aspect-square">
|
|
{/* eslint-disable-next-line @next/next/no-img-element */}
|
|
<img
|
|
src={data.image.src}
|
|
alt={data.image.alt}
|
|
className="w-full h-full object-cover rounded-2xl opacity-60 mix-blend-luminosity"
|
|
/>
|
|
<div className="absolute inset-0 ring-1 ring-inset ring-white/10 rounded-2xl" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|