104 lines
3.7 KiB
TypeScript
104 lines
3.7 KiB
TypeScript
'use client';
|
|
|
|
import Link from 'next/link';
|
|
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;
|
|
};
|
|
}
|
|
|
|
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';
|
|
|
|
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 secondaryCtaLabel = data?.secondaryCtaLabel || 'Projekt anfragen';
|
|
const 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>
|
|
|
|
{/* Video element */}
|
|
{videoUrl && (
|
|
<video
|
|
className="absolute inset-0 w-full h-full object-cover opacity-50 z-1 pointer-events-none"
|
|
src={videoUrl}
|
|
poster={posterSrc}
|
|
autoPlay
|
|
muted
|
|
loop
|
|
playsInline
|
|
preload="auto"
|
|
/>
|
|
)}
|
|
|
|
<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]" />
|
|
|
|
<div className="container relative z-[4] text-center px-4">
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 40 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 1.2, ease: [0.16, 1, 0.3, 1] }}
|
|
>
|
|
<h1
|
|
className="font-heading font-bold text-4xl md:text-6xl lg:text-8xl text-white mb-6 uppercase tracking-tight drop-shadow-lg"
|
|
dangerouslySetInnerHTML={{ __html: title.replace('KABELTIEFBAU', '<span class="text-primary-light">KABELTIEFBAU</span>').replace(/\n/g, '<br />') }}
|
|
/>
|
|
|
|
<p className="text-lg md:text-xl lg:text-2xl text-white/90 max-w-3xl mx-auto mb-12 drop-shadow">
|
|
{subtitle}
|
|
</p>
|
|
|
|
<div className="flex flex-col sm:flex-row items-center justify-center gap-6">
|
|
<Link
|
|
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"
|
|
>
|
|
<span className="relative z-10">{ctaLabel}</span>
|
|
</Link>
|
|
|
|
<Link
|
|
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"
|
|
>
|
|
{secondaryCtaLabel}
|
|
</Link>
|
|
</div>
|
|
</motion.div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|