import Banner from "../components/banner";
import Lists from "./lists";

function Listing(props) {
  return (
    <div>
    <section class="overflow-hidden bg-gray-50 sm:grid sm:grid-cols-2">
  <div class="p-8 md:p-12 lg:px-16 lg:py-24">
    <div class="mx-auto max-w-xl text-center ltr:sm:text-left rtl:sm:text-right">
      <h2 class="text-2xl font-bold text-gray-900 md:text-3xl">
Open your business 247 to your Online Customers      </h2>

      <p class="hidden text-gray-500 md:mt-4 md:block">
        Sign up today to get your business online and tranzact 247. We will get your business premises verified in few steps and open your doors to opportunities.
      </p>

      <div class="mt-4 md:mt-8">
        <a
          href="#"
          class="inline-block rounded bg-emerald-600 px-12 py-3 text-sm font-medium text-white transition hover:bg-emerald-700 focus:outline-none focus:ring focus:ring-yellow-400"
        >
          Get Started Today
        </a>
      </div>
    </div>
  </div>

  <img
    alt="Business-woman-holding-app"
    src="image/Business-woman-holding-app.JPG"
    class=" w-50 object-cover sm:h-full"
  />
</section>
      <section className="bg-white pb-[84px] pt-[120px] dark:bg-dark">
        <div className="mx-auto px-4 sm:container">
          <div className="-mx-4 flex flex-wrap justify-center">
            <div className="w-full px-4">
              <div className="mx-auto mb-[60px] max-w-[510px] text-center lg:mb-20">
                <span className="mb-2 block text-lg font-semibold text-primary">
                  Our Listings
                </span>
                <h2 className="mb-4 text-3xl font-bold text-dark sm:text-4xl md:text-[40px] dark:text-white">
                  Our Listings
                </h2>
              </div>
            </div>
          </div>
          <Lists />
        </div>
      </section>
    </div>
  );
}

export default Listing;
