mirror of
https://github.com/LaconicNetwork/laconic.com.git
synced 2026-01-16 20:34:07 +00:00
Normalize code (#23)
This commit is contained in:
Nazareno Oviedo
GitHub
parent
50039fa90d
commit
6ec1d6b45d
@ -64,18 +64,6 @@
|
||||
filter: blur(tovw(80px, 'default', 40px));
|
||||
}
|
||||
|
||||
.line {
|
||||
width: tovw(3px, 'default', 2px);
|
||||
height: tovw(72px, 'default', 56px);
|
||||
margin: tovw(37px, 'default', 20px) auto tovw(23px, 'default', 20px) auto;
|
||||
}
|
||||
|
||||
.flag {
|
||||
width: tovw(36px, 'default', 22px);
|
||||
height: tovw(20px, 'default', 20px);
|
||||
margin: 0 auto 0 tovw(8px, 'default', 6px);
|
||||
}
|
||||
|
||||
h1 {
|
||||
@media screen and (max-width: 800px) {
|
||||
font-size: tovw(50px, 'mobile', 71px);
|
||||
@ -99,86 +87,98 @@
|
||||
margin-bottom: tovw(25px, 'mobile');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.scroll {
|
||||
position: absolute;
|
||||
bottom: 5%;
|
||||
left: tovw(56px, 'default', 16px);
|
||||
display: grid;
|
||||
align-items: flex-end;
|
||||
width: calc(100% - (tovw(56px, 'default', 16px) * 2));
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
grid-template-rows: 1fr;
|
||||
.scroll {
|
||||
position: absolute;
|
||||
bottom: 5%;
|
||||
left: tovw(56px, 'default', 16px);
|
||||
display: grid;
|
||||
align-items: flex-end;
|
||||
width: calc(100% - (tovw(56px, 'default', 16px) * 2));
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
grid-template-rows: 1fr;
|
||||
|
||||
@media screen and (max-width: 800px) {
|
||||
display: none;
|
||||
@media screen and (max-width: 800px) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
p,
|
||||
li {
|
||||
font-family: var(--font-dm-mono);
|
||||
font-size: tovw(12px, 'default', 11px);
|
||||
line-height: 1.7;
|
||||
width: 100%;
|
||||
text-align: right;
|
||||
text-transform: uppercase;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
> div {
|
||||
&:first-of-type {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-self: flex-start;
|
||||
|
||||
@media screen and (max-width: 800px) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
p,
|
||||
li {
|
||||
font-family: var(--font-dm-mono);
|
||||
font-size: tovw(12px, 'default', 11px);
|
||||
line-height: 1.7;
|
||||
width: 100%;
|
||||
&:last-of-type {
|
||||
text-align: right;
|
||||
text-transform: uppercase;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
justify-self: flex-end;
|
||||
|
||||
> div {
|
||||
&:first-of-type {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-self: flex-start;
|
||||
|
||||
@media screen and (max-width: 800px) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&:last-of-type {
|
||||
text-align: right;
|
||||
justify-self: flex-end;
|
||||
|
||||
span {
|
||||
display: inline-block;
|
||||
width: tovw(60px, 'default', 55px);
|
||||
}
|
||||
span {
|
||||
display: inline-block;
|
||||
width: tovw(60px, 'default', 55px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.gradient {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: tovw(740px, 'default', 740px);
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
rgb(0 0 244 / 0) 1.63%,
|
||||
rgb(0 0 244 / 0.9) 63.96%
|
||||
);
|
||||
|
||||
@media screen and (max-width: 800px) {
|
||||
height: 70%;
|
||||
}
|
||||
}
|
||||
|
||||
.video {
|
||||
position: absolute;
|
||||
z-index: -2;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
user-select: none;
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
|
||||
.gradient {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: tovw(740px, 'default', 740px);
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
rgb(0 0 244 / 0) 1.63%,
|
||||
rgb(0 0 244 / 0.9) 63.96%
|
||||
);
|
||||
|
||||
@media screen and (max-width: 800px) {
|
||||
height: 70%;
|
||||
}
|
||||
}
|
||||
|
||||
.video {
|
||||
position: absolute;
|
||||
z-index: -2;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
user-select: none;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.line {
|
||||
width: tovw(3px, 'default', 2px);
|
||||
height: tovw(72px, 'default', 56px);
|
||||
margin: tovw(37px, 'default', 20px) auto tovw(23px, 'default', 20px) auto;
|
||||
}
|
||||
|
||||
.flag {
|
||||
width: tovw(36px, 'default', 22px);
|
||||
height: tovw(20px, 'default', 20px);
|
||||
margin: 0 auto 0 tovw(8px, 'default', 6px);
|
||||
}
|
||||
|
||||
@ -61,7 +61,7 @@ const Hero = () => {
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div className={s.gradient} />
|
||||
<div className={s['gradient']} />
|
||||
</Section>
|
||||
)
|
||||
}
|
||||
|
||||
@ -4,20 +4,13 @@
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
padding: tovw(100px, 'default', 50px) tovw(221px, 'default', 150px);
|
||||
min-height: calc(var(--vh) * 100);
|
||||
max-width: 100%;
|
||||
min-height: calc(var(--vh) * 100);
|
||||
padding: tovw(100px, 'default', 50px) tovw(221px, 'default', 150px);
|
||||
|
||||
@media screen and (max-width: 800px) {
|
||||
width: 100vw;
|
||||
padding: 0;
|
||||
padding-bottom: tovw(18px, 'mobile');
|
||||
}
|
||||
|
||||
.container {
|
||||
@media screen and (max-width: 800px) {
|
||||
padding: 0 tovw(16px, 'tablet', 16px);
|
||||
}
|
||||
padding: 0 0 tovw(18px, 'mobile') 0;
|
||||
}
|
||||
|
||||
video {
|
||||
@ -26,115 +19,120 @@
|
||||
|
||||
@media screen and (max-width: 800px) {
|
||||
display: flex;
|
||||
place-self: center;
|
||||
width: 300%;
|
||||
}
|
||||
}
|
||||
|
||||
.body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-top: tovw(16px, 'default', 10px);
|
||||
gap: tovw(89px, 'default', 56px);
|
||||
|
||||
.line {
|
||||
height: tovw(175px, 'default', 130px);
|
||||
margin-top: tovw(5px, 'default', 5px);
|
||||
|
||||
@media screen and (max-width: 800px) {
|
||||
transform: rotate(0deg) translateY(tovw(8px, 'default', 8px))
|
||||
scaleX(1.2);
|
||||
height: tovw(140px, 'default', 130px);
|
||||
left: 0;
|
||||
margin: 0;
|
||||
top: unset;
|
||||
}
|
||||
}
|
||||
|
||||
.headingContainer {
|
||||
@media screen and (max-width: 800px) {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin: 0;
|
||||
text-shadow: 0px 0px tovw(45px, 'default', 45px) 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;
|
||||
align-self: flex-end;
|
||||
width: tovw(18px, 'mobile', 18px);
|
||||
padding-bottom: tovw(10px, 'mobile', 10px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.textContainer {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: tovw(60px, 'default', 20px);
|
||||
|
||||
@media screen and (max-width: 800px) {
|
||||
width: 100%;
|
||||
flex-direction: column;
|
||||
gap: tovw(120px, 'default', 30px);
|
||||
}
|
||||
|
||||
div {
|
||||
&:first-child {
|
||||
display: flex;
|
||||
gap: tovw(30px, 'default', 20px);
|
||||
}
|
||||
|
||||
p {
|
||||
width: tovw(636px, 'default', 200px);
|
||||
font-size: tovw(24px, 'default', 18px);
|
||||
line-height: 1.32;
|
||||
letter-spacing: -0.01em;
|
||||
|
||||
@media screen and (max-width: 800px) {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
div:last-child {
|
||||
display: flex;
|
||||
gap: tovw(53px, 'default', 40px);
|
||||
padding-top: tovw(32px, 'default', 25px);
|
||||
}
|
||||
}
|
||||
|
||||
h2 {
|
||||
line-height: 1.2;
|
||||
width: tovw(367px, 'default', 280px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.gradient {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: tovw(740px, 'default', 740px);
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
rgb(0 0 244 / 0.9) 1.63%,
|
||||
rgb(0 0 244 / 0) 99.89%
|
||||
);
|
||||
z-index: -1;
|
||||
|
||||
@media screen and (max-width: 800px) {
|
||||
height: 70%;
|
||||
place-self: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.container {
|
||||
@media screen and (max-width: 800px) {
|
||||
padding: 0 tovw(16px, 'tablet', 16px);
|
||||
}
|
||||
}
|
||||
|
||||
.body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-top: tovw(16px, 'default', 10px);
|
||||
gap: tovw(89px, 'default', 56px);
|
||||
|
||||
.header {
|
||||
@media screen and (max-width: 800px) {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin: 0;
|
||||
text-shadow: 0 0 tovw(45px, 'default', 45px) 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) {
|
||||
position: relative;
|
||||
display: unset;
|
||||
align-self: flex-end;
|
||||
width: tovw(18px, 'mobile', 18px);
|
||||
padding-bottom: tovw(10px, 'mobile', 10px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.line {
|
||||
height: tovw(175px, 'default', 130px);
|
||||
margin-top: tovw(5px, 'default', 5px);
|
||||
|
||||
@media screen and (max-width: 800px) {
|
||||
top: unset;
|
||||
left: 0;
|
||||
height: tovw(140px, 'default', 130px);
|
||||
margin: 0;
|
||||
transform: rotate(0deg) translateY(tovw(8px, 'default', 8px)) scaleX(1.2);
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: tovw(60px, 'default', 20px);
|
||||
|
||||
@media screen and (max-width: 800px) {
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
gap: tovw(120px, 'default', 30px);
|
||||
}
|
||||
|
||||
div {
|
||||
&:first-child {
|
||||
display: flex;
|
||||
gap: tovw(30px, 'default', 20px);
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: tovw(24px, 'default', 18px);
|
||||
line-height: 1.32;
|
||||
width: tovw(636px, 'default', 200px);
|
||||
letter-spacing: -0.01em;
|
||||
|
||||
@media screen and (max-width: 800px) {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
div:last-child {
|
||||
display: flex;
|
||||
padding-top: tovw(32px, 'default', 25px);
|
||||
gap: tovw(53px, 'default', 40px);
|
||||
}
|
||||
}
|
||||
|
||||
h2 {
|
||||
line-height: 1.2;
|
||||
width: tovw(367px, 'default', 280px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.gradient {
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: tovw(740px, 'default', 740px);
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
rgb(0 0 244 / 0.9) 1.63%,
|
||||
rgb(0 0 244 / 0) 99.89%
|
||||
);
|
||||
|
||||
@media screen and (max-width: 800px) {
|
||||
height: 70%;
|
||||
}
|
||||
}
|
||||
|
||||
@ -10,19 +10,19 @@ import s from './hero.module.scss'
|
||||
const Hero = () => {
|
||||
return (
|
||||
<Section className={s['section']}>
|
||||
<div className={s.gradient} />
|
||||
<div className={s['gradient']} />
|
||||
<video autoPlay muted loop>
|
||||
<source src="/videos/Banner_About.mp4" type="video/mp4" />
|
||||
<source src="/videos/hero-about.mp4" type="video/mp4" />
|
||||
</video>
|
||||
<Container className={s['container']}>
|
||||
<div className={s.body}>
|
||||
<div className={s.headingContainer}>
|
||||
<div className={s['body']}>
|
||||
<div className={s['header']}>
|
||||
<Heading as="h1" variant="xl">
|
||||
Accelerating Web3
|
||||
</Heading>
|
||||
<Arrow className={s.arrow} />
|
||||
<Arrow className={s['arrow']} />
|
||||
</div>
|
||||
<div className={s.textContainer}>
|
||||
<div className={s['content']}>
|
||||
<div>
|
||||
<Line className={s['line']} height={145} />
|
||||
<Heading as="h2" variant="sm">
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
import 'keen-slider/keen-slider.min.css'
|
||||
|
||||
import clsx from 'clsx'
|
||||
import { useKeenSlider } from 'keen-slider/react'
|
||||
|
||||
import Card from '~/components/common/card'
|
||||
@ -31,19 +32,18 @@ const Related = () => {
|
||||
|
||||
return (
|
||||
<Section className={s['section']}>
|
||||
<Container className={s.heading}>
|
||||
<Container className={s['heading']}>
|
||||
<Heading as="h2" variant="lg">
|
||||
Learn More
|
||||
</Heading>
|
||||
</Container>
|
||||
<div className={s['slider__container']}>
|
||||
<div className={`${s.eventsContainer} keen-slider`} ref={sliderRef}>
|
||||
<div className={clsx(s['events'], 'keen-slider')} ref={sliderRef}>
|
||||
{related.map((item, i) => (
|
||||
<Card key={i} data={item} className={`keen-slider__slide`} isNews />
|
||||
<Card key={i} data={item} className="keen-slider__slide" isNews />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<Container></Container>
|
||||
</Section>
|
||||
)
|
||||
}
|
||||
|
||||
@ -71,7 +71,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
.eventsContainer {
|
||||
.events {
|
||||
padding-left: tovw(100px);
|
||||
|
||||
@media screen and (max-width: 800px) {
|
||||
@ -79,10 +79,10 @@
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1600px) {
|
||||
margin: 0 auto;
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
max-width: tovw(1296px, 'default', 320px);
|
||||
margin: 0 auto;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
&::after,
|
||||
|
||||
@ -10,12 +10,12 @@ import { cercTeam, laconicTeam, xylmTeam } from './teams'
|
||||
const TeamSection = () => {
|
||||
return (
|
||||
<Section className={s['section']}>
|
||||
<Container className={s.container}>
|
||||
<Container className={s['container']}>
|
||||
<Heading as="h1" variant="lg">
|
||||
Team
|
||||
</Heading>
|
||||
<div>
|
||||
<Arrow className={s.arrow} />
|
||||
<Arrow className={s['arrow']} />
|
||||
<p>
|
||||
Built over 4 years, Laconic is developed by renowned platform
|
||||
experts across Ethereum, IPLD / IPFS, and Cosmos SDK. Our
|
||||
@ -23,26 +23,22 @@ const TeamSection = () => {
|
||||
developers who co-authored EIP-1559.
|
||||
</p>
|
||||
<p>
|
||||
We’ve successfully launched startups, and built products and
|
||||
We've successfully launched startups, and built products and
|
||||
communities loved by millions of people around the world.
|
||||
</p>
|
||||
</div>
|
||||
<Team members={laconicTeam} teamName="Laconic LLC" teamNumber="01" />
|
||||
<Team
|
||||
teamName={'Laconic LLC'}
|
||||
teamNumber={'01'}
|
||||
members={laconicTeam}
|
||||
/>
|
||||
<Team
|
||||
teamName={'Cerc'}
|
||||
teamDept={'Development'}
|
||||
teamNumber={'02'}
|
||||
members={cercTeam}
|
||||
teamDept="Development"
|
||||
teamName="Cerc"
|
||||
teamNumber="02"
|
||||
/>
|
||||
<Team
|
||||
teamName={'Xylm'}
|
||||
teamDept={'Growth Engine'}
|
||||
teamNumber={'03'}
|
||||
members={xylmTeam}
|
||||
teamDept="Growth Engine"
|
||||
teamName="Xylm"
|
||||
teamNumber="03"
|
||||
/>
|
||||
</Container>
|
||||
</Section>
|
||||
|
||||
@ -6,129 +6,129 @@
|
||||
flex-direction: column;
|
||||
margin-top: tovw(55px, 'default', 20px);
|
||||
padding: tovw(220px, 'default', 72px) 0;
|
||||
}
|
||||
|
||||
.slider__container {
|
||||
width: calc(100% - tovw(205px, 'default', 16px));
|
||||
margin-right: 0;
|
||||
margin-left: auto;
|
||||
.slider__container {
|
||||
width: calc(100% - tovw(205px, 'default', 16px));
|
||||
margin-right: 0;
|
||||
margin-left: auto;
|
||||
|
||||
@media screen and (max-width: 800px) {
|
||||
width: calc(100% - tovw(16px, 'mobile'));
|
||||
}
|
||||
@media screen and (max-width: 800px) {
|
||||
width: calc(100% - tovw(16px, 'mobile'));
|
||||
}
|
||||
}
|
||||
|
||||
.header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: tovw(80px, 'default', 64px);
|
||||
padding-bottom: tovw(60px, 'default', 30px);
|
||||
border-bottom: tovw(1px, 'default', 1px) solid var(--color-white);
|
||||
|
||||
@media screen and (max-width: 800px) {
|
||||
align-items: flex-start;
|
||||
flex-direction: column;
|
||||
padding-bottom: unset;
|
||||
border-bottom: unset;
|
||||
gap: tovw(16px, 'mobile');
|
||||
}
|
||||
|
||||
.heading {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: tovw(80px, 'default', 64px);
|
||||
padding-bottom: tovw(60px, 'default', 30px);
|
||||
border-bottom: tovw(1px, 'default', 1px) solid var(--color-white);
|
||||
|
||||
@media screen and (max-width: 800px) {
|
||||
align-items: flex-start;
|
||||
flex-direction: column;
|
||||
padding-bottom: unset;
|
||||
border-bottom: unset;
|
||||
gap: tovw(16px, 'mobile');
|
||||
}
|
||||
|
||||
h2 {
|
||||
text-shadow: 0 0 tovw(20px, 'default', 20px) rgb(255 255 255 / 0.4);
|
||||
}
|
||||
|
||||
span {
|
||||
font-family: var(--font-tt-hoves), sans-serif;
|
||||
font-size: tovw(24px, 'default', 18px);
|
||||
line-height: 1.32;
|
||||
width: tovw(350px, 'default', 265px);
|
||||
}
|
||||
|
||||
.gradient {
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
right: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: tovw(500px, 'default', 250px);
|
||||
margin-left: 0;
|
||||
content: '';
|
||||
user-select: none;
|
||||
pointer-events: none;
|
||||
opacity: 0.4;
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
rgb(229 229 229 / 0) 0%,
|
||||
rgb(241 241 241 / 0.4) 48.91%,
|
||||
rgb(241 241 241 / 0) 89.23%
|
||||
);
|
||||
|
||||
@media screen and (max-width: 800px) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
h2 {
|
||||
text-shadow: 0 0 tovw(20px, 'default', 20px) rgb(255 255 255 / 0.4);
|
||||
}
|
||||
|
||||
.eventsContainer {
|
||||
padding-left: tovw(100px);
|
||||
@media screen and (max-width: 800px) {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
&::after,
|
||||
&::before {
|
||||
position: absolute;
|
||||
right: tovw(-20px, 'default', -20px);
|
||||
width: tovw(280px, 'default', 150px);
|
||||
height: 100%;
|
||||
content: '';
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
rgb(3 3 3 / 0) 0%,
|
||||
rgb(3 3 3 / 0.95) 35%,
|
||||
rgb(3 3 3 / 1) 65%
|
||||
);
|
||||
|
||||
@media screen and (max-width: 800px) {
|
||||
width: tovw(20px, 'default', 20px);
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
rgb(3 3 3 / 0) 0%,
|
||||
rgb(3 3 3 / 0.55) 35%,
|
||||
rgb(3 3 3 / 1) 95%
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
&::before {
|
||||
z-index: 5;
|
||||
right: initial;
|
||||
left: tovw(-150px);
|
||||
transform: scaleX(-1);
|
||||
@media screen and (max-width: 800px) {
|
||||
content: initial;
|
||||
}
|
||||
}
|
||||
span {
|
||||
font-family: var(--font-tt-hoves), sans-serif;
|
||||
font-size: tovw(24px, 'default', 18px);
|
||||
line-height: 1.32;
|
||||
width: tovw(350px, 'default', 265px);
|
||||
}
|
||||
|
||||
.navigation {
|
||||
display: flex;
|
||||
.gradient {
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
right: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
padding-top: tovw(75px, 'default', 45px);
|
||||
place-content: center;
|
||||
gap: tovw(25px, 'default', 15px);
|
||||
height: tovw(500px, 'default', 250px);
|
||||
margin-left: 0;
|
||||
content: '';
|
||||
user-select: none;
|
||||
pointer-events: none;
|
||||
opacity: 0.4;
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
rgb(229 229 229 / 0) 0%,
|
||||
rgb(241 241 241 / 0.4) 48.91%,
|
||||
rgb(241 241 241 / 0) 89.23%
|
||||
);
|
||||
|
||||
@media screen and (max-width: 800px) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.arrow {
|
||||
width: tovw(50px, 'default', 30px);
|
||||
cursor: pointer;
|
||||
.events__container {
|
||||
padding-left: tovw(100px);
|
||||
@media screen and (max-width: 800px) {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
&::after,
|
||||
&::before {
|
||||
position: absolute;
|
||||
right: tovw(-20px, 'default', -20px);
|
||||
width: tovw(280px, 'default', 150px);
|
||||
height: 100%;
|
||||
content: '';
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
rgb(3 3 3 / 0) 0%,
|
||||
rgb(3 3 3 / 0.95) 35%,
|
||||
rgb(3 3 3 / 1) 65%
|
||||
);
|
||||
|
||||
@media screen and (max-width: 800px) {
|
||||
width: tovw(20px, 'default', 20px);
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
rgb(3 3 3 / 0) 0%,
|
||||
rgb(3 3 3 / 0.55) 35%,
|
||||
rgb(3 3 3 / 1) 95%
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
&::before {
|
||||
z-index: 5;
|
||||
right: initial;
|
||||
left: tovw(-150px);
|
||||
transform: scaleX(-1);
|
||||
@media screen and (max-width: 800px) {
|
||||
content: initial;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.navigation {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
padding-top: tovw(75px, 'default', 45px);
|
||||
place-content: center;
|
||||
gap: tovw(25px, 'default', 15px);
|
||||
|
||||
@media screen and (max-width: 800px) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.arrow {
|
||||
width: tovw(50px, 'default', 30px);
|
||||
cursor: pointer;
|
||||
|
||||
&:first-child {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
import 'keen-slider/keen-slider.min.css'
|
||||
|
||||
import clsx from 'clsx'
|
||||
import { useKeenSlider } from 'keen-slider/react'
|
||||
import { useState } from 'react'
|
||||
|
||||
@ -43,27 +44,30 @@ const Events = () => {
|
||||
|
||||
return (
|
||||
<Section className={s['section']}>
|
||||
<Container className={s.container}>
|
||||
<div className={s.heading}>
|
||||
<Container className={s['container']}>
|
||||
<div className={s['header']}>
|
||||
<Heading as="h2" variant="lg">
|
||||
Events
|
||||
</Heading>
|
||||
<span>
|
||||
We’d love to meet you in person. Find us at a conference near you:
|
||||
</span>
|
||||
<div className={s.gradient} />
|
||||
<div className={s['gradient']} />
|
||||
</div>
|
||||
</Container>
|
||||
<div className={s['slider__container']}>
|
||||
<div className={`${s.eventsContainer} keen-slider`} ref={sliderRef}>
|
||||
<div
|
||||
className={clsx(s['events__container'], 'keen-slider')}
|
||||
ref={sliderRef}
|
||||
>
|
||||
{events.map((event, i) => (
|
||||
<Card key={i} data={event} className={`keen-slider__slide`} />
|
||||
<Card key={i} data={event} className="keen-slider__slide" />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<Container>
|
||||
{loaded && slider.current && (
|
||||
<div className={s.navigation}>
|
||||
<div className={s['navigation']}>
|
||||
<ArrowSlider
|
||||
onClick={(e: any) =>
|
||||
e.stopPropagation() || slider.current?.prev()
|
||||
|
||||
@ -3,62 +3,33 @@
|
||||
.section {
|
||||
display: grid;
|
||||
align-items: center;
|
||||
gap: tovw(140px, 'default', 80px) tovw(130px, 'default', 30px);
|
||||
justify-content: center;
|
||||
max-width: 100%;
|
||||
min-height: calc(var(--vh) * 100);
|
||||
gap: tovw(140px, 'default', 80px) tovw(130px, 'default', 30px);
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
grid-template-rows: repeat(2, 1fr);
|
||||
min-height: calc(var(--vh) * 100);
|
||||
max-width: 100%;
|
||||
|
||||
@media screen and (max-width: 800px) {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100vw;
|
||||
min-height: 100vh;
|
||||
padding: 0 tovw(27px, 'tablet', 27px);
|
||||
padding-bottom: tovw(18px, 'mobile');
|
||||
min-height: 100vh;
|
||||
}
|
||||
}
|
||||
|
||||
.videoContainer {
|
||||
position: absolute;
|
||||
z-index: -3;
|
||||
padding-top: tovw(220px, 'default', 90px);
|
||||
right: tovw(620px, 'default', 80px);
|
||||
.video__container {
|
||||
position: absolute;
|
||||
z-index: -3;
|
||||
right: tovw(620px, 'default', 80px);
|
||||
padding-top: tovw(220px, 'default', 90px);
|
||||
|
||||
@media screen and (max-width: 800px) {
|
||||
position: unset;
|
||||
padding-top: tovw(55px, 'mobile');
|
||||
margin-bottom: tovw(-85px, 'mobile');
|
||||
}
|
||||
|
||||
&::after {
|
||||
position: absolute;
|
||||
content: '';
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
z-index: 1;
|
||||
width: 100%;
|
||||
height: 80%;
|
||||
background: radial-gradient(
|
||||
ellipse,
|
||||
rgb(3 3 3 / 0) 25%,
|
||||
rgb(3 3 3 / 0.9648) 60%,
|
||||
rgb(3 3 3 / 1) 95%
|
||||
);
|
||||
|
||||
@media screen and (max-width: 800px) {
|
||||
bottom: unset;
|
||||
top: tovw(-260px, 'mobile', -260px);
|
||||
height: 100%;
|
||||
background: radial-gradient(
|
||||
ellipse,
|
||||
rgb(3 3 3 / 0) 25%,
|
||||
rgb(3 3 3 / 0.9648) 55%,
|
||||
rgb(3 3 3 / 1) 85%
|
||||
);
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 800px) {
|
||||
position: unset;
|
||||
margin-bottom: tovw(-85px, 'mobile');
|
||||
padding-top: tovw(55px, 'mobile');
|
||||
}
|
||||
|
||||
video {
|
||||
@ -69,98 +40,127 @@
|
||||
}
|
||||
}
|
||||
|
||||
.headingContainer {
|
||||
justify-self: end;
|
||||
align-self: end;
|
||||
width: tovw(580px, 'default', 80px);
|
||||
|
||||
@media screen and (max-width: 800px) {
|
||||
display: flex;
|
||||
align-self: flex-start;
|
||||
align-items: flex-end;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin: 0;
|
||||
text-shadow: 0px 0px tovw(20px, 'default', 20px) rgb(255 255 255 / 0.4);
|
||||
|
||||
@media screen and (max-width: 800px) {
|
||||
font-size: tovw(50px, 'mobile');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.textContainer {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: tovw(60px, 'default', 20px);
|
||||
align-self: start;
|
||||
grid-area: 2 / 2 / 3 / 3;
|
||||
|
||||
@media screen and (max-width: 800px) {
|
||||
width: 100%;
|
||||
gap: tovw(120px, 'default', 30px);
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
width: tovw(500px, 'default', 370px);
|
||||
line-height: 1.3;
|
||||
|
||||
@media screen and (max-width: 800px) {
|
||||
width: tovw(150px, 'mobile', 320px);
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
width: fit-content;
|
||||
}
|
||||
}
|
||||
|
||||
.buttonsContainer {
|
||||
display: flex;
|
||||
gap: tovw(24px, 'default', 20px);
|
||||
|
||||
@media screen and (max-width: 800px) {
|
||||
width: 100%;
|
||||
flex-direction: column;
|
||||
gap: tovw(20px, 'mobile');
|
||||
}
|
||||
}
|
||||
|
||||
.gradient {
|
||||
&::after {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
z-index: 1;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: tovw(740px, 'default', 740px);
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
rgb(0 0 244 / 0.9) 1.63%,
|
||||
rgb(0 0 244 / 0) 99.89%
|
||||
height: 80%;
|
||||
content: '';
|
||||
background: radial-gradient(
|
||||
ellipse,
|
||||
rgb(3 3 3 / 0) 25%,
|
||||
rgb(3 3 3 / 0.9648) 60%,
|
||||
rgb(3 3 3 / 1) 95%
|
||||
);
|
||||
mix-blend-mode: screen;
|
||||
z-index: -1;
|
||||
|
||||
@media screen and (max-width: 800px) {
|
||||
height: 70%;
|
||||
top: tovw(-260px, 'mobile', -260px);
|
||||
bottom: unset;
|
||||
height: 100%;
|
||||
transform: rotate(90deg);
|
||||
background: radial-gradient(
|
||||
ellipse,
|
||||
rgb(3 3 3 / 0) 25%,
|
||||
rgb(3 3 3 / 0.9648) 55%,
|
||||
rgb(3 3 3 / 1) 85%
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.header {
|
||||
align-self: end;
|
||||
width: tovw(580px, 'default', 80px);
|
||||
justify-self: end;
|
||||
|
||||
@media screen and (max-width: 800px) {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
align-self: flex-start;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
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');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
display: flex;
|
||||
align-self: start;
|
||||
flex-direction: column;
|
||||
gap: tovw(60px, 'default', 20px);
|
||||
grid-area: 2 / 2 / 3 / 3;
|
||||
|
||||
@media screen and (max-width: 800px) {
|
||||
width: 100%;
|
||||
gap: tovw(120px, 'default', 30px);
|
||||
}
|
||||
|
||||
p {
|
||||
line-height: 1.3;
|
||||
width: tovw(500px, 'default', 370px);
|
||||
margin: 0;
|
||||
|
||||
@media screen and (max-width: 800px) {
|
||||
width: tovw(150px, 'mobile', 320px);
|
||||
}
|
||||
}
|
||||
|
||||
.arrow {
|
||||
position: absolute;
|
||||
margin-left: tovw(-58px, 'default', -58px);
|
||||
width: tovw(22px, 'default', 15px);
|
||||
height: tovw(22px, 'default', 15px);
|
||||
a {
|
||||
width: fit-content;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 800px) {
|
||||
display: none;
|
||||
}
|
||||
.buttons__container {
|
||||
display: flex;
|
||||
gap: tovw(24px, 'default', 20px);
|
||||
|
||||
@media screen and (max-width: 800px) {
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
gap: tovw(20px, 'mobile');
|
||||
}
|
||||
}
|
||||
|
||||
.gradient {
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: tovw(740px, 'default', 740px);
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
rgb(0 0 244 / 0.9) 1.63%,
|
||||
rgb(0 0 244 / 0) 99.89%
|
||||
);
|
||||
mix-blend-mode: screen;
|
||||
|
||||
@media screen and (max-width: 800px) {
|
||||
height: 70%;
|
||||
}
|
||||
}
|
||||
|
||||
.arrow {
|
||||
position: absolute;
|
||||
width: tovw(22px, 'default', 15px);
|
||||
height: tovw(22px, 'default', 15px);
|
||||
margin-left: tovw(-58px, 'default', -58px);
|
||||
|
||||
@media screen and (max-width: 800px) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.arrowMobile {
|
||||
&--mobile {
|
||||
width: tovw(25px, 'default', 25px);
|
||||
height: tovw(25px, 'default', 25px);
|
||||
margin-bottom: tovw(8px, 'default', 7px);
|
||||
|
||||
@ -9,26 +9,26 @@ import s from './hero.module.scss'
|
||||
const Hero = () => {
|
||||
return (
|
||||
<Section className={s['section']}>
|
||||
<div className={s.gradient}></div>
|
||||
<div className={s.videoContainer}>
|
||||
<div className={s['gradient']}></div>
|
||||
<div className={s['video__container']}>
|
||||
<video autoPlay controls={false} loop muted preload="true">
|
||||
<source src="/videos/banner-community.mp4" type="video/mp4" />
|
||||
</video>
|
||||
</div>
|
||||
<div className={s.headingContainer}>
|
||||
<div className={s['header']}>
|
||||
<Heading as="h1" variant="xl">
|
||||
Laconic Community
|
||||
</Heading>
|
||||
<Arrow className={s.arrowMobile} />
|
||||
<Arrow className={s['arrow--mobile']} />
|
||||
</div>
|
||||
<div className={s.textContainer}>
|
||||
<Arrow className={s.arrow} />
|
||||
<div className={s['content']}>
|
||||
<Arrow className={s['arrow']} />
|
||||
<p>
|
||||
Join us as we accelerate blockchain development and interoperability
|
||||
by expanding access to verifiable data.
|
||||
</p>
|
||||
<Link href="https://google.com">LEARN MORE</Link>
|
||||
<div className={s.buttonsContainer}>
|
||||
<div className={s['buttons__container']}>
|
||||
<Button size="large" variant="primary">
|
||||
CHAT WITH US
|
||||
</Button>
|
||||
|
||||
@ -17,15 +17,15 @@ import s from './socials.module.scss'
|
||||
const Socials = () => {
|
||||
return (
|
||||
<Section className={s['section']}>
|
||||
<Container className={s.container}>
|
||||
<Container className={s['container']}>
|
||||
<img
|
||||
alt="planet figure"
|
||||
className={s.planetImage}
|
||||
alt="Planet"
|
||||
className={s['planet--image']}
|
||||
loading="lazy"
|
||||
src="/images/community/socials/planet.png"
|
||||
/>
|
||||
<div>
|
||||
<div className={s.headingContainer}>
|
||||
<div className={s['header']}>
|
||||
<Heading as="h2" variant="xl" centered={false}>
|
||||
Socials
|
||||
</Heading>
|
||||
@ -35,9 +35,9 @@ const Socials = () => {
|
||||
</div>
|
||||
<Line className={s['line']} height={144} />
|
||||
</div>
|
||||
<div className={s.socialIconsContainer}>
|
||||
<div className={s['icons__container']}>
|
||||
<span>GET IN TOUCH</span>
|
||||
<div className={s.iconsGrid}>
|
||||
<div className={s['grid']}>
|
||||
<button aria-label="instagram">
|
||||
<Instagram />
|
||||
</button>
|
||||
|
||||
@ -7,151 +7,151 @@
|
||||
@media screen and (max-width: 800px) {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.container {
|
||||
display: grid;
|
||||
grid-template-columns: 1.7fr 1fr;
|
||||
grid-template-rows: repeat(2, 1fr);
|
||||
gap: tovw(70px, 'default', 20px) 0;
|
||||
.container {
|
||||
display: grid;
|
||||
grid-template-columns: 1.7fr 1fr;
|
||||
grid-template-rows: repeat(2, 1fr);
|
||||
gap: tovw(70px, 'default', 20px) 0;
|
||||
|
||||
@media screen and (max-width: 800px) {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: tovw(5px, 'mobile', 15px);
|
||||
}
|
||||
}
|
||||
|
||||
.headingContainer {
|
||||
@media screen and (max-width: 800px) {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
gap: tovw(5px, 'mobile', 15px);
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 800px) {
|
||||
margin-top: tovw(-135px, 'mobile', -150px);
|
||||
}
|
||||
.header {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
|
||||
h2 {
|
||||
margin: 0;
|
||||
text-shadow: 0px 0px tovw(20px, 'default', 20px) rgb(255 255 255 / 0.4);
|
||||
|
||||
@media screen and (max-width: 800px) {
|
||||
font-size: tovw(42px, 'default', 36px);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&:nth-child(1) {
|
||||
padding-left: tovw(125px, 'default', 60px);
|
||||
|
||||
@media screen and (max-width: 800px) {
|
||||
padding-left: unset;
|
||||
}
|
||||
}
|
||||
|
||||
&:nth-child(2) {
|
||||
align-self: end;
|
||||
width: tovw(465px, 'default', 80px);
|
||||
|
||||
@media screen and (max-width: 800px) {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 800px) {
|
||||
margin-top: tovw(-135px, 'mobile', -150px);
|
||||
}
|
||||
|
||||
.line {
|
||||
position: absolute;
|
||||
left: tovw(770px, 'default', 300px);
|
||||
top: tovw(170px, 'default', 120px);
|
||||
transform: rotate(270deg) scale(1.6);
|
||||
width: tovw(173px, 'default', 120px);
|
||||
height: tovw(72px, 'default', 40px);
|
||||
h2 {
|
||||
margin: 0;
|
||||
text-shadow: 0 0 tovw(20px, 'default', 20px) rgb(255 255 255 / 0.4);
|
||||
|
||||
@media screen and (max-width: 800px) {
|
||||
transform: rotate(0deg) translateY(35%) scaleX(1.6);
|
||||
height: tovw(80px, 'default', 38px);
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin: auto;
|
||||
top: unset;
|
||||
}
|
||||
}
|
||||
|
||||
.socialIconsContainer {
|
||||
grid-area: 2 / 2 / 3 / 3;
|
||||
|
||||
@media screen and (max-width: 800px) {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
font-size: tovw(42px, 'default', 36px);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
span {
|
||||
font-family: var(--font-dm-mono), sans-serif;
|
||||
font-size: tovw(18px, 'default', 12px);
|
||||
letter-spacing: -0.02rem;
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
transform: translate(-220%, -50%);
|
||||
display: block;
|
||||
content: '';
|
||||
width: tovw(24px, 'default', 15px);
|
||||
height: tovw(18px, 'default', 15px);
|
||||
border-bottom: tovw(2px, 'default', 2px) solid blue;
|
||||
|
||||
@media screen and (max-width: 800px) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
&:nth-child(1) {
|
||||
padding-left: tovw(125px, 'default', 60px);
|
||||
|
||||
@media screen and (max-width: 800px) {
|
||||
text-align: center;
|
||||
padding-left: unset;
|
||||
}
|
||||
}
|
||||
|
||||
.iconsGrid {
|
||||
width: tovw(400px, 'default', 255px);
|
||||
padding-top: tovw(30px, 'default', 15px);
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: tovw(20px, 'default', 12px);
|
||||
&:nth-child(2) {
|
||||
align-self: end;
|
||||
width: tovw(465px, 'default', 80px);
|
||||
|
||||
@media screen and (max-width: 800px) {
|
||||
place-self: center;
|
||||
place-content: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
button {
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
place-content: center;
|
||||
padding: tovw(13px, 'default', 8px);
|
||||
height: tovw(55px, 'default', 38px);
|
||||
width: tovw(72px, 'default', 54px);
|
||||
border: tovw(1px, 'default', 1px) solid #fff;
|
||||
border-radius: tovw(30px, 'default', 20px);
|
||||
background-color: var(--color-black);
|
||||
transition: filter 200ms;
|
||||
|
||||
&:hover {
|
||||
filter: invert(1);
|
||||
}
|
||||
}
|
||||
|
||||
svg {
|
||||
width: tovw(27px, 'default', 20px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.planetImage {
|
||||
position: absolute;
|
||||
padding-top: tovw(160px, 'default', 80px);
|
||||
width: tovw(725px, 'default', 320px);
|
||||
|
||||
@media screen and (max-width: 800px) {
|
||||
padding-top: unset;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.line {
|
||||
position: absolute;
|
||||
top: tovw(170px, 'default', 120px);
|
||||
left: tovw(770px, 'default', 300px);
|
||||
width: tovw(173px, 'default', 120px);
|
||||
height: tovw(72px, 'default', 40px);
|
||||
transform: rotate(270deg) scale(1.6);
|
||||
|
||||
@media screen and (max-width: 800px) {
|
||||
top: unset;
|
||||
right: 0;
|
||||
left: 0;
|
||||
height: tovw(80px, 'default', 38px);
|
||||
margin: auto;
|
||||
transform: rotate(0deg) translateY(35%) scaleX(1.6);
|
||||
}
|
||||
}
|
||||
|
||||
.icons__container {
|
||||
grid-area: 2 / 2 / 3 / 3;
|
||||
|
||||
@media screen and (max-width: 800px) {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
span {
|
||||
font-family: var(--font-dm-mono), sans-serif;
|
||||
font-size: tovw(18px, 'default', 12px);
|
||||
letter-spacing: -0.02rem;
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
display: block;
|
||||
width: tovw(24px, 'default', 15px);
|
||||
height: tovw(18px, 'default', 15px);
|
||||
content: '';
|
||||
transform: translate(-220%, -50%);
|
||||
border-bottom: tovw(2px, 'default', 2px) solid blue;
|
||||
|
||||
@media screen and (max-width: 800px) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 800px) {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.grid {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
width: tovw(400px, 'default', 255px);
|
||||
padding-top: tovw(30px, 'default', 15px);
|
||||
gap: tovw(20px, 'default', 12px);
|
||||
|
||||
@media screen and (max-width: 800px) {
|
||||
place-self: center;
|
||||
place-content: center;
|
||||
}
|
||||
|
||||
button {
|
||||
display: flex;
|
||||
width: tovw(72px, 'default', 54px);
|
||||
height: tovw(55px, 'default', 38px);
|
||||
padding: tovw(13px, 'default', 8px);
|
||||
cursor: pointer;
|
||||
transition: filter 200ms;
|
||||
border: tovw(1px, 'default', 1px) solid #fff;
|
||||
border-radius: tovw(30px, 'default', 20px);
|
||||
background-color: var(--color-black);
|
||||
place-content: center;
|
||||
|
||||
&:hover {
|
||||
filter: invert(1);
|
||||
}
|
||||
}
|
||||
|
||||
svg {
|
||||
width: tovw(27px, 'default', 20px);
|
||||
}
|
||||
}
|
||||
|
||||
.planet--image {
|
||||
position: absolute;
|
||||
width: tovw(725px, 'default', 320px);
|
||||
padding-top: tovw(160px, 'default', 80px);
|
||||
|
||||
@media screen and (max-width: 800px) {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
padding-top: unset;
|
||||
}
|
||||
}
|
||||
|
||||
@ -4,19 +4,19 @@
|
||||
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);
|
||||
padding: tovw(100px, 'default', 50px) tovw(221px, 'default', 150px);
|
||||
padding-bottom: 0;
|
||||
|
||||
@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);
|
||||
padding: 0 tovw(16px, 'tablet', 16px);
|
||||
padding-top: tovw(70px, 'tablet', 70px);
|
||||
}
|
||||
|
||||
h1 {
|
||||
@ -27,31 +27,31 @@
|
||||
font-size: tovw(50px, 'mobile');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.arrow {
|
||||
display: none;
|
||||
.arrow {
|
||||
display: none;
|
||||
|
||||
@media screen and (max-width: 800px) {
|
||||
display: unset;
|
||||
position: relative;
|
||||
padding-top: tovw(17px, 'mobile', 17px);
|
||||
width: tovw(18px, 'mobile', 18px);
|
||||
}
|
||||
@media screen and (max-width: 800px) {
|
||||
position: relative;
|
||||
display: unset;
|
||||
width: tovw(18px, 'mobile', 18px);
|
||||
padding-top: tovw(17px, 'mobile', 17px);
|
||||
}
|
||||
}
|
||||
|
||||
.gradient {
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: -1;
|
||||
width: 100%;
|
||||
height: tovw(740px, 'default', 740px);
|
||||
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) {
|
||||
|
||||
@ -10,7 +10,7 @@ const Hero = () => {
|
||||
<Heading as="h1" variant="xl">
|
||||
Privacy Policy
|
||||
</Heading>
|
||||
<Arrow className={s.arrow} />
|
||||
<Arrow className={s['arrow']} />
|
||||
</Section>
|
||||
)
|
||||
}
|
||||
|
||||
@ -8,12 +8,12 @@ import { privacyPolicy } from './privacypolicy'
|
||||
const PrivacyPolicy = () => {
|
||||
return (
|
||||
<Section className={s['section']}>
|
||||
<div className={s.header}>
|
||||
<div className={s['header']}>
|
||||
<span>LAST UPDATE</span>
|
||||
<span className={s.separator}>—</span>
|
||||
<span className={s['separator']}>—</span>
|
||||
<span>{privacyPolicy.updatedOn}</span>
|
||||
</div>
|
||||
<Container className={s.container}>
|
||||
<Container className={s['container']}>
|
||||
<p>{privacyPolicy.text.block01.pg01}</p>
|
||||
<p>{privacyPolicy.text.block01.pg02}</p>
|
||||
<p>{privacyPolicy.text.block01.pg03}</p>
|
||||
|
||||
@ -4,19 +4,19 @@
|
||||
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);
|
||||
padding: tovw(100px, 'default', 50px) tovw(221px, 'default', 150px);
|
||||
padding-bottom: 0;
|
||||
|
||||
@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);
|
||||
padding: 0 tovw(16px, 'tablet', 16px);
|
||||
padding-top: tovw(70px, 'tablet', 70px);
|
||||
}
|
||||
|
||||
h1 {
|
||||
@ -27,31 +27,31 @@
|
||||
font-size: tovw(50px, 'mobile');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.arrow {
|
||||
display: none;
|
||||
.arrow {
|
||||
display: none;
|
||||
|
||||
@media screen and (max-width: 800px) {
|
||||
display: unset;
|
||||
position: relative;
|
||||
padding-top: tovw(17px, 'mobile', 17px);
|
||||
width: tovw(18px, 'mobile', 18px);
|
||||
}
|
||||
@media screen and (max-width: 800px) {
|
||||
position: relative;
|
||||
display: unset;
|
||||
width: tovw(18px, 'mobile', 18px);
|
||||
padding-top: tovw(17px, 'mobile', 17px);
|
||||
}
|
||||
}
|
||||
|
||||
.gradient {
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: -1;
|
||||
width: 100%;
|
||||
height: tovw(740px, 'default', 740px);
|
||||
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) {
|
||||
|
||||
@ -10,7 +10,7 @@ const Hero = () => {
|
||||
<Heading as="h1" variant="xl">
|
||||
Terms of Use
|
||||
</Heading>
|
||||
<Arrow className={s.arrow} />
|
||||
<Arrow className={s['arrow']} />
|
||||
</Section>
|
||||
)
|
||||
}
|
||||
|
||||
@ -8,12 +8,12 @@ import s from './termsofuse.module.scss'
|
||||
const TermsOfUse = () => {
|
||||
return (
|
||||
<Section className={s['section']}>
|
||||
<div className={s.header}>
|
||||
<div className={s['header']}>
|
||||
<span>LAST UPDATE</span>
|
||||
<span className={s.separator}>—</span>
|
||||
<span className={s['separator']}>—</span>
|
||||
<span>{termsOfUse.updatedOn}</span>
|
||||
</div>
|
||||
<Container className={s.container}>
|
||||
<Container className={s['container']}>
|
||||
<p>{termsOfUse.text.block01.pg01}</p>
|
||||
<p>{termsOfUse.text.block01.pg02}</p>
|
||||
<p>{termsOfUse.text.block01.pg03}</p>
|
||||
|
||||
@ -12,43 +12,43 @@
|
||||
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);
|
||||
line-height: 1.9;
|
||||
margin: tovw(64px, 'default', 40px) 0;
|
||||
|
||||
@media screen and (max-width: 800px) {
|
||||
line-height: 1.6;
|
||||
font-size: tovw(15px, 'tablet', 15px);
|
||||
line-height: 1.6;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.container {
|
||||
@media screen and (max-width: 800px) {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.header {
|
||||
font-family: var(--font-dm-mono), sans-serif;
|
||||
font-size: tovw(18px, 'default', 16px);
|
||||
display: flex;
|
||||
margin-bottom: tovw(130px, 'default', 36px);
|
||||
padding-bottom: tovw(13px, 'default', 10px);
|
||||
border-bottom: 1px solid var(--color-grey-light);
|
||||
gap: tovw(15px, 'default', 10px);
|
||||
|
||||
@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);
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user