export function DarkIntegrationSection() {
  return (
    <section className="relative bg-gray-900 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-start justify-start gap-8 lg:gap-11">
          <div className="flex flex-col items-center justify-start gap-2.5">
            <h2 className="font-manrope text-center text-3xl leading-normal font-bold text-white">
              Our Integrations
            </h2>
            <p className="text-center text-lg leading-8 font-normal text-gray-200">
              The goal of integrating these services is to enrich the user
              experience, increase productivity, and provide users with a more
              comprehensive solution that meets their needs.
            </p>
          </div>
          <div className="grid grid-cols-1 flex-col items-start justify-start gap-8 md:grid-cols-2 lg:grid-cols-3">
            <div className="flex items-start justify-start gap-2.5 rounded-2xl border border-gray-500 bg-gray-900 px-6 py-8">
              <div className="inline-flex flex-col items-start justify-start gap-4">
                <a href="#"></a>
                <h4 className="text-lg leading-8 font-semibold text-white">
                  Stoplight
                </h4>
                <p className="text-sm leading-snug font-normal text-gray-50">
                  Stoplight is a powerful platform designed to streamline the
                  development and management.
                </p>
              </div>
            </div>
            <div className="flex items-start justify-start gap-3 rounded-2xl border border-gray-500 bg-gray-900 px-6 py-8">
              <div className="inline-flex flex-col items-start justify-start gap-4">
                <a href="#"></a>
                <h4 className="text-lg leading-8 font-semibold text-white">
                  GoDaddy
                </h4>
                <p className="text-sm leading-snug font-normal text-gray-50">
                  GoDaddy is a globally renowned technology company specializing
                  in domain registration
                </p>
              </div>
            </div>
            <div className="flex items-start justify-start gap-2.5 rounded-2xl border border-gray-500 bg-gray-900 px-6 py-8">
              <div className="inline-flex flex-col items-start justify-start gap-4">
                <a href="#"></a>
                <h4 className="text-lg leading-8 font-semibold text-white">
                  Usertesting
                </h4>
                <p className="text-sm leading-snug font-normal text-gray-50">
                  UserTesting is a leading platform that enables businesses to
                  gather valuable insights.
                </p>
              </div>
            </div>
            <div className="flex items-start justify-start gap-2.5 rounded-2xl border border-gray-500 bg-gray-900 px-6 py-8">
              <div className="inline-flex flex-col items-start justify-start gap-4">
                <a href="#"></a>
                <h4 className="text-lg leading-8 font-semibold text-white">
                  Videoask
                </h4>
                <p className="text-sm leading-snug font-normal text-gray-50">
                  Videoask is a versatile platform that enables users to create
                  interactive video.
                </p>
              </div>
            </div>
            <div className="flex items-start justify-start gap-2.5 rounded-2xl border border-gray-500 bg-gray-900 px-6 py-8">
              <div className="inline-flex flex-col items-start justify-start gap-4">
                <a href="#"></a>
                <h4 className="text-lg leading-8 font-semibold text-white">
                  Linkdin
                </h4>
                <p className="text-sm leading-snug font-normal text-gray-50">
                  LinkedIn is a professional networking platform that connects
                  individuals and businesses worldwide.
                </p>
              </div>
            </div>
            <div className="flex items-start justify-start gap-2.5 rounded-2xl border border-gray-500 bg-gray-900 px-6 py-8">
              <div className="inline-flex flex-col items-start justify-start gap-4">
                <a href="#"></a>
                <h4 className="text-lg leading-8 font-semibold text-white">
                  Yelp
                </h4>
                <p className="text-sm leading-snug font-normal text-gray-50">
                  Yelp is a popular online platform and mobile app that helps
                  users discover and review.
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  )
}