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

lawfirm-demos/demo-1/components/Navbar.tsx

@@ -3,9 +3,13 @@
 import {useEffect, useState} from 'react';
 import Link from 'next/link';
 import Links from '@/app/Links';
+import {usePathname} from 'next/navigation';
 
 export default function Navbar() {
     const [scrolled, setScrolled] = useState(false);
+    const pathname = usePathname();
+
+    const isRoot = pathname === '/';
 
     useEffect(() => {
         const handleScroll = () => {
@@ -15,10 +19,12 @@ export default function Navbar() {
         return () => window.removeEventListener('scroll', handleScroll);
     }, []);
 
+    const isActiveScrolled = scrolled || !isRoot;
+
     return (
         <nav
             className={`fixed top-0 left-0 right-0 z-50 transition-colors duration-300 px-6 md:px-12 lg:px-24 py-5 ${
-                scrolled
+                isActiveScrolled
                     ? 'bg-white text-gray-900 shadow-md'
                     : 'bg-transparent text-white'
             }`}
@@ -29,8 +35,9 @@ export default function Navbar() {
                 </Link>
                 <div className="space-x-6 text-base md:text-lg font-semibold">
                     <Link href={Links.about}>Über uns</Link>
+                    <Link href={Links.legalFields}>Rechtsgebiete</Link>
                 </div>
             </div>
         </nav>
     );
-}
+}

lawfirm-demos/demo-1/components/SubpageHero.tsx

@@ -0,0 +1,36 @@
+'use client';
+
+import {motion} from 'framer-motion';
+
+export default function SubpageHero({
+                                        title,
+                                        subtitle,
+                                    }: {
+    title: string;
+    subtitle?: string;
+}) {
+    return (
+        <section className="relative min-h-[35vh] flex items-center bg-white px-6 md:px-16 lg:px-36 pt-24">
+            <div className="z-10 flex flex-col gap-y-2">
+                <motion.h1
+                    initial={{opacity: 0, y: 20}}
+                    animate={{opacity: 1, y: 0}}
+                    transition={{duration: 0.6}}
+                    className="text-4xl font-extrabold text-gray-900 leading-snug text-balance"
+                >
+                    {title}
+                </motion.h1>
+                {subtitle && (
+                    <motion.p
+                        initial={{opacity: 0, y: 20}}
+                        animate={{opacity: 1, y: 0}}
+                        transition={{duration: 0.6, delay: 0.1}}
+                        className="text-lg text-gray-600"
+                    >
+                        {subtitle}
+                    </motion.p>
+                )}
+            </div>
+        </section>
+    );
+}