Merge pull request #24 from kairosweb3/master

New landing section

Author: hippocampus-web3

components/Card/Card.tsx

@@ -1,20 +1,37 @@
+'use client'
+
 import { type IconClass, Icon } from '../Icon'
 
 interface Props {
   title: string
   iconClass?: IconClass
   children: JSX.Element
+  titleClasses?: string
+  wrapperStyle?: object
 }
 
-export function Card ({ title, iconClass, children }: Props) {
+export function Card ({
+  title,
+  iconClass,
+  children,
+  titleClasses = '',
+  wrapperStyle = {}
+}: Props) {
+  const handleClick = () => {
+    (window as any).$crisp.push(['do', 'chat:open'])
+  }
   return (
-    <div className='flex flex-col pl-4 pt-2 pb-3 pr-1 md:pr-5 text-base border-2 border-primary shadow-xl bg-white'>
-      <header className='flex flex-row pb-1 mb-1 md:mb-3 items-center'>
-        {iconClass && <Icon iconClass={iconClass} className='mr-2 w-5 h-5' />}
-        <p className='font-bold'>{title}</p>
+    <div
+      onClick={() => { handleClick() }}
+      className="flex flex-col pl-4 pt-2 pb-3 pr-1 md:pr-5 text-base border-2 border-primary shadow-xl bg-white cursor-pointer"
+      style={wrapperStyle}
+    >
+      <header className="flex flex-row pb-1 mb-1 md:mb-3 items-center">
+        {iconClass && <Icon iconClass={iconClass} className="mr-2 w-6 h-6" />}
+        <p className={`font-bold ${titleClasses}`}>{title}</p>
       </header>
-      <div className='flex flex-row text-sm'>
-        { iconClass && <div className='min-w-[20px] mr-2'/>}
+      <div className="flex flex-row text-sm">
+        {iconClass && <div className="min-w-[25px] mr-2" />}
         {children}
       </div>
     </div>

components/Crisp.tsx

@@ -0,0 +1,20 @@
+'use client'
+
+import { useEffect } from 'react'
+
+export default function Crisp () {
+  useEffect(() => {
+    (window as any).$crisp = [];
+    (window as any).CRISP_WEBSITE_ID = '0fb81e6a-3f24-495f-81df-5b7d2e497f95';
+    (function () {
+      const d = document
+      const s = d.createElement('script')
+      s.src = 'https://client.crisp.chat/l.js'
+      s.async = Boolean(1)
+      d.getElementsByTagName('head')[0].appendChild(s)
+    })()
+  }, [])
+  return (
+    <div></div>
+  )
+}

components/Icon/Icon.tsx

@@ -6,6 +6,8 @@ import {
   HeartIcon,
   Invader1Icon,
   Invader2Icon,
+  Invader3Icon,
+  Invader4Icon,
   JellyfishIcon,
   LeapWalletIcon,
   LendsIcon,
@@ -15,7 +17,9 @@ import {
   XIcon,
   TelegramIcon,
   CacaoSwapIcon,
-  LeoDexIcon
+  LeoDexIcon,
+  ThorchainIcon,
+  MayachainIcon
 } from './icons'
 import { UfoIcon } from './icons/UfoIcon'
 
@@ -27,6 +31,8 @@ export enum IconClass {
   HEART,
   INVADER1,
   INVADER2,
+  INVADER3,
+  INVADER4,
   JELLYFISH,
   LEAP_WALLET,
   LENDS,
@@ -37,7 +43,9 @@ export enum IconClass {
   UFO,
   X,
   CACAOSWAP,
-  LEODEX
+  LEODEX,
+  THORCHAIN,
+  MAYACHAIN
 }
 
 interface Props {
@@ -53,6 +61,8 @@ export function Icon ({ iconClass, className }: Props) {
   if (iconClass === IconClass.HEART) return <HeartIcon className={className}></HeartIcon>
   if (iconClass === IconClass.INVADER1) return <Invader1Icon className={className}></Invader1Icon>
   if (iconClass === IconClass.INVADER2) return <Invader2Icon className={className}></Invader2Icon>
+  if (iconClass === IconClass.INVADER3) return <Invader3Icon className={className}></Invader3Icon>
+  if (iconClass === IconClass.INVADER4) return <Invader4Icon className={className}></Invader4Icon>
   if (iconClass === IconClass.JELLYFISH) return <JellyfishIcon className={className}></JellyfishIcon>
   if (iconClass === IconClass.LENDS) return <LendsIcon className={className}></LendsIcon>
   if (iconClass === IconClass.LEAP_WALLET) return <LeapWalletIcon className={className}></LeapWalletIcon>
@@ -64,6 +74,7 @@ export function Icon ({ iconClass, className }: Props) {
   if (iconClass === IconClass.X) return <XIcon className={className}></XIcon>
   if (iconClass === IconClass.CACAOSWAP) return <CacaoSwapIcon className={className}></CacaoSwapIcon>
   if (iconClass === IconClass.LEODEX) return <LeoDexIcon className={className}></LeoDexIcon>
-
+  if (iconClass === IconClass.THORCHAIN) return <ThorchainIcon className={className}></ThorchainIcon>
+  if (iconClass === IconClass.MAYACHAIN) return <MayachainIcon className={className}></MayachainIcon>
   return <></>
 }

components/Icon/icons/AsgardexIcon.tsx

@@ -1,12 +1,20 @@
 interface Props {
-  className?: string
+  className?: string;
 }
 
-export function AsgardexIcon ({ className }: Props) {
+export function AsgardexIcon({ className }: Props) {
   return (
-    <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 511.46 511.78' className={className} fill='currentcolor'>
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 511.46 511.78"
+      className={`${className} hover:text-growth`}
+      fill={'currentColor'}
+    >
       <title>Asgardex</title>
-      <path d='M564.16,413.3v15.34a16.89,16.89,0,0,0-.31,2.1,245.07,245.07,0,0,1-5.71,45.32c-12.83,57.12-41.56,104.72-86.55,142.15-44.12,36.72-95.21,56-152.52,58.66a246.21,246.21,0,0,1-66.6-6.06C195.2,657.67,147.65,628.49,110.58,583,70.2,533.47,51.06,476.39,52.81,412.41a240.21,240.21,0,0,1,6.72-50.22c12-49.35,36.28-91.69,73.2-126.5,46.93-44.24,102.91-67.49,167.36-70.15a240.61,240.61,0,0,1,57.41,4.64C411.7,181.09,458,206.6,495.63,247c40.54,43.46,63,95.11,67.64,154.43C563.58,405.37,563.86,409.34,564.16,413.3ZM270,246.77,166.1,425.28c1.8.16,3.2.39,4.59.39,18.06-.06,36.11-.23,54.17-.19a7.9,7.9,0,0,0,7.58-4.31Q245.69,398.4,259,375.7l10.54-18.07c1.14,1.84,2.13,3.38,3.05,5C283.92,382,295.27,401.46,306.49,421a8.75,8.75,0,0,0,8.52,4.87c17.74-.15,35.49-.1,53.23-.16,1.69,0,3.39-.28,5.52-.46Zm104.47,304.1c-.87-1.66-1.57-3.16-2.39-4.58-8.42-14.67-17-29.23-25.19-44-2.55-4.62-5.68-6.27-10.87-6.24-23.09.15-46.17-.07-69.26-.17-.6,0-1.2-.09-2.18-.17,1.27-2.34,2.36-4.45,3.54-6.5q16.43-28.67,32.89-57.3c1.67-2.9,1.94-5.65.24-8.58q-14.51-24.93-29-49.87c-.33-.56-.74-1.07-1.27-1.84-34.3,59.9-68.42,119.45-102.68,179.28Zm-97.94-62.38H482.2L379.77,309.68c-.66,1-1.14,1.59-1.53,2.26Q364,336.47,349.75,361c-1.7,2.93-1.25,5.7.41,8.57q16.15,28,32.18,56c1.41,2.47,2.77,5,4.34,7.79h-2.91q-35.61,0-71.21,0a7.28,7.28,0,0,0-7,4.05c-8.69,15.25-17.47,30.45-26.21,45.68C278.39,484.81,277.51,486.57,276.48,488.49Z' transform='translate(-52.7 -165.35)'/>
+      <path
+        d="M564.16,413.3v15.34a16.89,16.89,0,0,0-.31,2.1,245.07,245.07,0,0,1-5.71,45.32c-12.83,57.12-41.56,104.72-86.55,142.15-44.12,36.72-95.21,56-152.52,58.66a246.21,246.21,0,0,1-66.6-6.06C195.2,657.67,147.65,628.49,110.58,583,70.2,533.47,51.06,476.39,52.81,412.41a240.21,240.21,0,0,1,6.72-50.22c12-49.35,36.28-91.69,73.2-126.5,46.93-44.24,102.91-67.49,167.36-70.15a240.61,240.61,0,0,1,57.41,4.64C411.7,181.09,458,206.6,495.63,247c40.54,43.46,63,95.11,67.64,154.43C563.58,405.37,563.86,409.34,564.16,413.3ZM270,246.77,166.1,425.28c1.8.16,3.2.39,4.59.39,18.06-.06,36.11-.23,54.17-.19a7.9,7.9,0,0,0,7.58-4.31Q245.69,398.4,259,375.7l10.54-18.07c1.14,1.84,2.13,3.38,3.05,5C283.92,382,295.27,401.46,306.49,421a8.75,8.75,0,0,0,8.52,4.87c17.74-.15,35.49-.1,53.23-.16,1.69,0,3.39-.28,5.52-.46Zm104.47,304.1c-.87-1.66-1.57-3.16-2.39-4.58-8.42-14.67-17-29.23-25.19-44-2.55-4.62-5.68-6.27-10.87-6.24-23.09.15-46.17-.07-69.26-.17-.6,0-1.2-.09-2.18-.17,1.27-2.34,2.36-4.45,3.54-6.5q16.43-28.67,32.89-57.3c1.67-2.9,1.94-5.65.24-8.58q-14.51-24.93-29-49.87c-.33-.56-.74-1.07-1.27-1.84-34.3,59.9-68.42,119.45-102.68,179.28Zm-97.94-62.38H482.2L379.77,309.68c-.66,1-1.14,1.59-1.53,2.26Q364,336.47,349.75,361c-1.7,2.93-1.25,5.7.41,8.57q16.15,28,32.18,56c1.41,2.47,2.77,5,4.34,7.79h-2.91q-35.61,0-71.21,0a7.28,7.28,0,0,0-7,4.05c-8.69,15.25-17.47,30.45-26.21,45.68C278.39,484.81,277.51,486.57,276.48,488.49Z"
+        transform="translate(-52.7 -165.35)"
+      />
     </svg>
   )
 }

components/Icon/icons/Invader3Icon.tsx

@@ -0,0 +1,21 @@
+interface Props {
+  className?: string;
+}
+
+export function Invader3Icon({ className }: Props) {
+  return (
+    <svg
+      width="28"
+      height="23"
+      viewBox="0 0 28 23"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+    >
+      <path
+        d="M11.2 9H8.4V14.6H11.2V9ZM19.6 9H16.8V14.6H19.6V9ZM25.2 3.4H28V11.8H25.2V20.2H28V23H22.4V17.4H19.6V20.2H16.8V17.4H11.2V20.2H8.4V17.4H5.6V23H0V20.2H2.8V11.8H0V3.4H2.8V9H5.6V6.2H8.4V3.4H5.6V0.6H8.4V3.4H11.2V6.2H16.8V3.4H19.6V0.6H22.4V3.4H19.6V6.2H22.4V9H25.2V3.4Z"
+        fill="#51A991"
+      />
+    </svg>
+  );
+}

components/Icon/icons/Invader4Icon.tsx

@@ -0,0 +1,21 @@
+interface Props {
+  className?: string;
+}
+
+export function Invader4Icon({ className }: Props) {
+  return (
+    <svg
+      className={className}
+      width="23"
+      height="23"
+      viewBox="0 0 23 23"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M8.4 9V6.2H5.6V9H8.4ZM14 14.6V11.8H8.4V14.6H14ZM16.8 9V6.2H14V9H16.8ZM19.6 6.2H22.4V23H16.8V20.2H19.6V11.8H16.8V14.6H14V17.4H8.4V14.6H5.6V11.8H2.8V20.2H5.6V23H0V6.2H2.8V3.4H5.6V0.6H8.4V3.4H14V0.6H16.8V3.4H19.6V6.2Z"
+        fill="#1BE7B0"
+      />
+    </svg>
+  );
+}

components/Icon/icons/MayachainIcon.tsx

@@ -0,0 +1,60 @@
+interface Props {
+  className?: string;
+}
+
+export function MayachainIcon({ className }: Props) {
+  return (
+    <svg
+      width="90"
+      className='hover:text-enterprise'
+      height="90"
+      viewBox="0 0 90 90"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <mask
+        id="mask0_210_1537"
+        maskUnits="userSpaceOnUse"
+        x="0"
+        y="0"
+        width="90"
+        height="90"
+      >
+        <path
+          d="M45.1021 89.7978C69.8986 89.7978 90 69.6963 90 44.8999C90 20.1034 69.8986 0.00195312 45.1021 0.00195312C20.3057 0.00195312 0.204224 20.1034 0.204224 44.8999C0.204224 69.6963 20.3057 89.7978 45.1021 89.7978Z"
+          fill="white"
+        />
+      </mask>
+      <g mask="url(#mask0_210_1537)">
+        <path
+          d="M0.107788 0H90V89.8903C89.7485 89.8903 89.4971 89.8903 89.2437 89.8903H0.11724V0.756303C0.11724 0.502941 0.11157 0.251471 0.107788 0ZM45.017 39.0441C44.7353 38.7378 44.4025 38.3634 44.0546 38.0023C43.7067 37.6412 43.3343 37.246 42.9542 36.8943C37.2328 31.5567 30.4752 28.8586 22.6361 28.851C21.1822 28.851 20.7284 29.3181 20.7284 30.7569C20.7284 34.8353 20.7284 38.9118 20.7284 42.9882C20.7284 43.4874 20.5847 43.6235 20.0912 43.6216C16.824 43.6008 13.5548 43.6216 10.2857 43.6008C9.79791 43.6008 9.64855 43.7294 9.65044 44.2286C9.66934 48.4866 9.66178 52.737 9.66367 56.9987C9.66367 57.1727 9.68447 57.3447 9.69581 57.5225H23.6345V46.6903C23.7069 46.6706 23.7809 46.6573 23.8557 46.6506C23.9823 46.6542 24.1086 46.6656 24.2338 46.6847C26.0545 46.9635 27.7703 47.7145 29.2103 48.8628C30.6284 49.9973 31.7042 51.4305 32.8027 52.8504C34.8712 55.5107 37.2819 57.7985 40.2448 59.4529C43.2076 61.1074 46.3179 61.4345 49.4074 59.8216C50.7463 59.0997 52.0126 58.2507 53.1889 57.2861C55.2687 55.6279 56.8985 53.5481 58.5076 51.4475C59.867 49.6721 61.478 48.1765 63.6126 47.3408C64.5675 46.9313 65.5871 46.6932 66.6246 46.6374V57.5263H80.5462V43.6084H69.5099V42.8313C69.5099 38.8267 69.5099 34.8214 69.5099 30.8155C69.5099 30.6265 69.5099 30.4204 69.4967 30.2237C69.4823 29.8691 69.3334 29.5332 69.0801 29.2845C68.8268 29.0358 68.4883 28.893 68.1334 28.8851C67.6135 28.8548 67.0916 28.8662 66.5717 28.8851C60.2263 29.0534 54.5256 31.0727 49.5359 34.9884C47.9609 36.2193 46.5485 37.6582 45.017 39.0441Z"
+          fill="currentColor"
+        />
+        <path
+          d="M0.107774 0C0.107774 0.251471 0.117226 0.502941 0.117226 0.756303V89.8828H89.2437C89.4952 89.8828 89.7466 89.8828 90 89.8828C89.983 89.9187 89.966 89.9849 89.9452 89.9868C89.8034 89.9868 89.6578 89.9868 89.5141 89.9868H0C0 60.1481 0 30.3107 0 0.474579C0.0194047 0.313082 0.0555241 0.154038 0.107774 0Z"
+          fill="white"
+        />
+        <path
+          d="M45.0171 39.0443C46.5486 37.6583 47.961 36.2195 49.5341 34.9848C54.5238 31.0691 60.2244 29.0497 66.5698 28.8815C67.0897 28.8663 67.6116 28.855 68.1316 28.8815C68.4864 28.8893 68.825 29.0322 69.0782 29.2809C69.3315 29.5296 69.4804 29.8654 69.4948 30.2201C69.5137 30.4092 69.508 30.6153 69.508 30.8119C69.508 34.8165 69.508 38.8218 69.508 42.8277V43.6048H80.5463V57.5226H66.6265V46.6375C65.589 46.6934 64.5695 46.9314 63.6145 47.3409C61.4893 48.1766 59.8784 49.6722 58.5095 51.4476C56.9118 53.5483 55.2725 55.6281 53.2002 57.2901C52.024 58.2546 50.7577 59.1037 49.4187 59.8256C46.3292 61.4384 43.2435 61.1226 40.2561 59.4569C37.2687 57.7911 34.8826 55.5146 32.8141 52.8544C31.7099 51.4344 30.6341 49.9993 29.2217 48.8668C27.7816 47.7184 26.0658 46.9674 24.2452 46.6886C24.12 46.6695 23.9937 46.6582 23.8671 46.6546C23.7923 46.6613 23.7183 46.6746 23.6458 46.6943V57.5264H9.70529C9.69394 57.3487 9.67315 57.1766 9.67315 57.0027C9.67315 52.7466 9.67315 48.4943 9.65991 44.2325C9.65991 43.7333 9.80739 43.601 10.2952 43.6048C13.5643 43.6237 16.8334 43.6048 20.1007 43.6256C20.5942 43.6256 20.7397 43.4913 20.7379 42.9922C20.7189 38.9157 20.7265 34.8392 20.7379 30.7609C20.7379 29.322 21.1916 28.855 22.6456 28.855C30.4753 28.855 37.2423 31.5607 42.9637 36.8983C43.3418 37.2537 43.7049 37.63 44.0641 38.0062C44.4234 38.3825 44.7353 38.738 45.0171 39.0443ZM56.2444 49.5058C56.146 49.4907 56.0553 49.4718 55.9797 49.4623C53.833 49.2152 51.7603 48.5278 49.8914 47.443C47.6887 46.1857 45.6958 44.6428 44.1379 42.6424C42.8767 41.0201 41.5664 39.464 40.0028 38.1291C35.465 34.2588 30.237 32.1184 24.2717 31.7762C23.7517 31.7459 23.6005 31.8802 23.6042 32.4096C23.6269 35.9642 23.6269 39.5188 23.6042 43.0735C23.6042 43.5594 23.7536 43.7088 24.2225 43.7674C26.9622 44.1153 29.4542 45.1098 31.4717 47.0119C32.7047 48.2134 33.852 49.4997 34.9053 50.8615C36.8414 53.2798 38.9855 55.4466 41.712 56.9516C43.2435 57.7949 44.879 58.3149 46.628 57.7741C47.6052 57.4784 48.5395 57.0564 49.4074 56.5186C52.183 54.764 54.2742 52.3004 56.199 49.6873C56.2241 49.6298 56.2394 49.5684 56.2444 49.5058ZM46.8681 41.489C47.7189 42.2283 48.4185 42.9014 49.1824 43.4932C51.907 45.6033 54.9076 46.9174 58.4471 46.5544C58.8252 46.5146 59.2828 46.4976 59.5816 46.2896C61.5328 44.8877 63.8115 44.0107 66.1992 43.7428C66.4942 43.7088 66.636 43.6086 66.6341 43.2758C66.6252 39.5951 66.6252 35.9125 66.6341 32.2281C66.6341 31.8254 66.4715 31.7365 66.116 31.7743C65.1517 31.8783 64.1799 31.918 63.2231 32.0693C58.0047 32.8955 53.4631 35.1455 49.5813 38.7172C48.6568 39.5623 47.8362 40.5039 46.8681 41.489ZM20.6963 54.643V46.5544C20.568 46.5257 20.4378 46.5061 20.3068 46.4957C17.8658 46.4957 15.4248 46.4957 12.9839 46.4863C12.6057 46.4863 12.5471 46.6621 12.549 46.9798C12.549 49.3848 12.549 51.7899 12.549 54.1968C12.549 54.3367 12.5755 54.4766 12.5906 54.6392L20.6963 54.643ZM77.6591 54.643C77.6723 54.418 77.6912 54.2649 77.6912 54.1004C77.6912 51.7502 77.6912 49.3999 77.7026 47.0497C77.7026 46.5978 77.5608 46.4712 77.1202 46.4825C74.77 46.5014 72.4179 46.4825 70.0677 46.4938C69.8956 46.4938 69.7236 46.5165 69.5534 46.5298V54.643H77.6591Z"
+          fill="white"
+        />
+        <path
+          d="M56.2443 49.5056C56.2395 49.5668 56.2249 49.6268 56.2008 49.6833C54.2761 52.2964 52.1849 54.76 49.4093 56.5146C48.5414 57.0524 47.607 57.4744 46.6298 57.7701C44.8885 58.3109 43.2529 57.7909 41.7139 56.9476C38.9779 55.435 36.8338 53.2758 34.9071 50.8575C33.8538 49.497 32.7064 48.2119 31.4735 47.0117C29.4561 45.1096 26.9641 44.1151 24.2244 43.7672C23.7555 43.7085 23.6042 43.5592 23.6061 43.0732C23.6275 39.5186 23.6275 35.964 23.6061 32.4094C23.6061 31.88 23.7536 31.7457 24.2735 31.776C30.2389 32.1182 35.4706 34.2585 40.0046 38.1289C41.5683 39.4638 42.8786 41.0199 44.1397 42.6422C45.6977 44.6426 47.6906 46.1854 49.8933 47.4428C51.7622 48.5275 53.8348 49.215 55.9815 49.4621C56.0647 49.4716 56.1555 49.4905 56.2443 49.5056Z"
+          fill="currentColor"
+        />
+        <path
+          d="M46.868 41.4887C47.8267 40.5037 48.6567 39.5621 49.5756 38.7169C53.4573 35.1453 57.9989 32.8953 63.2174 32.069C64.1741 31.9177 65.146 31.8799 66.1103 31.774C66.4657 31.7362 66.6302 31.8251 66.6283 32.2278C66.617 35.911 66.617 39.5936 66.6283 43.2755C66.6283 43.6083 66.4884 43.7085 66.1935 43.7425C63.8058 44.0104 61.527 44.8874 59.5758 46.2894C59.2846 46.4974 58.8328 46.5144 58.4414 46.5541C54.8981 46.9171 51.8975 45.6087 49.1767 43.493C48.4185 42.9011 47.7189 42.228 46.868 41.4887Z"
+          fill="currentColor"
+        />
+        <path
+          d="M20.6962 54.6427H12.5962C12.581 54.4801 12.5546 54.3402 12.5546 54.2003C12.5546 51.7933 12.5546 49.3883 12.5546 46.9832C12.5546 46.6656 12.6037 46.4879 12.9894 46.4898C15.4304 46.5049 17.8714 46.4898 20.3123 46.4992C20.4434 46.5096 20.5735 46.5291 20.7018 46.5578L20.6962 54.6427Z"
+          fill="currentColor"
+        />
+        <path
+          d="M77.659 54.6428H69.5533V46.5258C69.7235 46.5125 69.8956 46.4899 70.0676 46.4899C72.4178 46.4899 74.7699 46.4899 77.1202 46.4785C77.5607 46.4785 77.7063 46.6014 77.7025 47.0457C77.6817 49.396 77.6931 51.7462 77.6912 54.0964C77.6912 54.2646 77.6723 54.4216 77.659 54.6428Z"
+          fill="currentColor"
+        />
+      </g>
+    </svg>
+  );
+}

components/Icon/icons/ThorchainIcon.tsx

@@ -0,0 +1,61 @@
+interface Props {
+  className?: string
+  color?: string
+}
+
+export function ThorchainIcon({ className, color }: Props) {
+  return (
+    <svg
+      width="91"
+      height="90"
+      viewBox="0 0 91 90"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className='hover:text-enterprise'
+    >
+      <mask
+        id="mask0_210_1375"
+        maskUnits="userSpaceOnUse"
+        x="0"
+        y="0"
+        width="91"
+        height="90"
+      >
+        <path
+          d="M45.8337 90C70.6866 90 90.8337 69.8528 90.8337 45C90.8337 20.1472 70.6866 0 45.8337 0C20.9809 0 0.83374 20.1472 0.83374 45C0.83374 69.8528 20.9809 90 45.8337 90Z"
+          fill="white"
+        />
+      </mask>
+      <g mask="url(#mask0_210_1375)">
+        <path
+          d="M91.6834 41.9331V48.0668C91.5883 48.5606 91.4503 49.0482 91.4013 49.545C90.4582 59.1698 86.4926 68.249 80.0727 75.4815C73.6528 82.714 65.1081 87.7286 55.6632 89.8067C53.2833 90.3281 50.8482 90.6103 48.4407 91.0028H43.2271C42.7363 90.8854 42.2399 90.7932 41.7397 90.7268C32.1 89.8653 22.9811 85.9721 15.6916 79.606C8.40203 73.2399 3.31661 64.7282 1.16511 55.2923C0.689745 53.2069 0.373866 51.0877 -0.015625 48.9869V41.013C0.0978487 40.4671 0.24813 39.9274 0.315601 39.3784C1.47664 29.9324 5.55104 21.0825 11.9727 14.0585C18.3944 7.03445 26.8444 2.185 36.1488 0.183943C38.682 -0.358891 41.2765 -0.613439 43.8404 -1.00293H47.8274C48.3173 -0.889538 48.8127 -0.801504 49.3117 -0.73918C69.3506 0.763581 86.2336 15.4048 90.5027 35.0265C90.9965 37.3083 91.2939 39.6299 91.6834 41.9331ZM47.5207 44.0277L22.7773 70.7094L22.9858 70.967L59.3465 55.7707L47.5207 44.0277ZM68.3354 18.625L68.1361 18.3428L36.1733 31.6591L47.9592 43.3132L68.3354 18.625Z"
+          fill={'currentColor'}
+        />
+        <path
+          d="M91.6832 41.9331C91.2937 39.6299 90.9962 37.3083 90.5025 35.0265C86.2334 15.3986 69.3412 0.763581 49.3115 -0.73918C48.8125 -0.801504 48.3171 -0.889538 47.8271 -1.00293H91.6832V41.9331Z"
+          fill="white"
+        />
+        <path
+          d="M48.4407 91.0029C50.8482 90.6103 53.2832 90.3282 55.6631 89.8068C65.108 87.7287 73.6527 82.7141 80.0726 75.4816C86.4926 68.2491 90.4582 59.1699 91.4012 49.5451C91.4503 49.0483 91.5883 48.5607 91.6834 48.0669V91.0029H48.4407Z"
+          fill="white"
+        />
+        <path
+          d="M43.8404 -1.00293C41.2765 -0.613439 38.682 -0.358891 36.1488 0.183943C26.8444 2.185 18.3944 7.03445 11.9727 14.0585C5.55104 21.0825 1.47664 29.9324 0.315601 39.3784C0.24813 39.9274 0.0978487 40.4671 -0.015625 41.013V-1.00293H43.8404Z"
+          fill="white"
+        />
+        <path
+          d="M-0.015625 48.9868C0.373866 51.0876 0.689745 53.2068 1.16511 55.2923C3.31661 64.7281 8.40203 73.2399 15.6916 79.606C22.9811 85.9721 32.1 89.8652 41.7397 90.7267C42.2399 90.7932 42.7363 90.8853 43.2271 91.0028H-0.015625V48.9868Z"
+          fill="white"
+        />
+        <path
+          d="M47.5205 44.0278L59.3463 55.7708L22.9856 70.9671L22.7771 70.7095L47.5205 44.0278Z"
+          fill="white"
+        />
+        <path
+          d="M68.3352 18.6253L47.9713 43.3104L36.1731 31.6594L68.1236 18.3462L68.3352 18.6253Z"
+          fill="white"
+        />
+      </g>
+    </svg>
+  );
+}