    
<body class="dark:bg-slate-900">
  <header class="bg-[url('https://res.cloudinary.com/ds4j2pmzp/image/upload/v1656977107/webwinds/images/hero-02-sm-bg_e16yac.png')] bg-bottom bg-no-repeat md:bg-[url('https://res.cloudinary.com/ds4j2pmzp/image/upload/v1656977109/webwinds/images/hero-02-lg-bg_r2x34f.png')] md:bg-right-top">
    <nav class="mx-auto 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>Topin</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>

        <button type="button" class="my-4 inline-flex w-full bg-slate-900 py-3 px-4 text-base text-white hover:bg-slate-700 focus:outline-none md:my-0 md:w-auto">
          Get started now
        </button>
      </div>
    </nav>
    
    <main class="container mx-auto flex max-w-7xl flex-col justify-between px-4 py-20 md:flex-row md:px-0">
      <div class="md:w-1/2">
        <h1 class="text-5xl font-medium dark:text-white md:mt-0 md:text-6xl md:leading-[4.5rem]">
          Discover a better way to manage spendings
        </h1>
        <p class="my-5 text-slate-500 md:my-10 md:w-3/4 md:text-lg">
          Get a business account credit card and spend management software in
          one easy Solution.
        </p>
        <div class="md:flex">
          <button class="w-full bg-green-500 px-10 py-4 text-white transition duration-100 hover:bg-green-600 md:w-auto">
            Get started
          </button>
          <button class="mt-5 flex w-full justify-center px-10 py-4 font-medium text-slate-800 transition duration-100 hover:bg-slate-100 dark:text-slate-200 dark:hover:bg-slate-700 md:mt-0 md:ml-5 md:w-auto">
            Try for Free
            <svg class="ml-2" width="24" height="23" viewBox="0 0 24 23" fill="none" xmlns="http://www.w3.org/2000/svg"> 
              <path d="M7.5 17L17.5 7" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" /> 
              <path d="M7.5 7H17.5V17" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" /> 
            </svg>
          </button>
        </div>
        <div class="mt-10 md:flex">
          <div class="flex items-center">
            <h1 class="text-7xl font-medium italic text-slate-900 dark:text-white">
              3x
            </h1>
            <p class="ml-5 text-lg leading-[2.2rem] text-slate-500">
              Faster that any other platform
            </p>
          </div>
          <div class="my-10 flex">
            <h1 class="text-7xl font-medium italic text-slate-900 dark:text-white">
              8%
            </h1>
            <p class="ml-5 text-lg leading-[2.2rem] text-slate-500">
              For the first time subscription
            </p>
          </div>
        </div>
      </div>
      
      <div class="flex items-start justify-end md:w-1/2">
        <img src="https://res.cloudinary.com/ds4j2pmzp/image/upload/v1656977112/webwinds/images/Hero-image-2_pkuweo.svg" alt="" />
      </div>
    </main>
  </header>
</body>