<div className="relative w-full h-[400px] border-4 border-black dark:border-gray-600 shadow-neo overflow-hidden">
  <div className="absolute inset-0 bg-black/50 z-10"></div>
  <Image
    src="/hero-image.png"
    alt="Hero background"
    fill
    className="object-cover"
  />
  <div className="relative z-20 h-full flex flex-col items-center justify-center text-center p-8">
    <h1 className="text-3xl md:text-5xl font-bold mb-4 text-white">Discover Ritro UI</h1>
    <p className="text-lg md:text-xl mb-8 text-gray-200 max-w-2xl">
      The most flexible UI component library for building modern web applications
    </p>
    <button className="bg-neo-green hover:bg-neo-green/90 text-black font-bold py-3 px-8 border-2 border-black shadow-neo transition-all hover:translate-y-1 hover:translate-x-1 hover:shadow-none">
      Explore Components
    </button>
  </div>
</div>

<div className="w-full bg-white dark:bg-gray-800 border-4 border-black dark:border-gray-600 shadow-neo overflow-hidden">
  <div className="grid md:grid-cols-2 gap-0">
    <div className="p-8 md:p-12 flex flex-col justify-center">
      <h1 className="text-3xl md:text-4xl lg:text-5xl font-bold mb-4 text-black dark:text-white">
        Design with freedom
      </h1>
      <p className="text-lg mb-6 text-gray-700 dark:text-gray-300">
        Ritro UI gives you the building blocks to create unique interfaces without design constraints.
      </p>
      <div className="flex flex-wrap gap-4">
        <button className="bg-neo-blue hover:bg-neo-blue/90 text-black font-bold py-2 px-6 border-2 border-black shadow-neo transition-all hover:translate-y-1 hover:translate-x-1 hover:shadow-none">
          Get Started <ChevronRight className="inline ml-1 h-4 w-4" />
        </button>
      </div>
    </div>
    <div className="relative h-64 md:h-auto border-t-4 md:border-t-0 md:border-l-4 border-black dark:border-gray-600">
      <Image
        src="/split-hero-image.png"
        alt="Design system components"
        fill
        className="object-cover"
      />
    </div>
  </div>
</div>

<div className="w-full bg-neo-pink dark:bg-gray-800 p-8 md:p-12 border-4 border-black dark:border-gray-600 shadow-neo">
  <div className="max-w-4xl mx-auto text-center">
    <h1 className="text-3xl md:text-5xl font-bold mb-4 text-black dark:text-white">
      Stay updated with Ritro UI
    </h1>
    <p className="text-lg md:text-xl mb-8 text-black dark:text-gray-200 max-w-2xl mx-auto">
      Subscribe to our newsletter to receive updates, new component announcements, and design tips.
    </p>
    <div className="max-w-md mx-auto">
      <div className="flex flex-col sm:flex-row gap-2">
        <input
          type="email"
          placeholder="Enter your email"
          className="flex-grow px-4 py-3 border-2 border-black dark:border-gray-600 shadow-neo bg-white dark:bg-gray-700 text-black dark:text-white"
        />
        <button className="bg-neo-blue hover:bg-neo-blue/90 text-black font-bold py-3 px-6 border-2 border-black shadow-neo transition-all hover:translate-y-1 hover:translate-x-1 hover:shadow-none">
          Subscribe
        </button>
      </div>
      <p className="text-xs mt-2 text-black dark:text-gray-300">
        We respect your privacy. Unsubscribe at any time.
      </p>
    </div>
  </div>
</div>

<div className="relative w-full bg-gradient-to-br from-neo-blue via-neo-pink to-neo-yellow dark:from-purple-900 dark:via-pink-800 dark:to-amber-800 p-8 md:p-12 border-4 border-black dark:border-gray-600 shadow-neo overflow-hidden">
  {/* Animated circles */}
  <div className="absolute top-1/4 left-1/4 w-20 h-20 bg-neo-green/30 dark:bg-neo-green/20 rounded-full blur-xl animate-pulse"></div>
  <div className="absolute bottom-1/3 right-1/4 w-32 h-32 bg-neo-yellow/30 dark:bg-neo-yellow/20 rounded-full blur-xl animate-pulse delay-700"></div>
  <div className="absolute top-1/2 right-1/3 w-24 h-24 bg-neo-pink/30 dark:bg-neo-pink/20 rounded-full blur-xl animate-pulse delay-1000"></div>
  
  <div className="relative z-10 max-w-4xl mx-auto text-center">
    <h1 className="text-3xl md:text-5xl font-bold mb-4 text-white drop-shadow-md">
      Create Dynamic Experiences
    </h1>
    <p className="text-lg md:text-xl mb-8 text-white/90 max-w-2xl mx-auto">
      Build engaging interfaces with Ritro UI's flexible and customizable components.
    </p>
    <div className="inline-block relative overflow-hidden group">
      <div className="absolute inset-0 w-full h-full border-2 border-white bg-white/10 backdrop-blur-sm rounded-md transition-all duration-300 group-hover:backdrop-blur-lg"></div>
      <button className="relative z-10 bg-transparent text-white font-bold py-3 px-8 transition-all duration-300 group-hover:text-black group-hover:bg-white">
        Get Started
      </button>
    </div>
  </div>
</div>