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/SponsorContact.tsx
+57 -37
View File
@@ -10,67 +10,87 @@ type SponsorContactData = {
export default function SponsorContact({ data }: { data: SponsorContactData }) {
return (
<section id={data.id} className="py-16 lg:py-32 relative">
<div className="max-w-[1280px] mx-auto px-gutter">
<section id={data.id} className="py-[var(--spacing-section-gap)] relative px-[var(--spacing-gutter)]">
<div className="max-w-hd mx-auto">
<div className="glass-panel gold-border p-6 sm:p-10 lg:p-24 rounded-[2.5rem] lg:rounded-[4rem] overflow-hidden relative">
{/* Background Decor */}
<div className="absolute top-0 right-0 w-1/2 h-full bg-gradient-to-l from-primary/5 to-transparent pointer-events-none" />
<div className="absolute -bottom-24 -right-24 w-96 h-96 bg-primary/10 blur-[120px] rounded-full pointer-events-none" />
{/* glass-panel gold-border — p-stack-lg lg:p-section-gap */}
<div className="glass-panel gold-border p-stack-lg lg:p-section-gap rounded-3xl overflow-hidden relative">
{/* Glow */}
<div className="absolute -bottom-24 -right-24 w-64 h-64 bg-primary/20 blur-[100px] rounded-full" />
<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>
<h2 className="font-[var(--font-display-lg)] text-[clamp(2rem,4vw,4rem)] text-on-surface mb-6 lg:mb-8 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">
{data.description}
</p>
</div>
<div className="relative z-10 grid grid-cols-1 lg:grid-cols-2 gap-stack-lg items-center">
{/* Left */}
<div>
<h2 className="font-display-lg text-display-lg mb-6">{data.title}</h2>
<p className="font-body-base text-body-base text-on-surface-variant/80 mb-8">
{data.description}
</p>
<div className="space-y-6 mb-12">
<div className="grid grid-cols-1 sm:grid-cols-2 gap-8 lg:gap-12">
{/* Phone */}
<div className="flex items-center gap-4">
<div className="w-10 h-10 border border-primary/30 rounded-full flex items-center justify-center">
<span className="material-symbols-outlined text-primary">call</span>
</div>
<div>
<p className="text-label-caps opacity-60">{data.phone.label}</p>
<p className="font-title-sm">{data.phone.value}</p>
<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>
<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">
{data.phone.label}
</p>
<p className="font-[var(--font-display-lg)] text-lg lg:text-2xl text-on-surface">
{data.phone.value}
</p>
</div>
</div>
</div>
{/* Email */}
<div className="flex items-center gap-4">
<div className="w-10 h-10 border border-primary/30 rounded-full flex items-center justify-center">
<span className="material-symbols-outlined text-primary">mail</span>
</div>
<div>
<p className="text-label-caps opacity-60">{data.email.label}</p>
<p className="font-title-sm">{data.email.value}</p>
<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>
<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">
{data.email.label}
</p>
<p className="font-[var(--font-display-lg)] text-lg lg:text-2xl text-on-surface break-all">
{data.email.value}
</p>
</div>
</div>
</div>
</div>
<button
type="button"
className="gold-gradient-bg text-on-primary font-title-sm px-12 py-5 rounded-lg hover:opacity-90 transition-all active:scale-95 flex items-center gap-3"
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"
>
{data.cta}
<span className="material-symbols-outlined">arrow_forward</span>
<span className="material-symbols-outlined group-hover:translate-x-2 transition-transform">
arrow_forward
</span>
</button>
</div>
{/* Right: image */}
<div className="hidden lg:block">
<div className="relative aspect-square">
{/* Right Image */}
<div className="relative group lg:mt-0 mt-8">
<div className="relative aspect-[4/5] rounded-[2rem] lg:rounded-[3rem] overflow-hidden">
{/* eslint-disable-next-line @next/next/no-img-element */}
<img
src={data.image.src}
alt={data.image.alt}
className="w-full h-full object-cover rounded-2xl opacity-60 mix-blend-luminosity"
className="w-full h-full object-cover opacity-70 mix-blend-luminosity grayscale group-hover:scale-110 group-hover:grayscale-0 group-hover:opacity-100 transition-all duration-1000"
/>
<div className="absolute inset-0 ring-1 ring-inset ring-white/10 rounded-2xl" />
<div className="absolute inset-0 bg-gradient-to-t from-background via-transparent to-transparent opacity-80" />
<div className="absolute inset-0 ring-1 ring-inset ring-white/10 rounded-[2rem] lg:rounded-[3rem]" />
</div>
{/* Decorative Frame */}
<div className="absolute -inset-4 lg:-inset-6 border border-primary/10 rounded-[2.5rem] lg:rounded-[3.5rem] -z-10 pointer-events-none group-hover:border-primary/30 transition-colors duration-500" />
</div>
</div>
</div>