Introduce RechtsgebietePage and SubpageHero components; enhance Navbar with active route and "Rechtsgebiete" link.

lawfirm-demos/demo-1/app/rechtsbereiche/page.tsx

@@ -0,0 +1,63 @@
+'use client';
+
+import {motion} from 'framer-motion';
+import SubpageHero from "@/components/SubpageHero";
+
+const rechtsgebiete = [
+    {
+        title: 'Arbeitsrecht',
+        lawyer: 'RA Dr. Mustermann',
+        description:
+            'Im Arbeitsrecht vertreten wir sowohl Arbeitnehmer:innen als auch Arbeitgeber:innen in allen Fragen rund um das Arbeitsverhältnis.',
+        example:
+            'Beispiel: Eine Arbeitnehmerin erhält eine fristlose Kündigung und möchte dagegen vorgehen.',
+    },
+    {
+        title: 'Familienrecht',
+        lawyer: 'RAin Künstler',
+        description:
+            'Wir unterstützen Sie in allen familienrechtlichen Angelegenheiten – von Scheidung bis Sorgerecht.',
+        example:
+            'Beispiel: Ein Ehepaar möchte sich einvernehmlich scheiden lassen und das Umgangsrecht für die Kinder regeln.',
+    },
+    {
+        title: 'Vertragsrecht',
+        lawyer: 'RA Dr. Mustermann',
+        description:
+            'Im Vertragsrecht prüfen und gestalten wir Verträge jeder Art und vertreten Sie bei Streitigkeiten.',
+        example:
+            'Beispiel: Ein Unternehmer möchte einen Dienstleistungsvertrag rechtssicher aufsetzen lassen.',
+    },
+];
+
+export default function RechtsgebietePage() {
+    return (
+        <div>
+            <SubpageHero
+                title="Unsere Rechtsgebiete"
+                subtitle="Ein Überblick über unsere Spezialisierungen und Ansprechpartner:innen."
+            />
+
+            <main className="bg-white py-24 px-6 md:px-16 lg:px-36 text-gray-900">
+                <div className="space-y-16">
+                    {rechtsgebiete.map((area, index) => (
+                        <motion.section
+                            key={area.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-l-4 border-red-600 pl-6"
+                        >
+                            <h2 className="text-2xl md:text-3xl font-bold text-red-700 mb-2">{area.title}</h2>
+                            <p className="text-gray-800 text-base md:text-lg mb-2">{area.description}</p>
+                            <p className="text-gray-700 text-sm md:text-base mb-1 italic">{area.example}</p>
+                            <p className="text-sm text-gray-500">Zuständig: <span
+                                className="font-medium">{area.lawyer}</span></p>
+                        </motion.section>
+                    ))}
+                </div>
+            </main>
+        </div>
+    );
+}