From fc1a8362ca016bf1b19c898a5c190dc2634d6e93 Mon Sep 17 00:00:00 2001
From: ardier16 <ardier16@gmail.com>
Date: Thu, 27 Jun 2024 13:33:02 +0300
Subject: [PATCH] Update sections order

---
 src/app/components/CardsSection.tsx    |  6 +--
 src/app/components/MetamaskCard.tsx    | 42 +++++++++++++++
 src/app/components/MetamaskSection.tsx | 44 ----------------
 src/app/components/PassportsCard.tsx   | 72 +++++++++++++-------------
 src/app/page.tsx                       |  6 +--
 5 files changed, 85 insertions(+), 85 deletions(-)
 create mode 100644 src/app/components/MetamaskCard.tsx
 delete mode 100644 src/app/components/MetamaskSection.tsx

diff --git a/src/app/components/CardsSection.tsx b/src/app/components/CardsSection.tsx
index 7007261..b5bd111 100644
--- a/src/app/components/CardsSection.tsx
+++ b/src/app/components/CardsSection.tsx
@@ -7,7 +7,7 @@ import { useWindowScroll } from '@/contexts/window-scroll'
 import { Container } from '@/ui'
 
 import AirdropCard from './AirdropCard'
-import PassportsCard from './PassportsCard'
+import MetamaskCard from './MetamaskCard'
 
 export default function CardsSection() {
   const containerRef = useRef<HTMLDivElement>(null)
@@ -30,7 +30,7 @@ export default function CardsSection() {
       className='flex flex-col gap-5 lg:gap-50'
     >
       <div className='sticky bottom-10 z-10'>
-        <PassportsCard />
+        <AirdropCard />
       </div>
       <div
         className='sticky bottom-5'
@@ -39,7 +39,7 @@ export default function CardsSection() {
           transformOrigin: 'center bottom',
         }}
       >
-        <AirdropCard />
+        <MetamaskCard />
       </div>
     </Container>
   )
diff --git a/src/app/components/MetamaskCard.tsx b/src/app/components/MetamaskCard.tsx
new file mode 100644
index 0000000..f6ab014
--- /dev/null
+++ b/src/app/components/MetamaskCard.tsx
@@ -0,0 +1,42 @@
+import RarimeIcon from '@/assets/icons/rarime-icon.svg'
+import { Button } from '@/ui'
+
+export default function MetamaskCard() {
+  return (
+    <div className='relative flex h-[484px] flex-col justify-between rounded-xl bg-secondary-base px-6 py-8 text-base-white lg:h-[582px] lg:rounded-3xl lg:px-16 lg:py-16'>
+      <img
+        className='absolute right-0 top-2 z-0 w-full max-w-[280px] lg:right-9 lg:top-19 lg:max-w-[460px]'
+        src='/images/home/metamask-bg.png'
+        alt='MetaMask Snap'
+      />
+      <div className='flex items-center gap-4'>
+        <img
+          className='h-10 w-10'
+          src='/images/integrations/metamask-logo.svg'
+          alt='MetaMask logo'
+        />
+        <span className='hidden text-h6 lg:block'>MetaMask extension</span>
+      </div>
+      <div className='z-10 flex max-w-[660px] flex-col gap-6 lg:gap-10'>
+        <div className='flex flex-col gap-4 lg:gap-6'>
+          <p className='text-h5 lg:text-h4'>
+            Use your RariMe seamlessly across Web3 via MetaMask
+          </p>
+          <p className='text-subtitle3 opacity-50 lg:text-subtitle1'>
+            Your identity and crypto live in a single place
+          </p>
+        </div>
+        <Button
+          as='a'
+          className='!h-12 w-max'
+          href='https://snaps.metamask.io/snap/npm/rarimo/rarime/'
+          target='_blank'
+          rel='noreferrer'
+        >
+          <RarimeIcon className='h-5 w-5' />
+          <span>Install RariMe Snap</span>
+        </Button>
+      </div>
+    </div>
+  )
+}
diff --git a/src/app/components/MetamaskSection.tsx b/src/app/components/MetamaskSection.tsx
deleted file mode 100644
index b493149..0000000
--- a/src/app/components/MetamaskSection.tsx
+++ /dev/null
@@ -1,44 +0,0 @@
-import RarimeIcon from '@/assets/icons/rarime-icon.svg'
-import { Button, Container } from '@/ui'
-
-export default function MetamaskSection() {
-  return (
-    <Container data-aos='fade-up'>
-      <div className='relative flex h-[484px] flex-col justify-between rounded-xl bg-secondary-base px-6 py-8 text-base-white lg:h-[582px] lg:rounded-3xl lg:px-16 lg:py-16'>
-        <img
-          className='absolute right-0 top-2 z-0 w-full max-w-[280px] lg:right-9 lg:top-19 lg:max-w-[460px]'
-          src='/images/home/metamask-bg.png'
-          alt='MetaMask Snap'
-        />
-        <div className='flex items-center gap-4'>
-          <img
-            className='h-10 w-10'
-            src='/images/integrations/metamask-logo.svg'
-            alt='MetaMask logo'
-          />
-          <span className='hidden text-h6 lg:block'>MetaMask extension</span>
-        </div>
-        <div className='z-10 flex max-w-[640px] flex-col gap-6 lg:gap-10'>
-          <div className='flex flex-col gap-4 lg:gap-6'>
-            <p className='text-h5 lg:text-h4'>
-              Use your RariMe seamlessly across web via MetaMask
-            </p>
-            <p className='text-subtitle3 opacity-50 lg:text-subtitle1'>
-              Your identity and crypto live in a single place
-            </p>
-          </div>
-          <Button
-            as='a'
-            className='!h-12 w-max'
-            href='https://snaps.metamask.io/snap/npm/rarimo/rarime/'
-            target='_blank'
-            rel='noreferrer'
-          >
-            <RarimeIcon className='h-5 w-5' />
-            <span>Install RariMe Snap</span>
-          </Button>
-        </div>
-      </div>
-    </Container>
-  )
-}
diff --git a/src/app/components/PassportsCard.tsx b/src/app/components/PassportsCard.tsx
index ceb221f..bb32217 100644
--- a/src/app/components/PassportsCard.tsx
+++ b/src/app/components/PassportsCard.tsx
@@ -4,7 +4,7 @@ import { useState } from 'react'
 
 import ChipIcon from '@/assets/icons/chip-icon.svg'
 import PlayIcon from '@/assets/icons/play-icon.svg'
-import { Button, Modal } from '@/ui'
+import { Button, Container, Modal } from '@/ui'
 
 import PassportDemo from './PassportDemo'
 
@@ -12,41 +12,43 @@ export default function PassportsCard() {
   const [isDemoModalOpen, setIsDemoModalOpen] = useState(false)
 
   return (
-    <div className='relative flex h-[484px] flex-col justify-between overflow-hidden rounded-xl bg-secondary-base px-6 py-8 text-base-white lg:h-[582px] lg:rounded-3xl lg:px-16 lg:py-16'>
-      <img
-        className='absolute -right-8 top-12 z-0 w-[440px] max-w-max lg:right-4 lg:top-16 lg:w-[720px]'
-        src='/images/home/passport-bg.png'
-        alt='Passports Section'
-      />
-      <div className='flex h-16 w-16 items-center justify-center rounded-full bg-white bg-opacity-5 lg:h-18 lg:w-18'>
-        <ChipIcon className='h-6 w-6 text-white' />
-      </div>
-      <div className='z-10 flex max-w-[820px] flex-col gap-6 lg:gap-10'>
-        <div className='flex flex-col gap-4 lg:gap-6'>
-          <p className='text-subtitle3 opacity-50 lg:text-subtitle1'>
-            ZK Passport
-          </p>
-          <p className='text-h6 lg:text-h4'>
-            Convert your passport into an incognito profile and generate
-            zero-knowledge proofs that verify your age, citizenship, or humanity
-          </p>
+    <Container data-aos='fade-up'>
+      <div className='relative flex h-[484px] flex-col justify-between overflow-hidden rounded-xl bg-secondary-base px-6 py-8 text-base-white lg:h-[582px] lg:rounded-3xl lg:px-16 lg:py-16'>
+        <img
+          className='absolute -right-8 top-12 z-0 w-[440px] max-w-max lg:right-4 lg:top-16 lg:w-[720px]'
+          src='/images/home/passport-bg.png'
+          alt='Passports Section'
+        />
+        <div className='flex h-16 w-16 items-center justify-center rounded-full bg-white bg-opacity-5 lg:h-18 lg:w-18'>
+          <ChipIcon className='h-6 w-6 text-white' />
+        </div>
+        <div className='z-10 flex max-w-[820px] flex-col gap-6 lg:gap-10'>
+          <div className='flex flex-col gap-4 lg:gap-6'>
+            <p className='text-subtitle3 opacity-50 lg:text-subtitle1'>
+              ZK Passport
+            </p>
+            <p className='text-h6 lg:text-h4'>
+              Convert your passport into an incognito profile and generate ZKP
+              that verify your age, citizenship, or humanity
+            </p>
+          </div>
+          <Button
+            className='w-max !border-base-white'
+            size='large'
+            intent='outlined'
+            onClick={() => setIsDemoModalOpen(true)}
+          >
+            <span>Play Demo</span>
+            <PlayIcon className='h-5 w-5' />
+          </Button>
+          <Modal
+            isOpen={isDemoModalOpen}
+            onClose={() => setIsDemoModalOpen(false)}
+          >
+            <PassportDemo isOpen={isDemoModalOpen} />
+          </Modal>
         </div>
-        <Button
-          className='w-max !border-base-white'
-          size='large'
-          intent='outlined'
-          onClick={() => setIsDemoModalOpen(true)}
-        >
-          <span>Play Demo</span>
-          <PlayIcon className='h-5 w-5' />
-        </Button>
-        <Modal
-          isOpen={isDemoModalOpen}
-          onClose={() => setIsDemoModalOpen(false)}
-        >
-          <PassportDemo isOpen={isDemoModalOpen} />
-        </Modal>
       </div>
-    </div>
+    </Container>
   )
 }
diff --git a/src/app/page.tsx b/src/app/page.tsx
index e46c035..28b9859 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -6,7 +6,7 @@ import AboutSection from './components/AboutSection'
 import CardsSection from './components/CardsSection'
 import HeroSection from './components/HeroSection'
 import IntegrationsSection from './components/IntegrationsSection'
-import MetamaskSection from './components/MetamaskSection'
+import PassportsCard from './components/PassportsCard'
 import RewardsSection from './components/RewardsSection'
 
 export default function Home() {
@@ -17,9 +17,9 @@ export default function Home() {
         <WindowScrollProvider>
           <HeroSection />
           <AboutSection />
-          <CardsSection />
+          <PassportsCard />
           <RewardsSection />
-          <MetamaskSection />
+          <CardsSection />
           <IntegrationsSection />
         </WindowScrollProvider>
       </main>