65 lines
2.2 KiB
TypeScript
65 lines
2.2 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 { CardItem } from "@/data/site-pages";
|
|
|
|
interface AnchoredCardGridProps {
|
|
tag?: string;
|
|
title: string;
|
|
description?: string;
|
|
items: CardItem[];
|
|
/** Number of columns at lg breakpoint */
|
|
columns?: 2 | 3;
|
|
}
|
|
|
|
/**
|
|
* AnchoredCardGrid — data-driven grid of bordered cards.
|
|
*
|
|
* Each card carries an `id` so navbar hash links (e.g. /solutions#devops)
|
|
* scroll to it. Shared by the Solutions and Industries pages; composes the
|
|
* existing SectionContainer / PageContainer / SectionHeading primitives.
|
|
*/
|
|
export function AnchoredCardGrid({
|
|
tag,
|
|
title,
|
|
description,
|
|
items,
|
|
columns = 3,
|
|
}: AnchoredCardGridProps) {
|
|
const colClass = columns === 2 ? "md:grid-cols-2" : "md:grid-cols-2 lg:grid-cols-3";
|
|
|
|
return (
|
|
<SectionContainer paddingY="lg" className="bg-white px-[20px]">
|
|
<PageContainer>
|
|
<SectionHeading
|
|
tag={tag}
|
|
title={title}
|
|
description={description}
|
|
titleClassName="text-tenext-dark max-w-[720px]"
|
|
descriptionClassName="max-w-[620px]"
|
|
className="mb-[50px]"
|
|
/>
|
|
|
|
<div className={`grid grid-cols-1 gap-[20px] ${colClass}`}>
|
|
{items.map((item, index) => (
|
|
<RevealOnView key={item.id} delay={index * 90}>
|
|
<div
|
|
id={item.id}
|
|
className="flex h-full scroll-mt-[120px] flex-col gap-[15px] rounded-[25px] border border-tenext-card-border p-[40px] transition-transform duration-300 hover:-translate-y-2"
|
|
>
|
|
<h3 className="font-[var(--font-sora)] text-[22px] font-bold leading-[1.3] text-tenext-dark">
|
|
{item.title}
|
|
</h3>
|
|
<p className="text-[16px] leading-[1.7] text-tenext-text-muted">
|
|
{item.description}
|
|
</p>
|
|
</div>
|
|
</RevealOnView>
|
|
))}
|
|
</div>
|
|
</PageContainer>
|
|
</SectionContainer>
|
|
);
|
|
}
|