forked from UKSOURCE/ipv6
init
This commit is contained in:
@@ -0,0 +1,419 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html class="dark" lang="en"><head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
||||
<title>IPv6 SUMMIT 2026 | Infrastructure for AI</title>
|
||||
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=Inter:wght@300;400;500;600&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
||||
<style>
|
||||
body {
|
||||
background-color: #0F0F0F;
|
||||
color: #E0E0E0;
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
.material-symbols-outlined {
|
||||
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
||||
}
|
||||
.glass-panel {
|
||||
background: rgba(15, 15, 15, 0.7);
|
||||
backdrop-filter: blur(8px);
|
||||
border: 1px solid rgba(197, 160, 89, 0.2);
|
||||
}
|
||||
@media (min-width: 1024px) {
|
||||
.glass-panel {
|
||||
backdrop-filter: blur(12px);
|
||||
border: 1px solid rgba(197, 160, 89, 0.3);
|
||||
}
|
||||
}
|
||||
.gold-gradient-bg {
|
||||
background: linear-gradient(135deg, #C5A059 0%, #8E6D3D 100%);
|
||||
}
|
||||
.hero-glow {
|
||||
background: radial-gradient(circle at 50% 40%, rgba(197, 160, 89, 0.08) 0%, rgba(15, 15, 15, 0) 70%);
|
||||
}
|
||||
@media (min-width: 1024px) {
|
||||
.hero-glow {
|
||||
background: radial-gradient(circle at 50% 50%, rgba(197, 160, 89, 0.12) 0%, rgba(15, 15, 15, 0) 80%);
|
||||
}
|
||||
}
|
||||
input::placeholder {
|
||||
color: rgba(224, 224, 224, 0.4);
|
||||
}
|
||||
.max-w-hd {
|
||||
max-width: 1920px;
|
||||
}
|
||||
|
||||
/* Fluid Typography and Utilities */
|
||||
@layer utilities {
|
||||
.fluid-hero-title {
|
||||
font-size: clamp(2.25rem, 5vw + 1rem, 6.875rem); /* 36px to 110px */
|
||||
}
|
||||
.fluid-display-lg {
|
||||
font-size: clamp(2rem, 4vw + 1rem, 4.5rem); /* 32px to 72px */
|
||||
}
|
||||
.fluid-body {
|
||||
font-size: clamp(1rem, 0.5vw + 0.8rem, 1.25rem); /* 16px to 20px */
|
||||
}
|
||||
}
|
||||
|
||||
/* Mobile Menu Toggle logic */
|
||||
#mobile-menu.hidden {
|
||||
display: none;
|
||||
}
|
||||
#mobile-menu:not(.hidden) {
|
||||
display: flex;
|
||||
}
|
||||
</style>
|
||||
<script id="tailwind-config">
|
||||
tailwind.config = {
|
||||
darkMode: "class",
|
||||
theme: {
|
||||
extend: {
|
||||
"colors": {
|
||||
"primary": "#C5A059",
|
||||
"on-primary": "#261900",
|
||||
"surface": "#0F0F0F",
|
||||
"surface-container-low": "#141414",
|
||||
"surface-container-high": "#1F1F1F",
|
||||
"surface-container-highest": "#292929",
|
||||
"on-surface": "#FFFFFF",
|
||||
"on-surface-variant": "#E0E0E0",
|
||||
"outline": "#C5A059",
|
||||
"background": "#0F0F0F",
|
||||
"secondary": "#8E6D3D"
|
||||
},
|
||||
"borderRadius": {
|
||||
"DEFAULT": "0.125rem",
|
||||
"lg": "0.25rem",
|
||||
"xl": "0.5rem",
|
||||
"full": "0.75rem"
|
||||
},
|
||||
"spacing": {
|
||||
"gutter": "clamp(1rem, 4vw, 3.75rem)",
|
||||
"margin-safe": "clamp(1.5rem, 5vw, 5rem)",
|
||||
"stack-lg": "clamp(2rem, 6vw, 4rem)",
|
||||
"stack-md": "clamp(1rem, 3vw, 2rem)",
|
||||
"section-gap": "clamp(4rem, 10vw, 11.25rem)",
|
||||
"stack-sm": "1rem",
|
||||
"unit": "8px",
|
||||
"container-max": "1800px"
|
||||
},
|
||||
"fontFamily": {
|
||||
"title-sm": ["Inter"],
|
||||
"body-base": ["Inter"],
|
||||
"label-caps": ["Geist"],
|
||||
"display-lg": ["Space Grotesk"],
|
||||
"headline-md": ["Space Grotesk"],
|
||||
"h1": ["Space Grotesk"],
|
||||
"h2": ["Space Grotesk"],
|
||||
"hero-title": ["Space Grotesk"],
|
||||
"stat-number": ["Space Grotesk"]
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body class="bg-background text-on-surface-variant font-body-base overflow-x-hidden">
|
||||
<!-- TopAppBar -->
|
||||
<header class="fixed top-0 w-full z-50 bg-surface/80 backdrop-blur-xl border-b border-white/5">
|
||||
<div class="flex justify-between items-center px-gutter py-4 lg:py-8 w-full max-w-hd mx-auto">
|
||||
<div class="font-display-lg text-[24px] lg:text-[36px] text-primary tracking-tighter uppercase font-bold">
|
||||
IPv6 SUMMIT 2026
|
||||
</div>
|
||||
<!-- Desktop Nav -->
|
||||
<nav class="hidden xl:flex items-center gap-10 2xl:gap-16">
|
||||
<a class="text-primary border-b-2 border-primary pb-1 font-label-caps text-sm" href="#agenda">Agenda</a>
|
||||
<a class="text-on-surface-variant font-label-caps text-sm hover:text-primary transition-colors duration-300" href="#speakers">Speakers</a>
|
||||
<a class="text-on-surface-variant font-label-caps text-sm hover:text-primary transition-colors duration-300" href="#stats">Stats</a>
|
||||
<a class="text-on-surface-variant font-label-caps text-sm hover:text-primary transition-colors duration-300" href="#venue">Venue</a>
|
||||
</nav>
|
||||
<div class="flex items-center gap-4 lg:gap-10">
|
||||
<span class="hidden sm:block text-on-surface-variant/60 font-label-caps text-xs">EN | VI</span>
|
||||
<button class="hidden sm:block gold-gradient-bg text-on-primary px-6 lg:px-10 py-3 lg:py-4 font-title-sm text-sm lg:text-[18px] font-bold uppercase tracking-wider rounded-lg active:scale-95 transition-transform shadow-lg shadow-primary/10">
|
||||
Register
|
||||
</button>
|
||||
<!-- Hamburger Menu Button -->
|
||||
<button class="xl:hidden text-primary p-2" id="menu-toggle">
|
||||
<span class="material-symbols-outlined text-3xl">menu</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Mobile/Tablet Menu -->
|
||||
<div class="hidden fixed inset-0 top-[64px] lg:top-[104px] bg-surface z-40 flex-col p-gutter gap-8 xl:hidden border-t border-white/5" id="mobile-menu">
|
||||
<a class="text-2xl font-h2 text-on-surface" href="#agenda">Agenda</a>
|
||||
<a class="text-2xl font-h2 text-on-surface" href="#speakers">Speakers</a>
|
||||
<a class="text-2xl font-h2 text-on-surface" href="#stats">Stats</a>
|
||||
<a class="text-2xl font-h2 text-on-surface" href="#venue">Venue</a>
|
||||
<div class="mt-auto flex flex-col gap-6">
|
||||
<div class="text-on-surface-variant/60 font-label-caps text-sm">Language: EN | VI</div>
|
||||
<button class="gold-gradient-bg text-on-primary w-full py-5 font-title-sm text-lg font-bold uppercase tracking-wider rounded-lg">
|
||||
Register Now
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<!-- Hero Section -->
|
||||
<section class="relative min-h-[90vh] lg:min-h-screen flex items-center pt-24 lg:pt-32 overflow-hidden bg-background hero-glow px-gutter">
|
||||
<div class="absolute inset-0 z-0">
|
||||
<div class="w-full h-full" style="background-image: url('https://lh3.googleusercontent.com/aida-public/AB6AXuC3vex0i2x5p-U68-wnSp7g7oJqwmNKU14F1Hbx6ImbAYK2BiIIhqE6LvalueLoqHQXB99RHZCLB4PecJtxz_QW5T2scRvSunIlJP6YGWnkkB8ck6Qge8nhA4Q4POVcCcMSEGEFdYOieKKEkHD_srUsO8op_b8W8423PyF4ANvDGyk3YmJFXEcGiuGlTsBiaQnyYopgEUSzBx3h2z9vgZSIjQIADDiGAQdY65HdYTkQAPMoSzm5ylL393Q9p7JvJZQ5pUOCMx-d3EMG'); background-size: cover; background-position: center; mix-blend-mode: luminosity; opacity: 0.15;"></div>
|
||||
</div>
|
||||
<div class="relative z-10 max-w-hd mx-auto w-full">
|
||||
<div class="max-w-7xl">
|
||||
<div class="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 class="material-symbols-outlined text-primary text-[20px] lg:text-[26px]">calendar_today</span>
|
||||
<span class="font-label-caps text-xs lg:text-[16px] text-on-surface">June 2026 | Ho Chi Minh City, Vietnam</span>
|
||||
</div>
|
||||
<h1 class="font-hero-title fluid-hero-title text-on-surface mb-6 lg:mb-10 leading-[1.1]">
|
||||
IPv6 for AI & Data Centre Summit 2026
|
||||
</h1>
|
||||
<p class="text-on-surface-variant text-lg lg:text-[28px] mb-10 lg:mb-20 max-w-4xl leading-relaxed opacity-90">
|
||||
Unlocking the Potential of Next-Gen Infrastructure. Join global leaders in redefining ASEAN's digital connectivity for the age of AI.
|
||||
</p>
|
||||
<div class="flex flex-col sm:flex-row gap-4 lg:gap-10">
|
||||
<button class="gold-gradient-bg text-on-primary px-8 lg:px-16 py-5 lg:py-7 font-h2 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">
|
||||
Register / ĐĂNG KÝ
|
||||
</button>
|
||||
<button class="bg-surface-container-high border border-primary/40 text-on-surface px-8 lg:px-16 py-5 lg:py-7 font-h2 text-sm lg:text-[20px] font-bold uppercase tracking-widest rounded-xl hover:bg-surface-container-highest transition-all">
|
||||
View Agenda
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Vision Section -->
|
||||
<section class="py-16 lg:py-32 max-w-hd mx-auto px-gutter">
|
||||
<div class="grid grid-cols-1 lg:grid-cols-12 gap-12 lg:gap-32 items-start">
|
||||
<div class="lg:col-span-5">
|
||||
<span class="font-label-caps text-xs lg:text-sm text-primary mb-6 lg:mb-10 block tracking-[0.25em]">VISION & GOALS</span>
|
||||
<h2 class="font-h1 fluid-display-lg text-on-surface mb-8 lg:mb-12 leading-tight">ASEAN's Digital Future</h2>
|
||||
<div class="space-y-6 lg:space-y-10 text-on-surface-variant text-lg lg:text-[22px] leading-relaxed">
|
||||
<p>
|
||||
Vietnam and the broader ASEAN region are at a critical juncture in digital transformation. The transition to IPv6 is the fundamental infrastructure for AI growth and massive data centre scaling.
|
||||
</p>
|
||||
<p class="opacity-70 italic border-l-2 border-primary/30 pl-6 lg:pl-8">
|
||||
Hành trình chuyển đổi số của Việt Nam đang bước vào giai đoạn then chốt, nơi IPv6 đóng vai trò là hạ tầng xương sống cho sự phát triển của AI và các trung tâm dữ liệu thế hệ mới.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="lg:col-span-7 grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6 lg:gap-10">
|
||||
<div class="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">
|
||||
<span class="material-symbols-outlined text-primary text-[40px] lg:text-[56px] mb-8 lg:mb-12 block" data-weight="fill">hub</span>
|
||||
<h3 class="font-h2 text-xl lg:text-[28px] text-on-surface mb-4 lg:mb-6">Networking</h3>
|
||||
<p class="text-sm lg:text-[18px] text-on-surface-variant/80 leading-relaxed">Connect with 500+ C-level executives. Kết nối với hơn 500 lãnh đạo cao cấp.</p>
|
||||
</div>
|
||||
<div class="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">
|
||||
<span class="material-symbols-outlined text-primary text-[40px] lg:text-[56px] mb-8 lg:mb-12 block" data-weight="fill">insights</span>
|
||||
<h3 class="font-h2 text-xl lg:text-[28px] text-on-surface mb-4 lg:mb-6">Tech Insights</h3>
|
||||
<p class="text-sm lg:text-[18px] text-on-surface-variant/80 leading-relaxed">Deep dives into AI workloads. Khám phá sâu về hạ tầng AI thế hệ mới.</p>
|
||||
</div>
|
||||
<div class="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 sm:col-span-2 md:col-span-1">
|
||||
<span class="material-symbols-outlined text-primary text-[40px] lg:text-[56px] mb-8 lg:mb-12 block" data-weight="fill">gavel</span>
|
||||
<h3 class="font-h2 text-xl lg:text-[28px] text-on-surface mb-4 lg:mb-6">Policy</h3>
|
||||
<p class="text-sm lg:text-[18px] text-on-surface-variant/80 leading-relaxed">National digital infrastructure standards. Thảo luận về hạ tầng số quốc gia.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Stats Section -->
|
||||
<section class="py-16 lg:py-32 bg-surface-container-low border-y border-primary/10" id="stats">
|
||||
<div class="max-w-hd mx-auto px-gutter">
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-12 lg:gap-32 text-center">
|
||||
<div class="space-y-3 lg:space-y-6">
|
||||
<div class="font-stat-number text-5xl lg:text-[96px] text-primary">130+</div>
|
||||
<div>
|
||||
<div class="font-label-caps text-sm lg:text-[18px] text-on-surface/80 tracking-widest uppercase">Global Speakers</div>
|
||||
<div class="text-xs lg:text-[18px] text-on-surface-variant/50 mt-1 lg:mt-2">Diễn giả quốc tế</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="space-y-3 lg:space-y-6 border-y md:border-y-0 md:border-x border-primary/5 py-8 md:py-0">
|
||||
<div class="font-stat-number text-5xl lg:text-[96px] text-primary">14</div>
|
||||
<div>
|
||||
<div class="font-label-caps text-sm lg:text-[18px] text-on-surface/80 tracking-widest uppercase">ASEAN Nations</div>
|
||||
<div class="text-xs lg:text-[18px] text-on-surface-variant/50 mt-1 lg:mt-2">Quốc gia khu vực</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="space-y-3 lg:space-y-6">
|
||||
<div class="font-stat-number text-5xl lg:text-[96px] text-primary">50+</div>
|
||||
<div>
|
||||
<div class="font-label-caps text-sm lg:text-[18px] text-on-surface/80 tracking-widest uppercase">Tech Partners</div>
|
||||
<div class="text-xs lg:text-[18px] text-on-surface-variant/50 mt-1 lg:mt-2">Đối tác công nghệ</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Agenda Section -->
|
||||
<section class="py-16 lg:py-32 max-w-hd mx-auto px-gutter" id="agenda">
|
||||
<div class="flex flex-col xl:flex-row justify-between xl:items-end mb-12 lg:mb-24 gap-8">
|
||||
<div class="max-w-3xl">
|
||||
<span class="font-label-caps text-xs lg:text-sm text-primary block mb-4 lg:mb-8 tracking-[0.25em]">SCHEDULE</span>
|
||||
<h2 class="font-h1 fluid-display-lg text-on-surface uppercase tracking-tight">Event Agenda / Lịch trình</h2>
|
||||
</div>
|
||||
<p class="text-on-surface-variant/60 text-base lg:text-[20px] max-w-md xl:text-right">A strategic overview of the technical and strategic sessions.</p>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-6 lg:gap-10">
|
||||
<!-- Item 1 -->
|
||||
<div class="glass-panel p-8 lg:p-12 rounded-3xl relative overflow-hidden group hover:border-primary/60 transition-colors">
|
||||
<div class="absolute top-0 right-0 p-6 lg:p-8">
|
||||
<span class="font-stat-number text-2xl lg:text-[40px] text-primary/20 group-hover:text-primary transition-colors">01</span>
|
||||
</div>
|
||||
<div class="mb-6 lg:mb-10">
|
||||
<span class="font-stat-number text-2xl lg:text-[36px] text-primary">08:30</span>
|
||||
</div>
|
||||
<h3 class="font-h2 text-2xl lg:text-[32px] text-on-surface mb-4 lg:mb-6">Opening Ceremony</h3>
|
||||
<p class="text-sm lg:text-[18px] text-on-surface-variant/80 leading-relaxed mb-6 lg:mb-8">Welcome address by MIC Vietnam and regional digital economy leaders.</p>
|
||||
<div class="w-full h-1 bg-primary/10 group-hover:bg-primary transition-colors duration-500"></div>
|
||||
</div>
|
||||
<!-- Item 2 -->
|
||||
<div class="glass-panel p-8 lg:p-12 rounded-3xl relative overflow-hidden group hover:border-primary/60 transition-colors">
|
||||
<div class="absolute top-0 right-0 p-6 lg:p-8">
|
||||
<span class="font-stat-number text-2xl lg:text-[40px] text-primary/20 group-hover:text-primary transition-colors">02</span>
|
||||
</div>
|
||||
<div class="mb-6 lg:mb-10">
|
||||
<span class="font-stat-number text-2xl lg:text-[36px] text-primary">10:00</span>
|
||||
</div>
|
||||
<h3 class="font-h2 text-2xl lg:text-[32px] text-on-surface mb-4 lg:mb-6">AI in Data Centres</h3>
|
||||
<p class="text-sm lg:text-[18px] text-on-surface-variant/80 leading-relaxed mb-6 lg:mb-8">How IPv6 enables hyperscale processing and low-latency fabric.</p>
|
||||
<div class="w-full h-1 bg-primary/10 group-hover:bg-primary transition-colors duration-500"></div>
|
||||
</div>
|
||||
<!-- Item 3 -->
|
||||
<div class="glass-panel p-8 lg:p-12 rounded-3xl relative overflow-hidden group hover:border-primary/60 transition-colors md:col-span-2 xl:col-span-1">
|
||||
<div class="absolute top-0 right-0 p-6 lg:p-8">
|
||||
<span class="font-stat-number text-2xl lg:text-[40px] text-primary/20 group-hover:text-primary transition-colors">03</span>
|
||||
</div>
|
||||
<div class="mb-6 lg:mb-10">
|
||||
<span class="font-stat-number text-2xl lg:text-[36px] text-primary">14:00</span>
|
||||
</div>
|
||||
<h3 class="font-h2 text-2xl lg:text-[32px] text-on-surface mb-4 lg:mb-6">Forum: Policy & Scale</h3>
|
||||
<p class="text-sm lg:text-[18px] text-on-surface-variant/80 leading-relaxed mb-6 lg:mb-8">Closed-door discussion for regulators and industry giants.</p>
|
||||
<div class="w-full h-1 bg-primary/10 group-hover:bg-primary transition-colors duration-500"></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Stakeholders Section -->
|
||||
<section class="py-16 lg:py-32 bg-surface">
|
||||
<div class="max-w-hd mx-auto px-gutter">
|
||||
<div class="text-center mb-12 lg:mb-24 px-4">
|
||||
<h2 class="font-h1 fluid-display-lg text-on-surface mb-4 lg:mb-6">Key Stakeholders</h2>
|
||||
<p class="text-on-surface-variant text-lg lg:text-[24px] opacity-70">Bringing together the architects of the digital age.</p>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-8 lg:gap-24">
|
||||
<div class="glass-panel p-10 lg:p-16 rounded-3xl space-y-8 lg:space-y-12 flex flex-col items-center text-center">
|
||||
<h4 class="font-label-caps text-xs lg:text-[16px] text-primary tracking-[0.25em] border-b border-primary/20 pb-6 lg:pb-8 w-full uppercase">Government & Regulators</h4>
|
||||
<div class="flex flex-wrap justify-center gap-10 lg:gap-16 opacity-70 filter grayscale brightness-200 hover:grayscale-0 hover:brightness-100 transition-all duration-700">
|
||||
<img alt="MIC Vietnam" class="h-12 lg:h-20 w-full object-contain" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDhNobvtxMHNvZvxGODgUS3c0fA1_MPo_3uA9yeLNQsM3Ikcr8cvGbNsLlDXrv8Svb5lUk3xHIJtGdRuj0xhgA3B3ZV8buxROMSN3D9X0URDGHCU9e29PfXdu4tkgZ6txZHfsYDVyuXue7r567qjg2caBMZgKeZpRCnD_MLXUt_IntqDFz5hpShuDtoNQRDc1TqbIiuIJiJswgzMnx4U5O-mHtysv5TKR8FB3qYQJAJe05NNPtNzBJSILyejgqkWP7FED1E3NCzOKBf"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="glass-panel p-10 lg:p-16 rounded-3xl space-y-8 lg:space-y-12 flex flex-col items-center text-center">
|
||||
<h4 class="font-label-caps text-xs lg:text-[16px] text-primary tracking-[0.25em] border-b border-primary/20 pb-6 lg:pb-8 w-full uppercase">Cloud & AI Giants</h4>
|
||||
<div class="flex flex-wrap justify-center gap-10 lg:gap-16 opacity-70 filter grayscale brightness-200 hover:grayscale-0 hover:brightness-100 transition-all duration-700">
|
||||
<img alt="Huawei" class="h-10 lg:h-16 w-full object-contain" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBB9Xc7pLgZGRbpA7aSA6rry-Q3ld4zfynxem6bc3P6GbulvOf6wZyKIKwH48RSqkFXt5YBrHuFVSroy4GOdgRdswqKqviZANTcQ42T9ESLTomKfIRyV2tVRKaIlzPE5X-8nmmiXaBCDzyAxJMPpIn6rdiD4eqP-HMssJW_OQSytySjH3h_QKeRgsqfgREVSqE_y9Y-TzGln898m4FPgZ2LcOJ50Q3xj5Vjxlwg4sB9_q6Tqfr1U3ii28WPdxn1sVHsaEmmXq_SmUyh"/>
|
||||
<img alt="AWS" class="h-8 lg:h-14 w-full object-contain" src="https://lh3.googleusercontent.com/aida-public/AB6AXuATUb5fi5MyPvCIYZR0ZXpfDUTA5sZcF4FkRY-HK4xqGTn2RD02Qr9W12Fb848PWucSQtdVSNqWmnOM1oeXLukRbkvU-angYear_Jvq8V-Rp7QMir-bjLoxAGn5U6tM9iWjr9apViqfBjwxrCiprCoQUzHK6iueA_j-2sNzV7qkc4YOVCKkIKYxMlH9szNkilxZzoN5cxaWbqwwJ-6M0lEsQPWPeZjgsjLjUjaaG-Iy5Foe-GGH-tvw0I5K919IWHg5B1_wgCcSDxWu"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="glass-panel p-10 lg:p-16 rounded-3xl space-y-8 lg:space-y-12 flex flex-col items-center text-center">
|
||||
<h4 class="font-label-caps text-xs lg:text-[16px] text-primary tracking-[0.25em] border-b border-primary/20 pb-6 lg:pb-8 w-full uppercase">Telecom Operators</h4>
|
||||
<div class="flex flex-wrap justify-center gap-10 lg:gap-16 opacity-70 filter grayscale brightness-200 hover:grayscale-0 hover:brightness-100 transition-all duration-700">
|
||||
<img alt="Viettel" class="h-10 lg:h-16 w-full object-contain" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBeBSGYZD4s-iLE3P1hsH2Fu_uQKkTVIpDS1Pt_pXF4NxDUzLlRbTHuylc1NSbruhZIBnwyK1SnYZmpgH-PGrg-gwyBVdSoFFTsQme0qRWtH9R_gDLCA9MYNjnnoKxe7jqF69IzuB-woS82cRzVeL3hHNeEy2467WKyiz-vbpj3nG3R6T_3bbFXif1zqLQSW7hYDU9Q5IHhBS3Y1CWES0idZSRGgXbDK9vZV5sDaZYDRgYo86KgsaVIttVJIcB-EHZ9TzY3tOJ88pK6"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Registration Section -->
|
||||
<section class="py-16 lg:py-32" id="register">
|
||||
<div class="max-w-hd mx-auto px-gutter grid grid-cols-1 lg:grid-cols-2 gap-16 lg:gap-32 items-center">
|
||||
<div>
|
||||
<h2 class="font-h1 fluid-display-lg text-on-surface mb-8 lg:mb-12 leading-tight">Reserve Your Seat</h2>
|
||||
<p class="text-xl lg:text-[26px] text-on-surface-variant mb-12 lg:mb-16 leading-relaxed opacity-90">
|
||||
Limited executive passes available. Registration is subject to confirmation by the organizing committee.
|
||||
</p>
|
||||
<div class="space-y-8 lg:space-y-16">
|
||||
<div class="flex items-start gap-4 lg:gap-8">
|
||||
<div class="shrink-0 w-12 h-12 lg:w-16 lg:h-16 rounded-full bg-primary/10 flex items-center justify-center">
|
||||
<span class="material-symbols-outlined text-primary text-[24px] lg:text-[36px]">mail</span>
|
||||
</div>
|
||||
<div>
|
||||
<div class="font-label-caps text-xs lg:text-[16px] text-on-surface uppercase tracking-widest mb-1 lg:mb-2">Email Inquiry</div>
|
||||
<div class="text-lg lg:text-[22px] text-on-surface-variant/80">contact@ipv6summit2026.vn</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-start gap-4 lg:gap-8">
|
||||
<div class="shrink-0 w-12 h-12 lg:w-16 lg:h-16 rounded-full bg-primary/10 flex items-center justify-center">
|
||||
<span class="material-symbols-outlined text-primary text-[24px] lg:text-[36px]">location_on</span>
|
||||
</div>
|
||||
<div>
|
||||
<div class="font-label-caps text-xs lg:text-[16px] text-on-surface uppercase tracking-widest mb-1 lg:mb-2">Venue</div>
|
||||
<div class="text-lg lg:text-[22px] text-on-surface-variant/80">District 1, Ho Chi Minh City</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="glass-panel p-8 lg:p-16 rounded-3xl border border-primary/30 shadow-2xl shadow-primary/5">
|
||||
<form class="space-y-6 lg:space-y-10">
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 gap-6 lg:gap-10">
|
||||
<div>
|
||||
<label class="font-label-caps text-xs text-on-surface/60 mb-2 lg:mb-4 block uppercase tracking-widest">Name / Họ tên</label>
|
||||
<input class="w-full bg-surface-container-low border-white/10 rounded-xl p-4 lg:p-6 text-on-surface focus:border-primary focus:ring-0 transition-all text-base lg:text-[20px]" placeholder="John Doe" type="text"/>
|
||||
</div>
|
||||
<div>
|
||||
<label class="font-label-caps text-xs text-on-surface/60 mb-2 lg:mb-4 block uppercase tracking-widest">Company / Công ty</label>
|
||||
<input class="w-full bg-surface-container-low border-white/10 rounded-xl p-4 lg:p-6 text-on-surface focus:border-primary focus:ring-0 transition-all text-base lg:text-[20px]" placeholder="Tech Global" type="text"/>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label class="font-label-caps text-xs text-on-surface/60 mb-2 lg:mb-4 block uppercase tracking-widest">Email / Thư điện tử</label>
|
||||
<input class="w-full bg-surface-container-low border-white/10 rounded-xl p-4 lg:p-6 text-on-surface focus:border-primary focus:ring-0 transition-all text-base lg:text-[20px]" placeholder="john@company.com" type="email"/>
|
||||
</div>
|
||||
<div>
|
||||
<label class="font-label-caps text-xs text-on-surface/60 mb-2 lg:mb-4 block uppercase tracking-widest">Phone / Số điện thoại</label>
|
||||
<input class="w-full bg-surface-container-low border-white/10 rounded-xl p-4 lg:p-6 text-on-surface focus:border-primary focus:ring-0 transition-all text-base lg:text-[20px]" placeholder="+84 ..." type="tel"/>
|
||||
</div>
|
||||
<button class="w-full gold-gradient-bg text-on-primary py-5 lg:py-8 font-h2 text-lg lg:text-[22px] font-bold uppercase tracking-widest rounded-xl hover:shadow-[0_0_60px_rgba(197,160,89,0.5)] transition-all transform lg:hover:scale-[1.02]" type="submit">
|
||||
Submit Registration
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Footer -->
|
||||
<footer class="w-full bg-surface-container-low border-t border-white/5 py-12 lg:py-20">
|
||||
<div class="flex flex-col xl:flex-row justify-between items-center px-gutter gap-12 w-full max-w-hd mx-auto">
|
||||
<div class="font-label-caps text-xl lg:text-[24px] text-primary tracking-[0.4em] font-bold">
|
||||
IPv6 SUMMIT 2026
|
||||
</div>
|
||||
<div class="flex flex-wrap justify-center gap-8 lg:gap-16">
|
||||
<a class="text-on-surface-variant font-label-caps text-xs lg:text-sm hover:text-primary transition-colors" href="#">Privacy</a>
|
||||
<a class="text-on-surface-variant font-label-caps text-xs lg:text-sm hover:text-primary transition-colors" href="#">Terms</a>
|
||||
<a class="text-on-surface-variant font-label-caps text-xs lg:text-sm hover:text-primary transition-colors" href="#">Press</a>
|
||||
<a class="text-on-surface-variant font-label-caps text-xs lg:text-sm hover:text-primary transition-colors" href="#">Contact</a>
|
||||
</div>
|
||||
<div class="text-[14px] lg:text-[16px] text-on-surface-variant/40 text-center xl:text-right max-w-sm leading-relaxed uppercase tracking-widest">
|
||||
© 2026 INTERNATIONAL TECH SUMMIT. IPV6 FOR AI EVOLUTION.
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
<script>
|
||||
const menuToggle = document.getElementById('menu-toggle');
|
||||
const mobileMenu = document.getElementById('mobile-menu');
|
||||
const menuIcon = menuToggle.querySelector('.material-symbols-outlined');
|
||||
|
||||
menuToggle.addEventListener('click', () => {
|
||||
const isHidden = mobileMenu.classList.toggle('hidden');
|
||||
menuIcon.textContent = isHidden ? 'menu' : 'close';
|
||||
document.body.style.overflow = isHidden ? '' : 'hidden';
|
||||
});
|
||||
|
||||
// Close menu when clicking links
|
||||
mobileMenu.querySelectorAll('a').forEach(link => {
|
||||
link.addEventListener('click', () => {
|
||||
mobileMenu.classList.add('hidden');
|
||||
menuIcon.textContent = 'menu';
|
||||
document.body.style.overflow = '';
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body></html>
|
||||
Reference in New Issue
Block a user