From 7b02e397e03b1a244bf48809f26b833882cc3e7f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fede=20=C3=81lvarez?=
 <78366796+fedealvarezcampos@users.noreply.github.com>
Date: Wed, 6 Apr 2022 02:10:52 +0200
Subject: [PATCH] Terms of use & Privacy pages (#16)

---
 src/components/common/footer/index.tsx        | 84 +++++++++++--------
 .../sections/privacy/hero/hero.module.scss    | 60 +++++++++++++
 .../sections/privacy/hero/index.tsx           | 18 ++++
 .../sections/privacy/privacypolicy/index.tsx  | 34 ++++++++
 .../privacy/privacypolicy/privacypolicy.ts    | 21 +++++
 .../sections/terms/hero/hero.module.scss      | 60 +++++++++++++
 src/components/sections/terms/hero/index.tsx  | 18 ++++
 .../sections/terms/termsofuse/index.tsx       | 34 ++++++++
 .../terms/termsofuse/termsofuse.module.scss   | 54 ++++++++++++
 .../sections/terms/termsofuse/termsofuse.ts   | 21 +++++
 src/pages/privacy-policy.tsx                  | 20 +++++
 src/pages/terms-of-use.tsx                    | 20 +++++
 12 files changed, 410 insertions(+), 34 deletions(-)
 create mode 100644 src/components/sections/privacy/hero/hero.module.scss
 create mode 100644 src/components/sections/privacy/hero/index.tsx
 create mode 100644 src/components/sections/privacy/privacypolicy/index.tsx
 create mode 100644 src/components/sections/privacy/privacypolicy/privacypolicy.ts
 create mode 100644 src/components/sections/terms/hero/hero.module.scss
 create mode 100644 src/components/sections/terms/hero/index.tsx
 create mode 100644 src/components/sections/terms/termsofuse/index.tsx
 create mode 100644 src/components/sections/terms/termsofuse/termsofuse.module.scss
 create mode 100644 src/components/sections/terms/termsofuse/termsofuse.ts
 create mode 100644 src/pages/privacy-policy.tsx
 create mode 100644 src/pages/terms-of-use.tsx

diff --git a/src/components/common/footer/index.tsx b/src/components/common/footer/index.tsx
index d8d9f3a..3684b6c 100644
--- a/src/components/common/footer/index.tsx
+++ b/src/components/common/footer/index.tsx
@@ -1,4 +1,6 @@
 import clsx from 'clsx'
+import { useRouter } from 'next/router'
+import { useEffect, useState } from 'react'
 
 import { ArrowLink } from '~/components/icons/arrow'
 import Line from '~/components/icons/line'
@@ -18,43 +20,57 @@ import {
 import s from './footer.module.scss'
 
 export const Footer = () => {
+  const [show, setShow] = useState(true)
+  const router = useRouter()
+
+  useEffect(() => {
+    if (
+      router?.pathname === '/terms-of-use' ||
+      router?.pathname === '/privacy-policy'
+    ) {
+      setShow(false)
+    }
+  }, [router?.pathname])
+
   return (
     <>
-      <Section className={s['pre__footer--section']}>
-        <Line className={s['line']} height={276} />
-        <video
-          autoPlay
-          className={clsx('hide-on-mobile', s['video'])}
-          controls={false}
-          loop
-          muted
-          preload="true"
-        >
-          <source src="/videos/hero-grid.mp4" type="video/mp4" />
-        </video>
-        <Container className={s['pre__footer']}>
-          <Isotype className={s['isotype']} />
-          <Heading
-            as="h2"
-            variant="md"
-            centered
-            style={{ textTransform: 'capitalize' }}
+      {show && (
+        <Section className={s['pre__footer--section']}>
+          <Line className={s['line']} height={276} />
+          <video
+            autoPlay
+            className={clsx('hide-on-mobile', s['video'])}
+            controls={false}
+            loop
+            muted
+            preload="true"
           >
-            Sign-up to our <br /> Newsletter
-          </Heading>
-          <form action="">
-            <input
-              placeholder="Enter your email to stay updated"
-              required
-              type="email"
-            />
-            <button>
-              <ArrowLink />
-              <span className="sr-only">Send</span>
-            </button>
-          </form>
-        </Container>
-      </Section>
+            <source src="/videos/hero-grid.mp4" type="video/mp4" />
+          </video>
+          <Container className={s['pre__footer']}>
+            <Isotype className={s['isotype']} />
+            <Heading
+              as="h2"
+              variant="md"
+              centered
+              style={{ textTransform: 'capitalize' }}
+            >
+              Sign-up to our <br /> Newsletter
+            </Heading>
+            <form action="">
+              <input
+                placeholder="Enter your email to stay updated"
+                required
+                type="email"
+              />
+              <button>
+                <ArrowLink />
+                <span className="sr-only">Send</span>
+              </button>
+            </form>
+          </Container>
+        </Section>
+      )}
       <footer className={s.footer}>
         <Container className={s['container']}>
           <div className={s['logo']}>
diff --git a/src/components/sections/privacy/hero/hero.module.scss b/src/components/sections/privacy/hero/hero.module.scss
new file mode 100644
index 0000000..498b3d6
--- /dev/null
+++ b/src/components/sections/privacy/hero/hero.module.scss
@@ -0,0 +1,60 @@
+@import '~/css/helpers';
+
+.section {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  padding: tovw(100px, 'default', 50px) tovw(221px, 'default', 150px);
+  padding-bottom: 0;
+  max-width: 100%;
+  min-height: calc(var(--vh) * 60);
+
+  @media screen and (max-width: 800px) {
+    align-items: center;
+    flex-direction: row;
+    justify-content: space-between;
+    padding: 0 tovw(16px, 'tablet', 16px);
+    padding-top: tovw(70px, 'tablet', 70px);
+    width: 100vw;
+    min-height: calc(var(--vh) * 45);
+  }
+
+  h1 {
+    margin: 0;
+    text-shadow: 0 0 tovw(20px, 'default', 20px) rgb(255 255 255 / 0.4);
+
+    @media screen and (max-width: 800px) {
+      font-size: tovw(50px, 'mobile');
+    }
+  }
+
+  .arrow {
+    display: none;
+
+    @media screen and (max-width: 800px) {
+      display: unset;
+      position: relative;
+      padding-top: tovw(17px, 'mobile', 17px);
+      width: tovw(18px, 'mobile', 18px);
+    }
+  }
+}
+
+.gradient {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: -1;
+  background: linear-gradient(
+    180deg,
+    rgb(0 0 244 / 0.9) 1.63%,
+    rgb(0 0 244 / 0) 99.89%
+  );
+  width: 100%;
+  height: tovw(740px, 'default', 740px);
+  mix-blend-mode: screen;
+
+  @media screen and (max-width: 800px) {
+    height: 70%;
+  }
+}
diff --git a/src/components/sections/privacy/hero/index.tsx b/src/components/sections/privacy/hero/index.tsx
new file mode 100644
index 0000000..1cb1156
--- /dev/null
+++ b/src/components/sections/privacy/hero/index.tsx
@@ -0,0 +1,18 @@
+import { Arrow } from '~/components/icons/arrow'
+import Section from '~/components/layout/section'
+import Heading from '~/components/primitives/heading'
+
+import s from './hero.module.scss'
+
+const Hero = () => {
+  return (
+    <Section className={s['section']}>
+      <Heading as="h1" variant="xl">
+        Privacy Policy
+      </Heading>
+      <Arrow className={s.arrow} />
+    </Section>
+  )
+}
+
+export default Hero
diff --git a/src/components/sections/privacy/privacypolicy/index.tsx b/src/components/sections/privacy/privacypolicy/index.tsx
new file mode 100644
index 0000000..5fe4b50
--- /dev/null
+++ b/src/components/sections/privacy/privacypolicy/index.tsx
@@ -0,0 +1,34 @@
+import { Container } from '~/components/layout/container'
+import Section from '~/components/layout/section'
+import Heading from '~/components/primitives/heading'
+import s from '~/components/sections/terms/termsofuse/termsofuse.module.scss'
+
+import { privacyPolicy } from './privacypolicy'
+
+const PrivacyPolicy = () => {
+  return (
+    <Section className={s['section']}>
+      <div className={s.header}>
+        <span>LAST UPDATE</span>
+        <span className={s.separator}>—</span>
+        <span>{privacyPolicy.updatedOn}</span>
+      </div>
+      <Container className={s.container}>
+        <p>{privacyPolicy.text.block01.pg01}</p>
+        <p>{privacyPolicy.text.block01.pg02}</p>
+        <p>{privacyPolicy.text.block01.pg03}</p>
+        <p>{privacyPolicy.text.block01.pg04}</p>
+        <Heading as="h2" font="tthoves" variant="sm">
+          {privacyPolicy.text.block02.title}
+        </Heading>
+        <p>{privacyPolicy.text.block02.pg01}</p>
+        <Heading as="h2" font="tthoves" variant="sm">
+          {privacyPolicy.text.block03.title}
+        </Heading>
+        <p>{privacyPolicy.text.block03.pg01}</p>
+      </Container>
+    </Section>
+  )
+}
+
+export default PrivacyPolicy
diff --git a/src/components/sections/privacy/privacypolicy/privacypolicy.ts b/src/components/sections/privacy/privacypolicy/privacypolicy.ts
new file mode 100644
index 0000000..4607ac5
--- /dev/null
+++ b/src/components/sections/privacy/privacypolicy/privacypolicy.ts
@@ -0,0 +1,21 @@
+export const privacyPolicy = {
+  updatedOn: '01.31.22',
+  text: {
+    block01: {
+      pg01: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ornare aliquam pretium. Nullam id massa non augue suscipit porttitor quis quis dolor. Pellentesque porttitor sed turpis vitae pulvinar. Pellentesque a est venenatis, scelerisque lacus ac, vulputate lectus. Etiam porttitor sagittis nisi sit amet lacinia. Cras gravida ultricies porta. Curabitur semper nulla nisi, eget suscipit purus blandit porttitor. Fusce sagittis luctus sapien ut volutpat. Donec luctus, tellus nec gravida ullamcorper, ligula lacus sagittis lacus, ultrices ultricies dolor ligula vitae orci. Quisque a nisi nunc. Maecenas mattis dui id sem porta ultrices.',
+      pg02: 'Duis quis leo non ex gravida placerat a ac urna. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus facilisis ipsum ut risus egestas ornare. Phasellus et leo eu purus hendrerit auctor. Nam accumsan enim nec massa semper, vel porttitor neque efficitur. Duis a convallis nulla, a mattis turpis. Mauris a blandit ex. Phasellus sit amet vestibulum purus. Maecenas rutrum pretium lectus ut tincidunt. Donec mollis quam sit amet condimentum lacinia.',
+
+      pg03: 'In elementum et felis in elementum. Maecenas nunc nisi, pretium a lobortis interdum, venenatis ut erat. Cras euismod dignissim molestie. Proin commodo nisl at risus gravida facilisis. Donec sit amet magna odio. Pellentesque posuere in risus nec vehicula. Etiam euismod risus eget congue placerat. Pellentesque nec orci ac velit finibus semper a egestas nunc. Integer venenatis, libero sed faucibus tincidunt, massa lorem ullamcorper lacus, quis dignissim libero dolor a nunc. Suspendisse eu accumsan nisi. Integer vitae maximus purus. Nam ut velit a eros tristique feugiat accumsan vitae ex. Pellentesque metus urna, varius non nisl non, molestie sodales diam. Proin sit amet ullamcorper justo. Mauris vehicula dictum imperdiet. Etiam laoreet diam at nunc consectetur sollicitudin.',
+
+      pg04: 'Pellentesque ante libero, pellentesque ac sodales et, consectetur a ipsum. Integer aliquam massa et mattis tristique. Praesent id egestas magna. Nam cursus, lectus ac ornare convallis, nisl metus euismod nibh, sed fermentum velit nulla eu neque. Quisque pulvinar enim vel metus aliquam congue. Aenean sit amet ex euismod, ultrices sem quis, dapibus leo. Ut luctus pellentesque orci, fermentum porttitor libero congue eu.'
+    },
+    block02: {
+      title: '1. Lorem Ipsum',
+      pg01: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.'
+    },
+    block03: {
+      title: '2. Lorem Ipsum',
+      pg01: 'Quisque id tristique quam, vitae feugiat orci. Nulla vel nulla et massa fringilla faucibus. Suspendisse semper arcu nec leo maximus fringilla. Praesent id elementum turpis. Cras sit amet nunc sed nunc tempus placerat vel ultrices urna. Aenean scelerisque porta massa, vel sodales turpis porta quis. Aliquam euismod neque ac eros dictum, ac dapibus risus convallis. Mauris risus orci, porttitor et semper eu, accumsan a tellus. Ut posuere venenatis urna sit amet laoreet. Curabitur id justo ut lacus pretium ultrices et in tortor. Phasellus dignissim, justo quis dapibus viverra, nulla justo faucibus sem, quis tristique nulla mi nec purus. Morbi dolor magna, congue ut tempor id, vestibulum et eros. Praesent at quam purus. Nam eget tincidunt tellus, non tristique quam. Vivamus nulla libero, placerat et orci ac.'
+    }
+  }
+}
diff --git a/src/components/sections/terms/hero/hero.module.scss b/src/components/sections/terms/hero/hero.module.scss
new file mode 100644
index 0000000..498b3d6
--- /dev/null
+++ b/src/components/sections/terms/hero/hero.module.scss
@@ -0,0 +1,60 @@
+@import '~/css/helpers';
+
+.section {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  padding: tovw(100px, 'default', 50px) tovw(221px, 'default', 150px);
+  padding-bottom: 0;
+  max-width: 100%;
+  min-height: calc(var(--vh) * 60);
+
+  @media screen and (max-width: 800px) {
+    align-items: center;
+    flex-direction: row;
+    justify-content: space-between;
+    padding: 0 tovw(16px, 'tablet', 16px);
+    padding-top: tovw(70px, 'tablet', 70px);
+    width: 100vw;
+    min-height: calc(var(--vh) * 45);
+  }
+
+  h1 {
+    margin: 0;
+    text-shadow: 0 0 tovw(20px, 'default', 20px) rgb(255 255 255 / 0.4);
+
+    @media screen and (max-width: 800px) {
+      font-size: tovw(50px, 'mobile');
+    }
+  }
+
+  .arrow {
+    display: none;
+
+    @media screen and (max-width: 800px) {
+      display: unset;
+      position: relative;
+      padding-top: tovw(17px, 'mobile', 17px);
+      width: tovw(18px, 'mobile', 18px);
+    }
+  }
+}
+
+.gradient {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: -1;
+  background: linear-gradient(
+    180deg,
+    rgb(0 0 244 / 0.9) 1.63%,
+    rgb(0 0 244 / 0) 99.89%
+  );
+  width: 100%;
+  height: tovw(740px, 'default', 740px);
+  mix-blend-mode: screen;
+
+  @media screen and (max-width: 800px) {
+    height: 70%;
+  }
+}
diff --git a/src/components/sections/terms/hero/index.tsx b/src/components/sections/terms/hero/index.tsx
new file mode 100644
index 0000000..8dfcadc
--- /dev/null
+++ b/src/components/sections/terms/hero/index.tsx
@@ -0,0 +1,18 @@
+import { Arrow } from '~/components/icons/arrow'
+import Section from '~/components/layout/section'
+import Heading from '~/components/primitives/heading'
+
+import s from './hero.module.scss'
+
+const Hero = () => {
+  return (
+    <Section className={s['section']}>
+      <Heading as="h1" variant="xl">
+        Terms of Use
+      </Heading>
+      <Arrow className={s.arrow} />
+    </Section>
+  )
+}
+
+export default Hero
diff --git a/src/components/sections/terms/termsofuse/index.tsx b/src/components/sections/terms/termsofuse/index.tsx
new file mode 100644
index 0000000..54844b8
--- /dev/null
+++ b/src/components/sections/terms/termsofuse/index.tsx
@@ -0,0 +1,34 @@
+import { Container } from '~/components/layout/container'
+import Section from '~/components/layout/section'
+import Heading from '~/components/primitives/heading'
+
+import { termsOfUse } from './termsofuse'
+import s from './termsofuse.module.scss'
+
+const TermsOfUse = () => {
+  return (
+    <Section className={s['section']}>
+      <div className={s.header}>
+        <span>LAST UPDATE</span>
+        <span className={s.separator}>—</span>
+        <span>{termsOfUse.updatedOn}</span>
+      </div>
+      <Container className={s.container}>
+        <p>{termsOfUse.text.block01.pg01}</p>
+        <p>{termsOfUse.text.block01.pg02}</p>
+        <p>{termsOfUse.text.block01.pg03}</p>
+        <p>{termsOfUse.text.block01.pg04}</p>
+        <Heading as="h2" font="tthoves" variant="sm">
+          {termsOfUse.text.block02.title}
+        </Heading>
+        <p>{termsOfUse.text.block02.pg01}</p>
+        <Heading as="h2" font="tthoves" variant="sm">
+          {termsOfUse.text.block03.title}
+        </Heading>
+        <p>{termsOfUse.text.block03.pg01}</p>
+      </Container>
+    </Section>
+  )
+}
+
+export default TermsOfUse
diff --git a/src/components/sections/terms/termsofuse/termsofuse.module.scss b/src/components/sections/terms/termsofuse/termsofuse.module.scss
new file mode 100644
index 0000000..fe6453a
--- /dev/null
+++ b/src/components/sections/terms/termsofuse/termsofuse.module.scss
@@ -0,0 +1,54 @@
+@import '~/css/helpers';
+
+.section {
+  position: relative;
+  padding: tovw(16px, 'default', 10px) tovw(221px, 'default', 150px)
+    tovw(100px, 'default', 50px);
+  padding-bottom: tovw(270px, 'default', 150px);
+
+  @media screen and (max-width: 800px) {
+    max-width: 100%;
+    padding: 0 tovw(16px, 'tablet', 16px);
+    padding-bottom: tovw(80px, 'tablet', 80px);
+  }
+
+  .container {
+    @media screen and (max-width: 800px) {
+      padding: 0;
+    }
+  }
+
+  .header {
+    display: flex;
+    gap: tovw(15px, 'default', 10px);
+    padding-bottom: tovw(13px, 'default', 10px);
+    margin-bottom: tovw(130px, 'default', 36px);
+    border-bottom: 1px solid var(--color-grey-light);
+    font-size: tovw(18px, 'default', 16px);
+    font-family: var(--font-dm-mono), sans-serif;
+
+    @media screen and (max-width: 800px) {
+      font-size: tovw(12px, 'tablet', 12px);
+      padding-bottom: tovw(16px, 'tablet', 16px);
+    }
+
+    .separator {
+      color: var(--color-grey-light);
+    }
+
+    span:last-child {
+      color: var(--color-grey-light);
+    }
+  }
+
+  p {
+    line-height: 1.9;
+    font-size: tovw(22px, 'default', 18px);
+    margin: tovw(64px, 'default', 40px) 0;
+
+    @media screen and (max-width: 800px) {
+      line-height: 1.6;
+      font-size: tovw(15px, 'tablet', 15px);
+    }
+  }
+}
diff --git a/src/components/sections/terms/termsofuse/termsofuse.ts b/src/components/sections/terms/termsofuse/termsofuse.ts
new file mode 100644
index 0000000..7d3de4f
--- /dev/null
+++ b/src/components/sections/terms/termsofuse/termsofuse.ts
@@ -0,0 +1,21 @@
+export const termsOfUse = {
+  updatedOn: '01.31.22',
+  text: {
+    block01: {
+      pg01: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ornare aliquam pretium. Nullam id massa non augue suscipit porttitor quis quis dolor. Pellentesque porttitor sed turpis vitae pulvinar. Pellentesque a est venenatis, scelerisque lacus ac, vulputate lectus. Etiam porttitor sagittis nisi sit amet lacinia. Cras gravida ultricies porta. Curabitur semper nulla nisi, eget suscipit purus blandit porttitor. Fusce sagittis luctus sapien ut volutpat. Donec luctus, tellus nec gravida ullamcorper, ligula lacus sagittis lacus, ultrices ultricies dolor ligula vitae orci. Quisque a nisi nunc. Maecenas mattis dui id sem porta ultrices.',
+      pg02: 'Duis quis leo non ex gravida placerat a ac urna. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus facilisis ipsum ut risus egestas ornare. Phasellus et leo eu purus hendrerit auctor. Nam accumsan enim nec massa semper, vel porttitor neque efficitur. Duis a convallis nulla, a mattis turpis. Mauris a blandit ex. Phasellus sit amet vestibulum purus. Maecenas rutrum pretium lectus ut tincidunt. Donec mollis quam sit amet condimentum lacinia.',
+
+      pg03: 'In elementum et felis in elementum. Maecenas nunc nisi, pretium a lobortis interdum, venenatis ut erat. Cras euismod dignissim molestie. Proin commodo nisl at risus gravida facilisis. Donec sit amet magna odio. Pellentesque posuere in risus nec vehicula. Etiam euismod risus eget congue placerat. Pellentesque nec orci ac velit finibus semper a egestas nunc. Integer venenatis, libero sed faucibus tincidunt, massa lorem ullamcorper lacus, quis dignissim libero dolor a nunc. Suspendisse eu accumsan nisi. Integer vitae maximus purus. Nam ut velit a eros tristique feugiat accumsan vitae ex. Pellentesque metus urna, varius non nisl non, molestie sodales diam. Proin sit amet ullamcorper justo. Mauris vehicula dictum imperdiet. Etiam laoreet diam at nunc consectetur sollicitudin.',
+
+      pg04: 'Pellentesque ante libero, pellentesque ac sodales et, consectetur a ipsum. Integer aliquam massa et mattis tristique. Praesent id egestas magna. Nam cursus, lectus ac ornare convallis, nisl metus euismod nibh, sed fermentum velit nulla eu neque. Quisque pulvinar enim vel metus aliquam congue. Aenean sit amet ex euismod, ultrices sem quis, dapibus leo. Ut luctus pellentesque orci, fermentum porttitor libero congue eu.'
+    },
+    block02: {
+      title: '1. Lorem Ipsum',
+      pg01: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.'
+    },
+    block03: {
+      title: '2. Lorem Ipsum',
+      pg01: 'Quisque id tristique quam, vitae feugiat orci. Nulla vel nulla et massa fringilla faucibus. Suspendisse semper arcu nec leo maximus fringilla. Praesent id elementum turpis. Cras sit amet nunc sed nunc tempus placerat vel ultrices urna. Aenean scelerisque porta massa, vel sodales turpis porta quis. Aliquam euismod neque ac eros dictum, ac dapibus risus convallis. Mauris risus orci, porttitor et semper eu, accumsan a tellus. Ut posuere venenatis urna sit amet laoreet. Curabitur id justo ut lacus pretium ultrices et in tortor. Phasellus dignissim, justo quis dapibus viverra, nulla justo faucibus sem, quis tristique nulla mi nec purus. Morbi dolor magna, congue ut tempor id, vestibulum et eros. Praesent at quam purus. Nam eget tincidunt tellus, non tristique quam. Vivamus nulla libero, placerat et orci ac.'
+    }
+  }
+}
diff --git a/src/pages/privacy-policy.tsx b/src/pages/privacy-policy.tsx
new file mode 100644
index 0000000..8d585d7
--- /dev/null
+++ b/src/pages/privacy-policy.tsx
@@ -0,0 +1,20 @@
+import { Meta } from '~/components/common/meta'
+import { PageLayout } from '~/components/layout/page'
+import Hero from '~/components/sections/privacy/hero'
+import s from '~/components/sections/privacy/hero/hero.module.scss'
+import PrivacyPolicy from '~/components/sections/privacy/privacypolicy'
+
+import { Page } from './_app'
+
+const Privacy: Page = () => {
+  return (
+    <PageLayout>
+      <div className={s.gradient}></div>
+      <Meta />
+      <Hero />
+      <PrivacyPolicy />
+    </PageLayout>
+  )
+}
+
+export default Privacy
diff --git a/src/pages/terms-of-use.tsx b/src/pages/terms-of-use.tsx
new file mode 100644
index 0000000..8e1ab41
--- /dev/null
+++ b/src/pages/terms-of-use.tsx
@@ -0,0 +1,20 @@
+import { Meta } from '~/components/common/meta'
+import { PageLayout } from '~/components/layout/page'
+import Hero from '~/components/sections/terms/hero'
+import s from '~/components/sections/terms/hero/hero.module.scss'
+import TermsOfUse from '~/components/sections/terms/termsofuse'
+
+import { Page } from './_app'
+
+const Terms: Page = () => {
+  return (
+    <PageLayout>
+      <div className={s.gradient}></div>
+      <Meta />
+      <Hero />
+      <TermsOfUse />
+    </PageLayout>
+  )
+}
+
+export default Terms