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

Fix size of website

Browse Source
This commit is contained in:
xuanduong
2026-05-13 19:35:11 +07:00
parent 8d675de14d
commit a01aebd8bd
9 changed files with 146 additions and 109 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/components/home/AgendaSection.tsx
+9 -9
View File
@@ -10,17 +10,17 @@ export default function AgendaSection({
};
}) {
return (
<section className="py-16 lg:py-32 max-w-hd mx-auto px-[var(--spacing-gutter)]" id={data.id}>
<div className="flex flex-col xl:flex-row justify-between xl:items-end mb-12 lg:mb-24 gap-8">
<section className="py-16 lg:py-24 max-w-hd mx-auto px-[var(--spacing-gutter)]" id={data.id}>
<div className="flex flex-col lg:flex-row justify-between lg:items-end mb-12 lg:mb-24 gap-8">
<div className="max-w-3xl">
<span className="font-[var(--font-label-caps)] text-xs lg:text-sm text-primary block mb-4 lg:mb-8 tracking-[0.25em]">
{data.eyebrow}
</span>
<h2 className="font-[var(--font-display-lg)] text-on-surface uppercase tracking-tight text-[clamp(2rem,4vw+1rem,4.5rem)]">
<h2 className="font-[var(--font-display-lg)] text-on-surface uppercase tracking-tight text-[clamp(1.75rem,3vw+1rem,3.5rem)]">
{data.title}
</h2>
</div>
<p className="text-on-surface-variant/60 text-base lg:text-[20px] max-w-md xl:text-right">
<p className="text-on-surface-variant/60 text-base lg:text-lg max-w-md xl:text-right">
{data.description}
</p>
</div>
@@ -29,22 +29,22 @@ export default function AgendaSection({
{data.items.map((item) => (
<div
key={item.order}
className="glass-panel p-8 lg:p-12 rounded-3xl relative overflow-hidden group hover:border-primary/60 transition-colors"
className="glass-panel p-6 lg:p-10 rounded-3xl relative overflow-hidden group hover:border-primary/60 transition-colors"
>
<div className="absolute top-0 right-0 p-6 lg:p-8">
<span className="font-[var(--font-display-lg)] text-2xl lg:text-[40px] text-primary/20 group-hover:text-primary transition-colors">
<span className="font-[var(--font-display-lg)] text-xl lg:text-[32px] text-primary/20 group-hover:text-primary transition-colors">
{item.order}
</span>
</div>
<div className="mb-6 lg:mb-10">
<span className="font-[var(--font-display-lg)] text-2xl lg:text-[36px] text-primary">
<span className="font-[var(--font-display-lg)] text-xl lg:text-[28px] text-primary">
{item.time}
</span>
</div>
<h3 className="font-[var(--font-display-lg)] text-2xl lg:text-[32px] text-on-surface mb-4 lg:mb-6">
<h3 className="font-[var(--font-display-lg)] text-lg lg:text-[24px] text-on-surface mb-3 lg:mb-4">
{item.title}
</h3>
<p className="text-sm lg:text-[18px] text-on-surface-variant/80 leading-relaxed mb-6 lg:mb-8">
<p className="text-xs lg:text-base text-on-surface-variant/80 leading-relaxed mb-6 lg:mb-8">
{item.description}
</p>
<div className="w-full h-1 bg-primary/10 group-hover:bg-primary transition-colors duration-500" />
app/components/home/HeroSection.tsx
+6 -6
View File
@@ -13,33 +13,33 @@ export default function HeroSection({
};
}) {
return (
<section className="relative min-h-[90vh] lg:min-h-screen flex items-center overflow-hidden bg-background hero-glow px-[var(--spacing-gutter)]">
<section className="relative min-h-[80vh] lg:min-h-[90vh] flex items-center overflow-hidden bg-background hero-glow px-[var(--spacing-gutter)]">
<div className="relative z-10 max-w-hd mx-auto w-full">
<div className="max-w-7xl">
<div className="inline-flex items-center gap-3 lg:gap-4 px-4 lg:px-8 py-2 lg:py-3 rounded-full bg-surface-container-high border border-primary/30 mb-8 lg:mb-16">
<span className="material-symbols-outlined text-primary text-[20px] lg:text-[26px]">
{data.badgeIcon}
</span>
<span className="font-[var(--font-label-caps)] text-xs lg:text-[16px] text-on-surface">
<span className="font-[var(--font-label-caps)] text-xs lg:text-[14px] text-on-surface">
{data.badgeText}
</span>
</div>
<h1 className="font-[var(--font-display-lg)] text-on-surface mb-6 lg:mb-10 leading-[1.1] text-[clamp(2.25rem,5vw+1rem,6.875rem)]">
<h1 className="font-[var(--font-display-lg)] text-on-surface mb-6 lg:mb-8 leading-[1.1] text-[clamp(1.75rem,3.5vw+1rem,4.25rem)]">
{data.title}
</h1>
<p className="text-on-surface-variant text-lg lg:text-[28px] mb-10 lg:mb-20 max-w-4xl leading-relaxed opacity-90">
<p className="text-on-surface-variant text-base lg:text-[22px] mb-8 lg:mb-16 max-w-3xl leading-relaxed opacity-90">
{data.subtitle}
</p>
<div className="flex flex-col sm:flex-row gap-4 lg:gap-10">
<Link
href={data.primaryCta.href}
className="gold-gradient-bg text-on-primary px-8 lg:px-16 py-5 lg:py-7 font-[var(--font-display-lg)] text-sm lg:text-[20px] font-bold uppercase tracking-widest rounded-xl hover:shadow-[0_0_50px_rgba(197,160,89,0.4)] transition-all text-center"
className="gold-gradient-bg text-on-primary px-8 lg:px-12 py-4 lg:py-5 font-[var(--font-display-lg)] text-sm lg:text-[18px] font-bold uppercase tracking-widest rounded-xl hover:shadow-[0_0_50px_rgba(197,160,89,0.4)] transition-all text-center"
>
{data.primaryCta.label}
</Link>
<Link
href={data.secondaryCta.href}
className="bg-surface-container-high border border-primary/40 text-on-surface px-8 lg:px-16 py-5 lg:py-7 font-[var(--font-display-lg)] text-sm lg:text-[20px] font-bold uppercase tracking-widest rounded-xl hover:bg-surface-container-highest transition-all text-center"
className="bg-surface-container-high border border-primary/40 text-on-surface px-8 lg:px-12 py-4 lg:py-5 font-[var(--font-display-lg)] text-sm lg:text-[18px] font-bold uppercase tracking-widest rounded-xl hover:bg-surface-container-highest transition-all text-center"
>
{data.secondaryCta.label}
</Link>
app/components/home/StatsSection.tsx
+3 -3
View File
@@ -5,17 +5,17 @@ export default function StatsSection({
}) {
return (
<section
className="py-16 lg:py-32 bg-surface-container-low border-y border-primary/10"
className="py-12 lg:py-20 bg-surface-container-low border-y border-primary/10"
id={data.id}
>
<div className="max-w-hd mx-auto px-[var(--spacing-gutter)]">
<div className="grid grid-cols-1 md:grid-cols-3 gap-12 lg:gap-32 text-center">
{data.items.map((x) => (
<div key={x.label} className="space-y-3 lg:space-y-6">
<div className="font-[var(--font-display-lg)] text-5xl lg:text-[96px] text-primary">
<div className="font-[var(--font-display-lg)] text-4xl lg:text-7xl text-primary leading-none">
{x.value}
</div>
<div className="font-[var(--font-label-caps)] text-sm lg:text-[18px] text-on-surface/80 tracking-widest uppercase">
<div className="font-[var(--font-label-caps)] text-xs lg:text-sm text-on-surface/70 tracking-widest uppercase">
{x.label}
</div>
</div>
app/components/home/VisionSection.tsx
+7 -7
View File
@@ -9,16 +9,16 @@ export default function VisionSection({
};
}) {
return (
<section className="py-16 lg:py-32 max-w-hd mx-auto px-[var(--spacing-gutter)]">
<section className="py-16 lg:py-24 max-w-hd mx-auto px-[var(--spacing-gutter)]">
<div className="grid grid-cols-1 lg:grid-cols-12 gap-12 lg:gap-32 items-start">
<div className="lg:col-span-5">
<span className="font-[var(--font-label-caps)] text-xs lg:text-sm text-primary mb-6 lg:mb-10 block tracking-[0.25em]">
{data.eyebrow}
</span>
<h2 className="font-[var(--font-display-lg)] text-on-surface mb-8 lg:mb-12 leading-tight text-[clamp(2rem,4vw+1rem,4.5rem)]">
<h2 className="font-[var(--font-display-lg)] text-on-surface mb-8 lg:mb-12 leading-tight text-[clamp(1.75rem,3vw+1rem,3.5rem)]">
{data.title}
</h2>
<div className="space-y-6 lg:space-y-10 text-on-surface-variant text-lg lg:text-[22px] leading-relaxed">
<div className="space-y-6 lg:space-y-8 text-on-surface-variant text-base lg:text-[18px] leading-relaxed">
{data.paragraphs.map((p) => (
<p key={p}>{p}</p>
))}
@@ -28,15 +28,15 @@ export default function VisionSection({
{data.cards.map((c) => (
<div
key={c.title}
className="glass-panel p-8 lg:p-12 rounded-2xl group transition-all duration-500 hover:lg:-translate-y-4 hover:shadow-2xl hover:shadow-primary/5"
className="glass-panel p-6 lg:p-10 rounded-2xl group transition-all duration-500 hover:lg:-translate-y-4 hover:shadow-2xl hover:shadow-primary/5"
>
<span className="material-symbols-outlined text-primary text-[40px] lg:text-[56px] mb-8 lg:mb-12 block">
<span className="material-symbols-outlined text-primary text-[32px] lg:text-[48px] mb-6 lg:mb-8 block">
{c.icon}
</span>
<h3 className="font-[var(--font-display-lg)] text-xl lg:text-[28px] text-on-surface mb-4 lg:mb-6">
<h3 className="font-[var(--font-display-lg)] text-lg lg:text-[22px] text-on-surface mb-3 lg:mb-4">
{c.title}
</h3>
<p className="text-sm lg:text-[18px] text-on-surface-variant/80 leading-relaxed">
<p className="text-xs lg:text-[16px] text-on-surface-variant/80 leading-relaxed">
{c.description}
</p>
</div>
app/components/layout/Footer/Footer.tsx
+4 -4
View File
@@ -3,9 +3,9 @@ import siteData from "@/app/data/site.json";
export default function Footer() {
return (
<footer className="w-full bg-surface-container-low border-t border-white/5 py-6 lg:py-10">
<div className="flex flex-col xl:flex-row justify-between items-center px-[var(--spacing-gutter)] gap-6 lg:gap-8 w-full max-w-hd mx-auto">
<div className="font-[var(--font-label-caps)] text-base lg:text-[18px] text-primary tracking-[0.4em] font-bold uppercase">
<footer className="w-full bg-surface-container-low border-t border-white/5 py-10 lg:py-16">
<div className="flex flex-col lg:flex-row justify-between items-center px-[var(--spacing-gutter)] gap-10 lg:gap-8 w-full max-w-hd mx-auto">
<div className="font-[var(--font-label-caps)] text-base lg:text-xl text-primary tracking-widest font-bold uppercase">
{siteData.brand.name}
</div>
<div className="flex flex-wrap justify-center gap-8 lg:gap-16">
@@ -19,7 +19,7 @@ export default function Footer() {
</Link>
))}
</div>
<div className="text-[13px] lg:text-[14px] text-on-surface-variant/40 text-center xl:text-right max-w-sm leading-relaxed uppercase tracking-widest">
<div className="text-[13px] lg:text-[14px] text-on-surface-variant/40 text-center lg:text-right max-w-sm leading-relaxed uppercase tracking-widest">
{siteData.footer.copyright}
</div>
</div>
app/components/layout/Header/HeaderClient.tsx
+112 -75
View File
@@ -28,94 +28,131 @@ export default function HeaderClient({
}, [mobileOpen]);
return (
<header className="fixed top-0 w-full z-50 bg-surface/80 backdrop-blur-xl border-b border-white/5">
<div className="flex justify-between items-center px-[var(--spacing-gutter)] py-2 lg:py-3 w-full max-w-hd mx-auto">
<Link
href="/"
className="font-[var(--font-display-lg)] text-[18px] sm:text-[20px] lg:text-[24px] text-primary tracking-tighter uppercase font-bold"
>
{brand.name}
</Link>
<nav className="hidden xl:flex items-center gap-10 2xl:gap-16">
<>
<header className="fixed top-0 w-full z-50 bg-surface/90 backdrop-blur-xl border-b border-white/10 shadow-2xl">
<div className="flex justify-between items-center px-[var(--spacing-gutter)] py-4 lg:py-6 w-full max-w-hd mx-auto">
<Link
className={`font-[var(--font-label-caps)] text-sm ${
isHome ? "text-primary border-b-2 border-primary pb-1" : "text-on-surface-variant hover:text-primary"
} transition-colors duration-300`}
href="/"
className="font-[var(--font-display-lg)] text-[16px] sm:text-[18px] lg:text-[22px] text-primary tracking-tighter uppercase font-bold"
>
Home
{brand.name}
</Link>
{navItems.map((item) => {
const active = pathname === item.href;
return (
<Link
key={item.href}
className={`font-[var(--font-label-caps)] text-sm transition-colors duration-300 ${
active ? "text-primary border-b-2 border-primary pb-1" : "text-on-surface-variant hover:text-primary"
}`}
href={item.href}
>
{item.label}
</Link>
);
})}
</nav>
<div className="flex items-center gap-4 lg:gap-10">
<span className="hidden sm:block text-on-surface-variant/60 font-[var(--font-label-caps)] text-xs">
EN
</span>
<Link
href="/registration"
className="hidden sm:inline-flex gold-gradient-bg text-on-primary px-5 lg:px-7 py-2 lg:py-2.5 font-[var(--font-body-base)] text-sm font-bold uppercase tracking-wider rounded-lg active:scale-95 transition-transform shadow-lg shadow-primary/10"
>
Register
</Link>
<button
type="button"
className="xl:hidden text-primary p-2"
aria-label="Toggle menu"
aria-expanded={mobileOpen}
onClick={() => setMobileOpen((v) => !v)}
>
<span className="material-symbols-outlined text-3xl">{mobileOpen ? "close" : "menu"}</span>
</button>
<nav className="hidden lg:flex items-center gap-8 2xl:gap-12">
<Link
className={`font-[var(--font-label-caps)] text-sm ${
isHome ? "text-primary border-b-2 border-primary pb-1" : "text-on-surface-variant hover:text-primary"
} transition-colors duration-300`}
href="/"
>
Home
</Link>
{navItems.map((item) => {
const active = pathname === item.href;
return (
<Link
key={item.href}
className={`font-[var(--font-label-caps)] text-sm transition-colors duration-300 ${
active ? "text-primary border-b-2 border-primary pb-1" : "text-on-surface-variant hover:text-primary"
}`}
href={item.href}
>
{item.label}
</Link>
);
})}
</nav>
<div className="flex items-center gap-4 lg:gap-10">
<span className="hidden sm:block text-on-surface-variant/60 font-[var(--font-label-caps)] text-xs">
EN
</span>
<Link
href="/registration"
className="hidden sm:inline-flex gold-gradient-bg text-on-primary px-4 lg:px-6 py-2 lg:py-2.5 font-[var(--font-body-base)] text-xs lg:text-sm font-bold uppercase tracking-wider rounded-lg active:scale-95 transition-transform shadow-lg shadow-primary/10"
>
Register
</Link>
<button
type="button"
className="lg:hidden text-primary p-2"
aria-label="Toggle menu"
aria-expanded={mobileOpen}
onClick={() => setMobileOpen((v) => !v)}
>
<span className="material-symbols-outlined text-3xl">{mobileOpen ? "close" : "menu"}</span>
</button>
</div>
</div>
</div>
</header>
{/* Mobile Menu Overlay */}
<div
className={`fixed inset-0 top-[52px] lg:top-[60px] bg-surface z-40 flex-col p-[var(--spacing-gutter)] gap-8 xl:hidden border-t border-white/5 ${
mobileOpen ? "flex" : "hidden"
className={`fixed inset-0 bg-black/80 backdrop-blur-md z-[60] transition-opacity duration-500 lg:hidden ${
mobileOpen ? "opacity-100 pointer-events-auto" : "opacity-0 pointer-events-none"
}`}
onClick={() => setMobileOpen(false)}
/>
{/* Mobile Menu Side Drawer */}
<div
className={`fixed inset-y-0 right-0 w-[80%] sm:w-[380px] z-[70] flex flex-col bg-[#1a1a1a] shadow-[-20px_0_60px_rgba(0,0,0,1)] transition-transform duration-500 ease-out lg:hidden ${
mobileOpen ? "translate-x-0" : "translate-x-full"
}`}
>
<Link className="text-2xl font-[var(--font-display-lg)] text-on-surface" href="/" onClick={() => setMobileOpen(false)}>
Home
</Link>
{navItems.map((item) => {
const active = pathname === item.href;
return (
<Link
key={item.href}
className={`text-2xl font-[var(--font-display-lg)] ${active ? "text-primary" : "text-on-surface"}`}
href={item.href}
onClick={() => setMobileOpen(false)}
>
{item.label}
</Link>
);
})}
<div className="mt-auto flex flex-col gap-6">
<div className="text-on-surface-variant/60 font-[var(--font-label-caps)] text-sm">Language: EN</div>
<Link
href="/registration"
className="gold-gradient-bg text-on-primary w-full py-5 font-[var(--font-body-base)] text-lg font-bold uppercase tracking-wider rounded-lg text-center"
<div className="p-8 flex justify-between items-center border-b border-white/5 bg-[#222222]">
<span className="font-[var(--font-display-lg)] text-primary text-sm font-bold uppercase tracking-widest">
Menu
</span>
<button
type="button"
className="text-primary/70 hover:text-primary transition-colors"
onClick={() => setMobileOpen(false)}
>
Register Now
</Link>
<span className="material-symbols-outlined text-4xl">close</span>
</button>
</div>
<div className="flex-1 flex flex-col p-8 gap-8 overflow-y-auto">
<nav className="flex flex-col gap-6">
<Link
className={`text-xl font-[var(--font-display-lg)] ${isHome ? "text-primary" : "text-on-surface"} hover:text-primary transition-colors`}
href="/"
onClick={() => setMobileOpen(false)}
>
Home
</Link>
{navItems.map((item) => {
const active = pathname === item.href;
return (
<Link
key={item.href}
className={`text-xl font-[var(--font-display-lg)] transition-colors ${
active ? "text-primary" : "text-on-surface hover:text-primary"
}`}
href={item.href}
onClick={() => setMobileOpen(false)}
>
{item.label}
</Link>
);
})}
</nav>
<div className="mt-auto pt-10 border-t border-white/5 flex flex-col gap-6">
<div className="text-on-surface-variant/60 font-[var(--font-label-caps)] text-sm uppercase tracking-widest">
Language: EN
</div>
<Link
href="/registration"
className="gold-gradient-bg text-on-primary w-full py-5 font-[var(--font-body-base)] text-lg font-bold uppercase tracking-widest rounded-xl text-center shadow-2xl"
onClick={() => setMobileOpen(false)}
>
Register Now
</Link>
</div>
</div>
</div>
</header>
</>
);
}