NguyenThanhToan/ipv6-sims
1
0
Fork 0
forked from UKSOURCE/ipv6
Code Pull Requests Activity

Fix basepath ipv6, fix sponsor.

Browse Source
This commit is contained in:
xuanduong
2026-05-14 21:17:50 +07:00
parent 219b420f48
commit cce0c675f9
12 changed files with 177 additions and 125 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/components/sponsor/SponsorPackages.tsx
+24 -40
View File
@@ -17,60 +17,48 @@ type SponsorPackagesData = {
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" />
<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 — gap-stack-lg = 32px */}
<div className="grid grid-cols-1 md:grid-cols-2 gap-stack-lg">
{/* 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-stack-lg rounded-xl flex flex-col h-full ${
pkg.featured ? "gold-border gold-glow ring-2 ring-primary/20" : ""
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-stack-lg">
<div className="mb-10">
{pkg.badge && (
<span className="bg-primary/20 text-primary px-3 py-1 rounded text-label-caps mb-4 inline-block">
<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-display-lg text-headline-md ${
pkg.featured ? "text-primary" : ""
}`}
>
<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-on-surface font-display-lg text-title-sm mt-2">
<div className="text-primary/90 font-[var(--font-mono)] text-xl tracking-tight">
{pkg.price}
</div>
</div>
<ul className="space-y-4 mb-stack-lg flex-grow">
<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-3">
<span
className="material-symbols-outlined text-primary text-[20px]"
style={
pkg.featured
? { fontVariationSettings: "'FILL' 1" }
: undefined
}
>
check_circle
<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 ${
benefit === pkg.boldBenefit ? "font-bold" : ""
}`}
>
<span className={`text-on-surface-variant text-base leading-relaxed ${benefit === pkg.boldBenefit ? "font-bold text-primary" : ""}`}>
{benefit}
</span>
</li>
@@ -79,11 +67,7 @@ export default function SponsorPackages({ data }: { data: SponsorPackagesData })
<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"
}`}
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>