redesigned app for cleaner ux

src/Components/Navbar/MenuContent.tsx

@@ -0,0 +1,49 @@
+import { motion } from "framer-motion";
+
+interface MenuContentProps {
+  navigation: { title: string; path: string }[];
+  activeSection: string;
+  handleNavigation: (path: string) => void;
+}
+
+const MenuContent = ({
+  navigation,
+  activeSection,
+  handleNavigation,
+}: MenuContentProps) => {
+  return (
+    <ul className="flex items-center gap-8">
+      {navigation.map((item, idx) => {
+        const isActive = activeSection === item.path;
+        return (
+          <li key={idx}>
+            <motion.a
+              href={item.path}
+              className="relative block text-sm font-medium tracking-wide"
+              animate={{ color: isActive ? "#ffffff" : "rgba(255,255,255,0.55)" }}
+              whileHover={{ color: "#ffffff" }}
+              whileTap={{ scale: 0.95 }}
+              transition={{ type: "spring", stiffness: 400, damping: 25 }}
+              aria-current={isActive ? "page" : undefined}
+              onClick={(e) => {
+                e.preventDefault();
+                handleNavigation(item.path);
+              }}
+            >
+              {item.title}
+              {isActive && (
+                <motion.span
+                  layoutId="desktop-nav-underline"
+                  className="absolute -bottom-1.5 left-0 h-px w-full rounded-full bg-gold-light"
+                  transition={{ type: "spring", stiffness: 380, damping: 32 }}
+                />
+              )}
+            </motion.a>
+          </li>
+        );
+      })}
+    </ul>
+  );
+};
+
+export default MenuContent;