forked from UKSOURCE/ipv6
81 lines
3.2 KiB
TypeScript
81 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-[var(--spacing-section-gap)] bg-surface-container-low/30 px-[var(--spacing-gutter)]">
|
|
<div className="max-w-[1280px] mx-auto w-full">
|
|
{/* Header */}
|
|
<div className="flex flex-col md:flex-row items-start md:items-center gap-4 md:gap-8 mb-12 md:mb-20">
|
|
<h2 className="font-[var(--font-display-lg)] text-2xl md:text-4xl text-primary leading-tight">
|
|
{data.title}
|
|
</h2>
|
|
<div className="hidden md:block h-px w-full bg-primary/20" />
|
|
</div>
|
|
|
|
{/* Grid */}
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-8 lg:gap-12">
|
|
{data.items.map((pkg) => (
|
|
<div
|
|
key={pkg.id}
|
|
className={`glass-panel p-6 sm:p-10 rounded-[2rem] flex flex-col h-full transition-all duration-500 hover:-translate-y-2 hover:border-primary hover:shadow-[0_0_20px_rgba(197,160,89,0.3)] ${
|
|
pkg.featured ? "bg-surface-container-high/40" : ""
|
|
}`}
|
|
>
|
|
<div className="mb-10">
|
|
{pkg.badge && (
|
|
<span className="bg-primary/10 text-primary border border-primary/20 px-5 py-2 rounded-full text-[10px] font-bold tracking-[0.25em] uppercase mb-6 inline-block">
|
|
{pkg.badge}
|
|
</span>
|
|
)}
|
|
<h3 className={`font-[var(--font-display-lg)] text-2xl md:text-3xl mb-3 ${pkg.featured ? "text-primary" : "text-on-surface"}`}>
|
|
{pkg.tier}
|
|
</h3>
|
|
<div className="text-primary/90 font-[var(--font-mono)] text-xl tracking-tight">
|
|
{pkg.price}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="h-px w-full bg-white/5 mb-10" />
|
|
|
|
<ul className="space-y-6 mb-12 flex-grow">
|
|
{pkg.benefits.map((benefit) => (
|
|
<li key={benefit} className="flex items-start gap-5">
|
|
<span className="material-symbols-outlined text-primary text-[22px] mt-0.5">
|
|
{pkg.featured ? "verified" : "check_circle"}
|
|
</span>
|
|
<span className={`text-on-surface-variant text-base leading-relaxed ${benefit === pkg.boldBenefit ? "font-bold text-primary" : ""}`}>
|
|
{benefit}
|
|
</span>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
|
|
<button
|
|
type="button"
|
|
className="w-full py-5 rounded-xl font-bold uppercase tracking-widest text-sm transition-all duration-300 bg-surface-container-high border border-white/10 text-on-surface hover:bg-primary hover:text-on-primary hover:border-primary hover:shadow-lg hover:shadow-primary/20 active:scale-95"
|
|
>
|
|
{pkg.cta}
|
|
</button>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|