51 lines
2.4 KiB
TypeScript
51 lines
2.4 KiB
TypeScript
import React from 'react';
|
|
import { useTranslations } from 'next-intl';
|
|
import { Section, Container, Heading } from '../../components/ui';
|
|
|
|
export default function WhyChooseUs() {
|
|
const t = useTranslations('Home.whyChooseUs');
|
|
|
|
return (
|
|
<Section className="bg-neutral-light text-neutral-dark">
|
|
<Container>
|
|
<div className="grid grid-cols-1 lg:grid-cols-12 gap-16 lg:gap-24">
|
|
<div className="lg:col-span-4 order-1 lg:order-2">
|
|
<div className="sticky top-32">
|
|
<Heading level={2} subtitle={t('whyKlz')}>
|
|
{t('title')}
|
|
</Heading>
|
|
<p className="text-xl text-text-secondary leading-relaxed">
|
|
{t('subtitle')}
|
|
</p>
|
|
|
|
<div className="mt-12 space-y-6">
|
|
{[0, 1, 2, 3].map((i) => (
|
|
<div key={i} className="flex items-center gap-4">
|
|
<div className="flex-shrink-0 w-6 h-6 rounded-full bg-accent flex items-center justify-center">
|
|
<svg className="w-4 h-4 text-primary-dark" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={3} d="M5 13l4 4L19 7" />
|
|
</svg>
|
|
</div>
|
|
<span className="font-bold text-saturated">{t(`features.${i}`)}</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="lg:col-span-8 grid grid-cols-1 md:grid-cols-2 gap-8 order-2 lg:order-1">
|
|
{[0, 1, 2, 3].map((idx) => (
|
|
<div key={idx} className="p-10 bg-white rounded-3xl border border-neutral-medium hover:border-accent transition-all duration-500 hover:shadow-xl group">
|
|
<div className="w-14 h-14 bg-saturated/10 rounded-2xl flex items-center justify-center mb-8 group-hover:bg-accent transition-colors duration-500">
|
|
<span className="text-saturated font-bold text-xl group-hover:text-primary-dark">0{idx + 1}</span>
|
|
</div>
|
|
<h3 className="text-2xl font-bold mb-4 text-saturated">{t(`items.${idx}.title`)}</h3>
|
|
<p className="text-text-secondary text-lg leading-relaxed">{t(`items.${idx}.description`)}</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</Container>
|
|
</Section>
|
|
);
|
|
}
|