feat: added the mobile friendly ui implimentation

- added nav bar and added the morden layout to it
- added mobile friendly css for responsiveness
- added more other components to it

1 files changed, 679 insertions, 0 deletions

diff --git a/frontend/src/app/globals.css.backup b/frontend/src/app/globals.css.backup
new file mode 100644
index 0000000..d573de5
--- /dev/null
+++ b/frontend/src/app/globals.css.backup
@@ -0,0 +1,679 @@
+@import "tailwindcss";
+@import "tw-animate-css";
+
+@custom-variant dark (&:is(.dark *));
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
+  --font-mono: ui-monospace, "SFMono-Regular", "Consolas", monospace;
+  --color-sidebar-ring: var(--sidebar-ring);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar: var(--sidebar);
+  --color-chart-5: var(--chart-5);
+  --color-chart-4: var(--chart-4);
+  --color-chart-3: var(--chart-3);
+  --color-chart-2: var(--chart-2);
+  --color-chart-1: var(--chart-1);
+  --color-ring: var(--ring);
+  --color-input: var(--input);
+  --color-border: var(--border);
+  --color-destructive: var(--destructive);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-accent: var(--accent);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-muted: var(--muted);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-secondary: var(--secondary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-primary: var(--primary);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-popover: var(--popover);
+  --color-card-foreground: var(--card-foreground);
+  --color-card: var(--card);
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+}
+
+:root {
+  --radius: 0.625rem;
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.145 0 0);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0 0);
+  --primary: oklch(0.205 0 0);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.97 0 0);
+  --secondary-foreground: oklch(0.205 0 0);
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.556 0 0);
+  --accent: oklch(0.97 0 0);
+  --accent-foreground: oklch(0.205 0 0);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.922 0 0);
+  --input: oklch(0.922 0 0);
+  --ring: oklch(0.708 0 0);
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.145 0 0);
+  --sidebar-primary: oklch(0.205 0 0);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.97 0 0);
+  --sidebar-accent-foreground: oklch(0.205 0 0);
+  --sidebar-border: oklch(0.922 0 0);
+  --sidebar-ring: oklch(0.708 0 0);
+}
+
+.dark {
+  --background: oklch(0.145 0 0);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.205 0 0);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.205 0 0);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.922 0 0);
+  --primary-foreground: oklch(0.205 0 0);
+  --secondary: oklch(0.269 0 0);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.269 0 0);
+  --muted-foreground: oklch(0.708 0 0);
+  --accent: oklch(0.269 0 0);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.556 0 0);
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+  --sidebar: oklch(0.205 0 0);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.269 0 0);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.556 0 0);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}
+
+/* Complete override for ghost variant default styles */
+/* This targets the specific ghost variant classes from the button component */
+.nav-button-transparent {
+  background: transparent !important;
+  background-color: transparent !important;
+  background-image: none !important;
+  border: none !important;
+  border-color: transparent !important;
+  box-shadow: none !important;
+  --tw-bg-opacity: 0 !important;
+  --accent: transparent !important;
+  --background: transparent !important;
+  --tw-border-opacity: 0 !important;
+  --tw-shadow: none !important;
+  --tw-ring-shadow: none !important;
+  --tw-ring-offset-shadow: none !important;
+  cursor: pointer !important;
+}
+
+/* Force override ghost variant styles completely */
+button[class*="nav-button-transparent"],
+[data-slot="button"][class*="nav-button-transparent"],
+[data-slot="navigation-menu-trigger"][class*="nav-button-transparent"] {
+  background: transparent !important;
+  background-color: transparent !important;
+  border: none !important;
+  box-shadow: none !important;
+}
+
+/* Override ghost variant hover specifically */
+button[class*="nav-button-transparent"][class*="hover:bg-accent"],
+[data-slot="button"][class*="nav-button-transparent"][class*="hover:bg-accent"],
+[data-slot="navigation-menu-trigger"][class*="nav-button-transparent"][class*="hover:bg-accent"] {
+  background: transparent !important;
+  background-color: transparent !important;
+  border: none !important;
+}
+
+/* Dark mode ghost variant overrides */
+.dark button[class*="nav-button-transparent"][class*="dark:hover:bg-accent"],
+.dark [data-slot="button"][class*="nav-button-transparent"][class*="dark:hover:bg-accent"],
+.dark [data-slot="navigation-menu-trigger"][class*="nav-button-transparent"][class*="dark:hover:bg-accent"] {
+  background: transparent !important;
+  background-color: transparent !important;
+  border: none !important;
+}
+
+/* Remove focus rings and outlines for nav buttons */
+.nav-button-transparent:focus,
+.nav-button-transparent:focus-visible {
+  outline: none !important;
+  ring: none !important;
+  --tw-ring-shadow: none !important;
+  border: none !important;
+  background: transparent !important;
+  background-color: transparent !important;
+}
+
+/* Light mode subtle hover effects - only show on hover */
+.nav-button-transparent:hover {
+  background: rgba(0, 0, 0, 0.08) !important;
+  background-color: rgba(0, 0, 0, 0.08) !important;
+  --tw-bg-opacity: 1 !important;
+  border: none !important;
+  transition: background-color 0.2s ease-in-out !important;
+}
+
+/* Dark mode even more subtle hover effects */
+.dark .nav-button-transparent:hover {
+  background: rgba(255, 255, 255, 0.06) !important;
+  background-color: rgba(255, 255, 255, 0.06) !important;
+  transition: background-color 0.2s ease-in-out !important;
+}
+
+/* Override NavigationMenuTrigger specific classes with maximum specificity */
+.nav-button-transparent.bg-background {
+  background: transparent !important;
+  background-color: transparent !important;
+  border: none !important;
+}
+
+/* Focus states - only subtle background, no borders or rings */
+.nav-button-transparent:focus:not(:hover) {
+  background: rgba(0, 0, 0, 0.04) !important;
+  background-color: rgba(0, 0, 0, 0.04) !important;
+  border: none !important;
+  box-shadow: none !important;
+}
+
+.dark .nav-button-transparent:focus:not(:hover) {
+  background: rgba(255, 255, 255, 0.03) !important;
+  background-color: rgba(255, 255, 255, 0.03) !important;
+  border: none !important;
+  box-shadow: none !important;
+}
+
+/* Override open states */
+.nav-button-transparent[data-state="open"] {
+  background: rgba(0, 0, 0, 0.08) !important;
+  background-color: rgba(0, 0, 0, 0.08) !important;
+  border: none !important;
+}
+
+.dark .nav-button-transparent[data-state="open"] {
+  background: rgba(255, 255, 255, 0.06) !important;
+  background-color: rgba(255, 255, 255, 0.06) !important;
+  border: none !important;
+}
+
+/* Ensure all shadcn/ui utility classes are overridden with high specificity */
+button.nav-button-transparent,
+[data-slot="button"].nav-button-transparent,
+[data-slot="navigation-menu-trigger"].nav-button-transparent {
+  background: transparent !important;
+  background-color: transparent !important;
+  border: none !important;
+  border-color: transparent !important;
+  box-shadow: none !important;
+  cursor: pointer !important;
+}
+
+/* Hover states for all button types */
+button.nav-button-transparent:hover,
+[data-slot="button"].nav-button-transparent:hover,
+[data-slot="navigation-menu-trigger"].nav-button-transparent:hover {
+  background: rgba(0, 0, 0, 0.08) !important;
+  background-color: rgba(0, 0, 0, 0.08) !important;
+  border: none !important;
+  transition: background-color 0.2s ease-in-out !important;
+  cursor: pointer !important;
+}
+
+/* Focus states for all button types */
+button.nav-button-transparent:focus,
+[data-slot="button"].nav-button-transparent:focus,
+[data-slot="navigation-menu-trigger"].nav-button-transparent:focus {
+  background: rgba(0, 0, 0, 0.04) !important;
+  background-color: rgba(0, 0, 0, 0.04) !important;
+  border: none !important;
+  box-shadow: none !important;
+  outline: none !important;
+  cursor: pointer !important;
+}
+
+/* Dark mode hover and focus states */
+.dark button.nav-button-transparent:hover,
+.dark [data-slot="button"].nav-button-transparent:hover,
+.dark [data-slot="navigation-menu-trigger"].nav-button-transparent:hover {
+  background: rgba(255, 255, 255, 0.06) !important;
+  background-color: rgba(255, 255, 255, 0.06) !important;
+  border: none !important;
+  transition: background-color 0.2s ease-in-out !important;
+  cursor: pointer !important;
+}
+
+.dark button.nav-button-transparent:focus,
+.dark [data-slot="button"].nav-button-transparent:focus,
+.dark [data-slot="navigation-menu-trigger"].nav-button-transparent:focus {
+  background: rgba(255, 255, 255, 0.03) !important;
+  background-color: rgba(255, 255, 255, 0.03) !important;
+  border: none !important;
+  box-shadow: none !important;
+  outline: none !important;
+  cursor: pointer !important;
+}
+
+/* Dropdown and navigation item transparency */
+.nav-dropdown-transparent {
+  background: rgba(255, 255, 255, 0.85) !important;
+  backdrop-filter: blur(20px) saturate(180%) !important;
+  border: 1px solid rgba(255, 255, 255, 0.2) !important;
+  box-shadow: 
+    0 8px 32px rgba(0, 0, 0, 0.12),
+    0 2px 16px rgba(0, 0, 0, 0.08),
+    inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
+  border-radius: 0.75rem !important;
+}
+
+.dark .nav-dropdown-transparent {
+  background: rgba(15, 15, 15, 0.85) !important;
+  border: 1px solid rgba(82, 82, 82, 0.3) !important;
+  box-shadow: 
+    0 8px 32px rgba(0, 0, 0, 0.4),
+    0 2px 16px rgba(0, 0, 0, 0.3),
+    inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
+}
+
+.nav-dropdown-item {
+  background: transparent !important;
+  border: none !important;
+  transition: background-color 0.2s ease-in-out !important;
+}
+
+.nav-dropdown-item:hover {
+  background: rgba(0, 0, 0, 0.08) !important;
+  border: none !important;
+}
+
+.dark .nav-dropdown-item:hover {
+  background: rgba(255, 255, 255, 0.08) !important;
+  border: none !important;
+}
+
+/* Additional overrides for complete transparency */
+/* Handle any remaining shadcn/ui styling conflicts */
+.nav-button-transparent[data-variant="ghost"] {
+  background: transparent !important;
+  background-color: transparent !important;
+  border: none !important;
+  cursor: pointer !important;
+}
+
+.nav-button-transparent[data-variant="ghost"]:hover {
+  background: rgba(0, 0, 0, 0.08) !important;
+  background-color: rgba(0, 0, 0, 0.08) !important;
+  border: none !important;
+  cursor: pointer !important;
+}
+
+.dark .nav-button-transparent[data-variant="ghost"]:hover {
+  background: rgba(255, 255, 255, 0.06) !important;
+  background-color: rgba(255, 255, 255, 0.06) !important;
+  border: none !important;
+  cursor: pointer !important;
+}
+
+/* Override any remaining background utilities */
+.nav-button-transparent.bg-transparent,
+.nav-button-transparent.bg-accent,
+.nav-button-transparent.hover\:bg-accent,
+.nav-button-transparent.focus\:bg-accent {
+  background: transparent !important;
+  background-color: transparent !important;
+  border: none !important;
+  cursor: pointer !important;
+}
+
+/* Ensure link elements in navigation also have transparent styling */
+a.nav-button-transparent {
+  background: transparent !important;
+  background-color: transparent !important;
+  border: none !important;
+  text-decoration: none !important;
+  cursor: pointer !important;
+}
+
+a.nav-button-transparent:hover {
+  background: rgba(0, 0, 0, 0.08) !important;
+  background-color: rgba(0, 0, 0, 0.08) !important;
+  border: none !important;
+  text-decoration: none !important;
+  cursor: pointer !important;
+}
+
+.dark a.nav-button-transparent:hover {
+  background: rgba(255, 255, 255, 0.06) !important;
+  background-color: rgba(255, 255, 255, 0.06) !important;
+  border: none !important;
+  text-decoration: none !important;
+  cursor: pointer !important;
+}
+
+/* Ultra-specific overrides to ensure transparency takes precedence */
+/* Handle all possible combinations of button classes */
+button.nav-button-transparent.hover\:bg-accent,
+button.nav-button-transparent.dark\:hover\:bg-accent\/50,
+button.nav-button-transparent[class*="hover:bg"],
+[data-slot="button"].nav-button-transparent.hover\:bg-accent,
+[data-slot="button"].nav-button-transparent.dark\:hover\:bg-accent\/50,
+[data-slot="button"].nav-button-transparent[class*="hover:bg"],
+[data-slot="navigation-menu-trigger"].nav-button-transparent.hover\:bg-accent,
+[data-slot="navigation-menu-trigger"].nav-button-transparent.dark\:hover\:bg-accent\/50,
+[data-slot="navigation-menu-trigger"].nav-button-transparent[class*="hover:bg"] {
+  background: transparent !important;
+  background-color: transparent !important;
+  border: none !important;
+}
+
+/* Override any CSS custom properties that might affect background */
+.nav-button-transparent {
+  --tw-bg-accent: transparent !important;
+  --tw-bg-background: transparent !important;
+  --tw-bg-muted: transparent !important;
+  --tw-bg-secondary: transparent !important;
+}
+
+/* Ensure no background on any state for nav buttons */
+.nav-button-transparent,
+.nav-button-transparent:not(:hover):not(:focus):not(:active) {
+  background: transparent !important;
+  background-color: transparent !important;
+  box-shadow: none !important;
+  border: none !important;
+}
+
+/* Maximum specificity overrides - nuclear option for transparency */
+html body header button.nav-button-transparent,
+html body header [data-slot="button"].nav-button-transparent,
+html body header [data-slot="navigation-menu-trigger"].nav-button-transparent,
+html body header div button.nav-button-transparent,
+html body header div [data-slot="button"].nav-button-transparent,
+html body header div [data-slot="navigation-menu-trigger"].nav-button-transparent {
+  background: transparent !important;
+  background-color: transparent !important;
+  background-image: none !important;
+  border: none !important;
+  border-color: transparent !important;
+  box-shadow: none !important;
+  backdrop-filter: none !important;
+}
+
+/* Override any inline styles or computed styles */
+.nav-button-transparent[style*="background"] {
+  background: transparent !important;
+  background-color: transparent !important;
+}
+
+/* Target specific button classes that might have background */
+.nav-button-transparent.inline-flex,
+.nav-button-transparent[class*="inline-flex"] {
+  background: transparent !important;
+  background-color: transparent !important;
+  border: none !important;
+}
+
+/* Enhanced link element transparency for Sale button and similar nav links */
+/* Apply maximum specificity for link elements in navigation */
+html body header a.nav-button-transparent,
+html body header div a.nav-button-transparent,
+html body header nav a.nav-button-transparent,
+[data-slot="navigation-menu-link"].nav-button-transparent {
+  background: transparent !important;
+  background-color: transparent !important;
+  background-image: none !important;
+  border: none !important;
+  border-color: transparent !important;
+  box-shadow: none !important;
+  backdrop-filter: none !important;
+  cursor: pointer !important;
+}
+
+/* Override any NavigationMenuLink default styles */
+a.nav-button-transparent[data-slot="navigation-menu-link"],
+[data-slot="navigation-menu-link"].nav-button-transparent {
+  background: transparent !important;
+  background-color: transparent !important;
+  border: none !important;
+  box-shadow: none !important;
+}
+
+/* Ensure link hover states maintain transparency in default state */
+a.nav-button-transparent:not(:hover):not(:focus):not(:active) {
+  background: transparent !important;
+  background-color: transparent !important;
+  border: none !important;
+}
+
+/* Specific overrides for NavigationMenuLink component (Sale button) */
+[data-slot="navigation-menu-link"].nav-button-transparent {
+  background: transparent !important;
+  background-color: transparent !important;
+  border: none !important;
+  box-shadow: none !important;
+  cursor: pointer !important;
+}
+
+/* Override NavigationMenuLink hover and focus states */
+[data-slot="navigation-menu-link"].nav-button-transparent.hover\:bg-accent,
+[data-slot="navigation-menu-link"].nav-button-transparent.focus\:bg-accent,
+[data-slot="navigation-menu-link"].nav-button-transparent[class*="hover:bg-accent"],
+[data-slot="navigation-menu-link"].nav-button-transparent[class*="focus:bg-accent"],
+[data-slot="navigation-menu-link"].nav-button-transparent[class*="data-[active=true]:bg-accent"] {
+  background: transparent !important;
+  background-color: transparent !important;
+  border: none !important;
+}
+
+/* Override NavigationMenuLink data states */
+[data-slot="navigation-menu-link"].nav-button-transparent[data-active="true"] {
+  background: transparent !important;
+  background-color: transparent !important;
+  border: none !important;
+}
+
+/* Ensure NavigationMenuLink has proper hover effect */
+[data-slot="navigation-menu-link"].nav-button-transparent:hover {
+  background: rgba(0, 0, 0, 0.08) !important;
+  background-color: rgba(0, 0, 0, 0.08) !important;
+  border: none !important;
+  transition: background-color 0.2s ease-in-out !important;
+}
+
+.dark [data-slot="navigation-menu-link"].nav-button-transparent:hover {
+  background: rgba(255, 255, 255, 0.06) !important;
+  background-color: rgba(255, 255, 255, 0.06) !important;
+}
+
+/* Enhanced Theme Toggle Transparency Effects */
+/* Theme toggle specific enhancements for better navbar integration */
+.nav-button-transparent.group {
+  position: relative;
+  overflow: hidden;
+  backdrop-filter: blur(8px) saturate(150%);
+  border-radius: 0.5rem;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+/* Enhanced hover state for theme toggle */
+.nav-button-transparent.group:hover {
+  background: rgba(0, 0, 0, 0.08) !important;
+  background-color: rgba(0, 0, 0, 0.08) !important;
+  transform: scale(1.05);
+  backdrop-filter: blur(12px) saturate(180%);
+}
+
+.dark .nav-button-transparent.group:hover {
+  background: rgba(255, 255, 255, 0.06) !important;
+  background-color: rgba(255, 255, 255, 0.06) !important;
+}
+
+/* Active state for theme toggle */
+.nav-button-transparent.group:active {
+  transform: scale(0.95);
+  transition: transform 0.1s ease-in-out;
+}
+
+/* Enhanced focus state for theme toggle */
+.nav-button-transparent.group:focus-visible {
+  background: rgba(0, 0, 0, 0.04) !important;
+  background-color: rgba(0, 0, 0, 0.04) !important;
+  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1) !important;
+  outline: none !important;
+}
+
+.dark .nav-button-transparent.group:focus-visible {
+  background: rgba(255, 255, 255, 0.03) !important;
+  background-color: rgba(255, 255, 255, 0.03) !important;
+  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1) !important;
+}
+
+/* Theme toggle dropdown enhanced transparency */
+.nav-dropdown-transparent {
+  background: rgba(255, 255, 255, 0.98) !important;
+  backdrop-filter: blur(20px) saturate(200%) !important;
+  border: 1px solid rgba(255, 255, 255, 0.4) !important;
+  box-shadow: 
+    0 8px 32px rgba(0, 0, 0, 0.1),
+    0 2px 16px rgba(0, 0, 0, 0.08),
+    inset 0 1px 0 rgba(255, 255, 255, 0.6) !important;
+  border-radius: 0.75rem !important;
+}
+
+.dark .nav-dropdown-transparent {
+  background: rgba(23, 23, 23, 0.98) !important;
+  border: 1px solid rgba(82, 82, 82, 0.5) !important;
+  box-shadow: 
+    0 8px 32px rgba(0, 0, 0, 0.4),
+    0 2px 16px rgba(0, 0, 0, 0.3),
+    inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
+}
+
+/* Enhanced dropdown items for theme toggle */
+.nav-dropdown-item.group\/item {
+  background: transparent !important;
+  border: none !important;
+  border-radius: 0.5rem !important;
+  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
+  margin: 2px !important;
+  padding: 0.5rem 0.75rem !important;
+}
+
+.nav-dropdown-item.group\/item:hover {
+  background: rgba(0, 0, 0, 0.08) !important;
+  backdrop-filter: blur(8px) !important;
+  transform: translateX(2px) !important;
+}
+
+.dark .nav-dropdown-item.group\/item:hover {
+  background: rgba(255, 255, 255, 0.08) !important;
+}
+
+/* Smooth icon transitions for theme toggle */
+.nav-button-transparent.group svg {
+  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
+  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1));
+}
+
+.dark .nav-button-transparent.group svg {
+  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
+}
+
+/* Enhanced glow effect for theme toggle */
+.nav-button-transparent.group:hover svg {
+  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.15));
+}
+
+.dark .nav-button-transparent.group:hover svg {
+  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4));
+}
+
+/* Ultra-smooth dropdown animations */
+@keyframes dropdown-in {
+  from {
+    opacity: 0;
+    transform: scale(0.95) translateY(-4px);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1) translateY(0);
+  }
+}
+
+@keyframes dropdown-out {
+  from {
+    opacity: 1;
+    transform: scale(1) translateY(0);
+  }
+  to {
+    opacity: 0;
+    transform: scale(0.95) translateY(-4px);
+  }
+}
+
+/* Apply dropdown animation to nav dropdowns */
+.nav-dropdown-transparent[data-state="open"] {
+  animation: dropdown-in 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+/* Improved checkmark animation */
+.nav-dropdown-item span[class*="animate-in"] {
+  animation: checkmark-in 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
+}
+
+@keyframes checkmark-in {
+  from {
+    opacity: 0;
+    transform: scale(0.3) rotate(-12deg);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1) rotate(0deg);
+  }
+}
+
+/* Prevent any conflicting backgrounds on theme toggle */
+.nav-button-transparent.group[data-state="open"] {
+  background: rgba(0, 0, 0, 0.08) !important;
+  background-color: rgba(0, 0, 0, 0.08) !important;
+  border: none !important;
+  transform: scale(1.05);
+}
+
+.dark .nav-button-transparent.group[data-state="open"] {
+  background: rgba(255, 255, 255, 0.06) !important;
+  background-color: rgba(255, 255, 255, 0.06) !important;
+}