src/components/sections/hero/HeroVideoExpand.tsx

@@ -1,43 +1,17 @@
-import { useState, 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) return;
-
-    const handleEnded = () => {
-      if (onComplete) onComplete();
-    };
-
-    video.addEventListener('ended', handleEnded);
-    return () => {
-      video.removeEventListener('ended', handleEnded);
-    };
-  }, [onComplete]);
+import { useState } from 'react';
 
+export default function HeroVideoExpand({ title, description, videoSrc, imageSrc }: { title: string; description: string; videoSrc?: string; imageSrc?: string }) {
   return (
-    <section 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/40 flex flex-col items-center justify-center text-white p-6 text-center">
-        <h1 className="text-5xl font-bold mb-4">{title}</h1>
-        <p className="text-xl max-w-2xl">{description}</p>
+    <div className="relative w-full h-screen flex items-center justify-center overflow-hidden">
+      {videoSrc ? (
+        <video className="absolute inset-0 w-full h-full object-cover" src={videoSrc} autoPlay loop muted playsInline />
+      ) : (
+        <img className="absolute inset-0 w-full h-full object-cover" src={imageSrc} alt={title} />
+      )}
+      <div className="relative z-10 text-center p-8 bg-black/40 backdrop-blur-sm rounded-xl max-w-2xl">
+        <h1 className="text-5xl font-bold text-white mb-4">{title}</h1>
+        <p className="text-lg text-white">{description}</p>
       </div>
-    </section>
+    </div>
   );
-}
+}