      
<body class="bg-white dark:bg-slate-900">        
  <header class="h-screen">
    <nav class="sticky mx-auto max-w-7xl py-4 px-4 lg:flex lg:items-center lg:justify-between lg:py-4 lg:px-0">
      <div class="flex items-center justify-between lg:w-2/12">
        <a href="#" class="flex items-center text-xl text-slate-900 dark:text-white lg:text-2xl lg:font-semibold">
          <img class="mr-3 h-6 lg:mt-0 lg:h-10" src="https://res.cloudinary.com/ds4j2pmzp/image/upload/v1656977478/webwinds/logos/dummy-logo-2_esatp6.svg" alt="logo" />
          <p>Comm.app</p>
        </a>
        <!-- Mobile menu button -->
        <div class="flex lg: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 lg:ml-5 lg:flex lg:items-center lg:justify-between">
        <div></div>
        <div class="flex flex-col lg:flex-row">
          <a href="#" class="my-4 mr-10 font-medium text-slate-900 dark:text-white lg: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 lg: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 lg: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 lg:my-0">Articles</a>
        </div>

        <div class="flex flex-wrap justify-center">
          <button type="button" class="mt-4 inline-flex w-full items-center justify-center text-base text-slate-500 hover:text-slate-900 focus:outline-none dark:text-slate-400 dark:hover:text-white lg:mt-0 lg:mr-5 lg:w-auto">
            Sign in
          </button>
          <button type="button" class="my-4 inline-flex w-full items-center justify-center bg-slate-900 py-3 px-5 text-base text-white hover:bg-slate-700 focus:outline-none dark:bg-white dark:text-slate-900 dark:hover:bg-slate-200 lg:my-0 lg:w-auto">
            Sign up
          </button>
        </div>
      </div>
    </nav>
    <main class="container relative mx-auto h-full max-w-7xl px-4 lg:px-0">
      <h1 class="text bottom-20 my-10 text-center text-4xl font-semibold leading-[3rem] dark:text-white lg:absolute lg:text-left lg:text-[6rem] lg:font-medium lg:leading-[7rem]">
        Better <br /> Communication <br /> with each <br />
        <span>
          <img class="inline-flex h-8 dark:hidden lg:h-auto" src="https://res.cloudinary.com/ds4j2pmzp/image/upload/v1656977122/webwinds/images/pattern-1-dark_nmyanu.svg" alt="" />
          <img class="hidden h-8 dark:inline-flex lg:h-auto" src="https://res.cloudinary.com/ds4j2pmzp/image/upload/v1656977124/webwinds/images/pattern-1-light_dklnbn.svg" alt="" />
        </span>
        Other
      </h1>
      <div class="max-w-60 bottom-[20vh] left-[45vw] text-center leading-8 text-slate-400 lg:absolute lg:w-60 lg:text-left">
        <p>
          Create loyalty and growth at every stage of your customer Mecycle
          with Intercom.
        </p>
        <button class="mt-5 w-full bg-green-500 px-10 py-3 text-white transition duration-100 hover:bg-green-600 lg:w-auto">
          Get started
        </button>
      </div>
      <img class="right-0 top-0 h-[650px] lg:absolute" src="https://res.cloudinary.com/ds4j2pmzp/image/upload/v1656977111/webwinds/images/hero-image-3_cudxq3.svg" alt="" />
    </main>
  </header>
</body>