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/SponsorItemBased.tsx
+38 -23
View File
@@ -20,45 +20,60 @@ type SponsorItemBasedData = {
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>
<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">
<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 — gap-gutter = 24px, mb-stack-lg = 32px */}
<div className="grid grid-cols-2 lg:grid-cols-4 gap-gutter mb-stack-lg">
{/* 4-col cards */}
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 lg:gap-10 mb-16 lg:mb-24">
{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"
className="glass-panel p-8 lg:p-12 rounded-3xl text-center group hover:bg-surface-container-high transition-all duration-500 transform hover:-translate-y-2 border-primary/10"
>
<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 className="w-16 h-16 gold-gradient-bg rounded-2xl flex items-center justify-center mx-auto mb-8 rotate-3 group-hover:rotate-0 transition-transform duration-500 shadow-xl shadow-primary/20">
<span className="material-symbols-outlined text-on-primary text-3xl lg:text-4xl">
{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>
<h4 className="font-[var(--font-display-lg)] text-xl lg:text-2xl mb-3 text-on-surface">
{item.title}
</h4>
<p className="text-[11px] font-bold tracking-[0.3em] uppercase text-primary">
{item.status}
</p>
</div>
))}
</div>
{/* Highlights — gap-gutter = 24px */}
<div className="grid grid-cols-1 md:grid-cols-2 gap-gutter">
{/* 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="bg-primary/5 border border-primary/20 p-stack-lg rounded-xl flex items-center justify-between"
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>
<p className="font-label-caps text-primary mb-1">{h.eyebrow}</p>
<p className="font-title-sm">{h.title}</p>
<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>
<span className="material-symbols-outlined text-primary text-4xl">
{h.icon}
</span>
</div>
))}
</div>