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

feat: add partners carousel, update sponsor section, add Nasalization font

Browse Source
This commit is contained in:
hoangthien
2026-05-15 16:35:28 +07:00
parent 79d428b3b3
commit ad22254cc8
25 changed files with 239 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/components/sponsor/SponsorItemBased.tsx
+21 -6
View File
@@ -2,6 +2,7 @@ type ItemCard = {
icon: string;
title: string;
status: string;
benefits?: string[];
};
type Highlight = {
@@ -24,6 +25,11 @@ export default function SponsorItemBased({ data }: { data: SponsorItemBasedData
<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>
@@ -33,21 +39,30 @@ export default function SponsorItemBased({ data }: { data: SponsorItemBasedData
</div>
{/* 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">
<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 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"
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-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">
<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-xl lg:text-2xl mb-3 text-on-surface">
<h4 className="font-[var(--font-display-lg)] text-lg lg:text-xl mb-2 text-on-surface leading-tight">
{item.title}
</h4>
<p className="text-[11px] font-bold tracking-[0.3em] uppercase text-primary">
{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>