Contact Sales Menu

Build smarter products with less effort

Empower your team with tools designed to streamline workflows, accelerate development, and deliver results faster than ever.

Sign up

@import url("/template/basic-library/section/hero/hero-eleven/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-8 flex items-center justify-between pt-4 pb-4 py-4 gap-x-3 md:mb-12 md:pt-8 md:pb-8 md:py-8 xl:mb-16"
    >
      <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="flex flex-col justify-between gap-6 sm:gap-10 md:gap-16 lg:flex-row"
    >
      <div
        class="flex flex-col items-center justify-center sm:text-center lg:items-start lg:pt-12 lg:pb-12 lg:py-12 lg:text-left xl:w-5/12 xl:pt-24 xl:pb-24 xl:py-24"
      >
        <h1
          class="mb-8 text-4xl font-bold text-black sm:text-5xl md:mb-12 md:text-6xl"
        >
          Build smarter products with less effort
        </h1>
        <p
          class="mb-8 leading-relaxed text-gray-500 md:mb-12 lg:w-4/5 xl:text-lg"
        >
          Empower your team with tools designed to streamline workflows,
          accelerate development, and deliver results faster than ever.
        </p>
        <form class="flex w-full gap-2 md:max-w-md">
          <input
            placeholder="Email"
            class="placeholder-gray-500 transition duration-100 w-full flex-1 rounded border bg-gray-50 pl-3 pr-3 px-3 pt-2 pb-2 py-2 text-gray-800 outline-none ring-indigo-300 focus:ring"
          />
          <button
            class="inline-block transition duration-100 active:bg-indigo-700 rounded bg-indigo-500 pl-8 pr-8 px-8 pt-2 pb-2 py-2 text-center text-sm font-semibold text-white outline-none ring-indigo-300 hover:bg-indigo-600 focus-visible:ring md:text-base"
          >
            Sign up
          </button>
        </form>
      </div>
      <div
        class="overflow-hidden h-48 rounded-lg bg-gray-100 shadow-lg lg:h-auto xl:w-5/12"
      >
        <img
          src="https://images.unsplash.com/photo-1620206343767-7da98185edd4?auto=format&amp;q=75&amp;fit=crop&amp;w=1000"
          loading="lazy"
          alt="Photo by Fakurian Design"
          class="h-full w-full object-cover object-center"
        />
      </div>
    </section>
  </div>
</div>