Refactor UserMenu and navigation components for improved user experience

- Enhanced UserMenu.vue by implementing an extended user type for better user data handling and updated user initials logic.
- Adjusted AppHeader.vue and AreaTabs.vue for improved layout and spacing, ensuring a more cohesive design.
- Updated CartButton.vue and Tabs components for consistent styling and better responsiveness.

These changes aim to enhance the overall usability and visual appeal of the application, providing a smoother user experience.

app/components/navigation/AppHeader.vue

@@ -10,12 +10,11 @@ const { loggedIn } = useAuth()
 <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">
+    <div class="container flex items-end justify-between px-4 md:px-6 lg:px-8 py-6 md:py-7">
       <!-- Left: Logo + Role Switcher -->
-      <div class="flex items-center gap-6 md:gap-8">
+      <div class="flex items-end 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" />
+          <img src="/img/experimenta-logo-white.svg" alt="experimenta Logo" class="h-16 w-auto md:h-20 lg:h-22" />
         </NuxtLink>
 
         <!-- Role Switcher (Desktop only) -->
@@ -25,7 +24,7 @@ const { loggedIn } = useAuth()
       </div>
 
       <!-- Right: Cart + User Menu -->
-      <div class="flex items-center gap-3 md:gap-6">
+      <div class="flex items-end gap-3 md:gap-6">
         <!-- Cart Button (only visible when logged in) -->
         <CartButton v-if="loggedIn" />