refactor(ui): rewrite Heading component to act as central typography system, fix line-heights, and apply to MDX pages
Former-commit-id: dc62485b60679b810b5f74bfb5a22915b7a62314
This commit is contained in:
@@ -39,48 +39,61 @@ 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>
|
||||
<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">
|
||||
<Heading
|
||||
level={3}
|
||||
size="hero"
|
||||
subtitle="Über E-TIB"
|
||||
badgeStyle="industrial"
|
||||
className="mb-6 md:mb-8"
|
||||
>
|
||||
Ihr <span className="text-primary relative whitespace-nowrap">starker<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> Partner <br/>für Infrastruktur
|
||||
</Heading>
|
||||
|
||||
<div className="flex flex-wrap gap-3 py-2">
|
||||
<Button href="/de/kompetenzen#kabelbau" variant="white" size="sm">
|
||||
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">
|
||||
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">
|
||||
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">
|
||||
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">
|
||||
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 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.
|
||||
</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.
|
||||
{/* 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: Imagery & Mission */}
|
||||
<div className="lg:col-span-7 relative">
|
||||
<div className="aspect-[4/3] md:aspect-[16/9] lg:aspect-[4/3] rounded-3xl overflow-hidden shadow-2xl relative border border-neutral-200/50">
|
||||
<img src="/assets/photos/Etib_E-tib_Tiefbau_Guben_Netzanbindung_Energie-100.jpg" alt="E-TIB im Einsatz" className="w-full h-full object-cover" />
|
||||
<div className="absolute inset-0 bg-gradient-to-t from-neutral-dark/95 via-neutral-dark/40 to-transparent"></div>
|
||||
|
||||
<div className="absolute bottom-0 left-0 w-full p-8 md:p-12">
|
||||
<div className="border-l-4 border-primary pl-6">
|
||||
<div className="text-white text-xl md:text-2xl leading-relaxed italic font-medium drop-shadow-lg">
|
||||
"Wir führen bundesweite Bauleistungen für Industrie, Telekommunikationsanbieter und Stromversorgungsunternehmen mit höchster Zuverlässigkeit und Präzision durch."
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Decorative elements */}
|
||||
<div className="absolute -bottom-8 -right-8 w-64 h-64 bg-primary/10 rounded-full blur-3xl pointer-events-none"></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -39,48 +39,61 @@ 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">
|
||||
<Heading
|
||||
level={3}
|
||||
size="hero"
|
||||
subtitle="About E-TIB"
|
||||
badgeStyle="industrial"
|
||||
className="mb-6 md:mb-8"
|
||||
>
|
||||
Your <span className="text-primary relative whitespace-nowrap">strong<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> Partner <br/>for Infrastructure
|
||||
</Heading>
|
||||
|
||||
<div 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.
|
||||
</div>
|
||||
|
||||
<div className="flex flex-wrap gap-3 py-2">
|
||||
<Button href="/en/competencies#kabelbau" variant="white" size="sm">
|
||||
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
|
||||
<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 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
|
||||
<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
|
||||
<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.
|
||||
{/* 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: Imagery & Mission */}
|
||||
<div className="lg:col-span-7 relative">
|
||||
<div className="aspect-[4/3] md:aspect-[16/9] lg:aspect-[4/3] rounded-3xl overflow-hidden shadow-2xl relative border border-neutral-200/50">
|
||||
<img src="/assets/photos/Etib_E-tib_Tiefbau_Guben_Netzanbindung_Energie-100.jpg" alt="E-TIB in action" className="w-full h-full object-cover" />
|
||||
<div className="absolute inset-0 bg-gradient-to-t from-neutral-dark/95 via-neutral-dark/40 to-transparent"></div>
|
||||
|
||||
<div className="absolute bottom-0 left-0 w-full p-8 md:p-12">
|
||||
<div className="border-l-4 border-primary pl-6">
|
||||
<div className="text-white text-xl md:text-2xl leading-relaxed italic font-medium drop-shadow-lg">
|
||||
"Today, we carry out nationwide construction services for industry, telecommunications providers, and electricity supply companies with the highest reliability and precision."
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Decorative elements */}
|
||||
<div className="absolute -bottom-8 -right-8 w-64 h-64 bg-primary/10 rounded-full blur-3xl pointer-events-none"></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user