forked from UKSOURCE/ipv6
99 lines
3.9 KiB
TypeScript
99 lines
3.9 KiB
TypeScript
type ItemCard = {
|
|
icon: string;
|
|
title: string;
|
|
status: string;
|
|
benefits?: 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-[var(--spacing-section-gap)] px-[var(--spacing-gutter)] bg-background">
|
|
<div className="max-w-hd mx-auto">
|
|
{/* Header */}
|
|
<div className="text-center mb-16 lg:mb-28">
|
|
{data.eyebrow && (
|
|
<p className="text-primary font-[var(--font-label-caps)] text-xs tracking-[0.3em] uppercase mb-4 opacity-80">
|
|
{data.eyebrow}
|
|
</p>
|
|
)}
|
|
<h2 className="font-[var(--font-display-lg)] text-[clamp(1.75rem,3.5vw,3.5rem)] mb-4 md:mb-6 text-on-surface leading-tight">
|
|
{data.title}
|
|
</h2>
|
|
<p className="text-on-surface-variant text-base lg:text-[20px] max-w-3xl mx-auto opacity-70 leading-relaxed">
|
|
{data.description}
|
|
</p>
|
|
</div>
|
|
|
|
{/* 4-col cards */}
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 lg:gap-8 mb-16 lg:mb-24">
|
|
{data.items.map((item) => (
|
|
<div
|
|
key={item.title}
|
|
className="glass-panel p-8 rounded-3xl group hover:bg-surface-container-high transition-all duration-500 transform hover:-translate-y-2 border-primary/10 flex flex-col items-center text-center"
|
|
>
|
|
<div className="w-14 h-14 gold-gradient-bg rounded-2xl flex items-center justify-center mb-6 rotate-3 group-hover:rotate-0 transition-transform duration-500 shadow-xl shadow-primary/20">
|
|
<span className="material-symbols-outlined text-on-primary text-2xl">
|
|
{item.icon}
|
|
</span>
|
|
</div>
|
|
<h4 className="font-[var(--font-display-lg)] text-lg lg:text-xl mb-2 text-on-surface leading-tight">
|
|
{item.title}
|
|
</h4>
|
|
{item.benefits && item.benefits.length > 0 && (
|
|
<ul className="mt-3 mb-4 space-y-1.5 flex-1">
|
|
{item.benefits.map((b) => (
|
|
<li key={b} className="text-sm lg:text-base text-on-surface-variant/80">
|
|
{b}
|
|
</li>
|
|
))}
|
|
</ul>
|
|
)}
|
|
<p className="text-xs font-bold tracking-[0.3em] uppercase text-primary mt-auto">
|
|
{item.status}
|
|
</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
{/* Highlights */}
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-6 lg:gap-10">
|
|
{data.highlights.map((h) => (
|
|
<div
|
|
key={h.eyebrow}
|
|
className="glass-panel border-primary/20 bg-surface-container-high/40 p-8 lg:p-14 rounded-[2rem] flex items-center justify-between group hover:bg-surface-container-highest transition-all duration-500"
|
|
>
|
|
<div className="space-y-2 lg:space-y-4">
|
|
<p className="font-[var(--font-label-caps)] text-xs lg:text-sm tracking-[0.2em] text-primary uppercase opacity-80">
|
|
{h.eyebrow}
|
|
</p>
|
|
<p className="font-[var(--font-display-lg)] text-xl lg:text-3xl text-on-surface leading-tight">
|
|
{h.title}
|
|
</p>
|
|
</div>
|
|
<div className="w-16 h-16 lg:w-24 lg:h-24 rounded-2xl bg-primary/10 flex items-center justify-center group-hover:scale-110 group-hover:rotate-6 transition-all duration-500 flex-shrink-0 ml-6">
|
|
<span className="material-symbols-outlined text-primary text-3xl lg:text-5xl">
|
|
{h.icon}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|