85 lines
2.8 KiB
TypeScript
85 lines
2.8 KiB
TypeScript
import Image from "next/image";
|
|
import React from "react";
|
|
|
|
// Interface for individual feature card
|
|
interface FeatureCard {
|
|
id: string | number;
|
|
imageUrl: string;
|
|
imageAlt: string;
|
|
title: string;
|
|
description: string;
|
|
}
|
|
|
|
// Interface for the whole section
|
|
interface FeatureCardSectionProps {
|
|
titleColoredText: string;
|
|
titleBoldText: string;
|
|
description: string;
|
|
cards: FeatureCard[];
|
|
gridColumns?: 1 | 2 | 3 | 4; // Number of columns in the grid
|
|
className?: string;
|
|
}
|
|
|
|
const FeatureCardSection: React.FC<FeatureCardSectionProps> = ({
|
|
titleColoredText,
|
|
titleBoldText,
|
|
description,
|
|
cards,
|
|
gridColumns = 3,
|
|
className,
|
|
}) => {
|
|
// Determine grid columns class
|
|
const gridClass = {
|
|
1: "grid-cols-1",
|
|
2: "grid-cols-1 md:grid-cols-2",
|
|
3: "grid-cols-1 md:grid-cols-2 lg:grid-cols-3",
|
|
4: "grid-cols-1 md:grid-cols-2 lg:grid-cols-4",
|
|
}[gridColumns];
|
|
|
|
return (
|
|
<section className={`feature-card-section ${className || ""}`}>
|
|
<div className="w-10/12 mx-auto py-16">
|
|
<div className="max-w-[750px] mx-auto mb-10">
|
|
<div className="text-center">
|
|
<span className="text-[#6a47ed] text-center text-2xl md:text-5xl font-light font-['Inter'] leading-[28px] md:leading-[48px]">
|
|
{titleColoredText}
|
|
</span>
|
|
<span className="text-[#434343] text-center text-2xl md:text-5xl font-bold font-['Inter'] leading-[28px] md:leading-[48px]">
|
|
{" " + titleBoldText}
|
|
</span>
|
|
</div>
|
|
<div className="max-w-[750px] mt-4 text-center text-[#9b97bb] text-sm md:text-base font-normal font-['Inter'] leading-normal">
|
|
{description}
|
|
</div>
|
|
</div>
|
|
|
|
<div className={`grid ${gridClass} gap-6 justify-center`}>
|
|
{cards.map((card) => (
|
|
<div
|
|
key={card.id}
|
|
className="marketing-card w-full max-w-[404px] h-[400px] md:h-[450px] bg-white rounded-[20px] border border-[#ebebeb] mx-auto"
|
|
>
|
|
<div className="shadow-md rounded-3xl flex justify-center m-2 h-48 md:h-64 overflow-hidden">
|
|
<Image
|
|
src={card.imageUrl}
|
|
alt={card.imageAlt}
|
|
width={360}
|
|
height={480}
|
|
className="h-full w-full"
|
|
/>
|
|
</div>
|
|
<div className="text-[#252525] w-[90%] mx-auto mt-[20px] text-2xl font-semibold font-['Inter']">
|
|
{card.title}
|
|
</div>
|
|
<div className="w-[90%] h-[93px] mx-auto my-5 text-[#aaaaaa] text-sm font-normal font-['Inter'] leading-[21px]">
|
|
{card.description}
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export default FeatureCardSection;
|