23 lines
1.4 KiB
TypeScript
23 lines
1.4 KiB
TypeScript
import type { Messages } from "@/messages";
|
|
import { motion } from "framer-motion";
|
|
import AnimatedSection from "./AnimatedSection";
|
|
import SectionHeader from "./SectionHeader";
|
|
|
|
export default function TrustSection({ t }: { t: Messages }) {
|
|
return (
|
|
<AnimatedSection id="trust" className="px-4 pb-8 pt-16 sm:px-6 sm:py-20">
|
|
<div className="mx-auto max-w-7xl overflow-hidden rounded-[3rem] bg-ink p-8 text-white shadow-glass sm:p-12 lg:p-16">
|
|
<SectionHeader eyebrow={t.trust.eyebrow} title={t.trust.title} body={t.trust.body} tone="dark" />
|
|
<motion.div className="mt-12 grid gap-4 md:grid-cols-3" initial={false} whileInView="show" viewport={{ once: true, amount: 0.08 }} variants={{ show: { transition: { staggerChildren: 0.12 } } }}>
|
|
{t.trust.stats.map((stat) => (
|
|
<motion.div key={stat.value} variants={{ show: { opacity: 1, y: 0, scale: 1 } }} transition={{ duration: 0.65, ease: [0.22, 1, 0.36, 1] }} whileHover={{ y: -6 }} className="rounded-[2rem] border border-white/10 bg-white/[0.06] p-6 text-center backdrop-blur">
|
|
<p className="mb-4 text-xs font-semibold uppercase tracking-[0.22em] text-white/64">{stat.label}</p>
|
|
<p className="text-5xl font-semibold tracking-[-0.06em] text-white">{stat.value}</p>
|
|
</motion.div>
|
|
))}
|
|
</motion.div>
|
|
</div>
|
|
</AnimatedSection>
|
|
);
|
|
}
|