72 lines
2.1 KiB
TypeScript
72 lines
2.1 KiB
TypeScript
'use client';
|
|
|
|
import { Handshake } from 'lucide-react';
|
|
import { useMemo } from 'react';
|
|
|
|
import { Partners } from '@/app/api-utlities/@types';
|
|
|
|
import { useTextController } from '@/shared/language/hooks/use-text-controller';
|
|
import { Button } from '@/shared/shadcn-ui/button';
|
|
|
|
import { PartnersSlider } from './partners-slider';
|
|
|
|
interface PartnersSectionProps {
|
|
partners: Partners;
|
|
}
|
|
|
|
export const PartnersSection = ({ partners }: PartnersSectionProps) => {
|
|
const { t } = useTextController();
|
|
|
|
const [partnersFirstHalf, partnersSecondHalf] = useMemo(() => {
|
|
const length = partners.length;
|
|
const midPoint = Math.floor(length / 2);
|
|
|
|
const partnersFirstHalf = partners.slice(0, midPoint);
|
|
const partnersSecondHalf = partners.slice(midPoint);
|
|
|
|
return [partnersFirstHalf, partnersSecondHalf];
|
|
}, [partners]);
|
|
|
|
return (
|
|
<section id='partners' className='bg-gray-50 py-8 sm:py-16'>
|
|
<div className='mx-auto'>
|
|
<div className='mb-12 flex flex-col items-center justify-center text-center'>
|
|
<div className='mb-4 inline-flex items-center justify-center rounded-full bg-red-100 p-2'>
|
|
<Handshake className='h-6 w-6 text-red-600' />
|
|
</div>
|
|
<h2 className='mb-4 text-3xl font-bold tracking-tight sm:text-4xl'>
|
|
{t('home.partners.title')}
|
|
</h2>
|
|
<p className='max-w-2xl text-gray-600'>
|
|
{t('home.partners.description')}
|
|
</p>
|
|
</div>
|
|
|
|
<PartnersSlider
|
|
partners={partnersFirstHalf}
|
|
autoplaySpeed={3000}
|
|
className='mb-12'
|
|
/>
|
|
|
|
<PartnersSlider
|
|
partners={partnersSecondHalf}
|
|
autoplaySpeed={4000}
|
|
direction='rtl'
|
|
/>
|
|
|
|
<div className='mt-12 text-center'>
|
|
<h3 className='mb-4 text-xl font-bold'>
|
|
{t('home.partners.becomePartner')}
|
|
</h3>
|
|
<p className='mx-auto mb-6 max-w-2xl text-gray-600'>
|
|
{t('home.partners.becomePartnerText')}
|
|
</p>
|
|
<Button className='bg-red-600 hover:bg-red-700'>
|
|
{t('common.buttons.contactUs')}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|