Terms of use & Privacy pages (#16)

This commit is contained in:
Fede Álvarez 2022-04-06 02:10:52 +02:00 committed by GitHub
parent a17b3e3c4c
commit 7b02e397e0
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
12 changed files with 410 additions and 34 deletions

View File

@ -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']}>

View File

@ -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%;
}
}

View File

@ -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

View File

@ -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

View File

@ -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.'
}
}
}

View File

@ -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%;
}
}

View File

@ -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

View File

@ -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

View File

@ -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);
}
}
}

View File

@ -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.'
}
}
}

View File

@ -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

View File

@ -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