diff --git a/app/[locale]/standorte/page.tsx b/app/[locale]/standorte/page.tsx index 9ef0a384c..dcc941d55 100644 --- a/app/[locale]/standorte/page.tsx +++ b/app/[locale]/standorte/page.tsx @@ -75,7 +75,7 @@ export default async function StandorteOverview(props: { params: Promise<{ local alt={standort.name} fill className="object-cover transition-transform duration-1000 ease-[cubic-bezier(0.16,1,0.3,1)] filter grayscale-[20%] group-hover:scale-105 group-hover:grayscale-0" - sizes="(max-width: 768px) 100vw, (max-width: 1024px) 50vw, 384px" + sizes="(max-width: 768px) 200px, 384px" />
diff --git a/components/blocks/InteractiveGermanyMap.tsx b/components/blocks/InteractiveGermanyMap.tsx index 15e1b840d..1d3e5615d 100644 --- a/components/blocks/InteractiveGermanyMap.tsx +++ b/components/blocks/InteractiveGermanyMap.tsx @@ -1,16 +1,20 @@ 'use client'; import React, { useState, useRef, useCallback, useMemo } from 'react'; -import { m, AnimatePresence } from 'framer-motion'; -import { MapPin, CheckCircle2, ArrowUpRight } from 'lucide-react'; +import { MapPin, ArrowUpRight } from 'lucide-react'; import Image from 'next/image'; import { usePathname } from 'next/navigation'; import Link from 'next/link'; +import dynamic from 'next/dynamic'; import { AnimatedGlossyBorder } from '@/components/ui/AnimatedGlossyBorder'; import { Location, projectLocations } from '@/lib/map-data'; import { standorteLocations } from '@/lib/standorte-data'; import { useLocale, useTranslations } from 'next-intl'; +const InteractiveMapPins = dynamic(() => import('./InteractiveMapPins'), { + ssr: false, +}); + interface Stat { value: string; suffix?: string; @@ -211,117 +215,14 @@ export function InteractiveGermanyMap({ {mapBackground} - {finalLocations.filter(l => l.type === 'minor_node').map((loc, idx) => ( -