Merge version_7_1776773032685 into main

Merge version_7_1776773032685 into main

src/components/ui/NavbarCentered.tsx

@@ -1,4 +1,4 @@
-import { useState, useEffect } from "react";
+import { useState } from "react";
 import { Link } from "react-router-dom";
 import { motion, AnimatePresence } from "motion/react";
 import { Plus, ArrowRight } from "lucide-react";
@@ -46,27 +46,22 @@ const NavLink = ({
 };
 
 const NavbarCentered = ({ logo, navItems, ctaButton }: NavbarCenteredProps) => {
-  const [isScrolled, setIsScrolled] = useState(false);
   const [menuOpen, setMenuOpen] = useState(false);
 
-  useEffect(() => {
-    const handleScroll = () => setIsScrolled(window.scrollY > 50);
-    window.addEventListener("scroll", handleScroll, { passive: true });
-    return () => window.removeEventListener("scroll", handleScroll);
-  }, []);
-
   return (
     <>
       <nav
         className={cls(
-          "fixed z-1000 top-0 left-0 w-full transition-all duration-500 ease-in-out",
-          isScrolled ? "h-15 bg-background/80 backdrop-blur-sm" : "h-20 bg-background/0 backdrop-blur-0"
+          "sticky top-0 z-50 w-full transition-all duration-500 ease-in-out h-20 bg-background/80 backdrop-blur-md border-b border-foreground/10"
         )}
       >
         <div className="relative flex items-center justify-between h-full w-content-width mx-auto">
           <div className="flex items-center gap-4">
             <Link to="/" className="text-xl font-medium text-foreground">{logo}</Link>
-            <div className="hidden lg:block px-3 py-1 text-xs rounded-full bg-card/20 backdrop-blur-sm border border-card/30 text-foreground">Our office coffee is 90% caffeine, 10% existential dread.</div>
+            <div className="flex items-center gap-1 px-2 py-1 rounded-full bg-green-100 text-green-800 text-xs font-medium">
+              <span className="w-2 h-2 rounded-full bg-green-500 animate-[pulse-green_2s_infinite]"></span>
+              Active Now
+            </div>
           </div>
 
           <div className="hidden md:flex absolute left-1/2 items-center gap-6 -translate-x-1/2">

src/styles/animations.css

@@ -169,3 +169,14 @@
 .animate-progress {
   animation: progress linear forwards;
 }
+
+@keyframes pulse-green {
+  0%, 100% {
+    transform: scale(1);
+    opacity: 1;
+  }
+  50% {
+    transform: scale(1.1);
+    opacity: 0.7;
+  }
+}