From 6689dd30138f320bfb0ea42444f0b5d654c3f940 Mon Sep 17 00:00:00 2001
From: Marc Mintel <marc@mintel.me>
Date: Sun, 14 Jun 2026 23:40:19 +0200
Subject: [PATCH] fix(standorte): fix layout and navigation structure

---
 app/[locale]/layout.tsx                | 11 ++++----
 app/[locale]/standorte/[slug]/page.tsx | 38 ++++++++++++++++----------
 components/layout/Header.tsx           | 12 +++++++-
 3 files changed, 40 insertions(+), 21 deletions(-)

diff --git a/app/[locale]/layout.tsx b/app/[locale]/layout.tsx
index 55283ab4a..550b495ec 100644
--- a/app/[locale]/layout.tsx
+++ b/app/[locale]/layout.tsx
@@ -92,12 +92,13 @@ export default async function Layout(props: {
       url: `/${safeLocale}/${await mapFileSlugToTranslated('ueber-uns', safeLocale)}`,
       children: [
         { label: safeLocale === 'de' ? 'Firma' : 'Company', url: `/${safeLocale}/${await mapFileSlugToTranslated('ueber-uns', safeLocale)}` },
-        { label: safeLocale === 'de' ? 'Standorte Übersicht' : 'Locations Overview', url: `/${safeLocale}/standorte` },
-        { label: 'Standort Guben', url: `/${safeLocale}/standorte/guben` },
-        { label: 'Standort Kirchheilingen', url: `/${safeLocale}/standorte/kirchheilingen` },
-        { label: 'Standort Bülstedt', url: `/${safeLocale}/standorte/buelstedt` },
         { label: safeLocale === 'de' ? 'Unser Team' : 'Our Team', url: `/${safeLocale}/team` },
-        { label: safeLocale === 'de' ? 'Zertifikate' : 'Certificates', url: `/${safeLocale}/zertifikate` }
+        { label: safeLocale === 'de' ? 'Zertifikate' : 'Certificates', url: `/${safeLocale}/zertifikate` },
+        { label: safeLocale === 'de' ? 'Standorte' : 'Locations', url: '#', isGroupLabel: true },
+        { label: safeLocale === 'de' ? 'Alle Standorte' : 'Locations Overview', url: `/${safeLocale}/standorte` },
+        { label: 'Guben (HQ)', url: `/${safeLocale}/standorte/guben` },
+        { label: 'Kirchheilingen', url: `/${safeLocale}/standorte/kirchheilingen` },
+        { label: 'Bülstedt', url: `/${safeLocale}/standorte/buelstedt` }
       ]
     },
     {
diff --git a/app/[locale]/standorte/[slug]/page.tsx b/app/[locale]/standorte/[slug]/page.tsx
index f1f2dff72..ab7f6df22 100644
--- a/app/[locale]/standorte/[slug]/page.tsx
+++ b/app/[locale]/standorte/[slug]/page.tsx
@@ -1,4 +1,4 @@
-import { Container } from '@/components/ui';
+import { Container, Badge, Heading } from '@/components/ui';
 import { getTranslations, setRequestLocale } from 'next-intl/server';
 import { Metadata } from 'next';
 import { notFound } from 'next/navigation';
@@ -63,21 +63,29 @@ export default async function StandortDetail(props: { params: Promise<{ locale:
   }
 
   return (
-    <div className="flex flex-col min-h-screen bg-neutral-50 pb-16 md:pb-24 pt-32">
-      <Container>
-        {/* Header Section */}
-        <div className="mb-12 md:mb-16">
-          <div className="inline-flex items-center gap-2 px-3 py-1.5 rounded-full bg-primary/10 border border-primary/20 text-primary text-xs font-bold uppercase tracking-wider mb-6">
-            <MapPin className="w-4 h-4" />
-            <span>{standort.type === 'hq' ? (safeLocale === 'de' ? 'Hauptsitz' : 'Headquarters') : (safeLocale === 'de' ? 'Niederlassung' : 'Branch')}</span>
-          </div>
-          <h1 className="font-heading text-4xl lg:text-5xl xl:text-6xl font-extrabold mb-6 leading-[1.1] text-neutral-dark text-balance">
-            {standort.name}
-          </h1>
-          <p className="text-xl text-neutral-500 max-w-3xl leading-relaxed">
-            {standort.description[safeLocale]}
-          </p>
+    <div className="flex flex-col min-h-screen bg-neutral-50 pb-16 md:pb-24">
+      {/* Industrial Hero Section */}
+      <section className="bg-primary-dark text-white pt-40 pb-12 md:pt-48 md:pb-16 min-h-[40vh] md:min-h-[45vh] flex flex-col justify-end relative overflow-hidden">
+        <div className="absolute inset-0 opacity-20 pointer-events-none">
+          <div className="absolute top-0 left-0 w-full h-full bg-[radial-gradient(circle_at_center,_var(--tw-gradient-stops))] from-accent/50 via-transparent to-transparent" />
         </div>
+        <Container className="relative z-10">
+          <div className="max-w-4xl">
+            <Badge variant="accent" className="mb-4 md:mb-6 shadow-sm flex inline-flex items-center gap-2">
+              <MapPin className="w-4 h-4" />
+              {standort.type === 'hq' ? (safeLocale === 'de' ? 'Hauptsitz' : 'Headquarters') : (safeLocale === 'de' ? 'Niederlassung' : 'Branch')}
+            </Badge>
+            <Heading level={1} variant="white" className="mb-6 drop-shadow-sm">
+              {standort.name}
+            </Heading>
+            <p className="text-xl md:text-2xl text-white/80 max-w-3xl leading-relaxed font-medium">
+              {standort.description[safeLocale]}
+            </p>
+          </div>
+        </Container>
+      </section>
+
+      <Container className="relative z-20 mt-12 md:mt-16">
 
         <div className="grid grid-cols-1 lg:grid-cols-12 gap-8 lg:gap-12">
           {/* Main Content (Images & Description) */}
diff --git a/components/layout/Header.tsx b/components/layout/Header.tsx
index 75140a047..629fa4f94 100644
--- a/components/layout/Header.tsx
+++ b/components/layout/Header.tsx
@@ -11,6 +11,7 @@ export interface NavLink {
   label: string;
   url: string;
   children?: NavLink[];
+  isGroupLabel?: boolean;
 }
 
 interface HeaderProps {
@@ -218,11 +219,20 @@ function NavItem({ link, currentLocale, pathname, isSolidMode }: { link: NavLink
               {/* Top glowing accent line */}
               <div className="absolute top-0 left-0 w-full h-[2px] bg-gradient-to-r from-transparent via-primary to-transparent opacity-70" />
               
-              {link.children.map((child) => {
+              {link.children.map((child, idx) => {
                 const childUrl = child.url.startsWith('/') && !child.url.match(/^\/(en|de)/) 
                   ? `/${currentLocale}${child.url}` 
                   : child.url;
                 const isChildActive = pathname === childUrl;
+                
+                if (child.isGroupLabel) {
+                  return (
+                    <div key={`group-${idx}`} className={`mt-2 mb-1 px-4 text-[11px] font-bold uppercase tracking-wider ${isSolidMode ? 'text-neutral-400' : 'text-neutral-500'}`}>
+                      {child.label}
+                    </div>
+                  );
+                }
+
                 return (
                   <TransitionLink
                     key={child.url}