Enhance navigation and UI components for improved user experience
- Added new AppHeader and BottomNav components for better navigation across the application. - Introduced AreaTabs for product area navigation and integrated RoleSwitcher for user role management. - Created CartButton component to display cart status and item count. - Implemented UserMenu with login/logout functionality and user greeting. - Added Badge component for notifications and status indicators. - Updated layout to accommodate new navigation components and ensure mobile responsiveness. - Created product detail demo page to showcase design patterns and features. - Enhanced existing components with improved styling and functionality.
This commit is contained in:
Bastian Masanek
195
app/pages/internal/product-detail-demo.vue
Normal file
195
app/pages/internal/product-detail-demo.vue
Normal file
@@ -0,0 +1,195 @@
|
||||
<script setup lang="ts">
|
||||
// Demo page to showcase product detail page design
|
||||
|
||||
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>
|
||||
@@ -56,6 +56,7 @@ const copyCode = async (code: string) => {
|
||||
<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>
|
||||
<li><a href="/internal/product-detail-demo" class="link-accent">→ Product Detail Demo</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
@@ -243,6 +244,46 @@ const copyCode = async (code: string) => {
|
||||
</details>
|
||||
</div>
|
||||
|
||||
<!-- Secondary Button (btn-secondary) -->
|
||||
<div class="card-glass mb-8">
|
||||
<h3 class="text-2xl font-semibold mb-4 text-white">Secondary Button (.btn-secondary)</h3>
|
||||
<p class="mb-6 text-white/90">
|
||||
Transparent button with white border. Perfect for secondary actions alongside primary buttons.
|
||||
Features a smooth hover effect that fills with white background.
|
||||
</p>
|
||||
|
||||
<div class="flex flex-wrap gap-4 items-center mb-6">
|
||||
<a href="#" class="btn-secondary" @click.prevent="handleClick">
|
||||
Secondary Action
|
||||
</a>
|
||||
|
||||
<NuxtLink to="#" class="btn-secondary">
|
||||
As NuxtLink
|
||||
</NuxtLink>
|
||||
</div>
|
||||
|
||||
<div class="bg-white/5 p-4 rounded-lg mb-4">
|
||||
<p class="text-sm text-white/70 mb-2"><strong>Usage Example:</strong> Product detail pages</p>
|
||||
<p class="text-sm text-white/70">
|
||||
Use alongside primary "In den Warenkorb" button for actions like "Weitere Produkte ansehen".
|
||||
The transparent background integrates beautifully with glassmorphism design.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<details class="bg-white/5 p-4 rounded-lg">
|
||||
<summary class="cursor-pointer text-white/90 font-semibold">Show Code</summary>
|
||||
<pre class="mt-4 text-sm text-white/80 overflow-x-auto"><code><!-- As Link -->
|
||||
<a href="#" class="btn-secondary">
|
||||
Secondary Action
|
||||
</a>
|
||||
|
||||
<!-- As NuxtLink -->
|
||||
<NuxtLink to="/products" class="btn-secondary">
|
||||
Weitere Produkte ansehen
|
||||
</NuxtLink></code></pre>
|
||||
</details>
|
||||
</div>
|
||||
|
||||
<!-- shadcn-nuxt Button Variants -->
|
||||
<div class="card-glass">
|
||||
<h3 class="text-2xl font-semibold mb-4 text-white">shadcn-nuxt Button Variants</h3>
|
||||
@@ -672,7 +713,7 @@ const copyCode = async (code: string) => {
|
||||
</div>
|
||||
|
||||
<!-- Product Cards Demo Link -->
|
||||
<div class="card-glass">
|
||||
<div class="card-glass mb-8">
|
||||
<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.
|
||||
@@ -684,6 +725,20 @@ const copyCode = async (code: string) => {
|
||||
</NuxtLink>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Product Detail Demo Link -->
|
||||
<div class="card-glass">
|
||||
<h3 class="text-2xl font-semibold mb-4 text-white">Product Detail Page</h3>
|
||||
<p class="text-white/90 mb-6">
|
||||
Vollständige Produktdetailseite für Jahreskarten mit Hero-Image, Preis- und Verfügbarkeitsanzeige,
|
||||
Feature-Liste und Call-to-Action Buttons. Zeigt alle Design-Patterns für Produktseiten.
|
||||
</p>
|
||||
<div class="flex gap-4">
|
||||
<NuxtLink to="/internal/product-detail-demo" class="btn-experimenta">
|
||||
Zur Product Detail Demo →
|
||||
</NuxtLink>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Footer -->
|
||||
|
||||
@@ -181,10 +181,8 @@ const handleAddToCart = () => {
|
||||
>
|
||||
{{ product.stockQuantity > 0 ? 'In den Warenkorb' : 'Nicht verfügbar' }}
|
||||
</Button>
|
||||
<NuxtLink to="/products" class="flex-1">
|
||||
<Button variant="outline" size="experimenta" class="w-full">
|
||||
Weitere Produkte ansehen
|
||||
</Button>
|
||||
<NuxtLink to="/products" class="btn-secondary flex-1 text-center">
|
||||
Weitere Produkte ansehen
|
||||
</NuxtLink>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user