import { Image } from '@rixl/videosdk-react';

export function HeroSection() {
  return (
    <div className="relative w-full h-[500px] rounded-lg">
        <Image
            id="Hq3GhYYwSX"
        />

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

<div className="relative w-full h-screen">
  <Image
    id="landing-hero"
    alt="Landing page 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"
      alt="Feature showcase"
      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"
    alt="Split hero background"
    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>