Refactor ServicesSection: update structure, animations, and styling; add dynamic service data mapping; introduce "Mehr erfahren" link and expand Links configuration.

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
+        <section className="bg-white py-24 px-6 md:px-16 lg:px-36">
-            initial={{ opacity: 0 }}
+            <div className="max-w-3xl mb-16">
-            animate={{ opacity: 1 }}
+                <motion.h2
-            transition={{ duration: 0.6 }}
+                    initial={{opacity: 0, y: 20}}
-            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"
+                    whileInView={{opacity: 1, y: 0}}
-        >
+                    transition={{duration: 0.6}}
-            <section className="mb-32 grid md:grid-cols-2 gap-12 items-center">
+                    viewport={{once: true}}
-                <motion.div
+                    className="text-4xl font-extrabold tracking-tight text-gray-900"
-                    initial={{ opacity: 0, y: 40 }}
-                    whileInView={{ opacity: 1, y: 0 }}
-                    transition={{ duration: 0.8, ease: 'easeOut' }}
-                    viewport={{ once: true, amount: 0.4 }}
                 >
-                    <h2 className="text-4xl font-extrabold mb-4 tracking-tight text-gray-900">
+                    Unsere Fachgebiete
-                        Unsere Fachgebiete
+                </motion.h2>
-                    </h2>
+                <motion.p
-                    <p className="text-xl font-semibold text-gray-800">
+                    initial={{opacity: 0, y: 20}}
-                        Spezialisiert. Fokussiert. Kompetent.
+                    whileInView={{opacity: 1, y: 0}}
-                    </p>
+                    transition={{duration: 0.6, delay: 0.2}}
-                </motion.div>
+                    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
+            <div className="grid md:grid-cols-3 gap-8 mb-12">
-                    initial={{ opacity: 0, y: 40 }}
+                {services.map((service, index) => (
-                    whileInView={{ opacity: 1, y: 0 }}
+                    <motion.div
-                    transition={{ duration: 0.8, ease: 'easeOut', delay: 0.2 }}
+                        key={service.title}
-                    viewport={{ once: true, amount: 0.4 }}
+                        initial={{opacity: 0, y: 30}}
-                    className="text-gray-700 text-lg leading-relaxed space-y-4"
+                        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>
+                    Mehr erfahren zu allen Rechtsgebieten →
-                        <strong className="text-gray-900">Arbeitsrecht:</strong> Wir vertreten Sie bei Kündigungen, Abmahnungen und Vertragsfragen – schnell und zuverlässig.
+                </Link>
-                    </p>
+            </div>
-                    <p>
+        </section>
-                        <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>
     );
 }

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/',