From 45a5dadd29056b869468cdaba005b618c9581822 Mon Sep 17 00:00:00 2001
From: "gpt-engineer-app[bot]"
 <159125892+gpt-engineer-app[bot]@users.noreply.github.com>
Date: Wed, 5 Nov 2025 19:33:59 +0000
Subject: [PATCH] Add smooth transitions and reorder menu items

---
 src/components/layout/Header.tsx      | 12 ++++++------
 src/components/ui/navigation-menu.tsx |  2 +-
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/components/layout/Header.tsx b/src/components/layout/Header.tsx
index bba41ecf..3d4dfa66 100644
--- a/src/components/layout/Header.tsx
+++ b/src/components/layout/Header.tsx
@@ -133,12 +133,12 @@ export function Header() {
                         <li>
                           <NavigationMenuLink asChild>
                             <Link
-                              to="/parks"
+                              to="/rides"
                               className="block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent/20 focus:bg-accent/20"
                             >
-                              <div className="text-sm font-medium leading-none">Parks</div>
+                              <div className="text-sm font-medium leading-none">Rides</div>
                               <p className="line-clamp-2 text-sm leading-snug text-muted-foreground">
-                                Browse theme parks around the world
+                                Discover exciting rides and attractions
                               </p>
                             </Link>
                           </NavigationMenuLink>
@@ -146,12 +146,12 @@ export function Header() {
                         <li>
                           <NavigationMenuLink asChild>
                             <Link
-                              to="/rides"
+                              to="/parks"
                               className="block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent/20 focus:bg-accent/20"
                             >
-                              <div className="text-sm font-medium leading-none">Rides</div>
+                              <div className="text-sm font-medium leading-none">Parks</div>
                               <p className="line-clamp-2 text-sm leading-snug text-muted-foreground">
-                                Discover exciting rides and attractions
+                                Browse theme parks around the world
                               </p>
                             </Link>
                           </NavigationMenuLink>
diff --git a/src/components/ui/navigation-menu.tsx b/src/components/ui/navigation-menu.tsx
index c9fcd7ad..e7a795b2 100644
--- a/src/components/ui/navigation-menu.tsx
+++ b/src/components/ui/navigation-menu.tsx
@@ -80,7 +80,7 @@ const NavigationMenuViewport = React.forwardRef<
   <div className={cn("absolute left-0 top-full flex justify-center")}>
     <NavigationMenuPrimitive.Viewport
       className={cn(
-        "origin-top-center relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 md:w-[var(--radix-navigation-menu-viewport-width)]",
+        "origin-top-center relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 md:w-[var(--radix-navigation-menu-viewport-width)] transition-all duration-300 ease-in-out",
         className,
       )}
       ref={ref}