first commit

2026-06-16 19:17:37 +03:00
parent 2d149f1178
commit 6fa7cc6630
25 changed files with 1378 additions and 167 deletions
@@ -0,0 +1,107 @@
+"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" } }
+  };
+
+  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>
+  );
+}