63 lines
2.0 KiB
TypeScript
63 lines
2.0 KiB
TypeScript
import { motion } from 'framer-motion';
|
|
import {
|
|
MessageCircle,
|
|
ShieldCheck,
|
|
Sparkles,
|
|
Target,
|
|
type LucideIcon,
|
|
} from 'lucide-react';
|
|
import { useTranslation } from 'react-i18next';
|
|
|
|
import { SectionHeader } from './Services';
|
|
|
|
type Key = 'senior' | 'delivery' | 'communication' | 'quality';
|
|
|
|
const PILLARS: { key: Key; Icon: LucideIcon }[] = [
|
|
{ key: 'senior', Icon: Sparkles },
|
|
{ key: 'delivery', Icon: Target },
|
|
{ key: 'communication', Icon: MessageCircle },
|
|
{ key: 'quality', Icon: ShieldCheck },
|
|
];
|
|
|
|
export function WhyUs() {
|
|
const { t } = useTranslation();
|
|
|
|
return (
|
|
<section id="whyus" className="section">
|
|
<div className="container-rl">
|
|
<SectionHeader
|
|
eyebrow={t('whyus.eyebrow')}
|
|
title={t('whyus.title')}
|
|
/>
|
|
|
|
<div className="mt-14 grid gap-6 sm:grid-cols-2 lg:grid-cols-4">
|
|
{PILLARS.map(({ key, Icon }, index) => (
|
|
<motion.div
|
|
key={key}
|
|
initial={{ opacity: 0, y: 24 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
viewport={{ once: true, margin: '-80px' }}
|
|
transition={{
|
|
duration: 0.5,
|
|
delay: index * 0.07,
|
|
ease: [0.4, 0, 0.2, 1],
|
|
}}
|
|
className="group relative rounded-xl border border-border bg-bg p-6 transition-all duration-300 hover:-translate-y-1 hover:border-primary/50 hover:shadow-md"
|
|
>
|
|
<div className="flex h-12 w-12 items-center justify-center rounded-full bg-primary text-primary-fg transition-transform group-hover:scale-110">
|
|
<Icon className="h-5 w-5" aria-hidden="true" />
|
|
</div>
|
|
<h3 className="heading mt-5 text-lg">
|
|
{t(`whyus.items.${key}.title`)}
|
|
</h3>
|
|
<p className="mt-2 text-sm text-fg-muted leading-relaxed">
|
|
{t(`whyus.items.${key}.description`)}
|
|
</p>
|
|
</motion.div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|