forked from UKSOURCE/ipv6
97 lines
3.2 KiB
TypeScript
97 lines
3.2 KiB
TypeScript
type PackageItem = {
|
|
id: string;
|
|
tier: string;
|
|
badge: string | null;
|
|
price: string;
|
|
featured: boolean;
|
|
cta: string;
|
|
benefits: string[];
|
|
boldBenefit: string | null;
|
|
};
|
|
|
|
type SponsorPackagesData = {
|
|
eyebrow: string;
|
|
title: string;
|
|
items: PackageItem[];
|
|
};
|
|
|
|
export default function SponsorPackages({ data }: { data: SponsorPackagesData }) {
|
|
return (
|
|
<section className="py-16 lg:py-32 bg-surface-container-lowest">
|
|
<div className="max-w-[1280px] mx-auto px-gutter">
|
|
|
|
{/* Header — flex items-center justify-between mb-stack-lg */}
|
|
<div className="flex items-center justify-between mb-stack-lg">
|
|
<h2 className="font-headline-md text-headline-md">{data.title}</h2>
|
|
<div className="hidden lg:block h-px flex-grow mx-stack-lg bg-outline-variant/30" />
|
|
</div>
|
|
|
|
{/* Grid — gap-stack-lg = 32px */}
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-stack-lg">
|
|
{data.items.map((pkg) => (
|
|
<div
|
|
key={pkg.id}
|
|
className={`glass-panel p-stack-lg rounded-xl flex flex-col h-full ${
|
|
pkg.featured ? "gold-border gold-glow ring-2 ring-primary/20" : ""
|
|
}`}
|
|
>
|
|
<div className="mb-stack-lg">
|
|
{pkg.badge && (
|
|
<span className="bg-primary/20 text-primary px-3 py-1 rounded text-label-caps mb-4 inline-block">
|
|
{pkg.badge}
|
|
</span>
|
|
)}
|
|
<h3
|
|
className={`font-display-lg text-headline-md ${
|
|
pkg.featured ? "text-primary" : ""
|
|
}`}
|
|
>
|
|
{pkg.tier}
|
|
</h3>
|
|
<div className="text-on-surface font-display-lg text-title-sm mt-2">
|
|
{pkg.price}
|
|
</div>
|
|
</div>
|
|
|
|
<ul className="space-y-4 mb-stack-lg flex-grow">
|
|
{pkg.benefits.map((benefit) => (
|
|
<li key={benefit} className="flex items-start gap-3">
|
|
<span
|
|
className="material-symbols-outlined text-primary text-[20px]"
|
|
style={
|
|
pkg.featured
|
|
? { fontVariationSettings: "'FILL' 1" }
|
|
: undefined
|
|
}
|
|
>
|
|
check_circle
|
|
</span>
|
|
<span
|
|
className={`text-on-surface-variant ${
|
|
benefit === pkg.boldBenefit ? "font-bold" : ""
|
|
}`}
|
|
>
|
|
{benefit}
|
|
</span>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
|
|
<button
|
|
type="button"
|
|
className={`w-full py-4 rounded font-title-sm transition-all active:scale-95 ${
|
|
pkg.featured
|
|
? "gold-gradient-bg text-on-primary hover:opacity-90"
|
|
: "border border-outline-variant text-on-surface hover:border-primary transition-colors"
|
|
}`}
|
|
>
|
|
{pkg.cta}
|
|
</button>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|