Update SDK Icons

Author: yashovardhan

src/components/SDKReferenceCards/index.tsx

@@ -247,6 +247,57 @@ const mobileIcons = (
   </div>
 );
 
+const mobileIconsWithoutFlutter = (
+  <div className={styles.platformIconSection}>
+    <div className={styles.platformIconContainer}>
+      <svg
+        width="38"
+        height="38"
+        viewBox="0 0 38 38"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M9.49967 22.9593C9.49967 23.3792 9.33286 23.782 9.03593 24.0789C8.73899 24.3758 8.33627 24.5426 7.91634 24.5426C7.49642 24.5426 7.09369 24.3758 6.79676 24.0789C6.49982 23.782 6.33301 23.3792 6.33301 22.9593V15.8343C6.33301 15.4144 6.49982 15.0117 6.79676 14.7147C7.09369 14.4178 7.49642 14.251 7.91634 14.251C8.33627 14.251 8.73899 14.4178 9.03593 14.7147C9.33286 15.0117 9.49967 15.4144 9.49967 15.8343V22.9593ZM31.6663 22.9593C31.6663 23.3792 31.4995 23.782 31.2026 24.0789C30.9057 24.3758 30.5029 24.5426 30.083 24.5426C29.6631 24.5426 29.2604 24.3758 28.9634 24.0789C28.6665 23.782 28.4997 23.3792 28.4997 22.9593V15.8343C28.4997 15.4144 28.6665 15.0117 28.9634 14.7147C29.2604 14.4178 29.6631 14.251 30.083 14.251C30.5029 14.251 30.9057 14.4178 31.2026 14.7147C31.4995 15.0117 31.6663 15.4144 31.6663 15.8343V22.9593ZM17.4163 31.6669C17.4163 32.0868 17.2495 32.4895 16.9526 32.7864C16.6557 33.0834 16.2529 33.2502 15.833 33.2502C15.4131 33.2502 15.0104 33.0834 14.7134 32.7864C14.4165 32.4895 14.2497 32.0868 14.2497 31.6669V24.5419C14.2497 24.1219 14.4165 23.7192 14.7134 23.4223C15.0104 23.1253 15.4131 22.9585 15.833 22.9585C16.2529 22.9585 16.6557 23.1253 16.9526 23.4223C17.2495 23.7192 17.4163 24.1219 17.4163 24.5419V31.6669ZM23.7497 31.6669C23.7497 32.0868 23.5829 32.4895 23.2859 32.7864C22.989 33.0834 22.5863 33.2502 22.1663 33.2502C21.7464 33.2502 21.3437 33.0834 21.0468 32.7864C20.7498 32.4895 20.583 32.0868 20.583 31.6669V24.5419C20.583 24.1219 20.7498 23.7192 21.0468 23.4223C21.3437 23.1253 21.7464 22.9585 22.1663 22.9585C22.5863 22.9585 22.989 23.1253 23.2859 23.4223C23.5829 23.7192 23.7497 24.1219 23.7497 24.5419V31.6669Z"
+          fill="#7CB342"
+        />
+        <path
+          d="M11.083 14.2505V26.1247C11.083 26.5446 11.2498 26.9473 11.5468 27.2443C11.8437 27.5412 12.2464 27.708 12.6663 27.708H25.333C25.7529 27.708 26.1557 27.5412 26.4526 27.2443C26.7495 26.9473 26.9163 26.5446 26.9163 26.1247V14.2505H11.083ZM18.9997 6.33301C14.2497 6.33301 11.3561 9.21863 11.083 12.6663H26.9163C26.6424 9.21863 23.7497 6.33301 18.9997 6.33301ZM15.833 10.7648C15.623 10.7648 15.4217 10.6814 15.2732 10.5329C15.1247 10.3844 15.0413 10.1831 15.0413 9.97309C15.0413 9.76313 15.1247 9.56176 15.2732 9.4133C15.4217 9.26483 15.623 9.18142 15.833 9.18142C16.043 9.18142 16.2443 9.26483 16.3928 9.4133C16.5413 9.56176 16.6247 9.76313 16.6247 9.97309C16.6247 10.1831 16.5413 10.3844 16.3928 10.5329C16.2443 10.6814 16.043 10.7648 15.833 10.7648ZM22.1663 10.7648C21.9564 10.7648 21.755 10.6814 21.6065 10.5329C21.4581 10.3844 21.3747 10.1831 21.3747 9.97309C21.3747 9.76313 21.4581 9.56176 21.6065 9.4133C21.755 9.26483 21.9564 9.18142 22.1663 9.18142C22.3763 9.18142 22.5777 9.26483 22.7261 9.4133C22.8746 9.56176 22.958 9.76313 22.958 9.97309C22.958 10.1831 22.8746 10.3844 22.7261 10.5329C22.5777 10.6814 22.3763 10.7648 22.1663 10.7648Z"
+          fill="#7CB342"
+        />
+        <path
+          d="M23.75 5.54199L22.4311 7.52037M14.25 5.54199L15.3053 7.19024"
+          stroke="#7CB342"
+          strokeWidth="2"
+          strokeLinecap="round"
+        />
+      </svg>
+    </div>
+    <div className={styles.platformIconContainer}>
+      <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path
+          d="M20.4933 17.5861C20.1908 18.2848 19.8328 18.928 19.418 19.5193C18.8526 20.3255 18.3897 20.8835 18.0329 21.1934C17.4798 21.702 16.8872 21.9625 16.2527 21.9773C15.7972 21.9773 15.2478 21.8477 14.6083 21.5847C13.9667 21.323 13.3771 21.1934 12.838 21.1934C12.2726 21.1934 11.6662 21.323 11.0176 21.5847C10.3679 21.8477 9.84463 21.9847 9.44452 21.9983C8.83602 22.0242 8.22949 21.7563 7.62408 21.1934C7.23767 20.8563 6.75436 20.2786 6.17536 19.4601C5.55415 18.586 5.04342 17.5725 4.64331 16.417C4.21481 15.1689 4 13.9603 4 12.7902C4 11.4498 4.28962 10.2938 4.86973 9.32509C5.32564 8.54696 5.93216 7.93316 6.69127 7.48255C7.45038 7.03195 8.2706 6.80233 9.15391 6.78763C9.63723 6.78763 10.271 6.93714 11.0587 7.23096C11.8441 7.52576 12.3484 7.67526 12.5695 7.67526C12.7348 7.67526 13.295 7.50045 14.2447 7.15195C15.1429 6.82874 15.9009 6.69492 16.5218 6.74764C18.2045 6.88343 19.4686 7.54675 20.3094 8.74177C18.8045 9.6536 18.06 10.9307 18.0749 12.5691C18.0884 13.8452 18.5514 14.9071 19.4612 15.7503C19.8736 16.1417 20.334 16.4441 20.8464 16.6589C20.7353 16.9812 20.618 17.2898 20.4933 17.5861ZM16.6342 2.40011C16.6342 3.40034 16.2687 4.33425 15.5404 5.19867C14.6614 6.22629 13.5982 6.8201 12.4453 6.7264C12.4306 6.60641 12.4221 6.48011 12.4221 6.3474C12.4221 5.38718 12.8401 4.35956 13.5824 3.51934C13.953 3.09392 14.4244 2.74019 14.9959 2.45801C15.5663 2.18005 16.1058 2.02632 16.6132 2C16.628 2.13371 16.6342 2.26744 16.6342 2.4001V2.40011Z"
+          fill="currentColor"
+        />
+      </svg>
+    </div>
+    <div className={styles.platformIconContainer}>
+      <svg
+        width="31"
+        height="28"
+        viewBox="0 0 31 28"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M25.4882 9.06608C25.1583 8.95129 24.8256 8.84495 24.4904 8.74715C24.5467 8.51382 24.5985 8.28331 24.6445 8.05686C25.3999 4.33814 24.9061 1.34226 23.2194 0.355873C21.6022 -0.589741 18.9573 0.396277 16.2863 2.7538C16.023 2.98656 15.7656 3.22603 15.5143 3.47198C15.346 3.30843 15.1748 3.14806 15.0007 2.99094C12.2013 0.470207 9.3953 -0.592197 7.7104 0.397014C6.09465 1.34558 5.61621 4.16191 6.29627 7.68622C6.36393 8.03527 6.44032 8.38252 6.52538 8.72763C6.12819 8.84208 5.74493 8.96391 5.37814 9.09359C2.09601 10.2541 0 12.0728 0 13.9592C0 15.9075 2.25016 17.8618 5.66864 19.0467C5.94578 19.1424 6.22523 19.2311 6.50673 19.3126C6.41531 19.6843 6.33414 20.0585 6.26333 20.4348C5.615 23.898 6.12129 26.6478 7.73268 27.5903C9.397 28.5637 12.1904 27.5633 14.9103 25.152C15.1308 24.9559 15.3465 24.7543 15.5572 24.5474C15.8293 24.8137 16.1088 25.0723 16.3951 25.3228C19.0299 27.622 21.6319 28.5504 23.2418 27.6053C24.9045 26.6291 25.4449 23.6751 24.7433 20.0811C24.6881 19.7996 24.6261 19.5194 24.5574 19.2409C24.7536 19.1819 24.9462 19.1213 25.1339 19.0582C28.6877 17.8641 31 15.9336 31 13.9592C31 12.0659 28.8363 10.235 25.4882 9.06608ZM24.7174 17.7834C24.5479 17.8403 24.374 17.8952 24.1967 17.9486C23.8044 16.689 23.2749 15.3496 22.627 13.9657C23.2453 12.6148 23.7544 11.2926 24.1357 10.0412C24.4528 10.1343 24.7605 10.2324 25.0572 10.3359C27.9259 11.3375 29.6757 12.8182 29.6757 13.9592C29.6757 15.1745 27.7859 16.7522 24.7174 17.7834ZM23.4442 20.342C23.7545 21.9311 23.7987 23.3679 23.5932 24.4913C23.4086 25.5006 23.0374 26.1735 22.5782 26.443C21.6013 27.0165 19.5121 26.2711 17.2589 24.3047C16.9925 24.0718 16.7326 23.8314 16.4794 23.5838C17.353 22.615 18.2259 21.4888 19.078 20.2378C20.5766 20.103 21.9924 19.8824 23.2764 19.5814C23.3382 19.8336 23.3942 20.0872 23.4442 20.342ZM10.5686 26.3439C9.61412 26.6857 8.85389 26.6955 8.39434 26.4268C7.41651 25.8549 7.01 23.647 7.56448 20.6854C7.6304 20.3354 7.70587 19.9873 7.79081 19.6416C9.0606 19.9265 10.4661 20.1314 11.9683 20.2549C12.8261 21.4789 13.7243 22.604 14.6295 23.5891C14.4371 23.7779 14.2402 23.9618 14.0389 24.1408C12.8361 25.207 11.6308 25.9635 10.5686 26.3439ZM6.09707 17.7759C4.58546 17.2519 3.3371 16.5709 2.48145 15.8278C1.71251 15.1601 1.3244 14.4971 1.3244 13.9592C1.3244 12.8144 3.00724 11.3542 5.81407 10.3618C6.15471 10.2415 6.51121 10.1279 6.88115 10.0213C7.26914 11.3009 7.77797 12.6389 8.39204 13.9919C7.76998 15.3649 7.25388 16.7242 6.86214 18.019C6.60519 17.9443 6.35009 17.8633 6.09707 17.7759ZM7.59597 7.42821C7.01339 4.40875 7.40028 2.13105 8.374 1.55938C9.41104 0.950505 11.7043 1.81863 14.1215 3.99526C14.2791 4.13752 14.4342 4.28266 14.5866 4.43061C13.6859 5.41147 12.796 6.52815 11.9458 7.74493C10.4878 7.88198 9.0922 8.10205 7.80909 8.39691C7.73004 8.07592 7.65898 7.75283 7.59597 7.42821ZM20.968 10.7769C20.6649 10.246 20.3506 9.72178 20.0253 9.20461C21.0144 9.33147 21.962 9.49984 22.852 9.70566C22.5848 10.5742 22.2518 11.4821 21.8598 12.4129C21.5733 11.8616 21.276 11.3162 20.968 10.7769ZM15.5149 5.39047C16.1257 6.06161 16.7375 6.81086 17.3392 7.62384C16.1185 7.56538 14.8959 7.56513 13.6752 7.6231C14.2776 6.81761 14.8945 6.06935 15.5149 5.39047ZM10.0268 10.7861C9.72266 11.321 9.43086 11.8631 9.15166 12.4118C8.7661 11.4843 8.43612 10.5722 8.16668 9.69142C9.05115 9.49075 9.99435 9.32668 10.9771 9.20215C10.6482 9.72249 10.3313 10.2507 10.0268 10.7861ZM11.0054 18.8118C9.98999 18.6969 9.03263 18.5413 8.1484 18.346C8.42207 17.4495 8.75932 16.518 9.15323 15.5706C9.43355 16.1197 9.72655 16.6621 10.032 17.1973C10.3461 17.7474 10.6714 18.2863 11.0054 18.8118ZM15.5515 22.6225C14.9237 21.9358 14.2977 21.176 13.6863 20.3588C14.2799 20.3824 14.885 20.3944 15.5 20.3944C16.1319 20.3944 16.7565 20.3801 17.3713 20.3523C16.7676 21.1842 16.1581 21.9451 15.5515 22.6225ZM21.8723 15.5222C22.2867 16.4801 22.6359 17.4066 22.9132 18.2878C22.0145 18.4958 21.044 18.6633 20.0215 18.7877C20.3492 18.261 20.6665 17.7276 20.9732 17.1881C21.2851 16.6396 21.5848 16.0842 21.8723 15.5222ZM19.8261 16.517C19.3565 17.3443 18.8605 18.1559 18.3389 18.9505C17.3941 19.0183 16.4472 19.052 15.5 19.0515C14.5352 19.0515 13.5969 19.0211 12.6933 18.9616C12.1581 18.1689 11.6526 17.3559 11.178 16.5244C10.7057 15.6973 10.2646 14.8523 9.85546 13.9913C10.2635 13.13 10.7034 12.2846 11.1742 11.4569L11.174 11.457C11.6446 10.6291 12.146 9.81956 12.6772 9.03022C13.5991 8.95949 14.5444 8.92265 15.4999 8.92265C16.4597 8.92265 17.4064 8.95986 18.328 9.03108C18.8538 9.81924 19.352 10.626 19.8217 11.4498C20.294 12.2757 20.7397 13.1169 21.1581 13.9722C20.744 14.8363 20.2997 15.6851 19.8261 16.517ZM22.5579 1.51935C23.596 2.1265 23.9997 4.57491 23.3475 7.7857C23.3058 7.99054 23.2591 8.19919 23.2082 8.41079C21.922 8.10966 20.5254 7.88579 19.0632 7.74665C18.2114 6.51649 17.3288 5.39808 16.4427 4.42987C16.6749 4.20287 16.9127 3.98175 17.1557 3.76672C19.4444 1.74691 21.5834 0.9494 22.5579 1.51935ZM15.5 11.1518C17.0288 11.1518 18.2682 12.4088 18.2682 13.9592C18.2682 15.5096 17.0288 16.7666 15.5 16.7666C13.9712 16.7666 12.7318 15.5096 12.7318 13.9592C12.7318 12.4088 13.9712 11.1518 15.5 11.1518Z"
+          fill="#00D8FF"
+        />
+      </svg>
+    </div>
+  </div>
+);
+
 export const pnpweb = (
   <div className={styles.card}>
     <div className={styles.cardContainerIntro}>
@@ -716,7 +767,7 @@ export const mpccorekitjs = (
         tools and flexibility necessary to build advanced, secure, and integrated authentication
         systems. <br />
         <br />
-        Works for Web, React Native & NodeJS environments.
+        Works for Web & NodeJS environments.
       </p>
       {webIcons}
     </div>
@@ -748,14 +799,69 @@ export const mpccorekitjs = (
             >
               Quick Start{chevron}
             </a>
-            <a href={`${baseUrl}sdk/mpc-core-kit`}>SDK Reference{chevron}</a>
-            <a href={`${baseUrl}examples?product=Core+Kit&sdk=MPC+Core+Kit`}>Examples{chevron}</a>
+            <a href={`${baseUrl}sdk/mpc-core-kit/mpc-core-kit-js`}>SDK Reference{chevron}</a>
+            <a href={`${baseUrl}sdk/mpc-core-kit/mpc-core-kit-js/examples`}>Examples{chevron}</a>
           </div>
         </div>
       </div>
     </ul>
   </div>
 );
+
+export const mpccorekitreactnative = (
+  <div className={styles.card}>
+    <div className={styles.cardContainerIntro}>
+      <h3 className={styles.title}>MPC Core Kit React Native SDK</h3>
+      <p>
+        Designed for projects that require a tailored approach to authentication, providing the
+        tools and flexibility necessary to build advanced, secure, and integrated authentication
+        systems. <br />
+        <br />
+        Works for React Native & Expo environments.
+      </p>
+      {mobileIconsWithoutFlutter}
+    </div>
+    <ul className={styles.cardContainer}>
+      <div className={styles.cardContent}>
+        <div className={styles.sdkIconContainer}>
+          <svg
+            viewBox="0 0 20 20"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+            className={styles.sdkIcon}
+          >
+            <path
+              fillRule="evenodd"
+              clipRule="evenodd"
+              d="M4.083 9H6.029C6.118 7.454 6.412 6.03 6.866 4.882C6.13501 5.32992 5.50842 5.92919 5.02838 6.6395C4.54834 7.34982 4.22598 8.1547 4.083 9ZM10 2C7.87827 2 5.84344 2.84285 4.34315 4.34315C2.84285 5.84344 2 7.87827 2 10C2 12.1217 2.84285 14.1566 4.34315 15.6569C5.84344 17.1571 7.87827 18 10 18C12.1217 18 14.1566 17.1571 15.6569 15.6569C17.1571 14.1566 18 12.1217 18 10C18 7.87827 17.1571 5.84344 15.6569 4.34315C14.1566 2.84285 12.1217 2 10 2ZM10 4C9.924 4 9.768 4.032 9.535 4.262C9.297 4.496 9.038 4.885 8.798 5.444C8.409 6.351 8.125 7.586 8.032 9H11.968C11.875 7.586 11.591 6.351 11.202 5.444C10.962 4.884 10.702 4.496 10.465 4.262C10.232 4.032 10.076 4 10 4ZM13.971 9C13.882 7.454 13.588 6.03 13.134 4.882C13.865 5.32992 14.4916 5.92919 14.9716 6.6395C15.4517 7.34982 15.774 8.1547 15.917 9H13.971ZM11.968 11H8.032C8.125 12.414 8.409 13.649 8.798 14.556C9.038 15.116 9.298 15.504 9.535 15.738C9.768 15.968 9.924 16 10 16C10.076 16 10.232 15.968 10.465 15.738C10.703 15.504 10.963 15.115 11.202 14.556C11.591 13.649 11.875 12.414 11.968 11ZM13.134 15.118C13.588 13.971 13.882 12.546 13.971 11H15.917C15.774 11.8453 15.4517 12.6502 14.9716 13.3605C14.4916 14.0708 13.865 14.6701 13.134 15.118ZM6.866 15.118C6.412 13.97 6.118 12.546 6.03 11H4.083C4.22598 11.8453 4.54834 12.6502 5.02838 13.3605C5.50842 14.0708 6.13501 14.6701 6.866 15.118Z"
+              fill="currentColor"
+            />
+          </svg>
+        </div>
+        <div className={styles.cardContentText}>
+          <h3 className={styles.title}>MPC Core Kit React Native SDK</h3>
+          <p>
+            Get the Web3Auth full TSS-MPC Infrastructure deeply integrated within your application.
+          </p>
+          <div className={styles.links}>
+            <a
+              href={`${baseUrl}quick-start?product=MPC_CORE_KIT&sdk=MPC_CORE_KIT_REACT_NATIVE&framework=IOS&stepIndex=0&stepIndex=0`}
+            >
+              Quick Start{chevron}
+            </a>
+            <a href={`${baseUrl}sdk/mpc-core-kit/mpc-core-kit-react-native`}>
+              SDK Reference{chevron}
+            </a>
+            <a href={`${baseUrl}sdk/mpc-core-kit/mpc-core-kit-react-native/examples`}>
+              Examples{chevron}
+            </a>
+          </div>
+        </div>
+      </div>
+    </ul>
+  </div>
+);
+
 export const infrasdks = (
   <div className={styles.card}>
     <div className={styles.cardContainerIntro}>
@@ -764,7 +870,8 @@ export const infrasdks = (
         Low level infrastructure layer SDKs, only to be used for a highly customised usecases,
         guided by the Web3Auth Team.
       </p>
-      {mobileIcons}
+      {webIcons}
+      {mobileIconsWithoutFlutter}
     </div>
     <ul className={styles.cardContainer}>
       <div className={styles.cardContent}>
@@ -906,6 +1013,7 @@ export default function QuickNavigation() {
       {product === sfa && sfaweb}
       {product === sfa && sfamobile}
       {product === mpccorekit && mpccorekitjs}
+      {product === mpccorekit && mpccorekitreactnative}
       {product === infra && infrasdks}
     </div>
   );