Make Navbar responsive to scroll by adding dynamic background and text color transitions

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

@@ -1,28 +1,36 @@
 'use client';
 
+import {useEffect, useState} from 'react';
 import Link from 'next/link';
-import {motion} from 'framer-motion';
+import Links from '@/app/Links';
-import Links from "@/app/Links";
 
 export default function Navbar() {
+    const [scrolled, setScrolled] = useState(false);
+
+    useEffect(() => {
+        const handleScroll = () => {
+            setScrolled(window.scrollY > 30);
+        };
+        window.addEventListener('scroll', handleScroll);
+        return () => window.removeEventListener('scroll', handleScroll);
+    }, []);
+
     return (
-        <motion.nav
+        <nav
-            initial={{y: -50, opacity: 0}}
+            className={`fixed top-0 left-0 right-0 z-50 transition-colors duration-300 px-6 md:px-12 lg:px-24 py-5 ${
-            animate={{y: 0, opacity: 1}}
+                scrolled
-            transition={{duration: 0.5}}
+                    ? 'bg-white text-gray-900 shadow-md'
-            className="fixed top-0 left-0 right-0 z-50 bg-white shadow-md py-4 px-6 md:px-12 lg:px-24 text-gray-900"
+                    : 'bg-transparent text-white'
+            }`}
         >
-            <div className="flex justify-between items-center">
+            <div className="flex justify-between items-center font-sans tracking-wide">
-                <Link href={`/`}>
+                <Link href={Links.home}>
-                    <span className="text-xl font-bold text-blue-800">Kanzlei Mustermann</span>
+                    <span className="text-2xl md:text-3xl font-extrabold">Kanzlei Mustermann</span>
                 </Link>
-                <div className="space-x-6 text-sm md:text-base">
+                <div className="space-x-6 text-base md:text-lg font-semibold">
-                    <Link href={Links.home}>Start</Link>
                     <Link href={Links.about}>Über uns</Link>
-                    <Link href={Links.imprint}>Impressum</Link>
-                    <Link href={Links.privacy}>Datenschutz</Link>
                 </div>
             </div>
-        </motion.nav>
+        </nav>
     );
 }