forked from UKSOURCE/ipv6
sponsor from nhat
This commit is contained in:
@@ -0,0 +1,23 @@
|
|||||||
|
import type { Metadata } from "next";
|
||||||
|
import sponsor from "@/app/data/sponsor.json";
|
||||||
|
import SponsorHero from "@/app/components/sponsor/SponsorHero";
|
||||||
|
import SponsorPackages from "@/app/components/sponsor/SponsorPackages";
|
||||||
|
import SponsorItemBased from "@/app/components/sponsor/SponsorItemBased";
|
||||||
|
import SponsorContact from "@/app/components/sponsor/SponsorContact";
|
||||||
|
|
||||||
|
export const metadata: Metadata = {
|
||||||
|
title: "Sponsorship | IPv6 Summit 2026",
|
||||||
|
description:
|
||||||
|
"Become a sponsor at the IPv6 for AI & Data Centre Summit 2026. Align your brand with the architects of tomorrow's infrastructure.",
|
||||||
|
};
|
||||||
|
|
||||||
|
export default function SponsorPage() {
|
||||||
|
return (
|
||||||
|
<main className="pt-20">
|
||||||
|
<SponsorHero data={sponsor.hero} />
|
||||||
|
<SponsorPackages data={sponsor.packages} />
|
||||||
|
<SponsorItemBased data={sponsor.itemBased} />
|
||||||
|
<SponsorContact data={sponsor.contact} />
|
||||||
|
</main>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,80 @@
|
|||||||
|
type SponsorContactData = {
|
||||||
|
id: string;
|
||||||
|
title: string;
|
||||||
|
description: string;
|
||||||
|
phone: { label: string; value: string };
|
||||||
|
email: { label: string; value: string };
|
||||||
|
cta: string;
|
||||||
|
image: { src: string; alt: string };
|
||||||
|
};
|
||||||
|
|
||||||
|
export default function SponsorContact({ data }: { data: SponsorContactData }) {
|
||||||
|
return (
|
||||||
|
<section id={data.id} className="py-16 lg:py-32 relative">
|
||||||
|
<div className="max-w-[1280px] mx-auto px-gutter">
|
||||||
|
|
||||||
|
{/* glass-panel gold-border — p-stack-lg lg:p-section-gap */}
|
||||||
|
<div className="glass-panel gold-border p-stack-lg lg:p-section-gap rounded-3xl overflow-hidden relative">
|
||||||
|
{/* Glow */}
|
||||||
|
<div className="absolute -bottom-24 -right-24 w-64 h-64 bg-primary/20 blur-[100px] rounded-full" />
|
||||||
|
|
||||||
|
<div className="relative z-10 grid grid-cols-1 lg:grid-cols-2 gap-stack-lg items-center">
|
||||||
|
{/* Left */}
|
||||||
|
<div>
|
||||||
|
<h2 className="font-display-lg text-display-lg mb-6">{data.title}</h2>
|
||||||
|
|
||||||
|
<p className="font-body-base text-body-base text-on-surface-variant/80 mb-8">
|
||||||
|
{data.description}
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div className="space-y-6 mb-12">
|
||||||
|
{/* Phone */}
|
||||||
|
<div className="flex items-center gap-4">
|
||||||
|
<div className="w-10 h-10 border border-primary/30 rounded-full flex items-center justify-center">
|
||||||
|
<span className="material-symbols-outlined text-primary">call</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p className="text-label-caps opacity-60">{data.phone.label}</p>
|
||||||
|
<p className="font-title-sm">{data.phone.value}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Email */}
|
||||||
|
<div className="flex items-center gap-4">
|
||||||
|
<div className="w-10 h-10 border border-primary/30 rounded-full flex items-center justify-center">
|
||||||
|
<span className="material-symbols-outlined text-primary">mail</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p className="text-label-caps opacity-60">{data.email.label}</p>
|
||||||
|
<p className="font-title-sm">{data.email.value}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className="gold-gradient-bg text-on-primary font-title-sm px-12 py-5 rounded-lg hover:opacity-90 transition-all active:scale-95 flex items-center gap-3"
|
||||||
|
>
|
||||||
|
{data.cta}
|
||||||
|
<span className="material-symbols-outlined">arrow_forward</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Right: image */}
|
||||||
|
<div className="hidden lg:block">
|
||||||
|
<div className="relative aspect-square">
|
||||||
|
{/* eslint-disable-next-line @next/next/no-img-element */}
|
||||||
|
<img
|
||||||
|
src={data.image.src}
|
||||||
|
alt={data.image.alt}
|
||||||
|
className="w-full h-full object-cover rounded-2xl opacity-60 mix-blend-luminosity"
|
||||||
|
/>
|
||||||
|
<div className="absolute inset-0 ring-1 ring-inset ring-white/10 rounded-2xl" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,51 @@
|
|||||||
|
import Link from "next/link";
|
||||||
|
|
||||||
|
type SponsorHeroData = {
|
||||||
|
eyebrow: string;
|
||||||
|
title: string;
|
||||||
|
subtitle: string;
|
||||||
|
description: string;
|
||||||
|
primaryCta: { label: string; href: string };
|
||||||
|
secondaryCta: { label: string; href: string };
|
||||||
|
};
|
||||||
|
|
||||||
|
export default function SponsorHero({ data }: { data: SponsorHeroData }) {
|
||||||
|
return (
|
||||||
|
<section className="relative py-16 lg:py-32 overflow-hidden">
|
||||||
|
<div className="absolute inset-0 bg-[radial-gradient(circle_at_50%_50%,rgba(197,160,89,0.08),transparent_70%)]" />
|
||||||
|
|
||||||
|
<div className="max-w-[1280px] mx-auto px-gutter relative z-10 text-center">
|
||||||
|
<span className="font-label-caps text-label-caps text-primary mb-4 block">
|
||||||
|
{data.eyebrow}
|
||||||
|
</span>
|
||||||
|
|
||||||
|
<h1 className="font-display-lg text-display-lg mb-6">
|
||||||
|
{data.title}
|
||||||
|
</h1>
|
||||||
|
|
||||||
|
<h2 className="font-headline-md text-headline-md text-on-surface-variant mb-8 max-w-3xl mx-auto">
|
||||||
|
{data.subtitle}
|
||||||
|
</h2>
|
||||||
|
|
||||||
|
<p className="font-body-base text-body-base text-on-surface-variant/80 max-w-2xl mx-auto mb-12">
|
||||||
|
{data.description}
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div className="flex flex-col sm:flex-row justify-center gap-stack-md">
|
||||||
|
<Link
|
||||||
|
href={data.primaryCta.href}
|
||||||
|
className="gold-gradient-bg text-on-primary font-title-sm px-10 py-4 rounded-lg hover:opacity-90 transition-all active:scale-95 text-center"
|
||||||
|
>
|
||||||
|
{data.primaryCta.label}
|
||||||
|
</Link>
|
||||||
|
<Link
|
||||||
|
href={data.secondaryCta.href}
|
||||||
|
className="border border-primary text-primary font-title-sm px-10 py-4 rounded-lg hover:bg-primary/5 transition-all active:scale-95 text-center"
|
||||||
|
>
|
||||||
|
{data.secondaryCta.label}
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,68 @@
|
|||||||
|
type ItemCard = {
|
||||||
|
icon: string;
|
||||||
|
title: string;
|
||||||
|
status: string;
|
||||||
|
};
|
||||||
|
|
||||||
|
type Highlight = {
|
||||||
|
eyebrow: string;
|
||||||
|
title: string;
|
||||||
|
icon: string;
|
||||||
|
};
|
||||||
|
|
||||||
|
type SponsorItemBasedData = {
|
||||||
|
eyebrow: string;
|
||||||
|
title: string;
|
||||||
|
description: string;
|
||||||
|
items: ItemCard[];
|
||||||
|
highlights: Highlight[];
|
||||||
|
};
|
||||||
|
|
||||||
|
export default function SponsorItemBased({ data }: { data: SponsorItemBasedData }) {
|
||||||
|
return (
|
||||||
|
<section className="py-16 lg:py-32">
|
||||||
|
<div className="max-w-[1280px] mx-auto px-gutter">
|
||||||
|
|
||||||
|
{/* Header — text-center mb-stack-lg */}
|
||||||
|
<div className="text-center mb-stack-lg">
|
||||||
|
<h2 className="font-headline-md text-headline-md mb-2">{data.title}</h2>
|
||||||
|
<p className="text-on-surface-variant opacity-70">{data.description}</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 4-col cards — gap-gutter = 24px, mb-stack-lg = 32px */}
|
||||||
|
<div className="grid grid-cols-2 lg:grid-cols-4 gap-gutter mb-stack-lg">
|
||||||
|
{data.items.map((item) => (
|
||||||
|
<div
|
||||||
|
key={item.title}
|
||||||
|
className="glass-panel p-stack-md rounded-lg text-center group hover:bg-surface-container transition-colors"
|
||||||
|
>
|
||||||
|
<div className="w-12 h-12 gold-gradient-bg rounded-full flex items-center justify-center mx-auto mb-4">
|
||||||
|
<span className="material-symbols-outlined text-on-primary">{item.icon}</span>
|
||||||
|
</div>
|
||||||
|
<h4 className="font-title-sm text-body-base mb-1">{item.title}</h4>
|
||||||
|
<p className="text-label-caps text-primary">{item.status}</p>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Highlights — gap-gutter = 24px */}
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-gutter">
|
||||||
|
{data.highlights.map((h) => (
|
||||||
|
<div
|
||||||
|
key={h.eyebrow}
|
||||||
|
className="bg-primary/5 border border-primary/20 p-stack-lg rounded-xl flex items-center justify-between"
|
||||||
|
>
|
||||||
|
<div>
|
||||||
|
<p className="font-label-caps text-primary mb-1">{h.eyebrow}</p>
|
||||||
|
<p className="font-title-sm">{h.title}</p>
|
||||||
|
</div>
|
||||||
|
<span className="material-symbols-outlined text-primary text-4xl">
|
||||||
|
{h.icon}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,96 @@
|
|||||||
|
type PackageItem = {
|
||||||
|
id: string;
|
||||||
|
tier: string;
|
||||||
|
badge: string | null;
|
||||||
|
price: string;
|
||||||
|
featured: boolean;
|
||||||
|
cta: string;
|
||||||
|
benefits: string[];
|
||||||
|
boldBenefit: string | null;
|
||||||
|
};
|
||||||
|
|
||||||
|
type SponsorPackagesData = {
|
||||||
|
eyebrow: string;
|
||||||
|
title: string;
|
||||||
|
items: PackageItem[];
|
||||||
|
};
|
||||||
|
|
||||||
|
export default function SponsorPackages({ data }: { data: SponsorPackagesData }) {
|
||||||
|
return (
|
||||||
|
<section className="py-16 lg:py-32 bg-surface-container-lowest">
|
||||||
|
<div className="max-w-[1280px] mx-auto px-gutter">
|
||||||
|
|
||||||
|
{/* Header — flex items-center justify-between mb-stack-lg */}
|
||||||
|
<div className="flex items-center justify-between mb-stack-lg">
|
||||||
|
<h2 className="font-headline-md text-headline-md">{data.title}</h2>
|
||||||
|
<div className="hidden lg:block h-px flex-grow mx-stack-lg bg-outline-variant/30" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Grid — gap-stack-lg = 32px */}
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-stack-lg">
|
||||||
|
{data.items.map((pkg) => (
|
||||||
|
<div
|
||||||
|
key={pkg.id}
|
||||||
|
className={`glass-panel p-stack-lg rounded-xl flex flex-col h-full ${
|
||||||
|
pkg.featured ? "gold-border gold-glow ring-2 ring-primary/20" : ""
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
<div className="mb-stack-lg">
|
||||||
|
{pkg.badge && (
|
||||||
|
<span className="bg-primary/20 text-primary px-3 py-1 rounded text-label-caps mb-4 inline-block">
|
||||||
|
{pkg.badge}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
<h3
|
||||||
|
className={`font-display-lg text-headline-md ${
|
||||||
|
pkg.featured ? "text-primary" : ""
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
{pkg.tier}
|
||||||
|
</h3>
|
||||||
|
<div className="text-on-surface font-display-lg text-title-sm mt-2">
|
||||||
|
{pkg.price}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<ul className="space-y-4 mb-stack-lg flex-grow">
|
||||||
|
{pkg.benefits.map((benefit) => (
|
||||||
|
<li key={benefit} className="flex items-start gap-3">
|
||||||
|
<span
|
||||||
|
className="material-symbols-outlined text-primary text-[20px]"
|
||||||
|
style={
|
||||||
|
pkg.featured
|
||||||
|
? { fontVariationSettings: "'FILL' 1" }
|
||||||
|
: undefined
|
||||||
|
}
|
||||||
|
>
|
||||||
|
check_circle
|
||||||
|
</span>
|
||||||
|
<span
|
||||||
|
className={`text-on-surface-variant ${
|
||||||
|
benefit === pkg.boldBenefit ? "font-bold" : ""
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
{benefit}
|
||||||
|
</span>
|
||||||
|
</li>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className={`w-full py-4 rounded font-title-sm transition-all active:scale-95 ${
|
||||||
|
pkg.featured
|
||||||
|
? "gold-gradient-bg text-on-primary hover:opacity-90"
|
||||||
|
: "border border-outline-variant text-on-surface hover:border-primary transition-colors"
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
{pkg.cta}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,114 @@
|
|||||||
|
{
|
||||||
|
"hero": {
|
||||||
|
"eyebrow": "OPPORTUNITY AWAITS",
|
||||||
|
"title": "Become a Sponsor",
|
||||||
|
"subtitle": "IPv6 for AI & Data Centre Summit 2026 — 18 June 2026, Ho Chi Minh City",
|
||||||
|
"description": "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.",
|
||||||
|
"primaryCta": { "label": "Download Prospectus", "href": "#" },
|
||||||
|
"secondaryCta": { "label": "Speak to an Agent", "href": "#contact" }
|
||||||
|
},
|
||||||
|
"packages": {
|
||||||
|
"eyebrow": "PACKAGES",
|
||||||
|
"title": "Sponsorship Packages & Benefits",
|
||||||
|
"items": [
|
||||||
|
{
|
||||||
|
"id": "diamond",
|
||||||
|
"tier": "DIAMOND SPONSOR",
|
||||||
|
"badge": "MOST PRESTIGIOUS",
|
||||||
|
"price": "80,000,000 VND",
|
||||||
|
"featured": true,
|
||||||
|
"cta": "Select Diamond",
|
||||||
|
"benefits": [
|
||||||
|
"Logo prominent on all branding materials",
|
||||||
|
"Logo on stage backdrop & LED screens",
|
||||||
|
"Premium exhibition standee space",
|
||||||
|
"1 dedicated speaking slot",
|
||||||
|
"07 VIP Delegate tickets"
|
||||||
|
],
|
||||||
|
"boldBenefit": "1 dedicated speaking slot"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "gold",
|
||||||
|
"tier": "GOLD SPONSOR",
|
||||||
|
"badge": null,
|
||||||
|
"price": "50,000,000 VND",
|
||||||
|
"featured": false,
|
||||||
|
"cta": "Select Gold",
|
||||||
|
"benefits": [
|
||||||
|
"Logo on stage backdrop & LED screens",
|
||||||
|
"Exhibition standee placement",
|
||||||
|
"05 VIP Delegate tickets"
|
||||||
|
],
|
||||||
|
"boldBenefit": null
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "silver",
|
||||||
|
"tier": "SILVER SPONSOR",
|
||||||
|
"badge": null,
|
||||||
|
"price": "40,000,000 VND",
|
||||||
|
"featured": false,
|
||||||
|
"cta": "Select Silver",
|
||||||
|
"benefits": [
|
||||||
|
"Logo on stage backdrop & LED screens",
|
||||||
|
"Standard exhibition standee",
|
||||||
|
"04 VIP Delegate tickets"
|
||||||
|
],
|
||||||
|
"boldBenefit": null
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "partner",
|
||||||
|
"tier": "PARTNER SPONSOR",
|
||||||
|
"badge": null,
|
||||||
|
"price": "20,000,000 VND",
|
||||||
|
"featured": false,
|
||||||
|
"cta": "Select Partner",
|
||||||
|
"benefits": [
|
||||||
|
"Logo on official website & event communications",
|
||||||
|
"02 VIP Delegate tickets"
|
||||||
|
],
|
||||||
|
"boldBenefit": null
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"itemBased": {
|
||||||
|
"eyebrow": "À LA CARTE",
|
||||||
|
"title": "Item-Based Sponsorship",
|
||||||
|
"description": "Targeted branding opportunities for specific summit pillars",
|
||||||
|
"items": [
|
||||||
|
{ "icon": "hotel", "title": "Hotel Accommodation", "status": "Limited Space" },
|
||||||
|
{ "icon": "meeting_room", "title": "Conference Hall", "status": "Sold Out" },
|
||||||
|
{ "icon": "groups", "title": "Networking Zone", "status": "Available" },
|
||||||
|
{ "icon": "newsmode", "title": "Media Partner", "status": "Apply Now" }
|
||||||
|
],
|
||||||
|
"highlights": [
|
||||||
|
{
|
||||||
|
"eyebrow": "STANDARD BENEFIT",
|
||||||
|
"title": "Logo on backdrop & LED screens",
|
||||||
|
"icon": "branding_watermark"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"eyebrow": "ACCESS PACK",
|
||||||
|
"title": "02 VIP Delegate tickets included",
|
||||||
|
"icon": "confirmation_number"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"contact": {
|
||||||
|
"id": "contact",
|
||||||
|
"title": "Partner With Us",
|
||||||
|
"description": "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.",
|
||||||
|
"phone": {
|
||||||
|
"label": "PHONE ENQUIRIES",
|
||||||
|
"value": "+84 941 523 498"
|
||||||
|
},
|
||||||
|
"email": {
|
||||||
|
"label": "DIRECT EMAIL",
|
||||||
|
"value": "events@techvanguard.vn"
|
||||||
|
},
|
||||||
|
"cta": "Contact Us to Sponsor",
|
||||||
|
"image": {
|
||||||
|
"src": "https://lh3.googleusercontent.com/aida-public/AB6AXuATSk4rhRYAo9_OfX0cJwIC7rUdUmzD9kO7cJM24ECjPHwglU_s0wjBn6gdK0d7tk4ExLvG9DUJQ1L-PbP5ucVH2THO05fev6bWgyvpkElf_94JXJNeWj0Mo4-5-l2ofY-kHE6kPLhitbRzarR7u41favHCt_V9WM0yYb7tcZZQM8eAN5jIVT5OVKSGvfpZNYe05dJm_h3pW0qkWhX1XrUtg_xhhjdvTi-Mei7zHDUkwwRrydg7BHmO17W6ScfALH5rMXojTHub7UDN",
|
||||||
|
"alt": "A professional business meeting in a high-tech conference room"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user