114 lines
4.5 KiB
TypeScript
114 lines
4.5 KiB
TypeScript
'use client';
|
|
|
|
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?: 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(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 = props.ctaLabel || props.linkText || data?.ctaLabel || 'Unternehmen entdecken';
|
|
const ctaHref = props.ctaHref || props.linkHref || data?.ctaHref || '#unternehmen';
|
|
|
|
let currentLocale = 'de';
|
|
try {
|
|
// We can't unconditionally call hooks if they might fail outside context, but HeroVideo is usually in context.
|
|
// However, to be safe and avoid adding new imports, we can use window.location or default to 'de' if not available.
|
|
if (typeof window !== 'undefined') {
|
|
currentLocale = window.location.pathname.startsWith('/en') ? 'en' : 'de';
|
|
}
|
|
} catch (e) {}
|
|
|
|
const secondaryCtaLabel = props.secondaryCtaLabel || data?.secondaryCtaLabel || (currentLocale === 'de' ? 'Projekt anfragen' : 'Inquire Project');
|
|
const secondaryCtaHref = props.secondaryCtaHref || data?.secondaryCtaHref || `/${currentLocale}/${currentLocale === 'de' ? 'contact' : 'contact'}`;
|
|
|
|
return (
|
|
<div className="relative w-full h-[100svh] flex items-center justify-center overflow-hidden bg-neutral-dark">
|
|
{/* Background color while video loads */}
|
|
<div className="absolute inset-0 z-0 bg-neutral-dark" />
|
|
|
|
{videoUrl && (
|
|
<video
|
|
className="absolute inset-0 w-full h-full object-cover z-1 pointer-events-none filter contrast-125 saturate-110 brightness-90"
|
|
src={videoUrl}
|
|
autoPlay
|
|
muted
|
|
loop
|
|
playsInline
|
|
preload="auto"
|
|
/>
|
|
)}
|
|
|
|
{/* 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]" />
|
|
|
|
{/* Top Fade for Header Navigation Readability */}
|
|
<div className="absolute top-0 left-0 w-full h-48 bg-gradient-to-b from-black/70 to-transparent z-[3] pointer-events-none" />
|
|
|
|
<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|\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">
|
|
<Button
|
|
href={ctaHref}
|
|
variant="primary"
|
|
size="lg"
|
|
>
|
|
{ctaLabel}
|
|
</Button>
|
|
|
|
<Button
|
|
href={secondaryCtaHref}
|
|
variant="outline"
|
|
size="lg"
|
|
className="border-white/60 text-white hover:text-primary hover:bg-white"
|
|
>
|
|
{secondaryCtaLabel}
|
|
</Button>
|
|
</div>
|
|
</motion.div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|