feat(landing): Add team

landing/app/app.vue

@@ -217,19 +217,28 @@ onMounted(() => {
 const navigationItems = computed<NavigationMenuItem[]>(() => [
   {
     label: t('nav.forWorksCouncils'),
-    to: '#betriebsraete'
+    to: '/#betriebsraete',
+    active: false
   },
   {
     label: t('nav.forCompanies'),
-    to: '#unternehmen'
+    to: '/#unternehmen',
+    active: false
   },
   {
     label: t('nav.features'),
-    to: '#features'
+    to: '/#features',
+    active: false
+  },
+  {
+    label: t('nav.team'),
+    to: '/team',
+    active: false
   },
   {
     label: t('nav.contact'),
-    to: '#kontakt'
+    to: '/#kontakt',
+    active: false
   }
 ])
 

landing/app/components/landing/TeamSection.vue

@@ -0,0 +1,163 @@
+<template>
+  <section class="relative py-20 lg:py-28 overflow-hidden">
+    <!-- Background gradient -->
+    <div class="absolute inset-0 hero-gradient-light" />
+
+    <!-- Animated gradient orbs -->
+    <div class="absolute inset-0 overflow-hidden pointer-events-none" aria-hidden="true">
+      <div class="gradient-orb gradient-orb-teal w-[500px] h-[500px] -top-20 -left-40 animate-orb-float opacity-40" />
+      <div
+        class="gradient-orb gradient-orb-violet w-[400px] h-[400px] top-1/3 -right-32 animate-orb-float opacity-30"
+        style="animation-delay: -5s"
+      />
+      <div
+        class="gradient-orb gradient-orb-cyan w-[350px] h-[350px] bottom-0 left-1/4 animate-orb-float opacity-35"
+        style="animation-delay: -10s"
+      />
+    </div>
+
+    <!-- Grid pattern overlay -->
+    <div class="absolute inset-0 dots-pattern opacity-30" aria-hidden="true" />
+
+    <div class="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+      <!-- Section header -->
+      <div class="text-center mb-16 lg:mb-20">
+        <span
+          class="inline-flex items-center gap-2 px-4 py-1.5 rounded-full bg-primary-100 dark:bg-primary-900/50 text-primary-700 dark:text-primary-300 text-sm font-medium mb-6 animate-fade-in-up"
+        >
+          <UIcon name="i-lucide-users" class="w-4 h-4" />
+          {{ $t('team.badge') }}
+        </span>
+
+        <h1
+          class="font-heading text-4xl sm:text-5xl lg:text-6xl font-bold text-gray-900 dark:text-white mb-6 animate-fade-in-up delay-100"
+        >
+          {{ $t('team.title') }}
+          <span class="gradient-text-teal">{{ $t('team.titleHighlight') }}</span>
+        </h1>
+
+        <p class="text-lg sm:text-xl text-gray-600 dark:text-gray-300 max-w-3xl mx-auto animate-fade-in-up delay-200">
+          {{ $t('team.description') }}
+        </p>
+      </div>
+
+      <!-- Team members grid -->
+      <div class="grid md:grid-cols-2 gap-8 lg:gap-12 max-w-5xl mx-auto">
+        <!-- Raphael Lugowski -->
+        <article class="group glass rounded-3xl p-8 lg:p-10 card-hover-lift animate-fade-in-up delay-300">
+          <div class="flex flex-col items-center text-center">
+            <!-- Profile image with gradient border -->
+            <div class="relative mb-6">
+              <div
+                class="absolute -inset-1 rounded-full bg-gradient-to-br from-primary-500 via-cyan-500 to-accent-500 opacity-75 group-hover:opacity-100 blur-sm transition-opacity"
+                aria-hidden="true"
+              />
+              <div
+                class="relative w-40 h-40 lg:w-48 lg:h-48 rounded-full overflow-hidden border-4 border-white dark:border-gray-800"
+              >
+                <img
+                  src="~/assets/img/Raphael%20Lugowski.jpg"
+                  :alt="$t('team.members.raphael.imageAlt')"
+                  class="w-full h-full object-cover"
+                  loading="lazy"
+                />
+              </div>
+            </div>
+
+            <!-- Name and role -->
+            <h2 class="font-heading text-2xl lg:text-3xl font-bold text-gray-900 dark:text-white mb-2">
+              {{ $t('team.members.raphael.name') }}
+            </h2>
+            <p class="text-primary-600 dark:text-primary-400 font-medium mb-4">
+              {{ $t('team.members.raphael.role') }}
+            </p>
+
+            <!-- LinkedIn link -->
+            <a
+              href="https://www.linkedin.com/in/raphael-lugowski/"
+              target="_blank"
+              rel="noopener noreferrer"
+              class="inline-flex items-center gap-2 text-gray-500 hover:text-primary-600 dark:text-gray-400 dark:hover:text-primary-400 transition-colors mb-6"
+              :aria-label="$t('team.members.raphael.linkedinLabel')"
+            >
+              <UIcon name="i-lucide-linkedin" class="w-5 h-5" />
+              <span class="text-sm">LinkedIn</span>
+            </a>
+
+            <!-- Description -->
+            <p class="text-gray-600 dark:text-gray-300 leading-relaxed">
+              {{ $t('team.members.raphael.description') }}
+            </p>
+          </div>
+        </article>
+
+        <!-- Denis Lugowski -->
+        <article class="group glass rounded-3xl p-8 lg:p-10 card-hover-lift animate-fade-in-up delay-400">
+          <div class="flex flex-col items-center text-center">
+            <!-- Profile image with gradient border -->
+            <div class="relative mb-6">
+              <div
+                class="absolute -inset-1 rounded-full bg-gradient-to-br from-primary-500 via-cyan-500 to-accent-500 opacity-75 group-hover:opacity-100 blur-sm transition-opacity"
+                aria-hidden="true"
+              />
+              <div
+                class="relative w-40 h-40 lg:w-48 lg:h-48 rounded-full overflow-hidden border-4 border-white dark:border-gray-800"
+              >
+                <img
+                  src="~/assets/img/Denis Lugowski.jpg"
+                  :alt="$t('team.members.denis.imageAlt')"
+                  class="w-full h-full object-cover"
+                  loading="lazy"
+                />
+              </div>
+            </div>
+
+            <!-- Name and role -->
+            <h2 class="font-heading text-2xl lg:text-3xl font-bold text-gray-900 dark:text-white mb-2">
+              {{ $t('team.members.denis.name') }}
+            </h2>
+            <p class="text-primary-600 dark:text-primary-400 font-medium mb-4">
+              {{ $t('team.members.denis.role') }}
+            </p>
+
+            <!-- LinkedIn link -->
+            <a
+              href="https://www.linkedin.com/in/denis-lugowski/"
+              target="_blank"
+              rel="noopener noreferrer"
+              class="inline-flex items-center gap-2 text-gray-500 hover:text-primary-600 dark:text-gray-400 dark:hover:text-primary-400 transition-colors mb-6"
+              :aria-label="$t('team.members.denis.linkedinLabel')"
+            >
+              <UIcon name="i-lucide-linkedin" class="w-5 h-5" />
+              <span class="text-sm">LinkedIn</span>
+            </a>
+
+            <!-- Description -->
+            <p class="text-gray-600 dark:text-gray-300 leading-relaxed">
+              {{ $t('team.members.denis.description') }}
+            </p>
+          </div>
+        </article>
+      </div>
+
+      <!-- CTA section -->
+      <div class="mt-16 lg:mt-20 text-center animate-fade-in-up delay-500">
+        <p class="text-gray-600 dark:text-gray-300 mb-6">
+          {{ $t('team.cta.text') }}
+        </p>
+        <UButton
+          to="mailto:info@legalconsenthub.de"
+          size="xl"
+          class="btn-gradient px-8 py-4 rounded-xl font-semibold shadow-lg shadow-primary-500/25 hover:shadow-primary-500/40 transition-shadow"
+        >
+          <span>{{ $t('team.cta.button') }}</span>
+          <UIcon name="i-lucide-mail" class="w-5 h-5 ml-2" />
+        </UButton>
+      </div>
+    </div>
+  </section>
+</template>
+
+<script setup lang="ts">
+// Component uses $t() from i18n auto-import
+</script>

landing/app/pages/team.vue

@@ -0,0 +1,60 @@
+<template>
+  <div class="team-page">
+    <LandingTeamSection />
+  </div>
+</template>
+
+<script setup lang="ts">
+const { t, locale } = useI18n()
+
+// SEO Meta
+useSeoMeta({
+  title: () => t('team.meta.title'),
+  description: () => t('team.meta.description'),
+  ogTitle: () => t('team.meta.title'),
+  ogDescription: () => t('team.meta.description'),
+  ogImage: '/og-image.png',
+  ogType: 'website',
+  twitterCard: 'summary_large_image'
+})
+
+// Structured data for SEO
+useHead({
+  htmlAttrs: {
+    lang: () => locale.value
+  },
+  script: [
+    {
+      type: 'application/ld+json',
+      innerHTML: JSON.stringify({
+        '@context': 'https://schema.org',
+        '@type': 'AboutPage',
+        name: t('team.meta.title'),
+        description: t('team.meta.description'),
+        mainEntity: {
+          '@type': 'Organization',
+          name: 'LegalConsentHub',
+          member: [
+            {
+              '@type': 'Person',
+              name: 'Raphael Lugowski',
+              jobTitle: t('team.members.raphael.role')
+            },
+            {
+              '@type': 'Person',
+              name: 'Denis Lugowski',
+              jobTitle: t('team.members.denis.role')
+            }
+          ]
+        }
+      })
+    }
+  ]
+})
+</script>
+
+<style scoped>
+.team-page {
+  padding-top: 5rem; /* Header offset */
+}
+</style>

landing/i18n/locales/de.json

@@ -23,6 +23,7 @@
     "forWorksCouncils": "Für Betriebsräte",
     "forCompanies": "Für Unternehmen",
     "features": "Features",
+    "team": "Team",
     "contact": "Kontakt"
   },
   "footer": {
@@ -326,5 +327,35 @@
   },
   "errors": {
     "generic": "Ein Fehler ist aufgetreten. Bitte versuchen Sie es später erneut."
+  },
+  "team": {
+    "meta": {
+      "title": "Unser Team – LegalConsentHub",
+      "description": "Lernen Sie die Köpfe hinter LegalConsentHub kennen: Experten für Arbeitsrecht und Softwareentwicklung, die digitale Mitbestimmung vorantreiben."
+    },
+    "badge": "Unser Team",
+    "title": "Die Köpfe hinter ",
+    "titleHighlight": "LegalConsentHub",
+    "description": "Wir verbinden juristische Expertise im Betriebsverfassungsrecht mit technischem Know-how in der Softwareentwicklung – für eine moderne, strukturierte IT-Mitbestimmung.",
+    "members": {
+      "raphael": {
+        "name": "Raphael Lugowski",
+        "role": "Fachanwalt für Arbeitsrecht",
+        "description": "Raphael ist Gründer der Betriebsrat Kanzlei in Hamburg und spezialisiert auf das Betriebsverfassungsrecht. Mit seiner langjährigen Erfahrung in der Beratung von Betriebsräten unterstützt er Gremien bei IT-Mitbestimmung, KI-Systemen und Betriebsänderungen. Er entwickelt praxiserprobte Betriebsvereinbarungen und begleitet Betriebsräte in Einigungsstellen sowie vor dem Arbeitsgericht.",
+        "imageAlt": "Profilbild von Raphael Lugowski",
+        "linkedinLabel": "LinkedIn-Profil von Raphael Lugowski öffnen"
+      },
+      "denis": {
+        "name": "Denis Lugowski",
+        "role": "Full-Stack Developer",
+        "description": "Denis ist Informatiker (M.Sc.) und Full-Stack-Entwickler mit Expertise in Frontend- und Backend-Entwicklung. Er verfügt über Erfahrung mit Kubernetes, Container-Orchestrierung und Monitoring. Sein akademischer Hintergrund umfasst die Entwicklung von Congestion Control im Linux-Kernel sowie die Implementierung des QUIC-Transportprotokolls im Omnet++ Simulationsframework.",
+        "imageAlt": "Profilbild von Denis Lugowski",
+        "linkedinLabel": "LinkedIn-Profil von Denis Lugowski öffnen"
+      }
+    },
+    "cta": {
+      "text": "Haben Sie Fragen oder möchten Sie mehr über LegalConsentHub erfahren?",
+      "button": "Kontakt aufnehmen"
+    }
   }
 }

landing/i18n/locales/en.json

@@ -23,6 +23,7 @@
     "forWorksCouncils": "For Works Councils",
     "forCompanies": "For Companies",
     "features": "Features",
+    "team": "Team",
     "contact": "Contact"
   },
   "footer": {
@@ -326,5 +327,35 @@
   },
   "errors": {
     "generic": "An error occurred. Please try again later."
+  },
+  "team": {
+    "meta": {
+      "title": "Our Team – LegalConsentHub",
+      "description": "Meet the people behind LegalConsentHub: Experts in labor law and software development driving digital co-determination forward."
+    },
+    "badge": "Our Team",
+    "title": "The People Behind ",
+    "titleHighlight": "LegalConsentHub",
+    "description": "We combine legal expertise in works council law with technical know-how in software development – for modern, structured IT co-determination.",
+    "members": {
+      "raphael": {
+        "name": "Raphael Lugowski",
+        "role": "Labor Law Attorney",
+        "description": "Raphael is the founder of Betriebsrat Kanzlei in Hamburg, specializing in works council law. With years of experience advising works councils, he supports committees on IT co-determination, AI systems, and corporate restructuring. He develops field-tested operating agreements and represents works councils in arbitration boards and labor courts.",
+        "imageAlt": "Profile picture of Raphael Lugowski",
+        "linkedinLabel": "Open Raphael Lugowski's LinkedIn profile"
+      },
+      "denis": {
+        "name": "Denis Lugowski",
+        "role": "Full-Stack Developer",
+        "description": "Denis is a computer scientist (M.Sc.) and full-stack developer with expertise in frontend and backend development. He has experience with Kubernetes, container orchestration, and monitoring. His academic background includes developing congestion control in the Linux kernel and implementing the QUIC transport protocol in the Omnet++ simulation framework.",
+        "imageAlt": "Profile picture of Denis Lugowski",
+        "linkedinLabel": "Open Denis Lugowski's LinkedIn profile"
+      }
+    },
+    "cta": {
+      "text": "Have questions or want to learn more about LegalConsentHub?",
+      "button": "Contact us"
+    }
   }
 }