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

@@ -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 */

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) {