56 lines
1.6 KiB
TypeScript
56 lines
1.6 KiB
TypeScript
"use client";
|
|
|
|
import { CustomCard } from "@/components/ui/CustomCard";
|
|
import { Section } from "@/components/ui/Section";
|
|
import { SectionHeader } from "@/components/ui/SectionHeader";
|
|
import { useTranslation } from "@/lib/hooks/useTranslation";
|
|
|
|
export function CardSection() {
|
|
const { t } = useTranslation();
|
|
|
|
// Card data from translations
|
|
const cardsData = [
|
|
{
|
|
title: t('cardSection.cards.0.title'),
|
|
description: t('cardSection.cards.0.description'),
|
|
imageSrc: "/assets/images/card1.png",
|
|
imageAlt: t('cardSection.cards.0.imageAlt')
|
|
},
|
|
{
|
|
title: t('cardSection.cards.1.title'),
|
|
description: t('cardSection.cards.1.description'),
|
|
imageSrc: "/assets/images/card2.png",
|
|
imageAlt: t('cardSection.cards.1.imageAlt')
|
|
},
|
|
{
|
|
title: t('cardSection.cards.2.title'),
|
|
description: t('cardSection.cards.2.description'),
|
|
imageSrc: "/assets/images/card3.png",
|
|
imageAlt: t('cardSection.cards.2.imageAlt')
|
|
}
|
|
];
|
|
|
|
return (
|
|
<Section>
|
|
<div className="flex flex-col items-start">
|
|
<SectionHeader
|
|
title={t('cardSection.title')}
|
|
description={t('cardSection.description')}
|
|
className="mb-[60px]"
|
|
/>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-5 w-full">
|
|
{cardsData.map((card, index) => (
|
|
<CustomCard
|
|
key={index}
|
|
title={card.title}
|
|
description={card.description}
|
|
imageSrc={card.imageSrc}
|
|
imageAlt={card.imageAlt}
|
|
/>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</Section>
|
|
);
|
|
}
|