86 lines
3.0 KiB
TypeScript
86 lines
3.0 KiB
TypeScript
import { SectionContainer } from "@/components/shared/SectionContainer";
|
|
import { PageContainer } from "@/components/shared/PageContainer";
|
|
import { SectionHeading } from "@/components/shared/SectionHeading";
|
|
import { RevealOnView } from "@/components/shared/RevealOnView";
|
|
import { Icon } from "@/components/shared/Icon";
|
|
import { IconCard } from "@/data/about";
|
|
|
|
interface IconCardGridProps {
|
|
id?: string;
|
|
eyebrow?: string;
|
|
title: string;
|
|
description?: string;
|
|
items: IconCard[];
|
|
columns?: 2 | 3 | 4;
|
|
theme?: "light" | "surface" | "dark";
|
|
}
|
|
|
|
const colClass: Record<number, string> = {
|
|
2: "sm:grid-cols-2",
|
|
3: "sm:grid-cols-2 lg:grid-cols-3",
|
|
4: "sm:grid-cols-2 lg:grid-cols-4",
|
|
};
|
|
|
|
/**
|
|
* IconCardGrid — reusable premium icon-card section for the About page.
|
|
* Powers Mission/Vision/Values, Why Tenext, Capabilities, Technology
|
|
* Ecosystem, and Enterprise Trust with a single, consistent card.
|
|
*/
|
|
export function IconCardGrid({
|
|
id,
|
|
eyebrow,
|
|
title,
|
|
description,
|
|
items,
|
|
columns = 3,
|
|
theme = "light",
|
|
}: IconCardGridProps) {
|
|
const isDark = theme === "dark";
|
|
const sectionBg =
|
|
theme === "dark"
|
|
? "bg-tenext-dark"
|
|
: theme === "surface"
|
|
? "bg-tenext-surface-muted"
|
|
: "bg-white";
|
|
|
|
const cardBase = isDark
|
|
? "border-white/10 bg-white/[0.03] hover:border-tenext-teal/40"
|
|
: "border-tenext-card-border bg-white hover:border-tenext-teal/50";
|
|
const titleColor = isDark ? "text-white" : "text-tenext-dark";
|
|
|
|
return (
|
|
<SectionContainer id={id} paddingY="lg" className={`${sectionBg} px-[20px] scroll-mt-[110px]`}>
|
|
<PageContainer>
|
|
<SectionHeading
|
|
tag={eyebrow}
|
|
title={title}
|
|
description={description}
|
|
titleClassName={`${titleColor} max-w-[760px]`}
|
|
descriptionClassName={`max-w-[640px] ${isDark ? "text-tenext-text-muted" : ""}`}
|
|
className="mb-[50px]"
|
|
/>
|
|
|
|
<div className={`grid grid-cols-1 gap-[20px] ${colClass[columns]}`}>
|
|
{items.map((item, index) => (
|
|
<RevealOnView key={item.title} delay={index * 80}>
|
|
<div
|
|
className={`group flex h-full flex-col gap-[16px] rounded-[25px] border p-[35px] transition-all duration-300 hover:-translate-y-2 hover:shadow-[0_22px_55px_rgba(31,31,31,0.12)] ${cardBase}`}
|
|
>
|
|
<span className="flex h-[54px] w-[54px] items-center justify-center rounded-[15px] bg-tenext-teal/10 text-tenext-teal transition-colors duration-300 group-hover:bg-tenext-teal group-hover:text-tenext-dark">
|
|
<Icon name={item.icon} className="h-[26px] w-[26px]" />
|
|
</span>
|
|
<h3 className={`font-[var(--font-sora)] text-[20px] font-bold leading-[1.3] ${titleColor}`}>
|
|
{item.title}
|
|
</h3>
|
|
<p className="text-[15px] leading-[1.7] text-tenext-text-muted">
|
|
{item.description}
|
|
</p>
|
|
</div>
|
|
</RevealOnView>
|
|
))}
|
|
</div>
|
|
</PageContainer>
|
|
</SectionContainer>
|
|
);
|
|
}
|