feat: Initialize project with Vite and React

Sets up the project structure with Vite, React, and essential libraries like GSAP and Framer Motion. Configures Tailwind CSS for styling, including dark mode and custom color schemes. Includes basic component structure for the application, laying the groundwork for UI development.
2026-01-15 18:27:22 +01:00
parent 4e3516d96a
commit 1a85f0eb2d
19 changed files with 1260 additions and 8 deletions
--- a/components/Navbar.tsx
+++ b/components/Navbar.tsx
@@ -0,0 +1,81 @@
+import React, { useState } from 'react';
+import { motion, useScroll, useMotionValueEvent, useSpring } 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);
+    }
+  });
+
+  return (
+    <motion.nav
+      variants={{
+        visible: { y: 0 },
+        hidden: { y: "-100%" },
+      }}
+      animate={hidden ? "hidden" : "visible"}
+      transition={{ duration: 0.35, ease: "easeInOut" }}
+      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">
+          <motion.div
+            whileHover={{ rotate: 180 }}
+            transition={{ duration: 0.5 }}
+          >
+            <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>
+        
+        <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 
+              key={item}
+              href={`#${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}
+              <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>
+          ))}
+        </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>
+      </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>
+  );
+};
+
+export default Navbar;