Implement experimenta product listing page and enhance navigation components

- Added a new page for displaying experimenta annual passes, integrating ProductCard and ProductGrid components for product presentation.
- Updated API to filter products by category, allowing for specific product queries.
- Enhanced navigation components, including AreaTabs and RoleSwitcher, to improve user experience and accessibility.
- Refactored existing components for better styling consistency and responsiveness.
- Improved dropdown menu components with updated styles and hover effects for better usability.

app/components/navigation/RoleSwitcher.vue

@@ -107,7 +107,7 @@ function switchRole(role: UserRole) {
         :key="role.value"
         :disabled="!role.enabled"
         :class="[
-          'gap-3 py-3 cursor-pointer',
+          'gap-3 py-3 cursor-pointer group',
           !role.enabled && 'opacity-60 cursor-not-allowed',
           currentRole === role.value && 'bg-purple-50 dark:bg-purple-950',
         ]"
@@ -117,7 +117,7 @@ function switchRole(role: UserRole) {
 
         <div class="flex-1 flex flex-col gap-1">
           <span class="text-sm font-semibold">{{ role.label }}</span>
-          <span class="text-sm text-muted-foreground">{{ role.description }}</span>
+          <span class="text-sm text-muted-foreground group-hover:text-foreground/80 transition-colors">{{ role.description }}</span>
         </div>
 
         <Check