Merge pull request #387 from Libertum-Project/fix/WEB-83-Fix-layout-o…

…f-some-pages Fix/web 83 fix layout of some pages
Libertum-Project · Dec 13, 2024 · 151bbaf · 151bbaf
2 parents 1de03e7 + 365cc7f
commit 151bbaf
Show file tree

Hide file tree

Showing 14 changed files with 289 additions and 592 deletions.
diff --git a/app/(routes)/(landingpage)/Hero.tsx b/app/(routes)/(landingpage)/Hero.tsx
@@ -1,14 +1,29 @@
 'use client';
-import Image from 'next/image';
-import Link from 'next/link';
+
+import { useRouter } from 'next/navigation';
 
 import { HeroParentComponent } from '@/components/Background/HeroComponent';
+import { Button } from '@/components/ui/button';
 
 import { HeroSplineLanding } from './HeroSpline';
 
 export const Hero = () => {
+  const router = useRouter();
+
+  const handleGoToEarn = () => {
+    window.open('https://earn.libertum.io/', '_blank', 'noopener,noreferrer');
+  };
+
+  const handleGoToGet = () => {
+    router.push('/get');
+  };
+
+  const handleGoToStartTokenization = () => {
+    router.push('/subscribe');
+  };
+
   return (
-    <HeroParentComponent>
+    <HeroParentComponent isUseFLex>
       <section className="hidden lg:block absolute top-0 right-0 z-20">
         <HeroSplineLanding />
       </section>
@@ -31,43 +46,40 @@ export const Hero = () => {
           </p>
         </article>
 
-        <section className="flex flex-col lg:flex-row items-start gap-8 w-full">
-          <Link
-            href="/subscribe"
-            className="flex px-4 py-3 justify-between items-center border border-libertumGreen rounded-[.3rem] bg-[#ffffff03] backdrop-filter backdrop-blur-sm text-white font-space_grotesk font-bold cursor-pointer whitespace-nowrap text-xs hover:bg-[#00b3b54d] h-[3rem] w-full"
+        <section className="flex flex-col lg:flex-row items-start gap-8 w-full z-50">
+          <Button
+            asChild
+            variant="custom"
+            imageSrc="/assets/rocket.svg"
+            imageAlt="earn"
+            imageSize={21}
+            showArrow
+            onClick={handleGoToStartTokenization}
           >
-            <article className="flex justify-center items-center gap-4">
-              <Image src="/assets/rocket.svg" alt="N" width={21} height={21} />
-              <p>Start Tokenizing</p>
-            </article>
+            Start Tokenizing
+          </Button>
 
-            <Image alt="left arrow" src="/assets/leftArrow.svg" width={13.207} height={8.708} />
-          </Link>
-
-          <Link
-            href="https://earn.libertum.io/"
-            target="_blank"
-            className="flex px-4 py-3 justify-between items-center border border-libertumGreen rounded-[.3rem] bg-[#ffffff03] backdrop-filter backdrop-blur-sm text-white font-space_grotesk font-bold cursor-pointer whitespace-nowrap text-xs hover:bg-[#00b3b54d] h-[3rem] w-full"
+          <Button
+            asChild
+            variant="custom"
+            imageSrc="/assets/icons/earn.svg"
+            imageAlt="earn"
+            showArrow
+            formTarget="_blank"
+            onClick={handleGoToEarn}
           >
-            <div className="flex justify-center items-center gap-4">
-              <Image src="/assets/icons/earn.svg" alt="earn" width={36} height={36} />
-              <p>Stake LBM</p>
-            </div>
-
-            <Image alt="left arrow" src="/assets/leftArrow.svg" width={13.207} height={8.708} />
-          </Link>
-
-          <Link
-            href="/get"
-            className="flex px-4 py-3 justify-between items-center border border-libertumGreen rounded-[.3rem] bg-[#ffffff03] backdrop-filter backdrop-blur-sm text-white font-space_grotesk font-bold cursor-pointer whitespace-nowrap text-xs hover:bg-[#00b3b54d] h-[3rem] w-full"
+            Stake LBM
+          </Button>
+          <Button
+            asChild
+            variant="custom"
+            imageSrc="/assets/icons/get.svg"
+            imageAlt="get"
+            showArrow
+            onClick={handleGoToGet}
           >
-            <div className="flex justify-center items-center gap-4">
-              <Image src="/assets/icons/get.svg" alt="N" width={36} height={36} />
-              <p>Get LBM</p>
-            </div>
-
-            <Image alt="left arrow" src="/assets/leftArrow.svg" width={13.207} height={8.708} />
-          </Link>
+            Get LBM
+          </Button>
         </section>
       </section>
     </HeroParentComponent>

diff --git a/app/(routes)/ambassadors/hero.tsx b/app/(routes)/ambassadors/hero.tsx
@@ -8,15 +8,15 @@ import ambassadorsImage from './assets/ambassadorsHero.svg';
 
 export const Hero = () => {
   return (
-    <HeroParentComponent>
+    <HeroParentComponent isUseFLex>
       <section className="flex flex-col items-start gap-4">
         <h3 className="text-libertumOrange font-space_grotesk text-xl font-light">JOIN US ON OUR MISSION</h3>
         <h1 className="text-white font-space_grotesk text-5xl font-semibold my-0">Libertum Ambassador Program</h1>
         <div className="flex flex-col justify-center items-start gap-4">
           <p className="text-white font-helvetica text-base">
             Tailored for RWA and blockchain enthusiasts, with a keen interest in delving into the practical uses of
             blockchain technology. The main goal of this programme is to champion and promote the Libertum ecosystem,
-            offering an exclusive gateway to the realm of RWA, DeFi, real-world asset tokenisation, and numerous avenues
+            offering an exclusive gateway to the realm of RWA, DeFi, real-world asset tokenization, and numerous avenues
             for personal development.
           </p>
         </div>

diff --git a/app/(routes)/asset-owners/hero/hero.tsx b/app/(routes)/asset-owners/hero/hero.tsx
@@ -18,7 +18,7 @@ export const Hero = () => {
   };
 
   return (
-    <HeroParentComponent>
+    <HeroParentComponent isUseFLex>
       <section className="flex items-start flex-col justify-start gap-8 lg:max-w-lg box-border z-30 flex-1">
         <h1 className=" text-white font-space_grotesk text-5xl font-semibold my-0">Asset Tokenization</h1>
         <div className="flex flex-col items-center justify-center gap-4 text-white font-helvetica font-normal self-stretch">

diff --git a/app/(routes)/community/hero/HeroCommunity.tsx b/app/(routes)/community/hero/HeroCommunity.tsx
@@ -5,7 +5,7 @@ import { ContactForm } from './ContactForm';
 
 export const Hero = () => {
   return (
-    <HeroParentComponent>
+    <HeroParentComponent isUseFLex>
       <section className="flex flex-col items-start gap-4 lg:max-w-[42rem]">
         <h1 className="text-white font-space_grotesk text-5xl font-semibold my-0">Community</h1>
         <p className="text-white font-helvetica text-base">

diff --git a/app/(routes)/get/Hero/Hero.tsx b/app/(routes)/get/Hero/Hero.tsx
@@ -1,7 +1,10 @@
+'use client';
+
 import Image from 'next/image';
 import Link from 'next/link';
 
 import { HeroParentComponent } from '@/components/Background/HeroComponent';
+import { Button } from '@/components/ui/button';
 
 import checkbox from './checkbox.svg';
 import shield from './shield.png';
@@ -20,15 +23,18 @@ const params = {
 const WIDGET_URL = `https://zcx.com/widget?${new URLSearchParams(params)}`;
 
 export const Hero = () => {
+  const handleGoToEarn = () => {
+    window.open('https://earn.libertum.io/', '_blank', 'noopener,noreferrer');
+  };
   return (
-    <HeroParentComponent className="!px-0 lg:flex lg:px-4">
-      <article className="px-4">
+    <HeroParentComponent className="!px-0 lg:flex lg:flex-row lg:px-4 items-start">
+      <article className="flex flex-col px-4 gap-2">
         <Image src="/assets/dark-mode-get.png" alt="Get" width={450} height={450} />
         <p className="font-helvetica py-4 text-white text-base">
           The Libertum GET tool enables users to swap their tokens on the bas e network to “GET” more $LBM
         </p>
 
-        <ul className="gap-2 font-helvetiva text-base text-white text-opacity-80">
+        <ul className="gap-2 font-helvetica text-base text-white text-opacity-80">
           <li className="flex">
             <Image src={checkbox} alt="checkbox" width={24} height={24} />
             <p>Connect your wallet</p>
@@ -44,11 +50,11 @@ export const Hero = () => {
             <Image src={checkbox} alt="checkbox" width={24} height={24} /> <p>SWAP the token into LBM</p>
           </li>
         </ul>
-        <div className="flex items-center jusfity-center gap-4">
+        <div className="flex items-center justify-center gap-4">
           <p className="text-white text-base font-helvetica font-normal gap-2">
             <span className="text-libertumGreen underline">
               <Link href="https://github.com/solidproof/projects/tree/main/2024/Libertum">Audit</Link>
-            </span>{' '}
+            </span>
             and{' '}
             <span className="text-libertumGreen underline">
               <Link href="https://github.com/solidproof/projects/tree/main/2023/Libertum">KYC</Link>
@@ -57,9 +63,23 @@ export const Hero = () => {
           </p>
           <Image src={shield} alt="shield" width={124} height={31} />
         </div>
+
+        <div className="flex w-full justify-center mt-8">
+          <Button
+            asChild
+            variant="custom"
+            imageSrc="/assets/icons/earn.svg"
+            imageAlt="earn"
+            showArrow
+            onClick={handleGoToEarn}
+            className="max-w-fit px-4"
+          >
+            Stake my Tokens
+          </Button>
+        </div>
       </article>
-      <div className="flex justify-center mt-5 lg:mt-0">
-        <iframe src={WIDGET_URL} title="Unizen Exchange Widget" className="w-[600px] h-[600px]"></iframe>;
+      <div className="flex justify-center lg:justify-end mt-5 lg:mt-0 w-full">
+        <iframe src={WIDGET_URL} title="Unizen Exchange Widget" className="w-full max-w-[600px] h-[500px]"></iframe>
       </div>
     </HeroParentComponent>
   );

diff --git a/app/(routes)/learn-investors/hero.tsx b/app/(routes)/learn-investors/hero.tsx
@@ -5,7 +5,7 @@ import { HeroParentComponent } from '@/components/Background/HeroComponent';
 
 export const Hero = () => {
   return (
-    <HeroParentComponent>
+    <HeroParentComponent isUseFLex>
       <div className="flex items-start flex-col justify-start gap-8 lg:max-w-xl box-border">
         <h1 className=" text-white font-space_grotesk text-5xl font-semibold my-0">
           Unlock the financial potential of your assets

diff --git a/app/(routes)/rwa/Hero.tsx b/app/(routes)/rwa/Hero.tsx
@@ -7,7 +7,7 @@ import { HeroParentComponent } from '@/components/Background/HeroComponent';
 
 export function Hero(): ReactElement {
   return (
-    <HeroParentComponent>
+    <HeroParentComponent isUseFLex>
       <article className="flex flex-col justify-start items-start max-w-[44.3rem] gap-8 box-border">
         <div className="flex flex-col items-start gap-4">
           <h3 className="text-libertumOrange font-space_grotesk text-xl font-light">Real World Assets</h3>

diff --git a/app/(routes)/rwa/tags/Tags.module.css b/app/(routes)/rwa/tags/Tags.module.css