feat(ui): finalize E-TIB modernization with footer redesign, video optimization, and TS fixes

Former-commit-id: 67ac02c8404cc66893fdf97308574701cca6000c

components/blocks/HeroVideo.tsx

@@ -1,58 +1,50 @@
 'use client';
 
-import Link from 'next/link';
+import { Button } from '@/components/ui/Button';
 import Image from 'next/image';
 import { motion, AnimatePresence } from 'framer-motion';
 import { useState, useEffect } from 'react';
 
 interface HeroVideoProps {
-  data?: {
-    title?: string;
-    subtitle?: string;
-    videoUrl?: string;
-    posterImage?: {
-      url?: string;
-      alt?: string;
-    } | any;
-    ctaLabel?: string;
-    ctaHref?: string;
-    secondaryCtaLabel?: string;
-    secondaryCtaHref?: string;
-  };
+  data?: any;
+  title?: string;
+  subtitle?: string;
+  description?: string;
+  videoUrl?: string;
+  posterImage?: any;
+  ctaLabel?: string;
+  ctaHref?: string;
+  linkText?: string;
+  linkHref?: string;
+  secondaryCtaLabel?: string;
+  secondaryCtaHref?: string;
+  badge?: string;
 }
 
-export function HeroVideo({ data }: HeroVideoProps) {
-  const title = data?.title || 'DIE EXPERTEN FÜR KABELTIEFBAU';
-  const subtitle = data?.subtitle || 'Wir verbinden Infrastruktur mit Präzision. Von Horizontalbohrungen bis zu komplexen Leitungsnetzen.';
-  const videoUrl = data?.videoUrl || '/assets/dummy-hero.mp4';
+export function HeroVideo(props: HeroVideoProps) {
+  const { data } = props;
+  const title = props.title || data?.title || 'DIE EXPERTEN FÜR KABELTIEFBAU';
+  const subtitle = props.subtitle || props.description || data?.subtitle || 'Wir verbinden Infrastruktur mit Präzision. Von Horizontalbohrungen bis zu komplexen Leitungsnetzen.';
+  const videoUrl = props.videoUrl || data?.videoUrl || '/assets/dummy-hero.mp4';
+
   
   const posterSrc = data?.posterImage?.url || "/assets/photos/DJI_0048.JPG";
   const posterAlt = data?.posterImage?.alt || "E-TIB Gruppe Baustelle";
 
-  const ctaLabel = data?.ctaLabel || 'Unternehmen entdecken';
-  const ctaHref = data?.ctaHref || '#unternehmen';
+  const ctaLabel = props.ctaLabel || props.linkText || data?.ctaLabel || 'Unternehmen entdecken';
+  const ctaHref = props.ctaHref || props.linkHref || data?.ctaHref || '#unternehmen';
   
-  const secondaryCtaLabel = data?.secondaryCtaLabel || 'Projekt anfragen';
-  const secondaryCtaHref = data?.secondaryCtaHref || '/kontakt';
+  const secondaryCtaLabel = props.secondaryCtaLabel || data?.secondaryCtaLabel || 'Projekt anfragen';
+  const secondaryCtaHref = props.secondaryCtaHref || data?.secondaryCtaHref || '/kontakt';
 
   return (
     <div className="relative w-full h-[100svh] flex items-center justify-center overflow-hidden bg-neutral-dark">
-      {/* High-quality background image (Immediate visible content) */}
-      <div className="absolute inset-0 z-0 overflow-hidden">
-        <Image
-          src={posterSrc}
-          alt={posterAlt}
-          fill
-          priority
-          className="object-cover opacity-40 grayscale contrast-125"
-          sizes="100vw"
-        />
-      </div>
+      {/* Background color while video loads */}
+      <div className="absolute inset-0 z-0 bg-neutral-dark" />
       
-      {/* Video element */}
       {videoUrl && (
         <video
-          className="absolute inset-0 w-full h-full object-cover opacity-50 z-1 pointer-events-none"
+          className="absolute inset-0 w-full h-full object-cover z-1 pointer-events-none filter contrast-125 saturate-110 brightness-90"
           src={videoUrl}
           poster={posterSrc}
           autoPlay
@@ -63,8 +55,12 @@ export function HeroVideo({ data }: HeroVideoProps) {
         />
       )}
       
-      <div className="absolute inset-0 bg-primary-dark/30 z-[2] mix-blend-multiply" />
-      <div className="absolute inset-0 bg-gradient-to-b from-black/60 via-transparent to-black/60 z-[3]" />
+      {/* Cinematic Color Grading Overlay */}
+      <div className="absolute inset-0 bg-[#0a192f]/30 z-[2] mix-blend-multiply" />
+      
+      {/* Dramatic Vignette & Fade to content */}
+      <div className="absolute inset-0 bg-[radial-gradient(ellipse_at_center,_var(--tw-gradient-stops))] from-transparent via-black/20 to-black/80 z-[2]" />
+      <div className="absolute inset-0 bg-gradient-to-t from-neutral-dark via-neutral-dark/60 to-transparent z-[3]" />
       
       <div className="container relative z-[4] text-center px-4">
         <motion.div
@@ -82,19 +78,22 @@ export function HeroVideo({ data }: HeroVideoProps) {
           </p>
           
           <div className="flex flex-col sm:flex-row items-center justify-center gap-6">
-            <Link 
+            <Button 
               href={ctaHref} 
-              className="group relative inline-flex items-center justify-center px-8 py-4 text-lg font-bold text-white bg-primary rounded-none shadow-lg transition-transform hover:-translate-y-1"
+              variant="primary"
+              size="lg"
             >
-              <span className="relative z-10">{ctaLabel}</span>
-            </Link>
+              {ctaLabel}
+            </Button>
             
-            <Link 
+            <Button 
               href={secondaryCtaHref} 
-              className="px-8 py-4 text-lg font-bold text-white border-2 border-white/60 hover:bg-white hover:text-primary rounded-none transition-colors"
+              variant="outline"
+              size="lg"
+              className="border-white/60 text-white hover:text-primary hover:bg-white"
             >
               {secondaryCtaLabel}
-            </Link>
+            </Button>
           </div>
         </motion.div>
       </div>