From 4a3ef037abcea5b555acaf0748c8805d122833a8 Mon Sep 17 00:00:00 2001
From: Bastian Masanek <bastian.masanek@experimenta.science>
Date: Mon, 3 Nov 2025 14:17:58 +0100
Subject: [PATCH] Update AreaTabs and experimenta page for educator annual pass
 visibility
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Disabled the educator tab in AreaTabs and added a 'Demnächst' badge for future visibility.
- Updated the experimenta page header to singular form for consistency and improved layout of ProductCard components for better readability.

These changes enhance the user experience by clarifying product availability and improving the overall presentation of the educator annual pass.
---
 app/components/navigation/AreaTabs.vue |  3 ++-
 app/pages/experimenta/index.vue        | 17 +++++------------
 2 files changed, 7 insertions(+), 13 deletions(-)

diff --git a/app/components/navigation/AreaTabs.vue b/app/components/navigation/AreaTabs.vue
index 43a9022..4d5141a 100644
--- a/app/components/navigation/AreaTabs.vue
+++ b/app/components/navigation/AreaTabs.vue
@@ -26,8 +26,9 @@ const areas: ProductArea[] = [
     id: 'educator',
     label: 'Pädagogen Jahreskarte',
     icon: GraduationCap,
-    enabled: true,
+    enabled: false,
     visible: true,
+    badge: 'Demnächst',
     route: '/educator',
   },
   {
diff --git a/app/pages/experimenta/index.vue b/app/pages/experimenta/index.vue
index 7b75130..a99f720 100644
--- a/app/pages/experimenta/index.vue
+++ b/app/pages/experimenta/index.vue
@@ -55,7 +55,7 @@ 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">
-          experimenta Jahreskarten
+          experimenta Jahreskarte
         </h1>
         <p class="mx-auto max-w-2xl text-lg text-white/80">
           Erlebe die Ausstellungswelt der experimenta ein ganzes Jahr lang.
@@ -85,17 +85,10 @@ const getDiscount = (category: string): number | undefined => {
       <!-- Products Grid -->
       <div v-else-if="products && products.length > 0" class="mx-auto max-w-container-wide">
         <ProductGrid :columns="3">
-          <ProductCard
-            v-for="product in products"
-            :key="product.id"
-            image="/img/makerspace-jk-2025.jpg"
-            :title="product.name"
-            :description="product.description"
-            :price="Number(product.price)"
-            :badge="getBadge(product.category)"
-            :discount-percentage="getDiscount(product.category)"
-            :product-id="product.id"
-          />
+          <ProductCard v-for="product in products" :key="product.id" image="/img/makerspace-jk-2025.jpg"
+            :title="product.name" :description="product.description" :price="Number(product.price)"
+            :badge="getBadge(product.category)" :discount-percentage="getDiscount(product.category)"
+            :product-id="product.id" />
         </ProductGrid>
       </div>