export function BrandLogoIncentiveSection() {
  return (
    <section className="relative py-24">
      <div className="mx-auto w-full max-w-7xl px-4 md:px-8">
        <div className="flex flex-col items-center gap-11 rounded-xl border border-gray-300 p-11 lg:flex-row">
          <div className="box w-full max-w-md">
            <div className="flex items-center justify-center gap-[5px]">
              <span className="font-manrope text-xl leading-normal font-bold tracking-[-0.209px] text-gray-900">
                Pagedone
              </span>
            </div>
            <p className="mt-3 text-center text-xl leading-8 font-normal text-black">
              Lowest Prices Best Quality Shoppings
            </p>
          </div>
          <div className="grid w-full grid-cols-2 gap-y-6 max-lg:max-w-xl min-[450px]:grid-cols-3 sm:grid-cols-5 xl:gap-14">
            <div className="box flex flex-col items-center">
              <button className="flex items-center justify-center rounded-full bg-indigo-50 p-5 shadow-sm shadow-transparent transition-all duration-500 focus-within:bg-indigo-100 focus-within:outline-0 hover:bg-indigo-100 hover:shadow-indigo-200"></button>
              <p className="mt-2 w-[81px] text-center text-sm leading-6 font-medium text-black">
                Free delivery
              </p>
            </div>
            <div className="box flex flex-col items-center">
              <button className="flex items-center justify-center rounded-full bg-indigo-50 p-5 shadow-sm shadow-transparent transition-all duration-500 focus-within:bg-indigo-100 focus-within:outline-0 hover:bg-indigo-100 hover:shadow-indigo-200"></button>
              <p className="mt-2 w-[81px] text-center text-sm leading-6 font-medium text-black">
                Cash in delivery
              </p>
            </div>
            <div className="box flex flex-col items-center">
              <button className="flex items-center justify-center rounded-full bg-indigo-50 p-5 shadow-sm shadow-transparent transition-all duration-500 focus-within:bg-indigo-100 focus-within:outline-0 hover:bg-indigo-100 hover:shadow-indigo-200"></button>
              <p className="mt-2 w-[81px] text-center text-sm leading-6 font-medium text-black">
                Free Gift Chance
              </p>
            </div>
            <div className="box flex flex-col items-center">
              <button className="flex items-center justify-center rounded-full bg-indigo-50 p-5 shadow-sm shadow-transparent transition-all duration-500 focus-within:bg-indigo-100 focus-within:outline-0 hover:bg-indigo-100 hover:shadow-indigo-200"></button>
              <p className="mt-2 w-[81px] text-center text-sm leading-6 font-medium text-black">
                Price Tag Available
              </p>
            </div>
            <div className="box flex flex-col items-center max-[450px]:col-span-2">
              <button className="flex items-center justify-center rounded-full bg-indigo-50 p-5 shadow-sm shadow-transparent transition-all duration-500 focus-within:bg-indigo-100 focus-within:outline-0 hover:bg-indigo-100 hover:shadow-indigo-200"></button>
              <p className="mt-2 w-[81px] text-center text-sm leading-6 font-medium text-black">
                Best discount
              </p>
            </div>
          </div>
        </div>
      </div>
    </section>
  )
}