From c2ce09c10670ac3696c96ffcb5fb6a7c0814781a Mon Sep 17 00:00:00 2001 From: Marc Mintel Date: Mon, 22 Jun 2026 22:40:49 +0200 Subject: [PATCH] fix(ui): use video posters for hero and adjust reference list padding --- app/[locale]/referenzen/page.tsx | 6 +++--- components/blocks/HeroVideo.tsx | 7 ++++++- components/blocks/InteractiveGermanyMap.tsx | 2 +- components/blocks/ReferencesSlider.tsx | 2 +- components/layout/MobileBottomNav.tsx | 4 ++-- .../videos/web/hero-bahnkreuzung-poster.jpg | Bin 0 -> 5622 bytes .../assets/videos/web/hero-bohrung-poster.jpg | Bin 0 -> 155412 bytes .../videos/web/hero-kabelpflug-poster.jpg | Bin 0 -> 5622 bytes public/assets/videos/web/hero-messe-poster.jpg | Bin 0 -> 5622 bytes 9 files changed, 13 insertions(+), 8 deletions(-) create mode 100644 public/assets/videos/web/hero-bahnkreuzung-poster.jpg create mode 100644 public/assets/videos/web/hero-bohrung-poster.jpg create mode 100644 public/assets/videos/web/hero-kabelpflug-poster.jpg create mode 100644 public/assets/videos/web/hero-messe-poster.jpg diff --git a/app/[locale]/referenzen/page.tsx b/app/[locale]/referenzen/page.tsx index cf98872a1..569b5f049 100644 --- a/app/[locale]/referenzen/page.tsx +++ b/app/[locale]/referenzen/page.tsx @@ -28,9 +28,9 @@ const CustomLi = ({ children, ...props }: any) => { else if (lowerText.includes('vlf') || lowerText.includes('otdr')) Icon = Zap; return ( -
  • - - {children} +
  • + + {children}
    • ); }; diff --git a/components/blocks/HeroVideo.tsx b/components/blocks/HeroVideo.tsx index e6ce42e27..9a9192c00 100644 --- a/components/blocks/HeroVideo.tsx +++ b/components/blocks/HeroVideo.tsx @@ -30,7 +30,12 @@ export function HeroVideo(props: HeroVideoProps) { const videoUrl = explicitNoVideo ? null : (props.videoUrl || data?.videoUrl || '/assets/dummy-hero.mp4'); const pathname = usePathname(); - const posterSrc = props.backgroundImage?.url || props.posterImage?.url || data?.posterImage?.url || "/assets/photos/DJI_0048.JPG"; + let defaultPoster = "/assets/photos/DJI_0048.JPG"; + if (videoUrl && videoUrl.endsWith('.mp4')) { + defaultPoster = videoUrl.replace('.mp4', '-poster.jpg'); + } + + const posterSrc = props.backgroundImage?.url || props.posterImage?.url || data?.posterImage?.url || defaultPoster; const posterAlt = props.backgroundImage?.alt || data?.posterImage?.alt || "E-TIB Gruppe Baustelle"; const ctaLabel = props.ctaLabel || props.linkText || data?.ctaLabel || 'Unternehmen entdecken'; diff --git a/components/blocks/InteractiveGermanyMap.tsx b/components/blocks/InteractiveGermanyMap.tsx index ef039ba11..89e734550 100644 --- a/components/blocks/InteractiveGermanyMap.tsx +++ b/components/blocks/InteractiveGermanyMap.tsx @@ -239,7 +239,7 @@ export function InteractiveGermanyMap({ animate={{ opacity: 1, y: 0, scale: 1 }} exit={{ opacity: 0, y: 10, scale: 0.95 }} transition={{ duration: 0.2 }} - className="absolute z-[9999] pointer-events-auto bottom-[-60px] left-1/2 -translate-x-1/2 w-[calc(100vw-2rem)] max-w-[320px] md:w-max md:bottom-auto md:left-[var(--md-left)] md:top-[var(--md-top)] md:[transform:var(--md-transform)]" + className="absolute z-[9999] pointer-events-auto bottom-[-60px] left-1/2 -translate-x-1/2 w-[calc(100vw_-_2rem)] max-w-[320px] md:w-max md:bottom-auto md:left-[var(--md-left)] md:top-[var(--md-top)] md:[transform:var(--md-transform)]" style={{ '--md-left': `${activeLocation.x}%`, '--md-top': `${activeLocation.y}%`, diff --git a/components/blocks/ReferencesSlider.tsx b/components/blocks/ReferencesSlider.tsx index c394272d9..637f0db78 100644 --- a/components/blocks/ReferencesSlider.tsx +++ b/components/blocks/ReferencesSlider.tsx @@ -115,7 +115,7 @@ export function ReferencesSlider(props: ReferencesSliderProps) { onMouseLeave={onMouseLeave} onMouseUp={onMouseUp} onMouseMove={onMouseMove} - className={`select-none flex gap-6 overflow-x-auto pb-8 pt-4 px-6 md:px-[max(2rem,calc((100vw-1280px)/2))] lg:px-[max(2.5rem,calc((100vw-1280px)/2))] [scrollbar-width:none] [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden ${isDragging ? 'cursor-grabbing snap-none' : 'cursor-grab snap-x snap-mandatory'}`} + className={`select-none flex gap-6 overflow-x-auto pb-8 pt-4 px-6 md:px-[max(2rem,calc((100vw_-_1280px)_/_2))] lg:px-[max(2.5rem,calc((100vw_-_1280px)_/_2))] [scrollbar-width:none] [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden ${isDragging ? 'cursor-grabbing snap-none' : 'cursor-grab snap-x snap-mandatory'}`} > {references.map((ref, i) => { const imgSrc = ref.image diff --git a/components/layout/MobileBottomNav.tsx b/components/layout/MobileBottomNav.tsx index 4e92bd557..191e2f74e 100644 --- a/components/layout/MobileBottomNav.tsx +++ b/components/layout/MobileBottomNav.tsx @@ -94,7 +94,7 @@ export function MobileBottomNav({ navLinks, currentLocale }: MobileBottomNavProp return ( <> -
    +