components/Hero.js

const Hero = () => {
    return (
        <section className="relative overflow-hidden">
            <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20 md:py-28">
                <div className="relative z-10 text-center">
                    <h1 className="text-4xl md:text-6xl font-bold text-gray-900 dark:text-white mb-6">
                        Power Up Your <span className="text-indigo-500 dark:text-pink-500">Digital Presence</span>
                    </h1>
                    <p className="text-lg md:text-xl text-gray-600 dark:text-gray-300 max-w-3xl mx-auto mb-10">
                        PixelPulse Reactor delivers cutting-edge solutions to elevate your online experience with responsive design and modern tech.
                    </p>
                    <div className="flex flex-col sm:flex-row justify-center gap-4">
                        <a 
                            href="#" 
                            className="px-8 py-3 bg-indigo-500 hover:bg-indigo-600 dark:bg-pink-500 dark:hover:bg-pink-600 text-white font-medium rounded-lg shadow-lg transition-all transform hover:-translate-y-1"
                        >
                            Get Started
                        </a>
                        <a 
                            href="#" 
                            className="px-8 py-3 border-2 border-indigo-500 dark:border-pink-500 text-indigo-500 dark:text-pink-500 font-medium rounded-lg hover:bg-indigo-50 dark:hover:bg-gray-800 transition-colors"
                        >
                            Learn More
                        </a>
                    </div>
                </div>
                <div className="mt-16 relative">
                    <div className="absolute inset-0 flex items-center justify-center">
                        <div className="w-96 h-96 rounded-full bg-indigo-100 dark:bg-pink-900 opacity-20 blur-3xl animate-pulse-slow"></div>
                    </div>
                    <div className="relative z-10 max-w-4xl mx-auto">
                        <img 
                            src="http://static.photos/technology/1200x630/42" 
                            alt="Hero illustration" 
                            className="rounded-2xl shadow-xl border-8 border-white dark:border-gray-800 w-full object-cover"
                        />
                    </div>
                </div>
            </div>
        </section>
    );
}