From caea958dc32120e4888946de8b7b19d26c0edb56 Mon Sep 17 00:00:00 2001
From: Thatsaphorn Atchariyaphap <thatsaphorn@outlook.de>
Date: Sun, 22 Jun 2025 18:25:29 +0900
Subject: [PATCH] Refactor `ServicesSection`: update structure, animations, and
 styling; add dynamic service data mapping; introduce "Mehr erfahren" link and
 expand `Links` configuration.

---
 .../demo-1/app/(root)/ServicesSection.tsx     | 104 +++++++++++-------
 lawfirm-demos/demo-1/app/Links.ts             |   2 +
 2 files changed, 68 insertions(+), 38 deletions(-)

diff --git a/lawfirm-demos/demo-1/app/(root)/ServicesSection.tsx b/lawfirm-demos/demo-1/app/(root)/ServicesSection.tsx
index d9a59c0..06d9314 100644
--- a/lawfirm-demos/demo-1/app/(root)/ServicesSection.tsx
+++ b/lawfirm-demos/demo-1/app/(root)/ServicesSection.tsx
@@ -1,48 +1,76 @@
 'use client';
 
-import { motion } from 'framer-motion';
+import {motion} from 'framer-motion';
+import Link from 'next/link';
+import Links from "@/app/Links";
+
+const services = [
+    {
+        title: 'Arbeitsrecht',
+        description:
+            'Ob Kündigung, Aufhebungsvertrag oder Streit mit dem Arbeitgeber – wir beraten Sie rund um Ihre Rechte und Pflichten im Arbeitsverhältnis.',
+    },
+    {
+        title: 'Familienrecht',
+        description:
+            'Trennung, Scheidung oder Unterhalt? Wir unterstützen Sie bei allen rechtlichen Fragen rund um Familie, Ehe und Kinder – mit Empathie und Erfahrung.',
+    },
+    {
+        title: 'Vertragsrecht',
+        description:
+            'Von der Vertragsprüfung bis zur rechtssicheren Gestaltung: Wir helfen Ihnen, Ihre Interessen in Verträgen klar und wirksam zu verankern.',
+    },
+];
 
 export default function ServicesSection() {
     return (
-        <motion.div
-            initial={{ opacity: 0 }}
-            animate={{ opacity: 1 }}
-            transition={{ duration: 0.6 }}
-            className="pt-20 pb-20 px-6 md:px-16 lg:px-36 bg-gradient-to-b from-white to-gray-50 text-gray-900"
-        >
-            <section className="mb-32 grid md:grid-cols-2 gap-12 items-center">
-                <motion.div
-                    initial={{ opacity: 0, y: 40 }}
-                    whileInView={{ opacity: 1, y: 0 }}
-                    transition={{ duration: 0.8, ease: 'easeOut' }}
-                    viewport={{ once: true, amount: 0.4 }}
+        <section className="bg-white py-24 px-6 md:px-16 lg:px-36">
+            <div className="max-w-3xl mb-16">
+                <motion.h2
+                    initial={{opacity: 0, y: 20}}
+                    whileInView={{opacity: 1, y: 0}}
+                    transition={{duration: 0.6}}
+                    viewport={{once: true}}
+                    className="text-4xl font-extrabold tracking-tight text-gray-900"
                 >
-                    <h2 className="text-4xl font-extrabold mb-4 tracking-tight text-gray-900">
-                        Unsere Fachgebiete
-                    </h2>
-                    <p className="text-xl font-semibold text-gray-800">
-                        Spezialisiert. Fokussiert. Kompetent.
-                    </p>
-                </motion.div>
+                    Unsere Fachgebiete
+                </motion.h2>
+                <motion.p
+                    initial={{opacity: 0, y: 20}}
+                    whileInView={{opacity: 1, y: 0}}
+                    transition={{duration: 0.6, delay: 0.2}}
+                    viewport={{once: true}}
+                    className="mt-4 text-lg text-gray-600"
+                >
+                    Wir bieten fundierte Beratung und engagierte Vertretung in verschiedenen Kernbereichen des Rechts.
+                    Unsere Spezialisierung ist Ihr Vorteil.
+                </motion.p>
+            </div>
 
-                <motion.div
-                    initial={{ opacity: 0, y: 40 }}
-                    whileInView={{ opacity: 1, y: 0 }}
-                    transition={{ duration: 0.8, ease: 'easeOut', delay: 0.2 }}
-                    viewport={{ once: true, amount: 0.4 }}
-                    className="text-gray-700 text-lg leading-relaxed space-y-4"
+            <div className="grid md:grid-cols-3 gap-8 mb-12">
+                {services.map((service, index) => (
+                    <motion.div
+                        key={service.title}
+                        initial={{opacity: 0, y: 30}}
+                        whileInView={{opacity: 1, y: 0}}
+                        viewport={{once: true, amount: 0.2}}
+                        transition={{duration: 0.6, delay: index * 0.1}}
+                        className="border border-gray-200 bg-neutral-100 hover:bg-white rounded-2xl shadow-sm hover:shadow-md p-6 transition"
+                    >
+                        <h3 className="text-xl font-bold mb-3 text-blue-400">{service.title}</h3>
+                        <p className="text-gray-700 text-base leading-relaxed">{service.description}</p>
+                    </motion.div>
+                ))}
+            </div>
+
+            <div className="max-w-3xl">
+                <Link
+                    href={Links.legalFields}
+                    className="inline-block text-gray-600 font-medium text-lg hover:underline transition"
                 >
-                    <p>
-                        <strong className="text-gray-900">Arbeitsrecht:</strong> Wir vertreten Sie bei Kündigungen, Abmahnungen und Vertragsfragen – schnell und zuverlässig.
-                    </p>
-                    <p>
-                        <strong className="text-gray-900">Familienrecht:</strong> Von Scheidung bis Sorgerecht – wir stehen Ihnen empathisch und professionell zur Seite.
-                    </p>
-                    <p>
-                        <strong className="text-gray-900">Vertragsrecht:</strong> Klare Verträge für klare Verhältnisse – ob privat oder geschäftlich, wir sichern Ihre Interessen rechtlich ab.
-                    </p>
-                </motion.div>
-            </section>
-        </motion.div>
+                    Mehr erfahren zu allen Rechtsgebieten →
+                </Link>
+            </div>
+        </section>
     );
 }
diff --git a/lawfirm-demos/demo-1/app/Links.ts b/lawfirm-demos/demo-1/app/Links.ts
index 9ed2e4a..23dc868 100644
--- a/lawfirm-demos/demo-1/app/Links.ts
+++ b/lawfirm-demos/demo-1/app/Links.ts
@@ -1,5 +1,7 @@
 const Links = {
     home: '/',
+    lawfirm: 'kanzlei',
+    legalFields: 'rechtsbereiche',
     about: '/ueber-uns/',
     imprint: '/impressum/',
     privacy: '/datenschutz/',