You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
197 lines
7.7 KiB
197 lines
7.7 KiB
<script setup lang="ts">
|
|
// Demo page to showcase product detail page design
|
|
|
|
import { CheckCircle } from 'lucide-vue-next'
|
|
|
|
definePageMeta({
|
|
layout: 'styleguide',
|
|
})
|
|
|
|
// Sample product data
|
|
const product = {
|
|
id: 'makerspace-jk-2025',
|
|
image: '/img/makerspace-jk-2025.jpg',
|
|
name: 'Makerspace Jahreskarte',
|
|
description:
|
|
'Unbegrenzter Zugang zum Makerspace für 365 Tage. Nutze modernste Werkzeuge, 3D-Drucker, Lasercutter und vieles mehr. Perfekt für Maker, Tüftler und kreative Köpfe.',
|
|
price: 120.0,
|
|
stockQuantity: 100,
|
|
}
|
|
|
|
// Format price in EUR
|
|
const formattedPrice = computed(() => {
|
|
return new Intl.NumberFormat('de-DE', {
|
|
style: 'currency',
|
|
currency: 'EUR',
|
|
}).format(product.price)
|
|
})
|
|
|
|
// Handle "Add to Cart" action (placeholder)
|
|
const handleAddToCart = () => {
|
|
alert('Add to Cart Demo - Diese Funktion wird in einer späteren Phase implementiert.')
|
|
}
|
|
</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">
|
|
Produktdetailseite Demo
|
|
</h1>
|
|
<p class="mx-auto max-w-2xl text-lg text-white/80">
|
|
Mobile-optimierte Produktdetailseite für Jahreskarten mit Glassmorphism-Design.
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Product Detail Example -->
|
|
<div class="mx-auto max-w-container-narrow">
|
|
<div class="overflow-hidden rounded-2xl border border-white/20 bg-white/10 shadow-glass backdrop-blur-lg">
|
|
<!-- Product Image (flush with top) -->
|
|
<div class="relative aspect-[16/9] w-full overflow-hidden bg-purple-dark">
|
|
<img
|
|
:src="product.image"
|
|
:alt="product.name"
|
|
class="h-full w-full object-cover"
|
|
/>
|
|
<!-- Gradient overlay -->
|
|
<div
|
|
class="absolute inset-0 bg-gradient-to-t from-purple-darkest/80 via-transparent to-transparent"
|
|
/>
|
|
</div>
|
|
|
|
<!-- Product Content -->
|
|
<div class="space-y-6 p-8">
|
|
<!-- Title -->
|
|
<h2 class="text-3xl font-bold text-white md:text-4xl">
|
|
{{ product.name }}
|
|
</h2>
|
|
|
|
<!-- Description -->
|
|
<p class="text-lg leading-relaxed text-white/90">
|
|
{{ product.description }}
|
|
</p>
|
|
|
|
<!-- Product Details -->
|
|
<div class="grid gap-4 sm:grid-cols-2">
|
|
<!-- Price Card -->
|
|
<div class="rounded-xl bg-white/5 p-4 backdrop-blur-sm">
|
|
<span class="mb-1 block text-xs uppercase tracking-wide text-white/60">Preis</span>
|
|
<span class="text-3xl font-bold text-experimenta-accent">
|
|
{{ formattedPrice }}
|
|
</span>
|
|
</div>
|
|
|
|
<!-- Availability Card -->
|
|
<div class="rounded-xl bg-white/5 p-4 backdrop-blur-sm">
|
|
<span class="mb-1 block text-xs uppercase tracking-wide text-white/60">Verfügbarkeit</span>
|
|
<div class="flex items-center gap-2 text-xl font-semibold text-green">
|
|
<CheckCircle :size="24" />
|
|
<span>Sofort</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Features / Benefits -->
|
|
<div class="rounded-xl border border-white/20 bg-white/5 p-6 backdrop-blur-sm">
|
|
<h3 class="mb-4 text-xl font-semibold text-white">
|
|
Was du mit dieser Karte bekommst:
|
|
</h3>
|
|
<ul class="space-y-3 text-white/90">
|
|
<li class="flex items-start gap-2">
|
|
<span class="mt-1 text-experimenta-accent">✓</span>
|
|
<span>365 Tage unbegrenzter Zugang</span>
|
|
</li>
|
|
<li class="flex items-start gap-2">
|
|
<span class="mt-1 text-experimenta-accent">✓</span>
|
|
<span>Keine versteckten Kosten</span>
|
|
</li>
|
|
<li class="flex items-start gap-2">
|
|
<span class="mt-1 text-experimenta-accent">✓</span>
|
|
<span>Sofort einsatzbereit nach Kauf</span>
|
|
</li>
|
|
<li class="flex items-start gap-2">
|
|
<span class="mt-1 text-experimenta-accent">✓</span>
|
|
<span>Flexible Nutzung – komme so oft du möchtest</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<!-- Action Buttons -->
|
|
<div class="flex flex-col gap-4 sm:flex-row">
|
|
<Button
|
|
variant="experimenta"
|
|
size="experimenta"
|
|
class="flex-1"
|
|
@click="handleAddToCart"
|
|
>
|
|
In den Warenkorb
|
|
</Button>
|
|
<NuxtLink to="/internal/products-demo" class="btn-secondary flex-1 text-center">
|
|
Weitere Produkte ansehen
|
|
</NuxtLink>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Design 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">
|
|
Design 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>Hero Image:</strong> 16:9 Aspect Ratio, bündig mit oberer Kartenrundung</span>
|
|
</li>
|
|
<li class="flex items-start gap-2">
|
|
<span class="mt-1 text-experimenta-accent">✓</span>
|
|
<span><strong>Glassmorphism Card:</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>Info Cards:</strong> Preis und Verfügbarkeit in separaten Cards mit Icons</span>
|
|
</li>
|
|
<li class="flex items-start gap-2">
|
|
<span class="mt-1 text-experimenta-accent">✓</span>
|
|
<span><strong>Feature List:</strong> Mit Häkchen-Icons in experimenta-accent Farbe</span>
|
|
</li>
|
|
<li class="flex items-start gap-2">
|
|
<span class="mt-1 text-experimenta-accent">✓</span>
|
|
<span><strong>Button Combo:</strong> Primary (experimenta) + Secondary (transparent border)</span>
|
|
</li>
|
|
<li class="flex items-start gap-2">
|
|
<span class="mt-1 text-experimenta-accent">✓</span>
|
|
<span><strong>Mobile-First:</strong> Responsive Grid (2 Spalten → 1 Spalte auf Mobile)</span>
|
|
</li>
|
|
<li class="flex items-start gap-2">
|
|
<span class="mt-1 text-experimenta-accent">✓</span>
|
|
<span><strong>Status-Anzeige:</strong> "Verfügbarkeit: Sofort" mit CheckCircle Icon (statt "Auf Lager")</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">
|
|
Implementation
|
|
</h2>
|
|
<p class="mb-4 text-white/90">
|
|
Die Produktdetailseite ist unter <code class="rounded bg-white/10 px-2 py-1">/products/[id]</code> verfügbar.
|
|
Produktdaten werden aus der PostgreSQL-Datenbank über die API geladen.
|
|
</p>
|
|
<pre class="overflow-x-auto rounded-lg bg-purple-darkest p-4 text-sm text-white/90"><code>// API Endpoints
|
|
GET /api/products - List all products
|
|
GET /api/products/[id] - Get single product
|
|
|
|
// Page Routes
|
|
/products - Product listing (ProductGrid)
|
|
/products/[id] - Product detail page</code></pre>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|