feat(kompetenzen): abstract ServiceDetailGrid into premium framer-motion component
Former-commit-id: 9d289c977e4b30aaaf99b5ac9cdd2899395f36ca
This commit is contained in:
@@ -52,158 +52,82 @@ layout: "fullBleed"
|
||||
]}
|
||||
/>
|
||||
|
||||
<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">Qualität & Sicherheit</h2>
|
||||
<h3 className="font-heading text-3xl md:text-5xl font-extrabold text-neutral-dark mb-6">
|
||||
Keine Kompromisse am Bau
|
||||
</h3>
|
||||
<div className="w-20 h-2 bg-primary mx-auto mb-8"></div>
|
||||
<div>
|
||||
Auf vielen Baustellen werden zunehmend Billiganbieter eingesetzt. Sicherheitsstandards und Dokumentationsanforderungen werden oft missachtet. Daraus resultieren Unfälle, defekte Fremdleitungen und teure Bauverzögerungen.
|
||||
</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.
|
||||
</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">
|
||||
<div className="flex justify-between items-start mb-10">
|
||||
<div>
|
||||
<h4 className="text-2xl font-extrabold text-neutral-dark uppercase tracking-wider">Energie & Starkstrom</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> Kabel- und Rohrgräben</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> Kabelverlegung (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> Kabelmontagen (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> Errichtung von Transformatorstationen</li>
|
||||
<li className="flex items-start pt-4"><span className="text-primary mr-4 text-xs mt-1.5 opacity-80">■</span> Erdungsanlagen & Straßenbeleuchtung</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{/* 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">Glasfaser & TK</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> Herstellung von Leerrohrtrassen</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> Einziehen/Einblasen von LWL-Kabeln</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> Stellen von Multifunktionsgehäusen</li>
|
||||
<li className="flex items-start pt-4"><span className="text-primary mr-4 text-xs mt-1.5 opacity-80">■</span> LWL-Kabelmontagen</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{/* 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">Grabenlose Verlegung</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> Horizontalspülbohrverfahren (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. Bohrlänge: 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. Durchmesser: 400er Rohr</li>
|
||||
<li className="flex items-start pt-4"><span className="text-primary mr-4 text-xs mt-1.5 opacity-80">■</span> Erdrakete (bis 15m / 160er Rohr)</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{/* 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">Planung & Beratung</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> Struktur- & Ausführungsplanung</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> Ausschreibung & Bauüberwachung</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> Zustimmungsplanung</li>
|
||||
<li className="flex items-start pt-4"><span className="text-primary mr-4 text-xs mt-1.5 opacity-80">■</span> Machbarkeitsstudien & Projektprüfung</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{/* 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">Vermessung & Dokumentation</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> Absteckung und Einmessung von Leitungstrassen</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> Digitale Bestandsdokumentation (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° Foto-/Video-Erfassung des Baufeldes</li>
|
||||
<li className="flex items-start pt-4"><span className="text-primary mr-4 text-xs mt-1.5 opacity-80">■</span> Erstellung von Datenbanken zur Projektabrechnung</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<ServiceDetailGrid
|
||||
badge="Qualität & Sicherheit"
|
||||
title="Keine Kompromisse am Bau"
|
||||
descriptionParagraphs={[
|
||||
"Auf vielen Baustellen werden zunehmend Billiganbieter eingesetzt. Sicherheitsstandards und Dokumentationsanforderungen werden oft missachtet. Daraus resultieren Unfälle, defekte Fremdleitungen und teure Bauverzögerungen.",
|
||||
"**Wir arbeiten anders.** 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."
|
||||
]}
|
||||
panels={[
|
||||
{
|
||||
id: "energy",
|
||||
title: "Energie & Starkstrom",
|
||||
icon: "energy",
|
||||
lists: [
|
||||
[
|
||||
"Kabel- und Rohrgräben",
|
||||
"Kabelverlegung (0,4kV - 110kV)",
|
||||
"Kabelmontagen (0,4kV - 30kV)",
|
||||
"Errichtung von Transformatorstationen",
|
||||
"Erdungsanlagen & Straßenbeleuchtung"
|
||||
]
|
||||
]
|
||||
},
|
||||
{
|
||||
id: "fiber",
|
||||
title: "Glasfaser & TK",
|
||||
icon: "fiber",
|
||||
lists: [
|
||||
[
|
||||
"Herstellung von Leerrohrtrassen",
|
||||
"Einziehen/Einblasen von LWL-Kabeln",
|
||||
"Stellen von Multifunktionsgehäusen",
|
||||
"LWL-Kabelmontagen"
|
||||
]
|
||||
]
|
||||
},
|
||||
{
|
||||
id: "hdd",
|
||||
title: "Grabenlose Verlegung",
|
||||
icon: "hdd",
|
||||
lists: [
|
||||
[
|
||||
"Horizontalspülbohrverfahren (HDD)",
|
||||
"Max. Bohrlänge: 250m",
|
||||
"Max. Durchmesser: 400er Rohr",
|
||||
"Erdrakete (bis 15m / 160er Rohr)"
|
||||
]
|
||||
]
|
||||
},
|
||||
{
|
||||
id: "planning",
|
||||
title: "Planung & Beratung",
|
||||
icon: "planning",
|
||||
lists: [
|
||||
[
|
||||
"Struktur- & Ausführungsplanung",
|
||||
"Ausschreibung & Bauüberwachung",
|
||||
"Zustimmungsplanung",
|
||||
"Machbarkeitsstudien & Projektprüfung"
|
||||
]
|
||||
]
|
||||
},
|
||||
{
|
||||
id: "survey",
|
||||
title: "Vermessung & Dokumentation",
|
||||
icon: "survey",
|
||||
fullWidth: true,
|
||||
lists: [
|
||||
[
|
||||
"Absteckung und Einmessung von Leitungstrassen",
|
||||
"Digitale Bestandsdokumentation (GIS)"
|
||||
],
|
||||
[
|
||||
"360° Foto-/Video-Erfassung des Baufeldes",
|
||||
"Erstellung von Datenbanken zur Projektabrechnung"
|
||||
]
|
||||
]
|
||||
}
|
||||
]}
|
||||
/>
|
||||
|
||||
Reference in New Issue
Block a user