feat: add smooth opening animation to navbar using CSS transitions

Merge version_25_1778236015160 into main

src/components/ui/NavbarCentered.tsx

@@ -1,5 +1,6 @@
 import { useState, useEffect, useRef } from "react";
 
+import { Plus, ArrowRight } from "lucide-react";
 import { Plus, ArrowRight } from "lucide-react";
 import { cls } from "@/lib/utils";
 import Button from "@/components/ui/Button";
@@ -89,11 +90,12 @@ const NavbarCentered = ({ logo, navItems, ctaButton }: NavbarCenteredProps) => {
         </div>
       </nav>
 
-      {menuOpen && (
       <div
         ref={menuRef}
-            
-            className="md:hidden fixed z-1000 top-3 left-3 right-3 p-6 rounded-lg bg-background/80 backdrop-blur-[2px]"
+        className={cls(
+          "md:hidden fixed z-1000 top-3 left-3 right-3 p-6 rounded-lg bg-background/80 backdrop-blur-[2px] transition-all duration-300 ease-in-out",
+          menuOpen ? "opacity-100 translate-y-0" : "opacity-0 -translate-y-4 pointer-events-none"
+        )}
       >
         <div className="flex items-center justify-between mb-6">
           <p className="text-xl text-foreground">Menu</p>
@@ -128,7 +130,6 @@ const NavbarCentered = ({ logo, navItems, ctaButton }: NavbarCenteredProps) => {
           <Button text={ctaButton.text} href={ctaButton.href} variant="primary" animate={false} className="w-full" />
         </div>
       </div>
-        )}
     </>
   );
 };