34 lines
1.3 KiB
TypeScript
34 lines
1.3 KiB
TypeScript
import React from 'react';
|
|
import { useTranslations } from 'next-intl';
|
|
import { Section, Container } from '../../components/ui';
|
|
|
|
export default function WhyChooseUs() {
|
|
const t = useTranslations('Home.whyChooseUs');
|
|
|
|
return (
|
|
<Section className="bg-white text-neutral-dark">
|
|
<Container>
|
|
<div className="grid grid-cols-1 lg:grid-cols-12 gap-12">
|
|
<div className="lg:col-span-4">
|
|
<div className="sticky top-24">
|
|
<h2 className="text-5xl font-bold text-primary mb-6">{t('title')}</h2>
|
|
<p className="text-xl text-text-secondary">
|
|
{t('subtitle')}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div className="lg:col-span-8 grid grid-cols-1 md:grid-cols-2 gap-x-12 gap-y-16">
|
|
{[0, 1, 2, 3].map((idx) => (
|
|
<div key={idx} className="space-y-4">
|
|
<span className="text-sm font-mono text-primary/60 border-b border-primary/20 pb-2 block w-fit">0{idx + 1}</span>
|
|
<h3 className="text-2xl font-bold">{t(`items.${idx}.title`)}</h3>
|
|
<p className="text-text-secondary leading-relaxed">{t(`items.${idx}.description`)}</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</Container>
|
|
</Section>
|
|
);
|
|
}
|