Browse Source

Update AreaTabs and experimenta page for educator annual pass visibility

- 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.
main
Bastian Masanek 2 months ago
parent
commit
4a3ef037ab
  1. 3
      app/components/navigation/AreaTabs.vue
  2. 17
      app/pages/experimenta/index.vue

3
app/components/navigation/AreaTabs.vue

@ -26,8 +26,9 @@ const areas: ProductArea[] = [
id: 'educator', id: 'educator',
label: 'Pädagogen Jahreskarte', label: 'Pädagogen Jahreskarte',
icon: GraduationCap, icon: GraduationCap,
enabled: true, enabled: false,
visible: true, visible: true,
badge: 'Demnächst',
route: '/educator', route: '/educator',
}, },
{ {

17
app/pages/experimenta/index.vue

@ -55,7 +55,7 @@ const getDiscount = (category: string): number | undefined => {
<!-- Page Header --> <!-- Page Header -->
<div class="mx-auto mb-12 max-w-container-wide text-center"> <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"> <h1 class="mb-4 text-4xl font-bold text-white md:text-5xl">
experimenta Jahreskarten experimenta Jahreskarte
</h1> </h1>
<p class="mx-auto max-w-2xl text-lg text-white/80"> <p class="mx-auto max-w-2xl text-lg text-white/80">
Erlebe die Ausstellungswelt der experimenta ein ganzes Jahr lang. Erlebe die Ausstellungswelt der experimenta ein ganzes Jahr lang.
@ -85,17 +85,10 @@ const getDiscount = (category: string): number | undefined => {
<!-- Products Grid --> <!-- Products Grid -->
<div v-else-if="products && products.length > 0" class="mx-auto max-w-container-wide"> <div v-else-if="products && products.length > 0" class="mx-auto max-w-container-wide">
<ProductGrid :columns="3"> <ProductGrid :columns="3">
<ProductCard <ProductCard v-for="product in products" :key="product.id" image="/img/makerspace-jk-2025.jpg"
v-for="product in products" :title="product.name" :description="product.description" :price="Number(product.price)"
:key="product.id" :badge="getBadge(product.category)" :discount-percentage="getDiscount(product.category)"
image="/img/makerspace-jk-2025.jpg" :product-id="product.id" />
:title="product.name"
:description="product.description"
:price="Number(product.price)"
:badge="getBadge(product.category)"
:discount-percentage="getDiscount(product.category)"
:product-id="product.id"
/>
</ProductGrid> </ProductGrid>
</div> </div>

Loading…
Cancel
Save