forked from UKSOURCE/ipv6
379 lines
20 KiB
HTML
379 lines
20 KiB
HTML
<!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> |