24 lines
1.3 KiB
TypeScript
24 lines
1.3 KiB
TypeScript
import { BadgeCheck } from "lucide-react";
|
|
import { motion } from "framer-motion";
|
|
import type { Messages } from "@/messages";
|
|
import AnimatedSection from "./AnimatedSection";
|
|
import SectionHeader from "./SectionHeader";
|
|
|
|
export default function WhyChooseSection({ t }: { t: Messages }) {
|
|
return (
|
|
<AnimatedSection className="px-4 py-20 sm:px-6">
|
|
<div className="mx-auto max-w-7xl">
|
|
<SectionHeader eyebrow={t.why.eyebrow} title={t.why.title} />
|
|
<motion.div className="mt-12 grid gap-4 sm:grid-cols-2 lg:grid-cols-3" initial={false} whileInView="show" viewport={{ once: true, amount: 0.08 }} variants={{ show: { transition: { staggerChildren: 0.07 } } }}>
|
|
{t.why.items.map((item) => (
|
|
<motion.div key={item} variants={{ show: { opacity: 1, y: 0 } }} transition={{ duration: 0.5, ease: [0.22, 1, 0.36, 1] }} whileHover={{ y: -5 }} className="flex min-h-28 items-start gap-4 rounded-[1.7rem] border border-ink/8 bg-white/58 p-5 backdrop-blur transition hover:bg-white hover:shadow-soft">
|
|
<BadgeCheck className="mt-1 shrink-0 text-optical" size={21} />
|
|
<p className="text-base font-semibold leading-7 tracking-[-0.015em] text-ink/74">{item}</p>
|
|
</motion.div>
|
|
))}
|
|
</motion.div>
|
|
</div>
|
|
</AnimatedSection>
|
|
);
|
|
}
|