37 lines
1.2 KiB
TypeScript
37 lines
1.2 KiB
TypeScript
|
'use client';
|
||
|
|
|
||
|
|
import Image from 'next/image';
|
||
|
|
|
||
|
|
interface SpecializationCardProps {
|
||
|
|
title: string;
|
||
|
|
items: string[];
|
||
|
|
icon: React.ReactNode;
|
||
|
|
}
|
||
|
|
|
||
|
|
export function SpecializationCard({ title, items, icon }: SpecializationCardProps) {
|
||
|
|
return (
|
||
|
|
<div className="bg-white rounded-[20px] p-6 text-center flex flex-col h-full border-[0.7px] border-[#E58625]">
|
||
|
|
<div className="flex justify-center mb-3">{icon}</div>
|
||
|
|
<h4 className="font-bold text-[#00293D] text-[14px] leading-[17px] mb-4 font-fractul">{title}</h4>
|
||
|
|
<div className="flex-1">
|
||
|
|
{items.map((item, idx) => (
|
||
|
|
<p key={idx} className="text-[#00293D] text-[14px] leading-[25px] font-normal font-serif text-center">
|
||
|
|
{item}
|
||
|
|
</p>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
<div className="mt-4 flex justify-center">
|
||
|
|
<button className="inline-flex items-center justify-center gap-1 h-[20px] w-[87px] border border-[#e58625] rounded-[20px] text-[#e58625] text-[10px] leading-[22px] font-bold font-serif hover:bg-[#e58625]/5 transition-colors">
|
||
|
|
Show More
|
||
|
|
<Image
|
||
|
|
src="/assets/icons/chevron-down-icon.svg"
|
||
|
|
alt="Show more"
|
||
|
|
width={10}
|
||
|
|
height={10}
|
||
|
|
/>
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|