Enhance navigation and UI components for improved user experience

- Added new AppHeader and BottomNav components for better navigation across the application.
- Introduced AreaTabs for product area navigation and integrated RoleSwitcher for user role management.
- Created CartButton component to display cart status and item count.
- Implemented UserMenu with login/logout functionality and user greeting.
- Added Badge component for notifications and status indicators.
- Updated layout to accommodate new navigation components and ensure mobile responsiveness.
- Created product detail demo page to showcase design patterns and features.
- Enhanced existing components with improved styling and functionality.

app/components/UserMenu.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { User, LogOut } from 'lucide-vue-next'
+import { User, LogOut, Package } from 'lucide-vue-next'
 import {
   Avatar,
   AvatarFallback,
@@ -14,7 +14,7 @@ import {
   DropdownMenuTrigger,
 } from './ui/dropdown-menu'
 
-const { user, logout } = useAuth()
+const { user, loggedIn, logout } = useAuth()
 
 /**
  * Get user initials for Avatar fallback
@@ -42,29 +42,51 @@ async function handleLogout() {
 </script>
 
 <template>
-  <DropdownMenu>
+  <!-- Not logged in: Show login prompt -->
+  <NuxtLink
+    v-if="!loggedIn"
+    to="/auth"
+    class="flex items-center gap-2 px-4 py-2 rounded-2xl border-2 border-dashed border-muted-foreground/30 hover:border-experimenta-accent hover:bg-experimenta-accent/10 transition-all"
+    aria-label="Anmelden oder Registrieren"
+  >
+    <Avatar class="h-10 w-10 border-2 border-muted-foreground/30 rounded-2xl">
+      <AvatarFallback class="bg-muted text-muted-foreground rounded-2xl">
+        <User class="h-5 w-5" />
+      </AvatarFallback>
+    </Avatar>
+    <span class="text-sm font-medium hidden sm:inline">Anmelden</span>
+  </NuxtLink>
+
+  <!-- Logged in: Show user menu -->
+  <DropdownMenu v-else>
     <DropdownMenuTrigger as-child>
       <button
-        class="flex items-center gap-2 rounded-full focus:outline-none focus:ring-2 focus:ring-experimenta-accent focus:ring-offset-2 focus:ring-offset-experimenta-purple transition-all hover:scale-105 hover:shadow-lg"
+        class="flex items-center gap-3 rounded-2xl px-2 py-1.5 focus:outline-none focus:ring-2 focus:ring-experimenta-accent focus:ring-offset-2 transition-all hover:bg-white/10"
         aria-label="Benutzermenü öffnen"
       >
-        <Avatar class="h-12 w-12 border-3 border-experimenta-accent shadow-md bg-experimenta-accent">
+        <!-- Greeting text (Desktop only) -->
+        <span class="hidden md:inline text-sm font-medium text-white">
+          Hallo, {{ user?.firstName }}
+        </span>
+
+        <!-- Avatar with status ring (logged in indicator) -->
+        <Avatar class="h-10 w-10 md:h-12 md:w-12 border-3 border-experimenta-purple shadow-lg bg-experimenta-accent ring-2 ring-experimenta-accent ring-offset-2 ring-offset-white dark:ring-offset-zinc-950">
           <AvatarImage :src="undefined" :alt="user?.firstName" />
-          <AvatarFallback class="bg-experimenta-accent text-white font-bold text-base flex items-center justify-center w-full h-full">
+          <AvatarFallback class="bg-experimenta-accent text-white font-bold text-sm md:text-base flex items-center justify-center w-full h-full">
             {{ userInitials }}
           </AvatarFallback>
         </Avatar>
       </button>
     </DropdownMenuTrigger>
 
-    <DropdownMenuContent align="end" class="w-56 z-[200]">
-      <!-- User email (non-interactive) -->
-      <DropdownMenuLabel class="font-normal">
-        <div class="flex flex-col space-y-1">
-          <p class="text-sm font-medium leading-none">
+    <DropdownMenuContent align="end" class="w-64 z-[200]">
+      <!-- User info header -->
+      <DropdownMenuLabel class="font-normal py-3">
+        <div class="flex flex-col space-y-1.5">
+          <p class="text-base font-semibold leading-none">
             {{ user?.firstName }} {{ user?.lastName }}
           </p>
-          <p class="text-xs leading-none text-muted-foreground">
+          <p class="text-sm leading-none text-muted-foreground">
             {{ user?.email }}
           </p>
         </div>
@@ -72,18 +94,24 @@ async function handleLogout() {
 
       <DropdownMenuSeparator />
 
+      <!-- My Orders (Phase 5+ feature) -->
+      <DropdownMenuItem disabled class="py-2.5">
+        <Package class="mr-3 h-5 w-5" />
+        <span class="text-sm">Meine Bestellungen</span>
+      </DropdownMenuItem>
+
       <!-- Profile (disabled for now, placeholder for Phase 2+) -->
-      <DropdownMenuItem disabled>
-        <User class="mr-2 h-4 w-4" />
-        <span>Profil</span>
+      <DropdownMenuItem disabled class="py-2.5">
+        <User class="mr-3 h-5 w-5" />
+        <span class="text-sm">Profil bearbeiten</span>
       </DropdownMenuItem>
 
       <DropdownMenuSeparator />
 
       <!-- Logout -->
-      <DropdownMenuItem @click="handleLogout">
-        <LogOut class="mr-2 h-4 w-4" />
-        <span>Abmelden</span>
+      <DropdownMenuItem @click="handleLogout" class="py-2.5">
+        <LogOut class="mr-3 h-5 w-5" />
+        <span class="text-sm">Abmelden</span>
       </DropdownMenuItem>
     </DropdownMenuContent>
   </DropdownMenu>