Basic integration block

                                        <section class="py-24 relative">
        <div class="w-full max-w-7xl px-4 md:px-5 lg:px-5 mx-auto">
            <div class="w-full flex-col justify-start items-center lg:gap-11 gap-8 inline-flex">
                <div class="w-full flex-col justify-start items-center gap-2.5 flex">
                    <h2 class="text-center text-gray-900 text-3xl font-bold font-manrope leading-normal">Integrations</h2>
                    <p class="max-w-4xl mx-auto text-center text-gray-500 text-lg font-normal leading-8">Integrations refer to the process of combining different software systems or components to work together seamlessly. This involves connecting various applications.</p>
                </div>
                <div class="grid lg:grid-cols-4 md:grid-cols-2 grid-cols-1 justify-start items-start gap-8">
                    <div class="w-full px-6 py-8 rounded-2xl border border-gray-200 hover:border-indigo-600 transition-all duration-700 ease-in-out justify-center items-center gap-2.5 flex">
                        <div class="flex-col justify-start items-center gap-3.5 inline-flex">
                            <a href="">
                                <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40" fill="none">
                                    <g clip-path="url(#clip0_30847_81616)">
                                      <path d="M8.56691 25.1969C8.56691 27.4961 6.70865 29.3544 4.40943 29.3544C2.11022 29.3544 0.251953 27.4961 0.251953 25.1969C0.251953 22.8977 2.11022 21.0394 4.40943 21.0394H8.56691V25.1969ZM10.6457 25.1969C10.6457 22.8977 12.5039 21.0394 14.8031 21.0394C17.1023 21.0394 18.9606 22.8977 18.9606 25.1969V35.5906C18.9606 37.8898 17.1023 39.7481 14.8031 39.7481C12.5039 39.7481 10.6457 37.8898 10.6457 35.5906V25.1969Z" fill="#E01E5A"/>
                                      <path d="M14.8034 8.50393C12.5042 8.50393 10.6459 6.64566 10.6459 4.34645C10.6459 2.04723 12.5042 0.188965 14.8034 0.188965C17.1026 0.188965 18.9609 2.04723 18.9609 4.34645V8.50393H14.8034ZM14.8034 10.6142C17.1026 10.6142 18.9609 12.4724 18.9609 14.7716C18.9609 17.0709 17.1026 18.9291 14.8034 18.9291H4.37818C2.07897 18.9291 0.220703 17.0709 0.220703 14.7716C0.220703 12.4724 2.07897 10.6142 4.37818 10.6142H14.8034Z" fill="#36C5F0"/>
                                      <path d="M31.465 14.7716C31.465 12.4724 33.3233 10.6142 35.6225 10.6142C37.9217 10.6142 39.7799 12.4724 39.7799 14.7716C39.7799 17.0709 37.9217 18.9291 35.6225 18.9291H31.465V14.7716ZM29.3862 14.7716C29.3862 17.0709 27.528 18.9291 25.2288 18.9291C22.9296 18.9291 21.0713 17.0709 21.0713 14.7716V4.34645C21.0713 2.04723 22.9296 0.188965 25.2288 0.188965C27.528 0.188965 29.3862 2.04723 29.3862 4.34645V14.7716Z" fill="#2EB67D"/>
                                      <path d="M25.2288 31.4331C27.528 31.4331 29.3863 33.2914 29.3863 35.5906C29.3863 37.8898 27.528 39.7481 25.2288 39.7481C22.9296 39.7481 21.0713 37.8898 21.0713 35.5906V31.4331H25.2288ZM25.2288 29.3544C22.9296 29.3544 21.0713 27.4961 21.0713 25.1969C21.0713 22.8977 22.9296 21.0394 25.2288 21.0394H35.654C37.9532 21.0394 39.8114 22.8977 39.8114 25.1969C39.8114 27.4961 37.9532 29.3544 35.654 29.3544H25.2288Z" fill="#ECB22E"/>
                                    </g>
                                    <defs>
                                      <clipPath id="clip0_30847_81616">
                                        <rect width="40" height="40" fill="white"/>
                                      </clipPath>
                                    </defs>
                                </svg>
                            </a>
                            <h4 class="text-center text-gray-900 text-lg font-semibold leading-8">Slack</h4>
                            <p class="text-center text-gray-500 text-sm font-normal leading-snug">Slack is a cloud-based collaboration platform designed to facilitate communication</p>
                        </div>
                    </div>
                    <div class="w-full px-6 py-8 rounded-2xl border border-gray-200 hover:border-indigo-600 transition-all duration-700 ease-in-out justify-center items-center gap-2.5 flex">
                        <div class="flex-col justify-start items-center gap-3.5 inline-flex">
                            <a href="">
                                <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40" fill="none">
                                    <g clip-path="url(#clip0_30847_81621)">
                                      <path d="M39.558 16.4377L39.504 16.3058L34.0583 3.28449C33.9481 3.02882 33.7519 2.81192 33.4983 2.66521C33.309 2.55416 33.094 2.48529 32.8705 2.46413C32.6471 2.44297 32.4213 2.4701 32.2111 2.54335C32.0013 2.61661 31.8127 2.73394 31.6612 2.88595C31.5096 3.03796 31.3989 3.22042 31.338 3.41871L27.6622 13.7345H12.7764L9.10047 3.41871C9.03916 3.22072 8.92824 3.0386 8.77653 2.88688C8.62482 2.73516 8.43653 2.61804 8.22667 2.54484C8.01683 2.47165 7.79124 2.44442 7.56786 2.46532C7.34451 2.48622 7.12956 2.55467 6.94017 2.66521C6.68656 2.81192 6.49041 3.02882 6.38019 3.28449L0.93705 16.3082L0.880537 16.4377C0.0968834 18.3151 0.000340194 20.3751 0.605462 22.3072C1.21058 24.2393 2.48456 25.9388 4.23532 27.1491L4.25587 27.1632L4.30208 27.1961L12.5862 32.8874L16.6962 35.7342L19.193 37.4649C19.486 37.6678 19.8431 37.7776 20.2102 37.7776C20.5774 37.7776 20.9345 37.6678 21.2275 37.4649L23.7243 35.7342L27.8343 32.8874L36.1775 27.1632L36.2006 27.1467C37.9512 25.9369 39.2253 24.2379 39.831 22.3063C40.4365 20.3747 40.3407 18.315 39.558 16.4377Z" fill="#E24329"/>
                                      <path d="M39.5589 16.4372L39.5049 16.3053C36.8517 16.8044 34.3515 17.8352 32.184 19.324L20.2266 27.6124L27.8403 32.8869L36.1835 27.1627L36.2067 27.1462C37.9565 25.9356 39.2295 24.2365 39.8342 22.305C40.4386 20.3734 40.3421 18.314 39.5589 16.4372Z" fill="#FC6D26"/>
                                      <path d="M12.5869 32.8873L16.6969 35.7341L19.1937 37.4647C19.4867 37.6677 19.8438 37.7774 20.2109 37.7774C20.5781 37.7774 20.9352 37.6677 21.2281 37.4647L23.7249 35.7341L27.8349 32.8873L20.2212 27.6128L12.5869 32.8873Z" fill="#FCA326"/>
                                      <path d="M8.25536 19.3244C6.08853 17.8364 3.58936 16.8064 0.93705 16.3081L0.880538 16.4376C0.0968834 18.315 0.000340134 20.3751 0.605462 22.3072C1.21058 24.2392 2.48456 25.9386 4.23532 27.1489L4.25587 27.1631L4.30208 27.196L12.5862 32.8873L20.2051 27.6128L8.25536 19.3244Z" fill="#FC6D26"/>
                                    </g>
                                    <defs>
                                      <clipPath id="clip0_30847_81621">
                                        <rect width="40" height="40" fill="white"/>
                                      </clipPath>
                                    </defs>
                                </svg>
                            </a>
                            <h4 class="text-center text-gray-900 text-lg font-semibold leading-8">GitLab</h4>
                            <p class="text-center text-gray-500 text-sm font-normal leading-snug">GitLab is a comprehensive DevOps platform that provides a complete solution for the entire software </p>
                        </div>
                    </div>
                    <div class="w-full px-6 py-8 rounded-2xl border border-gray-200 hover:border-indigo-600 transition-all duration-700 ease-in-out justify-center items-center gap-2.5 flex">
                        <div class="flex-col justify-start items-center gap-3.5 inline-flex">
                            <a href="">
                                <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40" fill="none">
                                    <g clip-path="url(#clip0_30847_81626)">
                                      <path d="M19.9989 0.065918C8.9872 0.065918 0.0600586 8.99282 0.0600586 20.0045C0.0600586 31.0166 8.9872 39.9428 19.9989 39.9428C31.0117 39.9428 39.9379 31.0166 39.9379 20.0045C39.9379 8.99354 31.0117 0.0668703 19.9986 0.0668703L19.9989 0.065918ZM29.1427 28.8231C28.7855 29.4088 28.0189 29.5945 27.4332 29.235C22.7517 26.3754 16.8584 25.7278 9.91792 27.3135C9.24911 27.4659 8.58244 27.0469 8.43006 26.3778C8.27696 25.7088 8.69434 25.0421 9.36482 24.8897C16.9601 23.1538 23.4751 23.9016 28.7308 27.1135C29.3165 27.4731 29.5022 28.2373 29.1427 28.8231ZM31.5832 23.3933C31.1332 24.1254 30.176 24.3564 29.4451 23.9064C24.0855 20.6114 15.9158 19.6573 9.57649 21.5816C8.75434 21.83 7.88601 21.3666 7.63649 20.5459C7.38887 19.7238 7.85244 18.8571 8.67315 18.6071C15.9143 16.41 24.9165 17.4743 31.0712 21.2564C31.8022 21.7064 32.0332 22.6635 31.5832 23.3935V23.3933ZM31.7927 17.74C25.3665 13.9231 14.7641 13.5721 8.62863 15.4342C7.64339 15.7331 6.60149 15.1769 6.30292 14.1916C6.00434 13.2059 6.56006 12.1647 7.54601 11.8652C14.5891 9.72711 26.2974 10.1402 33.696 14.5323C34.5841 15.0583 34.8746 16.2028 34.3484 17.0878C33.8246 17.974 32.677 18.2662 31.7936 17.74H31.7927Z" fill="#1ED760"/>
                                    </g>
                                    <defs>
                                      <clipPath id="clip0_30847_81626">
                                        <rect width="40" height="40" fill="white"/>
                                      </clipPath>
                                    </defs>
                                </svg>
                            </a>
                            <h4 class="text-center text-gray-900 text-lg font-semibold leading-8">Spotify</h4>
                            <p class="text-center text-gray-500 text-sm font-normal leading-snug">Spotify is a digital music streaming service that offers users access to millions of songs, podcasts</p>
                        </div>
                    </div>
                    <div class="w-full px-6 py-8 rounded-2xl border border-gray-200 hover:border-indigo-600 transition-all duration-700 ease-in-out justify-center items-center gap-2.5 flex">
                        <div class="flex-col justify-start items-center gap-3.5 inline-flex">
                            <a href="" class="w-10 h-10 flex items-center justify-center">
                                <svg xmlns="http://www.w3.org/2000/svg" width="39" height="40" viewBox="0 0 39 40" fill="none">
                                    <path d="M1.50371 36.8587L0.00174568 3.84178C-0.0478582 2.75137 0.965589 1.82725 2.28566 1.75918L36.3258 0.0039847C37.6696 -0.0652987 38.8269 0.777181 38.9109 1.88571C38.9141 1.92748 38.9156 1.96932 38.9156 2.01116V37.9889C38.9156 39.0996 37.8242 40 36.4779 40C36.4415 40 36.405 39.9993 36.3686 39.998L3.83032 38.7923C2.56308 38.7454 1.55128 37.9045 1.50371 36.8587Z" fill="#FF4785"/>
                                    <path d="M28.7362 4.91664L28.9686 0.303024L33.6434 0L33.8448 4.75786C33.8518 4.92344 33.6948 5.06236 33.4941 5.06815C33.4082 5.07062 33.3239 5.04789 33.2564 5.00399L31.4536 3.83239L29.3192 5.16811C29.1592 5.26825 28.9311 5.24241 28.8097 5.11041C28.7587 5.05484 28.7326 4.98632 28.7362 4.91664Z" fill="white"/>
                                    <path d="M22.7578 15.0769C22.7578 15.8593 29.1461 15.4843 30.0037 14.9347C30.0037 9.60652 26.5383 6.80664 20.1926 6.80664C13.8467 6.80664 10.2913 9.65008 10.2913 13.9152C10.2913 21.3437 22.4427 21.4859 22.4427 25.5378C22.4427 26.6752 21.7677 27.3505 20.2825 27.3505C18.3472 27.3505 17.5821 26.5351 17.6722 23.7628C17.6722 23.1613 10.2913 22.9738 10.0662 23.7628C9.49324 30.4812 14.5669 32.419 20.3726 32.419C25.9983 32.419 30.4088 29.9451 30.4088 25.4667C30.4088 17.5051 18.0773 17.7183 18.0773 13.7731C18.0773 12.1736 19.5174 11.9604 20.3726 11.9604C21.2727 11.9604 22.8928 12.0913 22.7578 15.0769Z" fill="white"/>
                                </svg>
                            </a>
                            <h4 class="text-center text-gray-900 text-lg font-semibold leading-8">Storybook</h4>
                            <p class="text-center text-gray-500 text-sm font-normal leading-snug">Storybook is an open-source tool for developing UI components in isolation for React, Vue</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>