export function CircularIntegration() {
  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-10">
          <div className="flex w-full flex-col items-center justify-center gap-5 md:flex-row">
            <h2 className="font-manrope w-full text-center text-3xl leading-normal font-bold text-gray-900 md:text-start">
              Connect Your Core Applications
            </h2>
            <p className="w-full text-center text-base leading-relaxed font-normal text-gray-500 md:text-right">
              Integrate your core applications to foster synergy and streamline
              processes, facilitating smoother operations and empowering your
              team to achieve more.
            </p>
          </div>
          <div className="flex w-full flex-col items-center justify-start gap-6">
            <div className="grid w-full grid-cols-1 items-center justify-start gap-6 md:grid-cols-2">
              <div className="inline-flex h-full w-full flex-col items-start justify-start gap-4 rounded-xl border border-gray-200 bg-gray-50 p-5 shadow-[0px_15px_30px_-4px_rgba(16,_24,_40,_0.03)] transition-all duration-700 ease-in-out hover:border-gray-500">
                <div className="inline-flex items-center justify-start gap-2">
                  {/* SVG removed */}
                  <h4 className="text-lg leading-8 font-medium text-gray-900">
                    Slack
                  </h4>
                </div>
                <p className="text-xs leading-5 font-normal text-gray-500">
                  Empowering teams with efficient communication, collaboration,
                  and seamless integration for enhanced productivity.
                </p>
              </div>
              <div className="inline-flex h-full w-full flex-col items-start justify-start gap-4 rounded-xl border border-gray-200 bg-gray-50 p-5 shadow-[0px_15px_30px_-4px_rgba(16,_24,_40,_0.03)] transition-all duration-700 ease-in-out hover:border-gray-500">
                <div className="inline-flex items-center justify-start gap-2">
                  {/* SVG removed */}
                  <h4 className="text-lg leading-8 font-medium text-gray-900">
                    Sketch
                  </h4>
                </div>
                <p className="text-xs leading-5 font-normal text-gray-500">
                  A powerful design tool for creating and collaborating on
                  digital artwork and user interfaces with ease. Streamlining
                  digital design collaboration effortlessly.
                </p>
              </div>
            </div>
            <div className="grid w-full grid-cols-1 items-center justify-start gap-6 md:grid-cols-2">
              <div className="inline-flex h-full w-full flex-col items-start justify-start gap-4 rounded-xl border border-gray-200 bg-gray-50 p-5 shadow-[0px_15px_30px_-4px_rgba(16,_24,_40,_0.03)] transition-all duration-700 ease-in-out hover:border-gray-500">
                <div className="inline-flex items-center justify-start gap-2">
                  {/* SVG removed */}
                  <h4 className="text-lg leading-8 font-medium text-gray-900">
                    GitLab
                  </h4>
                </div>
                <p className="text-xs leading-5 font-normal text-gray-500">
                  Your premier platform for streamlined version control,
                  collaboration, and development lifecycle management.
                </p>
              </div>
              <div className="inline-flex h-full w-full flex-col items-start justify-start gap-4 rounded-xl border border-gray-200 bg-gray-50 p-5 shadow-[0px_15px_30px_-4px_rgba(16,_24,_40,_0.03)] transition-all duration-700 ease-in-out hover:border-gray-500">
                <div className="inline-flex items-center justify-start gap-2">
                  {/* SVG removed */}
                  <h4 className="text-lg leading-8 font-medium text-gray-900">
                    Zapier
                  </h4>
                </div>
                <p className="text-xs leading-5 font-normal text-gray-500">
                  Zapier streamlines tasks by linking your preferred apps,
                  automating workflows to enhance productivity and efficiency
                  with seamless integration.{" "}
                </p>
              </div>
            </div>
            <div className="grid w-full grid-cols-1 items-center justify-start gap-6 md:grid-cols-2">
              <div className="inline-flex h-full w-full flex-col items-start justify-start gap-4 rounded-xl border border-gray-200 bg-gray-50 p-5 shadow-[0px_15px_30px_-4px_rgba(16,_24,_40,_0.03)] transition-all duration-700 ease-in-out hover:border-gray-500">
                <div className="inline-flex items-center justify-start gap-2">
                  {/* SVG removed */}
                  <h4 className="text-lg leading-8 font-medium text-gray-900">
                    Discord
                  </h4>
                </div>
                <p className="text-xs leading-5 font-normal text-gray-500">
                  Discord facilitates communication for gamers and communities
                  with its voice, video, and text features, fostering seamless
                  interaction and collaboration in a user-friendly platform.
                </p>
              </div>
              <div className="inline-flex h-full w-full flex-col items-start justify-start gap-4 rounded-xl border border-gray-200 bg-gray-50 p-5 shadow-[0px_15px_30px_-4px_rgba(16,_24,_40,_0.03)] transition-all duration-700 ease-in-out hover:border-gray-500">
                <div className="inline-flex items-center justify-start gap-2">
                  {/* SVG removed */}
                  <h4 className="text-lg leading-8 font-medium text-gray-900">
                    Shopify
                  </h4>
                </div>
                <p className="text-xs leading-5 font-normal text-gray-500">
                  Empowering businesses with seamless online store management
                  tools to thrive in the digital marketplace.
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  )
}