...

src/components/HeroSection.jsx

@@ -2,30 +2,31 @@ import React from 'react';
 import { motion } from 'framer-motion';
 import { Button } from '@/components/ui/button';
 
-const HeroSection = ({ 
-  title, 
-  subtitle, 
-  description, 
-  backgroundImage, 
-  ctaText = "Get Started", 
+const HeroSection = ({
+  title,
+  subtitle,
+  description,
+  backgroundImage,
+  ctaText = "Get Started",
   ctaLink = "/get-started",
-  showVideo = false 
+  showVideo = false,
+  videoEmbed = null
 }) => {
   return (
     <section className="relative min-h-screen flex items-center justify-center overflow-hidden">
       {/* Background Image/Video */}
       <div className="absolute inset-0 z-0">
-        {showVideo ? (
-          <div className="w-full h-full bg-gradient-to-br from-blue-900/20 to-purple-900/20">
-            {/* Placeholder for video background */}
-            <div className="w-full h-full bg-black/50 flex items-center justify-center">
-              <span className="text-white/50 text-lg">Video Background Placeholder</span>
+        {showVideo && videoEmbed ? (
+          <div className="relative w-full h-full">
+            <div className="absolute inset-0">
+              {videoEmbed}
             </div>
+            <div className="absolute inset-0 bg-black/40"></div>
           </div>
         ) : (
-          <div 
-            className="w-full h-full bg-cover bg-center bg-no-repeat"
-            style={{ 
+          <div
+            className="w-full h-full bg-cover bg-center bg-no-repeat pan-effect"
+            style={{
               backgroundImage: backgroundImage ? `url(${backgroundImage})` : 'none',
               backgroundColor: '#000'
             }}