update website

src/components/HeroSection.jsx

@@ -0,0 +1,108 @@
+import React from 'react';
+import { motion } from 'framer-motion';
+import { Button } from '@/components/ui/button';
+import { useNavigate } from 'react-router-dom';
+
+const HeroSection = ({
+  title,
+  subtitle,
+  description,
+  backgroundImage,
+  ctaText = "Get Started",
+  ctaLink = "/get-started",
+  showVideo = false,
+  videoEmbed = null
+}) => {
+  const navigate = useNavigate();
+  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 && 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 pan-effect"
+            style={{
+              backgroundImage: backgroundImage ? `url(${backgroundImage})` : 'none',
+              backgroundColor: '#000'
+            }}
+          >
+            <div className="absolute inset-0 bg-black/30"></div>
+          </div>
+        )}
+      </div>
+
+      {/* Content */}
+      <div className="relative z-10 max-w-6xl mx-auto px-6 text-center">
+        <motion.div
+          initial={{ opacity: 0, y: 30 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.8 }}
+        >
+          {subtitle && (
+            <motion.p 
+              className="text-blue-400 text-lg font-medium mb-4"
+              initial={{ opacity: 0 }}
+              animate={{ opacity: 1 }}
+              transition={{ delay: 0.2, duration: 0.6 }}
+            >
+              {subtitle}
+            </motion.p>
+          )}
+          
+          <motion.h1 
+            className="text-5xl md:text-7xl font-bold text-white mb-6 leading-tight"
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ delay: 0.4, duration: 0.8 }}
+          >
+            {title}
+          </motion.h1>
+          
+          {description && (
+            <motion.p 
+              className="text-xl md:text-2xl text-white/80 mb-8 max-w-4xl mx-auto leading-relaxed"
+              initial={{ opacity: 0, y: 20 }}
+              animate={{ opacity: 1, y: 0 }}
+              transition={{ delay: 0.6, duration: 0.8 }}
+            >
+              {description}
+            </motion.p>
+          )}
+          
+          <motion.div
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ delay: 0.8, duration: 0.8 }}
+          >
+            <Button 
+              size="lg" 
+              className="bg-blue-600 hover:bg-blue-700 text-white px-8 py-4 text-lg font-semibold rounded-lg transition-all duration-300 transform hover:scale-105"
+              onClick={() => navigate(ctaLink)}
+            >
+              {ctaText}
+            </Button>
+          </motion.div>
+        </motion.div>
+      </div>
+
+      {/* Animated particles/dots effect */}
+      <div className="absolute inset-0 z-5">
+        <div className="absolute top-1/4 left-1/4 w-2 h-2 bg-blue-400/30 rounded-full animate-pulse"></div>
+        <div className="absolute top-1/3 right-1/3 w-1 h-1 bg-purple-400/40 rounded-full animate-ping"></div>
+        <div className="absolute bottom-1/4 left-1/3 w-3 h-3 bg-cyan-400/20 rounded-full animate-bounce"></div>
+        <div className="absolute bottom-1/3 right-1/4 w-1 h-1 bg-blue-300/50 rounded-full animate-pulse"></div>
+      </div>
+    </section>
+  );
+};
+
+export default HeroSection;
+
+