From 860cd3ec9dd7533fd486481ae4dd9a2b2427cf9e Mon Sep 17 00:00:00 2001
From: Bastian Masanek <bastian.masanek@experimenta.science>
Date: Mon, 3 Nov 2025 17:36:54 +0100
Subject: [PATCH] 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.
---
 app/components/navigation/AppHeader.vue | 23 ++++++-----------
 app/components/navigation/AreaTabs.vue  | 33 ++++++++++++++++---------
 app/composables/useAuth.ts              |  2 +-
 app/pages/index.vue                     | 16 ++++++------
 4 files changed, 39 insertions(+), 35 deletions(-)

diff --git a/app/components/navigation/AppHeader.vue b/app/components/navigation/AppHeader.vue
index 8d5d9c0..3d7b71f 100644
--- a/app/components/navigation/AppHeader.vue
+++ b/app/components/navigation/AppHeader.vue
@@ -14,11 +14,8 @@ const { loggedIn } = useAuth()
       <!-- Left: Logo + Role Switcher -->
       <div class="flex items-center gap-6 md:gap-8">
         <NuxtLink to="/" class="flex-shrink-0 transition-transform hover:scale-105">
-          <img
-            src="/img/experimenta-logo-white.svg"
-            alt="experimenta Logo"
-            class="h-14 w-auto md:h-16 drop-shadow-lg"
-          />
+          <img src="/img/experimenta-logo-white.svg" alt="experimenta Logo"
+            class="h-14 w-auto md:h-16 drop-shadow-lg" />
         </NuxtLink>
 
         <!-- Role Switcher (Desktop only) -->
@@ -56,21 +53,17 @@ const { loggedIn } = useAuth()
 <style scoped>
 /* Custom experimenta styling */
 header {
-  background: linear-gradient(
-    135deg,
-    rgba(46, 16, 101, 0.98) 0%,
-    rgba(46, 16, 101, 0.95) 100%
-  );
+  background: linear-gradient(135deg,
+      rgba(46, 16, 101, 0.98) 0%,
+      rgba(46, 16, 101, 0.95) 100%);
   color: white;
 }
 
 /* Area tabs section with subtle gradient separator (no borders) */
 .area-tabs-section {
-  background: linear-gradient(
-    180deg,
-    rgba(255, 255, 255, 0.08) 0%,
-    rgba(255, 255, 255, 0.03) 100%
-  );
+  background: linear-gradient(180deg,
+      rgba(255, 255, 255, 0.08) 0%,
+      rgba(255, 255, 255, 0.03) 100%);
 }
 
 /* Mobile role section */
diff --git a/app/components/navigation/AreaTabs.vue b/app/components/navigation/AreaTabs.vue
index 4d5141a..c3ddff9 100644
--- a/app/components/navigation/AreaTabs.vue
+++ b/app/components/navigation/AreaTabs.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Wrench, FlaskConical, Ticket, Sparkles, GraduationCap } from 'lucide-vue-next'
+import { Wrench, FlaskConical, Ticket, Sparkles, GraduationCap, Home } from 'lucide-vue-next'
 import { Tabs, TabsList, TabsTrigger } from '@/components/ui/tabs'
 import { Badge } from '@/components/ui/badge'
 
@@ -14,6 +14,14 @@ interface ProductArea {
 }
 
 const areas: ProductArea[] = [
+  {
+    id: 'start',
+    label: 'Start',
+    icon: Home,
+    enabled: true,
+    visible: true,
+    route: '/',
+  },
   {
     id: 'makerspace',
     label: 'Makerspace Jahreskarte',
@@ -54,17 +62,20 @@ const areas: ProductArea[] = [
 const route = useRoute()
 
 const currentArea = computed(() => {
-  // Determine current area based on route
-  if (route.path.startsWith('/products') || route.path === '/') {
-    return 'makerspace'
-  } else if (route.path.startsWith('/educator')) {
-    return 'educator'
-  } else if (route.path.startsWith('/labs')) {
-    return 'labs'
-  } else if (route.path.startsWith('/experimenta')) {
-    return 'experimenta'
+  // Determine current area based on route - check areas array dynamically
+  const currentPath = route.path
+
+  // Exact match for root path
+  if (currentPath === '/') {
+    return areas.find(area => area.route === '/')?.id || ''
   }
-  return 'makerspace'
+
+  // Find area where route path starts with area.route
+  const matchedArea = areas.find(area =>
+    area.route !== '/' && currentPath.startsWith(area.route)
+  )
+
+  return matchedArea?.id || ''
 })
 
 function navigateToArea(area: ProductArea) {
diff --git a/app/composables/useAuth.ts b/app/composables/useAuth.ts
index 8cf733e..e84b868 100644
--- a/app/composables/useAuth.ts
+++ b/app/composables/useAuth.ts
@@ -39,7 +39,7 @@ export function useAuth() {
 
     // Redirect to products page or saved destination
     const redirectAfterLogin = useCookie('redirect_after_login')
-    const destination = redirectAfterLogin.value || '/products'
+    const destination = redirectAfterLogin.value || '/'
     redirectAfterLogin.value = null // Clear cookie
 
     navigateTo(destination)
diff --git a/app/pages/index.vue b/app/pages/index.vue
index 183d18c..b4f2d1c 100644
--- a/app/pages/index.vue
+++ b/app/pages/index.vue
@@ -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>