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

@@ -8,16 +8,26 @@ interface ProductArea {
   label: string
   icon: any
   enabled: boolean
+  visible: boolean
   badge?: string
   route: string
 }
 
 const areas: ProductArea[] = [
   {
-    id: 'makerspace',
-    label: 'Makerspace',
+    id: 'experimenta-annual-passes',
+    label: 'experimenta Jahreskarten',
+    icon: Sparkles,
+    enabled: true,
+    visible: false,
+    route: '/experimenta',
+  },
+  {
+    id: 'makerspace-annual-passes',
+    label: 'Makerspace Jahreskarten',
     icon: Wrench,
     enabled: true,
+    visible: true,
     route: '/products',
   },
   {
@@ -25,17 +35,10 @@ const areas: ProductArea[] = [
     label: 'Labore',
     icon: FlaskConical,
     enabled: false,
+    visible: false,
     badge: 'Demnächst',
     route: '/labs',
   },
-  {
-    id: 'experimenta',
-    label: 'experimenta',
-    icon: Sparkles,
-    enabled: false,
-    badge: 'Demnächst',
-    route: '/experimenta',
-  },
 ]
 
 const route = useRoute()
@@ -64,17 +67,11 @@ function navigateToArea(area: ProductArea) {
     <!-- Desktop: Tabs -->
     <Tabs :model-value="currentArea" class="hidden md:block">
       <TabsList class="h-auto p-1 bg-muted/50">
-        <TabsTrigger
-          v-for="area in areas"
-          :key="area.id"
-          :value="area.id"
-          :disabled="!area.enabled"
-          :class="[
+        <TabsTrigger v-for="area in areas.filter(area => area.visible)" :key="area.id" :value="area.id"
+          :disabled="!area.enabled" :class="[
             'gap-2 data-[state=active]:bg-white dark:data-[state=active]:bg-zinc-900',
             !area.enabled && 'opacity-60 cursor-not-allowed',
-          ]"
-          @click="navigateToArea(area)"
-        >
+          ]" @click="navigateToArea(area)">
           <component :is="area.icon" class="h-4 w-4" />
           <span>{{ area.label }}</span>
           <Badge v-if="area.badge" variant="secondary" class="ml-1 text-[10px] px-1.5 py-0">
@@ -87,29 +84,17 @@ function navigateToArea(area: ProductArea) {
     <!-- Mobile: Horizontal scroll with cards -->
     <div class="md:hidden overflow-x-auto scrollbar-hide">
       <div class="flex gap-2 p-1 min-w-max">
-        <button
-          v-for="area in areas"
-          :key="area.id"
-          :disabled="!area.enabled"
-          :class="[
-            'flex items-center gap-2 px-4 py-2 rounded-lg border-2 transition-all whitespace-nowrap',
-            currentArea === area.id
-              ? 'bg-purple-600 text-white border-purple-600'
-              : 'bg-white dark:bg-zinc-900 border-border hover:border-purple-300',
-            !area.enabled && 'opacity-60 cursor-not-allowed',
-          ]"
-          @click="navigateToArea(area)"
-        >
-          <component
-            :is="area.icon"
-            :class="['h-4 w-4', currentArea === area.id ? 'text-white' : '']"
-          />
+        <button v-for="area in areas.filter(area => area.visible)" :key="area.id" :disabled="!area.enabled" :class="[
+          'flex items-center gap-2 px-4 py-2 rounded-lg border-2 transition-all whitespace-nowrap',
+          currentArea === area.id
+            ? 'bg-purple-600 text-white border-purple-600'
+            : 'bg-white dark:bg-zinc-900 border-border hover:border-purple-300',
+          !area.enabled && 'opacity-60 cursor-not-allowed',
+        ]" @click="navigateToArea(area)">
+          <component :is="area.icon" :class="['h-4 w-4', currentArea === area.id ? 'text-white' : '']" />
           <span class="font-medium">{{ area.label }}</span>
-          <Badge
-            v-if="area.badge"
-            :variant="currentArea === area.id ? 'secondary' : 'outline'"
-            class="text-[10px] px-1.5 py-0"
-          >
+          <Badge v-if="area.badge" :variant="currentArea === area.id ? 'secondary' : 'outline'"
+            class="text-[10px] px-1.5 py-0">
             {{ area.badge }}
           </Badge>
         </button>

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