Refactor AppHeader and AreaTabs components for improved layout and functionality

- Adjusted AppHeader.vue for better spacing and alignment of elements, enhancing the overall visual appeal.
- Updated AreaTabs.vue to include a new 'Start' tab with a home icon, improving navigation options.
- Modified route handling in AreaTabs.vue to dynamically determine the current area based on the route.
- Changed default redirect destination in useAuth.ts to the root path for a more intuitive user experience.
- Enhanced index.vue to provide a more welcoming message and improved content presentation.

These changes aim to enhance user navigation and overall experience within the application.
This commit is contained in:
Bastian Masanek
2025-11-03 17:36:54 +01:00
parent f6f09ca147
commit 860cd3ec9d
4 changed files with 39 additions and 35 deletions

View File

@@ -11,18 +11,18 @@ const handleClick = () => {
<template>
<NuxtLayout name="default">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
<!-- Welcome Section -->
<div class="mb-8">
<h1 class="text-4xl font-bold mb-4">
<!-- 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>
Welcome to my.experimenta
Willkommen!
</template>
</h1>
<p class="text-lg text-white/90">
Your gateway to Makerspace annual passes and more.
<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>
@@ -44,8 +44,8 @@ const handleClick = () => {
<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.
Dies ist eine Platzhalter-Seite. Die vollständige E-Commerce-Funktionalität wird in
kommenden Phasen implementiert.
</p>
</div>