feat(ui): finalize E-TIB modernization with footer redesign, video optimization, and TS fixes

Former-commit-id: 67ac02c8404cc66893fdf97308574701cca6000c
This commit is contained in:
2026-05-07 10:43:20 +02:00
parent f2fdea96ec
commit 5439df72ea
3712 changed files with 932332 additions and 1867 deletions

View File

@@ -2,37 +2,168 @@
title: "Our Competencies"
date: "2024-03-20"
excerpt: "From cable construction to electrical installation: We provide holistic solutions for modern network infrastructures."
layout: "fullBleed"
---
# Competencies
<HomeHero
badge="Competencies"
title="Everything from a\nsingle source"
description="From the first planning sketch to the final documentation we are your reliable partner for complex infrastructure projects."
videoUrl="/assets/videos/web/hero-bahnkreuzung.mp4"
linkText="Get in Touch"
linkHref="/en/kontakt"
/>
As a full-service partner in the field of cable civil engineering, we cover the entire spectrum of modern infrastructure projects.
<div className="bg-neutral-50 py-24 border-b border-neutral-100">
<div className="container max-w-7xl mx-auto px-4">
<div className="max-w-3xl mx-auto text-center mb-20">
<h2 className="text-primary font-bold tracking-wider uppercase text-sm mb-4">Quality & Safety</h2>
<h3 className="font-heading text-3xl md:text-5xl font-extrabold text-neutral-dark mb-6">
No compromises in construction
</h3>
<div className="w-20 h-2 bg-primary mx-auto mb-8"></div>
<p className="text-xl text-text-secondary leading-relaxed mb-6">
Everywhere you look, digging and drilling are happening, but unfortunately, many things go wrong. Safety standards and documentation requirements are often ignored. This results in accidents, damaged external lines, and expensive construction delays.
</p>
<p className="text-lg text-text-secondary leading-relaxed">
<strong className="text-neutral-dark font-bold">We work differently.</strong> Through our many years of experience, we identify problems early and develop safe solutions. Supported by our partner engineering firm, we offer planning, execution, and documentation at the highest level.
</p>
</div> <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
{/* Panel 1 */}
<div className="bg-white border border-neutral-200 p-8 md:p-12 relative group transition-colors duration-300 hover:border-primary/50">
<div className="flex justify-between items-start mb-10">
<div>
<h4 className="text-2xl font-extrabold text-neutral-dark uppercase tracking-wider">Energy & High Voltage</h4>
<div className="h-0.5 w-12 bg-primary mt-6 transition-all duration-500 group-hover:w-full"></div>
</div>
<div className="w-16 h-16 text-primary shrink-0 transition-transform duration-500 group-hover:scale-110 opacity-90 group-hover:opacity-100">
<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M32 4L12 36H30L26 60L52 24H34L32 4Z" stroke="currentColor" strokeWidth="1" strokeLinejoin="miter"/>
<circle cx="32" cy="32" r="30" stroke="currentColor" strokeWidth="1" strokeDasharray="4 4"/>
<line x1="32" y1="2" x2="32" y2="62" stroke="currentColor" strokeWidth="0.5" strokeDasharray="2 2"/>
<line x1="2" y1="32" x2="62" y2="32" stroke="currentColor" strokeWidth="0.5" strokeDasharray="2 2"/>
</svg>
</div>
</div>
<ul className="space-y-0 text-text-secondary">
<li className="flex items-start border-b border-neutral-100 py-4"><span className="text-primary mr-4 text-xs mt-1.5 opacity-80">■</span> Cable and pipe trenches</li>
<li className="flex items-start border-b border-neutral-100 py-4"><span className="text-primary mr-4 text-xs mt-1.5 opacity-80">■</span> Cable laying (0.4kV - 110kV)</li>
<li className="flex items-start border-b border-neutral-100 py-4"><span className="text-primary mr-4 text-xs mt-1.5 opacity-80">■</span> Cable assembly (0.4kV - 30kV)</li>
<li className="flex items-start border-b border-neutral-100 py-4"><span className="text-primary mr-4 text-xs mt-1.5 opacity-80">■</span> Construction of transformer stations</li>
<li className="flex items-start pt-4"><span className="text-primary mr-4 text-xs mt-1.5 opacity-80">■</span> Grounding systems & street lighting</li>
</ul>
</div>
## Cable Civil Engineering & Installation
{/* Panel 2 */}
<div className="bg-white border border-neutral-200 p-8 md:p-12 relative group transition-colors duration-300 hover:border-primary/50">
<div className="flex justify-between items-start mb-10">
<div>
<h4 className="text-2xl font-extrabold text-neutral-dark uppercase tracking-wider">Fiber Optics & Telecom</h4>
<div className="h-0.5 w-12 bg-primary mt-6 transition-all duration-500 group-hover:w-full"></div>
</div>
<div className="w-16 h-16 text-primary shrink-0 transition-transform duration-500 group-hover:scale-110 opacity-90 group-hover:opacity-100">
<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="32" cy="32" r="8" stroke="currentColor" strokeWidth="1"/>
<circle cx="12" cy="16" r="4" stroke="currentColor" strokeWidth="1"/>
<circle cx="52" cy="16" r="4" stroke="currentColor" strokeWidth="1"/>
<circle cx="12" cy="48" r="4" stroke="currentColor" strokeWidth="1"/>
<circle cx="52" cy="48" r="4" stroke="currentColor" strokeWidth="1"/>
<path d="M15 19L27 28M49 19L37 28M15 45L27 36M49 45L37 36M32 40V60M32 4V24" stroke="currentColor" strokeWidth="1"/>
<rect x="2" y="2" width="60" height="60" stroke="currentColor" strokeWidth="0.5" strokeDasharray="2 4"/>
</svg>
</div>
</div>
<ul className="space-y-0 text-text-secondary">
<li className="flex items-start border-b border-neutral-100 py-4"><span className="text-primary mr-4 text-xs mt-1.5 opacity-80">■</span> Production of empty conduit routes</li>
<li className="flex items-start border-b border-neutral-100 py-4"><span className="text-primary mr-4 text-xs mt-1.5 opacity-80">■</span> Pulling/blowing in fiber optic cables</li>
<li className="flex items-start border-b border-neutral-100 py-4"><span className="text-primary mr-4 text-xs mt-1.5 opacity-80">■</span> Setting up multi-function enclosures</li>
<li className="flex items-start pt-4"><span className="text-primary mr-4 text-xs mt-1.5 opacity-80">■</span> Fiber optic cable assembly</li>
</ul>
</div>
We install cable and pipe systems for all voltage ranges and media types.
{/* Panel 3 */}
<div className="bg-white border border-neutral-200 p-8 md:p-12 relative group transition-colors duration-300 hover:border-primary/50">
<div className="flex justify-between items-start mb-10">
<div>
<h4 className="text-2xl font-extrabold text-neutral-dark uppercase tracking-wider">Trenchless Laying</h4>
<div className="h-0.5 w-12 bg-primary mt-6 transition-all duration-500 group-hover:w-full"></div>
</div>
<div className="w-16 h-16 text-primary shrink-0 transition-transform duration-500 group-hover:scale-110 opacity-90 group-hover:opacity-100">
<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M4 32H20L28 20H44L52 32H60" stroke="currentColor" strokeWidth="1" strokeLinejoin="miter"/>
<path d="M28 44H44L52 32" stroke="currentColor" strokeWidth="1" strokeLinejoin="miter" strokeDasharray="4 4"/>
<circle cx="12" cy="32" r="2" fill="currentColor"/>
<circle cx="36" cy="20" r="2" fill="currentColor"/>
<circle cx="56" cy="32" r="2" fill="currentColor"/>
<path d="M0 48H64" stroke="currentColor" strokeWidth="1"/>
<path d="M0 54H64M0 60H64" stroke="currentColor" strokeWidth="0.5" strokeDasharray="2 2"/>
</svg>
</div>
</div>
<ul className="space-y-0 text-text-secondary">
<li className="flex items-start border-b border-neutral-100 py-4"><span className="text-primary mr-4 text-xs mt-1.5 opacity-80">■</span> Horizontal directional drilling (HDD)</li>
<li className="flex items-start border-b border-neutral-100 py-4"><span className="text-primary mr-4 text-xs mt-1.5 opacity-80">■</span> Max. drilling length: 250m</li>
<li className="flex items-start border-b border-neutral-100 py-4"><span className="text-primary mr-4 text-xs mt-1.5 opacity-80">■</span> Max. diameter: 400mm pipe</li>
<li className="flex items-start pt-4"><span className="text-primary mr-4 text-xs mt-1.5 opacity-80">■</span> Earth rocket (up to 15m / 160mm pipe)</li>
</ul>
</div>
- **Cable Construction**: Classic trenching and installation.
- **Cable Plowing**: Fast and efficient installation in suitable terrain.
- **Fiber Optics**: Expansion of broadband networks (FTTX).
- **Electrical Installation**: Installation and connection of cables up to 110 kV.
{/* Panel 4 */}
<div className="bg-white border border-neutral-200 p-8 md:p-12 relative group transition-colors duration-300 hover:border-primary/50">
<div className="flex justify-between items-start mb-10">
<div>
<h4 className="text-2xl font-extrabold text-neutral-dark uppercase tracking-wider">Planning & Consulting</h4>
<div className="h-0.5 w-12 bg-primary mt-6 transition-all duration-500 group-hover:w-full"></div>
</div>
<div className="w-16 h-16 text-primary shrink-0 transition-transform duration-500 group-hover:scale-110 opacity-90 group-hover:opacity-100">
<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M10 54L32 10L54 54" stroke="currentColor" strokeWidth="1"/>
<path d="M20 34H44" stroke="currentColor" strokeWidth="1"/>
<circle cx="32" cy="10" r="4" stroke="currentColor" strokeWidth="1"/>
<rect x="4" y="4" width="56" height="56" stroke="currentColor" strokeWidth="0.5" strokeDasharray="2 2"/>
<line x1="4" y1="20" x2="60" y2="20" stroke="currentColor" strokeWidth="0.5" strokeDasharray="1 3"/>
<line x1="4" y1="44" x2="60" y2="44" stroke="currentColor" strokeWidth="0.5" strokeDasharray="1 3"/>
</svg>
</div>
</div>
<ul className="space-y-0 text-text-secondary">
<li className="flex items-start border-b border-neutral-100 py-4"><span className="text-primary mr-4 text-xs mt-1.5 opacity-80">■</span> Structural & execution planning</li>
<li className="flex items-start border-b border-neutral-100 py-4"><span className="text-primary mr-4 text-xs mt-1.5 opacity-80">■</span> Tendering & construction supervision</li>
<li className="flex items-start border-b border-neutral-100 py-4"><span className="text-primary mr-4 text-xs mt-1.5 opacity-80">■</span> Approval planning</li>
<li className="flex items-start pt-4"><span className="text-primary mr-4 text-xs mt-1.5 opacity-80">■</span> Feasibility studies & project review</li>
</ul>
</div>
## Drilling Technology (HDD)
With our controlled horizontal directional drilling, we cross obstacles precisely and with minimal surface impact.
- **Precision**: Pinpoint target drilling even over long distances.
- **Versatility**: Use in all soil classes.
- **Efficiency**: Minimal site setup and fast execution.
## Planning & Documentation
A project is only complete when the documentation is perfect.
- **Route Planning**: Optimal routing taking all boundary conditions into account.
- **Permit Procedures**: We take care of the paperwork.
- **GIS Documentation**: Digital recording of the installed infrastructure.
## Ready for Your Project?
Contact us for a non-binding consultation on your project.
{/* Panel 5 - Full Width */}
<div className="bg-white border border-neutral-200 p-8 md:p-12 relative group transition-colors duration-300 hover:border-primary/50 md:col-span-2">
<div className="flex justify-between items-start mb-10">
<div>
<h4 className="text-2xl font-extrabold text-neutral-dark uppercase tracking-wider">Surveying & Documentation</h4>
<div className="h-0.5 w-12 bg-primary mt-6 transition-all duration-500 group-hover:w-full"></div>
</div>
<div className="w-32 h-16 text-primary shrink-0 transition-transform duration-500 group-hover:scale-110 opacity-90 group-hover:opacity-100">
<svg width="128" height="64" viewBox="0 0 128 64" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M10 32H118" stroke="currentColor" strokeWidth="1"/>
<path d="M64 10V54" stroke="currentColor" strokeWidth="1"/>
<circle cx="64" cy="32" r="16" stroke="currentColor" strokeWidth="1"/>
<circle cx="64" cy="32" r="24" stroke="currentColor" strokeWidth="0.5" strokeDasharray="4 4"/>
<path d="M64 24L72 32L64 40L56 32L64 24Z" stroke="currentColor" strokeWidth="1"/>
<rect x="4" y="4" width="120" height="56" stroke="currentColor" strokeWidth="0.5" strokeDasharray="2 4"/>
<path d="M24 32V24M44 32V28M84 32V28M104 32V24" stroke="currentColor" strokeWidth="1"/>
</svg>
</div>
</div>
<div className="grid md:grid-cols-2 gap-x-12 gap-y-0">
<ul className="space-y-0 text-text-secondary">
<li className="flex items-start border-b border-neutral-100 py-4"><span className="text-primary mr-4 text-xs mt-1.5 opacity-80">■</span> Staking out and surveying of cable routes</li>
<li className="flex items-start md:border-b md:border-neutral-100 py-4"><span className="text-primary mr-4 text-xs mt-1.5 opacity-80">■</span> Digital as-built documentation (GIS)</li>
</ul>
<ul className="space-y-0 text-text-secondary">
<li className="flex items-start border-b border-neutral-100 py-4"><span className="text-primary mr-4 text-xs mt-1.5 opacity-80">■</span> 360° photo/video recording of the construction site</li>
<li className="flex items-start pt-4"><span className="text-primary mr-4 text-xs mt-1.5 opacity-80">■</span> Creation of databases for project accounting</li>
</ul>
</div>
</div>
</div>
</div>
</div>