40 lines
1.7 KiB
TypeScript
40 lines
1.7 KiB
TypeScript
import { getPageSection } from '@/lib/page';
|
|
import { cn } from '@/lib/utils';
|
|
import Section from '@/pages/intro/partials/section';
|
|
import { usePage } from '@inertiajs/react';
|
|
import { InnerPageProps } from '..';
|
|
|
|
const Team = () => {
|
|
const { props } = usePage<InnerPageProps>();
|
|
const teamSection = getPageSection(props.innerPage, 'team');
|
|
|
|
return (
|
|
<Section
|
|
customize={props.customize}
|
|
pageSection={teamSection}
|
|
containerClass={cn('py-20 md:py-[120px]')}
|
|
contentClass={cn('flex flex-col items-center justify-center gap-7 md:flex-row')}
|
|
>
|
|
<div className="relative w-full space-y-7 md:max-w-[384px]">
|
|
<h1 className="text-2xl font-bold md:text-[30px]">{teamSection?.title}</h1>
|
|
<p className="text-muted-foreground mt-4">{teamSection?.description}</p>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 gap-7 md:grid-cols-4">
|
|
{teamSection?.properties.array.map((stat, index) => (
|
|
<div key={`item-${index}`} className="group relative h-[192px] overflow-hidden rounded-lg">
|
|
<img src={stat.image} alt={stat.title} className="h-full w-full rounded-lg object-cover object-center" />
|
|
|
|
<div className="from-primary dark:from-primary-foreground absolute bottom-0 left-1/2 flex h-full w-full -translate-x-1/2 flex-col justify-end bg-gradient-to-t p-4 text-center opacity-0 transition-all duration-200 group-hover:opacity-100">
|
|
<p className="font-semibold text-white">{stat.name}</p>
|
|
<p className="text-xs text-white">{stat.role}</p>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</Section>
|
|
);
|
|
};
|
|
|
|
export default Team;
|