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/SponsorContact.tsx
+17 -17
View File
@@ -19,28 +19,28 @@ export default function SponsorContact({ data }: { data: SponsorContactData }) {
<div className="relative z-10 grid grid-cols-1 lg:grid-cols-2 gap-12 lg:gap-24 items-center">
{/* Left Content */}
<div className="space-y-12">
<div className="space-y-8">
<div>
<h2 className="font-[var(--font-display-lg)] text-[clamp(2rem,4vw,4rem)] text-on-surface mb-6 lg:mb-8 leading-[1.1]">
<h2 className="font-[var(--font-display-lg)] text-[clamp(1.75rem,3.5vw,3rem)] text-on-surface mb-4 leading-[1.1]">
{data.title}
</h2>
<p className="font-body-base text-base lg:text-[20px] text-on-surface-variant max-w-xl leading-relaxed opacity-80">
<p className="font-body-base text-sm lg:text-[17px] text-on-surface-variant max-w-xl leading-relaxed opacity-80">
{data.description}
</p>
</div>
<div className="grid grid-cols-1 sm:grid-cols-2 gap-8 lg:gap-12">
<div className="grid grid-cols-1 sm:grid-cols-2 gap-5">
{/* Phone */}
<div className="group">
<div className="flex items-center gap-6">
<div className="w-16 h-16 border border-primary/20 bg-primary/5 rounded-2xl flex items-center justify-center group-hover:border-primary/50 group-hover:bg-primary/10 transition-all duration-300">
<span className="material-symbols-outlined text-primary text-3xl">call</span>
<div className="flex items-center gap-4">
<div className="w-13 h-13 shrink-0 border border-primary/20 bg-primary/5 rounded-xl flex items-center justify-center group-hover:border-primary/50 group-hover:bg-primary/10 transition-all duration-300">
<span className="material-symbols-outlined text-primary text-2xl">call</span>
</div>
<div>
<p className="font-[var(--font-label-caps)] text-[10px] lg:text-xs font-bold tracking-[0.25em] uppercase text-primary mb-2 opacity-60">
<div className="min-w-0">
<p className="font-[var(--font-label-caps)] text-[10px] font-bold tracking-[0.2em] uppercase text-primary mb-1 opacity-60">
{data.phone.label}
</p>
<p className="font-[var(--font-display-lg)] text-lg lg:text-2xl text-on-surface">
<p className="font-[var(--font-display-lg)] text-base text-on-surface whitespace-nowrap">
{data.phone.value}
</p>
</div>
@@ -49,15 +49,15 @@ export default function SponsorContact({ data }: { data: SponsorContactData }) {
{/* Email */}
<div className="group">
<div className="flex items-center gap-6">
<div className="w-16 h-16 border border-primary/20 bg-primary/5 rounded-2xl flex items-center justify-center group-hover:border-primary/50 group-hover:bg-primary/10 transition-all duration-300">
<span className="material-symbols-outlined text-primary text-3xl">mail</span>
<div className="flex items-center gap-4">
<div className="w-13 h-13 shrink-0 border border-primary/20 bg-primary/5 rounded-xl flex items-center justify-center group-hover:border-primary/50 group-hover:bg-primary/10 transition-all duration-300">
<span className="material-symbols-outlined text-primary text-2xl">mail</span>
</div>
<div>
<p className="font-[var(--font-label-caps)] text-[10px] lg:text-xs font-bold tracking-[0.25em] uppercase text-primary mb-2 opacity-60">
<div className="min-w-0">
<p className="font-[var(--font-label-caps)] text-[10px] font-bold tracking-[0.2em] uppercase text-primary mb-1 opacity-60">
{data.email.label}
</p>
<p className="font-[var(--font-display-lg)] text-lg lg:text-2xl text-on-surface break-all">
<p className="font-[var(--font-display-lg)] text-base text-on-surface truncate">
{data.email.value}
</p>
</div>
@@ -67,7 +67,7 @@ export default function SponsorContact({ data }: { data: SponsorContactData }) {
<button
type="button"
className="gold-gradient-bg text-on-primary w-full sm:w-auto px-12 lg:px-16 py-5 lg:py-6 rounded-2xl font-bold uppercase tracking-widest text-sm lg:text-base shadow-2xl shadow-primary/20 hover:shadow-primary/40 transition-all duration-500 active:scale-95 flex items-center justify-center gap-4 group"
className="gold-gradient-bg text-on-primary w-full sm:w-auto px-8 lg:px-10 py-3.5 rounded-xl font-bold uppercase tracking-widest text-sm shadow-2xl shadow-primary/20 hover:shadow-primary/40 transition-all duration-500 active:scale-95 flex items-center justify-center gap-3 group"
>
{data.cta}
<span className="material-symbols-outlined group-hover:translate-x-2 transition-transform">