forked from UKSOURCE/ipv6
69 lines
2.3 KiB
TypeScript
69 lines
2.3 KiB
TypeScript
type ItemCard = {
|
|
icon: string;
|
|
title: string;
|
|
status: string;
|
|
};
|
|
|
|
type Highlight = {
|
|
eyebrow: string;
|
|
title: string;
|
|
icon: string;
|
|
};
|
|
|
|
type SponsorItemBasedData = {
|
|
eyebrow: string;
|
|
title: string;
|
|
description: string;
|
|
items: ItemCard[];
|
|
highlights: Highlight[];
|
|
};
|
|
|
|
export default function SponsorItemBased({ data }: { data: SponsorItemBasedData }) {
|
|
return (
|
|
<section className="py-16 lg:py-32">
|
|
<div className="max-w-[1280px] mx-auto px-gutter">
|
|
|
|
{/* Header — text-center mb-stack-lg */}
|
|
<div className="text-center mb-stack-lg">
|
|
<h2 className="font-headline-md text-headline-md mb-2">{data.title}</h2>
|
|
<p className="text-on-surface-variant opacity-70">{data.description}</p>
|
|
</div>
|
|
|
|
{/* 4-col cards — gap-gutter = 24px, mb-stack-lg = 32px */}
|
|
<div className="grid grid-cols-2 lg:grid-cols-4 gap-gutter mb-stack-lg">
|
|
{data.items.map((item) => (
|
|
<div
|
|
key={item.title}
|
|
className="glass-panel p-stack-md rounded-lg text-center group hover:bg-surface-container transition-colors"
|
|
>
|
|
<div className="w-12 h-12 gold-gradient-bg rounded-full flex items-center justify-center mx-auto mb-4">
|
|
<span className="material-symbols-outlined text-on-primary">{item.icon}</span>
|
|
</div>
|
|
<h4 className="font-title-sm text-body-base mb-1">{item.title}</h4>
|
|
<p className="text-label-caps text-primary">{item.status}</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
{/* Highlights — gap-gutter = 24px */}
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-gutter">
|
|
{data.highlights.map((h) => (
|
|
<div
|
|
key={h.eyebrow}
|
|
className="bg-primary/5 border border-primary/20 p-stack-lg rounded-xl flex items-center justify-between"
|
|
>
|
|
<div>
|
|
<p className="font-label-caps text-primary mb-1">{h.eyebrow}</p>
|
|
<p className="font-title-sm">{h.title}</p>
|
|
</div>
|
|
<span className="material-symbols-outlined text-primary text-4xl">
|
|
{h.icon}
|
|
</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|