Merge version_3_1778223685822 into main

Merge version_3_1778223685822 into main

src/components/ui/NavbarCentered.tsx

@@ -1,5 +1,5 @@
 import { useState, useEffect, useRef } from "react";
-import { motion, AnimatePresence } from "motion/react";
+
 import { Plus, ArrowRight } from "lucide-react";
 import { cls } from "@/lib/utils";
 import Button from "@/components/ui/Button";
@@ -51,8 +51,8 @@ const NavbarCentered = ({ logo, navItems, ctaButton }: NavbarCenteredProps) => {
     <>
       <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"
+          "fixed z-1000 top-3 left-3 right-3 transition-all duration-500 ease-in-out",
+          isScrolled ? "h-15 bg-background/80 backdrop-blur-sm rounded-lg" : "h-20 bg-background/0 backdrop-blur-0"
         )}
       >
         <div className="relative mx-auto flex items-center justify-between h-full w-content-width">
@@ -89,15 +89,11 @@ const NavbarCentered = ({ logo, navItems, ctaButton }: NavbarCenteredProps) => {
         </div>
       </nav>
 
-      <AnimatePresence>
-        {menuOpen && (
-          <motion.div
+      {menuOpen && (
+          <div
             ref={menuRef}
-            initial={{ y: "-135%" }}
-            animate={{ y: 0 }}
-            exit={{ y: "-135%" }}
-            transition={{ type: "spring", damping: 26, stiffness: 170 }}
-            className="md:hidden fixed z-1000 top-3 left-3 right-3 p-6 rounded card"
+            
+            className="md:hidden fixed z-1000 top-3 left-3 right-3 p-6 rounded-lg card"
           >
             <div className="flex items-center justify-between mb-6">
               <p className="text-xl text-foreground">Menu</p>
@@ -131,9 +127,8 @@ const NavbarCentered = ({ logo, navItems, ctaButton }: NavbarCenteredProps) => {
             <div className="mt-6">
               <Button text={ctaButton.text} href={ctaButton.href} variant="primary" animate={false} className="w-full" />
             </div>
-          </motion.div>
+          </div>
         )}
-      </AnimatePresence>
     </>
   );
 };