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

@@ -0,0 +1,191 @@
+<script setup lang="ts">
+// Demo page to showcase product cards
+
+definePageMeta({
+  layout: 'styleguide',
+})
+
+// Sample product data
+const products = [
+  {
+    id: 'makerspace-jk-2025',
+    image: '/img/makerspace-jk-2025.jpg',
+    title: 'Makerspace Jahreskarte',
+    description:
+      'Unbegrenzter Zugang zum Makerspace für 365 Tage. Nutze modernste Werkzeuge, 3D-Drucker und vieles mehr.',
+    price: 120.0,
+    badge: 'Beliebt',
+  },
+  {
+    id: 'experimenta-jk-2025',
+    image: '/img/makerspace-jk-2025.jpg', // Using same image as placeholder
+    title: 'experimenta Jahreskarte',
+    description:
+      'Erlebe die Ausstellungswelt der experimenta ein ganzes Jahr lang. Mit freiem Eintritt zu allen Ausstellungen.',
+    price: 85.0,
+  },
+  {
+    id: 'paedagogen-jk-2025',
+    image: '/img/makerspace-jk-2025.jpg', // Using same image as placeholder
+    title: 'Pädagogen Jahreskarte',
+    description:
+      'Speziell für Lehrkräfte und Pädagogen. Mit exklusiven Fortbildungsangeboten und Materialien.',
+    price: 60.0,
+    badge: 'Neu',
+    discountPercentage: 15,
+  },
+]
+</script>
+
+<template>
+  <div class="min-h-screen bg-gradient-primary px-4 py-12 md:px-6 lg:px-8">
+    <!-- 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">
+        Produktkarten Demo
+      </h1>
+      <p class="mx-auto max-w-2xl text-lg text-white/80">
+        Mobile-optimierte Produktkarten für Jahreskarten und andere Produkte der experimenta.
+      </p>
+    </div>
+
+    <!-- Product Grid Section -->
+    <div class="mx-auto max-w-container-wide">
+      <ProductGrid
+        title="Unsere Jahreskarten"
+        description="Wähle die passende Jahreskarte für deine Bedürfnisse. Alle Karten sind 365 Tage gültig und sofort einsetzbar."
+        :columns="3"
+      >
+        <ProductCard
+          v-for="product in products"
+          :key="product.id"
+          :image="product.image"
+          :title="product.title"
+          :description="product.description"
+          :price="product.price"
+          :badge="product.badge"
+          :discount-percentage="product.discountPercentage"
+          :product-id="product.id"
+        />
+      </ProductGrid>
+    </div>
+
+    <!-- Design Variants Section -->
+    <div class="mx-auto mt-20 max-w-container-wide">
+      <h2 class="mb-8 text-center text-3xl font-bold text-white">
+        Design-Varianten
+      </h2>
+
+      <!-- Single Column Layout -->
+      <div class="mb-12">
+        <h3 class="mb-4 text-xl font-bold text-white">Single Column (Mobile)</h3>
+        <ProductGrid :columns="1">
+          <ProductCard
+            :image="products[0].image"
+            :title="products[0].title"
+            :description="products[0].description"
+            :price="products[0].price"
+            :badge="products[0].badge"
+            :product-id="products[0].id"
+          />
+        </ProductGrid>
+      </div>
+
+      <!-- Two Column Layout -->
+      <div class="mb-12">
+        <h3 class="mb-4 text-xl font-bold text-white">Two Columns</h3>
+        <ProductGrid :columns="2">
+          <ProductCard
+            v-for="product in products.slice(0, 2)"
+            :key="product.id"
+            :image="product.image"
+            :title="product.title"
+            :description="product.description"
+            :price="product.price"
+            :badge="product.badge"
+            :product-id="product.id"
+          />
+        </ProductGrid>
+      </div>
+
+      <!-- Four Column Layout (Desktop only) -->
+      <div class="mb-12">
+        <h3 class="mb-4 text-xl font-bold text-white">
+          Four Columns (Desktop - shows 2 cols on mobile)
+        </h3>
+        <ProductGrid :columns="4">
+          <ProductCard
+            v-for="product in [...products, products[0]]"
+            :key="product.id + '-4col'"
+            :image="product.image"
+            :title="product.title"
+            :price="product.price"
+            :product-id="product.id"
+          />
+        </ProductGrid>
+      </div>
+    </div>
+
+    <!-- Component Features -->
+    <div class="mx-auto mt-20 max-w-container-wide">
+      <div class="rounded-2xl border border-white/20 bg-white/10 p-8 backdrop-blur-lg">
+        <h2 class="mb-6 text-2xl font-bold text-white">
+          Component Features
+        </h2>
+        <ul class="space-y-3 text-white/90">
+          <li class="flex items-start gap-2">
+            <span class="mt-1 text-experimenta-accent">✓</span>
+            <span><strong>Mobile-First:</strong> Optimiert für Smartphones, skaliert perfekt auf Desktop</span>
+          </li>
+          <li class="flex items-start gap-2">
+            <span class="mt-1 text-experimenta-accent">✓</span>
+            <span><strong>Responsive Images:</strong> 16:9 Aspect Ratio mit Zoom-Effekt beim Hover</span>
+          </li>
+          <li class="flex items-start gap-2">
+            <span class="mt-1 text-experimenta-accent">✓</span>
+            <span><strong>Optional Badges:</strong> "Beliebt", "Neu", oder eigene Texte</span>
+          </li>
+          <li class="flex items-start gap-2">
+            <span class="mt-1 text-experimenta-accent">✓</span>
+            <span><strong>Discount Badge:</strong> Prozentuale Rabatte hervorheben</span>
+          </li>
+          <li class="flex items-start gap-2">
+            <span class="mt-1 text-experimenta-accent">✓</span>
+            <span><strong>Gradient Button:</strong> Animierter Gradient beim Hover</span>
+          </li>
+          <li class="flex items-start gap-2">
+            <span class="mt-1 text-experimenta-accent">✓</span>
+            <span><strong>Glassmorphism Design:</strong> Backdrop blur mit experimenta Farbpalette</span>
+          </li>
+          <li class="flex items-start gap-2">
+            <span class="mt-1 text-experimenta-accent">✓</span>
+            <span><strong>Flexible Grid:</strong> 1-4 Spalten auf Desktop, automatisch responsive</span>
+          </li>
+        </ul>
+      </div>
+    </div>
+
+    <!-- Usage Example -->
+    <div class="mx-auto mt-12 max-w-container-wide">
+      <div class="rounded-2xl border border-white/20 bg-purple-darker/50 p-8 backdrop-blur-lg">
+        <h2 class="mb-4 text-2xl font-bold text-white">
+          Usage Example
+        </h2>
+        <pre class="overflow-x-auto rounded-lg bg-purple-darkest p-4 text-sm text-white/90"><code>&lt;ProductGrid
+  title="Unsere Jahreskarten"
+  description="Wähle die passende Karte"
+  :columns="3"
+&gt;
+  &lt;ProductCard
+    image="/img/makerspace-jk-2025.jpg"
+    title="Makerspace Jahreskarte"
+    description="Unbegrenzter Zugang..."
+    :price="120.00"
+    badge="Beliebt"
+    product-id="makerspace-jk-2025"
+  /&gt;
+&lt;/ProductGrid&gt;</code></pre>
+      </div>
+    </div>
+  </div>
+</template>

app/pages/internal/styleguide.vue

@@ -55,6 +55,7 @@ const copyCode = async (code: string) => {
           <li><a href="#status" class="link-primary">Status Messages</a></li>
           <li><a href="#progress" class="link-primary">Progress Bars</a></li>
           <li><a href="#components" class="link-primary">Components</a></li>
+          <li><a href="/internal/products-demo" class="link-accent">→ Product Cards Demo</a></li>
         </ul>
       </nav>
 
@@ -655,18 +656,34 @@ const copyCode = async (code: string) => {
       <section id="components" class="mb-16">
         <h2 class="text-4xl font-bold mb-6 text-experimenta-accent">Components</h2>
 
-        <div class="card-info card-accent-border">
+        <div class="card-info card-accent-border mb-8">
           <h3 class="text-xl font-semibold mb-2 text-experimenta-accent">Available Components</h3>
           <ul class="list-disc list-inside space-y-2 text-white/90">
             <li><strong>CommonHeader</strong> - Main navigation header with experimenta logo</li>
             <li><strong>CommonFooter</strong> - Footer with 4-column grid (links, contact, legal, social)</li>
             <li><strong>Button</strong> - shadcn-nuxt Button component with 7 variants</li>
+            <li><strong>ProductCard</strong> - Mobile-optimized product card with image, badges, and CTA</li>
+            <li><strong>ProductGrid</strong> - Flexible grid layout for product listings (1-4 columns)</li>
           </ul>
           <p class="mt-4 text-sm text-white/70">
             See individual component files in <code
               class="font-mono bg-white/10 px-2 py-1 rounded">/app/components/</code>
           </p>
         </div>
+
+        <!-- Product Cards Demo Link -->
+        <div class="card-glass">
+          <h3 class="text-2xl font-semibold mb-4 text-white">Product Cards</h3>
+          <p class="text-white/90 mb-6">
+            Speziell gestaltete Produktkarten für Jahreskarten und andere Produkte der experimenta.
+            Mobile-First Design mit Glassmorphism-Effekten, optionalen Badges und animierten Hover-Effekten.
+          </p>
+          <div class="flex gap-4">
+            <NuxtLink to="/internal/products-demo" class="btn-experimenta">
+              Zur Product Cards Demo →
+            </NuxtLink>
+          </div>
+        </div>
       </section>
 
       <!-- Footer -->