fix(mdx): resolve hydration errors and redesign subcompany tiles as logo grid under hero

Former-commit-id: d45ef2baf7ed5f673dc8dd688a3f937376743f84
This commit is contained in:
2026-05-07 11:21:53 +02:00
parent 5439df72ea
commit bd105fefaa
9 changed files with 98 additions and 159 deletions

View File

@@ -18,47 +18,25 @@ interface SubCompanyTilesProps {
alt?: string;
} | any;
}[];
data?: {
badge?: string;
title?: string;
companies?: {
title?: string;
description?: string;
icon?: string;
url?: string;
backgroundImage?: {
url?: string;
alt?: string;
} | any;
}[];
};
data?: any;
}
const defaultCompanies = [
{
title: 'E-TIB GmbH',
desc: 'Ausführung elektrischer Infrastrukturprojekte und komplexer Tiefbaumaßnahmen.',
icon: 'M13 10V3L4 14h7v7l9-11h-7z',
bgImage: '/assets/photos/DJI_0243.JPG',
url: 'https://www.e-tib.com/',
},
{
title: 'Bohrtechnik GmbH',
desc: 'Präzise Horizontalbohrungen und steuerbare Spülbohrtechnik in allen Bodenklassen.',
icon: 'M2 12a10 10 0 1 0 20 0 10 10 0 1 0-20 0zm10-8v16m-8-8h16',
bgImage: '/assets/photos/DSC08653.JPG',
},
{
title: 'Ingenieurgesellschaft',
desc: 'Fachübergreifende Planung, Projektierung und digitale Dokumentation von Leitungsnetzen.',
title: 'E-TIB Ingenieurgesellschaft mbH',
icon: 'M14 2H6a2 2 0 0 0-2 2v16c0 1.1.9 2 2 2h12a2 2 0 0 0 2-2V8l-6-6z M14 3v5h5 M16 13H8 M16 17H8 M10 9H8',
bgImage: '/assets/photos/DSC01137.JPG',
url: 'https://www.etib-ing.com/',
},
{
title: 'Verwaltung GmbH',
desc: 'Zentrale Koordination, moderner Einkauf und effizientes Finanzmanagement der Gruppe.',
icon: 'M3 21h18 M3 7h18 M5 21V7 M19 21V7 M9 21v-5a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v5 M12 3v4',
bgImage: '/assets/photos/DJI_0037.JPG',
},
title: 'NEMO GmbH',
icon: 'M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z',
url: 'https://www.nemo-gmbh.de/',
}
];
const containerVariants: Variants = {
@@ -66,49 +44,36 @@ const containerVariants: Variants = {
visible: {
opacity: 1,
transition: {
staggerChildren: 0.15,
staggerChildren: 0.1,
},
},
};
const itemVariants: Variants = {
hidden: { opacity: 0, y: 30 },
visible: { opacity: 1, y: 0, transition: { duration: 0.8, ease: [0.16, 1, 0.3, 1] } },
hidden: { opacity: 0, y: 15 },
visible: { opacity: 1, y: 0, transition: { duration: 0.5, ease: [0.16, 1, 0.3, 1] } },
};
export function SubCompanyTiles(props: SubCompanyTilesProps) {
const { data } = props;
const badge = props.badge || data?.badge || 'Die Gruppe';
const title = props.title || data?.title || 'Geballte Kompetenz unter einem Dach';
const rawCompanies = props.companies || data?.companies;
const companiesData = rawCompanies?.map(c => ({
const companiesData = rawCompanies?.map((c: any) => ({
title: c.title,
desc: c.description,
url: c.url,
icon: c.icon || 'M13 10V3L4 14h7v7l9-11h-7z',
bgImage: c.backgroundImage?.url || c.backgroundImage || '/assets/photos/DJI_0243.JPG',
})) || defaultCompanies;
const gridColsClass = companiesData.length === 3
? "grid-cols-1 lg:grid-cols-3"
: "grid-cols-1 md:grid-cols-2 lg:grid-cols-4";
return (
<section id="unternehmen" className="py-24 bg-neutral overflow-hidden">
<section id="unternehmen" className="py-8 bg-neutral-50 border-b border-neutral-100">
<div className="container relative z-10">
<div className="text-center max-w-3xl mx-auto mb-16">
<h2 className="text-primary font-bold tracking-wider uppercase text-sm mb-3">{badge}</h2>
<h3 className="font-heading text-4xl md:text-5xl font-extrabold text-text-primary">{title}</h3>
</div>
<motion.div
className={`grid gap-8 ${gridColsClass}`}
className="grid grid-cols-1 md:grid-cols-3 gap-6"
variants={containerVariants}
initial="hidden"
whileInView="visible"
viewport={{ once: true, margin: "-100px" }}
viewport={{ once: true, margin: "-50px" }}
>
{companiesData.map((company, index) => {
{companiesData.map((company: any, index: number) => {
const CardWrapper = company.url ? 'a' : 'div';
const wrapperProps = company.url ? { href: company.url, target: "_blank", rel: "noopener noreferrer" } : {};
@@ -120,41 +85,16 @@ export function SubCompanyTiles(props: SubCompanyTilesProps) {
>
<CardWrapper
{...wrapperProps}
className="group relative rounded-lg overflow-hidden aspect-[3/4] flex flex-col justify-end p-8 shadow-xl border-t-4 border-primary transition-all duration-500 hover:shadow-2xl hover:-translate-y-2 bg-neutral-dark cursor-pointer block w-full h-full"
className="group flex items-center justify-center gap-4 bg-white rounded-xl p-6 shadow-sm border border-neutral-100 transition-all duration-300 hover:shadow-md hover:border-primary/30 cursor-pointer h-full"
>
<div className="absolute inset-0 bg-[#0a192f] z-0">
<Image
src={company.bgImage}
alt={company.title || ''}
fill
className="object-cover opacity-50 group-hover:opacity-70 group-hover:scale-105 transition-all duration-700 ease-in-out grayscale-[30%] group-hover:grayscale-0"
sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
/>
</div>
{/* Premium Dark Gradient, lighter this time */}
<div className="absolute inset-0 bg-gradient-to-t from-[#0a192f]/90 via-[#0a192f]/40 to-transparent z-0" />
<div className="relative z-10 flex flex-col h-full justify-between">
<div className="w-14 h-14 rounded-none bg-primary/90 text-white flex items-center justify-center group-hover:bg-primary transition-all duration-300 shadow-lg backdrop-blur-sm">
<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
<path d={company.icon} />
</svg>
</div>
<div className="mt-auto transform translate-y-6 group-hover:translate-y-0 transition-transform duration-500 ease-out">
<h4 className="font-heading font-bold text-3xl text-white mb-3 leading-tight group-hover:text-primary transition-colors">{company.title}</h4>
<p className="text-white/80 leading-relaxed text-base h-0 opacity-0 group-hover:h-auto group-hover:opacity-100 group-hover:mt-4 transition-all duration-500 ease-out overflow-hidden line-clamp-4">
{company.desc}
</p>
{company.url && (
<div className="h-0 opacity-0 group-hover:h-auto group-hover:opacity-100 group-hover:mt-4 transition-all duration-500 ease-out flex items-center text-primary font-bold uppercase text-xs tracking-widest">
Website Besuchen
<svg className="w-4 h-4 ml-2" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
</div>
)}
</div>
<div className="w-10 h-10 shrink-0 text-primary group-hover:scale-110 transition-transform duration-300 flex items-center justify-center">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
<path d={company.icon} />
</svg>
</div>
<h4 className="font-heading font-bold text-lg text-neutral-dark group-hover:text-primary transition-colors">
{company.title}
</h4>
</CardWrapper>
</motion.div>
);
@@ -164,4 +104,3 @@ export function SubCompanyTiles(props: SubCompanyTilesProps) {
</section>
);
}

View File

@@ -4,7 +4,7 @@ description: Willkommen bei E-TIB GmbH
---
<HomeHero
badge="E-TIB Gruppe"
title={"Die Experten für\nKabeltiefbau"}
description="Wir realisieren komplexe Versorgungsleitungen für eine moderne Gesellschaft. Verlässlich, innovativ und mit höchster Präzision im Kabelbau und der Bohrtechnik."
videoUrl="/assets/videos/web/hero-kabelpflug.mp4"
@@ -12,31 +12,7 @@ description: Willkommen bei E-TIB GmbH
linkHref="/de/kompetenzen"
/>
<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">
<p>
Die E-TIB GmbH ist ein leistungsfähiger und moderner Anbieter von technischen Dienstleistungen im Bereich <strong className="text-neutral-dark font-semibold">Tiefbauarbeiten, Horizontalspülbohrungen, Kabelpflugarbeiten, Leitungsverlegung und Kabelmontagen</strong>. Das Unternehmen wurde 2015 im brandenburgischen Guben gegründet und seitdem konsequent weiterentwickelt.
</p>
<p>
Heute führen wir mit <strong className="text-primary font-bold">über 50 Mitarbeitern</strong> bundesweite Bauleistungen für Industrie, Telekommunikationsanbieter und Stromversorgungsunternehmen durch. Unsere qualifizierten Teams stellen mit einem modern ausgestatteten Maschinenpark die Zufriedenheit unserer Kunden sicher mit Kompetenz, Sorgfalt und Termintreue.
</p>
</div>
</div>
</div>
</div>
<HomeSubCompanyTiles
badge="Unsere Unternehmen"
title="Die Unternehmensgruppe"
companies={[
{
title: "E-TIB GMBH",
@@ -62,6 +38,30 @@ 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 im Bereich <strong className="text-neutral-dark font-semibold">Tiefbauarbeiten, Horizontalspülbohrungen, Kabelpflugarbeiten, Leitungsverlegung und Kabelmontagen</strong>. Das Unternehmen wurde 2015 im brandenburgischen Guben gegründet und seitdem konsequent weiterentwickelt.
</div>
<div>
Heute führen wir mit <strong className="text-primary font-bold">über 50 Mitarbeitern</strong> bundesweite Bauleistungen für Industrie, Telekommunikationsanbieter und Stromversorgungsunternehmen durch. Unsere qualifizierten Teams stellen mit einem modern ausgestatteten Maschinenpark die Zufriedenheit unserer Kunden sicher mit Kompetenz, Sorgfalt und Termintreue.
</div>
</div>
</div>
</div>
</div>
<HomeCompetenceBentoGrid
badge="Unsere Kompetenzen"
title="Alles aus einer Hand"

View File

@@ -19,9 +19,9 @@ layout: "fullBleed"
<div className="bg-white py-24 border-t border-neutral-100">
<div className="container max-w-4xl mx-auto px-4 prose prose-lg md:prose-xl prose-headings:font-bold prose-headings:text-neutral-dark prose-p:text-text-secondary prose-li:text-text-secondary prose-ul:space-y-2">
<h2>Karriere bei E-TIB</h2>
<p>
<div>
Die E-TIB GmbH wurde 2015 aus der Motivation gegründet, hochwertige Leistungen für unsere Kunden sowie faire Entlohnung für unsere Mitarbeiter zu ermöglichen. Neben der Entlohnung steht für uns die Wertschätzung jedes einzelnen Mitarbeiters an oberster Stelle.
</p>
</div>
<h3>Wir bieten unseren Mitarbeitern:</h3>
<ul>
@@ -39,9 +39,9 @@ layout: "fullBleed"
<li>familiäres Betriebsklima mit betrieblich organisierten Veranstaltungen</li>
</ul>
<p>
<div>
Unsere erfolgreiche Unternehmensentwicklung ermöglicht uns kontinuierlich neue Arbeitskräfte einzustellen. Wir sind immer auf der Suche nach engagierten und motivierten Mitarbeitern. Werden Sie auch ein Teil unseres Teams. Schauen Sie sich unsere offenen Stellen an oder bewerben Sie sich initiativ.
</p>
</div>
</div>
</div>

View File

@@ -60,12 +60,12 @@ layout: "fullBleed"
Keine Kompromisse am Bau
</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">
<div>
Auf vielen Baustellen werden zunehmend Billiganbieter eingesetzt. Sicherheitsstandards und Dokumentationsanforderungen werden oft missachtet. Daraus resultieren Unfälle, defekte Fremdleitungen und teure Bauverzögerungen.
</p>
<p className="text-lg text-text-secondary leading-relaxed">
</div>
<div>
<strong className="text-neutral-dark font-bold">Wir arbeiten anders.</strong> Durch unsere langjährige Erfahrung erkennen wir Problemstellungen frühzeitig und erarbeiten sichere Lösungen. Unterstützt durch unser Partner-Ingenieurbüro bieten wir Planung, Ausführung und Dokumentation auf höchstem Niveau.
</p>
</div>
</div>
<div className="grid grid-cols-1 md:grid-cols-2 gap-8">

View File

@@ -25,12 +25,12 @@ layout: "fullBleed"
Infrastruktur für die Energie von morgen
</h3>
<div className="w-20 h-2 bg-primary mb-8"></div>
<p className="text-xl text-text-secondary leading-relaxed mb-6">
<div>
Seit unserer Gründung im Jahr 2015 in Guben haben wir es uns zur Aufgabe gemacht, den Ausbau der kritischen Infrastruktur in Deutschland aktiv mitzugestalten.
</p>
<p className="text-lg text-text-secondary leading-relaxed">
</div>
<div>
Mit über 50 engagierten Fachkräften und einem hochmodernen Maschinenpark meistern wir selbst anspruchsvollste Projekte im Kabelleitungstiefbau, der Spülbohrtechnik und der Netzmontage. Verlässlichkeit, Termintreue und höchste Qualitätsstandards sind dabei unser Fundament.
</p>
</div>
</div>
<div className="grid grid-cols-2 gap-6">
<div className="bg-white p-8 rounded-2xl shadow-sm border border-neutral-100">

View File

@@ -4,7 +4,7 @@ description: Welcome to E-TIB GmbH
---
<HomeHero
badge="E-TIB Group"
title={"The Experts for\nCable Construction"}
description="We realize complex supply lines for a modern society. Reliable, innovative and with the highest precision in cable construction and drilling technology."
videoUrl="/assets/videos/web/hero-kabelpflug.mp4"
@@ -12,31 +12,7 @@ description: Welcome to E-TIB GmbH
linkHref="/en/competencies"
/>
<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">
<p>
E-TIB GmbH is a capable and modern provider of technical services in the field of <strong className="text-neutral-dark font-semibold">civil engineering, horizontal directional drilling, cable plowing, pipeline installation, and cable assembly</strong>. The company was founded in 2015 in Guben, Brandenburg, and has been consistently developed ever since.
</p>
<p>
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. Our qualified teams ensure the satisfaction of our customers with a modern machinery park with competence, care, and adherence to deadlines.
</p>
</div>
</div>
</div>
</div>
<HomeSubCompanyTiles
badge="Our Companies"
title="The Corporate Group"
companies={[
{
title: "E-TIB GMBH",
@@ -62,6 +38,30 @@ 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 in the field of <strong className="text-neutral-dark font-semibold">civil engineering, horizontal directional drilling, cable plowing, pipeline installation, and cable assembly</strong>. The company was founded in 2015 in Guben, Brandenburg, and has been consistently developed ever since.
</div>
<div>
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. Our qualified teams ensure the satisfaction of our customers with a modern machinery park with competence, care, and adherence to deadlines.
</div>
</div>
</div>
</div>
</div>
<HomeCompetenceBentoGrid
badge="Our Competencies"
title="Everything from a single source"

View File

@@ -34,9 +34,9 @@ layout: "fullBleed"
<div className="bg-white py-24 border-t border-neutral-100">
<div className="container max-w-4xl mx-auto px-4 prose prose-lg md:prose-xl prose-headings:font-bold prose-headings:text-neutral-dark prose-p:text-text-secondary prose-li:text-text-secondary prose-ul:space-y-2">
<h2>Careers at E-TIB</h2>
<p>
<div>
E-TIB GmbH was founded in 2015 out of the motivation to enable high-quality services for our customers as well as fair remuneration for our employees. In addition to remuneration, the appreciation of each individual employee is our top priority.
</p>
</div>
<h3>We offer our employees:</h3>
<ul>
@@ -54,9 +54,9 @@ layout: "fullBleed"
<li>Family atmosphere with company-organized events</li>
</ul>
<p>
<div>
Our successful corporate development enables us to continuously hire new workers. We are always looking for committed and motivated employees. Become a part of our team. Take a look at our open positions or apply speculatively.
</p>
</div>
</div>
</div>

View File

@@ -22,12 +22,12 @@ layout: "fullBleed"
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">
<div>
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">
</div>
<div>
<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> <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">

View File

@@ -25,12 +25,12 @@ layout: "fullBleed"
Infrastructure for the Energy of Tomorrow
</h3>
<div className="w-20 h-2 bg-primary mb-8"></div>
<p className="text-xl text-text-secondary leading-relaxed mb-6">
<div>
Since our foundation in 2015 in Guben, we have made it our mission to actively shape the expansion of critical infrastructure.
</p>
<p className="text-lg text-text-secondary leading-relaxed">
</div>
<div>
With over 50 dedicated professionals and a state-of-the-art machinery park, we master even the most demanding projects in cable civil engineering, directional drilling, and grid assembly. Reliability, adherence to schedules, and the highest quality standards are our foundation.
</p>
</div>
</div>
<div className="grid grid-cols-2 gap-6">
<div className="bg-white p-8 rounded-2xl shadow-sm border border-neutral-100">