Integration with CTA Button

                                        <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-7 inline-flex">
                <div class="w-full justify-between items-center lg:gap-12 gap-7 flex md:flex-row flex-col">
                    <div class="flex-col justify-center md:items-start items-center gap-2.5 inline-flex">
                        <h2 class="text-gray-900 text-3xl font-bold font-manrope leading-normal">Integrations</h2>
                        <p class="text-gray-500 text-base font-normal leading-relaxed md:text-start text-center">Over 250 top applications can be effortlessly integrated with Segment.</p>
                    </div>
                    <button class="px-5 py-2.5 bg-blue-600 hover:bg-blue-800 transition-all duration-700 ease-in-out rounded-xl shadow justify-center items-center flex">
                        <span class="px-2 py-px text-white text-base font-semibold leading-relaxed whitespace-nowrap">ALL INTEGRATION</span>
                        <div class="w-5 h-5 relative">
                            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
                                <path d="M4.5845 4.99988L9.5847 10.0001L4.58154 15.0032M10.4178 4.99988L15.418 10.0001L10.4149 15.0032" stroke="white" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
                            </svg>
                        </div>
                    </button>
                </div>
                <div class="w-full justify-start items-center gap-6 flex md:flex-row flex-col">
                    <div class="w-full p-6 rounded-2xl border border-gray-200 hover:border-indigo-600 hover:bg-blue-50 transition-all duration-700 ease-in-out flex-col justify-start items-center gap-3 inline-flex">
                        <a href="">
                            <svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 36 36" fill="none">
                                <g clip-path="url(#clip0_30847_81934)">
                                  <path d="M7.71003 22.6772C7.71003 24.7464 6.03759 26.4189 3.96829 26.4189C1.899 26.4189 0.226562 24.7464 0.226562 22.6772C0.226562 20.6079 1.899 18.9354 3.96829 18.9354H7.71003V22.6772ZM9.58089 22.6772C9.58089 20.6079 11.2533 18.9354 13.3226 18.9354C15.3919 18.9354 17.0644 20.6079 17.0644 22.6772V32.0315C17.0644 34.1008 15.3919 35.7732 13.3226 35.7732C11.2533 35.7732 9.58089 34.1008 9.58089 32.0315V22.6772Z" fill="#E01E5A"/>
                                  <path d="M13.3227 7.65351C11.2534 7.65351 9.58092 5.98107 9.58092 3.91178C9.58092 1.84248 11.2534 0.170044 13.3227 0.170044C15.3919 0.170044 17.0644 1.84248 17.0644 3.91178V7.65351H13.3227ZM13.3227 9.55272C15.3919 9.55272 17.0644 11.2252 17.0644 13.2945C17.0644 15.3637 15.3919 17.0362 13.3227 17.0362H3.93997C1.87068 17.0362 0.198242 15.3637 0.198242 13.2945C0.198242 11.2252 1.87068 9.55272 3.93997 9.55272H13.3227Z" fill="#36C5F0"/>
                                  <path d="M28.3182 13.2945C28.3182 11.2252 29.9906 9.55272 32.0599 9.55272C34.1292 9.55272 35.8017 11.2252 35.8017 13.2945C35.8017 15.3637 34.1292 17.0362 32.0599 17.0362H28.3182V13.2945ZM26.4473 13.2945C26.4473 15.3637 24.7749 17.0362 22.7056 17.0362C20.6363 17.0362 18.9639 15.3637 18.9639 13.2945V3.91178C18.9639 1.84248 20.6363 0.170044 22.7056 0.170044C24.7749 0.170044 26.4473 1.84248 26.4473 3.91178V13.2945Z" fill="#2EB67D"/>
                                  <path d="M22.7056 28.2898C24.7749 28.2898 26.4473 29.9622 26.4473 32.0315C26.4473 34.1008 24.7749 35.7732 22.7056 35.7732C20.6363 35.7732 18.9639 34.1008 18.9639 32.0315V28.2898H22.7056ZM22.7056 26.4189C20.6363 26.4189 18.9639 24.7464 18.9639 22.6772C18.9639 20.6079 20.6363 18.9354 22.7056 18.9354H32.0883C34.1576 18.9354 35.83 20.6079 35.83 22.6772C35.83 24.7464 34.1576 26.4189 32.0883 26.4189H22.7056Z" fill="#ECB22E"/>
                                </g>
                                <defs>
                                  <clipPath id="clip0_30847_81934">
                                    <rect width="36" height="36" fill="white"/>
                                  </clipPath>
                                </defs>
                            </svg>
                        </a>
                        <h5 class="text-center text-gray-900 text-base font-semibold leading-relaxed">Slack</h5>
                    </div>
                    <div class="w-full p-6 rounded-2xl border border-gray-200 hover:border-indigo-600 hover:bg-blue-50 transition-all duration-700 ease-in-out flex-col justify-start items-center gap-3 inline-flex">
                        <a href="">
                            <svg xmlns="http://www.w3.org/2000/svg" width="34" height="36" viewBox="0 0 34 36" fill="none">
                                <g clip-path="url(#clip0_30847_81937)">
                                  <path d="M33.1355 14.7939L33.091 14.6752L28.5983 2.95603C28.5073 2.72592 28.3454 2.53072 28.1363 2.39868C27.9801 2.29873 27.8027 2.23675 27.6183 2.21771C27.434 2.19866 27.2477 2.22308 27.0743 2.289C26.9012 2.35493 26.7456 2.46053 26.6206 2.59734C26.4956 2.73415 26.4042 2.89837 26.354 3.07683L23.3214 12.3611H11.0406L8.00804 3.07683C7.95745 2.89864 7.86595 2.73473 7.74079 2.59818C7.61562 2.46163 7.46029 2.35622 7.28715 2.29035C7.11403 2.22447 6.92792 2.19996 6.74364 2.21877C6.55937 2.23758 6.38204 2.29919 6.22579 2.39868C6.01656 2.53072 5.85473 2.72592 5.7638 2.95603L1.27321 14.6774L1.22659 14.7939C0.580075 16.4836 0.500427 18.3376 0.999653 20.0765C1.49888 21.8154 2.54991 23.3449 3.99428 24.4341L4.01124 24.4469L4.04936 24.4765L10.8838 29.5986L14.2745 32.1608L16.3344 33.7184C16.5761 33.9011 16.8707 33.9998 17.1736 33.9998C17.4765 33.9998 17.7711 33.9011 18.0128 33.7184L20.0727 32.1608L23.4634 29.5986L30.3466 24.4469L30.3657 24.432C31.8099 23.3432 32.861 21.8141 33.3607 20.0757C33.8602 18.3372 33.7812 16.4835 33.1355 14.7939Z" fill="#E24329"/>
                                  <path d="M33.1357 14.7935L33.0912 14.6748C30.9022 15.124 28.8396 16.0517 27.0514 17.3916L17.1865 24.8512L23.4678 29.5982L30.351 24.4464L30.3701 24.4316C31.8137 23.3421 32.864 21.8129 33.3628 20.0745C33.8615 18.3361 33.7818 16.4826 33.1357 14.7935Z" fill="#FC6D26"/>
                                  <path d="M10.8843 29.5986L14.275 32.1607L16.3349 33.7183C16.5766 33.901 16.8712 33.9997 17.1741 33.9997C17.477 33.9997 17.7716 33.901 18.0133 33.7183L20.0732 32.1607L23.4639 29.5986L17.1826 24.8516L10.8843 29.5986Z" fill="#FCA326"/>
                                  <path d="M7.31082 17.3919C5.52319 16.0527 3.46137 15.1257 1.27321 14.6772L1.22659 14.7938C0.580075 16.4835 0.500427 18.3375 0.999653 20.0764C1.49888 21.8153 2.54991 23.3447 3.99428 24.434L4.01124 24.4467L4.04936 24.4764L10.8838 29.5985L17.1694 24.8515L7.31082 17.3919Z" fill="#FC6D26"/>
                                </g>
                                <defs>
                                  <clipPath id="clip0_30847_81937">
                                    <rect width="33" height="36" fill="white" transform="translate(0.5)"/>
                                  </clipPath>
                                </defs>
                            </svg>
                        </a>
                        <h5 class="text-center text-gray-900 text-base font-semibold leading-relaxed">GitLab</h5>
                    </div>
                    <div class="w-full p-6 rounded-2xl border border-gray-200 hover:border-indigo-600 hover:bg-blue-50 transition-all duration-700 ease-in-out flex-col justify-start items-center gap-3 inline-flex">
                        <a href="">
                            <svg xmlns="http://www.w3.org/2000/svg" width="40" height="36" viewBox="0 0 40 36" fill="none">
                                <path d="M8.75404 1.18468L19.9598 0L31.1656 1.18468L39.841 12.8307L19.9598 35.9821L0.0786133 12.8307L8.75404 1.18468Z" fill="#FDB300"/>
                                <path d="M8.13149 12.8307L19.9598 35.9821L0.0786133 12.8307H8.13149Z" fill="#EA6C00"/>
                                <path d="M31.7879 12.8307L19.9596 35.9821L39.8408 12.8307H31.7879Z" fill="#EA6C00"/>
                                <path d="M8.13135 12.8307H31.788L19.9597 35.9821L8.13135 12.8307Z" fill="#FDAD00"/>
                                <path d="M19.9597 0L8.75386 1.18466L8.13135 12.8307L19.9597 0Z" fill="#FDD231"/>
                                <path d="M19.9598 0L31.1656 1.18466L31.7881 12.8307L19.9598 0Z" fill="#FDD231"/>
                                <path d="M39.8408 12.8307L31.1653 1.18469L31.7879 12.8307H39.8408Z" fill="#FDAD00"/>
                                <path d="M0.0786133 12.8307L8.75401 1.18469L8.13149 12.8307H0.0786133Z" fill="#FDAD00"/>
                                <path d="M19.9597 0L8.13135 12.8307H31.788L19.9597 0Z" fill="#FEEEB7"/>
                            </svg>
                        </a>
                        <h5 class="text-center text-gray-900 text-base font-semibold leading-relaxed">Sketch</h5>
                    </div>
                    <div class="w-full p-6 rounded-2xl border border-gray-200 hover:border-indigo-600 hover:bg-blue-50 transition-all duration-700 ease-in-out flex-col justify-start items-center gap-3 inline-flex">
                        <a href="">
                            <svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 36 36" fill="none">
                                <g clip-path="url(#clip0_30847_81943)">
                                  <path d="M22.4999 18.0079C22.5005 19.3059 22.2663 20.5934 21.8087 21.8081C20.5935 22.2657 19.3058 22.5002 18.0073 22.5004H17.9921C16.6551 22.4987 15.374 22.2543 14.1919 21.8087C13.734 20.5938 13.4996 19.3062 13.5 18.0079V17.9921C13.4994 16.6943 13.7333 15.4071 14.1905 14.1924C15.4055 13.734 16.6936 13.4994 17.9923 13.5H18.0075C19.306 13.4994 20.5939 13.7339 21.8088 14.1923C22.2665 15.4068 22.5007 16.6941 22.5 17.992L22.4999 18.0079ZM35.75 15H25.243L32.6721 7.57041C32.089 6.75129 31.4386 5.98226 30.7275 5.27133C30.0165 4.56115 29.2477 3.91073 28.429 3.32789L20.9994 10.7575V0.250594C20.0113 0.0843649 19.011 0.000545189 18.009 0L17.9904 0C16.9712 0.0005625 15.9729 0.0871875 15 0.250594V10.7575L7.57041 3.32789C6.75161 3.91057 5.98312 4.5609 5.27302 5.27203L5.26908 5.27484C4.55928 5.98489 3.90975 6.75272 3.32719 7.57041L10.7574 15H0.250594C0.250594 15 0 16.9734 0 17.9938V18.0062C0 19.0266 0.0864844 20.0265 0.250594 21H10.7575L3.32733 28.4296C4.49615 30.0698 5.93016 31.5038 7.57041 32.6727L15 25.2425V35.75C15.9871 35.9154 16.9861 35.999 17.9869 36H18.0124C19.0132 35.9991 20.0122 35.9155 20.9993 35.75V25.2425L28.4296 32.6727C29.2481 32.0896 30.0167 31.4396 30.7275 30.7292L30.7292 30.7275C31.4393 30.0166 32.0891 29.248 32.6721 28.4296L25.2419 21H35.75C35.9135 20.0282 35.9989 19.0312 36 18.0131V17.9869C35.9989 16.9688 35.9135 15.9718 35.75 15Z" fill="#FF4A00"/>
                                </g>
                                <defs>
                                  <clipPath id="clip0_30847_81943">
                                    <rect width="36" height="36" fill="white"/>
                                  </clipPath>
                                </defs>
                            </svg>
                        </a>
                        <h5 class="text-center text-gray-900 text-base font-semibold leading-relaxed">Zapier</h5>
                    </div>
                    <div class="w-full p-6 rounded-2xl border border-gray-200 hover:border-indigo-600 hover:bg-blue-50 transition-all duration-700 ease-in-out flex-col justify-start items-center gap-3 inline-flex">
                        <a href="">
                            <svg xmlns="http://www.w3.org/2000/svg" width="48" height="36" viewBox="0 0 48 36" fill="none">
                                <g clip-path="url(#clip0_30847_81946)">
                                  <path d="M40.1132 3.01496C37.105 1.60648 33.8888 0.582815 30.5264 0C30.1133 0.747198 29.6308 1.75218 29.2983 2.55168C25.7238 2.01371 22.1821 2.01371 18.6735 2.55168C18.341 1.75218 17.8475 0.747198 17.4309 0C14.0647 0.582815 10.8448 1.61022 7.83679 3.02243C1.76968 12.198 0.124979 21.1458 0.947329 29.9664C4.97136 32.9739 8.87112 34.8008 12.7051 35.9963C13.6517 34.6924 14.496 33.3064 15.2233 31.8456C13.8381 31.3188 12.5114 30.6688 11.2578 29.914C11.5903 29.6676 11.9156 29.4098 12.23 29.1446C19.876 32.7236 28.1835 32.7236 35.7383 29.1446C36.0561 29.4098 36.3815 29.6676 36.7104 29.914C35.4531 30.6724 34.1227 31.3226 32.7375 31.8493C33.4649 33.3064 34.3055 34.6962 35.2557 36C39.0933 34.8045 42.9967 32.9776 47.0208 29.9664C47.9858 19.7411 45.3724 10.8755 40.1132 3.01496ZM16.2649 24.5418C13.9697 24.5418 12.0874 22.3973 12.0874 19.7859C12.0874 17.1744 13.9295 15.0262 16.2649 15.0262C18.6005 15.0262 20.4826 17.1707 20.4424 19.7859C20.4462 22.3973 18.6005 24.5418 16.2649 24.5418ZM31.7033 24.5418C29.4079 24.5418 27.5256 22.3973 27.5256 19.7859C27.5256 17.1744 29.3678 15.0262 31.7033 15.0262C34.0386 15.0262 35.9209 17.1707 35.8807 19.7859C35.8807 22.3973 34.0386 24.5418 31.7033 24.5418Z" fill="#5865F2"/>
                                </g>
                                <defs>
                                  <clipPath id="clip0_30847_81946">
                                    <rect width="46.5" height="36" fill="white" transform="translate(0.75)"/>
                                  </clipPath>
                                </defs>
                            </svg>
                        </a>
                        <h5 class="text-center text-gray-900 text-base font-semibold leading-relaxed">Discord</h5>
                    </div>
                </div>
            </div>
        </div>
    </section>