import Image from 'next/image'
import React from 'react'

import banner from '../../public/images/banner.png'

export function Banner() {
  return (
    <section>
      <div className="container h-[400px] md:h-[700px] flex items-center justify-end bg-gray-900">
        <div className="relative right-0">
          <div className="absolute h-full w-[400px] bg-gradient-to-r from-gray-900 md:from-30% z-20" />
          <div className="absolute h-full w-[200px] md:w-[500px] bg-gradient-to-r from-green-700 md:from-10% z-10" />
          <h1 className="absolute z-20 font-thin text-lg md:text-4xl bottom-24 left-7 max-w-60 md:max-w-72 text-primary border-b-4 border-green-700 pb-4">
            Transforme sua vida através do conhecimento
          </h1>
          <Image
            src={banner}
            alt="Banner"
            height={700}
            className="h-full object-cover min-h-[400px] md:min-h-[700px]"
            unoptimized
          />
          <div className="absolute right-0 top-0 h-full w-[200px] md:w-[500px] bg-gradient-to-l from-green-700 md:from-10% z-10" />
          <div className="block absolute right-0 top-0 h-full w-[200px] md:w-[600px] bg-gradient-to-l from-gray-900 md:from-20% z-20" />
        </div>
      </div>
    </section>
  )
}
