chore: optimize reference gallery, add typography plugin, fix SEO and map animations

components/blocks/ContactSection.tsx

@@ -36,8 +36,8 @@ export const ContactSection: React.FC<ContactSectionProps> = (props) => {
                 </div>
                 <div>
                   <h4 className="font-bold text-neutral-dark">Telefon</h4>
-                  <p className="text-primary hover:text-primary-dark font-medium transition-colors">
-                    <a href="tel:+4935616892550">+49 3561 6892 550</a>
+                  <p className="text-xl md:text-2xl font-bold font-heading text-neutral-dark hover:text-primary transition-colors">
+                    <a href="tel:+4935616857733">+49 (0) 3561 / 68577 33</a>
                   </p>
                 </div>
               </div>

components/blocks/InteractiveGermanyMap.tsx

@@ -4,77 +4,8 @@ import React, { useState } from 'react';
 import { motion, AnimatePresence } from 'framer-motion';
 import { MapPin, Factory, Zap, CheckCircle2 } from 'lucide-react';
 import Image from 'next/image';
-
-export interface Location {
-  id: string;
-  name: string;
-  type: 'hq' | 'branch' | 'project';
-  x: number;
-  y: number;
-  description: string;
-  details?: string[];
-}
-
-const defaultLocations: Location[] = [
-  {
-    id: 'guben',
-    name: 'Guben (Hauptsitz)',
-    type: 'hq',
-    x: 85,
-    y: 48,
-    description: 'E-TIB GmbH Holding & Bohrtechnik GmbH',
-    details: ['Zentrale Steuerung', 'Kabelleitungstiefbau', 'Maschinenpark'],
-  },
-  {
-    id: 'buelstedt',
-    name: 'Bülstedt (Ingenieurgesellschaft)',
-    type: 'branch',
-    x: 37,
-    y: 25,
-    description: 'E-TIB Ingenieurgesellschaft mbH',
-    details: ['Planung & Projektierung', 'Vermessung', 'Dokumentation'],
-  },
-  {
-    id: 'spreewald',
-    name: 'Spreewald (Projekt)',
-    type: 'project',
-    x: 82,
-    y: 45,
-    description: 'Breitbandausbau FTTC',
-  },
-  {
-    id: 'bomlitz',
-    name: 'Bomlitz (Projekt)',
-    type: 'project',
-    x: 45,
-    y: 30,
-    description: 'Breitbandausbau FTTH',
-  },
-  {
-    id: 'forst',
-    name: 'Forst (Projekt)',
-    type: 'project',
-    x: 88,
-    y: 50,
-    description: 'Neubau Kabeltrasse',
-  },
-  {
-    id: 'eisenhuettenstadt',
-    name: 'Eisenhüttenstadt (Projekt)',
-    type: 'project',
-    x: 85,
-    y: 40,
-    description: 'Kabelverbindung U30 - T10',
-  },
-  {
-    id: 'goerne',
-    name: 'Görne (Projekt)',
-    type: 'project',
-    x: 70,
-    y: 35,
-    description: 'Einspeisung PV-Anlage',
-  }
-];
+import { useRouter } from 'next/navigation';
+import { Location } from '@/lib/map-data';
 
 interface Stat {
   value: string;
@@ -88,6 +19,7 @@ interface InteractiveGermanyMapProps {
   description?: string;
   stats?: Stat[];
   locations?: Location[];
+  isHero?: boolean;
 }
 
 export function InteractiveGermanyMap({
@@ -98,22 +30,24 @@ export function InteractiveGermanyMap({
     { value: '100', suffix: '%', label: 'Überregionale Reichweite' },
     { value: '2', suffix: '+', label: 'Operative Standorte' },
   ],
-  locations = defaultLocations
+  locations = defaultLocations,
+  isHero = false
 }: InteractiveGermanyMapProps) {
   const [activeLocation, setActiveLocation] = useState<Location | null>(null);
+  const router = useRouter();
 
   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 (
-    <div className="relative w-full max-w-7xl mx-auto py-16 md:py-32 px-4 sm:px-6">
-      <div className="bg-[#050B14] rounded-[2.5rem] md:rounded-[3.5rem] overflow-hidden relative shadow-2xl border border-white/5">
+    <div className={isHero ? "relative w-full" : "relative w-full max-w-7xl mx-auto py-16 md:py-24 px-4 sm:px-6 mt-16 md:mt-20"}>
+      <div className={`bg-[#050B14] ${isHero ? 'pt-32 pb-16 md:pt-40 md:pb-24' : 'rounded-[2.5rem] md:rounded-[3.5rem] shadow-2xl border border-white/5'} overflow-visible relative`}>
         {/* Background Effects */}
-        <div className="absolute inset-0 bg-gradient-to-br from-[#050B14] via-[#0A1322] to-[#050B14]" />
-        <div className="absolute top-0 right-0 w-[800px] h-[800px] bg-primary/5 rounded-full blur-[120px] pointer-events-none translate-x-1/3 -translate-y-1/3" />
+        <div className={`absolute inset-0 bg-gradient-to-br from-[#050B14] via-[#0A1322] to-[#050B14] ${!isHero && 'rounded-[2.5rem] md:rounded-[3.5rem]'} overflow-hidden`} />
+        <div className="absolute top-0 right-0 w-[800px] h-[800px] bg-primary/5 rounded-full blur-[120px] pointer-events-none translate-x-1/3 -translate-y-1/3 overflow-hidden" />
         
-        <div className="relative z-10 grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-12 gap-12 items-center min-h-[600px] p-8 md:p-12 lg:p-16">
+        <div className={`relative z-10 grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-12 gap-12 items-center min-h-[600px] ${isHero ? 'max-w-7xl mx-auto px-4 sm:px-6' : 'p-8 md:p-12 lg:p-16'}`}>
           
           {/* Content Left */}
           <div className="xl:col-span-5 text-white z-20">
@@ -122,9 +56,15 @@ export function InteractiveGermanyMap({
               <span>{badge}</span>
             </div>
             
-            <h3 className="font-heading text-4xl lg:text-5xl xl:text-6xl font-extrabold mb-6 leading-[1.1] text-transparent bg-clip-text bg-gradient-to-r from-white to-white/70 break-words [hyphens:auto]">
-              {title}
-            </h3>
+            {isHero ? (
+              <h1 className="font-heading text-4xl lg:text-5xl xl:text-6xl font-extrabold mb-6 leading-[1.1] text-transparent bg-clip-text bg-gradient-to-r from-white to-white/70 break-words [hyphens:auto]">
+                {title}
+              </h1>
+            ) : (
+              <h3 className="font-heading text-4xl lg:text-5xl xl:text-6xl font-extrabold mb-6 leading-[1.1] text-transparent bg-clip-text bg-gradient-to-r from-white to-white/70 break-words [hyphens:auto]">
+                {title}
+              </h3>
+            )}
             
             <p className="text-white/60 text-lg mb-12 leading-relaxed">
               {description}
@@ -199,13 +139,32 @@ export function InteractiveGermanyMap({
                 const isBranch = loc.type === 'branch';
                 const isActive = activeLocation?.id === loc.id;
 
+                const isNearLeft = loc.x < 50;
+                const isNearRight = loc.x >= 50;
+                const isNearTop = loc.y < 55; // 55% threshold to strongly avoid the top header
+
+                const tooltipClasses = [
+                  'absolute w-[280px] sm:w-64 bg-white text-neutral-dark p-5 rounded-2xl shadow-2xl z-[9999] pointer-events-none border border-neutral-100',
+                  isNearLeft ? 'left-1/2 sm:left-0 -translate-x-1/2 sm:translate-x-0' : 'left-1/2 sm:left-auto sm:right-0 -translate-x-1/2 sm:translate-x-0',
+                  isNearTop ? 'top-full mt-4' : 'bottom-full mb-4'
+                ].join(' ');
+
+                const arrowClasses = [
+                  'absolute border-8 border-transparent drop-shadow-sm hidden sm:block',
+                  isNearLeft ? 'left-6' : 'right-6',
+                  isNearTop ? '-top-4 border-b-white border-t-0' : '-bottom-4 border-t-white border-b-0'
+                ].join(' ');
+
                 return (
                   <div
                     key={loc.id}
-                    className="absolute transform -translate-x-1/2 -translate-y-1/2 z-20 group cursor-pointer w-16 h-16 flex items-center justify-center"
+                    className={`absolute transform -translate-x-1/2 -translate-y-1/2 group cursor-pointer w-16 h-16 flex items-center justify-center ${isActive ? 'z-[60]' : 'z-20'}`}
                     style={{ left: `${loc.x}%`, top: `${loc.y}%` }}
                     onMouseEnter={() => setActiveLocation(loc)}
                     onMouseLeave={() => setActiveLocation(null)}
+                    onClick={() => {
+                      if (loc.href) router.push(loc.href);
+                    }}
                   >
                     {/* Ping Animation for HQ / Branch */}
                     {(isHQ || isBranch) && (
@@ -222,7 +181,7 @@ export function InteractiveGermanyMap({
                       } ${
                         isHQ || isBranch
                           ? 'w-6 h-6 bg-primary text-[#050B14]'
-                          : 'w-3 h-3 bg-white/90 ring-2 ring-primary'
+                          : 'w-4 h-4 bg-white ring-[3px] ring-primary'
                       }`}
                     >
                       {(isHQ || isBranch) && <MapPin className="w-3.5 h-3.5" />}
@@ -232,33 +191,92 @@ export function InteractiveGermanyMap({
                     <AnimatePresence>
                       {isActive && (
                         <motion.div
-                          initial={{ opacity: 0, y: 10, scale: 0.95 }}
-                          animate={{ opacity: 1, y: 0, scale: 1 }}
-                          exit={{ opacity: 0, y: 10, scale: 0.95 }}
-                          transition={{ duration: 0.15 }}
-                          className="absolute left-1/2 -translate-x-1/2 bottom-full mb-3 w-56 bg-white text-neutral-dark p-5 rounded-2xl shadow-2xl z-50 pointer-events-none border border-neutral-100"
+                          variants={{
+                            hidden: { opacity: 0, y: isNearTop ? -15 : 15, scale: 0.9 },
+                            visible: { 
+                              opacity: 1, y: 0, scale: 1,
+                              transition: { 
+                                type: "spring", stiffness: 350, damping: 25,
+                                staggerChildren: 0.05, delayChildren: 0.05
+                              }
+                            },
+                            exit: { 
+                              opacity: 0, y: isNearTop ? -10 : 10, scale: 0.95, 
+                              transition: { duration: 0.15, ease: "easeIn" } 
+                            }
+                          }}
+                          initial="hidden"
+                          animate="visible"
+                          exit="exit"
+                          className={`${tooltipClasses} overflow-hidden p-0`}
                         >
-                          <div className="flex items-center gap-2 mb-2">
-                            {isHQ ? <Factory className="w-4 h-4 text-primary" /> : <Zap className="w-4 h-4 text-primary" />}
-                            <span className="font-extrabold text-sm leading-tight text-neutral-dark">{loc.name}</span>
-                          </div>
-                          <p className="text-xs text-neutral-500 mt-2 font-medium">{loc.description}</p>
+                          {loc.featuredImage && (
+                            <motion.div 
+                              variants={{ hidden: { opacity: 0 }, visible: { opacity: 1 } }}
+                              className="relative w-full h-32 bg-neutral-100 overflow-hidden"
+                            >
+                              <Image
+                                src={loc.featuredImage}
+                                alt={loc.name}
+                                fill
+                                className="object-cover transform transition-transform duration-1000 ease-[cubic-bezier(0.16,1,0.3,1)] group-hover:scale-110"
+                              />
+                              <div className="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent opacity-80" />
+                              <div className="absolute bottom-3 left-4 flex items-center gap-2">
+                                {isHQ ? <Factory className="w-4 h-4 text-primary drop-shadow" /> : <Zap className="w-4 h-4 text-primary drop-shadow" />}
+                                <span className="font-extrabold text-sm leading-tight text-white drop-shadow-md">{loc.name}</span>
+                              </div>
+                            </motion.div>
+                          )}
+                          
+                          <div className={loc.featuredImage ? "p-5 pt-4" : "p-5"}>
+                            {!loc.featuredImage && (
+                              <motion.div 
+                                variants={{ hidden: { opacity: 0, x: -5 }, visible: { opacity: 1, x: 0 } }}
+                                className="flex items-center gap-2 mb-2"
+                              >
+                                {isHQ ? <Factory className="w-4 h-4 text-primary" /> : <Zap className="w-4 h-4 text-primary" />}
+                                <span className="font-extrabold text-sm leading-tight text-neutral-dark">{loc.name}</span>
+                              </motion.div>
+                            )}
+                            
+                            <motion.p 
+                              variants={{ hidden: { opacity: 0, y: 5 }, visible: { opacity: 1, y: 0 } }}
+                              className="text-xs text-neutral-500 font-medium"
+                            >
+                              {loc.description}
+                            </motion.p>
                           
                           {loc.details && (
                             <ul className="mt-4 space-y-2">
                               {loc.details.map((detail, i) => (
-                                <li key={i} className="text-[11px] text-neutral-dark flex items-center gap-2 font-semibold">
+                                <motion.li 
+                                  key={i} 
+                                  variants={{ hidden: { opacity: 0, x: -5 }, visible: { opacity: 1, x: 0 } }}
+                                  className="text-[11px] text-neutral-dark flex items-center gap-2 font-semibold"
+                                >
                                   <div className="w-4 h-4 rounded-full bg-primary/10 flex items-center justify-center shrink-0">
                                     <CheckCircle2 className="w-3 h-3 text-primary" />
                                   </div>
                                   {detail}
-                                </li>
+                                </motion.li>
                               ))}
                             </ul>
                           )}
                           
-                          {/* Arrow Down */}
-                          <div className="absolute left-1/2 -bottom-2 -translate-x-1/2 border-8 border-transparent border-t-white drop-shadow-sm" />
+                          {loc.href && (
+                            <motion.div 
+                              variants={{ hidden: { opacity: 0, y: 5 }, visible: { opacity: 1, y: 0 } }}
+                              className="mt-4 pt-3 border-t border-neutral-100 text-xs font-bold text-primary flex items-center gap-1 group/link"
+                            >
+                              Zum Projekt 
+                              <span className="text-base leading-none translate-y-[1px] transform transition-transform duration-300 group-hover:translate-x-1.5">&rarr;</span>
+                            </motion.div>
+                          )}
+                          </div>
+                          
+                          {/* Arrow Down/Up */}
+                          <div className={arrowClasses} />
                         </motion.div>
                       )}
                     </AnimatePresence>