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