forked from UKSOURCE/ipv6
init
This commit is contained in:
@@ -0,0 +1,57 @@
|
||||
export default function AgendaSection({
|
||||
data,
|
||||
}: {
|
||||
data: {
|
||||
id: string;
|
||||
eyebrow: string;
|
||||
title: string;
|
||||
description: string;
|
||||
items: { order: string; time: string; title: string; description: string }[];
|
||||
};
|
||||
}) {
|
||||
return (
|
||||
<section className="py-16 lg:py-32 max-w-hd mx-auto px-[var(--spacing-gutter)]" id={data.id}>
|
||||
<div className="flex flex-col xl:flex-row justify-between xl:items-end mb-12 lg:mb-24 gap-8">
|
||||
<div className="max-w-3xl">
|
||||
<span className="font-[var(--font-label-caps)] text-xs lg:text-sm text-primary block mb-4 lg:mb-8 tracking-[0.25em]">
|
||||
{data.eyebrow}
|
||||
</span>
|
||||
<h2 className="font-[var(--font-display-lg)] text-on-surface uppercase tracking-tight text-[clamp(2rem,4vw+1rem,4.5rem)]">
|
||||
{data.title}
|
||||
</h2>
|
||||
</div>
|
||||
<p className="text-on-surface-variant/60 text-base lg:text-[20px] max-w-md xl:text-right">
|
||||
{data.description}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-6 lg:gap-10">
|
||||
{data.items.map((item) => (
|
||||
<div
|
||||
key={item.order}
|
||||
className="glass-panel p-8 lg:p-12 rounded-3xl relative overflow-hidden group hover:border-primary/60 transition-colors"
|
||||
>
|
||||
<div className="absolute top-0 right-0 p-6 lg:p-8">
|
||||
<span className="font-[var(--font-display-lg)] text-2xl lg:text-[40px] text-primary/20 group-hover:text-primary transition-colors">
|
||||
{item.order}
|
||||
</span>
|
||||
</div>
|
||||
<div className="mb-6 lg:mb-10">
|
||||
<span className="font-[var(--font-display-lg)] text-2xl lg:text-[36px] text-primary">
|
||||
{item.time}
|
||||
</span>
|
||||
</div>
|
||||
<h3 className="font-[var(--font-display-lg)] text-2xl lg:text-[32px] text-on-surface mb-4 lg:mb-6">
|
||||
{item.title}
|
||||
</h3>
|
||||
<p className="text-sm lg:text-[18px] text-on-surface-variant/80 leading-relaxed mb-6 lg:mb-8">
|
||||
{item.description}
|
||||
</p>
|
||||
<div className="w-full h-1 bg-primary/10 group-hover:bg-primary transition-colors duration-500" />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -0,0 +1,52 @@
|
||||
import Link from "next/link";
|
||||
|
||||
export default function HeroSection({
|
||||
data,
|
||||
}: {
|
||||
data: {
|
||||
badgeIcon: string;
|
||||
badgeText: string;
|
||||
title: string;
|
||||
subtitle: string;
|
||||
primaryCta: { label: string; href: string };
|
||||
secondaryCta: { label: string; href: string };
|
||||
};
|
||||
}) {
|
||||
return (
|
||||
<section className="relative min-h-[90vh] lg:min-h-screen flex items-center overflow-hidden bg-background hero-glow px-[var(--spacing-gutter)]">
|
||||
<div className="relative z-10 max-w-hd mx-auto w-full">
|
||||
<div className="max-w-7xl">
|
||||
<div className="inline-flex items-center gap-3 lg:gap-4 px-4 lg:px-8 py-2 lg:py-3 rounded-full bg-surface-container-high border border-primary/30 mb-8 lg:mb-16">
|
||||
<span className="material-symbols-outlined text-primary text-[20px] lg:text-[26px]">
|
||||
{data.badgeIcon}
|
||||
</span>
|
||||
<span className="font-[var(--font-label-caps)] text-xs lg:text-[16px] text-on-surface">
|
||||
{data.badgeText}
|
||||
</span>
|
||||
</div>
|
||||
<h1 className="font-[var(--font-display-lg)] text-on-surface mb-6 lg:mb-10 leading-[1.1] text-[clamp(2.25rem,5vw+1rem,6.875rem)]">
|
||||
{data.title}
|
||||
</h1>
|
||||
<p className="text-on-surface-variant text-lg lg:text-[28px] mb-10 lg:mb-20 max-w-4xl leading-relaxed opacity-90">
|
||||
{data.subtitle}
|
||||
</p>
|
||||
<div className="flex flex-col sm:flex-row gap-4 lg:gap-10">
|
||||
<Link
|
||||
href={data.primaryCta.href}
|
||||
className="gold-gradient-bg text-on-primary px-8 lg:px-16 py-5 lg:py-7 font-[var(--font-display-lg)] text-sm lg:text-[20px] font-bold uppercase tracking-widest rounded-xl hover:shadow-[0_0_50px_rgba(197,160,89,0.4)] transition-all text-center"
|
||||
>
|
||||
{data.primaryCta.label}
|
||||
</Link>
|
||||
<Link
|
||||
href={data.secondaryCta.href}
|
||||
className="bg-surface-container-high border border-primary/40 text-on-surface px-8 lg:px-16 py-5 lg:py-7 font-[var(--font-display-lg)] text-sm lg:text-[20px] font-bold uppercase tracking-widest rounded-xl hover:bg-surface-container-highest transition-all text-center"
|
||||
>
|
||||
{data.secondaryCta.label}
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -0,0 +1,28 @@
|
||||
export default function StatsSection({
|
||||
data,
|
||||
}: {
|
||||
data: { id: string; items: { value: string; label: string }[] };
|
||||
}) {
|
||||
return (
|
||||
<section
|
||||
className="py-16 lg:py-32 bg-surface-container-low border-y border-primary/10"
|
||||
id={data.id}
|
||||
>
|
||||
<div className="max-w-hd mx-auto px-[var(--spacing-gutter)]">
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-12 lg:gap-32 text-center">
|
||||
{data.items.map((x) => (
|
||||
<div key={x.label} className="space-y-3 lg:space-y-6">
|
||||
<div className="font-[var(--font-display-lg)] text-5xl lg:text-[96px] text-primary">
|
||||
{x.value}
|
||||
</div>
|
||||
<div className="font-[var(--font-label-caps)] text-sm lg:text-[18px] text-on-surface/80 tracking-widest uppercase">
|
||||
{x.label}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -0,0 +1,49 @@
|
||||
export default function VisionSection({
|
||||
data,
|
||||
}: {
|
||||
data: {
|
||||
eyebrow: string;
|
||||
title: string;
|
||||
paragraphs: string[];
|
||||
cards: { icon: string; title: string; description: string }[];
|
||||
};
|
||||
}) {
|
||||
return (
|
||||
<section className="py-16 lg:py-32 max-w-hd mx-auto px-[var(--spacing-gutter)]">
|
||||
<div className="grid grid-cols-1 lg:grid-cols-12 gap-12 lg:gap-32 items-start">
|
||||
<div className="lg:col-span-5">
|
||||
<span className="font-[var(--font-label-caps)] text-xs lg:text-sm text-primary mb-6 lg:mb-10 block tracking-[0.25em]">
|
||||
{data.eyebrow}
|
||||
</span>
|
||||
<h2 className="font-[var(--font-display-lg)] text-on-surface mb-8 lg:mb-12 leading-tight text-[clamp(2rem,4vw+1rem,4.5rem)]">
|
||||
{data.title}
|
||||
</h2>
|
||||
<div className="space-y-6 lg:space-y-10 text-on-surface-variant text-lg lg:text-[22px] leading-relaxed">
|
||||
{data.paragraphs.map((p) => (
|
||||
<p key={p}>{p}</p>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<div className="lg:col-span-7 grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6 lg:gap-10">
|
||||
{data.cards.map((c) => (
|
||||
<div
|
||||
key={c.title}
|
||||
className="glass-panel p-8 lg:p-12 rounded-2xl group transition-all duration-500 hover:lg:-translate-y-4 hover:shadow-2xl hover:shadow-primary/5"
|
||||
>
|
||||
<span className="material-symbols-outlined text-primary text-[40px] lg:text-[56px] mb-8 lg:mb-12 block">
|
||||
{c.icon}
|
||||
</span>
|
||||
<h3 className="font-[var(--font-display-lg)] text-xl lg:text-[28px] text-on-surface mb-4 lg:mb-6">
|
||||
{c.title}
|
||||
</h3>
|
||||
<p className="text-sm lg:text-[18px] text-on-surface-variant/80 leading-relaxed">
|
||||
{c.description}
|
||||
</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user