109 lines
3.6 KiB
JavaScript
109 lines
3.6 KiB
JavaScript
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-green-300 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;
|
|
|
|
|