Merge pull request #93 from ergoplatform/issue_83/update_get_erg_section

[ISSUE-83] update get erg section
ergoplatform · Nov 24, 2022 · 1ceef43 · 1ceef43
2 parents ebe6cbf + b393036
commit 1ceef43
Show file tree

Hide file tree

Showing 12 changed files with 972 additions and 368 deletions.
diff --git a/components/getErg/GetErgHero.tsx b/components/getErg/GetErgHero.tsx
@@ -36,6 +36,17 @@ const cards = [
     icon: 'UsingErgStoreIt',
     url: '/get-erg/#Wallets',
   },
+  {
+    title: <FormattedMessageFixed defaultMessage="Use it" id="components.getErg.UseIt.title" />,
+    text: (
+      <FormattedMessageFixed
+        defaultMessage="Put your ERG to use today in our growing ecosystem"
+        id="components.getErg.UseIt.text"
+      />
+    ),
+    icon: 'UsingErgUseIt',
+    url: '/ecosystem',
+  },
 ];
 
 function FormattedMessageFixed(props: any) {
@@ -63,14 +74,14 @@ export default function GetErgHero(props: Props) {
             investor - we’ve got you covered.
           </p>
         </div>
-        <div className="flex overflow-x-auto lg:space-x-4 space-x-8 mt-10 no-scrollbar pb-10">
+        <div className="overflow-x-auto lg:gap-4 gap-8 mt-10 no-scrollbar pb-10 grid grid-cols-4 ml-4">
           {cards.map((card: any, i: number) => (
             <Link key={i} href={card.url} passHref>
               <div className="cursor-pointer">
-                <div className="h-[450px] flex dark:hidden items-end using-erg-card dark:using-erg-card p-4 mb-8">
+                <div className="h-[350px] flex dark:hidden items-end using-erg-card dark:using-erg-card p-4 mb-8">
                   {getIconComponentByName(card.icon + 'Light')}
                 </div>
-                <div className="hidden dark:flex h-[450px] items-end using-erg-card dark:using-erg-card p-4 mb-8">
+                <div className="hidden dark:flex h-[350px] items-end using-erg-card dark:using-erg-card p-4 mb-8">
                   {getIconComponentByName(card.icon)}
                 </div>
                 <p className="font-subtitle-3 mb-3">{card.title}</p>

diff --git a/components/home/UsingErg.tsx b/components/home/UsingErg.tsx
@@ -38,6 +38,17 @@ const cards = [
     icon: 'UsingErgStoreIt',
     url: '/get-erg/#Wallets',
   },
+  {
+    title: <FormattedMessageFixed defaultMessage="Use it" id="components.getErg.UseIt.title" />,
+    text: (
+      <FormattedMessageFixed
+        defaultMessage="Put your ERG to use today in our growing ecosystem"
+        id="components.getErg.UseIt.text"
+      />
+    ),
+    icon: 'UsingErgUseIt',
+    url: '/ecosystem',
+  },
 ];
 
 function FormattedMessageFixed(props: any) {
@@ -75,14 +86,14 @@ export default function UsingErg() {
             ></FormattedMessage>
           </p>
         </div>
-        <div className="flex overflow-x-auto lg:space-x-4 space-x-8 mt-10 no-scrollbar pb-10">
+        <div className="lg:grid flex grid-cols-4 grid-rows-1 ml-4 overflow-x-auto lg:gap-4 gap-8 mt-10 no-scrollbar pb-10">
           {cards.map((card: any, i: number) => (
             <Link key={i} href={card.url} passHref>
               <div className="cursor-pointer z-20">
-                <div className="h-[450px] flex dark:hidden items-end using-erg-card dark:using-erg-card p-4 mb-8">
+                <div className="h-[350px] min-w-[238px] flex dark:hidden items-end using-erg-card dark:using-erg-card p-4 mb-8">
                   {getIconComponentByName(card.icon + 'Light')}
                 </div>
-                <div className="hidden dark:flex h-[450px] items-end using-erg-card dark:using-erg-card p-4 mb-8">
+                <div className="hidden dark:flex h-[350px] min-w-[238px] items-end using-erg-card dark:using-erg-card p-4 mb-8">
                   {getIconComponentByName(card.icon)}
                 </div>
                 <p className="font-subtitle-3 mb-3">{card.title}</p>

diff --git a/components/icons/UsingErgBuyIt.js b/components/icons/UsingErgBuyIt.js
diff --git a/components/icons/UsingErgBuyItLight.js b/components/icons/UsingErgBuyItLight.js
@@ -1,7 +1,14 @@
 import * as React from 'react';
 
 const SvgUsingErgBuyItLight = (props) => (
-  <svg width={224} height={414} fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+  <svg
+    width="auto"
+    height="auto"
+    fill="none"
+    viewBox="0 0 224 414"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
     <g clipPath="url(#using-erg-buy-it-light_svg__a)">
       <path
         fillRule="evenodd"

diff --git a/components/icons/UsingErgMineIt.js b/components/icons/UsingErgMineIt.js
diff --git a/components/icons/UsingErgMineItLight.js b/components/icons/UsingErgMineItLight.js
@@ -1,7 +1,14 @@
 import * as React from 'react';
 
 const SvgUsingErgMineItLight = (props) => (
-  <svg width={258} height={397} fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+  <svg
+    width="auto"
+    height="auto"
+    viewBox="0 0 258 397"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
     <g clipPath="url(#using-erg-mine-it-light_svg__a)">
       <path
         fillRule="evenodd"

diff --git a/components/icons/UsingErgStoreIt.js b/components/icons/UsingErgStoreIt.js
diff --git a/components/icons/UsingErgStoreItLight.js b/components/icons/UsingErgStoreItLight.js
@@ -1,7 +1,14 @@
 import * as React from 'react';
 
 const SvgUsingErgStoreItLight = (props) => (
-  <svg width={258} height={388} fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+  <svg
+    width="auto"
+    height="auto"
+    viewBox="0 0 258 388"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
     <path
       fillRule="evenodd"
       clipRule="evenodd"

diff --git a/components/icons/UsingErgUseIt.js b/components/icons/UsingErgUseIt.js
@@ -0,0 +1,231 @@
+import * as React from 'react';
+
+const SvgUsingErgUseIt = (props) => (
+  <svg
+    width="auto"
+    height="auto"
+    viewBox="0 0 259 412"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M126 137.842H218.415V3.05176e-05H126.119L126 137.842Z"
+      fill="url(#paint0_linear_2316_23249)"
+    />
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M171.754 91.4067C171.25 91.3982 170.749 91.4785 170.273 91.6439L139.547 104.393C139.097 104.579 138.69 104.857 138.353 105.209C138.016 105.562 137.757 105.981 137.591 106.439L124.851 137.186C124.632 137.649 124.518 138.156 124.518 138.668C124.518 139.181 124.632 139.687 124.851 140.151L137.591 170.898C137.759 171.345 138.021 171.75 138.358 172.088C138.695 172.425 139.1 172.687 139.547 172.855L170.273 185.604C170.735 185.825 171.242 185.936 171.754 185.93C172.238 185.937 172.716 185.825 173.147 185.604L203.873 172.855C204.331 172.689 204.75 172.429 205.102 172.092C205.454 171.755 205.732 171.348 205.917 170.898L218.658 140.151C219.004 139.193 219.004 138.144 218.658 137.186L205.917 106.439C205.734 105.977 205.458 105.557 205.106 105.205C204.755 104.853 204.335 104.577 203.873 104.393L173.147 91.6439C172.703 91.474 172.23 91.3933 171.754 91.4067ZM171.754 99.9755L199.043 111.272L210.332 138.58L199.043 165.887L171.754 177.243L144.465 165.887L133.088 138.58L144.465 111.272L171.754 99.9755Z"
+      fill="#121212"
+    />
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M210.332 138.579L199.043 111.242L171.754 99.9755L144.465 111.242L133.088 138.579L144.465 165.887L171.754 177.243L199.043 165.887L210.332 138.579Z"
+      fill="#121212"
+    />
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M168.732 144.361H187.043V152.871H156.466V145.191L168.466 131.849L156.554 119.337V111.657H187.043V120.167H169.147L180.258 131.79L168.732 144.361Z"
+      fill="white"
+    />
+    <path
+      d="M171.754 85.032C171.245 85.0549 170.744 85.1653 170.273 85.3581L139.547 98.1076C139.101 98.2755 138.695 98.537 138.358 98.8745C138.021 99.212 137.759 99.6177 137.591 100.064L124.851 130.9C124.645 131.331 124.539 131.802 124.539 132.279C124.539 132.756 124.645 133.227 124.851 133.658L137.503 164.612C137.665 165.062 137.925 165.47 138.263 165.808C138.601 166.146 139.009 166.406 139.458 166.569L170.184 179.348C170.66 179.527 171.159 179.637 171.665 179.674C172.144 179.643 172.615 179.533 173.058 179.348L203.784 166.569C204.245 166.408 204.666 166.15 205.019 165.813C205.371 165.475 205.648 165.066 205.828 164.612L218.569 133.776C218.895 132.886 218.895 131.909 218.569 131.019L205.828 100.183C205.643 99.7323 205.365 99.3254 205.013 98.9884C204.661 98.6514 204.242 98.3918 203.784 98.2261L173.058 85.4767C172.655 85.2475 172.213 85.0967 171.754 85.032ZM171.754 93.6897L199.043 104.957L210.332 132.294L199.043 159.601L171.754 170.868L144.465 159.601L133.088 132.294L144.465 104.957L171.754 93.6897Z"
+      fill="white"
+    />
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M2 407.183L21.3559 407.686C37.8663 367.51 52.3314 331.833 65.5812 292.722C70.2349 278.985 73.4361 269.037 76.4595 261.102C82.3879 246.003 87.2491 238.986 100.647 229.423C116.446 218.32 134.409 210.326 149.556 198.661C155.484 194.072 152.075 187.47 146.829 192.207C142.533 196.155 137.763 199.556 132.63 202.332C122.878 207.958 112.919 212.043 100.499 218.409C80.3723 228.683 71.3019 239.134 63.9508 265.78C48.9225 320.227 30.1002 356.229 2 407.183Z"
+      fill="url(#paint1_linear_2316_23249)"
+    />
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M41.4827 408.249L64.7216 408.811L77.2304 368.398C82.7733 350.427 83.8404 336.955 66.678 325.853C60.4579 322.11 53.8101 319.128 46.8774 316.971C44.595 322.892 44.5951 322.507 42.0755 328.251C64.9588 339.827 65.1069 349.39 56.5405 372.661L41.4827 408.249Z"
+      fill="url(#paint2_linear_2316_23249)"
+    />
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M43.024 408.249L49.1598 408.427L63.1209 369.701C72.0134 345.127 68.1304 339.413 42.194 327.984C40.7416 331.508 41.2159 330.353 39.6746 333.906C62.795 340.923 65.107 348.709 57.7262 368.694L43.024 408.249Z"
+      fill="url(#paint3_linear_2316_23249)"
+    />
+    <path
+      d="M2 407.183C30.1002 356.229 48.9225 320.227 63.9508 265.839C71.3019 239.193 80.3723 228.683 100.499 218.468C112.919 212.103 122.878 208.017 132.63 202.392C139.804 198.462 146.267 193.358 151.749 187.292C153.794 185.16 155.602 183.532 157.144 183.443C161.057 183.206 164.258 188.92 162.539 196.026C160.921 201.25 157.957 205.957 153.943 209.675C145.939 217.669 135.387 221.34 126.91 228.535C119.054 235.137 124.864 240.111 135.239 235.048C147.896 229.127 156.907 225.189 164.406 221.991C197.842 208.017 208.246 193.746 229.084 178.38C234.627 174.295 244.705 173.258 246.009 182.052C255.554 180.038 260.83 186.226 253.597 193.332L246.246 200.438C251.819 200.615 254.338 206.359 248.796 212.428L234.39 224.271C241.681 224.597 244.053 227.676 243.282 232.176C242.689 235.611 236.494 239.933 233.797 241.976L185.303 278.393C174.781 284.314 164.228 290.236 153.676 296.157C108.799 321.382 110.518 327.037 99.3132 376.747L91.8732 409.552"
+      stroke="white"
+      stroke-width="3"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M246.573 181.992C236.85 184.953 223.185 198.987 214.352 206.152C203.466 214.803 191.692 222.276 179.227 228.446"
+      stroke="white"
+      stroke-width="3"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M246.247 200.526C238.569 201.355 233.975 205.412 228.462 210.001C221.763 215.537 209.58 225.011 203.029 229.6C196.331 234.41 189.184 238.565 181.687 242.006"
+      stroke="white"
+      stroke-width="3"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M236.761 224.301C231.814 224.928 227.141 226.928 223.274 230.074C202.525 246.565 202.851 247.157 177.745 259.977"
+      stroke="white"
+      stroke-width="3"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M124.272 231.377C114.786 244.878 120.27 263.56 101.299 275.166"
+      stroke="white"
+      stroke-width="3"
+      stroke-miterlimit="10"
+      stroke-linecap="round"
+    />
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M74.7404 265.928C70.887 279.311 71.1538 286.653 78.001 304.062C72.5469 300.48 69.2567 293.759 62.4688 292.634L65.5812 275.491L74.7404 265.928Z"
+      fill="white"
+    />
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M121.752 316.793C120.833 307.644 124.034 304.95 131.8 299.828L145.613 290.946C153.943 285.558 160.671 282.686 168.675 290.709C173.091 295.18 170.483 297.874 166.629 300.184C155.277 307.112 144.072 314.04 132.779 321.234C128.955 324.076 122.641 326.119 121.752 316.793Z"
+      fill="white"
+      stroke="white"
+      stroke-miterlimit="10"
+    />
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M121.93 318.096L125.427 323.336H116.594L121.93 318.096Z"
+      fill="white"
+      stroke="white"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M123.61 52.2047C127.261 52.2047 130.22 49.2487 130.22 45.6024C130.22 41.956 127.261 39 123.61 39C119.959 39 117 41.956 117 45.6024C117 49.2487 119.959 52.2047 123.61 52.2047Z"
+      fill="white"
+    />
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M244.482 114.032H253.226C254.827 114.032 256.191 116.193 256.191 118.858V133.661C256.191 136.326 254.916 138.487 253.226 138.487H244.482C242.911 138.487 241.518 136.326 241.518 133.661V118.858C241.637 116.193 242.793 114.032 244.482 114.032Z"
+      fill="#FF5E18"
+      stroke="white"
+      stroke-width="3"
+      stroke-miterlimit="10"
+    />
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M91.6668 85.032H107.288C108.803 85.225 110.185 85.9948 111.146 87.1807C112.107 88.3666 112.572 89.8771 112.446 91.3975V110.938C112.572 112.458 112.107 113.969 111.146 115.155C110.185 116.341 108.803 117.111 107.288 117.304H91.6668C90.1571 117.104 88.7824 116.331 87.8276 115.146C86.8729 113.961 86.4114 112.454 86.5389 110.938V91.3975C86.4114 89.8816 86.8729 88.375 87.8276 87.1898C88.7824 86.0047 90.1571 85.232 91.6668 85.032V85.032Z"
+      fill="#FF5E18"
+      stroke="#FF5E18"
+      stroke-miterlimit="10"
+    />
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M94.7791 91.6343H104.027C104.911 91.7597 105.712 92.2205 106.264 92.9209C106.816 93.6212 107.077 94.5071 106.991 95.3944V106.911C107.077 107.799 106.816 108.685 106.264 109.385C105.712 110.085 104.911 110.546 104.027 110.672H94.7791C93.8955 110.546 93.0944 110.085 92.5424 109.385C91.9903 108.685 91.7298 107.799 91.8149 106.911V95.3944C91.7298 94.5071 91.9903 93.6212 92.5424 92.9209C93.0944 92.2205 93.8955 91.7597 94.7791 91.6343Z"
+      fill="white"
+      stroke="#FF5E18"
+      stroke-miterlimit="10"
+    />
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M104.353 103.151H113.572C114.459 103.27 115.264 103.729 115.818 104.431C116.371 105.133 116.629 106.023 116.536 106.911V118.429C116.629 119.317 116.371 120.207 115.818 120.909C115.264 121.611 114.459 122.07 113.572 122.189H104.353C103.467 122.07 102.661 121.611 102.108 120.909C101.554 120.207 101.296 119.317 101.389 118.429V106.911C101.296 106.023 101.554 105.133 102.108 104.431C102.661 103.729 103.467 103.27 104.353 103.151Z"
+      fill="white"
+      stroke="#FF5E18"
+      stroke-width="3"
+      stroke-miterlimit="10"
+    />
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M99.8004 150.032H106.914C108.189 150.032 109.226 152.549 109.226 155.657V172.741C109.226 175.849 108.189 178.366 106.914 178.366H99.8004C98.5555 178.366 97.5181 175.849 97.5181 172.741V155.657C97.5773 152.549 98.5555 150.032 99.8004 150.032Z"
+      fill="#FF5E18"
+      stroke="#FF5E18"
+      stroke-miterlimit="10"
+    />
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M216.358 54H226.733C227.698 54.083 228.591 54.5432 229.218 55.2806C229.846 56.018 230.156 56.973 230.082 57.9377V69.7805C230.156 70.7453 229.846 71.7002 229.218 72.4376C228.591 73.175 227.698 73.6352 226.733 73.7183H216.358C215.396 73.6279 214.507 73.1655 213.882 72.4299C213.256 71.6942 212.943 70.7436 213.009 69.7805V57.9377C212.943 56.9747 213.256 56.024 213.882 55.2883C214.507 54.5527 215.396 54.0904 216.358 54V54Z"
+      fill="#FF5E18"
+      stroke="#FF5E18"
+      stroke-miterlimit="10"
+    />
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M101.566 247.068C98.1276 255.714 91.6658 263.974 83.5737 265.188C71.391 267.142 69.6718 246.239 82.3583 233.834C96.4084 220.126 110.725 223.886 101.566 247.068Z"
+      fill="#FF5E18"
+    />
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M155.01 234.663C166.451 230.666 169.475 239.874 169.979 252.22C170.107 255.413 169.494 258.593 168.188 261.51C166.882 264.427 164.918 267.003 162.45 269.037C156.521 273.863 125.665 293.848 118.817 295.683C109.717 297.963 104.412 287.275 114.786 278.955C121.248 273.656 124.775 268.415 128.214 256.01C129.066 252.076 130.948 248.439 133.668 245.47C137.432 241.591 150.208 236.38 155.01 234.663Z"
+      fill="#FF5E18"
+    />
+    <defs>
+      <linearGradient
+        id="paint0_linear_2316_23249"
+        x1="117"
+        y1="17"
+        x2="116.926"
+        y2="224"
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop stop-color="#FF5E18" stop-opacity="0" />
+        <stop offset="1" stop-color="#FF5E18" />
+      </linearGradient>
+      <linearGradient
+        id="paint1_linear_2316_23249"
+        x1="60.0195"
+        y1="292.031"
+        x2="51.0195"
+        y2="397.531"
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop stop-color="white" />
+        <stop offset="1" stop-color="#343434" stop-opacity="0" />
+      </linearGradient>
+      <linearGradient
+        id="paint2_linear_2316_23249"
+        x1="56.5178"
+        y1="326.032"
+        x2="76.0178"
+        y2="401.532"
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop stop-color="#FF5E18" />
+        <stop offset="1" stop-color="#343434" stop-opacity="0" />
+      </linearGradient>
+      <linearGradient
+        id="paint3_linear_2316_23249"
+        x1="53.5183"
+        y1="342.532"
+        x2="53.5073"
+        y2="392.532"
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop stop-color="white" />
+        <stop offset="1" stop-color="#343434" stop-opacity="0" />
+      </linearGradient>
+    </defs>
+  </svg>
+);
+
+export default SvgUsingErgUseIt;