Add legal links

rarimo · Jun 18, 2024 · ed2ea18 · ed2ea18
1 parent 205d0f9
commit ed2ea18
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 7 deletions.
diff --git a/src/app/components/PassportDemo.tsx b/src/app/components/PassportDemo.tsx
@@ -102,14 +102,14 @@ export default function PassportDemo({ isOpen }: { isOpen: boolean }) {
         </div>
       </div>
 
-      <div className='h-sm:w-[480px] h-sm:h-[384px] h-sm:right-20 h-sm:-bottom-10 absolute right-0 top-[220px] h-[640px] w-[800px] sm:bottom-0 sm:right-1/4 sm:top-auto xl:bottom-0 xl:right-[20%]'>
+      <div className='absolute right-0 top-[220px] h-[640px] w-[800px] sm:bottom-0 sm:right-1/4 sm:top-auto xl:bottom-0 xl:right-[20%] h-sm:-bottom-10 h-sm:right-20 h-sm:h-[384px] h-sm:w-[480px]'>
         <img
           className='absolute bottom-0 right-0 h-full'
           src='/images/home/demo-hand.png'
           alt='Demo hand'
         />
 
-        <div className='h-sm:top-[5px] h-sm:right-[61px] h-sm:w-[128px] h-sm:rounded-[12px] absolute right-[101px] top-[8px] flex w-[215px] overflow-hidden rounded-[20px]'>
+        <div className='absolute right-[101px] top-[8px] flex w-[215px] overflow-hidden rounded-[20px] h-sm:right-[61px] h-sm:top-[5px] h-sm:w-[128px] h-sm:rounded-[12px]'>
           <div
             className='flex gap-[20px] transition-transform duration-300 ease-in-out'
             style={{

diff --git a/src/common/Footer.tsx b/src/common/Footer.tsx
@@ -1,5 +1,5 @@
 import RarimeIcon from '@/assets/icons/rarime-icon.svg'
-import { documentationLinks, navLinks } from '@/constants/nav'
+import { documentationLinks, legalLinks, navLinks } from '@/constants/nav'
 import { Container, Divider } from '@/ui'
 
 import AppStoreLinks from './AppStoreLinks'
@@ -9,7 +9,7 @@ export default function Footer() {
     <footer data-aos='fade-up'>
       <Container>
         <Divider />
-        <div className='my-10 flex flex-col-reverse items-center justify-between gap-8 lg:my-20 lg:flex-row lg:gap-20'>
+        <div className='my-10 flex flex-col-reverse items-center justify-between gap-8 lg:my-20 lg:flex-row lg:gap-10'>
           <div className='flex flex-col items-center gap-8 lg:items-start'>
             <a href='/#'>
               <RarimeIcon className='h-8 w-8' />
@@ -31,7 +31,7 @@ export default function Footer() {
               </p>
             </div>
           </div>
-          <div className='grid grid-cols-1 gap-30 lg:grid-cols-[1fr_1fr_auto]'>
+          <div className='grid grid-cols-1 gap-12 lg:grid-cols-[1fr_1fr_1fr_auto]'>
             <div className='hidden flex-col gap-6 lg:flex'>
               <p className='text-subtitle4 text-text-primary'>
                 Navigation links
@@ -64,6 +64,22 @@ export default function Footer() {
                 ))}
               </div>
             </div>
+            <div className='hidden flex-col gap-6 lg:flex'>
+              <p className='text-subtitle4 text-text-primary'>Legal</p>
+              <div className='flex flex-col gap-4'>
+                {legalLinks.map(({ label, href }) => (
+                  <a
+                    key={label}
+                    href={href}
+                    className='text-body3 text-text-secondary hover:text-text-primary'
+                    target='_blank'
+                    rel='noreferrer'
+                  >
+                    {label}
+                  </a>
+                ))}
+              </div>
+            </div>
             <AppStoreLinks />
           </div>
         </div>

diff --git a/src/common/MobileMenu.tsx b/src/common/MobileMenu.tsx
@@ -1,5 +1,5 @@
 import ClientOnly from '@/common/ClientOnly'
-import { documentationLinks, navLinks } from '@/constants/nav'
+import { documentationLinks, legalLinks, navLinks } from '@/constants/nav'
 import { cn } from '@/theme/utils'
 
 interface Props {
@@ -18,7 +18,7 @@ export default function MobileMenu({ isOpen, onClose }: Props) {
               isOpen ? 'scale-y-100' : 'scale-y-0',
             )}
           >
-            {[...navLinks, ...documentationLinks].map(
+            {[...navLinks, ...documentationLinks, ...legalLinks].map(
               ({ label, href, isExternal }) => (
                 <a
                   key={label}

diff --git a/src/constants/nav.ts b/src/constants/nav.ts
@@ -33,3 +33,16 @@ export const documentationLinks: NavLink[] = [
     isExternal: true,
   },
 ]
+
+export const legalLinks: NavLink[] = [
+  {
+    label: 'Terms & Conditions',
+    href: '/general-terms.html',
+    isExternal: true,
+  },
+  {
+    label: 'Privacy Notice',
+    href: '/privacy-notice.html',
+    isExternal: true,
+  },
+]