forked from UKSOURCE/ipv6
Delete html
This commit is contained in:
-400
@@ -1,400 +0,0 @@
|
|||||||
<!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 | Admin Console</title>
|
|
||||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Space+Grotesk:wght@600;700&family=Geist:wght@600&family=JetBrains+Mono:wght@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"/>
|
|
||||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
|
||||||
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
|
||||||
<script id="tailwind-config">
|
|
||||||
tailwind.config = {
|
|
||||||
darkMode: "class",
|
|
||||||
theme: {
|
|
||||||
extend: {
|
|
||||||
"colors": {
|
|
||||||
"secondary-fixed": "#ffddb2",
|
|
||||||
"outline-variant": "#4e4639",
|
|
||||||
"surface-container-highest": "#353534",
|
|
||||||
"on-tertiary-fixed": "#1c1b20",
|
|
||||||
"inverse-surface": "#e5e2e1",
|
|
||||||
"tertiary-fixed": "#e5e1e8",
|
|
||||||
"background": "#0F0F0F",
|
|
||||||
"primary": "#e9c176",
|
|
||||||
"surface-bright": "#3a3939",
|
|
||||||
"inverse-on-surface": "#313030",
|
|
||||||
"on-background": "#e5e2e1",
|
|
||||||
"on-secondary-fixed": "#291800",
|
|
||||||
"inverse-primary": "#775a19",
|
|
||||||
"on-tertiary-fixed-variant": "#48464c",
|
|
||||||
"on-primary": "#412d00",
|
|
||||||
"surface-dim": "#131313",
|
|
||||||
"on-surface": "#e5e2e1",
|
|
||||||
"on-tertiary-container": "#3c3a40",
|
|
||||||
"primary-fixed-dim": "#e9c176",
|
|
||||||
"primary-fixed": "#ffdea5",
|
|
||||||
"on-surface-variant": "#d1c5b4",
|
|
||||||
"surface-container-lowest": "#0e0e0e",
|
|
||||||
"on-primary-container": "#4e3700",
|
|
||||||
"on-secondary-fixed-variant": "#5d4216",
|
|
||||||
"secondary-container": "#604418",
|
|
||||||
"tertiary-fixed-dim": "#c9c5cc",
|
|
||||||
"surface-variant": "#353534",
|
|
||||||
"primary-container": "#c5a059",
|
|
||||||
"surface-container": "#201f1f",
|
|
||||||
"surface-container-low": "#1c1b1b",
|
|
||||||
"secondary": "#e9c088",
|
|
||||||
"error": "#ffb4ab",
|
|
||||||
"surface": "#131313",
|
|
||||||
"on-primary-fixed-variant": "#5d4201",
|
|
||||||
"tertiary-container": "#a7a4ab",
|
|
||||||
"on-secondary-container": "#d9b27c",
|
|
||||||
"error-container": "#93000a",
|
|
||||||
"surface-tint": "#e9c176",
|
|
||||||
"on-tertiary": "#313035",
|
|
||||||
"on-error": "#690005",
|
|
||||||
"surface-container-high": "#2a2a2a",
|
|
||||||
"outline": "#9a8f80",
|
|
||||||
"secondary-fixed-dim": "#e9c088",
|
|
||||||
"on-primary-fixed": "#261900",
|
|
||||||
"on-error-container": "#ffdad6",
|
|
||||||
"tertiary": "#c9c5cc",
|
|
||||||
"on-secondary": "#442b02"
|
|
||||||
},
|
|
||||||
"borderRadius": {
|
|
||||||
"DEFAULT": "0.125rem",
|
|
||||||
"lg": "0.25rem",
|
|
||||||
"xl": "0.5rem",
|
|
||||||
"full": "0.75rem"
|
|
||||||
},
|
|
||||||
"spacing": {
|
|
||||||
"stack-sm": "8px",
|
|
||||||
"stack-lg": "32px",
|
|
||||||
"stack-md": "16px",
|
|
||||||
"unit": "4px",
|
|
||||||
"section-gap": "80px",
|
|
||||||
"margin-safe": "40px",
|
|
||||||
"gutter": "24px"
|
|
||||||
},
|
|
||||||
"fontFamily": {
|
|
||||||
"body-base": ["Inter"],
|
|
||||||
"title-sm": ["Inter"],
|
|
||||||
"display-lg": ["Space Grotesk"],
|
|
||||||
"label-caps": ["Geist"],
|
|
||||||
"headline-md": ["Space Grotesk"],
|
|
||||||
"mono": ["JetBrains Mono"]
|
|
||||||
},
|
|
||||||
"fontSize": {
|
|
||||||
"body-base": ["16px", {"lineHeight": "1.6", "letterSpacing": "0", "fontWeight": "400"}],
|
|
||||||
"title-sm": ["20px", {"lineHeight": "1.4", "letterSpacing": "0.02em", "fontWeight": "600"}],
|
|
||||||
"display-lg": ["48px", {"lineHeight": "1.1", "letterSpacing": "-0.02em", "fontWeight": "700"}],
|
|
||||||
"label-caps": ["12px", {"lineHeight": "1", "letterSpacing": "0.1em", "fontWeight": "600"}],
|
|
||||||
"headline-md": ["32px", {"lineHeight": "1.2", "letterSpacing": "-0.01em", "fontWeight": "600"}]
|
|
||||||
}
|
|
||||||
},
|
|
||||||
},
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
<style>
|
|
||||||
.glass-panel {
|
|
||||||
background: rgba(26, 25, 30, 0.7);
|
|
||||||
backdrop-filter: blur(12px);
|
|
||||||
border: 1px solid rgba(255, 255, 255, 0.05);
|
|
||||||
}
|
|
||||||
.gold-border-focus:focus {
|
|
||||||
border-bottom: 1px solid #e9c176;
|
|
||||||
outline: none;
|
|
||||||
}
|
|
||||||
.metallic-gold-gradient {
|
|
||||||
background: linear-gradient(135deg, #e9c176 0%, #c5a059 100%);
|
|
||||||
}
|
|
||||||
.status-led {
|
|
||||||
box-shadow: 0 0 8px currentColor;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
<body class="bg-background text-on-surface font-body-base min-h-screen flex">
|
|
||||||
<!-- Sidebar: Fixed, slim -->
|
|
||||||
<aside class="fixed left-0 top-0 h-full w-20 md:w-24 bg-surface-container-lowest border-r border-outline-variant/20 flex flex-col items-center py-stack-lg z-50">
|
|
||||||
<div class="mb-12">
|
|
||||||
<div class="w-12 h-12 metallic-gold-gradient flex items-center justify-center rounded-lg shadow-lg">
|
|
||||||
<span class="material-symbols-outlined text-on-primary text-3xl" style="font-variation-settings: 'FILL' 1;">cloud_done</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<nav class="flex flex-col gap-8 flex-1">
|
|
||||||
<button class="group flex flex-col items-center gap-1 text-primary">
|
|
||||||
<span class="material-symbols-outlined text-2xl transition-all duration-300 group-hover:scale-110" style="font-variation-settings: 'FILL' 1;">dashboard</span>
|
|
||||||
<span class="font-label-caps text-[8px] uppercase tracking-widest opacity-0 group-hover:opacity-100 transition-opacity">Panel</span>
|
|
||||||
</button>
|
|
||||||
<button class="group flex flex-col items-center gap-1 text-on-surface-variant hover:text-primary">
|
|
||||||
<span class="material-symbols-outlined text-2xl transition-all duration-300 group-hover:scale-110">group</span>
|
|
||||||
<span class="font-label-caps text-[8px] uppercase tracking-widest opacity-0 group-hover:opacity-100 transition-opacity">Users</span>
|
|
||||||
</button>
|
|
||||||
<button class="group flex flex-col items-center gap-1 text-on-surface-variant hover:text-primary">
|
|
||||||
<span class="material-symbols-outlined text-2xl transition-all duration-300 group-hover:scale-110">hourglass_empty</span>
|
|
||||||
<span class="font-label-caps text-[8px] uppercase tracking-widest opacity-0 group-hover:opacity-100 transition-opacity">Pending</span>
|
|
||||||
</button>
|
|
||||||
<button class="group flex flex-col items-center gap-1 text-on-surface-variant hover:text-primary">
|
|
||||||
<span class="material-symbols-outlined text-2xl transition-all duration-300 group-hover:scale-110">check_circle</span>
|
|
||||||
<span class="font-label-caps text-[8px] uppercase tracking-widest opacity-0 group-hover:opacity-100 transition-opacity">Approved</span>
|
|
||||||
</button>
|
|
||||||
<button class="group flex flex-col items-center gap-1 text-on-surface-variant hover:text-primary">
|
|
||||||
<span class="material-symbols-outlined text-2xl transition-all duration-300 group-hover:scale-110">cancel</span>
|
|
||||||
<span class="font-label-caps text-[8px] uppercase tracking-widest opacity-0 group-hover:opacity-100 transition-opacity">Rejected</span>
|
|
||||||
</button>
|
|
||||||
</nav>
|
|
||||||
<button class="group flex flex-col items-center gap-1 text-on-surface-variant hover:text-primary">
|
|
||||||
<span class="material-symbols-outlined text-2xl transition-all duration-300 group-hover:rotate-45">settings</span>
|
|
||||||
<span class="font-label-caps text-[8px] uppercase tracking-widest">Settings</span>
|
|
||||||
</button>
|
|
||||||
</aside>
|
|
||||||
<!-- Main Content Wrapper -->
|
|
||||||
<div class="flex-1 ml-20 md:ml-24 flex flex-col">
|
|
||||||
<!-- Header: Sticky Glass Panel -->
|
|
||||||
<header class="sticky top-0 w-full z-40 glass-panel py-4 px-gutter flex items-center justify-between border-b border-outline-variant/10">
|
|
||||||
<div class="flex items-center gap-4">
|
|
||||||
<div class="hidden md:block">
|
|
||||||
<h1 class="font-display-lg text-title-sm text-primary uppercase tracking-tighter">Admin Console</h1>
|
|
||||||
<p class="font-label-caps text-on-surface-variant text-[10px]">IPv6 SUMMIT 2026 / Infrastructure Core</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="flex-1 max-w-xl mx-8">
|
|
||||||
<div class="relative group">
|
|
||||||
<span class="material-symbols-outlined absolute left-4 top-1/2 -translate-y-1/2 text-outline">search</span>
|
|
||||||
<input class="w-full bg-surface-container-low border-none rounded-full py-2.5 pl-12 pr-4 text-body-base text-on-surface focus:ring-1 focus:ring-primary/30 gold-border-focus transition-all" placeholder="Command Search (e.g. attendee name or company)" type="text"/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-6">
|
|
||||||
<div class="flex flex-col items-end hidden lg:flex">
|
|
||||||
<span class="font-title-sm text-sm text-on-surface">Director Chen</span>
|
|
||||||
<span class="font-label-caps text-[10px] text-primary">Systems Admin</span>
|
|
||||||
</div>
|
|
||||||
<div class="w-10 h-10 rounded-full border border-primary/40 p-0.5 overflow-hidden">
|
|
||||||
<img alt="Admin Profile" class="w-full h-full object-cover rounded-full bg-surface-container-high" data-alt="A professional, high-resolution portrait illustration of a tech executive. The person has a modern, minimalist appearance with subtle glowing cybernetic highlights. The background is a soft, dark gray charcoal with elegant gold lighting accents to match a premium high-tech UI theme." src="https://lh3.googleusercontent.com/aida-public/AB6AXuBL5I0HI-Q2dFLcJYnL30VBYPbnA_kiLY4AfC84YxaO3pOwYn3wVHKoCU78x037a47B6SVaLtkXaIWkgeNJl1Y3ymDBWGzVq_jey8olRQvKfUfRl4coRUe5NennfYDf2SnyPHxmWjXzEeE1yE_sbWQNv0HBLWeKXMBzx7NEzdjO9ZgCKQe7LHIV7HP3kfyw_V7rKNwPwCRUi0Za5P6-cOn6yvMOb-rbOu_dNJymmqL_lGFYtJG9rfaracohIUqfdQRfWiD9ZQZhaDKO"/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</header>
|
|
||||||
<!-- Main Dashboard Canvas -->
|
|
||||||
<main class="p-gutter max-w-7xl mx-auto w-full flex flex-col gap-stack-lg">
|
|
||||||
<!-- Top Stat Cards -->
|
|
||||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-gutter">
|
|
||||||
<!-- Total -->
|
|
||||||
<div class="glass-panel p-6 rounded-xl relative overflow-hidden group">
|
|
||||||
<div class="absolute top-0 right-0 p-4 opacity-10 group-hover:opacity-20 transition-opacity">
|
|
||||||
<span class="material-symbols-outlined text-6xl">database</span>
|
|
||||||
</div>
|
|
||||||
<p class="font-label-caps text-on-surface-variant mb-2">Total Requests</p>
|
|
||||||
<h3 class="font-display-lg text-headline-md text-on-surface">1,284</h3>
|
|
||||||
<div class="mt-4 flex items-center gap-2">
|
|
||||||
<span class="text-xs text-primary">+12% vs last week</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- Pending -->
|
|
||||||
<div class="glass-panel p-6 rounded-xl relative overflow-hidden border-l-4 border-secondary group">
|
|
||||||
<p class="font-label-caps text-secondary mb-2 flex items-center gap-2">
|
|
||||||
<span class="status-led w-2 h-2 rounded-full bg-secondary"></span>
|
|
||||||
Pending Approval
|
|
||||||
</p>
|
|
||||||
<h3 class="font-display-lg text-headline-md text-on-surface">42</h3>
|
|
||||||
<div class="mt-4 flex items-center gap-2">
|
|
||||||
<span class="text-xs text-secondary-fixed">Critical threshold: 50</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- Confirmed -->
|
|
||||||
<div class="glass-panel p-6 rounded-xl relative overflow-hidden border-l-4 border-primary group">
|
|
||||||
<p class="font-label-caps text-primary mb-2 flex items-center gap-2">
|
|
||||||
<span class="status-led w-2 h-2 rounded-full bg-primary"></span>
|
|
||||||
Confirmed
|
|
||||||
</p>
|
|
||||||
<h3 class="font-display-lg text-headline-md text-on-surface">856</h3>
|
|
||||||
<div class="mt-4 flex items-center gap-2">
|
|
||||||
<span class="text-xs text-primary-fixed-dim">Capacity at 74%</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- Conversion -->
|
|
||||||
<div class="glass-panel p-6 rounded-xl relative overflow-hidden group">
|
|
||||||
<p class="font-label-caps text-on-surface-variant mb-2">Conversion Rate</p>
|
|
||||||
<h3 class="font-display-lg text-headline-md text-on-surface">67%</h3>
|
|
||||||
<div class="mt-4 w-full bg-surface-container-high h-1.5 rounded-full overflow-hidden">
|
|
||||||
<div class="h-full metallic-gold-gradient w-2/3"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- Filter Bar -->
|
|
||||||
<section class="glass-panel px-6 py-4 rounded-xl flex flex-col lg:flex-row items-center justify-between gap-stack-md">
|
|
||||||
<div class="flex flex-wrap items-center gap-4 w-full lg:w-auto">
|
|
||||||
<div class="flex flex-col gap-1">
|
|
||||||
<label class="font-label-caps text-[10px] text-outline">Status</label>
|
|
||||||
<select class="bg-surface-container border border-outline-variant/30 text-on-surface text-sm rounded-lg px-3 py-1.5 focus:ring-primary/50 focus:border-primary">
|
|
||||||
<option>All Operations</option>
|
|
||||||
<option>Pending</option>
|
|
||||||
<option>Approved</option>
|
|
||||||
<option>Rejected</option>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
<div class="flex flex-col gap-1">
|
|
||||||
<label class="font-label-caps text-[10px] text-outline">Company</label>
|
|
||||||
<select class="bg-surface-container border border-outline-variant/30 text-on-surface text-sm rounded-lg px-3 py-1.5 focus:ring-primary/50 focus:border-primary">
|
|
||||||
<option>Global Tier 1</option>
|
|
||||||
<option>Cloud Providers</option>
|
|
||||||
<option>Enterprise</option>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
<div class="flex flex-col gap-1">
|
|
||||||
<label class="font-label-caps text-[10px] text-outline">Timeframe</label>
|
|
||||||
<input class="bg-surface-container border border-outline-variant/30 text-on-surface text-sm rounded-lg px-3 py-1.5" type="date"/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<button class="w-full lg:w-auto border border-primary text-primary font-label-caps px-6 py-2 rounded transition-all hover:bg-primary hover:text-on-primary flex items-center justify-center gap-2">
|
|
||||||
<span class="material-symbols-outlined text-sm">download</span>
|
|
||||||
Export to Excel
|
|
||||||
</button>
|
|
||||||
</section>
|
|
||||||
<!-- Data Table -->
|
|
||||||
<div class="glass-panel rounded-xl overflow-hidden shadow-2xl">
|
|
||||||
<div class="overflow-x-auto">
|
|
||||||
<table class="w-full text-left border-collapse">
|
|
||||||
<thead>
|
|
||||||
<tr class="bg-surface-container border-b border-outline-variant/20">
|
|
||||||
<th class="px-6 py-4 font-label-caps text-outline text-[11px] uppercase tracking-widest">ID</th>
|
|
||||||
<th class="px-6 py-4 font-label-caps text-outline text-[11px] uppercase tracking-widest">Submit Date</th>
|
|
||||||
<th class="px-6 py-4 font-label-caps text-outline text-[11px] uppercase tracking-widest">Name</th>
|
|
||||||
<th class="px-6 py-4 font-label-caps text-outline text-[11px] uppercase tracking-widest">Company</th>
|
|
||||||
<th class="px-6 py-4 font-label-caps text-outline text-[11px] uppercase tracking-widest">Email / Phone</th>
|
|
||||||
<th class="px-6 py-4 font-label-caps text-outline text-[11px] uppercase tracking-widest">Status</th>
|
|
||||||
<th class="px-6 py-4 font-label-caps text-outline text-[11px] uppercase tracking-widest text-right">Actions</th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tbody class="divide-y divide-outline-variant/10">
|
|
||||||
<!-- Row 1 -->
|
|
||||||
<tr class="hover:bg-surface-container-high/40 transition-colors">
|
|
||||||
<td class="px-6 py-4 font-mono text-sm text-primary">#V6-4821</td>
|
|
||||||
<td class="px-6 py-4 text-sm text-on-surface-variant">24 OCT 2025</td>
|
|
||||||
<td class="px-6 py-4">
|
|
||||||
<div class="font-title-sm text-sm">Elena Rodriguez</div>
|
|
||||||
<div class="text-xs text-outline">Network Architect</div>
|
|
||||||
</td>
|
|
||||||
<td class="px-6 py-4 text-sm">Cloudflare, Inc.</td>
|
|
||||||
<td class="px-6 py-4">
|
|
||||||
<div class="text-sm">e.rodriguez@cloudflare.com</div>
|
|
||||||
<div class="text-xs text-outline">+1 (555) 012-9988</div>
|
|
||||||
</td>
|
|
||||||
<td class="px-6 py-4">
|
|
||||||
<span class="px-3 py-1 rounded-full text-[10px] font-label-caps border border-primary text-primary bg-primary/10 flex items-center gap-1.5 w-fit">
|
|
||||||
<span class="w-1.5 h-1.5 rounded-full bg-primary status-led"></span>
|
|
||||||
Approved
|
|
||||||
</span>
|
|
||||||
</td>
|
|
||||||
<td class="px-6 py-4 text-right">
|
|
||||||
<div class="flex items-center justify-end gap-2">
|
|
||||||
<button class="p-2 rounded-lg hover:bg-surface-container-highest text-on-surface-variant hover:text-on-surface transition-all">
|
|
||||||
<span class="material-symbols-outlined text-lg">visibility</span>
|
|
||||||
</button>
|
|
||||||
<button class="p-2 rounded-lg hover:bg-primary/20 text-primary transition-all">
|
|
||||||
<span class="material-symbols-outlined text-lg">edit</span>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
<!-- Row 2 -->
|
|
||||||
<tr class="hover:bg-surface-container-high/40 transition-colors">
|
|
||||||
<td class="px-6 py-4 font-mono text-sm text-primary">#V6-4819</td>
|
|
||||||
<td class="px-6 py-4 text-sm text-on-surface-variant">23 OCT 2025</td>
|
|
||||||
<td class="px-6 py-4">
|
|
||||||
<div class="font-title-sm text-sm">Marcus Thorne</div>
|
|
||||||
<div class="text-xs text-outline">Senior Devops</div>
|
|
||||||
</td>
|
|
||||||
<td class="px-6 py-4 text-sm">Akamai Technologies</td>
|
|
||||||
<td class="px-6 py-4">
|
|
||||||
<div class="text-sm">m.thorne@akamai.io</div>
|
|
||||||
<div class="text-xs text-outline">+44 20 7946 0123</div>
|
|
||||||
</td>
|
|
||||||
<td class="px-6 py-4">
|
|
||||||
<span class="px-3 py-1 rounded-full text-[10px] font-label-caps border border-secondary text-secondary bg-secondary/10 flex items-center gap-1.5 w-fit">
|
|
||||||
<span class="w-1.5 h-1.5 rounded-full bg-secondary status-led"></span>
|
|
||||||
Pending
|
|
||||||
</span>
|
|
||||||
</td>
|
|
||||||
<td class="px-6 py-4 text-right">
|
|
||||||
<div class="flex items-center justify-end gap-2">
|
|
||||||
<button class="p-2 rounded-lg hover:bg-surface-container-highest text-on-surface-variant hover:text-on-surface">
|
|
||||||
<span class="material-symbols-outlined text-lg">visibility</span>
|
|
||||||
</button>
|
|
||||||
<button class="p-2 rounded-lg hover:bg-primary text-on-primary" title="Approve">
|
|
||||||
<span class="material-symbols-outlined text-lg" style="font-variation-settings: 'FILL' 1;">check</span>
|
|
||||||
</button>
|
|
||||||
<button class="p-2 rounded-lg hover:bg-error/20 text-error" title="Reject">
|
|
||||||
<span class="material-symbols-outlined text-lg">close</span>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
<!-- Row 3 -->
|
|
||||||
<tr class="hover:bg-surface-container-high/40 transition-colors">
|
|
||||||
<td class="px-6 py-4 font-mono text-sm text-primary">#V6-4790</td>
|
|
||||||
<td class="px-6 py-4 text-sm text-on-surface-variant">22 OCT 2025</td>
|
|
||||||
<td class="px-6 py-4">
|
|
||||||
<div class="font-title-sm text-sm">Kenji Yamamoto</div>
|
|
||||||
<div class="text-xs text-outline">CTO</div>
|
|
||||||
</td>
|
|
||||||
<td class="px-6 py-4 text-sm">NTT Data Japan</td>
|
|
||||||
<td class="px-6 py-4">
|
|
||||||
<div class="text-sm">yamamoto@ntt.jp</div>
|
|
||||||
<div class="text-xs text-outline">+81 3 1234 5678</div>
|
|
||||||
</td>
|
|
||||||
<td class="px-6 py-4">
|
|
||||||
<span class="px-3 py-1 rounded-full text-[10px] font-label-caps border border-error text-error bg-error/10 flex items-center gap-1.5 w-fit">
|
|
||||||
<span class="w-1.5 h-1.5 rounded-full bg-error status-led"></span>
|
|
||||||
Rejected
|
|
||||||
</span>
|
|
||||||
</td>
|
|
||||||
<td class="px-6 py-4 text-right">
|
|
||||||
<div class="flex items-center justify-end gap-2">
|
|
||||||
<button class="p-2 rounded-lg hover:bg-surface-container-highest text-on-surface-variant hover:text-on-surface">
|
|
||||||
<span class="material-symbols-outlined text-lg">visibility</span>
|
|
||||||
</button>
|
|
||||||
<button class="p-2 rounded-lg hover:bg-surface-container-highest text-on-surface-variant">
|
|
||||||
<span class="material-symbols-outlined text-lg">history</span>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
</div>
|
|
||||||
<!-- Pagination -->
|
|
||||||
<div class="px-6 py-4 border-t border-outline-variant/10 flex items-center justify-between">
|
|
||||||
<p class="text-xs text-outline">Showing 1 to 10 of 1,284 entries</p>
|
|
||||||
<div class="flex items-center gap-2">
|
|
||||||
<button class="w-8 h-8 flex items-center justify-center rounded border border-outline-variant/30 text-outline hover:border-primary hover:text-primary transition-all">
|
|
||||||
<span class="material-symbols-outlined text-sm">chevron_left</span>
|
|
||||||
</button>
|
|
||||||
<button class="w-8 h-8 flex items-center justify-center rounded bg-primary text-on-primary text-xs font-bold">1</button>
|
|
||||||
<button class="w-8 h-8 flex items-center justify-center rounded border border-outline-variant/30 text-on-surface-variant hover:border-primary hover:text-primary transition-all text-xs">2</button>
|
|
||||||
<button class="w-8 h-8 flex items-center justify-center rounded border border-outline-variant/30 text-on-surface-variant hover:border-primary hover:text-primary transition-all text-xs">3</button>
|
|
||||||
<button class="w-8 h-8 flex items-center justify-center rounded border border-outline-variant/30 text-outline hover:border-primary hover:text-primary transition-all">
|
|
||||||
<span class="material-symbols-outlined text-sm">chevron_right</span>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</main>
|
|
||||||
<!-- Footer -->
|
|
||||||
<footer class="mt-auto border-t border-outline-variant/20 py-8 px-gutter flex flex-col md:flex-row items-center justify-between gap-4">
|
|
||||||
<div class="flex items-center gap-4">
|
|
||||||
<span class="font-headline-md text-sm text-primary uppercase">IPv6 SUMMIT 2026</span>
|
|
||||||
<span class="text-xs text-outline">| Systems Infrastructure Core v2.4.0</span>
|
|
||||||
</div>
|
|
||||||
<p class="text-[11px] font-label-caps text-outline tracking-widest">© 2026 IPv6 for AI & Data Centre Summit. Infrastructure for the Future.</p>
|
|
||||||
<div class="flex items-center gap-6">
|
|
||||||
<a class="text-[10px] font-label-caps text-on-surface-variant hover:text-primary transition-colors" href="#">Privacy</a>
|
|
||||||
<a class="text-[10px] font-label-caps text-on-surface-variant hover:text-primary transition-colors" href="#">Terms</a>
|
|
||||||
<a class="text-[10px] font-label-caps text-on-surface-variant hover:text-primary transition-colors" href="#">Support</a>
|
|
||||||
</div>
|
|
||||||
</footer>
|
|
||||||
</div>
|
|
||||||
<!-- Background Decorative Glows -->
|
|
||||||
<div class="fixed top-[-10%] left-[-10%] w-[40%] h-[40%] bg-primary/5 blur-[120px] rounded-full -z-10"></div>
|
|
||||||
<div class="fixed bottom-[-10%] right-[-10%] w-[30%] h-[30%] bg-secondary/5 blur-[100px] rounded-full -z-10"></div>
|
|
||||||
</body></html>
|
|
||||||
-357
@@ -1,357 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
|
|
||||||
<html class="dark" lang="en"><head>
|
|
||||||
<meta charset="utf-8"/>
|
|
||||||
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
|
||||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Space+Grotesk:wght@600;700&family=Geist:wght@600&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"/>
|
|
||||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
|
||||||
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
|
||||||
<script id="tailwind-config">
|
|
||||||
tailwind.config = {
|
|
||||||
darkMode: "class",
|
|
||||||
theme: {
|
|
||||||
extend: {
|
|
||||||
"colors": {
|
|
||||||
"surface-tint": "#e9c176",
|
|
||||||
"on-secondary-container": "#d9b27c",
|
|
||||||
"surface-container-low": "#1c1b1b",
|
|
||||||
"primary-fixed-dim": "#e9c176",
|
|
||||||
"primary": "#e9c176",
|
|
||||||
"on-background": "#e5e2e1",
|
|
||||||
"surface-bright": "#3a3939",
|
|
||||||
"on-tertiary-fixed": "#1c1b20",
|
|
||||||
"tertiary-fixed-dim": "#c9c5cc",
|
|
||||||
"surface-container": "#201f1f",
|
|
||||||
"on-secondary-fixed-variant": "#5d4216",
|
|
||||||
"outline-variant": "#4e4639",
|
|
||||||
"on-secondary-fixed": "#291800",
|
|
||||||
"secondary-container": "#604418",
|
|
||||||
"secondary": "#e9c088",
|
|
||||||
"surface-container-lowest": "#0e0e0e",
|
|
||||||
"error": "#ffb4ab",
|
|
||||||
"error-container": "#93000a",
|
|
||||||
"on-error-container": "#ffdad6",
|
|
||||||
"inverse-primary": "#775a19",
|
|
||||||
"tertiary-container": "#a7a4ab",
|
|
||||||
"on-tertiary-fixed-variant": "#48464c",
|
|
||||||
"on-surface": "#e5e2e1",
|
|
||||||
"inverse-on-surface": "#313030",
|
|
||||||
"primary-container": "#c5a059",
|
|
||||||
"surface-container-high": "#2a2a2a",
|
|
||||||
"primary-fixed": "#ffdea5",
|
|
||||||
"secondary-fixed-dim": "#e9c088",
|
|
||||||
"on-tertiary": "#313035",
|
|
||||||
"surface": "#131313",
|
|
||||||
"secondary-fixed": "#ffddb2",
|
|
||||||
"background": "#131313",
|
|
||||||
"surface-container-highest": "#353534",
|
|
||||||
"tertiary": "#c9c5cc",
|
|
||||||
"on-primary": "#412d00",
|
|
||||||
"on-secondary": "#442b02",
|
|
||||||
"inverse-surface": "#e5e2e1",
|
|
||||||
"on-primary-container": "#4e3700",
|
|
||||||
"tertiary-fixed": "#e5e1e8",
|
|
||||||
"outline": "#9a8f80",
|
|
||||||
"on-surface-variant": "#d1c5b4",
|
|
||||||
"on-primary-fixed": "#261900",
|
|
||||||
"on-tertiary-container": "#3c3a40",
|
|
||||||
"on-primary-fixed-variant": "#5d4201",
|
|
||||||
"surface-dim": "#131313",
|
|
||||||
"surface-variant": "#353534",
|
|
||||||
"on-error": "#690005"
|
|
||||||
},
|
|
||||||
"borderRadius": {
|
|
||||||
"DEFAULT": "0.125rem",
|
|
||||||
"lg": "0.25rem",
|
|
||||||
"xl": "0.5rem",
|
|
||||||
"full": "0.75rem"
|
|
||||||
},
|
|
||||||
"spacing": {
|
|
||||||
"stack-lg": "32px",
|
|
||||||
"unit": "4px",
|
|
||||||
"stack-sm": "8px",
|
|
||||||
"margin-safe": "40px",
|
|
||||||
"stack-md": "16px",
|
|
||||||
"section-gap": "80px",
|
|
||||||
"gutter": "24px"
|
|
||||||
},
|
|
||||||
"fontFamily": {
|
|
||||||
"body-base": ["Inter"],
|
|
||||||
"display-lg": ["Space Grotesk"],
|
|
||||||
"title-sm": ["Inter"],
|
|
||||||
"label-caps": ["Geist"],
|
|
||||||
"headline-md": ["Space Grotesk"]
|
|
||||||
},
|
|
||||||
"fontSize": {
|
|
||||||
"body-base": ["16px", {"lineHeight": "1.6", "letterSpacing": "0", "fontWeight": "400"}],
|
|
||||||
"display-lg": ["48px", {"lineHeight": "1.1", "letterSpacing": "-0.02em", "fontWeight": "700"}],
|
|
||||||
"title-sm": ["20px", {"lineHeight": "1.4", "letterSpacing": "0.02em", "fontWeight": "600"}],
|
|
||||||
"label-caps": ["12px", {"lineHeight": "1", "letterSpacing": "0.1em", "fontWeight": "600"}],
|
|
||||||
"headline-md": ["32px", {"lineHeight": "1.2", "letterSpacing": "-0.01em", "fontWeight": "600"}]
|
|
||||||
}
|
|
||||||
},
|
|
||||||
},
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
<style>
|
|
||||||
.gold-gradient-bg {
|
|
||||||
background: linear-gradient(135deg, #e9c176 0%, #775a19 100%);
|
|
||||||
}
|
|
||||||
.hero-glow {
|
|
||||||
background: radial-gradient(circle at 50% 50%, rgba(233, 193, 118, 0.15) 0%, rgba(15, 15, 15, 0) 70%);
|
|
||||||
}
|
|
||||||
.glass-panel {
|
|
||||||
background: rgba(26, 25, 30, 0.8);
|
|
||||||
backdrop-filter: blur(20px);
|
|
||||||
border: 1px solid rgba(255, 255, 255, 0.05);
|
|
||||||
}
|
|
||||||
.input-focus-gold:focus {
|
|
||||||
outline: none;
|
|
||||||
border-color: #e9c176;
|
|
||||||
box-shadow: 0 0 0 1px #e9c176;
|
|
||||||
}
|
|
||||||
.material-symbols-outlined {
|
|
||||||
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
<body class="bg-background text-on-background font-body-base overflow-x-hidden">
|
|
||||||
<!-- TopNavBar -->
|
|
||||||
<header class="fixed top-0 w-full z-50 bg-surface-glass backdrop-blur-md border-b border-border-subtle">
|
|
||||||
<div class="flex justify-between items-center w-full px-gutter py-4 max-w-container-max mx-auto">
|
|
||||||
<div class="font-h1 text-[24px] font-bold text-on-surface tracking-tighter uppercase">
|
|
||||||
<span class="text-primary">IPv6 SUMMIT 2026</span>
|
|
||||||
</div>
|
|
||||||
<nav class="hidden md:flex gap-stack-md items-center">
|
|
||||||
<a class="text-on-surface-variant font-medium hover:text-secondary-fixed transition-colors duration-300 font-label-caps text-label-caps uppercase" href="#">Agenda</a>
|
|
||||||
<a class="text-on-surface-variant font-medium hover:text-secondary-fixed transition-colors duration-300 font-label-caps text-label-caps uppercase" href="#">Speakers</a>
|
|
||||||
<a class="text-on-surface-variant font-medium hover:text-secondary-fixed transition-colors duration-300 font-label-caps text-label-caps uppercase" href="#">Stats</a>
|
|
||||||
<a class="text-on-surface-variant font-medium hover:text-secondary-fixed transition-colors duration-300 font-label-caps text-label-caps uppercase" href="#">Venue</a>
|
|
||||||
</nav>
|
|
||||||
<div class="flex gap-stack-sm items-center">
|
|
||||||
<span class="text-on-surface-variant font-label-caps text-label-caps mr-4 cursor-pointer"><br/></span>
|
|
||||||
<button class="gold-gradient-bg text-on-primary px-6 py-2 rounded-lg font-label-caps text-label-caps uppercase hover:scale-95 transition-all duration-200">Register</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</header>
|
|
||||||
<!-- Main Content & Hero Area -->
|
|
||||||
<main class="relative min-h-screen pt-32 pb-section-gap">
|
|
||||||
<!-- Background Hero Glow -->
|
|
||||||
<div class="absolute top-0 left-1/2 -translate-x-1/2 w-full h-[800px] hero-glow pointer-events-none -z-10"></div>
|
|
||||||
<div class="max-w-[800px] mx-auto px-gutter">
|
|
||||||
<!-- Header Title -->
|
|
||||||
<div class="text-center mb-section-gap">
|
|
||||||
<h1 class="font-display-lg text-[72px] leading-tight font-bold tracking-tighter mb-4 text-primary">Event Feedback</h1>
|
|
||||||
<p class="text-on-surface-variant text-title-sm font-title-sm max-w-2xl mx-auto">
|
|
||||||
Your insights drive the future of IPv6 infrastructure. Help us shape the 2027 experience.
|
|
||||||
<br/><br/></p>
|
|
||||||
</div>
|
|
||||||
<!-- Feedback Form -->
|
|
||||||
<form class="glass-panel p-stack-lg rounded-xl space-y-section-gap relative overflow-hidden">
|
|
||||||
<!-- Section 1: General Satisfaction -->
|
|
||||||
<section class="space-y-stack-lg">
|
|
||||||
<div class="border-l-2 border-primary pl-4">
|
|
||||||
<h2 class="font-headline-md text-headline-md text-on-surface mb-1 uppercase tracking-tight">1. GENERAL SATISFACTION</h2>
|
|
||||||
</div>
|
|
||||||
<div class="space-y-stack-md">
|
|
||||||
<label class="block font-label-caps text-label-caps text-primary uppercase">Overall Event Rating</label>
|
|
||||||
<div class="flex justify-between items-center gap-stack-sm max-w-md">
|
|
||||||
<span class="text-body-sm opacity-50">Poor</span>
|
|
||||||
<div class="flex gap-4">
|
|
||||||
<label class="cursor-pointer group">Overall Event Rating</label>
|
|
||||||
<label class="cursor-pointer group">
|
|
||||||
<input class="hidden peer" name="event-rating" type="radio" value="2"/>
|
|
||||||
<div class="w-12 h-12 flex items-center justify-center border border-white/10 rounded peer-checked:bg-primary peer-checked:text-on-primary hover:border-primary transition-all">2</div>
|
|
||||||
</label>
|
|
||||||
<label class="cursor-pointer group">
|
|
||||||
<input class="hidden peer" name="event-rating" type="radio" value="3"/>
|
|
||||||
<div class="w-12 h-12 flex items-center justify-center border border-white/10 rounded peer-checked:bg-primary peer-checked:text-on-primary hover:border-primary transition-all">3</div>
|
|
||||||
</label>
|
|
||||||
<label class="cursor-pointer group">
|
|
||||||
<input class="hidden peer" name="event-rating" type="radio" value="4"/>
|
|
||||||
<div class="w-12 h-12 flex items-center justify-center border border-white/10 rounded peer-checked:bg-primary peer-checked:text-on-primary hover:border-primary transition-all">4</div>
|
|
||||||
</label>
|
|
||||||
<label class="cursor-pointer group">
|
|
||||||
<input class="hidden peer" name="event-rating" type="radio" value="5"/>
|
|
||||||
<div class="w-12 h-12 flex items-center justify-center border border-white/10 rounded peer-checked:bg-primary peer-checked:text-on-primary hover:border-primary transition-all">5</div>
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
<span class="text-body-sm opacity-50">Excellent</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="space-y-stack-md">
|
|
||||||
<label class="block font-label-caps text-label-caps text-primary uppercase">Overall Event Rating</label>
|
|
||||||
<div class="flex justify-between items-center gap-stack-sm max-w-md">
|
|
||||||
<span class="text-body-sm opacity-50">Dissatisfied</span>
|
|
||||||
<div class="flex gap-4">
|
|
||||||
<label class="cursor-pointer group">Overall Event Rating</label>
|
|
||||||
<label class="cursor-pointer group">
|
|
||||||
<input class="hidden peer" name="venue-rating" type="radio" value="2"/>
|
|
||||||
<div class="w-12 h-12 flex items-center justify-center border border-white/10 rounded peer-checked:bg-primary peer-checked:text-on-primary hover:border-primary transition-all">2</div>
|
|
||||||
</label>
|
|
||||||
<label class="cursor-pointer group">
|
|
||||||
<input class="hidden peer" name="venue-rating" type="radio" value="3"/>
|
|
||||||
<div class="w-12 h-12 flex items-center justify-center border border-white/10 rounded peer-checked:bg-primary peer-checked:text-on-primary hover:border-primary transition-all">3</div>
|
|
||||||
</label>
|
|
||||||
<label class="cursor-pointer group">
|
|
||||||
<input class="hidden peer" name="venue-rating" type="radio" value="4"/>
|
|
||||||
<div class="w-12 h-12 flex items-center justify-center border border-white/10 rounded peer-checked:bg-primary peer-checked:text-on-primary hover:border-primary transition-all">4</div>
|
|
||||||
</label>
|
|
||||||
<label class="cursor-pointer group">
|
|
||||||
<input class="hidden peer" name="venue-rating" type="radio" value="5"/>
|
|
||||||
<div class="w-12 h-12 flex items-center justify-center border border-white/10 rounded peer-checked:bg-primary peer-checked:text-on-primary hover:border-primary transition-all">5</div>
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
<span class="text-body-sm opacity-50">Very Satisfied</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
<!-- Section 2: Content Evaluation -->
|
|
||||||
<section class="space-y-stack-lg">
|
|
||||||
<div class="border-l-2 border-primary pl-4">
|
|
||||||
<h2 class="font-headline-md text-headline-md text-on-surface mb-1 uppercase tracking-tight">2. CONTENT EVALUATION</h2>
|
|
||||||
</div>
|
|
||||||
<div class="space-y-stack-md">
|
|
||||||
<label class="block font-label-caps text-label-caps text-primary uppercase">Most valuable session </label>
|
|
||||||
<select class="w-full bg-surface-container-low border border-white/10 rounded px-4 py-3 text-on-surface input-focus-gold appearance-none"><option value="">Select a session</option><option value="ai">AI in Data Centres</option><option value="green">Green Tech</option><option value="cyber">Cybersecurity</option><option value="policy">Policy & Scale</option><option value="local">Local Partner Session</option></select>
|
|
||||||
</div>
|
|
||||||
<div class="space-y-stack-md">
|
|
||||||
<label class="block font-label-caps text-label-caps text-primary uppercase">Keynote Speaker Rating </label>
|
|
||||||
<div class="flex justify-between items-center gap-stack-sm max-w-md">
|
|
||||||
<span class="text-body-sm opacity-50">Needs Improvement</span>
|
|
||||||
<div class="flex gap-4">
|
|
||||||
<label class="cursor-pointer group">
|
|
||||||
<input class="hidden peer" name="speaker-rating" type="radio" value="1"/>
|
|
||||||
<div class="w-12 h-12 flex items-center justify-center border border-white/10 rounded peer-checked:bg-primary peer-checked:text-on-primary hover:border-primary transition-all">1</div>
|
|
||||||
</label>
|
|
||||||
<label class="cursor-pointer group">
|
|
||||||
<input class="hidden peer" name="speaker-rating" type="radio" value="2"/>
|
|
||||||
<div class="w-12 h-12 flex items-center justify-center border border-white/10 rounded peer-checked:bg-primary peer-checked:text-on-primary hover:border-primary transition-all">2</div>
|
|
||||||
</label>
|
|
||||||
<label class="cursor-pointer group">
|
|
||||||
<input class="hidden peer" name="speaker-rating" type="radio" value="3"/>
|
|
||||||
<div class="w-12 h-12 flex items-center justify-center border border-white/10 rounded peer-checked:bg-primary peer-checked:text-on-primary hover:border-primary transition-all">3</div>
|
|
||||||
</label>
|
|
||||||
<label class="cursor-pointer group">
|
|
||||||
<input class="hidden peer" name="speaker-rating" type="radio" value="4"/>
|
|
||||||
<div class="w-12 h-12 flex items-center justify-center border border-white/10 rounded peer-checked:bg-primary peer-checked:text-on-primary hover:border-primary transition-all">4</div>
|
|
||||||
</label>
|
|
||||||
<label class="cursor-pointer group">
|
|
||||||
<input class="hidden peer" name="speaker-rating" type="radio" value="5"/>
|
|
||||||
<div class="w-12 h-12 flex items-center justify-center border border-white/10 rounded peer-checked:bg-primary peer-checked:text-on-primary hover:border-primary transition-all">5</div>
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
<span class="text-body-sm opacity-50">Exceptional</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
<!-- Section 3: Qualitative Feedback -->
|
|
||||||
<section class="space-y-stack-lg">
|
|
||||||
<div class="border-l-2 border-primary pl-4">
|
|
||||||
<h2 class="font-headline-md text-headline-md text-on-surface mb-1 uppercase tracking-tight">3. Qualitative Feedback</h2>
|
|
||||||
</div>
|
|
||||||
<div class="space-y-stack-md">
|
|
||||||
<label class="block font-label-caps text-label-caps text-primary uppercase">What can we improve for 2027? </label>
|
|
||||||
<textarea class="w-full bg-surface-container-low border border-white/10 rounded px-4 py-3 text-on-surface input-focus-gold resize-none" placeholder="Your suggestions for next year..." rows="4"></textarea>
|
|
||||||
</div>
|
|
||||||
<div class="space-y-stack-md">
|
|
||||||
<label class="block font-label-caps text-label-caps text-primary uppercase">General Comments </label>
|
|
||||||
<textarea class="w-full bg-surface-container-low border border-white/10 rounded px-4 py-3 text-on-surface input-focus-gold resize-none" placeholder="Any additional thoughts..." rows="3"></textarea>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
<!-- Submit Button Area -->
|
|
||||||
<!-- Section 4: Industry & Technical Insights -->
|
|
||||||
<section class="space-y-stack-lg">
|
|
||||||
<div class="border-l-2 border-primary pl-4">
|
|
||||||
<h2 class="font-headline-md text-headline-md text-on-surface mb-1 uppercase tracking-tight">4. INDUSTRY & TECHNICAL INSIGHTS</h2>
|
|
||||||
</div>
|
|
||||||
<div class="space-y-stack-md">
|
|
||||||
<label class="block font-label-caps text-label-caps text-primary uppercase">IPv6 Readiness</label>
|
|
||||||
<p class="text-on-surface-variant text-sm mb-2">Your organization's current IPv6 deployment level</p>
|
|
||||||
<div class="flex justify-between items-center gap-stack-sm max-w-md">
|
|
||||||
<span class="text-body-sm opacity-50">1</span>
|
|
||||||
<div class="flex gap-4">
|
|
||||||
<label class="cursor-pointer group">IPv6 Readiness</label>
|
|
||||||
<label class="cursor-pointer group">IPv6 Readiness</label>
|
|
||||||
<label class="cursor-pointer group">IPv6 Readiness</label>
|
|
||||||
<label class="cursor-pointer group">IPv6 Readiness</label>
|
|
||||||
<label class="cursor-pointer group">IPv6 Readiness</label>
|
|
||||||
</div>
|
|
||||||
<span class="text-body-sm opacity-50">5</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="space-y-stack-md">
|
|
||||||
<label class="block font-label-caps text-label-caps text-primary uppercase">Infrastructure Challenges</label>
|
|
||||||
<p class="text-on-surface-variant text-sm mb-2">What is the biggest challenge for your AI infrastructure?</p>
|
|
||||||
<select class="w-full bg-surface-container-low border border-white/10 rounded px-4 py-3 text-on-surface input-focus-gold appearance-none"><option value="">Select a challenge</option><option value="budget">Budget</option><option value="technical">Technical Expertise</option><option value="policy">Policy/Regulatory</option><option value="workforce">Workforce</option><option value="hardware">Hardware Availability</option></select>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
<!-- Section 5: Networking & Future Cooperation -->
|
|
||||||
<section class="space-y-stack-lg">
|
|
||||||
<div class="border-l-2 border-primary pl-4">
|
|
||||||
<h2 class="font-headline-md text-headline-md text-on-surface mb-1 uppercase tracking-tight">5. NETWORKING & FUTURE COOPERATION</h2>
|
|
||||||
</div>
|
|
||||||
<div class="space-y-stack-md">
|
|
||||||
<label class="block font-label-caps text-label-caps text-primary uppercase">Speaker Connection</label>
|
|
||||||
<p class="text-on-surface-variant text-sm mb-2">Are there any specific speakers or companies you wish to be introduced to?</p>
|
|
||||||
<input class="w-full bg-surface-container-low border border-white/10 rounded px-4 py-3 text-on-surface input-focus-gold" placeholder="Name of speaker or company..." type="text"/>
|
|
||||||
</div>
|
|
||||||
<div class="space-y-stack-md">
|
|
||||||
<label class="block font-label-caps text-label-caps text-primary uppercase">Collaboration Interests</label>
|
|
||||||
<p class="text-on-surface-variant text-sm mb-2">I am interested in:</p>
|
|
||||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
||||||
<label class="flex items-center gap-3 cursor-pointer group">Collaboration Interests</label>
|
|
||||||
<label class="flex items-center gap-3 cursor-pointer group">Collaboration Interests</label>
|
|
||||||
<label class="flex items-center gap-3 cursor-pointer group">Collaboration Interests</label>
|
|
||||||
<label class="flex items-center gap-3 cursor-pointer group">Collaboration Interests</label>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
<!-- Section 6: Logistics Feedback -->
|
|
||||||
<section class="space-y-stack-lg">
|
|
||||||
<div class="border-l-2 border-primary pl-4">
|
|
||||||
<h2 class="font-headline-md text-headline-md text-on-surface mb-1 uppercase tracking-tight">6. LOGISTICS FEEDBACK</h2>
|
|
||||||
</div>
|
|
||||||
<div class="space-y-stack-md">
|
|
||||||
<label class="block font-label-caps text-label-caps text-primary uppercase">Venue Rating</label>
|
|
||||||
<p class="text-on-surface-variant text-sm mb-2">Venue Facilities & Location (Ho Chi Minh City)</p>
|
|
||||||
<div class="flex justify-between items-center gap-stack-sm max-w-md">
|
|
||||||
<span class="text-body-sm opacity-50">Poor</span>
|
|
||||||
<div class="flex gap-4">
|
|
||||||
<label class="cursor-pointer group">Venue Rating</label>
|
|
||||||
<label class="cursor-pointer group">Venue Rating</label>
|
|
||||||
<label class="cursor-pointer group">Venue Rating</label>
|
|
||||||
<label class="cursor-pointer group">Venue Rating</label>
|
|
||||||
<label class="cursor-pointer group">Venue Rating</label>
|
|
||||||
</div>
|
|
||||||
<span class="text-body-sm opacity-50">Excellent</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section><div class="pt-stack-lg border-t border-white/5 flex flex-col items-center gap-4">
|
|
||||||
<button class="gold-gradient-bg text-on-primary w-full md:w-auto px-12 py-4 rounded-lg font-headline-md text-[18px] uppercase tracking-wider hover:shadow-[0_0_20px_rgba(233,193,118,0.4)] transition-all duration-300 transform active:scale-95" type="submit">SUBMIT FEEDBACK</button>
|
|
||||||
<p class="text-on-surface-variant font-label-caps text-[10px] opacity-60 uppercase text-center">
|
|
||||||
Thank you for your valuable contribution to the IPv6 ecosystem.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
</div>
|
|
||||||
</main>
|
|
||||||
<!-- Footer -->
|
|
||||||
<footer class="w-full block border-t border-border-subtle bg-surface-container-lowest">
|
|
||||||
<div class="flex flex-col md:flex-row justify-between items-center px-gutter py-12 max-w-container-max mx-auto gap-stack-md">
|
|
||||||
<div class="flex flex-col gap-2">
|
|
||||||
<div class="font-h2 text-h2 text-primary uppercase font-bold tracking-tighter">IPv6 SUMMIT 2026</div>
|
|
||||||
<p class="font-body-sm text-body-sm text-text-slate opacity-70">
|
|
||||||
© 2026 IPv6 for AI & Data Centre Summit. Infrastructure for the Future.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div class="flex flex-wrap gap-stack-md justify-center">
|
|
||||||
<a class="text-text-slate font-label-caps text-label-caps uppercase hover:text-accent-orange transition-opacity duration-300" href="#">Privacy </a>
|
|
||||||
<a class="text-text-slate font-label-caps text-label-caps uppercase hover:text-accent-orange transition-opacity duration-300" href="#">Terms </a>
|
|
||||||
<a class="text-text-slate font-label-caps text-label-caps uppercase hover:text-accent-orange transition-opacity duration-300" href="#">Contact </a>
|
|
||||||
<a class="text-text-slate font-label-caps text-label-caps uppercase hover:text-accent-orange transition-opacity duration-300" href="#">Sponsorship </a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</footer>
|
|
||||||
</body></html>
|
|
||||||
@@ -1,290 +0,0 @@
|
|||||||
# Kế hoạch dự án IPV6 (Next.js App Router) — Tạo mới & Chuyển đổi từ HTML
|
|
||||||
|
|
||||||
## 1) Mục tiêu & phạm vi
|
|
||||||
|
|
||||||
- **Mục tiêu**: Tạo project frontend mới tên **IPV6** dựa trên “format sẵn” của codebase Next.js hiện tại, chuyển các trang HTML tĩnh sang Next.js (TypeScript/TSX), tách component, tách static data (JSON), và chuẩn hoá routing theo nghiệp vụ doanh nghiệp.
|
|
||||||
- **Phạm vi**: Frontend בלבד (chưa làm backend). Các API gọi ra ngoài/CMS (nếu có trong codebase cũ) sẽ **loại bỏ hoặc chuyển thành static JSON** cho đúng scope.
|
|
||||||
- **Yêu cầu chung**:
|
|
||||||
- **Ngôn ngữ UI mặc định**: English (có thể để song ngữ EN/VI như UI toggle, nhưng content/label phải chuẩn hoá).
|
|
||||||
- **Design system thống nhất**: màu sắc, font chữ, spacing, width/height chuẩn (không lệch giữa trang).
|
|
||||||
- **Responsive**: hiển thị tốt trên desktop/tablet/mobile, kiểm tra layout với các breakpoint phổ biến.
|
|
||||||
|
|
||||||
## 2) Hiện trạng codebase (để bám “format sẵn”)
|
|
||||||
|
|
||||||
- Đang dùng **Next.js App Router**: có thư mục `app/`.
|
|
||||||
- Có layout sẵn `app/layout.tsx` đang import CSS global và render `Header` + `Footer`.
|
|
||||||
- Có nhiều phần liên quan LAMS (metadata, service/api, pages/route cũ…).
|
|
||||||
- Các file HTML nguồn cho IPV6 đang nằm ở root:
|
|
||||||
- `test.html` (Trang chủ)
|
|
||||||
- `registration.html` (Form đăng ký)
|
|
||||||
- `feedback.html` (Form feedback)
|
|
||||||
- `sponsor.html` (Kêu gọi đóng góp)
|
|
||||||
- `admin.html` (Trang quản lý request — nội bộ coder)
|
|
||||||
|
|
||||||
## 3) Outcome mong muốn (cấu trúc thư mục đề xuất)
|
|
||||||
|
|
||||||
> Mục tiêu: rõ ràng, tách bạch component/page/data/styles; dễ maintain; đúng App Router.
|
|
||||||
|
|
||||||
Đề xuất skeleton (có thể điều chỉnh theo format hiện tại):
|
|
||||||
|
|
||||||
- `app/`
|
|
||||||
- `(site)/`
|
|
||||||
- `layout.tsx` (site shell: Header/Footer dùng cho public pages)
|
|
||||||
- `page.tsx` (**Home** từ `test.html`)
|
|
||||||
- `registration/page.tsx`
|
|
||||||
- `feedback/page.tsx`
|
|
||||||
- `sponsor/page.tsx`
|
|
||||||
- `(internal)/admin/`
|
|
||||||
- `page.tsx` (**Admin** từ `admin.html`, route group để tách nội bộ)
|
|
||||||
- `globals.css` (CSS global/tokens)
|
|
||||||
- `not-found.tsx` (tuỳ chọn)
|
|
||||||
- `app/components/`
|
|
||||||
- `layout/` (`Header`, `Footer`, `Container`, `Section`, `Nav`, …)
|
|
||||||
- `home/` (các section của home)
|
|
||||||
- `forms/` (shared form fields/validation UI)
|
|
||||||
- `ui/` (Button, Input, Card, Modal, Badge…)
|
|
||||||
- `app/data/` (static JSON)
|
|
||||||
- `site.json` (brand, links, footer)
|
|
||||||
- `home.json` (hero, agenda, speakers, stats, venue, …)
|
|
||||||
- `sponsor.json`
|
|
||||||
- `registration.json` (copy text, options)
|
|
||||||
- `feedback.json`
|
|
||||||
- `admin.json` (cột bảng, status mapping…)
|
|
||||||
- `public/`
|
|
||||||
- `assets/` (img/icons/fonts nếu có)
|
|
||||||
|
|
||||||
## 4) Quy ước routing (đảm bảo nghiệp vụ doanh nghiệp)
|
|
||||||
|
|
||||||
### 4.1 Public pages (khách truy cập)
|
|
||||||
|
|
||||||
- `/` → **Home** (từ `test.html`)
|
|
||||||
- `/registration` → **Registration form** (từ `registration.html`)
|
|
||||||
- `/feedback` → **Feedback form** (từ `feedback.html`)
|
|
||||||
- `/sponsor` → **Sponsor/Donate** (từ `sponsor.html`)
|
|
||||||
|
|
||||||
### 4.2 Internal pages (chỉ coder nội bộ)
|
|
||||||
|
|
||||||
- `/(internal)/admin` → **Admin request management** (từ `admin.html`)
|
|
||||||
- Yêu cầu “chỉ nội bộ”: vì không có backend, sẽ dùng **cơ chế chặn tối thiểu** (xem mục 9).
|
|
||||||
|
|
||||||
## 5) Chuyển đổi Component (HTML → TSX)
|
|
||||||
|
|
||||||
### 5.1 Nguyên tắc tách component
|
|
||||||
|
|
||||||
- Tách theo **layout shell** (Header/Footer) và theo **section** của từng page.
|
|
||||||
- Mỗi component:
|
|
||||||
- Props typed (TypeScript).
|
|
||||||
- Không hardcode text/data nếu có thể đưa vào JSON.
|
|
||||||
- Không nhúng `<script>` DOM manipulation kiểu HTML (sẽ chuyển sang state + event trong React).
|
|
||||||
|
|
||||||
### 5.2 Trang chủ — `test.html`
|
|
||||||
|
|
||||||
**Yêu cầu đặc biệt**: “Tách ra trang home riêng, header và footer có components được tách riêng”.
|
|
||||||
|
|
||||||
- Tạo `app/(site)/page.tsx` làm Home.
|
|
||||||
- Tách Header/Footer:
|
|
||||||
- `app/components/layout/Header/*`
|
|
||||||
- `app/components/layout/Footer/*`
|
|
||||||
- Tách các section của Home (đề xuất theo nội dung `test.html`):
|
|
||||||
- `HeroSection`
|
|
||||||
- `VisionGoalsSection`
|
|
||||||
- `StatsSection`
|
|
||||||
- `AgendaSection`
|
|
||||||
- `StakeholdersSection`
|
|
||||||
- `RegistrationCTASection` (nếu Home có form/CTA)
|
|
||||||
- (Nếu có `Speakers`, `Venue` trong HTML thì tách tương tự)
|
|
||||||
- Thay logic mobile menu:
|
|
||||||
- HTML đang dùng script toggle class `hidden` → chuyển sang `useState` và className theo state.
|
|
||||||
- Chuẩn hoá anchor navigation:
|
|
||||||
- Link `#agenda`, `#stats`, … giữ nguyên trong trang Home, đảm bảo scroll behavior trong CSS global.
|
|
||||||
|
|
||||||
### 5.3 Trang Registration — `registration.html`
|
|
||||||
|
|
||||||
- Tạo `app/(site)/registration/page.tsx`
|
|
||||||
- Tách:
|
|
||||||
- `RegistrationForm` (client component)
|
|
||||||
- Shared inputs: `TextField`, `SelectField`, `TextareaField`, `PhoneField`
|
|
||||||
- Form scope frontend-only:
|
|
||||||
- Submit tạm: `console.log` + toast/alert (hoặc disable submit) tuỳ yêu cầu.
|
|
||||||
- Chuẩn bị shape data để sau này nối backend.
|
|
||||||
|
|
||||||
### 5.4 Trang Feedback — `feedback.html`
|
|
||||||
|
|
||||||
- Tạo `app/(site)/feedback/page.tsx`
|
|
||||||
- Tách `FeedbackForm` tương tự Registration.
|
|
||||||
|
|
||||||
### 5.5 Trang Sponsor — `sponsor.html`
|
|
||||||
|
|
||||||
- Tạo `app/(site)/sponsor/page.tsx`
|
|
||||||
- Tách:
|
|
||||||
- `SponsorHero`
|
|
||||||
- `SponsorPackages`
|
|
||||||
- `SponsorCTA`
|
|
||||||
- `SponsorFAQ` (nếu có)
|
|
||||||
|
|
||||||
### 5.6 Trang Admin — `admin.html` (folder riêng)
|
|
||||||
|
|
||||||
- Tạo `app/(internal)/admin/page.tsx`
|
|
||||||
- Tách:
|
|
||||||
- `RequestsTable`
|
|
||||||
- `RequestFilters`
|
|
||||||
- `RequestDetailDrawer` (tuỳ)
|
|
||||||
- Vì chưa backend:
|
|
||||||
- Data bảng lấy từ `app/data/admin.json` (static).
|
|
||||||
- Chuẩn hoá model “Request”: id, createdAt, name, email, company, status…
|
|
||||||
|
|
||||||
## 6) JSON hoá static data (tách data ra file riêng)
|
|
||||||
|
|
||||||
### 6.1 Nguyên tắc
|
|
||||||
|
|
||||||
- Mọi text/cấu hình lặp lại (nav items, footer links, section headings, stats items, agenda items…) → đưa vào JSON.
|
|
||||||
- JSON đặt trong `app/data/` (hoặc `src/data/` nếu codebase đang dùng `src/`).
|
|
||||||
- Page/Component đọc JSON theo hướng server component:
|
|
||||||
- Page (server) import JSON → pass props xuống components.
|
|
||||||
- Form components là client, chỉ nhận props cần thiết.
|
|
||||||
|
|
||||||
### 6.2 Danh mục data đề xuất
|
|
||||||
|
|
||||||
- `site.json`: brandName, navLinks, footerLinks, social, legal, languages…
|
|
||||||
- `home.json`: hero, vision, stats, agenda, stakeholders, venue, contact…
|
|
||||||
- `registration.json`: copy + options.
|
|
||||||
- `feedback.json`: copy + categories.
|
|
||||||
- `sponsor.json`: tiers/packages + benefits.
|
|
||||||
- `admin.json`: columns + seed rows + status label/color mapping.
|
|
||||||
|
|
||||||
## 7) Styling — CSS chung & thống nhất design system
|
|
||||||
|
|
||||||
### 7.1 Quyết định kỹ thuật (theo codebase hiện tại)
|
|
||||||
|
|
||||||
Codebase hiện có:
|
|
||||||
- Đang import `./globals.css` và có pipeline SCSS build sang `public/assets/css/main.css`.
|
|
||||||
- Có `tailwindcss` trong devDependencies, nhưng HTML nguồn (`test.html`) đang dùng **Tailwind CDN** + inline `<style>`.
|
|
||||||
|
|
||||||
Kế hoạch:
|
|
||||||
- **Không dùng Tailwind CDN trong Next.js** (loại bỏ script CDN).
|
|
||||||
- Chọn 1 hướng (ưu tiên nhất quán):
|
|
||||||
- **Hướng A (khuyến nghị)**: cấu hình Tailwind nội bộ (tailwind.config + postcss) rồi chuyển class từ HTML qua TSX giữ nguyên nhiều utility class, đồng thời đưa token màu/font vào tailwind theme.
|
|
||||||
- **Hướng B**: giữ SCSS/CSS thuần, chuyển utility class sang class semantic (tốn công hơn).
|
|
||||||
|
|
||||||
> Chọn A sẽ giúp chuyển đổi nhanh nhất vì `test.html` đã viết theo Tailwind.
|
|
||||||
|
|
||||||
### 7.2 Design tokens cần chuẩn hoá
|
|
||||||
|
|
||||||
- **Colors**: primary (gold), background (dark), surface containers, on-surface… (đang có trong `test.html` tailwind config).
|
|
||||||
- **Typography**: font families (Space Grotesk, Inter, JetBrains Mono), size scale (fluid typography).
|
|
||||||
- **Layout**: container max width (HD 1920/1800), gutter responsive.
|
|
||||||
- **Border radius / shadows**: thống nhất.
|
|
||||||
|
|
||||||
### 7.3 Checklist responsive
|
|
||||||
|
|
||||||
- Breakpoints tối thiểu: 360, 390, 414, 768, 1024, 1280, 1536, 1920.
|
|
||||||
- Kiểm tra:
|
|
||||||
- Header: menu desktop vs mobile drawer, body scroll lock.
|
|
||||||
- Hero: text không tràn, CTA stack đúng.
|
|
||||||
- Grid sections: số cột thay đổi đúng.
|
|
||||||
- Form: label/input spacing, focus state, error state.
|
|
||||||
|
|
||||||
## 8) Routing & layout composition
|
|
||||||
|
|
||||||
### 8.1 Layout public
|
|
||||||
|
|
||||||
- Dùng `app/(site)/layout.tsx` để wrap Header/Footer cho toàn bộ public pages.
|
|
||||||
- `app/layout.tsx` giữ nhiệm vụ root (html/head, global css, metadata base).
|
|
||||||
|
|
||||||
### 8.2 Layout internal
|
|
||||||
|
|
||||||
- `app/(internal)/layout.tsx` (tuỳ) để internal khác theme nếu cần (ví dụ tối giản, ưu tiên bảng).
|
|
||||||
|
|
||||||
## 9) Bảo vệ trang Admin (nội bộ coder) khi chưa có backend
|
|
||||||
|
|
||||||
Vì chưa backend, không thể “đăng nhập chuẩn” theo doanh nghiệp. Kế hoạch chặn tối thiểu:
|
|
||||||
|
|
||||||
- **Phương án 1 (khuyến nghị)**: `middleware.ts` + Basic Auth (HTTP) dựa trên env server
|
|
||||||
- `ADMIN_BASIC_AUTH_USER`, `ADMIN_BASIC_AUTH_PASS`
|
|
||||||
- Chỉ áp cho path `/admin`
|
|
||||||
- **Phương án 2**: “secret query”/client guard (không an toàn) — chỉ dùng khi demo nội bộ.
|
|
||||||
|
|
||||||
> Mục tiêu: không cho public truy cập đường dẫn admin một cách dễ dàng trong môi trường triển khai.
|
|
||||||
|
|
||||||
## 10) Xoá toàn bộ phần không liên quan IPV6 (LAMS)
|
|
||||||
|
|
||||||
### 10.1 Nguyên tắc dọn dẹp
|
|
||||||
|
|
||||||
- Giữ lại:
|
|
||||||
- cấu trúc Next.js/TS/ESLint
|
|
||||||
- cấu trúc `app/` và các helper cần thiết
|
|
||||||
- pipeline CSS nếu dùng
|
|
||||||
- Xoá/đổi tên toàn bộ:
|
|
||||||
- Metadata/title/description liên quan LAMS
|
|
||||||
- Pages/routes/components/services/api types chỉ phục vụ LAMS
|
|
||||||
- Static assets LAMS (logo, favicon…) nếu không dùng
|
|
||||||
|
|
||||||
### 10.2 Checklist dọn dẹp cụ thể
|
|
||||||
|
|
||||||
- `package.json`:
|
|
||||||
- đổi `"name"` → `ipv6` (hoặc `ipv6-summit`)
|
|
||||||
- rà soát dependency không dùng (axios nếu không cần)
|
|
||||||
- `app/layout.tsx`:
|
|
||||||
- cập nhật metadata sang IPV6
|
|
||||||
- cập nhật favicon/logo/fonts đúng theo IPV6
|
|
||||||
- `app/api/**` (nếu đang gọi CMS cho LAMS):
|
|
||||||
- xoá toàn bộ nếu không dùng trong scope frontend-only
|
|
||||||
- `app/components/**`:
|
|
||||||
- thay Header/Footer LAMS bằng Header/Footer IPV6
|
|
||||||
- Các route/pages LAMS (ví dụ `/contact`, `/student-support`, `/request`, … nếu tồn tại trong `app/`):
|
|
||||||
- xoá để tránh rác routing
|
|
||||||
|
|
||||||
## 11) Quy trình thực hiện chuyển đổi (giống “lần trước”)
|
|
||||||
|
|
||||||
### 11.1 Chuẩn bị
|
|
||||||
|
|
||||||
- B1: Snapshot danh sách routes hiện tại (để biết thứ gì cần xoá).
|
|
||||||
- B2: Xác định style strategy (Tailwind nội bộ vs SCSS).
|
|
||||||
- B3: Tạo skeleton folders: `(site)`, `(internal)`, `components`, `data`.
|
|
||||||
|
|
||||||
### 11.2 Chuyển HTML → TSX theo từng trang
|
|
||||||
|
|
||||||
- B4: Home (`test.html`)
|
|
||||||
- Tách Header/Footer
|
|
||||||
- Tách sections
|
|
||||||
- Tách data ra `home.json` + `site.json`
|
|
||||||
- Loại bỏ `<script>` và chuyển sang state
|
|
||||||
- B5: Registration (`registration.html`)
|
|
||||||
- Tách form + fields
|
|
||||||
- Tách copy/options JSON
|
|
||||||
- B6: Feedback (`feedback.html`)
|
|
||||||
- B7: Sponsor (`sponsor.html`)
|
|
||||||
- B8: Admin (`admin.html`)
|
|
||||||
- Tạo route group `(internal)`
|
|
||||||
- Dựng table UI từ static JSON
|
|
||||||
- Thêm middleware bảo vệ
|
|
||||||
|
|
||||||
### 11.3 Chuẩn hoá
|
|
||||||
|
|
||||||
- B9: Đồng bộ typography/colors (global CSS + config).
|
|
||||||
- B10: Responsive pass + pixel polish (width/height, spacing).
|
|
||||||
- B11: Cleanup LAMS triệt để.
|
|
||||||
|
|
||||||
## 12) Test plan (frontend-only)
|
|
||||||
|
|
||||||
- **Routing**:
|
|
||||||
- `/` home load OK
|
|
||||||
- `/registration`, `/feedback`, `/sponsor` load OK
|
|
||||||
- `/admin` bị chặn nếu chưa auth (theo middleware)
|
|
||||||
- **Responsive**:
|
|
||||||
- Header: mobile menu hoạt động, không scroll nền khi mở drawer
|
|
||||||
- Sections: không overflow-x
|
|
||||||
- Forms: input full width mobile, label rõ ràng
|
|
||||||
- **Accessibility tối thiểu**:
|
|
||||||
- Label liên kết input
|
|
||||||
- Button type/aria cho menu toggle
|
|
||||||
- Focus ring rõ
|
|
||||||
|
|
||||||
## 13) Deliverables
|
|
||||||
|
|
||||||
- Next.js App Router pages đúng 5 trang yêu cầu.
|
|
||||||
- Component hoá toàn bộ, Header/Footer tách riêng.
|
|
||||||
- Static data tách JSON.
|
|
||||||
- CSS/design system thống nhất + responsive chuẩn.
|
|
||||||
- Xoá toàn bộ phần LAMS không liên quan, repo gọn chỉ còn IPV6.
|
|
||||||
|
|
||||||
@@ -1,284 +0,0 @@
|
|||||||
<!DOCTYPE html><html class="dark" lang="en"><head>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<meta content="width=device-width, initial-scale=1.0" name="viewport">
|
|
||||||
<title>Registration | IPv6 for AI & Data Centre Summit 2026</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;700&family=Geist:wght@400;600&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">
|
|
||||||
<script id="tailwind-config">
|
|
||||||
tailwind.config = {
|
|
||||||
darkMode: "class",
|
|
||||||
theme: {
|
|
||||||
extend: {
|
|
||||||
"colors": {
|
|
||||||
"on-primary-container": "#4e3700",
|
|
||||||
"on-tertiary-fixed-variant": "#48464c",
|
|
||||||
"secondary-fixed-dim": "#e9c088",
|
|
||||||
"secondary-fixed": "#ffddb2",
|
|
||||||
"on-secondary-container": "#d9b27c",
|
|
||||||
"secondary": "#e9c088",
|
|
||||||
"surface-container": "#201f1f",
|
|
||||||
"outline-variant": "#4e4639",
|
|
||||||
"surface": "#131313",
|
|
||||||
"surface-container-high": "#2a2a2a",
|
|
||||||
"secondary-container": "#604418",
|
|
||||||
"surface-dim": "#131313",
|
|
||||||
"primary-container": "#c5a059",
|
|
||||||
"on-tertiary": "#313035",
|
|
||||||
"outline": "#9a8f80",
|
|
||||||
"on-surface": "#e5e2e1",
|
|
||||||
"surface-container-low": "#1c1b1b",
|
|
||||||
"inverse-on-surface": "#313030",
|
|
||||||
"surface-container-highest": "#353534",
|
|
||||||
"on-error-container": "#ffdad6",
|
|
||||||
"on-background": "#e5e2e1",
|
|
||||||
"surface-variant": "#353534",
|
|
||||||
"on-primary": "#412d00",
|
|
||||||
"primary-fixed-dim": "#e9c176",
|
|
||||||
"on-error": "#690005",
|
|
||||||
"tertiary-fixed-dim": "#c9c5cc",
|
|
||||||
"background": "#131313",
|
|
||||||
"tertiary": "#c9c5cc",
|
|
||||||
"surface-tint": "#e9c176",
|
|
||||||
"primary": "#e9c176",
|
|
||||||
"surface-bright": "#3a3939",
|
|
||||||
"primary-fixed": "#ffdea5",
|
|
||||||
"on-tertiary-container": "#3c3a40",
|
|
||||||
"on-tertiary-fixed": "#1c1b20",
|
|
||||||
"on-secondary-fixed": "#291800",
|
|
||||||
"on-secondary-fixed-variant": "#5d4216",
|
|
||||||
"inverse-surface": "#e5e2e1",
|
|
||||||
"tertiary-container": "#a7a4ab",
|
|
||||||
"inverse-primary": "#775a19",
|
|
||||||
"on-surface-variant": "#d1c5b4",
|
|
||||||
"on-primary-fixed-variant": "#5d4201",
|
|
||||||
"on-secondary": "#442b02",
|
|
||||||
"error-container": "#93000a",
|
|
||||||
"error": "#ffb4ab",
|
|
||||||
"surface-container-lowest": "#0e0e0e",
|
|
||||||
"on-primary-fixed": "#261900",
|
|
||||||
"tertiary-fixed": "#e5e1e8"
|
|
||||||
},
|
|
||||||
"borderRadius": {
|
|
||||||
"DEFAULT": "0.125rem",
|
|
||||||
"lg": "0.25rem",
|
|
||||||
"xl": "0.5rem",
|
|
||||||
"full": "0.75rem"
|
|
||||||
},
|
|
||||||
"spacing": {
|
|
||||||
"section-gap": "80px",
|
|
||||||
"gutter": "24px",
|
|
||||||
"stack-md": "16px",
|
|
||||||
"stack-lg": "32px",
|
|
||||||
"margin-safe": "40px",
|
|
||||||
"unit": "4px",
|
|
||||||
"stack-sm": "8px"
|
|
||||||
},
|
|
||||||
"fontFamily": {
|
|
||||||
"title-sm": ["Inter"],
|
|
||||||
"body-base": ["Inter"],
|
|
||||||
"display-lg": ["Space Grotesk"],
|
|
||||||
"label-caps": ["Geist"],
|
|
||||||
"headline-md": ["Space Grotesk"]
|
|
||||||
},
|
|
||||||
"fontSize": {
|
|
||||||
"title-sm": ["20px", {"lineHeight": "1.4", "letterSpacing": "0.02em", "fontWeight": "600"}],
|
|
||||||
"body-base": ["16px", {"lineHeight": "1.6", "letterSpacing": "0", "fontWeight": "400"}],
|
|
||||||
"display-lg": ["48px", {"lineHeight": "1.1", "letterSpacing": "-0.02em", "fontWeight": "700"}],
|
|
||||||
"label-caps": ["12px", {"lineHeight": "1", "letterSpacing": "0.1em", "fontWeight": "600"}],
|
|
||||||
"headline-md": ["32px", {"lineHeight": "1.2", "letterSpacing": "-0.01em", "fontWeight": "600"}],
|
|
||||||
"hero-title": ["72px", {"lineHeight": "1.1", "letterSpacing": "-0.03em", "fontWeight": "700"}]
|
|
||||||
}
|
|
||||||
},
|
|
||||||
},
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
<style>
|
|
||||||
body {
|
|
||||||
background-color: #0F0F0F;
|
|
||||||
color: #E5E2E1;
|
|
||||||
overflow-x: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.gold-gradient-bg {
|
|
||||||
background: linear-gradient(135deg, #C5A059 0%, #E9C176 50%, #C5A059 100%);
|
|
||||||
}
|
|
||||||
|
|
||||||
.glass-panel {
|
|
||||||
background: rgba(26, 25, 30, 0.6);
|
|
||||||
backdrop-filter: blur(12px);
|
|
||||||
border: 1px solid rgba(255, 255, 255, 0.05);
|
|
||||||
}
|
|
||||||
|
|
||||||
.hero-glow {
|
|
||||||
position: fixed;
|
|
||||||
top: -20%;
|
|
||||||
right: -10%;
|
|
||||||
width: 60%;
|
|
||||||
height: 60%;
|
|
||||||
background: radial-gradient(circle, rgba(197, 160, 89, 0.08) 0%, rgba(15, 15, 15, 0) 70%);
|
|
||||||
z-index: -1;
|
|
||||||
pointer-events: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hero-glow-bottom {
|
|
||||||
position: fixed;
|
|
||||||
bottom: -20%;
|
|
||||||
left: -10%;
|
|
||||||
width: 50%;
|
|
||||||
height: 50%;
|
|
||||||
background: radial-gradient(circle, rgba(197, 160, 89, 0.05) 0%, rgba(15, 15, 15, 0) 70%);
|
|
||||||
z-index: -1;
|
|
||||||
pointer-events: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.material-symbols-outlined {
|
|
||||||
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
|
||||||
vertical-align: middle;
|
|
||||||
}
|
|
||||||
|
|
||||||
input:focus, select:focus, textarea:focus {
|
|
||||||
outline: none !important;
|
|
||||||
border-color: #C5A059 !important;
|
|
||||||
box-shadow: 0 0 0 1px rgba(197, 160, 89, 0.3) !important;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
<body class="font-body-base text-body-base selection:bg-primary-container selection:text-on-primary-container">
|
|
||||||
<div class="hero-glow"></div>
|
|
||||||
<div class="hero-glow-bottom"></div>
|
|
||||||
<!-- TopNavBar -->
|
|
||||||
<header class="fixed top-0 w-full z-50 bg-surface/80 backdrop-blur-xl border-b border-white/5 shadow-sm">
|
|
||||||
<div class="max-w-[1280px] mx-auto px-gutter h-20 flex items-center justify-between">
|
|
||||||
<div class="flex items-center gap-stack-md">
|
|
||||||
<span class="font-headline-md text-headline-md font-bold text-primary tracking-tight">IPv6 SUMMIT 2026</span>
|
|
||||||
</div>
|
|
||||||
<nav class="hidden md:flex items-center gap-gutter">
|
|
||||||
<a class="font-body-base text-body-base text-on-surface-variant hover:text-primary transition-colors" href="#">Agenda</a>
|
|
||||||
<a class="font-body-base text-body-base text-on-surface-variant hover:text-primary transition-colors" href="#">Speakers</a>
|
|
||||||
<a class="font-body-base text-body-base text-on-surface-variant hover:text-primary transition-colors" href="#">Venue</a>
|
|
||||||
<a class="font-body-base text-body-base text-on-surface-variant hover:text-primary transition-colors" href="#">Sponsors</a>
|
|
||||||
</nav>
|
|
||||||
<div class="flex items-center gap-stack-md">
|
|
||||||
<button class="font-label-caps text-label-caps text-on-surface-variant hover:text-primary transition-colors flex items-center gap-unit">
|
|
||||||
<span class="material-symbols-outlined text-[18px]">language</span>
|
|
||||||
EN | VI
|
|
||||||
</button>
|
|
||||||
<a class="gold-gradient-bg px-6 py-2.5 rounded-lg text-on-primary font-title-sm text-[14px] font-bold active:scale-95 transition-all hover:shadow-[0_0_20px_rgba(197,160,89,0.3)]" href="#">
|
|
||||||
Register
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</header>
|
|
||||||
<main class="pt-[160px] pb-section-gap px-gutter flex justify-center">
|
|
||||||
<div class="w-full max-w-[1280px]">
|
|
||||||
<div class="max-w-[800px] mx-auto">
|
|
||||||
<!-- Navigation Back -->
|
|
||||||
<div class="mb-stack-lg">
|
|
||||||
<a class="group flex items-center gap-stack-sm text-outline hover:text-primary transition-colors font-body-base" href="#">
|
|
||||||
<span class="material-symbols-outlined text-[20px] transition-transform group-hover:-translate-x-1">arrow_back</span>
|
|
||||||
Back to Home
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
<!-- Page Title -->
|
|
||||||
<div class="mb-stack-lg">
|
|
||||||
<h1 class="font-display-lg text-hero-title text-on-surface mb-stack-sm leading-[1.1]">Summit Registration</h1>
|
|
||||||
<p class="text-on-surface-variant font-body-base text-lg">Secure your presence at the forefront of IPv6 innovation for AI and Data Centres.</p>
|
|
||||||
</div>
|
|
||||||
<!-- Registration Card -->
|
|
||||||
<div class="glass-panel p-stack-lg md:p-12 rounded-xl shadow-2xl relative overflow-hidden">
|
|
||||||
<!-- Subtle internal accent -->
|
|
||||||
<div class="absolute top-0 left-0 w-full h-[1px] bg-gradient-to-r from-transparent via-primary/20 to-transparent"></div>
|
|
||||||
<form class="space-y-stack-lg">
|
|
||||||
<!-- Section 1: Personal Info -->
|
|
||||||
<div class="space-y-stack-md">
|
|
||||||
<h2 class="font-headline-md text-title-sm text-primary border-l-2 border-primary pl-3">Personal Info / Thông tin cá nhân</h2>
|
|
||||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-stack-md">
|
|
||||||
<div class="space-y-unit">
|
|
||||||
<label class="font-body-base text-base text-outline uppercase tracking-wider">Full Name </label>
|
|
||||||
<input class="w-full bg-surface-container-low border border-white/10 rounded-lg px-4 py-3 text-on-surface placeholder:text-outline/40 transition-all font-body-base" placeholder="John Doe" type="text">
|
|
||||||
</div>
|
|
||||||
<div class="space-y-unit">
|
|
||||||
<label class="font-body-base text-base text-outline uppercase tracking-wider">Phone Number</label>
|
|
||||||
<input class="w-full bg-surface-container-low border border-white/10 rounded-lg px-4 py-3 text-on-surface placeholder:text-outline/40 transition-all font-body-base" placeholder="+84 ..." type="tel">
|
|
||||||
</div>
|
|
||||||
<div class="md:col-span-2 space-y-unit">
|
|
||||||
<label class="font-body-base text-base text-outline uppercase tracking-wider">Business Email / Email công việc</label>
|
|
||||||
<input class="w-full bg-surface-container-low border border-white/10 rounded-lg px-4 py-3 text-on-surface placeholder:text-outline/40 transition-all font-body-base" placeholder="john.doe@company.com" type="email">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<hr class="border-white/5">
|
|
||||||
<!-- Section 2: Professional Info -->
|
|
||||||
<div class="space-y-stack-md">
|
|
||||||
<h2 class="font-headline-md text-title-sm text-primary border-l-2 border-primary pl-3">Professional Info </h2>
|
|
||||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-stack-md">
|
|
||||||
<div class="space-y-unit">
|
|
||||||
<label class="font-body-base text-base text-outline uppercase tracking-wider">Company Name </label>
|
|
||||||
<input class="w-full bg-surface-container-low border border-white/10 rounded-lg px-4 py-3 text-on-surface placeholder:text-outline/40 transition-all font-body-base" placeholder="Aurelian Cybernetics" type="text">
|
|
||||||
</div>
|
|
||||||
<div class="space-y-unit">
|
|
||||||
<label class="font-body-base text-base text-outline uppercase tracking-wider">Job Title </label>
|
|
||||||
<input class="w-full bg-surface-container-low border border-white/10 rounded-lg px-4 py-3 text-on-surface placeholder:text-outline/40 transition-all font-body-base" placeholder="Network Architect" type="text">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<hr class="border-white/5">
|
|
||||||
<!-- Section 3: Industry -->
|
|
||||||
<div class="space-y-stack-md">
|
|
||||||
<h2 class="font-headline-md text-title-sm text-primary border-l-2 border-primary pl-3">Industry</h2>
|
|
||||||
<div class="space-y-unit">
|
|
||||||
<label class="font-body-base text-base text-outline uppercase tracking-wider">Select Industry / Chọn ngành</label>
|
|
||||||
<div class="relative">
|
|
||||||
<select class="w-full bg-surface-container-low border border-white/10 rounded-lg px-4 py-3 text-on-surface appearance-none transition-all font-body-base">
|
|
||||||
<option disabled="" selected="" value="">Please choose...</option>
|
|
||||||
<option value="government">Government / Chính phủ</option>
|
|
||||||
<option value="telecom">Telecom / Viễn thông</option>
|
|
||||||
<option value="cloud">Cloud/Data Centre / Đám mây/Trung tâm dữ liệu</option>
|
|
||||||
<option value="ai">AI/Software / AI/Phần mềm</option>
|
|
||||||
<option value="others">Others / Khác</option>
|
|
||||||
</select>
|
|
||||||
<span class="material-symbols-outlined absolute right-4 top-1/2 -translate-y-1/2 text-outline pointer-events-none">expand_more</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<hr class="border-white/5">
|
|
||||||
<!-- Section 4: Special requirements -->
|
|
||||||
<div class="space-y-stack-md">
|
|
||||||
<h2 class="font-headline-md text-title-sm text-primary border-l-2 border-primary pl-3">Additional Details </h2>
|
|
||||||
<div class="space-y-unit">
|
|
||||||
<label class="font-body-base text-base text-outline uppercase tracking-wider">Special requirements or Dietary restrictions </label>
|
|
||||||
<textarea class="w-full bg-surface-container-low border border-white/10 rounded-lg px-4 py-3 text-on-surface placeholder:text-outline/40 transition-all resize-none font-body-base" placeholder="Vegetarian options, accessibility needs, etc." rows="4"></textarea>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- Submit Action -->
|
|
||||||
<div class="pt-stack-md">
|
|
||||||
<button class="w-full gold-gradient-bg py-5 rounded-lg text-on-primary font-display-lg text-title-sm font-bold shadow-[0_10px_30px_rgba(197,160,89,0.15)] hover:shadow-[0_15px_40px_rgba(197,160,89,0.25)] hover:-translate-y-0.5 active:translate-y-0 active:scale-[0.98] transition-all" type="submit">
|
|
||||||
Submit Registration </button>
|
|
||||||
<p class="mt-stack-md text-center text-outline font-body-base text-[11px] tracking-widest opacity-60 uppercase">
|
|
||||||
BY REGISTERING, YOU AGREE TO OUR PRIVACY POLICY AND TERMS OF SERVICE.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</main>
|
|
||||||
<!-- Footer -->
|
|
||||||
<footer class="w-full mt-section-gap border-t border-white/5 bg-surface-container-lowest">
|
|
||||||
<div class="max-w-[1280px] mx-auto px-gutter py-stack-lg flex flex-col md:flex-row justify-between items-center gap-stack-md">
|
|
||||||
<span class="font-headline-md text-title-sm text-on-surface">IPv6 Summit 2026</span>
|
|
||||||
<div class="flex flex-wrap justify-center gap-gutter">
|
|
||||||
<a class="font-body-base text-label-caps text-on-tertiary-fixed-variant hover:text-secondary transition-colors" href="#">Contact Us</a>
|
|
||||||
<a class="font-body-base text-label-caps text-on-tertiary-fixed-variant hover:text-secondary transition-colors" href="#">Sponsorship Prospectus</a>
|
|
||||||
<a class="font-body-base text-label-caps text-on-tertiary-fixed-variant hover:text-secondary transition-colors" href="#">Privacy Policy</a>
|
|
||||||
<a class="font-body-base text-label-caps text-on-tertiary-fixed-variant hover:text-secondary transition-colors" href="#">Terms of Service</a>
|
|
||||||
</div>
|
|
||||||
<p class="font-body-base text-label-caps text-on-tertiary-fixed-variant opacity-60">
|
|
||||||
© 2026 IPv6 for AI & Data Centre Summit. All rights reserved.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</footer>
|
|
||||||
|
|
||||||
|
|
||||||
</body></html>
|
|
||||||
-379
@@ -1,379 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
|
|
||||||
<html class="dark" lang="en"><head>
|
|
||||||
<meta charset="utf-8"/>
|
|
||||||
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
|
||||||
<title>Sponsorship | IPv6 Summit 2026</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;700&family=Geist:wght@300;400;500;600;700&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"/>
|
|
||||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
|
||||||
<script id="tailwind-config">
|
|
||||||
tailwind.config = {
|
|
||||||
darkMode: "class",
|
|
||||||
theme: {
|
|
||||||
extend: {
|
|
||||||
"colors": {
|
|
||||||
"surface": "#131313",
|
|
||||||
"surface-container": "#201f1f",
|
|
||||||
"primary-container": "#c5a059",
|
|
||||||
"on-error": "#690005",
|
|
||||||
"surface-container-low": "#1c1b1b",
|
|
||||||
"primary-fixed": "#ffdea5",
|
|
||||||
"on-tertiary": "#313035",
|
|
||||||
"outline": "#9a8f80",
|
|
||||||
"on-tertiary-container": "#3c3a40",
|
|
||||||
"tertiary-fixed": "#e5e1e8",
|
|
||||||
"secondary-container": "#604418",
|
|
||||||
"primary-fixed-dim": "#e9c176",
|
|
||||||
"tertiary": "#c9c5cc",
|
|
||||||
"on-secondary-fixed": "#291800",
|
|
||||||
"on-error-container": "#ffdad6",
|
|
||||||
"on-primary-container": "#4e3700",
|
|
||||||
"surface-variant": "#353534",
|
|
||||||
"on-primary-fixed": "#261900",
|
|
||||||
"on-background": "#e5e2e1",
|
|
||||||
"on-surface": "#e5e2e1",
|
|
||||||
"on-surface-variant": "#d1c5b4",
|
|
||||||
"secondary-fixed-dim": "#e9c088",
|
|
||||||
"secondary-fixed": "#ffddb2",
|
|
||||||
"error": "#ffb4ab",
|
|
||||||
"tertiary-container": "#a7a4ab",
|
|
||||||
"primary": "#e9c176",
|
|
||||||
"inverse-primary": "#775a19",
|
|
||||||
"outline-variant": "#4e4639",
|
|
||||||
"surface-dim": "#131313",
|
|
||||||
"tertiary-fixed-dim": "#c9c5cc",
|
|
||||||
"on-tertiary-fixed": "#1c1b20",
|
|
||||||
"on-tertiary-fixed-variant": "#48464c",
|
|
||||||
"surface-container-high": "#2a2a2a",
|
|
||||||
"error-container": "#93000a",
|
|
||||||
"surface-bright": "#3a3939",
|
|
||||||
"on-secondary-fixed-variant": "#5d4216",
|
|
||||||
"on-secondary": "#442b02",
|
|
||||||
"background": "#131313",
|
|
||||||
"surface-container-highest": "#353534",
|
|
||||||
"inverse-on-surface": "#313030",
|
|
||||||
"surface-tint": "#e9c176",
|
|
||||||
"secondary": "#e9c088",
|
|
||||||
"on-primary-fixed-variant": "#5d4201",
|
|
||||||
"surface-container-lowest": "#0e0e0e",
|
|
||||||
"on-primary": "#412d00",
|
|
||||||
"on-secondary-container": "#d9b27c",
|
|
||||||
"inverse-surface": "#e5e2e1"
|
|
||||||
},
|
|
||||||
"borderRadius": {
|
|
||||||
"DEFAULT": "0.125rem",
|
|
||||||
"lg": "0.25rem",
|
|
||||||
"xl": "0.5rem",
|
|
||||||
"full": "0.75rem"
|
|
||||||
},
|
|
||||||
"spacing": {
|
|
||||||
"section-gap": "80px",
|
|
||||||
"stack-md": "16px",
|
|
||||||
"stack-sm": "8px",
|
|
||||||
"stack-lg": "32px",
|
|
||||||
"margin-safe": "40px",
|
|
||||||
"gutter": "24px",
|
|
||||||
"unit": "4px"
|
|
||||||
},
|
|
||||||
"fontFamily": {
|
|
||||||
"display-lg": ["Space Grotesk"],
|
|
||||||
"headline-md": ["Space Grotesk"],
|
|
||||||
"label-caps": ["Geist"],
|
|
||||||
"title-sm": ["Inter"],
|
|
||||||
"body-base": ["Inter"]
|
|
||||||
},
|
|
||||||
"fontSize": {
|
|
||||||
"display-lg": ["48px", {"lineHeight": "1.1", "letterSpacing": "-0.02em", "fontWeight": "700"}],
|
|
||||||
"headline-md": ["32px", {"lineHeight": "1.2", "letterSpacing": "-0.01em", "fontWeight": "600"}],
|
|
||||||
"label-caps": ["12px", {"lineHeight": "1", "letterSpacing": "0.1em", "fontWeight": "600"}],
|
|
||||||
"title-sm": ["20px", {"lineHeight": "1.4", "letterSpacing": "0.02em", "fontWeight": "600"}],
|
|
||||||
"body-base": ["16px", {"lineHeight": "1.6", "letterSpacing": "0", "fontWeight": "400"}]
|
|
||||||
}
|
|
||||||
},
|
|
||||||
},
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
<style>
|
|
||||||
body { background-color: #0F0F0F; color: #e5e2e1; }
|
|
||||||
.glass-panel {
|
|
||||||
background: #1A191E;
|
|
||||||
border: 1px solid rgba(255, 255, 255, 0.05);
|
|
||||||
position: relative;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
.glass-panel::before {
|
|
||||||
content: "";
|
|
||||||
position: absolute;
|
|
||||||
top: 0; left: 0; right: 0; height: 1px;
|
|
||||||
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
|
|
||||||
}
|
|
||||||
.gold-border {
|
|
||||||
border: 1px solid #c5a059;
|
|
||||||
}
|
|
||||||
.gold-glow {
|
|
||||||
box-shadow: 0 0 20px rgba(197, 160, 89, 0.15);
|
|
||||||
}
|
|
||||||
.metallic-gold-gradient {
|
|
||||||
background: linear-gradient(135deg, #e9c176 0%, #c5a059 50%, #775a19 100%);
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
<body class="font-body-base">
|
|
||||||
<!-- TopNavBar -->
|
|
||||||
<header class="fixed top-0 w-full z-50 bg-surface/80 backdrop-blur-xl border-b border-white/5 shadow-sm">
|
|
||||||
<div class="max-w-[1280px] mx-auto px-gutter h-20 flex items-center justify-between">
|
|
||||||
<div class="font-display-lg text-title-sm font-bold text-primary tracking-tight">IPv6 Summit 2026</div>
|
|
||||||
<nav class="hidden md:flex items-center gap-stack-lg">
|
|
||||||
<a class="font-body-base text-body-base text-on-surface-variant hover:text-primary transition-colors" href="#">Agenda</a>
|
|
||||||
<a class="font-body-base text-body-base text-on-surface-variant hover:text-primary transition-colors" href="#">Speakers</a>
|
|
||||||
<a class="font-body-base text-body-base text-on-surface-variant hover:text-primary transition-colors" href="#">Venue</a>
|
|
||||||
<a class="font-body-base text-body-base text-primary border-b-2 border-primary pb-1" href="#">Sponsors</a>
|
|
||||||
</nav>
|
|
||||||
<div class="flex items-center gap-stack-md">
|
|
||||||
<button class="font-body-base text-body-base text-on-surface-variant hover:opacity-80 transition-all active:scale-95">Language</button>
|
|
||||||
<button class="metallic-gold-gradient text-on-primary font-title-sm px-6 py-2 rounded-lg hover:opacity-90 transition-all active:scale-95">Register</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</header>
|
|
||||||
<main class="pt-20">
|
|
||||||
<!-- Hero Section -->
|
|
||||||
<section class="relative py-16 lg:py-32 overflow-hidden">
|
|
||||||
<div class="absolute inset-0 bg-[radial-gradient(circle_at_50%_50%,rgba(197,160,89,0.08),transparent_70%)]"></div>
|
|
||||||
<div class="max-w-[1280px] mx-auto px-gutter relative z-10 text-center">
|
|
||||||
<span class="font-label-caps text-label-caps text-primary mb-4 block">OPPORTUNITY AWAITS</span>
|
|
||||||
<h1 class="font-display-lg text-display-lg mb-6">Become a Sponsor</h1>
|
|
||||||
<h2 class="font-headline-md text-headline-md text-on-surface-variant mb-8 max-w-3xl mx-auto">IPv6 for AI & Data Centre Summit 2026 — 18 June 2026, Ho Chi Minh City</h2>
|
|
||||||
<p class="font-body-base text-body-base text-on-surface-variant/80 max-w-2xl mx-auto mb-12">
|
|
||||||
Join industry leaders at the forefront of the technological evolution. We invite innovative companies to co-sponsor an elite gathering focusing on AI, IPv6, Cloud Computing, Cybersecurity, Blockchain, and Data Centres. Align your brand with the architects of tomorrow's infrastructure.
|
|
||||||
</p>
|
|
||||||
<div class="flex flex-col sm:flex-row justify-center gap-stack-md">
|
|
||||||
<button class="metallic-gold-gradient text-on-primary font-title-sm px-10 py-4 rounded-lg hover:opacity-90 transition-all active:scale-95">Download Prospectus</button>
|
|
||||||
<button class="border border-primary text-primary font-title-sm px-10 py-4 rounded-lg hover:bg-primary/5 transition-all active:scale-95">Speak to an Agent</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
<!-- Sponsorship Packages Section -->
|
|
||||||
<section class="py-16 lg:py-32 bg-surface-container-lowest">
|
|
||||||
<div class="max-w-[1280px] mx-auto px-gutter">
|
|
||||||
<div class="flex items-center justify-between mb-stack-lg">
|
|
||||||
<h2 class="font-headline-md text-headline-md">Sponsorship Packages & Benefits</h2>
|
|
||||||
<div class="hidden lg:block h-px flex-grow mx-stack-lg bg-outline-variant/30"></div>
|
|
||||||
</div>
|
|
||||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-stack-lg">
|
|
||||||
<!-- DIAMOND SPONSOR -->
|
|
||||||
<div class="glass-panel gold-border gold-glow p-stack-lg rounded-xl flex flex-col h-full ring-2 ring-primary/20">
|
|
||||||
<div class="mb-stack-lg">
|
|
||||||
<span class="bg-primary/20 text-primary px-3 py-1 rounded text-label-caps mb-4 inline-block">MOST PRESTIGIOUS</span>
|
|
||||||
<h3 class="font-display-lg text-headline-md text-primary">DIAMOND SPONSOR</h3>
|
|
||||||
<div class="text-on-surface font-display-lg text-title-sm mt-2">80,000,000 VND</div>
|
|
||||||
</div>
|
|
||||||
<ul class="space-y-4 mb-stack-lg flex-grow">
|
|
||||||
<li class="flex items-start gap-3">
|
|
||||||
<span class="material-symbols-outlined text-primary text-[20px]" style="font-variation-settings: 'FILL' 1;">check_circle</span>
|
|
||||||
<span class="text-on-surface-variant">Logo prominent on all branding materials</span>
|
|
||||||
</li>
|
|
||||||
<li class="flex items-start gap-3">
|
|
||||||
<span class="material-symbols-outlined text-primary text-[20px]" style="font-variation-settings: 'FILL' 1;">check_circle</span>
|
|
||||||
<span class="text-on-surface-variant">Logo on stage backdrop & LED screens</span>
|
|
||||||
</li>
|
|
||||||
<li class="flex items-start gap-3">
|
|
||||||
<span class="material-symbols-outlined text-primary text-[20px]" style="font-variation-settings: 'FILL' 1;">check_circle</span>
|
|
||||||
<span class="text-on-surface-variant">Premium exhibition standee space</span>
|
|
||||||
</li>
|
|
||||||
<li class="flex items-start gap-3">
|
|
||||||
<span class="material-symbols-outlined text-primary text-[20px]" style="font-variation-settings: 'FILL' 1;">check_circle</span>
|
|
||||||
<span class="text-on-surface-variant font-bold">1 dedicated speaking slot</span>
|
|
||||||
</li>
|
|
||||||
<li class="flex items-start gap-3">
|
|
||||||
<span class="material-symbols-outlined text-primary text-[20px]" style="font-variation-settings: 'FILL' 1;">check_circle</span>
|
|
||||||
<span class="text-on-surface-variant">07 VIP Delegate tickets</span>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
<button class="metallic-gold-gradient text-on-primary w-full py-4 rounded font-title-sm">Select Diamond</button>
|
|
||||||
</div>
|
|
||||||
<!-- GOLD SPONSOR -->
|
|
||||||
<div class="glass-panel p-stack-lg rounded-xl flex flex-col h-full">
|
|
||||||
<div class="mb-stack-lg">
|
|
||||||
<h3 class="font-display-lg text-headline-md">GOLD SPONSOR</h3>
|
|
||||||
<div class="text-on-surface font-display-lg text-title-sm mt-2">50,000,000 VND</div>
|
|
||||||
</div>
|
|
||||||
<ul class="space-y-4 mb-stack-lg flex-grow">
|
|
||||||
<li class="flex items-start gap-3">
|
|
||||||
<span class="material-symbols-outlined text-primary text-[20px]">check_circle</span>
|
|
||||||
<span class="text-on-surface-variant">Logo on stage backdrop & LED screens</span>
|
|
||||||
</li>
|
|
||||||
<li class="flex items-start gap-3">
|
|
||||||
<span class="material-symbols-outlined text-primary text-[20px]">check_circle</span>
|
|
||||||
<span class="text-on-surface-variant">Exhibition standee placement</span>
|
|
||||||
</li>
|
|
||||||
<li class="flex items-start gap-3">
|
|
||||||
<span class="material-symbols-outlined text-primary text-[20px]">check_circle</span>
|
|
||||||
<span class="text-on-surface-variant">05 VIP Delegate tickets</span>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
<button class="border border-outline-variant text-on-surface w-full py-4 rounded font-title-sm hover:border-primary transition-colors">Select Gold</button>
|
|
||||||
</div>
|
|
||||||
<!-- SILVER SPONSOR -->
|
|
||||||
<div class="glass-panel p-stack-lg rounded-xl flex flex-col h-full">
|
|
||||||
<div class="mb-stack-lg">
|
|
||||||
<h3 class="font-display-lg text-headline-md">SILVER SPONSOR</h3>
|
|
||||||
<div class="text-on-surface font-display-lg text-title-sm mt-2">40,000,000 VND</div>
|
|
||||||
</div>
|
|
||||||
<ul class="space-y-4 mb-stack-lg flex-grow">
|
|
||||||
<li class="flex items-start gap-3">
|
|
||||||
<span class="material-symbols-outlined text-primary text-[20px]">check_circle</span>
|
|
||||||
<span class="text-on-surface-variant">Logo on stage backdrop & LED screens</span>
|
|
||||||
</li>
|
|
||||||
<li class="flex items-start gap-3">
|
|
||||||
<span class="material-symbols-outlined text-primary text-[20px]">check_circle</span>
|
|
||||||
<span class="text-on-surface-variant">Standard exhibition standee</span>
|
|
||||||
</li>
|
|
||||||
<li class="flex items-start gap-3">
|
|
||||||
<span class="material-symbols-outlined text-primary text-[20px]">check_circle</span>
|
|
||||||
<span class="text-on-surface-variant">04 VIP Delegate tickets</span>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
<button class="border border-outline-variant text-on-surface w-full py-4 rounded font-title-sm hover:border-primary transition-colors">Select Silver</button>
|
|
||||||
</div>
|
|
||||||
<!-- PARTNER SPONSOR -->
|
|
||||||
<div class="glass-panel p-stack-lg rounded-xl flex flex-col h-full">
|
|
||||||
<div class="mb-stack-lg">
|
|
||||||
<h3 class="font-display-lg text-headline-md">PARTNER SPONSOR</h3>
|
|
||||||
<div class="text-on-surface font-display-lg text-title-sm mt-2">20,000,000 VND</div>
|
|
||||||
</div>
|
|
||||||
<ul class="space-y-4 mb-stack-lg flex-grow">
|
|
||||||
<li class="flex items-start gap-3">
|
|
||||||
<span class="material-symbols-outlined text-primary text-[20px]">check_circle</span>
|
|
||||||
<span class="text-on-surface-variant">Logo on official website & event communications</span>
|
|
||||||
</li>
|
|
||||||
<li class="flex items-start gap-3">
|
|
||||||
<span class="material-symbols-outlined text-primary text-[20px]">check_circle</span>
|
|
||||||
<span class="text-on-surface-variant">02 VIP Delegate tickets</span>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
<button class="border border-outline-variant text-on-surface w-full py-4 rounded font-title-sm hover:border-primary transition-colors">Select Partner</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
<!-- Item-Based Sponsorship -->
|
|
||||||
<section class="py-16 lg:py-32">
|
|
||||||
<div class="max-w-[1280px] mx-auto px-gutter">
|
|
||||||
<div class="text-center mb-stack-lg">
|
|
||||||
<h2 class="font-headline-md text-headline-md mb-2">Item-Based Sponsorship</h2>
|
|
||||||
<p class="text-on-surface-variant opacity-70">Targeted branding opportunities for specific summit pillars</p>
|
|
||||||
</div>
|
|
||||||
<div class="grid grid-cols-2 lg:grid-cols-4 gap-gutter mb-stack-lg">
|
|
||||||
<div class="glass-panel p-stack-md rounded-lg text-center group hover:bg-surface-container transition-colors">
|
|
||||||
<div class="w-12 h-12 metallic-gold-gradient rounded-full flex items-center justify-center mx-auto mb-4">
|
|
||||||
<span class="material-symbols-outlined text-on-primary">hotel</span>
|
|
||||||
</div>
|
|
||||||
<h4 class="font-title-sm text-body-base mb-1">Hotel Accommodation</h4>
|
|
||||||
<p class="text-label-caps text-primary">Limited Space</p>
|
|
||||||
</div>
|
|
||||||
<div class="glass-panel p-stack-md rounded-lg text-center group hover:bg-surface-container transition-colors">
|
|
||||||
<div class="w-12 h-12 metallic-gold-gradient rounded-full flex items-center justify-center mx-auto mb-4">
|
|
||||||
<span class="material-symbols-outlined text-on-primary">meeting_room</span>
|
|
||||||
</div>
|
|
||||||
<h4 class="font-title-sm text-body-base mb-1">Conference Hall</h4>
|
|
||||||
<p class="text-label-caps text-primary">Sold Out</p>
|
|
||||||
</div>
|
|
||||||
<div class="glass-panel p-stack-md rounded-lg text-center group hover:bg-surface-container transition-colors">
|
|
||||||
<div class="w-12 h-12 metallic-gold-gradient rounded-full flex items-center justify-center mx-auto mb-4">
|
|
||||||
<span class="material-symbols-outlined text-on-primary">groups</span>
|
|
||||||
</div>
|
|
||||||
<h4 class="font-title-sm text-body-base mb-1">Networking Zone</h4>
|
|
||||||
<p class="text-label-caps text-primary">Available</p>
|
|
||||||
</div>
|
|
||||||
<div class="glass-panel p-stack-md rounded-lg text-center group hover:bg-surface-container transition-colors">
|
|
||||||
<div class="w-12 h-12 metallic-gold-gradient rounded-full flex items-center justify-center mx-auto mb-4">
|
|
||||||
<span class="material-symbols-outlined text-on-primary">newsmode</span>
|
|
||||||
</div>
|
|
||||||
<h4 class="font-title-sm text-body-base mb-1">Media Partner</h4>
|
|
||||||
<p class="text-label-caps text-primary">Apply Now</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-gutter">
|
|
||||||
<div class="bg-primary/5 border border-primary/20 p-stack-lg rounded-xl flex items-center justify-between">
|
|
||||||
<div>
|
|
||||||
<p class="font-label-caps text-primary mb-1">STANDARD BENEFIT</p>
|
|
||||||
<p class="font-title-sm">Logo on backdrop & LED screens</p>
|
|
||||||
</div>
|
|
||||||
<span class="material-symbols-outlined text-primary text-4xl">branding_watermark</span>
|
|
||||||
</div>
|
|
||||||
<div class="bg-primary/5 border border-primary/20 p-stack-lg rounded-xl flex items-center justify-between">
|
|
||||||
<div>
|
|
||||||
<p class="font-label-caps text-primary mb-1">ACCESS PACK</p>
|
|
||||||
<p class="font-title-sm">02 VIP Delegate tickets included</p>
|
|
||||||
</div>
|
|
||||||
<span class="material-symbols-outlined text-primary text-4xl">confirmation_number</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
<!-- Contact Section -->
|
|
||||||
<section class="py-16 lg:py-32 relative">
|
|
||||||
<div class="max-w-[1280px] mx-auto px-gutter">
|
|
||||||
<div class="glass-panel gold-border p-stack-lg lg:p-section-gap rounded-3xl overflow-hidden relative">
|
|
||||||
<!-- Subtle Glow -->
|
|
||||||
<div class="absolute -bottom-24 -right-24 w-64 h-64 bg-primary/20 blur-[100px] rounded-full"></div>
|
|
||||||
<div class="relative z-10 grid grid-cols-1 lg:grid-cols-2 gap-stack-lg items-center">
|
|
||||||
<div>
|
|
||||||
<h2 class="font-display-lg text-display-lg mb-6">Partner With Us</h2>
|
|
||||||
<p class="font-body-base text-body-base text-on-surface-variant/80 mb-8">
|
|
||||||
Elevate your brand presence in the Indo-Pacific tech corridor. Our summit offers unparalleled access to decision-makers, researchers, and government officials driving the next generation of data center infrastructure and AI development.
|
|
||||||
</p>
|
|
||||||
<div class="space-y-6 mb-12">
|
|
||||||
<div class="flex items-center gap-4">
|
|
||||||
<div class="w-10 h-10 border border-primary/30 rounded-full flex items-center justify-center">
|
|
||||||
<span class="material-symbols-outlined text-primary">call</span>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<p class="text-label-caps opacity-60">PHONE ENQUIRIES</p>
|
|
||||||
<p class="font-title-sm">+84 941 523 498</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-4">
|
|
||||||
<div class="w-10 h-10 border border-primary/30 rounded-full flex items-center justify-center">
|
|
||||||
<span class="material-symbols-outlined text-primary">mail</span>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<p class="text-label-caps opacity-60">DIRECT EMAIL</p>
|
|
||||||
<p class="font-title-sm">events@techvanguard.vn</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<button class="metallic-gold-gradient 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">
|
|
||||||
Contact Us to Sponsor
|
|
||||||
<span class="material-symbols-outlined">arrow_forward</span>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
<div class="hidden lg:block">
|
|
||||||
<div class="relative aspect-square">
|
|
||||||
<img alt="Sponsorship Meeting" class="w-full h-full object-cover rounded-2xl opacity-60 mix-blend-luminosity" data-alt="A professional business meeting in a high-tech conference room with glass walls overlooking a futuristic skyline at twilight. The lighting is low and sophisticated, featuring warm golden highlights and cool blue shadows. Three executives are discussing a strategic partnership over a digital tablet, reflecting the premium, high-tech aesthetic of the IPv6 Summit. The atmosphere is authoritative, cutting-edge, and elite." src="https://lh3.googleusercontent.com/aida-public/AB6AXuATSk4rhRYAo9_OfX0cJwIC7rUdUmzD9kO7cJM24ECjPHwglU_s0wjBn6gdK0d7tk4ExLvG9DUJQ1L-PbP5ucVH2THO05fev6bWgyvpkElf_94JXJNeWj0Mo4-5-l2ofY-kHE6kPLhitbRzarR7u41favHCt_V9WM0yYb7tcZZQM8eAN5jIVT5OVKSGvfpZNYe05dJm_h3pW0qkWhX1XrUtg_xhhjdvTi-Mei7zHDUkwwRrydg7BHmO17W6ScfALH5rMXojTHub7UDN"/>
|
|
||||||
<div class="absolute inset-0 ring-1 ring-inset ring-white/10 rounded-2xl"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
</main>
|
|
||||||
<!-- Footer -->
|
|
||||||
<footer class="w-full mt-section-gap bg-surface-container-lowest border-t border-outline-variant/20">
|
|
||||||
<div class="max-w-[1280px] mx-auto px-gutter py-stack-lg flex flex-col md:flex-row justify-between items-center gap-stack-md">
|
|
||||||
<div class="font-display-lg text-title-sm text-on-surface">IPv6 for AI & Data Centre Summit</div>
|
|
||||||
<div class="flex flex-wrap justify-center gap-stack-lg">
|
|
||||||
<a class="font-label-caps text-label-caps text-on-tertiary-fixed-variant hover:text-secondary transition-colors" href="#">Contact Us</a>
|
|
||||||
<a class="font-label-caps text-label-caps text-on-tertiary-fixed-variant hover:text-secondary transition-colors" href="#">Sponsorship Prospectus</a>
|
|
||||||
<a class="font-label-caps text-label-caps text-on-tertiary-fixed-variant hover:text-secondary transition-colors" href="#">Privacy Policy</a>
|
|
||||||
<a class="font-label-caps text-label-caps text-on-tertiary-fixed-variant hover:text-secondary transition-colors" href="#">Terms of Service</a>
|
|
||||||
</div>
|
|
||||||
<div class="font-label-caps text-label-caps text-on-tertiary-fixed-variant">
|
|
||||||
© 2026 IPv6 for AI & Data Centre Summit. All rights reserved.
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</footer>
|
|
||||||
</body></html>
|
|
||||||
@@ -1,419 +0,0 @@
|
|||||||
<!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