Add ProductCard and ProductGrid components for mobile-optimized product listings

- Introduced ProductCard component to display individual product details, including image, title, description, price, and optional badges.
- Added ProductGrid component to create a flexible grid layout for displaying multiple ProductCard components, supporting 1-4 columns.
- Created a demo page to showcase the ProductCard and ProductGrid components in action, highlighting their responsive design and features.
- Updated styleguide to include links and descriptions for the new components.

app/components/Product/ProductCard.vue

@@ -0,0 +1,125 @@
+<script setup lang="ts">
+import { cn } from '~/lib/utils'
+
+interface Props {
+  /**
+   * Product image URL
+   */
+  image: string
+  /**
+   * Product name (e.g., "Makerspace Jahreskarte")
+   */
+  title: string
+  /**
+   * Short product description
+   */
+  description?: string
+  /**
+   * Price in EUR (will be formatted)
+   */
+  price: number
+  /**
+   * Optional badge text (e.g., "Beliebt", "Neu")
+   */
+  badge?: string
+  /**
+   * Optional discount percentage
+   */
+  discountPercentage?: number
+  /**
+   * Product ID for navigation
+   */
+  productId?: string
+  /**
+   * Additional CSS classes
+   */
+  class?: string
+}
+
+const props = defineProps<Props>()
+
+// Format price in EUR
+const formattedPrice = computed(() => {
+  return new Intl.NumberFormat('de-DE', {
+    style: 'currency',
+    currency: 'EUR',
+  }).format(props.price)
+})
+</script>
+
+<template>
+  <div
+    :class="
+      cn(
+        'group relative flex flex-col overflow-hidden rounded-2xl bg-white/10 backdrop-blur-lg border border-white/20 shadow-glass transition-all duration-300 hover:scale-[1.02] hover:shadow-2xl hover:border-white/30',
+        props.class,
+      )
+    "
+  >
+    <!-- Badge (optional) -->
+    <div
+      v-if="badge"
+      class="absolute left-4 top-4 z-10 rounded-full bg-experimenta-primary px-3 py-1 text-xs font-bold uppercase tracking-wider text-white shadow-lg"
+    >
+      {{ badge }}
+    </div>
+
+    <!-- Discount Badge (optional) -->
+    <div
+      v-if="discountPercentage"
+      class="absolute right-4 top-4 z-10 flex h-12 w-12 items-center justify-center rounded-full bg-red text-white shadow-lg"
+    >
+      <span class="text-xs font-bold">-{{ discountPercentage }}%</span>
+    </div>
+
+    <!-- Product Image -->
+    <div class="relative aspect-[16/9] w-full overflow-hidden bg-purple-dark">
+      <img
+        :src="image"
+        :alt="title"
+        class="h-full w-full object-cover transition-transform duration-500 group-hover:scale-110"
+      />
+      <!-- Gradient overlay for better text readability -->
+      <div
+        class="absolute inset-0 bg-gradient-to-t from-purple-darkest/80 via-transparent to-transparent"
+      />
+    </div>
+
+    <!-- Card Content -->
+    <div class="flex flex-1 flex-col space-y-3 p-5">
+      <!-- Title -->
+      <h3
+        class="text-xl font-bold leading-tight text-white transition-colors group-hover:text-experimenta-accent"
+      >
+        {{ title }}
+      </h3>
+
+      <!-- Description -->
+      <p v-if="description" class="flex-1 text-sm leading-relaxed text-white/80">
+        {{ description }}
+      </p>
+
+      <!-- Price & CTA -->
+      <div class="flex items-center justify-between gap-3 pt-2">
+        <!-- Price -->
+        <div class="flex flex-col">
+          <span class="text-xs uppercase tracking-wide text-white/60">Preis</span>
+          <span class="text-2xl font-bold text-experimenta-accent">
+            {{ formattedPrice }}
+          </span>
+        </div>
+
+        <!-- CTA Button -->
+        <NuxtLink
+          :to="productId ? `/produkte/${productId}` : '#'"
+          class="group/btn relative overflow-hidden rounded-xl bg-gradient-button bg-size-300 bg-left px-6 py-3 font-bold text-white shadow-lg transition-all duration-300 hover:bg-right hover:shadow-2xl active:scale-95"
+        >
+          <span class="relative z-10">Details</span>
+          <div
+            class="absolute inset-0 bg-gradient-to-r from-transparent via-white/20 to-transparent opacity-0 transition-opacity duration-300 group-hover/btn:opacity-100"
+          />
+        </NuxtLink>
+      </div>
+    </div>
+  </div>
+</template>

app/components/Product/ProductGrid.vue

@@ -0,0 +1,66 @@
+<script setup lang="ts">
+import { cn } from '~/lib/utils'
+
+interface Props {
+  /**
+   * Grid title (e.g., "Unsere Jahreskarten")
+   */
+  title?: string
+  /**
+   * Grid description/subtitle
+   */
+  description?: string
+  /**
+   * Number of columns on desktop (default: 3)
+   */
+  columns?: 1 | 2 | 3 | 4
+  /**
+   * Additional CSS classes
+   */
+  class?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  columns: 3,
+})
+
+// Generate grid column classes
+const gridClass = computed(() => {
+  const colMap = {
+    1: 'md:grid-cols-1',
+    2: 'md:grid-cols-2',
+    3: 'md:grid-cols-3',
+    4: 'md:grid-cols-4',
+  }
+  return colMap[props.columns]
+})
+</script>
+
+<template>
+  <section :class="cn('w-full', props.class)">
+    <!-- Section Header -->
+    <div v-if="title || description" class="mb-8 text-center">
+      <h2
+        v-if="title"
+        class="mb-3 text-3xl font-bold text-white md:text-4xl"
+      >
+        {{ title }}
+      </h2>
+      <p v-if="description" class="mx-auto max-w-2xl text-base text-white/80 md:text-lg">
+        {{ description }}
+      </p>
+    </div>
+
+    <!-- Product Grid -->
+    <div
+      :class="
+        cn(
+          'grid grid-cols-1 gap-6 sm:grid-cols-2',
+          gridClass,
+        )
+      "
+    >
+      <slot />
+    </div>
+  </section>
+</template>