import Card from "./card";
import { sitePageName, TSitePageName } from "./card/data";

const Services = () => {
	return (
		<div className='basis-8/12 bg-white shadow-[0_0_32px_0_#00000014] p-6 flex flex-col gap-8 h-[calc(100vh_-_133px_-_95px_-15px_-_26px)]'>
			<h3 className='font-semibold text-[24px] leading-[100%] text-black-color p-2.5'>
				FLOW Modules
			</h3>
			<div className='grid grid-cols-[repeat(3,minmax(0,1fr))] gap-x-8 gap-y-[64px] p-0.5 overflow-y-scroll'>
				{sitePageName.map((item: TSitePageName) => (
					<Card key={item.name} data={item} />
				))}
			</div>
		</div>
	);
};

export default Services;