32 lines
1.7 KiB
TypeScript
32 lines
1.7 KiB
TypeScript
import { Eye, Glasses, HeartHandshake, LifeBuoy, Sparkles, Wrench } from "lucide-react";
|
|
import { motion } from "framer-motion";
|
|
import type { Messages } from "@/messages";
|
|
import AnimatedSection from "./AnimatedSection";
|
|
import SectionHeader from "./SectionHeader";
|
|
|
|
const icons = [Eye, Wrench, Glasses, Sparkles, HeartHandshake, LifeBuoy];
|
|
|
|
export default function ServicesSection({ t }: { t: Messages }) {
|
|
return (
|
|
<AnimatedSection id="services" className="px-4 py-20 sm:px-6">
|
|
<div className="mx-auto max-w-7xl">
|
|
<SectionHeader eyebrow={t.services.eyebrow} title={t.services.title} />
|
|
<motion.div className="mt-12 grid gap-4 md:grid-cols-2 lg:grid-cols-3" initial={false} whileInView="show" viewport={{ once: true, amount: 0.08 }} variants={{ show: { transition: { staggerChildren: 0.08 } } }}>
|
|
{t.services.items.map((item, index) => {
|
|
const Icon = icons[index];
|
|
return (
|
|
<motion.article key={item.title} variants={{ show: { opacity: 1, y: 0, scale: 1 } }} transition={{ duration: 0.55, ease: [0.22, 1, 0.36, 1] }} whileHover={{ y: -8 }} className="group rounded-[2rem] border border-ink/8 bg-white/72 p-6 shadow-sm backdrop-blur transition duration-300 hover:border-optical/20 hover:shadow-soft">
|
|
<div className="mb-8 grid size-12 place-items-center rounded-2xl bg-ink text-white transition group-hover:bg-optical">
|
|
<Icon size={20} />
|
|
</div>
|
|
<h3 className="text-xl font-semibold tracking-[-0.035em] text-ink">{item.title}</h3>
|
|
<p className="mt-3 text-sm leading-7 text-ink/58">{item.text}</p>
|
|
</motion.article>
|
|
);
|
|
})}
|
|
</motion.div>
|
|
</div>
|
|
</AnimatedSection>
|
|
);
|
|
}
|