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.
109 lines
3.9 KiB
109 lines
3.9 KiB
<script setup lang="ts">
|
|
// Home page - MVP placeholder with shadcn-nuxt test
|
|
const { loggedIn, user } = useAuth()
|
|
|
|
// Sample button click handler
|
|
const handleClick = () => {
|
|
console.log('shadcn-nuxt Button clicked!')
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<NuxtLayout name="default">
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
|
|
<!-- 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">
|
|
<template v-if="loggedIn">
|
|
Willkommen zurück, {{ user?.firstName }}!
|
|
</template>
|
|
<template v-else>
|
|
Willkommen!
|
|
</template>
|
|
</h1>
|
|
<p class="mx-auto max-w-2xl text-lg text-white/80">
|
|
Entdecke die vielfältigen Angebote der experimenta - wir freuen uns auf dich!
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Login Button for guests -->
|
|
<div v-if="!loggedIn" class="card-glass mb-8 text-center">
|
|
<h2 class="text-2xl font-semibold mb-3 text-experimenta-accent">
|
|
Melde dich an
|
|
</h2>
|
|
<p class="text-white/80 mb-6">
|
|
Um Makerspace-Jahreskarten zu kaufen, musst du dich zuerst anmelden.
|
|
</p>
|
|
<NuxtLink to="/auth">
|
|
<Button variant="experimenta" size="experimenta">
|
|
Jetzt anmelden
|
|
</Button>
|
|
</NuxtLink>
|
|
</div>
|
|
|
|
<div class="card-info card-accent-border mb-8">
|
|
<h2 class="text-xl font-semibold mb-2 text-experimenta-accent">MVP Development in Progress</h2>
|
|
<p>
|
|
Dies ist eine Platzhalter-Seite. Die vollständige E-Commerce-Funktionalität wird in
|
|
kommenden Phasen implementiert.
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Example: Card with Safrangold Accent Border -->
|
|
<div class="card-progress card-accent-border mb-8">
|
|
<div class="progress-header">
|
|
<h3 class="progress-title">Verlängerungsfortschritt</h3>
|
|
<div class="progress-stats">2963 / 4931</div>
|
|
</div>
|
|
<div class="progress-bar-wrapper">
|
|
<div class="progress-bar" style="width: 60.1%"></div>
|
|
<div class="progress-percentage">60.1%</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- experimenta Button Showcase -->
|
|
<div class="card-glass mb-8">
|
|
<h3 class="text-xl font-semibold mb-4 text-experimenta-accent">experimenta Button</h3>
|
|
<p class="mb-6 text-white/90">
|
|
Der offizielle experimenta-Button mit animiertem Gradient-Effekt beim Hovern:
|
|
</p>
|
|
|
|
<div class="flex flex-wrap gap-4 items-center">
|
|
<Button variant="experimenta" size="experimenta" as="a" href="https://www.experimenta.science/">
|
|
Zur experimenta Startseite
|
|
</Button>
|
|
|
|
<Button variant="experimenta" size="experimenta" @click="handleClick">
|
|
Mit Click Handler
|
|
</Button>
|
|
</div>
|
|
|
|
<p class="mt-6 text-sm text-white/70">
|
|
Hinweis: Der Button hat einen animierten Gradient-Effekt von Pink zu Rot beim Hovern.
|
|
</p>
|
|
</div>
|
|
|
|
<!-- shadcn-nuxt Button Component Test -->
|
|
<div class="card-glass">
|
|
<h3 class="text-xl font-semibold mb-4 text-experimenta-accent">shadcn-nuxt Components Test</h3>
|
|
<p class="mb-6 text-white/90">Testing shadcn-nuxt Button component integration:</p>
|
|
|
|
<div class="flex flex-wrap gap-4">
|
|
<Button variant="default" @click="handleClick"> Default Button </Button>
|
|
|
|
<Button variant="destructive" @click="handleClick"> Destructive </Button>
|
|
|
|
<Button variant="outline" @click="handleClick"> Outline </Button>
|
|
|
|
<Button variant="secondary" @click="handleClick"> Secondary </Button>
|
|
|
|
<Button variant="ghost" @click="handleClick"> Ghost </Button>
|
|
|
|
<Button variant="link" @click="handleClick"> Link </Button>
|
|
</div>
|
|
|
|
<p class="mt-6 text-sm text-white/70">Open browser console to see button click events.</p>
|
|
</div>
|
|
</div>
|
|
</NuxtLayout>
|
|
</template>
|
|
|