From 220e03bed4ce07cdb896d49d0768f304944b09b6 Mon Sep 17 00:00:00 2001 From: Marc Mintel Date: Wed, 13 May 2026 11:44:53 +0200 Subject: [PATCH] feat(ui): redesign germany map to modern dark split layout --- app/[locale]/[slug]/page.tsx | 2 + components/blocks/InteractiveGermanyMap.tsx | 252 ++++++++++++++++++++ content/de/ueber-uns.mdx | 2 + public/germany-map.svg | 193 +++++++++++++++ 4 files changed, 449 insertions(+) create mode 100644 components/blocks/InteractiveGermanyMap.tsx create mode 100644 public/germany-map.svg diff --git a/app/[locale]/[slug]/page.tsx b/app/[locale]/[slug]/page.tsx index f44092753..cb5fb609e 100644 --- a/app/[locale]/[slug]/page.tsx +++ b/app/[locale]/[slug]/page.tsx @@ -19,6 +19,7 @@ import { JobListingBlock } from '@/components/blocks/JobListingBlock'; import { CallToAction } from '@/components/blocks/CallToAction'; import { ServiceDetailGrid } from '@/components/blocks/ServiceDetailGrid'; import { BenefitGrid } from '@/components/blocks/BenefitGrid'; +import { InteractiveGermanyMap } from '@/components/blocks/InteractiveGermanyMap'; import { Button } from '@/components/ui/Button'; @@ -32,6 +33,7 @@ const mdxComponents = { CallToAction, ServiceDetailGrid, BenefitGrid, + InteractiveGermanyMap, Button, Heading, }; diff --git a/components/blocks/InteractiveGermanyMap.tsx b/components/blocks/InteractiveGermanyMap.tsx new file mode 100644 index 000000000..e8163f15b --- /dev/null +++ b/components/blocks/InteractiveGermanyMap.tsx @@ -0,0 +1,252 @@ +'use client'; + +import React, { useState } from 'react'; +import { motion, AnimatePresence } from 'framer-motion'; +import { MapPin, CheckCircle2, Factory, Zap } from 'lucide-react'; +import Image from 'next/image'; + +interface Location { + id: string; + name: string; + type: 'hq' | 'branch' | 'project'; + x: number; // percentage from left + y: number; // percentage from top + description?: string; + details?: string[]; +} + +const locations: Location[] = [ + { + id: 'guben', + name: 'Guben (Hauptsitz)', + type: 'hq', + x: 85, // approx East (adjusted to be inside map) + y: 48, // approx Middle + description: 'E-TIB GmbH Holding & Bohrtechnik GmbH', + details: ['Zentrale Steuerung', 'Kabelleitungstiefbau', 'Maschinenpark'], + }, + { + id: 'buelstedt', + name: 'Bülstedt (Ingenieurgesellschaft)', + type: 'branch', + x: 37, // approx North-West + y: 25, // approx North + description: 'E-TIB Ingenieurgesellschaft mbH', + details: ['Planung & Projektierung', 'Vermessung', 'Dokumentation'], + }, + // Dummy Projects + { + id: 'project-1', + name: '110kV Trasse München', + type: 'project', + x: 58, + y: 85, + description: 'Horizontalspülbohrung & Netzanbindung', + }, + { + id: 'project-2', + name: 'Solarpark Hamburg', + type: 'project', + x: 45, + y: 18, + description: 'Komplexe Querung unter Gewässer', + }, + { + id: 'project-3', + name: 'Windpark NRW', + type: 'project', + x: 20, + y: 50, + description: 'Kabelpflugarbeiten & LWL', + }, + { + id: 'project-4', + name: 'Trassenausbau Leipzig', + type: 'project', + x: 65, + y: 55, + description: 'Infrastrukturausbau', + } +]; + +export function InteractiveGermanyMap() { + const [activeLocation, setActiveLocation] = useState(null); + + const hq = locations.find((l) => l.type === 'hq'); + const branch = locations.find((l) => l.type === 'branch'); + const projects = locations.filter((l) => l.type === 'project'); + + return ( +
+
+ {/* Background Effects */} +
+
+ +
+ + {/* Content Left */} +
+
+ + Einsatzgebiete +
+ +

+ Deutschlandweit
für Sie im Einsatz. +

+ +

+ Von unseren strategischen Standorten in Guben und Bülstedt steuern und realisieren wir komplexe Infrastrukturprojekte im gesamten Bundesgebiet. +

+ + {/* Industrial Stats Grid */} +
+
+
+
+
+ 100% +
+
Überregionale Reichweite
+
+
+
+
+
+
+ 2+ +
+
Operative Standorte
+
+
+
+
+ + {/* Map Right */} +
+ {/* Map Container - Enforce strict aspect ratio matching the SVG (1024x1024) */} +
+ {/* Map SVG */} +
+ Deutschlandkarte +
+ + {/* Connections (Lines) */} + + {hq && branch && ( + + )} + {hq && projects.map((proj, idx) => ( + + ))} + + + {/* Location Pins */} + {locations.map((loc, idx) => { + const isHQ = loc.type === 'hq'; + const isBranch = loc.type === 'branch'; + const isActive = activeLocation?.id === loc.id; + + return ( +
setActiveLocation(loc)} + onMouseLeave={() => setActiveLocation(null)} + > + {/* Ping Animation for HQ / Branch */} + {(isHQ || isBranch) && ( +
+ )} + + {/* Marker Dot */} + + {(isHQ || isBranch) && } + + + {/* Tooltip */} + + {isActive && ( + +
+ {isHQ ? : } + {loc.name} +
+

{loc.description}

+ + {loc.details && ( +
    + {loc.details.map((detail, i) => ( +
  • +
    + +
    + {detail} +
    • + ))} +
+ )} + + {/* Arrow Down */} +
+ + )} + +
+ ); + })} +
+
+ +
+
+
+ ); +} diff --git a/content/de/ueber-uns.mdx b/content/de/ueber-uns.mdx index 923020824..85f0138b4 100644 --- a/content/de/ueber-uns.mdx +++ b/content/de/ueber-uns.mdx @@ -56,6 +56,8 @@ layout: "fullBleed" + +
+ + + +Created by potrace 1.10, written by Peter Selinger 2001-2011 + + + + + + + + + + + +