export const Brand = () => {
  return <>

    {/* <!-- ====== Brands Section Start --> */}
    <section class="pb-20 dark:bg-dark">
      <div class="container px-4">
        <div
          class="-mx-4 flex flex-wrap items-center justify-center gap-8 xl:gap-11"
        >
          <a href="https://graygrids.com/">
            <img
              src="/images/starter/brands/graygrids.svg"
              alt="graygrids"
              class="dark:hidden"
            />
            <img
              src="/images/starter/brands/graygrids-white.svg"
              alt="graygrids"
              class="hidden dark:block"
            />
          </a>
          <a href="https://lineicons.com/">
            <img
              src="/images/starter/brands/lineicons.svg"
              alt="lineicons"
              class="dark:hidden"
            />
            <img
              src="/images/starter/brands/lineicons-white.svg"
              alt="graygrids"
              class="hidden dark:block"
            />
          </a>
          <a href="https://uideck.com/">
            <img
              src="/images/starter/brands/uideck.svg"
              alt="uideck"
              class="dark:hidden"
            />
            <img
              src="/images/starter/brands/uideck-white.svg"
              alt="graygrids"
              class="hidden dark:block"
            />
          </a>
          <a href="https://ayroui.com/">
            <img
              src="/images/starter/brands/ayroui.svg"
              alt="ayroui"
              class="dark:hidden"
            />
            <img
              src="/images/starter/brands/ayroui-white.svg"
              alt="graygrids"
              class="hidden dark:block"
            />
          </a>
          <a href="https://tailgrids.com/">
            <img
              src="/images/starter/brands/tailgrids.svg"
              alt="tailgrids"
              class="dark:hidden"
            />
            <img
              src="/images/starter/brands/tailgrids-white.svg"
              alt="graygrids"
              class="hidden dark:block"
            />
          </a>
        </div>
      </div>
    </section>
    {/* <!-- ====== Brands Section End --> */}
    </>
}