Pre Footer (#1)
This commit is contained in:
Nazareno Oviedo
@@ -1,10 +1,10 @@
|
||||
import Image from 'next/image'
|
||||
// import Image from 'next/image'
|
||||
import * as React from 'react'
|
||||
|
||||
import { DURATION, gsap } from '~/lib/gsap'
|
||||
import { usePageTransition } from '~/lib/gsap/page-transitions'
|
||||
|
||||
import cashSrc from '../../../../public/images/cash-transition.png'
|
||||
// import cashSrc from '../../../../public/images/cash-transition.png'
|
||||
import s from './cash-transition.module.scss'
|
||||
|
||||
export const CashTransition = React.memo(() => {
|
||||
@@ -46,14 +46,14 @@ export const CashTransition = React.memo(() => {
|
||||
height: 'calc(120vh + max(12vh, 12vw))'
|
||||
}}
|
||||
>
|
||||
<Image
|
||||
{/* <Image
|
||||
src={cashSrc}
|
||||
alt="cash"
|
||||
objectFit="cover"
|
||||
layout="fill"
|
||||
objectPosition="top"
|
||||
loading="eager"
|
||||
/>
|
||||
/> */}
|
||||
</div>
|
||||
)
|
||||
})
|
||||
|
||||
@@ -1,5 +1,130 @@
|
||||
@import '~/css/helpers';
|
||||
|
||||
.pre__footer {
|
||||
max-width: tovw(753px, 'default', 375px);
|
||||
text-align: center;
|
||||
|
||||
.isotype {
|
||||
margin-bottom: tovw(54px, 'default', 35px);
|
||||
width: tovw(94px, 'default', 52px);
|
||||
height: tovw(95px, 'default', 53px);
|
||||
}
|
||||
|
||||
&--section {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: calc(var(--vw) * 70);
|
||||
@media screen and (max-width: 800px) {
|
||||
background-image: url('/images/pre-footer-mobile.png');
|
||||
background-position: 50%;
|
||||
background-size: cover;
|
||||
height: calc(var(--vw) * 95);
|
||||
}
|
||||
|
||||
&::after,
|
||||
&::before {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
z-index: -1;
|
||||
background: radial-gradient(
|
||||
circle,
|
||||
rgb(4 4 4 / 0.5) 45%,
|
||||
hsl(0deg 0% 100% / 0) 100%
|
||||
);
|
||||
width: 80%;
|
||||
height: calc(var(--vh) * 70);
|
||||
content: '';
|
||||
filter: blur(tovw(160px, 'default', 80px));
|
||||
@media screen and (max-width: 800px) {
|
||||
content: normal;
|
||||
}
|
||||
}
|
||||
|
||||
&::before {
|
||||
background: radial-gradient(
|
||||
ellipse farthest-corner at center center,
|
||||
rgb(4 4 4 / 0.15) 45%,
|
||||
#000 0
|
||||
);
|
||||
width: 120%;
|
||||
height: 105%;
|
||||
filter: blur(tovw(100px, 'default', 50px));
|
||||
}
|
||||
|
||||
.video {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: -2;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
pointer-events: none;
|
||||
user-select: none;
|
||||
|
||||
&::after {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
z-index: -1;
|
||||
background: radial-gradient(circle, transparent 0, #fdbb2d 100%);
|
||||
height: calc(var(--vh) * 63);
|
||||
content: '';
|
||||
filter: blur(30px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
form {
|
||||
position: relative;
|
||||
margin: tovw(62px, 'default', 48px) auto 0;
|
||||
width: max-content;
|
||||
@media screen and (max-width: 800px) {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
input {
|
||||
border: none;
|
||||
border-bottom: tovw(1px, 'default', 1px) solid var(--color-white);
|
||||
border-radius: 0;
|
||||
background: transparent;
|
||||
padding-bottom: tovw(10px, 'default', 10px);
|
||||
width: tovw(440px, 'default', 320px);
|
||||
letter-spacing: tovw(-1px, 'default', -1px);
|
||||
color: var(--color-white);
|
||||
font-family: var(--font-tt-hoves);
|
||||
font-size: tovw(24px, 'default', 18px);
|
||||
appearance: none;
|
||||
|
||||
&::placeholder {
|
||||
color: var(--color-grey-light);
|
||||
}
|
||||
|
||||
& + button {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 0;
|
||||
transform: translateY(-80%);
|
||||
margin: 0;
|
||||
border: none;
|
||||
background: none;
|
||||
cursor: pointer;
|
||||
padding: 0;
|
||||
width: 11px;
|
||||
height: 11px;
|
||||
appearance: none;
|
||||
|
||||
svg {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.footer {
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
@@ -7,8 +132,8 @@
|
||||
.container {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding-bottom: tovw(56px, 'default', 48px);
|
||||
border-bottom: tovw(1px, 'default', 1px) solid var(--color-grey-light);
|
||||
padding-bottom: tovw(56px, 'default', 48px);
|
||||
|
||||
nav {
|
||||
display: flex;
|
||||
@@ -21,7 +146,6 @@
|
||||
row-gap: tovw(44px, 'tablet', 44px);
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1024px) {
|
||||
flex-direction: column;
|
||||
}
|
||||
@@ -36,8 +160,8 @@
|
||||
line-height: 1.35;
|
||||
|
||||
&:first-of-type {
|
||||
line-height: 1;
|
||||
margin-bottom: tovw(12px, 'default', 10px);
|
||||
line-height: 1;
|
||||
|
||||
a {
|
||||
font-weight: 500;
|
||||
@@ -86,10 +210,10 @@
|
||||
|
||||
a,
|
||||
p {
|
||||
font-size: tovw(18px, 'default', 14px);
|
||||
line-height: 1;
|
||||
margin: 0;
|
||||
line-height: 1;
|
||||
color: var(--color-grey-light);
|
||||
font-size: tovw(18px, 'default', 14px);
|
||||
}
|
||||
|
||||
ul {
|
||||
|
||||
@@ -1,5 +1,10 @@
|
||||
import { LogoFooter } from '~/components/icons/logo'
|
||||
import clsx from 'clsx'
|
||||
|
||||
import { ArrowLink } from '~/components/icons/arrow'
|
||||
import { Isotype, LogoFooter } from '~/components/icons/logo'
|
||||
import { Container } from '~/components/layout/container'
|
||||
import Section from '~/components/layout/section'
|
||||
import Heading from '~/components/primitives/heading'
|
||||
import Link from '~/components/primitives/link'
|
||||
|
||||
import {
|
||||
@@ -13,100 +18,135 @@ import s from './footer.module.scss'
|
||||
|
||||
export const Footer = () => {
|
||||
return (
|
||||
<footer className={s.footer}>
|
||||
<Container className={s['container']}>
|
||||
<div className={s['logo']}>
|
||||
<Link variant="unstyled" href="/">
|
||||
<LogoFooter />
|
||||
</Link>
|
||||
</div>
|
||||
<nav>
|
||||
<ul>
|
||||
{DevelopersLinks.map((link) => {
|
||||
return (
|
||||
<li key={link.title}>
|
||||
<Link href={link.href} variant="nav">
|
||||
{link.title}
|
||||
</Link>
|
||||
</li>
|
||||
)
|
||||
})}
|
||||
</ul>
|
||||
<ul>
|
||||
{ProductsLinks.map((link) => {
|
||||
return (
|
||||
<li key={link.title}>
|
||||
<Link href={link.href} variant="nav">
|
||||
{link.title}
|
||||
</Link>
|
||||
</li>
|
||||
)
|
||||
})}
|
||||
</ul>
|
||||
<ul>
|
||||
{AboutLinks.map((link) => {
|
||||
return (
|
||||
<li key={link.title}>
|
||||
<Link href={link.href} variant="nav">
|
||||
{link.title}
|
||||
</Link>
|
||||
</li>
|
||||
)
|
||||
})}
|
||||
</ul>
|
||||
<ul>
|
||||
{CommunityLinks.map((link) => {
|
||||
return (
|
||||
<li key={link.title}>
|
||||
<Link href={link.href} variant="nav">
|
||||
{link.title}
|
||||
</Link>
|
||||
</li>
|
||||
)
|
||||
})}
|
||||
</ul>
|
||||
<ul className={s['connect__links']}>
|
||||
<li>
|
||||
<Link href="/connect" variant="nav">
|
||||
Connect
|
||||
</Link>
|
||||
</li>
|
||||
<div>
|
||||
{ConnectLinks.map((link) => {
|
||||
<>
|
||||
<Section className={s['pre__footer--section']}>
|
||||
<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' }}
|
||||
>
|
||||
Sign-up to our newsletter to stay in touch with <br /> the latest.
|
||||
</Heading>
|
||||
<form action="">
|
||||
<input
|
||||
placeholder="Enter your email to stay updated"
|
||||
required
|
||||
type="email"
|
||||
/>
|
||||
<button>
|
||||
<ArrowLink />
|
||||
</button>
|
||||
</form>
|
||||
</Container>
|
||||
</Section>
|
||||
<footer className={s.footer}>
|
||||
<Container className={s['container']}>
|
||||
<div className={s['logo']}>
|
||||
<Link variant="unstyled" href="/">
|
||||
<LogoFooter />
|
||||
</Link>
|
||||
</div>
|
||||
<nav>
|
||||
<ul>
|
||||
{DevelopersLinks.map((link) => {
|
||||
return (
|
||||
<li key={link.title}>
|
||||
<Link href={link.href} variant="unstyled">
|
||||
<span className="sr-only">{link.title}</span>
|
||||
{link.logo && link.logo}
|
||||
<Link href={link.href} variant="nav">
|
||||
{link.title}
|
||||
</Link>
|
||||
</li>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</ul>
|
||||
</nav>
|
||||
</Container>
|
||||
<Container>
|
||||
<nav className={s['sub__footer']}>
|
||||
<ul>
|
||||
<div>
|
||||
</ul>
|
||||
<ul>
|
||||
{ProductsLinks.map((link) => {
|
||||
return (
|
||||
<li key={link.title}>
|
||||
<Link href={link.href} variant="nav">
|
||||
{link.title}
|
||||
</Link>
|
||||
</li>
|
||||
)
|
||||
})}
|
||||
</ul>
|
||||
<ul>
|
||||
{AboutLinks.map((link) => {
|
||||
return (
|
||||
<li key={link.title}>
|
||||
<Link href={link.href} variant="nav">
|
||||
{link.title}
|
||||
</Link>
|
||||
</li>
|
||||
)
|
||||
})}
|
||||
</ul>
|
||||
<ul>
|
||||
{CommunityLinks.map((link) => {
|
||||
return (
|
||||
<li key={link.title}>
|
||||
<Link href={link.href} variant="nav">
|
||||
{link.title}
|
||||
</Link>
|
||||
</li>
|
||||
)
|
||||
})}
|
||||
</ul>
|
||||
<ul className={s['connect__links']}>
|
||||
<li>
|
||||
<Link href="/privacy-policy" variant="nav">
|
||||
Privacy Policy
|
||||
<Link href="/connect" variant="nav">
|
||||
Connect
|
||||
</Link>
|
||||
</li>
|
||||
<div>
|
||||
{ConnectLinks.map((link) => {
|
||||
return (
|
||||
<li key={link.title}>
|
||||
<Link href={link.href} variant="unstyled">
|
||||
<span className="sr-only">{link.title}</span>
|
||||
{link.logo && link.logo}
|
||||
</Link>
|
||||
</li>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</ul>
|
||||
</nav>
|
||||
</Container>
|
||||
<Container>
|
||||
<nav className={s['sub__footer']}>
|
||||
<ul>
|
||||
<div>
|
||||
<li>
|
||||
<Link href="/privacy-policy" variant="nav">
|
||||
Privacy Policy
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link href="/terms-of-use" variant="nav">
|
||||
Terms of Use
|
||||
</Link>
|
||||
</li>
|
||||
</div>
|
||||
<li>
|
||||
<Link href="/terms-of-use" variant="nav">
|
||||
Terms of Use
|
||||
</Link>
|
||||
<p>Laconic, The Source of Proof</p>
|
||||
</li>
|
||||
</div>
|
||||
<li>
|
||||
<p>Laconic, The Source of Proof</p>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</Container>
|
||||
</footer>
|
||||
</ul>
|
||||
</nav>
|
||||
</Container>
|
||||
</footer>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -4,6 +4,7 @@
|
||||
font-family: var(--font-heading);
|
||||
font-weight: 400;
|
||||
font-kerning: none;
|
||||
margin: 0;
|
||||
|
||||
&.centered {
|
||||
text-align: center;
|
||||
@@ -21,8 +22,12 @@
|
||||
}
|
||||
|
||||
&--md {
|
||||
font-size: tovw(58px, 'default', 42px);
|
||||
font-size: tovw(58px, 'default', 30px);
|
||||
line-height: 1.1;
|
||||
|
||||
@media screen and (max-width: 800px) {
|
||||
line-height: 1.24;
|
||||
}
|
||||
}
|
||||
|
||||
&--sm {
|
||||
|
||||
+2
-1
@@ -1,7 +1,8 @@
|
||||
@import './normalize.css';
|
||||
@import './fonts.css';
|
||||
@import './helpers';
|
||||
@import '../lib/locomotive-scroll/scroll.css';
|
||||
|
||||
// @import '../lib/locomotive-scroll/scroll.css';
|
||||
|
||||
:root {
|
||||
--inspect-color: #f00;
|
||||
|
||||
Reference in New Issue
Block a user