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/layouts/default.vue

@@ -1,18 +1,31 @@
 <script setup lang="ts">
-// Default layout with Header and Footer components
+import AppHeader from '~/components/navigation/AppHeader.vue'
+import BottomNav from '~/components/navigation/BottomNav.vue'
 </script>
 
 <template>
   <div class="min-h-screen flex flex-col">
-    <!-- Header -->
-    <CommonHeader />
+    <!-- New App Header with full navigation -->
+    <AppHeader />
 
-    <!-- Main content -->
-    <main class="flex-1">
+    <!-- Main content with bottom padding for mobile nav -->
+    <main class="flex-1 pb-20 md:pb-0">
       <slot />
     </main>
 
     <!-- Footer -->
     <CommonFooter />
+
+    <!-- Mobile Bottom Navigation -->
+    <BottomNav />
   </div>
 </template>
+
+<style scoped>
+/* Ensure main content doesn't get hidden behind bottom nav on mobile */
+@media (max-width: 768px) {
+  main {
+    padding-bottom: calc(4rem + env(safe-area-inset-bottom, 0px));
+  }
+}
+</style>