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/navigation/CartButton.vue

@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import { ShoppingCart } from 'lucide-vue-next'
+import { Badge } from '@/components/ui/badge'
+
+// TODO: This will come from cart store/composable in Phase 5
+const cartItemCount = ref(0)
+
+const hasItems = computed(() => cartItemCount.value > 0)
+</script>
+
+<template>
+  <NuxtLink
+    to="/cart"
+    class="relative inline-flex items-center justify-center rounded-full p-3 transition-all hover:bg-experimenta-accent/10 focus:outline-none focus:ring-2 focus:ring-experimenta-accent focus:ring-offset-2"
+    aria-label="Warenkorb"
+  >
+    <ShoppingCart class="h-6 w-6 text-foreground" />
+
+    <!-- Item count badge -->
+    <Transition
+      enter-active-class="transition-all duration-200 ease-out"
+      enter-from-class="scale-0 opacity-0"
+      enter-to-class="scale-100 opacity-100"
+      leave-active-class="transition-all duration-150 ease-in"
+      leave-from-class="scale-100 opacity-100"
+      leave-to-class="scale-0 opacity-0"
+    >
+      <Badge
+        v-if="hasItems"
+        class="absolute -top-1 -right-1 h-5 min-w-[20px] px-1 flex items-center justify-center bg-experimenta-accent text-white text-xs font-bold border-2 border-white dark:border-zinc-950"
+      >
+        {{ cartItemCount > 99 ? '99+' : cartItemCount }}
+      </Badge>
+    </Transition>
+
+    <!-- Pulse animation when items are added (optional) -->
+    <span
+      v-if="hasItems"
+      class="absolute inset-0 rounded-full bg-experimenta-accent/20 animate-ping opacity-75"
+      aria-hidden="true"
+    />
+  </NuxtLink>
+</template>