my2/app/pages/internal/products-demo.vue

<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>