41 lines
1.1 KiB
TypeScript
41 lines
1.1 KiB
TypeScript
import React, { useEffect, useRef } from 'react';
|
|
|
|
interface HeroVideoExpandProps {
|
|
title: string;
|
|
description: string;
|
|
videoSrc: string;
|
|
onComplete: () => void;
|
|
}
|
|
|
|
export default function HeroVideoExpand({ title, description, videoSrc, onComplete }: HeroVideoExpandProps) {
|
|
const videoRef = useRef<HTMLVideoElement>(null);
|
|
|
|
useEffect(() => {
|
|
const video = videoRef.current;
|
|
if (video) {
|
|
video.onended = onComplete;
|
|
}
|
|
return () => {
|
|
if (video) video.onended = null;
|
|
};
|
|
}, [onComplete]);
|
|
|
|
return (
|
|
<div className="relative w-full h-screen overflow-hidden">
|
|
<video
|
|
ref={videoRef}
|
|
src={videoSrc}
|
|
className="absolute inset-0 w-full h-full object-cover"
|
|
autoPlay
|
|
muted
|
|
playsInline
|
|
/>
|
|
<div className="absolute inset-0 bg-black/50 z-10" />
|
|
<div className="relative z-20 flex flex-col items-center justify-center h-full text-white text-center p-8">
|
|
<h1 className="text-5xl md:text-7xl font-bold mb-6">{title}</h1>
|
|
<p className="text-xl md:text-2xl max-w-2xl">{description}</p>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|