import { motion } from 'framer-motion';
import Image from 'next/image';

const HeroSection = () => {
  return (
    <section className="relative bg-gradient-to-r 
      from-indigo-900 to-purple-900 overflow-hidden">
      <div className="container mx-auto px-6 py-20">
        <div className="flex flex-col lg:flex-row 
          items-center gap-12">
          <motion.div
            initial={{ opacity: 0, y: 30 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.8 }}
            className="lg:w-1/2 text-white"
          >
            <h1 className="text-5xl font-bold mb-6">
              Modern Web Deneyimleri
            </h1>
            <p className="text-xl text-indigo-100 mb-8">
              İşletmeniz için kullanıcı odaklı
              web tasarım çözümleri
            </p>
            <button className="bg-gradient-to-r 
              from-indigo-500 to-purple-500 
              px-6 py-3 rounded-lg">
              Hemen Başlayın
            </button>
          </motion.div>
        </div>
      </div>
    </section>
  );
};

export default HeroSection;