import FallbackImage from "../shared/FallbackImage";

export default function Banner() {
  return (
    <div className="  lg:py-12">
      <div className="relative  lg:h-[50vh] lg:py-4 py-10 bg-[#EEEEEE] border bg-[url('/singleProduct/banner-bg.png')] bg-no-repeat bg-contain bg-left rounded-3xl flex justify-center items-center">
        <FallbackImage src={"/singleProduct/banner-img.png"} alt="banner" width={220} height={300} className="absolute start-6 -top-6 hidden lg:block" />
        {/* content */}
        <div className="space-y-4">
          <h4 className="md:text-3xl text-lg font-semibold">عرض علي هواتف سامسونج</h4>
          <h4 className="md:text-6xl text-4xl font-extrabold">Galaxy S24 | S24 FE</h4>
          <p className=" lg:pt-6 md:text-lg ">عرض جديد من سامسونج لعملائنا بشكل حصري </p>
        </div>
      </div>
    </div>
  );
}