export function HexagonIntegrationCards() {
  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="flex w-full flex-col items-center justify-start gap-8 lg:flex-row lg:gap-12 xl:gap-24">
          <div className="flex w-full items-center justify-center gap-8 lg:justify-start">
            <div className="inline-flex flex-col items-start justify-start gap-6">
              <div className="flex h-32 w-32 flex-col items-center justify-center gap-3 rounded-2xl border border-gray-200 p-6 transition-all duration-700 ease-in-out hover:border-indigo-600 lg:h-40 lg:w-40 xl:h-[164px] xl:w-[165.33px]">
                {/* SVG removed */}
                <h6 className="text-center text-base leading-relaxed font-semibold text-gray-900">
                  Music
                </h6>
              </div>
              <div className="flex h-32 w-32 flex-col items-center justify-center gap-3 rounded-2xl border border-gray-200 p-6 transition-all duration-700 ease-in-out hover:border-indigo-600 lg:h-40 lg:w-40 xl:h-[164px] xl:w-[165.33px]">
                {/* SVG removed */}
                <h6 className="text-center text-base leading-relaxed font-semibold text-gray-900">
                  Youtube
                </h6>
              </div>
            </div>
            <div className="inline-flex flex-col items-start justify-start gap-6">
              <div className="flex h-32 w-32 flex-col items-center justify-center gap-3 rounded-2xl border border-gray-200 p-6 transition-all duration-700 ease-in-out hover:border-indigo-600 lg:h-40 lg:w-40 xl:h-[164px] xl:w-[165.33px]">
                {/* SVG removed */}
                <h6 className="text-center text-base leading-relaxed font-semibold text-gray-900">
                  Telegram
                </h6>
              </div>
              <div className="flex h-32 w-32 flex-col items-center justify-center gap-3 rounded-2xl border border-gray-200 p-6 transition-all duration-700 ease-in-out hover:border-indigo-600 lg:h-40 lg:w-40 xl:h-[164px] xl:w-[165.33px]">
                {/* SVG removed */}
                <h6 className="text-center text-base leading-relaxed font-semibold text-gray-900">
                  Instagram
                </h6>
              </div>
              <div className="flex h-32 w-32 flex-col items-center justify-center gap-3 rounded-2xl border border-gray-200 p-6 transition-all duration-700 ease-in-out hover:border-indigo-600 lg:h-40 lg:w-40 xl:h-[164px] xl:w-[165.33px]">
                {/* SVG removed */}
                <h6 className="text-center text-base leading-relaxed font-semibold text-gray-900">
                  Bitcoin
                </h6>
              </div>
            </div>
            <div className="inline-flex flex-col items-start justify-start gap-6">
              <div className="flex h-32 w-32 flex-col items-center justify-center gap-3 rounded-2xl border border-gray-200 p-6 transition-all duration-700 ease-in-out hover:border-indigo-600 lg:h-40 lg:w-40 xl:h-[164px] xl:w-[165.33px]">
                {/* SVG removed */}
                <h6 className="text-center text-base leading-relaxed font-semibold text-gray-900">
                  Zapier
                </h6>
              </div>
              <div className="flex h-32 w-32 flex-col items-center justify-center gap-3 rounded-2xl border border-gray-200 p-6 transition-all duration-700 ease-in-out hover:border-indigo-600 lg:h-40 lg:w-40 xl:h-[164px] xl:w-[165.33px]">
                {/* SVG removed */}
                <h6 className="text-center text-base leading-relaxed font-semibold text-gray-900">
                  Coding
                </h6>
              </div>
            </div>
          </div>
          <div className="inline-flex w-full flex-col items-center justify-start gap-10 lg:items-start">
            <div className="flex w-full flex-col items-center justify-start gap-2.5 lg:items-start">
              <h2 className="font-manrope text-center text-3xl leading-normal font-bold text-gray-900 lg:text-start">
                Harnessing the Power of Integrations to Streamline{" "}
              </h2>
              <p className="text-center text-sm leading-snug font-normal text-gray-500 lg:text-start">
                This approach aims to minimize redundancies, improve
                productivity, and foster a more streamlined and efficient{" "}
              </p>
            </div>
            <button className="flex items-center justify-center rounded-xl bg-indigo-600 px-5 py-2.5 shadow-[0px_1px_2px_0px_rgba(16,_24,_40,_0.05)] transition-all duration-700 ease-in-out hover:bg-indigo-800">
              <span className="px-2 py-px text-base leading-relaxed font-semibold text-white">
                Check all app
              </span>
            </button>
          </div>
        </div>
      </div>
    </section>
  )
}