update ui

aura-nw · Jun 21, 2024 · ea43137 · ea43137
1 parent 0708c7f
commit ea43137
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 24 deletions.
diff --git a/src/app/get-aura/deposit-aura/deposit.tsx b/src/app/get-aura/deposit-aura/deposit.tsx
@@ -271,11 +271,7 @@ function Deposit() {
                     </div>
                   )}
                   <span className="form-text-des">
-                    Balance: {_amount?.toString()}{" "}
-                    {_symbol
-                      ? _symbol?.toString().charAt(0).toUpperCase() +
-                        _symbol?.toString().slice(1)
-                      : ""}
+                    Balance: {_amount?.toString()} {_symbol?.toString()}
                   </span>
                 </div>
                 <div className="mb-9">

diff --git a/src/app/get-aura/page.tsx b/src/app/get-aura/page.tsx
@@ -6,8 +6,12 @@ import arrowRight from "@/assets/images/img_arrow_right.svg";
 import arrowRight_orange from "@/assets/images/arrowRight_orange.svg";
 import Link from "next/link";
 import { PAGE_ROUTE } from "@/common";
+import { useEffect } from "react";
 
 function GetAura() {
+  useEffect(() => {
+    document.title = "Get AURA";
+  }, []);
   return (
     <div className="mb-[80px]">
       <div className="main-container">
@@ -16,11 +20,11 @@ function GetAura() {
             <div className="flex flex-col items-center gap-16">
               <div>
                 <div className="flex flex-col">
-                <h1 className="text-white self-stretch text-center lg:text-center text-[36px] lg:text-[48px] font-semibold leading-[52px] lg:leading-[80px] font-ppmori-semibold">
+                  <h1 className="text-white self-stretch text-center lg:text-center text-[36px] lg:text-[48px] font-semibold leading-[52px] lg:leading-[80px] font-ppmori-semibold">
                     Your Journey Start Here
                   </h1>
                   <div className="title-choose-action">What are you up to?</div>
-                  <div className="flex gap-12 mb-40 flex-col lg:flex-row">
+                  <div className="flex gap-12 mb-[120px] flex-col lg:flex-row">
                     <Link href={PAGE_ROUTE.WITHDRAW_AURA}>
                       <div className="card-tab-wrapper">
                         <div className="mb-12">
@@ -53,7 +57,7 @@ function GetAura() {
                           />
                         </div>
                         <div className="text-white self-stretch font-ppmori-semibold description lg:text-[32px] mb-8">
-                          Deposit AURA from exchanges
+                          Deposit AURA to exchanges
                         </div>
                         <div className="flex items-center gap-2 cursor-pointer">
                           <span className="orange">Go</span>
@@ -66,26 +70,38 @@ function GetAura() {
                       </div>
                     </Link>
                   </div>
-                  <div className="get-more-aura-box">
-                    <div className="text-white self-stretch text-center lg:text-center font-ppmori-semibold description">
-                      More ways to get AURA
-                    </div>
-
-                    <a
-                      href="https://insight.aura.network/full-tutorial-how-to-buy-aura/"
-                      target="_blank"
-                      className="button-border-gradient bg-brand-gradient"
-                    >
-                      <div className="button-border-gradient-inside">
-                        Read article
-                        <Image src={arrowRight} alt="gate.io" height={20} />
-                      </div>
-                    </a>
-                  </div>
                 </div>
               </div>
             </div>
           </div>
+          <div className="get-more-aura-box">
+            <div className="text-[16px] leading-[24px] lg:text-[24px] lg:leading-[40px] font-[600] text-white text-center font-ppmori-semibold">
+              Wanna convert some AURA that you already have to the new AURA EVM?
+            </div>
+
+            <a
+              href="https://halotrade.zone/convert-token"
+              target="_blank"
+              className="button-border-gradient bg-brand-gradient"
+            >
+              <div className="button-border-gradient-inside">
+                Visit Halotrade
+                <Image src={arrowRight} alt="gate.io" height={20} />
+              </div>
+            </a>
+          </div>
+          <div className="mt-[48px] lg:mt-[0px]">
+            <div className="text-[24px] leading-[32px] lg:text-[32px] lg:leading-[40px] font-[400] text-white self-stretch text-center font-ppmori-semibold">
+              For more details,
+              <a
+                href="https://insight.aura.network/full-tutorial-how-to-buy-aura/"
+                target="_blank"
+                className="ml-2 text-[#13B0FF]"
+              >
+                read this article
+              </a>
+            </div>
+          </div>
         </div>
       </div>
     </div>

diff --git a/src/app/get-aura/style.css b/src/app/get-aura/style.css
@@ -251,6 +251,7 @@
     line-height: 16px; /* 133.333% */
   }
 }
+
 @media only screen and (max-width: 767px) {
   .address {
     font-size: 1.5rem;
@@ -274,6 +275,7 @@
 
   .info {
     flex-direction: column;
+    align-items: center;
   }
 
   .get-more-aura-box {