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/pages/products/index.vue

@@ -25,8 +25,12 @@ interface Product {
   updatedAt: Date
 }
 
-// Fetch products from API
-const { data: products, error, pending } = await useFetch<Product[]>('/api/products')
+// Fetch products from API - only Makerspace and Educator passes
+const { data: products, error, pending } = await useFetch<Product[]>('/api/products', {
+  query: {
+    category: 'makerspace-annual-pass,educator-annual-pass',
+  },
+})
 
 // Map product categories to badges
 const getBadge = (category: string): string | undefined => {
@@ -52,11 +56,11 @@ const getDiscount = (category: string): number | undefined => {
       <!-- Page Header -->
       <div class="mx-auto mb-12 max-w-container-wide text-center">
         <h1 class="mb-4 text-4xl font-bold text-white md:text-5xl">
-          Unsere Jahreskarten
+          Makerspace Jahreskarten
         </h1>
         <p class="mx-auto max-w-2xl text-lg text-white/80">
-          Wähle die passende Jahreskarte für deine Bedürfnisse. Alle Karten sind 365 Tage gültig
-          und sofort einsetzbar.
+          Dein Zugang zum Makerspace. Nutze modernste Werkzeuge, 3D-Drucker, Lasercutter und vieles mehr.
+          Alle Karten sind 365 Tage gültig und sofort einsetzbar.
         </p>
       </div>