import {Image} from "@rixl/media-react";

export function HeroSection() {
  return (
    <div className="relative w-full h-[500px] rounded-lg overflow-hidden">
      <Image id="your-hero-image-id" className="w-full h-full object-cover" />

      <div className="absolute w-full inset-0 flex items-center justify-center bg-black/30">
        <h1 className="text-white text-5xl font-bold">Welcome</h1>
      </div>
    </div>
  );
}

<div className="relative w-full h-screen">
  <Image id="landing-hero" className="w-full h-full object-cover" />
  <div className="absolute inset-0 bg-gradient-to-b from-black/60 to-black/20">
    <div className="container mx-auto h-full flex flex-col justify-center px-6">
      <h1 className="text-white text-6xl font-bold mb-4">Your Title Here</h1>
      <p className="text-white/90 text-xl mb-8">Your subtitle here</p>
      <button className="bg-white text-black px-8 py-3 rounded-lg w-fit">Get Started</button>
    </div>
  </div>
</div>

<section className="grid md:grid-cols-2 gap-0">
  <div className="relative h-[400px]">
    <Image id="feature-image" className="w-full h-full object-cover" />
  </div>
  <div className="flex items-center p-12 bg-gray-50">
    <div>
      <h2 className="text-3xl font-bold mb-4">Amazing Feature</h2>
      <p className="text-gray-600">Description of your feature</p>
    </div>
  </div>
</section>

<div className="relative w-full h-[600px]">
  <Image id="split-hero" className="w-full h-full object-cover" />
  <div className="absolute inset-0 grid md:grid-cols-2">
    <div className="bg-black/70 flex items-center justify-center p-12">
      <div className="text-center text-white">
        <h1 className="text-5xl font-bold mb-4">Welcome Back</h1>
        <p className="text-xl mb-8">Continue your journey</p>
        <button className="bg-white text-black px-8 py-3 rounded-lg">Sign In</button>
      </div>
    </div>
    <div className="bg-transparent"></div>
  </div>
</div>