108 lines
3.7 KiB
TypeScript
108 lines
3.7 KiB
TypeScript
"use client";
|
|
|
|
import { useTranslations } from "next-intl";
|
|
import { motion } from "framer-motion";
|
|
import { Waves, UtensilsCrossed, ConciergeBell } from "lucide-react";
|
|
|
|
export function Services() {
|
|
const t = useTranslations("services");
|
|
|
|
const container = {
|
|
hidden: { opacity: 0 },
|
|
show: {
|
|
opacity: 1,
|
|
transition: {
|
|
staggerChildren: 0.15,
|
|
}
|
|
}
|
|
};
|
|
|
|
const item = {
|
|
hidden: { opacity: 0, y: 20 },
|
|
show: { opacity: 1, y: 0, transition: { duration: 0.5, ease: "easeOut" as const } }
|
|
};
|
|
|
|
const services = [
|
|
{
|
|
icon: Waves,
|
|
title: t("service1_title"),
|
|
desc: t("service1_desc"),
|
|
},
|
|
{
|
|
icon: UtensilsCrossed,
|
|
title: t("service2_title"),
|
|
desc: t("service2_desc"),
|
|
},
|
|
{
|
|
icon: ConciergeBell,
|
|
title: t("service3_title"),
|
|
desc: t("service3_desc"),
|
|
},
|
|
];
|
|
|
|
return (
|
|
<section className="bg-surface-container-low dark:bg-inverse-surface/50 py-24" aria-label="Hizmetlerimiz">
|
|
<div className="max-w-7xl mx-auto px-4 md:px-12">
|
|
<div className="text-center max-w-2xl mx-auto mb-16">
|
|
<motion.span
|
|
initial={{ opacity: 0, y: 10 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
viewport={{ once: true }}
|
|
transition={{ duration: 0.5 }}
|
|
className="font-label-sm text-[12px] text-[#CA8A04] dark:text-[#F8BC4B] uppercase tracking-widest mb-4 block font-bold motion-reduce:!transform-none motion-reduce:!opacity-100"
|
|
>
|
|
{t("subtitle")}
|
|
</motion.span>
|
|
<motion.h2
|
|
initial={{ opacity: 0, y: 10 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
viewport={{ once: true }}
|
|
transition={{ duration: 0.5, delay: 0.1 }}
|
|
className="font-heading text-4xl text-primary dark:text-primary-fixed-dim mb-4 font-bold motion-reduce:!transform-none motion-reduce:!opacity-100"
|
|
>
|
|
{t("title")}
|
|
</motion.h2>
|
|
<motion.p
|
|
initial={{ opacity: 0, y: 10 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
viewport={{ once: true }}
|
|
transition={{ duration: 0.5, delay: 0.2 }}
|
|
className="font-body-md text-on-surface-variant dark:text-outline text-lg motion-reduce:!transform-none motion-reduce:!opacity-100"
|
|
style={{ maxWidth: "65ch", margin: "0 auto" }}
|
|
>
|
|
{t("desc")}
|
|
</motion.p>
|
|
</div>
|
|
|
|
<motion.div
|
|
variants={container}
|
|
initial="hidden"
|
|
whileInView="show"
|
|
viewport={{ once: true, margin: "-50px" }}
|
|
className="grid grid-cols-1 md:grid-cols-3 gap-12"
|
|
role="list"
|
|
>
|
|
{services.map((service) => (
|
|
<motion.div
|
|
variants={item}
|
|
key={service.title}
|
|
className="text-center space-y-6 px-4 motion-reduce:!transform-none motion-reduce:!opacity-100"
|
|
role="listitem"
|
|
>
|
|
<div className="w-20 h-20 bg-white dark:bg-primary-container rounded-full flex items-center justify-center mx-auto shadow-md text-primary dark:text-primary-fixed-dim" aria-hidden="true">
|
|
<service.icon className="w-8 h-8" strokeWidth={1.5} />
|
|
</div>
|
|
<div>
|
|
<h3 className="font-heading text-2xl text-primary dark:text-primary-fixed-dim mb-3 font-semibold">{service.title}</h3>
|
|
<p className="font-body-md text-on-surface-variant dark:text-outline leading-relaxed" style={{ maxWidth: "45ch", margin: "0 auto" }}>
|
|
{service.desc}
|
|
</p>
|
|
</div>
|
|
</motion.div>
|
|
))}
|
|
</motion.div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|