      
<body class="dark:bg-slate-900">
  <header class="bg-[url('https://res.cloudinary.com/ds4j2pmzp/image/upload/v1656977109/webwinds/images/hero-01-sm-bg_hqnh5q.png')] bg-center bg-no-repeat md:bg-[url('https://res.cloudinary.com/ds4j2pmzp/image/upload/v1656977113/webwinds/images/hero-01-lg-bg_oorwgk.png')] md:bg-right-top">
    <nav class="px-4 py-4 md:flex md:items-center md:justify-between md:px-6 md:py-4">
      <div class="flex items-center justify-between md:w-2/12">
        <a href="#" class="flex items-center text-xl text-slate-900 dark:text-white md:text-2xl md:font-semibold">
          <img class="mr-3 h-6 md:mt-0 md:h-10" src="https://res.cloudinary.com/ds4j2pmzp/image/upload/v1656977478/webwinds/logos/dummy-logo_mqh7y4.svg" alt="logo" />
          <p>ZPay</p>
        </a>
        <!-- Mobile menu button -->
        <div class="flex md:hidden">
          <button type="button" class="text-slate-900 focus:text-slate-600 focus:outline-none dark:text-slate-400" aria-label="toggle menu">
            <svg viewBox="0 0 24 24" class="h-6 w-6 fill-current"> <path fill-rule="evenodd" d="M4 5h16a1 1 0 0 1 0 2H4a1 1 0 1 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2z"> </path> </svg>
          </button>
        </div>
      </div>
      <!-- Mobile Menu open: "block", Menu closed: "hidden" -->
      <div class="hidden w-full md:flex md:items-center md:justify-between">
        <div class="flex flex-col text-slate-500 md:flex-row">
          <a href="#" class="my-4 mr-10 font-medium text-slate-900 dark:text-white md:my-0">Home</a>
          <a href="#" class="my-4 mr-10 text-slate-500 hover:text-slate-900 dark:text-slate-400 dark:hover:text-white md:my-0">Products</a>
          <a href="#" class="my-4 mr-10 text-slate-500 hover:text-slate-900 dark:text-slate-400 dark:hover:text-white md:my-0">Customers</a>
          <a href="#" class="my-4 mr-10 text-slate-500 hover:text-slate-900 dark:text-slate-400 dark:hover:text-white md:my-0">Articles</a>
        </div>
        <div class="flex flex-wrap justify-center">
          <button type="button" class="mt-4 rounded-lg border-0 text-base text-slate-900 focus:outline-none dark:text-slate-200 dark:hover:text-white md:mt-0 md:mr-5 md:w-auto">
            Log in
          </button>
          <button type="button" class="my-4 rounded-lg border-0 bg-slate-900 py-2.5 px-4 text-base text-white hover:bg-slate-700 focus:outline-none dark:bg-white dark:text-slate-900 dark:hover:bg-slate-200 md:my-0 md:w-auto">
            Get started now
          </button>
        </div>
      </div>
    </nav>
    <main class="container mx-auto flex max-w-7xl flex-col-reverse justify-between px-4 md:flex-row md:px-0">
      <div class="mt-10 md:w-1/2">
        <p class="inline-block rounded-lg bg-slate-100 py-2 px-4 text-sm text-slate-900 dark:bg-slate-800 dark:text-white md:mt-10 md:text-base">
          5% CASHBANK FOR NEWCOMER
        </p>
        <h1 class="mt-4 text-4xl font-semibold dark:text-white md:text-6xl md:leading-[4.5rem]">
          Enjoy your <span class="text-purple-500"> future </span> endeavors
          online payments
        </h1>
        <p class="mt-5 text-slate-500 md:w-3/4 md:text-lg">
          Open a free account in minutes right from your phone, and make your
          money go further.
        </p>
        <div class="mt-8">
          <button class="w-full rounded-lg bg-slate-900 px-10 py-4 text-white transition duration-100 hover:bg-slate-800 dark:bg-white dark:text-slate-900 dark:hover:bg-slate-200 md:w-auto">
            Get started
          </button>
          <button class="w-full rounded-lg px-10 py-4 text-slate-800 transition duration-100 hover:bg-slate-100 dark:text-slate-200 dark:hover:bg-slate-700 md:ml-5 md:w-auto">
            Try for Free
          </button>
        </div>
      </div>
      <div class="mt-10 flex items-center justify-end md:w-1/2">
        <img src="https://res.cloudinary.com/ds4j2pmzp/image/upload/v1656977125/webwinds/images/Hero-image-1_wrv4cl.svg" alt="" />
      </div>
    </main>
  </header>
</body>