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/AppHeader.vue

@@ -0,0 +1,96 @@
+<script setup lang="ts">
+import RoleSwitcher from './RoleSwitcher.vue'
+import AreaTabs from './AreaTabs.vue'
+import CartButton from './CartButton.vue'
+import UserMenu from '../UserMenu.vue'
+
+const { loggedIn } = useAuth()
+</script>
+
+<template>
+  <header class="sticky top-0 z-50 w-full">
+    <!-- Main header bar -->
+    <div class="container flex h-24 items-center justify-between px-4 md:px-6 lg:px-8">
+      <!-- Left: Logo + Role Switcher -->
+      <div class="flex items-center gap-6 md:gap-8">
+        <NuxtLink to="/" class="flex-shrink-0 transition-transform hover:scale-105">
+          <img
+            src="/img/experimenta-logo-white.svg"
+            alt="experimenta Logo"
+            class="h-14 w-auto md:h-16 drop-shadow-lg"
+          />
+        </NuxtLink>
+
+        <!-- Role Switcher (Desktop only) -->
+        <div class="hidden lg:block">
+          <RoleSwitcher />
+        </div>
+      </div>
+
+      <!-- Right: Cart + User Menu -->
+      <div class="flex items-center gap-3 md:gap-6">
+        <!-- Cart Button (only visible when logged in) -->
+        <CartButton v-if="loggedIn" />
+
+        <!-- User Menu -->
+        <UserMenu />
+      </div>
+    </div>
+
+    <!-- Secondary navigation bar (Product areas) - No borders, gradient separation -->
+    <div class="area-tabs-section">
+      <div class="container px-4 md:px-6 lg:px-8 py-3">
+        <AreaTabs />
+      </div>
+    </div>
+
+    <!-- Mobile: Role switcher in collapsible section (optional) -->
+    <div class="lg:hidden mobile-role-section">
+      <div class="container px-4 py-2.5">
+        <RoleSwitcher />
+      </div>
+    </div>
+  </header>
+</template>
+
+<style scoped>
+/* Custom experimenta styling */
+header {
+  background: linear-gradient(
+    135deg,
+    rgba(46, 16, 101, 0.98) 0%,
+    rgba(46, 16, 101, 0.95) 100%
+  );
+  color: white;
+}
+
+/* Area tabs section with subtle gradient separator (no borders) */
+.area-tabs-section {
+  background: linear-gradient(
+    180deg,
+    rgba(255, 255, 255, 0.08) 0%,
+    rgba(255, 255, 255, 0.03) 100%
+  );
+}
+
+/* Mobile role section */
+.mobile-role-section {
+  background: rgba(255, 255, 255, 0.05);
+}
+
+/* Logo styling */
+img[alt='experimenta Logo'] {
+  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.3));
+}
+
+/* Ensure text is white in header */
+:deep(button),
+:deep(a) {
+  color: white;
+}
+
+:deep(.text-foreground),
+:deep(.text-muted-foreground) {
+  color: rgba(255, 255, 255, 0.9) !important;
+}
+</style>