forked from UKSOURCE/ipv6
50 lines
1.8 KiB
TypeScript
50 lines
1.8 KiB
TypeScript
export default function VisionSection({
|
|
data,
|
|
}: {
|
|
data: {
|
|
eyebrow: string;
|
|
title: string;
|
|
paragraphs: string[];
|
|
cards: { icon: string; title: string; description: string }[];
|
|
};
|
|
}) {
|
|
return (
|
|
<section className="py-12 lg:py-20 max-w-hd mx-auto px-[var(--spacing-gutter)]">
|
|
<div className="grid grid-cols-1 lg:grid-cols-12 gap-8 lg:gap-16 items-start">
|
|
<div className="lg:col-span-4">
|
|
<span className="font-[var(--font-label-caps)] text-xs text-primary mb-4 lg:mb-6 block tracking-[0.25em]">
|
|
{data.eyebrow}
|
|
</span>
|
|
<h2 className="font-[var(--font-display-lg)] text-on-surface mb-6 lg:mb-8 leading-tight text-[clamp(1.5rem,2vw+0.75rem,2.5rem)]">
|
|
{data.title}
|
|
</h2>
|
|
<div className="space-y-4 text-on-surface-variant text-sm lg:text-base leading-relaxed">
|
|
{data.paragraphs.map((p) => (
|
|
<p key={p}>{p}</p>
|
|
))}
|
|
</div>
|
|
</div>
|
|
<div className="lg:col-span-8 grid grid-cols-1 sm:grid-cols-3 gap-4 lg:gap-6">
|
|
{data.cards.map((c) => (
|
|
<div
|
|
key={c.title}
|
|
className="glass-panel p-5 lg:p-7 rounded-2xl group transition-all duration-500 hover:lg:-translate-y-3 hover:shadow-2xl hover:shadow-primary/5"
|
|
>
|
|
<span className="material-symbols-outlined text-primary text-[28px] lg:text-[36px] mb-4 lg:mb-5 block">
|
|
{c.icon}
|
|
</span>
|
|
<h3 className="font-[var(--font-display-lg)] text-base lg:text-lg text-on-surface mb-2 lg:mb-3">
|
|
{c.title}
|
|
</h3>
|
|
<p className="text-xs lg:text-sm text-on-surface-variant/80 leading-relaxed">
|
|
{c.description}
|
|
</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|
|
|