Modern Landing Page Template

import { motion } from 'framer-motion';

export default function HeroSection() {
  return (
    <section className="relative py-20 overflow-hidden">
      <div className="container mx-auto px-4">
        <div className="flex flex-col md:flex-row items-center">
          <motion.div 
            initial={{ opacity: 0, x: -20 }}
            animate={{ opacity: 1, x: 0 }}
            transition={{ duration: 0.5 }}
            className="md:w-1/2 mb-10 md:mb-0"
          >
            <h1 className="text-4xl md:text-5xl font-bold mb-6">
              Build beautiful websites with our modern template
            </h1>
            <p className="text-xl mb-8 text-gray-300">
              Get started quickly with this responsive landing page template
              designed for modern web applications.
            </p>
            <div className="flex flex-col sm:flex-row gap-4">
              <button className="px-8 py-3 bg-gradient-to-r from-purple-600 to-blue-500 rounded-lg font-medium">
                Get Started
              </button>
              <button className="px-8 py-3 border border-gray-600 rounded-lg font-medium">
                Learn More
              </button>
            </div>
          </motion.div>
          <motion.div 
            initial={{ opacity: 0, x: 20 }}
            animate={{ opacity: 1, x: 0 }}
            transition={{ duration: 0.5, delay: 0.2 }}
            className="md:w-1/2"
          >
            <div className="relative">
              <div className="absolute -inset-0.5 bg-gradient-to-r from-purple-600 to-blue-500 rounded-2xl blur opacity-75"></div>
              <div className="relative bg-gray-900 rounded-2xl overflow-hidden border border-gray-800">
                <img 
                  src="/placeholder.svg" 
                  alt="Dashboard Preview" 
                  className="w-full h-auto"
                />
              </div>
            </div>
          </motion.div>
        </div>
      </div>
    </section>
  );
}