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.

server/api/products/index.get.ts

@@ -3,18 +3,32 @@
  *
  * Returns a list of all active products available for purchase.
  * Products are sorted by category and name.
+ *
+ * Query Parameters:
+ * - category: Filter by category (optional, comma-separated for multiple)
  */
 
-import { eq } from 'drizzle-orm'
+import { eq, and, inArray } from 'drizzle-orm'
 import { products } from '../../database/schema'
 
 export default defineEventHandler(async (event) => {
   const db = useDatabase()
+  const query = getQuery(event)
+  const categoryParam = query.category as string | undefined
 
   try {
-    // Fetch all active products
+    // Build where conditions
+    const conditions = [eq(products.active, true)]
+
+    // Filter by category if provided
+    if (categoryParam) {
+      const categories = categoryParam.split(',').map((c) => c.trim())
+      conditions.push(inArray(products.category, categories))
+    }
+
+    // Fetch products with filters
     const allProducts = await db.query.products.findMany({
-      where: eq(products.active, true),
+      where: and(...conditions),
       orderBy: (products, { asc }) => [asc(products.category), asc(products.name)],
     })