Merge pull request #243 from stabilitydao/platform-pages

0.12.1-alpha: Counter, CountersBlock, platform page update
stabilitydao · Oct 2, 2024 · e4e5534 · e4e5534
2 parents a0b8cfc + 11e7423
commit e4e5534
Show file tree

Hide file tree

Showing 5 changed files with 30 additions and 19 deletions.
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "stability-ui",
   "type": "module",
-  "version": "0.12.0-alpha",
+  "version": "0.12.1-alpha",
   "scripts": {
     "dev": "astro dev",
     "start": "astro dev",

diff --git a/src/modules/Platform/index.tsx b/src/modules/Platform/index.tsx
@@ -61,18 +61,22 @@ const Platform = (): JSX.Element => {
   }
 
   return (
-    <>
-      <h1 className="mb-5 text-[36px]">Platform</h1>
+    <div className="flex flex-col min-[1440px]:min-w-[1338px] gap-[36px]">
+      <h1 className="mb-0 text-[40px] font-bold">Platform</h1>
 
-      <div className="flex flex-wrap mb-4 p-[36px] ">
+      <div className="p-[36px] hidden">
+        Beta coming 2025. Enjoy this MVP (alpha Version) now.
+      </div>
+
+      <div className="flex flex-wrap p-[36px] ">
         {[
           ['AUM', `\$${numberWithSpaces($apiData?.total.tvl || 0)}`,],
           ['Users earned', `\$${numberWithSpaces($apiData?.total.usersEarned.toFixed(0) || 0)}`,],
           ['Vaults', $apiData?.total.activeVaults,],
         ].map(t => (
           <div
             key={t[0]}
-            className="flex w-full sm:w-6/12 md:w-4/12 lg:w-3/12 h-[120px] px-[12px] rounded-full text-gray-200 items-center justify-center flex-col">
+              className="flex w-full sm:w-6/12 md:w-4/12 lg:w-3/12 min-[1440px]:w-4/12 h-[120px] px-[12px] rounded-full text-gray-200 items-center justify-center flex-col">
             <div className="text-[36px]">{t[1]}</div>
             <div className="flex self-center justify-center text-[16px]">{t[0]}</div>
           </div>
@@ -176,7 +180,7 @@ const Platform = (): JSX.Element => {
         })}
       />
 
-      <h2 className="text-3xl text-center mb-3">Software</h2>
+      <h2 className="text-[32px] font-bold text-center mb-0">Software</h2>
       <div className="mb-10 flex items-center gap-2">
         <div className="flex flex-col w-full">
           <a
@@ -220,7 +224,7 @@ const Platform = (): JSX.Element => {
           </a>
         </div>
       </div>
-    </>
+    </div>
   );
 };
 

diff --git a/src/pages/platform.astro b/src/pages/platform.astro
@@ -4,7 +4,7 @@ import Layout from '@layouts/Layout.astro';
 ---
 
 <Layout title="Platform">
-    <div class="platform max-w-[1200px]">
+    <div class="platform">
         <Platform client:only="react" />
     </div>
 </Layout>

diff --git a/src/ui/Counter.tsx b/src/ui/Counter.tsx
@@ -6,16 +6,17 @@ interface ICounterProps {
 
 const Counter: React.FC<ICounterProps> = ({color, name, value}) => {
   return (
-    <div className="flex flex-col rounded-[36px] gap-[12px] p-[24px] bg-[#1F0F50] w-full">
-      <div className="flex items-center gap-[8px]">
+    <div className="flex flex-col rounded-[36px] gap-[6px] w-full">
+      <div className="flex font-semibold text-[28px] text-[#F9F8FA] justify-center">
+        {value}
+      </div>
+      <div className="flex items-center gap-[8px] justify-center">
         <span className="inline-flex w-[10px] h-[10px] rounded-full mt-[2px]" style={{
           backgroundColor: color,
           boxShadow: `0px 0px 0px 3px ${color}40`,
         }}/>
-        <span className="text-[16px] sm:text-[14px] lg:text-[16px] whitespace-nowrap font-normal text-[#A6A0B2]">{name}</span>
-      </div>
-      <div className="flex font-semibold text-[28px] text-[#F9F8FA]">
-        {value}
+        <span
+          className="text-[16px] sm:text-[14px] lg:text-[14px] whitespace-nowrap font-normal text-[#A6A0B2]">{name}</span>
       </div>
     </div>
   )

diff --git a/src/ui/CountersBlock.tsx b/src/ui/CountersBlock.tsx
@@ -10,16 +10,22 @@ interface IProps {
 const CountersBlock: React.FC<IProps> = ({ title, link, linkTitle, counters }) => {
   return (
     <a
-      className="bg-[#130932] hover:bg-[#141033] p-[36px] rounded-[44px] mb-6 flex flex-col"
+      className="bg-[#130932] hover:bg-[#1B0D45] p-[26px] rounded-[44px] mb-6 flex flex-col"
       href={link}
       title={linkTitle}
       key={link}
     >
-      <h3 className="text-[32px] font-bold text-center mb-[32px]">{title}</h3>
-      <div className="flex flex-wrap relative mb-5 justify-center">
+      <h3 className="text-[32px] font-bold text-center mb-[12px] flex items-center justify-center">
+        {title}
+        <svg width="8" height="12" viewBox="0 0 8 12" fill="none" xmlns="http://www.w3.org/2000/svg" className="mt-[8px] ml-2">
+          <path d="M1.5 11L6.5 6L1.5 1" stroke="#F9F8FA" strokeWidth="2" strokeLinecap="round"
+                strokeLinejoin="round"/>
+        </svg>
+      </h3>
+      <div className="flex flex-wrap relative justify-center">
         {counters.map(t => (
-          <div key={t.name} className="flex p-[12px] w-full sm:w-6/12 md:w-4/12 lg:w-3/12">
-            <Counter color={t.color.toString()} value={t.value.toString()} name={t.name.toString()}/>
+          <div key={t.name} className="flex p-[12px] w-full sm:w-6/12 md:w-4/12 lg:w-3/12 min-[1440px]:w-2/12">
+          <Counter color={t.color.toString()} value={t.value.toString()} name={t.name.toString()}/>
           </div>
         ))}
       </div>