Contact Sales Menu

Now available for teams and startups

Build smarter workflows with MegaBit

Start now Take tour

@import url("/template/basic-library/section/hero/hero-eight/raw/styles.css");

<div class="bg-white pb-6 sm:pb-8 lg:pb-12">
  <div
    class="ml-auto mr-auto mx-auto max-w-screen-2xl pl-4 pr-4 px-4 md:pl-8 md:pr-8 md:px-8"
  >
    <header
      class="mb-4 flex items-center justify-between pt-4 pb-4 py-4 gap-x-3 md:pt-8 md:pb-8 md:py-8"
    >
      <img
        class="max-w-full w-40 h-max object-center"
        src="/assets/logo/logo.png"
      />
      <nav class="hidden gap-12 lg:flex">
        <a href="#" class="text-lg font-semibold text-indigo-500">Home</a>
        <a
          href="#"
          class="transition duration-100 active:text-indigo-700 text-lg font-semibold text-gray-600 hover:text-indigo-500"
        >
          Solutions
        </a>
        <a
          href="#"
          class="transition duration-100 active:text-indigo-700 text-lg font-semibold text-gray-600 hover:text-indigo-500"
        >
          Plans
        </a>
        <a
          href="#"
          class="transition duration-100 active:text-indigo-700 text-lg font-semibold text-gray-600 hover:text-indigo-500"
        >
          Company
        </a>
      </nav>
      <a
        href="#"
        class="hidden transition duration-100 active:text-gray-700 lg:inline-block rounded-lg bg-gray-200 pl-8 pr-8 px-8 pt-3 pb-3 py-3 text-center text-sm font-semibold text-gray-500 outline-none ring-indigo-300 hover:bg-gray-300 focus-visible:ring md:text-base"
      >
        Contact Sales
      </a>
      <button
        type="button"
        class="inline-flex active:text-gray-700 lg:hidden items-center gap-2 rounded-lg bg-gray-200 pl-2.5 pr-2.5 px-2.5 pt-2 pb-2 py-2 text-sm font-semibold text-gray-500 ring-indigo-300 hover:bg-gray-300 focus-visible:ring md:text-base"
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          class="h-6 w-6"
          viewBox="0 0 20 20"
          fill="currentColor"
        >
          <path
            fill-rule="evenodd"
            d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h6a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z"
            clip-rule="evenodd"
          ></path>
        </svg>
        <span data-node-handle="base-text" class="inline-block h-auto w-auto">
          Menu
        </span>
      </button>
    </header>
    <section
      class="relative overflow-hidden min-h-96 flex flex-1 shrink-0 items-center justify-center rounded-lg bg-gray-100 pt-16 pb-16 py-16 shadow-lg md:pt-20 md:pb-20 md:py-20 xl:pt-48 xl:pb-48 xl:py-48"
    >
      <img
        src="https://images.unsplash.com/photo-1618004652321-13a63e576b80?auto=format&amp;q=75&amp;fit=crop&amp;w=1500"
        loading="lazy"
        alt="Photo by Fakurian Design"
        class="absolute inset-0 h-full w-full object-cover object-center"
      />
      <div class="mix-blend-multiply absolute inset-0 bg-indigo-500"></div>
      <div
        class="relative flex flex-col items-center pt-4 pr-4 pb-4 pl-4 sm:max-w-xl"
      >
        <p class="mb-4 text-center text-lg text-indigo-200 sm:text-xl md:mb-8">
          Now available for teams and startups
        </p>
        <h1
          class="mb-8 text-center text-4xl font-bold text-white sm:text-5xl md:mb-12 md:text-6xl"
        >
          Build smarter workflows with MegaBit
        </h1>
        <div class="flex w-full flex-col gap-2.5 sm:flex-row sm:justify-center">
          <a
            href="#"
            class="inline-block transition duration-100 active:bg-indigo-700 rounded-lg bg-indigo-500 pl-8 pr-8 px-8 pt-3 pb-3 py-3 text-center text-sm font-semibold text-white outline-none ring-indigo-300 hover:bg-indigo-600 focus-visible:ring md:text-base"
          >
            Start now
          </a>
          <a
            href="#"
            class="inline-block transition duration-100 active:text-gray-700 rounded-lg bg-gray-200 pl-8 pr-8 px-8 pt-3 pb-3 py-3 text-center text-sm font-semibold text-gray-500 outline-none ring-indigo-300 hover:bg-gray-300 focus-visible:ring md:text-base"
          >
            Take tour
          </a>
        </div>
      </div>
    </section>
  </div>
</div>