Update sections order

rarimo · Jun 27, 2024 · fc1a836 · fc1a836
1 parent b39fd24
commit fc1a836
Show file tree

Hide file tree

Showing 5 changed files with 85 additions and 85 deletions.
diff --git 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
@@ -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
diff --git a/src/app/components/PassportsCard.tsx b/src/app/components/PassportsCard.tsx
@@ -4,49 +4,51 @@ 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'
 
 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
@@ -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>