From cbb02348c9b83ac78ef4f4b430265a3f0118f2a6 Mon Sep 17 00:00:00 2001
From: Denis Lugowski <denis.lugowski@gmail.com>
Date: Sat, 10 Jan 2026 19:21:53 +0100
Subject: [PATCH] feat(landing): Separate /unternehmen page, replace comparison
 element in BenefitsWorksCouncil

---
 landing/app/app.vue                           |   2 +-
 .../landing/BenefitsWorksCouncil.vue          | 134 ++++++++----------
 .../app/components/landing/TeamSection.vue    |  42 +++---
 landing/app/pages/index.vue                   |   3 -
 landing/app/pages/unternehmen.vue             |  32 +++++
 landing/i18n/locales/de.json                  |   2 +
 landing/i18n/locales/en.json                  |   2 +
 7 files changed, 120 insertions(+), 97 deletions(-)
 create mode 100644 landing/app/pages/unternehmen.vue

diff --git a/landing/app/app.vue b/landing/app/app.vue
index eed63c2..1778527 100644
--- a/landing/app/app.vue
+++ b/landing/app/app.vue
@@ -222,7 +222,7 @@ const navigationItems = computed<NavigationMenuItem[]>(() => [
   },
   {
     label: t('nav.forCompanies'),
-    to: '/#unternehmen',
+    to: '/unternehmen',
     active: false
   },
   {
diff --git a/landing/app/components/landing/BenefitsWorksCouncil.vue b/landing/app/components/landing/BenefitsWorksCouncil.vue
index a49586b..03f5014 100644
--- a/landing/app/components/landing/BenefitsWorksCouncil.vue
+++ b/landing/app/components/landing/BenefitsWorksCouncil.vue
@@ -28,89 +28,72 @@
       </p>
     </template>
 
-    <!-- Toggle between pain points and benefits -->
-    <div class="mt-12">
-      <!-- Tab switcher -->
-      <div class="flex justify-center mb-10">
-        <div class="inline-flex p-1.5 rounded-2xl glass">
-          <button
-            :class="[
-              'px-6 py-3 rounded-xl text-sm font-semibold transition-all duration-300',
-              activeTab === 'pain'
-                ? 'bg-gradient-to-r from-warning-500 to-warning-600 text-white shadow-lg'
-                : 'text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white'
-            ]"
-            @click="activeTab = 'pain'"
+    <!-- Comparison view -->
+    <div class="mt-12 grid lg:grid-cols-2 gap-8 lg:gap-12">
+      <!-- Pain points column -->
+      <div class="space-y-6">
+        <div class="flex items-center gap-3 mb-6">
+          <div
+            class="w-12 h-12 rounded-2xl bg-gradient-to-br from-warning-500 to-orange-500 flex items-center justify-center shadow-lg shadow-warning-500/25"
           >
-            <UIcon name="i-lucide-x-circle" class="w-4 h-4 inline mr-2" />
-            {{ $t('worksCouncil.tabs.awayFrom') }}
-          </button>
-          <button
-            :class="[
-              'px-6 py-3 rounded-xl text-sm font-semibold transition-all duration-300',
-              activeTab === 'benefit'
-                ? 'bg-gradient-to-r from-success-500 to-success-600 text-white shadow-lg'
-                : 'text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white'
-            ]"
-            @click="activeTab = 'benefit'"
+            <UIcon name="i-lucide-x" class="w-6 h-6 text-white" />
+          </div>
+          <div>
+            <h3 class="font-heading text-xl font-bold text-gray-900 dark:text-white">
+              {{ $t('worksCouncil.tabs.awayFrom') }}
+            </h3>
+            <p class="text-sm text-gray-500 dark:text-gray-400">{{ $t('worksCouncil.awayFromSubtitle') }}</p>
+          </div>
+        </div>
+
+        <div class="space-y-3">
+          <div
+            v-for="(point, index) in painPoints"
+            :key="index"
+            class="group flex gap-4 p-4 rounded-xl bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 hover:border-warning-300 dark:hover:border-warning-600 transition-all animate-fade-in-up"
+            :style="{ animationDelay: `${index * 75}ms` }"
           >
-            <UIcon name="i-lucide-check-circle" class="w-4 h-4 inline mr-2" />
-            {{ $t('worksCouncil.tabs.towards') }}
-          </button>
+            <div
+              class="mt-0.5 w-8 h-8 rounded-lg bg-warning-100 dark:bg-warning-900/30 flex items-center justify-center shrink-0 group-hover:scale-110 transition-transform"
+            >
+              <UIcon :name="point.icon" class="w-4 h-4 text-warning-600 dark:text-warning-400" />
+            </div>
+            <p class="text-sm text-gray-700 dark:text-gray-300 leading-relaxed">{{ point.text }}</p>
+          </div>
         </div>
       </div>
 
-      <!-- Cards carousel -->
-      <div class="relative">
-        <!-- Pain points cards -->
-        <Transition
-          enter-active-class="transition-all duration-500 ease-out"
-          enter-from-class="opacity-0 translate-x-8"
-          enter-to-class="opacity-100 translate-x-0"
-          leave-active-class="transition-all duration-300 ease-in absolute inset-0"
-          leave-from-class="opacity-100 translate-x-0"
-          leave-to-class="opacity-0 -translate-x-8"
-        >
-          <div v-if="activeTab === 'pain'" class="grid sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-5">
-            <div v-for="(point, index) in painPoints" :key="index" class="group">
-              <div
-                class="h-full p-5 rounded-2xl bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 hover:border-warning-300 dark:hover:border-warning-700 shadow-sm hover:shadow-lg transition-all duration-300"
-              >
-                <div
-                  class="w-10 h-10 rounded-xl bg-warning-100 dark:bg-warning-900/30 flex items-center justify-center mb-4 group-hover:scale-110 transition-transform"
-                >
-                  <UIcon :name="point.icon" class="w-5 h-5 text-warning-600 dark:text-warning-400" />
-                </div>
-                <p class="text-sm text-gray-700 dark:text-gray-300 leading-relaxed">{{ point.text }}</p>
-              </div>
-            </div>
+      <!-- Benefits column -->
+      <div class="space-y-6">
+        <div class="flex items-center gap-3 mb-6">
+          <div
+            class="w-12 h-12 rounded-2xl bg-gradient-to-br from-success-500 to-emerald-500 flex items-center justify-center shadow-lg shadow-success-500/25"
+          >
+            <UIcon name="i-lucide-check" class="w-6 h-6 text-white" />
           </div>
-        </Transition>
+          <div>
+            <h3 class="font-heading text-xl font-bold text-gray-900 dark:text-white">
+              {{ $t('worksCouncil.tabs.towards') }}
+            </h3>
+            <p class="text-sm text-gray-500 dark:text-gray-400">{{ $t('worksCouncil.towardsSubtitle') }}</p>
+          </div>
+        </div>
 
-        <!-- Benefits cards -->
-        <Transition
-          enter-active-class="transition-all duration-500 ease-out"
-          enter-from-class="opacity-0 translate-x-8"
-          enter-to-class="opacity-100 translate-x-0"
-          leave-active-class="transition-all duration-300 ease-in absolute inset-0"
-          leave-from-class="opacity-100 translate-x-0"
-          leave-to-class="opacity-0 -translate-x-8"
-        >
-          <div v-if="activeTab === 'benefit'" class="grid sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-5">
-            <div v-for="(benefit, index) in benefits" :key="index" class="group">
-              <div
-                class="h-full p-5 rounded-2xl bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 hover:border-success-300 dark:hover:border-success-700 shadow-sm hover:shadow-lg transition-all duration-300"
-              >
-                <div
-                  class="w-10 h-10 rounded-xl bg-success-100 dark:bg-success-900/30 flex items-center justify-center mb-4 group-hover:scale-110 transition-transform"
-                >
-                  <UIcon :name="benefit.icon" class="w-5 h-5 text-success-600 dark:text-success-400" />
-                </div>
-                <p class="text-sm text-gray-700 dark:text-gray-300 leading-relaxed">{{ benefit.text }}</p>
-              </div>
+        <div class="space-y-3">
+          <div
+            v-for="(benefit, index) in benefits"
+            :key="index"
+            class="group flex gap-4 p-4 rounded-xl bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 hover:border-success-300 dark:hover:border-success-600 transition-all animate-fade-in-up"
+            :style="{ animationDelay: `${index * 75 + 100}ms` }"
+          >
+            <div
+              class="mt-0.5 w-8 h-8 rounded-lg bg-success-100 dark:bg-success-900/30 flex items-center justify-center shrink-0 group-hover:scale-110 transition-transform"
+            >
+              <UIcon :name="benefit.icon" class="w-4 h-4 text-success-600 dark:text-success-400" />
             </div>
+            <p class="text-sm text-gray-700 dark:text-gray-300 leading-relaxed">{{ benefit.text }}</p>
           </div>
-        </Transition>
+        </div>
       </div>
     </div>
 
@@ -130,7 +113,7 @@
           :style="{ animationDelay: `${index * 150}ms` }"
         >
           <div
-            class="h-full p-6 rounded-2xl bg-gradient-to-br from-primary-50 to-cyan-50 dark:from-primary-950/50 dark:to-cyan-950/50 border border-primary-100 dark:border-primary-900 hover:shadow-xl hover:shadow-primary-500/10 transition-all"
+            class="h-full p-6 rounded-2xl bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 hover:shadow-xl hover:shadow-primary-500/10 hover:border-primary-200 dark:hover:border-primary-700 transition-all"
           >
             <div
               class="w-12 h-12 rounded-2xl bg-gradient-to-br from-primary-500 to-cyan-500 flex items-center justify-center mb-4 group-hover:scale-110 transition-transform shadow-lg shadow-primary-500/25"
@@ -148,7 +131,6 @@
 
 <script setup lang="ts">
 const { t } = useI18n()
-const activeTab = ref<'pain' | 'benefit'>('benefit')
 
 const painPointIcons = [
   'i-lucide-search',
diff --git a/landing/app/components/landing/TeamSection.vue b/landing/app/components/landing/TeamSection.vue
index 7973e4f..e3a474b 100644
--- a/landing/app/components/landing/TeamSection.vue
+++ b/landing/app/components/landing/TeamSection.vue
@@ -1,24 +1,32 @@
 <template>
-  <section class="relative py-20 lg:py-28 overflow-hidden">
-    <!-- Background gradient -->
-    <div class="absolute inset-0 hero-gradient-light" />
+  <section class="relative min-h-screen py-20 lg:py-28 overflow-hidden hero-gradient-light">
+    <!-- Animated gradient orbs (same as homepage HeroSection) -->
+    <div class="absolute inset-0 overflow-hidden pointer-events-none">
+      <!-- Large teal orb -->
+      <div
+        class="gradient-orb gradient-orb-teal w-[600px] h-[600px] -top-40 -left-40 animate-orb-float"
+        style="animation-delay: 0s"
+      />
+      <!-- Violet orb -->
+      <div
+        class="gradient-orb gradient-orb-violet w-[500px] h-[500px] top-1/4 -right-32 animate-orb-float"
+        style="animation-delay: 3s"
+      />
+      <!-- Cyan orb -->
+      <div
+        class="gradient-orb gradient-orb-cyan w-[400px] h-[400px] bottom-0 left-1/4 animate-orb-float"
+        style="animation-delay: 6s"
+      />
+      <!-- Small accent orb -->
+      <div
+        class="gradient-orb gradient-orb-violet w-[200px] h-[200px] top-1/2 left-10 animate-orb-float opacity-40"
+        style="animation-delay: 9s"
+      />
 
-    <!-- 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"
-      />
+      <!-- Grid pattern overlay (same as homepage) -->
+      <div class="absolute inset-0 grid-pattern opacity-30" />
     </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">
diff --git a/landing/app/pages/index.vue b/landing/app/pages/index.vue
index 47a322b..f7a2dc9 100644
--- a/landing/app/pages/index.vue
+++ b/landing/app/pages/index.vue
@@ -9,9 +9,6 @@
     <!-- Benefits for Works Councils -->
     <LandingBenefitsWorksCouncil />
 
-    <!-- Benefits for Companies -->
-    <LandingBenefitsCompany />
-
     <!-- Features Grid (Bento Layout) -->
     <LandingFeaturesGrid />
 
diff --git a/landing/app/pages/unternehmen.vue b/landing/app/pages/unternehmen.vue
new file mode 100644
index 0000000..2cf840d
--- /dev/null
+++ b/landing/app/pages/unternehmen.vue
@@ -0,0 +1,32 @@
+<template>
+  <div class="benefits-company-page">
+    <LandingBenefitsCompany />
+  </div>
+</template>
+
+<script setup lang="ts">
+const { t, locale } = useI18n()
+
+// SEO Meta
+useSeoMeta({
+  title: () => `${t('company.title', { highlight: t('company.titleHighlight') })} - GremiumHub`,
+  description: () => t('company.description'),
+  ogTitle: () => `${t('company.title', { highlight: t('company.titleHighlight') })} - GremiumHub`,
+  ogDescription: () => t('company.description'),
+  ogImage: '/og-image.png',
+  ogType: 'website',
+  twitterCard: 'summary_large_image'
+})
+
+useHead({
+  htmlAttrs: {
+    lang: () => locale.value
+  }
+})
+</script>
+
+<style scoped>
+.benefits-company-page {
+  padding-top: 6rem;
+}
+</style>
diff --git a/landing/i18n/locales/de.json b/landing/i18n/locales/de.json
index 98a53b5..acb1ec6 100644
--- a/landing/i18n/locales/de.json
+++ b/landing/i18n/locales/de.json
@@ -84,6 +84,8 @@
       "awayFrom": "Typische Probleme der IT-Mitbestimmung",
       "towards": "Unsere Web-App bietet die Lösung"
     },
+    "awayFromSubtitle": "Typische Herausforderungen aus Betriebsratssicht",
+    "towardsSubtitle": "Mit GremiumHub",
     "painPoints": [
       "Informationen zu IT-/KI-Systemen mühsam zusammensuchen (E-Mails, PDFs, PowerPoint, Excel-Chaos)",
       "Medienbrüche, Versionschaos, wiederkehrende Rückfragen und Endlosschleifen",
diff --git a/landing/i18n/locales/en.json b/landing/i18n/locales/en.json
index 6691620..e5e0cea 100644
--- a/landing/i18n/locales/en.json
+++ b/landing/i18n/locales/en.json
@@ -84,6 +84,8 @@
       "awayFrom": "Away from",
       "towards": "Towards"
     },
+    "awayFromSubtitle": "Typical challenges from works council perspective",
+    "towardsSubtitle": "With GremiumHub",
     "painPoints": [
       "Laboriously gathering information on IT/AI systems (emails, PDFs, PowerPoint, Excel chaos)",
       "Media breaks, version chaos and recurring inquiries",