Update src/components/sections/hero/HeroExpand.tsx

src/components/sections/hero/HeroExpand.tsx

@@ -1,15 +1,33 @@
-import React, { useEffect } from 'react';
+import React from 'react';
 
 interface HeroExpandProps {
-  onComplete?: () => void;
+  tag?: string;
+  title: string;
+  description?: string;
+  videoSrc?: string;
+  primaryButton?: { text: string; href: string };
+  secondaryButton?: { text: string; href: string };
 }
 
-export default function HeroExpand({ onComplete }: HeroExpandProps) {
-  useEffect(() => {
-    if (onComplete) {
-      onComplete();
-    }
-  }, [onComplete]);
-
-  return <div>Hero Component</div>;
+export default function HeroExpand({ tag, title, description, videoSrc, primaryButton, secondaryButton }: HeroExpandProps) {
+  return (
+    <section className="py-20">
+      <div className="container mx-auto px-4">
+        {tag && <span className="text-primary font-bold">{tag}</span>}
+        <h1 className="text-4xl md:text-6xl font-bold mt-4">{title}</h1>
+        {description && <p className="text-lg mt-6 text-muted-foreground">{description}</p>}
+        {(primaryButton || secondaryButton) && (
+          <div className="flex gap-4 mt-8">
+            {primaryButton && <a href={primaryButton.href} className="bg-primary text-primary-foreground px-6 py-3 rounded-lg">{primaryButton.text}</a>}
+            {secondaryButton && <a href={secondaryButton.href} className="border px-6 py-3 rounded-lg">{secondaryButton.text}</a>}
+          </div>
+        )}
+        {videoSrc && (
+          <div className="mt-12">
+            <video src={videoSrc} className="w-full rounded-xl shadow-lg" controls />
+          </div>
+        )}
+      </div>
+    </section>
+  );
 }