Contact Sales Menu

New Announcing our redesigned analytics dashboard. Learn more

Introducing Flowrift 2.0

Design faster. Launch smarter.

Flowrift helps teams build responsive layouts effortlessly, with pixel-perfect precision and customizable components that scale with your needs.

Start now Take tour

@import url("/template/basic-library/section/hero/hero-thirteen/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 border-b 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 items-center">
      <div
        class="flex items-center gap-2 rounded border bg-gray-50 pt-2 pr-2 pb-2 pl-2 text-gray-500"
      >
        <span
          class="mt-0.5 rounded-full bg-indigo-100 pl-2 pr-2 px-2 pt-1 pb-1 py-1 text-xs font-semibold leading-none text-indigo-800"
        >
          New
        </span>
        <span class="text-sm">
          Announcing our redesigned analytics dashboard.
        </span>
        <a
          href="#"
          class="transition duration-100 active:text-indigo-700 text-sm font-bold text-indigo-500 hover:text-indigo-600"
        >
          Learn more
        </a>
      </div>
      <div
        class="flex max-w-xl flex-col items-center pb-0 pt-8 text-center sm:pb-16 lg:pb-32 lg:pt-32"
      >
        <p
          class="mb-4 font-semibold text-indigo-500 md:mb-6 md:text-lg xl:text-xl"
        >
          Introducing Flowrift 2.0
        </p>
        <h1
          class="mb-8 text-4xl font-bold text-black sm:text-5xl md:mb-12 md:text-6xl"
        >
          Design faster. Launch smarter.
        </h1>
        <p class="mb-8 leading-relaxed text-gray-500 md:mb-12 xl:text-lg">
          Flowrift helps teams build responsive layouts effortlessly, with
          pixel-perfect precision and customizable components that scale with
          your needs.
        </p>
        <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:bg-gray-200 rounded-lg border bg-white 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-100 focus-visible:ring md:text-base"
          >
            Take tour
          </a>
        </div>
      </div>
    </section>
  </div>
</div>