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.
80 lines
3.0 KiB
80 lines
3.0 KiB
<script setup lang="ts">
|
|
// Home page - MVP placeholder with shadcn-nuxt test
|
|
// 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">
|
|
<h1 class="text-4xl font-bold mb-4">Welcome to experimenta Shop</h1>
|
|
<p class="text-lg mb-8 text-white/90">Your gateway to Makerspace annual passes and more.</p>
|
|
|
|
<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>
|
|
This is a placeholder page. The full e-commerce functionality will be implemented in
|
|
upcoming phases.
|
|
</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">
|
|
<UiButton variant="experimenta" size="experimenta" as="a" href="https://www.experimenta.science/">
|
|
Zur experimenta Startseite
|
|
</UiButton>
|
|
|
|
<UiButton variant="experimenta" size="experimenta" @click="handleClick">
|
|
Mit Click Handler
|
|
</UiButton>
|
|
</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">
|
|
<UiButton variant="default" @click="handleClick"> Default Button </UiButton>
|
|
|
|
<UiButton variant="destructive" @click="handleClick"> Destructive </UiButton>
|
|
|
|
<UiButton variant="outline" @click="handleClick"> Outline </UiButton>
|
|
|
|
<UiButton variant="secondary" @click="handleClick"> Secondary </UiButton>
|
|
|
|
<UiButton variant="ghost" @click="handleClick"> Ghost </UiButton>
|
|
|
|
<UiButton variant="link" @click="handleClick"> Link </UiButton>
|
|
</div>
|
|
|
|
<p class="mt-6 text-sm text-white/70">Open browser console to see button click events.</p>
|
|
</div>
|
|
</div>
|
|
</NuxtLayout>
|
|
</template>
|
|
|