components/Hero.js

export default function Hero() {
  return (
    <section className="text-center py-16 md:py-24">
      <h1 className="text-4xl md:text-6xl font-extrabold text-gray-900 dark:text-white mb-6 tracking-tight">
        Build Amazing Web Apps
        <span className="block text-primary-500 mt-2">With Next.js & Tailwind</span>
      </h1>
      <p className="text-lg md:text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto mb-8">
        A powerful, responsive starter template to kickstart your next project. 
        Featuring modern design patterns and optimized performance.
      </p>
      <div className="flex justify-center gap-4">
        <button className="bg-primary-600 hover:bg-primary-700 text-white font-semibold py-3 px-8 rounded-full shadow-lg transition-transform transform hover:-translate-y-1">
          Get Started
        </button>
        <button className="bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 font-semibold py-3 px-8 rounded-full shadow-md border border-gray-200 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors">
          Learn More
        </button>
      </div>
    </section>
  );
}