Pushing project code

components/Navbar.tsx

@@ -1,37 +1,17 @@
-import React, { useState } from 'react';
-import { motion, useScroll, useMotionValueEvent, useSpring } from 'framer-motion';
+import React from 'react';
+import { Link, useLocation } from 'react-router-dom';
+import { motion } from 'framer-motion';
 
 const Navbar: React.FC = () => {
-  const [hidden, setHidden] = useState(false);
-  const { scrollY, scrollYProgress } = useScroll();
-  
-  const scaleX = useSpring(scrollYProgress, {
-    stiffness: 100,
-    damping: 30,
-    restDelta: 0.001
-  });
-
-  useMotionValueEvent(scrollY, "change", (latest) => {
-    const previous = scrollY.getPrevious() || 0;
-    if (latest > previous && latest > 150) {
-      setHidden(true);
-    } else {
-      setHidden(false);
-    }
-  });
+  const location = useLocation();
+  const isHome = location.pathname === '/';
 
   return (
-    <motion.nav
-      variants={{
-        visible: { y: 0 },
-        hidden: { y: "-100%" },
-      }}
-      animate={hidden ? "hidden" : "visible"}
-      transition={{ duration: 0.35, ease: "easeInOut" }}
+    <nav
       className="fixed w-full z-40 top-0 left-0 border-b border-gray-200 dark:border-white/10 bg-white/80 dark:bg-background-dark/80 backdrop-blur-md"
     >
       <div className="max-w-7xl mx-auto px-6 h-16 flex items-center justify-between">
-        <div className="flex items-center gap-2">
+        <Link to="/" className="flex items-center gap-2">
           <motion.div
             whileHover={{ rotate: 180 }}
             transition={{ duration: 0.5 }}
@@ -39,42 +19,30 @@ const Navbar: React.FC = () => {
             <span className="material-symbols-outlined text-xl dark:text-white text-black">dns</span>
           </motion.div>
           <span className="font-display font-bold text-lg tracking-tight">Bay Area Affiliates</span>
-        </div>
-        
+        </Link>
+
         <div className="hidden md:flex items-center gap-8 text-sm font-medium text-gray-600 dark:text-gray-400">
-          {['Services', 'Features', 'Blog', 'Contact'].map((item) => (
-            <motion.a 
+          {['About', 'Services', 'Blog', 'Contact'].map((item) => (
+            <Link
               key={item}
-              href={`#${item.toLowerCase()}`}
+              to={`/${item.toLowerCase()}`}
               className="hover:text-black dark:hover:text-white transition-colors relative group px-2 py-1"
-              whileHover={{ scale: 1.05 }}
-              whileTap={{ scale: 0.95 }}
             >
-              {item}
+              <motion.span
+                whileHover={{ scale: 1.05 }}
+                whileTap={{ scale: 0.95 }}
+                className="inline-block"
+              >
+                {item}
+              </motion.span>
               <span className="absolute -bottom-1 left-0 w-0 h-0.5 bg-black dark:bg-white transition-all duration-300 ease-out group-hover:w-full"></span>
-            </motion.a>
+            </Link>
           ))}
         </div>
-        
-        <motion.a 
-          href="#" 
-          className="text-sm font-medium bg-black dark:bg-white text-white dark:text-black px-4 py-2 rounded-full transition-all"
-          whileHover={{ 
-            scale: 1.05, 
-            boxShadow: "0px 0px 15px rgba(100, 100, 100, 0.5)" 
-          }}
-          whileTap={{ scale: 0.95 }}
-        >
-          Client Portal
-        </motion.a>
+
+        {/* Client Portal button removed */}
       </div>
-      
-      {/* Scroll Progress Indicator */}
-      <motion.div 
-        className="absolute bottom-0 left-0 right-0 h-[2px] bg-blue-600 dark:bg-blue-500 origin-left z-50"
-        style={{ scaleX }}
-      />
-    </motion.nav>
+    </nav>
   );
 };