diff --git a/web/e.cash/components/h2/index.js b/web/e.cash/components/h2/index.js new file mode 100644 index 000000000..2ba2239b0 --- /dev/null +++ b/web/e.cash/components/h2/index.js @@ -0,0 +1,18 @@ +import GlitchText from '/components/glitch-text'; +import Image from 'next/image'; +import h2graphic from '/public/images/h2-graphic.svg'; +import { StyledH3, StyledH2, H2Image } from './styles'; + +export default function H2({ subtext, text }) { + return ( + <> + {subtext} + + + eCash + + + + + ); +} diff --git a/web/e.cash/components/h2/styles.js b/web/e.cash/components/h2/styles.js new file mode 100644 index 000000000..a78015dbb --- /dev/null +++ b/web/e.cash/components/h2/styles.js @@ -0,0 +1,30 @@ +import styled from 'styled-components'; + +export const StyledH3 = styled.h3` + margin: 0; + font-size: 20px; + font-weight: 400; + color: ${props => props.theme.colors.primaryLight}; + line-height: 1em; + margin-bottom: 10px; + position: relative; +`; + +export const StyledH2 = styled.h2` + margin: 0; + font-size: 55px; + font-weight: 700; + line-height: 1em; + position: relative; + margin-bottom: 70px; + display: inline-block; +`; + +export const H2Image = styled.div` + width: 380px; + height: 60px; + position: absolute; + top: 40px; + left: 0; + ${props => props.theme.filters.grayscale}; +`; diff --git a/web/e.cash/pages/index.js b/web/e.cash/pages/index.js index 9cec945eb..14d9d6eb8 100644 --- a/web/e.cash/pages/index.js +++ b/web/e.cash/pages/index.js @@ -1,59 +1,74 @@ import Image from 'next/image'; import Link from 'next/link'; import Layout from '/components/layout'; import VideoBackground from '/components/videobackground'; import GlitchText from '/components/glitch-text'; import { socials } from '/data/socials'; -import { Hero, ButtonCtn, HeroImage } from '/styles/pages/homepage'; +import { + Hero, + ButtonCtn, + HeroImage, + GradientSpacer, + StoryAndWhySection, + Overlay, +} from '/styles/pages/homepage'; import Button from '/components/button'; +import H2 from '/components/h2'; import Hand from '/public/images/hand.png'; export default function Home() { return (

WEALTH

Simple. Instant. Secure.
Experience the revolutionary new money powered by Avalanche.

eCash
+ + + +
+

+

+ ); } diff --git a/web/e.cash/public/images/h2-graphic.svg b/web/e.cash/public/images/h2-graphic.svg new file mode 100755 index 000000000..a9687f30c --- /dev/null +++ b/web/e.cash/public/images/h2-graphic.svg @@ -0,0 +1 @@ + diff --git a/web/e.cash/public/images/neon-city.png b/web/e.cash/public/images/neon-city.png new file mode 100644 index 000000000..60f1312b3 Binary files /dev/null and b/web/e.cash/public/images/neon-city.png differ diff --git a/web/e.cash/styles/global.css b/web/e.cash/styles/global.css index e3b6b1399..55838db37 100644 --- a/web/e.cash/styles/global.css +++ b/web/e.cash/styles/global.css @@ -1,70 +1,71 @@ @font-face { font-family: 'Poppins'; src: local('Poppins'), url(../public/fonts/Poppins-Regular.ttf) format('truetype'); font-weight: normal; } @font-face { font-family: 'Poppins'; src: local('Poppins'), url(../public/fonts/Poppins-Medium.ttf) format('truetype'); font-weight: 500; } @font-face { font-family: 'Poppins'; src: local('Poppins'), url(../public/fonts/Poppins-Bold.ttf) format('truetype'); font-weight: 700; } @font-face { font-family: 'Montserrat'; src: local('Montserrat'), url(../public/fonts/Montserrat-Regular.ttf) format('truetype'); font-weight: normal; } @font-face { font-family: 'Montserrat'; src: local('Montserrat'), url(../public/fonts/Montserrat-Bold.ttf) format('truetype'); font-weight: 700; } html, body { padding: 0; margin: 0; font-family: 'Poppins', sans-serif; line-height: 1.6; font-size: 18px; background-color: #001137; color: #fff; } * { box-sizing: border-box; } a { text-decoration: none; cursor: pointer; } a:hover { text-decoration: none; } .container { width: 100%; margin: auto; - max-width: 1400px; + max-width: 1500px; + padding: 0 50px; } @media (max-width: 920px) { .container { padding: 0 20px; } } diff --git a/web/e.cash/styles/pages/homepage.js b/web/e.cash/styles/pages/homepage.js index d86490028..c5ad2d239 100644 --- a/web/e.cash/styles/pages/homepage.js +++ b/web/e.cash/styles/pages/homepage.js @@ -1,121 +1,153 @@ import styled from 'styled-components'; +import Neoncity from '/public/images/neon-city.png'; export const Hero = styled.div` width: 100%; height: 100vh; min-height: 600px; display: flex; align-items: center; justify-content: center; text-align: center; position: relative; z-index: 1; .social-ctn { display: flex; align-items: center; position: absolute; bottom: 30px; left: 20px; right: 0; margin: auto; max-width: 1400px; } .social-icon-ctn { width: 20px; height: 20px; position: relative; margin-right: 20px; transition: all ease-in-out 200ms; } .social-icon-ctn:hover { transform: scale(1.4); } h1 { font-family: 'Montserrat', sans-serif; font-size: 7.5vw; line-height: 0.8; font-weight: 700; text-shadow: 6px 6px 12px rgb(0 0 0 / 70%); margin: 0; text-align: center; display: flex; justify-content: center; margin-bottom: 40px; } @media screen and (min-width: 2000px) { h1 { font-size: 120px; } } h1 span { margin-right: 20px; font-weight: 400; } ${props => props.theme.breakpoint.medium} { h1 { font-size: 14vw; line-height: 1; display: inline-block; text-align: center; margin-bottom: 10px; } h1 span { margin-right: 0; } } @media (max-width: 480px) { .social-ctn { display: none; } } `; export const ButtonCtn = styled.div` display: flex; justify-content: center; margin-top: 40px; `; export const HeroImage = styled.div` position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; width: 80%; height: 100%; z-index: -1; animation: bounce 6s infinite; img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: contain; ${props => props.theme.filters.grayscale}; } @keyframes bounce { 0% { transform: translateY(0); } 50% { transform: translateY(-20px); } 100% { transform: translateY(0); } } `; + +export const StoryAndWhySection = styled.div` + background-image: url('/images/neon-city.png'); + background-size: cover; + background-repeat: no-repeat; + background-position: center; + width: 100%; + padding: 200px 0 400px; + position: relative; + ${props => props.theme.filters.grayscale}; +`; + +export const Overlay = styled.div` + width: 100%; + height: 100%; + position: absolute; + top: 0; + left: 0; + background-color: rgba(0, 0, 0, 0.5); + background-image: linear-gradient(180deg, #000, rgba(39, 52, 152, 0.57)); +`; + +export const GradientSpacer = styled.div` + height: 100px; + width: 100%; + background-image: linear-gradient( + 180deg, + ${props => props.theme.colors.darkBlue}, + ${props => props.theme.colors.black} + ); +`; diff --git a/web/e.cash/styles/theme.js b/web/e.cash/styles/theme.js index 9caa9382f..1093ec18d 100644 --- a/web/e.cash/styles/theme.js +++ b/web/e.cash/styles/theme.js @@ -1,40 +1,41 @@ export const ecash = { colors: { primary: '#0074c2', primaryLight: '#00abe7', accent: '#ff21d0', darkBackground: '#050d27', contrast: '#ffffff', black: '#000', darkBlue: '#001137', - videocover: 'linear-gradient(9deg, #001137, rgba(0, 0, 0, 0.46))', + videocover: + 'linear-gradient(9deg,#001137 18%,transparent 91%),linear-gradient(180deg,rgba(0, 0, 0, 0.46),rgba(0, 0, 0, 0.46))', }, filters: { grayscale: null, videospeed: 1, }, breakpoint: { medium: '@media (max-width: 920px)', }, }; export const stealth = { colors: { primary: '#000', primaryLight: '#a0a0a0', accent: '#8a8a8a', darkBackground: '#232324', contrast: '#ffffff', black: '#000', - darkBlue: '#232324', + darkBlue: '#181818', videocover: - 'linear-gradient(9deg, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.46))', + 'linear-gradient(9deg,#181818 18%,transparent 91%),linear-gradient(180deg,rgba(0, 0, 0, 0.46),rgba(0, 0, 0, 0.46))', }, filters: { grayscale: 'filter: grayscale(100%);', videospeed: 0.4, }, breakpoint: { medium: '@media (max-width: 920px)', }, };