components/sections/hero.tsx

import { siteConfig } from '@/lib/site'

export function Hero() {
  return (
    <section className="relative py-24 px-4">
      <div className="max-w-7xl mx-auto text-center">
        <h1 className="text-5xl md:text-6xl font-bold mb-6">
          {siteConfig.name}
        </h1>
        <p className="text-2xl md:text-3xl text-gray-600 dark:text-gray-400 mb-8">
          {siteConfig.tagline}
        </p>
        <p className="text-lg text-gray-500 dark:text-gray-500 max-w-2xl mx-auto mb-12">
          {siteConfig.description}
        </p>
        <div className="flex gap-4 justify-center">
          <button
            className="px-8 py-3 rounded-lg font-medium text-white"
            style={{ backgroundColor: siteConfig.primaryColor }}
          >
            Get Started
          </button>
          <button
            className="px-8 py-3 rounded-lg font-medium border-2"
            style={{ borderColor: siteConfig.secondaryColor, color: siteConfig.secondaryColor }}
          >
            Learn More
          </button>
        </div>
      </div>
    </section>
  )
}