know_more_box.svg

<svg fill="none" viewBox="0 0 600 300" xmlns="http://www.w3.org/2000/svg">
    <foreignObject width="100%" height="100%">

        <div xmlns="http://www.w3.org/1999/xhtml">
            <style>
                .container {
                display:flex;
                margin:20px 0 0 0;
                }

                .item {
                width:25%;
                height:130px;
                display:grid;
                place-items:center;
                }

                .anch{
                color:#F9F9F9;
                font-family:"Segoe UI","Noto Sans",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji";
                margin:20px 0 0 0;
                font-size:14px;
                }
            </style>
            <div class="container">

                <div
                    class="item">
                    <svg width="65" height="65" viewBox="0 0 65 65" fill="none"
                        xmlns="http://www.w3.org/2000/svg">
                        <circle cx="32.5" cy="32.5736" r="32" fill="#D9D9D9" />
                        <path
                            d="M25.6123 19.7836C28.5756 19.7836 31.0001 22.1791 31.0001 25.107C31.0001 28.0349 28.5756 30.4305 25.6123 30.4305C22.649 30.4305 20.2245 28.0349 20.2245 25.107C20.2245 22.1791 22.649 19.7836 25.6123 19.7836ZM25.6123 18.5737C21.9633 18.5737 19 21.5016 19 25.107C19 28.7124 21.9633 31.6403 25.6123 31.6403C29.2613 31.6403 32.2246 28.7124 32.2246 25.107C32.2246 21.5016 29.2613 18.5737 25.6123 18.5737Z"
                            fill="#5452F6" />
                        <path
                            d="M41.041 35.028C44.0043 35.028 46.4288 37.4235 46.4288 40.3514C46.4288 43.2793 44.0043 45.6748 41.041 45.6748C38.0777 45.6748 35.6532 43.2793 35.6532 40.3514C35.6532 37.4235 38.0777 35.028 41.041 35.028ZM41.041 33.8181C37.392 33.8181 34.4287 36.746 34.4287 40.3514C34.4287 43.9568 37.392 46.8847 41.041 46.8847C44.69 46.8847 47.6533 43.9568 47.6533 40.3514C47.6533 36.746 44.69 33.8181 41.041 33.8181Z"
                            fill="#5452F6" />
                        <path d="M34.4287 18.5736L47.6533 31.6402H34.4287V18.5736Z" fill="#5452F6" />
                        <path d="M32.2246 33.818H19V46.8846H32.2246V33.818Z" fill="#5452F6" />
                    </svg>
                    <a href="https://www.covalent.xyz/what-is-covalent/" class="anch">What
                        is Covalent</a>
                </div>

                <div
                    class="item">
                    <svg width="65" height="65" viewBox="0 0 65 65" fill="none"
                        xmlns="http://www.w3.org/2000/svg">
                        <circle cx="32.4522" cy="32.5736" r="32" fill="#5452F6" />
                        <rect x="13.4839" y="11.5736" width="61.0638" height="41.083" rx="2"
                            fill="#5552FF" />
                        <path
                            d="M13.4839 16.8182H74.5478V50.6566C74.5478 51.7612 73.6524 52.6566 72.5478 52.6566H15.4839C14.3794 52.6566 13.4839 51.7612 13.4839 50.6566V16.8182Z"
                            fill="#0F0F32" />
                        <ellipse cx="16.9735" cy="14.1959" rx="0.872341" ry="0.874107"
                            fill="#D9D9D9" />
                        <ellipse cx="20.4626" cy="14.1959" rx="0.872341" ry="0.874107"
                            fill="#AEB6FF" />
                        <ellipse cx="23.9522" cy="14.1959" rx="0.872341" ry="0.874107"
                            fill="#DAC3FF" />
                        <path
                            d="M28.9839 24.012L31.7291 26.8544L28.9839 29.6969L30.3565 31.113L34.4839 26.8544L30.3565 22.5958L28.9839 24.012Z"
                            fill="#6D7CFF" />
                        <path d="M23.4839 32.0338L27.9839 22.5338" stroke="#6D7CFF"
                            stroke-linejoin="round" />
                        <path
                            d="M22.4839 24.012L19.7388 26.8544L22.4839 29.6969L21.1114 31.113L16.9839 26.8544L21.1114 22.5958L22.4839 24.012Z"
                            fill="#6D7CFF" />
                    </svg>
                    <a href="https://www.covalent.xyz/navigating-the-modern-hpc-landscape/"
                        class="anch">Covalent in the era of cloud-HPC</a>
                </div>

                <div
                    class="item">
                    <svg width="65" height="65" viewBox="0 0 65 65" fill="none"
                        xmlns="http://www.w3.org/2000/svg">
                        <circle cx="32.5" cy="34.5492" r="32" fill="#6978FF" />
                        <path d="M2 55.4552L2.00011 23.4172L60.5448 55.4552H2Z" fill="#5552FF"
                            stroke="#AEB6FF" />
                        <path d="M8.71 49.69L8.71005 34.3959L36.7492 49.69H8.71Z" fill="#6978FF"
                            stroke="#AEB6FF" />
                        <line x1="5.16" y1="35.8836" x2="2.11" y2="35.8836" stroke="#AEB6FF" />
                        <line x1="9.49526" y1="27.0823" x2="8.03935" y2="29.7624" stroke="#AEB6FF" />
                        <line x1="5.16" y1="40.1536" x2="2.11" y2="40.1536" stroke="#AEB6FF" />
                        <line x1="13.2473" y1="29.1205" x2="11.7914" y2="31.8006" stroke="#AEB6FF" />
                        <line x1="5.16" y1="44.4236" x2="2.11" y2="44.4236" stroke="#AEB6FF" />
                        <line x1="16.9993" y1="31.1587" x2="15.5434" y2="33.8388" stroke="#AEB6FF" />
                        <line x1="5.16" y1="48.6936" x2="2.11" y2="48.6936" stroke="#AEB6FF" />
                        <line x1="20.7517" y1="33.1972" x2="19.2957" y2="35.8773" stroke="#AEB6FF" />
                        <line x1="24.5037" y1="35.2354" x2="23.0478" y2="37.9155" stroke="#AEB6FF" />
                        <line x1="28.2557" y1="37.2737" x2="26.7998" y2="39.9538" stroke="#AEB6FF" />
                        <path
                            d="M32.5 11.9613L51.5 0.573608L70.5 11.9613L51.5 23.6486V45.5248L32.5 35.0362V11.9613Z"
                            fill="#4541F4" />
                        <path
                            d="M32.5 11.9613L51.5 0.573608L70.5 11.9613L51.5 23.6486M32.5 11.9613L51.5 23.6486M32.5 11.9613V35.0362L51.5 45.5248M51.5 23.6486V45.5248M51.5 45.5248L70.5 35.0362"
                            stroke="#AEB6FF" stroke-linejoin="round" />
                        <path d="M70.5 34.9916L70.5 11.9273" stroke="#AEB6FF" stroke-width="0.5"
                            stroke-dasharray="5 5" />
                    </svg>
                    <a
                        href="https://docs.covalent.xyz/docs/user-documentation/concepts/covalent-basics/"
                        class="anch">Basic Concepts of Covalent</a>
                </div>

                <div
                    class="item">
                    <svg width="65" height="65" viewBox="0 0 65 65" fill="none"
                        xmlns="http://www.w3.org/2000/svg">
                        <circle cx="47.5" cy="33.5736" r="32" fill="#B1B9FF" />
                        <rect x="-0.35" y="0.35" width="70.1615" height="12.3154" rx="1.65"
                            transform="matrix(-1 0 0 1 70.6613 32.3121)" fill="#6D7CFF"
                            stroke="#6D7CFF" stroke-width="0.7" />
                        <rect x="-0.35" y="0.35" width="51.3615" height="9.42308" rx="1.65"
                            transform="matrix(-1 0 0 1 70.6613 33.7582)" fill="#6D7CFF"
                            stroke="#6D7CFF" stroke-width="0.7" />
                        <path
                            d="M71.3613 25.0813C71.3613 21.4872 68.4477 18.5736 64.8536 18.5736H0.499786V31.589H64.8536C68.4477 31.589 71.3613 28.6754 71.3613 25.0813Z"
                            fill="#5552FF" />
                        <path
                            d="M53.2844 25.0813C53.2844 22.2859 51.0183 20.0198 48.2229 20.0198H0.499779V30.1429H48.2229C51.0183 30.1429 53.2844 27.8767 53.2844 25.0813Z"
                            fill="#6D7CFF" />
                        <path
                            d="M62.3344 56.1736C62.3344 51.1754 58.2826 47.1236 53.2844 47.1236H0.8498V65.2236H53.2844C58.2826 65.2236 62.3344 61.1718 62.3344 56.1736Z"
                            fill="#5552FF" stroke="#5552FF" stroke-width="0.7" />
                        <path
                            d="M60.5152 56.1736C60.5152 52.1802 57.2778 48.9428 53.2844 48.9428H0.499783V63.4044H53.2844C57.2778 63.4044 60.5152 60.1671 60.5152 56.1736Z"
                            fill="#6D7CFF" />
                        <path
                            d="M51.8383 51.3351C52.1144 51.3351 52.3383 51.559 52.3383 51.8351C52.3383 52.1113 52.1144 52.3351 51.8383 52.3351L51.8383 51.3351ZM51.8383 52.3351L6.28441 52.3351L6.28441 51.3351L51.8383 51.3351L51.8383 52.3351Z"
                            fill="#CBCBD7" />
                        <path
                            d="M48.2229 22.4121C48.499 22.4121 48.7229 22.6359 48.7229 22.9121C48.7229 23.1882 48.499 23.4121 48.2229 23.4121L48.2229 22.4121ZM48.2229 23.4121L2.66902 23.4121L2.66902 22.4121L48.2229 22.4121L48.2229 23.4121Z"
                            fill="#CBCBD7" />
                        <path
                            d="M53.2844 55.6736C53.5605 55.6736 53.7844 55.8975 53.7844 56.1736C53.7844 56.4498 53.5605 56.6736 53.2844 56.6736L53.2844 55.6736ZM53.2844 56.6736L6.28439 56.6736L6.28439 55.6736L53.2844 55.6736L53.2844 56.6736Z"
                            fill="#CBCBD7" />
                        <path
                            d="M49.669 24.5813C49.9451 24.5813 50.169 24.8052 50.169 25.0813C50.169 25.3574 49.9451 25.5813 49.669 25.5813L49.669 24.5813ZM49.669 25.5813L2.66901 25.5813L2.66901 24.5813L49.669 24.5813L49.669 25.5813Z"
                            fill="#CBCBD7" />
                        <path
                            d="M51.8383 60.0121C52.1144 60.0121 52.3383 60.2359 52.3383 60.5121C52.3383 60.7882 52.1144 61.0121 51.8383 61.0121L51.8383 60.0121ZM51.8383 61.0121L6.28441 61.0121L6.28441 60.0121L51.8383 60.0121L51.8383 61.0121Z"
                            fill="#CBCBD7" />
                        <path
                            d="M48.2229 26.7505C48.499 26.7505 48.7229 26.9744 48.7229 27.2505C48.7229 27.5267 48.499 27.7505 48.2229 27.7505L48.2229 26.7505ZM48.2229 27.7505L2.66902 27.7505L2.66902 26.7505L48.2229 26.7505L48.2229 27.7505Z"
                            fill="#CBCBD7" />
                        <rect width="5.06154" height="13.0154"
                            transform="matrix(-1 0 0 1 17.8536 32.3121)" fill="#5552FF" />
                        <rect width="5.06154" height="13.0154"
                            transform="matrix(-1 0 0 1 8.45364 32.3121)" fill="#5552FF" />
                        <circle cx="2.16923" cy="2.16923" r="2.16923"
                            transform="matrix(-1 0 0 1 61.2383 22.9121)" fill="#D9D9D9" />
                    </svg>
                    <a
                        href="https://github.com/AgnostiqHQ/covalent/blob/develop/README.md#how-does-it-work"
                        class="anch">How does Covalent work?</a>
                </div>
            </div>

        </div>
    </foreignObject>
</svg> 

