<section
  class="
    relative
    w-full
    min-h-screen
    bg-muted-100
    dark:bg-muted-900
    overflow-hidden
  "
>
  <!--Background shape-->
  <div
    class="
      absolute
      top-10
      left-20
      -translate-x-1/2 -translate-y-1/2
      h-[550px]
      w-[550px]
      rotate-45
      mask mask-hexed
      bg-gradient-to-r
      from-primary-500/10
      via-purple-500/5
      to-purple-500/5
      z-0
    "
  ></div>

  <!--Background shape-->
  <div
    class="
      hidden
      md:block
      absolute
      top-6
      right-6
      h-[250px]
      w-[250px]
      rotate-90
      mask mask-hexed
      bg-gradient-to-r
      from-primary-500/10
      via-purple-500/5
      to-purple-500/5
      z-0
    "
  ></div>

  <div class="w-full max-w-7xl mx-auto">
    <div class="w-full min-h-screen flex items-center">
      <div class="w-full h-full flex flex-col justify-between px-6">
        <!--Hero content-->
        <div
          class="
            relative
            top-6
            w-full
            h-full
            flex flex-col
            pt-20
            ltablet:-m-3
            lg:-m-3
          "
        >
          <!--Column-->
          <div class="relative w-full p-6 z-10">
            <div class="max-w-2xl space-y-4 text-center mx-auto">
              <h1
                class="
                  font-heading font-bold
                  text-5xl
                  md:text-6xl
                  text-muted-800
                  dark:text-white
                "
              >
                The #1 HR app.
              </h1>
              <p class="font-sans text-lg text-muted-500 dark:text-muted-400">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Tum
                Torquatus: Prorsus, inquit, assentior; Videmus igitur ut
                conquiescere.
              </p>

              <div class="flex items-center justify-center gap-x-2">
                <button
                  class="
                    relative
                    font-sans font-normal
                    inline-flex
                    items-center
                    justify-center
                    leading-5
                    no-underline
                    min-w-[130px]
                    space-x-1
                    text-white
                    bg-primary-500
                    h-12
                    px-5
                    py-3
                    text-base
                    rounded-xl
                    hover:bg-primary-600
                    hover:shadow-xl
                    hover:shadow-primary-500/20
                    tw-accessibility
                    transition-all
                    duration-300
                  "
                >
                  Try for Free
                </button>
                <button
                  class="
                    relative
                    font-sans font-normal
                    inline-flex
                    items-center
                    justify-center
                    leading-5
                    no-underline
                    min-w-[130px]
                    space-x-1
                    text-slate-700
                    bg-white
                    border
                    dark:text-white dark:bg-slate-700 dark:border-slate-600
                    h-12
                    px-5
                    py-3
                    text-base
                    rounded-xl
                    hover:bg-slate-50
                    tw-accessibility
                    transition-all
                    duration-300
                  "
                >
                  How it Works
                </button>
              </div>
            </div>
          </div>

          <!--Column-->
          <div
            class="
              group
              relative
              w-full
              max-w-5xl
              mx-auto
              max-h-[590px]
              lg:max-h-max
              px-0
              md:px-6
              py-6
              mt-auto
            "
          >
            <div
              class="
                block
                absolute
                left-1/2
                right-0
                bottom-0
                w-[1280px]
                h-[1280px]
                rounded-full
                bg-gradient-to-r
                from-primary-500/10
                via-purple-500/5
                to-purple-500/5
                mx-auto
                -translate-x-1/2
                translate-y-1/2
              "
            ></div>
            {{> hero/product/module-1}}
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
