From 7cb58e946c204dc56020014605e23ac8f92cabc4 Mon Sep 17 00:00:00 2001
From: Marc Mintel <marc@mintel.me>
Date: Thu, 7 May 2026 13:06:16 +0200
Subject: [PATCH] feat: redesign 'experten' section on homepage for premium
 industrial aesthetics

Former-commit-id: 87c108a8ac9a29065866e82e845121d1730fbc42
---
 content/de/home.mdx | 77 +++++++++++++++++++++++++++++------------
 content/en/home.mdx | 83 ++++++++++++++++++++++++++++++++-------------
 2 files changed, 115 insertions(+), 45 deletions(-)

diff --git a/content/de/home.mdx b/content/de/home.mdx
index 87574848b..c1e6f0048 100644
--- a/content/de/home.mdx
+++ b/content/de/home.mdx
@@ -39,48 +39,83 @@ description: Willkommen bei E-TIB GmbH
   ]}
 />
 
-<div className="bg-neutral-50 py-24 md:py-32 border-b border-neutral-100">
-  <div className="container max-w-6xl mx-auto px-4">
-    <div className="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
-      <div>
-        <h2 className="text-primary font-bold tracking-wider uppercase text-sm mb-4">Willkommen bei E-TIB</h2>
-        <h3 className="font-heading text-4xl md:text-5xl font-extrabold text-neutral-dark mb-8 leading-tight">
-          Wir sind die Experten für Kabeltiefbau
-        </h3>
-        <div className="w-20 h-2 bg-primary mb-8"></div>
-      </div>
-      <div className="text-xl md:text-2xl text-text-secondary leading-relaxed space-y-6 border-l-4 border-neutral-200 pl-8">
-        <div>
-          Die E-TIB GmbH ist ein leistungsfähiger und moderner Anbieter von technischen Dienstleistungen. Wir haben uns auf folgende Kernbereiche spezialisiert:
+<div className="bg-white py-24 md:py-32 relative overflow-hidden border-b border-neutral-100">
+  {/* Subtle industrial background pattern */}
+  <div className="absolute inset-0 opacity-[0.03] pointer-events-none" style={{ backgroundImage: 'radial-gradient(#0e7a5c 1px, transparent 1px)', backgroundSize: '32px 32px' }}></div>
+  
+  <div className="container max-w-7xl mx-auto px-4 relative z-10">
+    <div className="grid grid-cols-1 lg:grid-cols-12 gap-12 lg:gap-20 items-center">
+      
+      {/* Left Column: Heading & Intro */}
+      <div className="lg:col-span-5">
+        <div className="inline-flex items-center space-x-2 bg-primary/5 text-primary px-3 py-1.5 rounded-full mb-6 border border-primary/20 shadow-sm">
+          <span className="relative flex h-2 w-2">
+            <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-primary opacity-75"></span>
+            <span className="relative inline-flex rounded-full h-2 w-2 bg-primary"></span>
+          </span>
+          <span className="text-xs font-bold uppercase tracking-widest">Willkommen bei E-TIB</span>
         </div>
         
-        <div className="flex flex-wrap gap-3 py-2">
-          <Button href="/de/kompetenzen#kabelbau" variant="white" size="sm">
+        <h3 className="font-heading text-4xl md:text-5xl lg:text-6xl font-black text-neutral-dark mb-6 leading-[1.1] tracking-tight">
+          Wir sind die <span className="text-primary relative whitespace-nowrap">
+            Experten
+            <svg className="absolute -bottom-2 left-0 w-full h-3 text-primary/20" viewBox="0 0 100 10" preserveAspectRatio="none"><path d="M0 5 Q 50 10 100 5" stroke="currentColor" strokeWidth="4" fill="none"/></svg>
+          </span> <br/>für Kabeltiefbau
+        </h3>
+        
+        <p className="text-xl text-text-secondary leading-relaxed mb-8">
+          Die E-TIB GmbH ist ein leistungsfähiger und moderner Anbieter von technischen Dienstleistungen. Wir haben uns auf zukunftsweisende Kernbereiche der Infrastruktur spezialisiert.
+        </p>
+
+        {/* Stats Grid */}
+        <div className="grid grid-cols-2 gap-6 pt-8 border-t border-neutral-200">
+          <div>
+            <div className="text-4xl font-black text-primary mb-1 tracking-tighter">2015</div>
+            <div className="text-sm font-bold text-text-secondary uppercase tracking-wider">Gründung</div>
+          </div>
+          <div>
+            <div className="text-4xl font-black text-primary mb-1 tracking-tighter">50+</div>
+            <div className="text-sm font-bold text-text-secondary uppercase tracking-wider">Mitarbeiter</div>
+          </div>
+        </div>
+      </div>
+      
+      {/* Right Column: Pills & Content */}
+      <div className="lg:col-span-7 bg-neutral-50 rounded-3xl p-8 md:p-12 border border-neutral-200 shadow-xl relative overflow-hidden">
+        <div className="absolute top-0 right-0 w-48 h-48 bg-primary/5 rounded-bl-full pointer-events-none"></div>
+        
+        <h4 className="text-2xl font-bold text-neutral-dark mb-6">Unsere Spezialisierungen</h4>
+        
+        <div className="flex flex-wrap gap-3 mb-10">
+          <Button href="/de/kompetenzen#kabelbau" variant="white" size="sm" className="shadow-sm hover:shadow-md border border-neutral-200 hover:border-primary/30 transition-all">
             Tiefbauarbeiten
             <svg className="w-4 h-4 ml-1 opacity-50" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
           </Button>
-          <Button href="/de/kompetenzen#bohrtechnik" variant="white" size="sm">
+          <Button href="/de/kompetenzen#bohrtechnik" variant="white" size="sm" className="shadow-sm hover:shadow-md border border-neutral-200 hover:border-primary/30 transition-all">
             Horizontalspülbohrungen
             <svg className="w-4 h-4 ml-1 opacity-50" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
           </Button>
-          <Button href="/de/kompetenzen#kabelbau" variant="white" size="sm">
+          <Button href="/de/kompetenzen#kabelbau" variant="white" size="sm" className="shadow-sm hover:shadow-md border border-neutral-200 hover:border-primary/30 transition-all">
             Kabelpflugarbeiten
             <svg className="w-4 h-4 ml-1 opacity-50" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
           </Button>
-          <Button href="/de/kompetenzen#kabelbau" variant="white" size="sm">
+          <Button href="/de/kompetenzen#kabelbau" variant="white" size="sm" className="shadow-sm hover:shadow-md border border-neutral-200 hover:border-primary/30 transition-all">
             Leitungsverlegung
             <svg className="w-4 h-4 ml-1 opacity-50" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
           </Button>
-          <Button href="/de/kompetenzen#kabelbau" variant="white" size="sm">
+          <Button href="/de/kompetenzen#kabelbau" variant="white" size="sm" className="shadow-sm hover:shadow-md border border-neutral-200 hover:border-primary/30 transition-all">
             Kabelmontagen
             <svg className="w-4 h-4 ml-1 opacity-50" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
           </Button>
         </div>
 
-        <div>
-          Das Unternehmen wurde 2015 im brandenburgischen Guben gegründet und seitdem konsequent weiterentwickelt. Heute führen wir mit <strong className="text-primary font-bold">über 50 Mitarbeitern</strong> bundesweite Bauleistungen für Industrie, Telekommunikationsanbieter und Stromversorgungsunternehmen durch.
+        <div className="bg-white rounded-2xl p-6 md:p-8 border-l-4 border-primary shadow-sm">
+          <p className="text-neutral-dark text-lg md:text-xl leading-relaxed italic font-medium">
+            "Wir führen bundesweite Bauleistungen für Industrie, Telekommunikationsanbieter und Stromversorgungsunternehmen mit höchster Zuverlässigkeit und Präzision durch."
+          </p>
         </div>
       </div>
+      
     </div>
   </div>
 </div>
diff --git a/content/en/home.mdx b/content/en/home.mdx
index 927c36628..3cc6a9372 100644
--- a/content/en/home.mdx
+++ b/content/en/home.mdx
@@ -39,48 +39,83 @@ description: Welcome to E-TIB GmbH
   ]}
 />
 
-<div className="bg-neutral-50 py-24 md:py-32 border-b border-neutral-100">
-  <div className="container max-w-6xl mx-auto px-4">
-    <div className="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
-      <div>
-        <h2 className="text-primary font-bold tracking-wider uppercase text-sm mb-4">Welcome to E-TIB</h2>
-        <h3 className="font-heading text-4xl md:text-5xl font-extrabold text-neutral-dark mb-8 leading-tight">
-          We are the Experts for Cable Construction
-        </h3>
-        <div className="w-20 h-2 bg-primary mb-8"></div>
-      </div>
-      <div className="text-xl md:text-2xl text-text-secondary leading-relaxed space-y-6 border-l-4 border-neutral-200 pl-8">
-        <div>
-          E-TIB GmbH is a capable and modern provider of technical services. We have specialized in the following core areas:
+<div className="bg-white py-24 md:py-32 relative overflow-hidden border-b border-neutral-100">
+  {/* Subtle industrial background pattern */}
+  <div className="absolute inset-0 opacity-[0.03] pointer-events-none" style={{ backgroundImage: 'radial-gradient(#0e7a5c 1px, transparent 1px)', backgroundSize: '32px 32px' }}></div>
+  
+  <div className="container max-w-7xl mx-auto px-4 relative z-10">
+    <div className="grid grid-cols-1 lg:grid-cols-12 gap-12 lg:gap-20 items-center">
+      
+      {/* Left Column: Heading & Intro */}
+      <div className="lg:col-span-5">
+        <div className="inline-flex items-center space-x-2 bg-primary/5 text-primary px-3 py-1.5 rounded-full mb-6 border border-primary/20 shadow-sm">
+          <span className="relative flex h-2 w-2">
+            <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-primary opacity-75"></span>
+            <span className="relative inline-flex rounded-full h-2 w-2 bg-primary"></span>
+          </span>
+          <span className="text-xs font-bold uppercase tracking-widest">Welcome to E-TIB</span>
         </div>
+        
+        <h3 className="font-heading text-4xl md:text-5xl lg:text-6xl font-black text-neutral-dark mb-6 leading-[1.1] tracking-tight">
+          We are the <span className="text-primary relative whitespace-nowrap">
+            Experts
+            <svg className="absolute -bottom-2 left-0 w-full h-3 text-primary/20" viewBox="0 0 100 10" preserveAspectRatio="none"><path d="M0 5 Q 50 10 100 5" stroke="currentColor" strokeWidth="4" fill="none"/></svg>
+          </span> <br/>for Cable Construction
+        </h3>
+        
+        <p className="text-xl text-text-secondary leading-relaxed mb-8">
+          E-TIB GmbH is an efficient and modern provider of technical services. We specialize in future-oriented core areas of infrastructure.
+        </p>
 
-        <div className="flex flex-wrap gap-3 py-2">
-          <Button href="/en/competencies#kabelbau" variant="white" size="sm">
+        {/* Stats Grid */}
+        <div className="grid grid-cols-2 gap-6 pt-8 border-t border-neutral-200">
+          <div>
+            <div className="text-4xl font-black text-primary mb-1 tracking-tighter">2015</div>
+            <div className="text-sm font-bold text-text-secondary uppercase tracking-wider">Founded</div>
+          </div>
+          <div>
+            <div className="text-4xl font-black text-primary mb-1 tracking-tighter">50+</div>
+            <div className="text-sm font-bold text-text-secondary uppercase tracking-wider">Employees</div>
+          </div>
+        </div>
+      </div>
+      
+      {/* Right Column: Pills & Content */}
+      <div className="lg:col-span-7 bg-neutral-50 rounded-3xl p-8 md:p-12 border border-neutral-200 shadow-xl relative overflow-hidden">
+        <div className="absolute top-0 right-0 w-48 h-48 bg-primary/5 rounded-bl-full pointer-events-none"></div>
+        
+        <h4 className="text-2xl font-bold text-neutral-dark mb-6">Our Specializations</h4>
+        
+        <div className="flex flex-wrap gap-3 mb-10">
+          <Button href="/en/competencies#kabelbau" variant="white" size="sm" className="shadow-sm hover:shadow-md border border-neutral-200 hover:border-primary/30 transition-all">
             Civil Engineering
             <svg className="w-4 h-4 ml-1 opacity-50" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
           </Button>
-          <Button href="/en/competencies#bohrtechnik" variant="white" size="sm">
-            Horizontal Directional Drilling
+          <Button href="/en/competencies#bohrtechnik" variant="white" size="sm" className="shadow-sm hover:shadow-md border border-neutral-200 hover:border-primary/30 transition-all">
+            Horizontal Drilling
             <svg className="w-4 h-4 ml-1 opacity-50" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
           </Button>
-          <Button href="/en/competencies#kabelbau" variant="white" size="sm">
+          <Button href="/en/competencies#kabelbau" variant="white" size="sm" className="shadow-sm hover:shadow-md border border-neutral-200 hover:border-primary/30 transition-all">
             Cable Plowing
             <svg className="w-4 h-4 ml-1 opacity-50" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
           </Button>
-          <Button href="/en/competencies#kabelbau" variant="white" size="sm">
-            Pipeline Installation
+          <Button href="/en/competencies#kabelbau" variant="white" size="sm" className="shadow-sm hover:shadow-md border border-neutral-200 hover:border-primary/30 transition-all">
+            Line Installation
             <svg className="w-4 h-4 ml-1 opacity-50" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
           </Button>
-          <Button href="/en/competencies#kabelbau" variant="white" size="sm">
-            Cable Assembly
+          <Button href="/en/competencies#kabelbau" variant="white" size="sm" className="shadow-sm hover:shadow-md border border-neutral-200 hover:border-primary/30 transition-all">
+            Cable Assemblies
             <svg className="w-4 h-4 ml-1 opacity-50" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
           </Button>
         </div>
 
-        <div>
-          The company was founded in 2015 in Guben, Brandenburg, and has been consistently developed ever since. Today, with <strong className="text-primary font-bold">over 50 employees</strong>, we carry out nationwide construction services for industry, telecommunications providers, and energy utility companies.
+        <div className="bg-white rounded-2xl p-6 md:p-8 border-l-4 border-primary shadow-sm">
+          <p className="text-neutral-dark text-lg md:text-xl leading-relaxed italic font-medium">
+            "Today, we carry out nationwide construction services for industry, telecommunications providers, and electricity supply companies with the highest reliability and precision."
+          </p>
         </div>
       </div>
+      
     </div>
   </div>
 </div>