export function AppLogosIntegration() {
  return (
    <section className="relative py-24">
      <div className="mx-auto w-full max-w-7xl px-4 md:px-5 lg:px-5">
        <div className="inline-flex w-full flex-col items-center justify-start gap-7 lg:gap-11">
          <h2 className="font-manrope text-center text-3xl leading-normal font-bold text-gray-900">
            Integrated with your favorite apps
          </h2>
          <div className="flex w-full flex-col items-center justify-start gap-3.5 md:gap-6">
            <div className="flex items-center justify-center gap-3.5 md:gap-6">
              <a className="flex h-16 w-16 items-center justify-center gap-2.5 rounded-md border border-gray-200 p-3 transition-all duration-700 ease-in-out hover:bg-gray-50 sm:h-[67px] sm:w-[67px]">
                {/* SVG removed */}
              </a>
              <a className="flex h-16 w-16 items-center justify-center gap-2.5 rounded-md border border-gray-200 p-3 transition-all duration-700 ease-in-out hover:bg-gray-50 sm:h-[67px] sm:w-[67px]">
                {/* SVG removed */}
              </a>
              <a className="flex h-16 w-16 items-center justify-center gap-2.5 rounded-md border border-gray-200 p-3 transition-all duration-700 ease-in-out hover:bg-gray-50 sm:h-[67px] sm:w-[67px]">
                {/* SVG removed */}
              </a>
              <a className="flex h-16 w-16 items-center justify-center gap-2.5 rounded-md border border-gray-200 p-3 transition-all duration-700 ease-in-out hover:bg-gray-50 sm:h-[67px] sm:w-[67px]">
                {/* SVG removed */}
              </a>
              <a className="flex h-16 w-16 items-center justify-center gap-2.5 rounded-md border border-gray-200 p-3 transition-all duration-700 ease-in-out hover:bg-gray-50 sm:h-[67px] sm:w-[67px]">
                {/* SVG removed */}
              </a>
              <a className="flex h-16 w-16 items-center justify-center gap-2.5 rounded-md border border-gray-200 p-3 transition-all duration-700 ease-in-out hover:bg-gray-50 sm:h-[67px] sm:w-[67px]">
                {/* SVG removed */}
              </a>
            </div>
            <div className="inline-flex items-center justify-center gap-3.5 md:gap-6">
              <a className="flex h-16 w-16 items-center justify-center gap-2.5 rounded-md border border-gray-200 p-3 transition-all duration-700 ease-in-out hover:bg-gray-50 sm:h-[67px] sm:w-[67px]">
                {/* SVG removed */}
              </a>
              <a className="flex h-16 w-16 items-center justify-center gap-2.5 rounded-md border border-gray-200 p-3 transition-all duration-700 ease-in-out hover:bg-gray-50 sm:h-[67px] sm:w-[67px]">
                {/* SVG removed */}
              </a>
              <a className="flex h-16 w-16 items-center justify-center gap-2.5 rounded-md border border-gray-200 p-3 transition-all duration-700 ease-in-out hover:bg-gray-50 sm:h-[67px] sm:w-[67px]">
                {/* SVG removed */}
              </a>
              <a className="flex w-16 items-center justify-center gap-2.5 rounded-md border border-gray-200 p-3 transition-all duration-700 ease-in-out hover:bg-gray-50 sm:w-[67px]">
                {/* SVG removed */}
              </a>
              <a className="flex h-16 w-16 items-center justify-center gap-2.5 rounded-md border border-gray-200 p-3 transition-all duration-700 ease-in-out hover:bg-gray-50 sm:h-[67px] sm:w-[67px]">
                {/* SVG removed */}
              </a>
            </div>
          </div>
        </div>
      </div>
    </section>
  )
}