diff --git a/web/e.cash/components/glitch-text/index.js b/web/e.cash/components/glitch-text/index.js new file mode 100644 --- /dev/null +++ b/web/e.cash/components/glitch-text/index.js @@ -0,0 +1,11 @@ +import { GlitchCtn } from './styles'; + +export default function GlitchText({ text }) { + return ( + +
+ {text} +
+
+ ); +} diff --git a/web/e.cash/components/glitch-text/styles.js b/web/e.cash/components/glitch-text/styles.js new file mode 100644 --- /dev/null +++ b/web/e.cash/components/glitch-text/styles.js @@ -0,0 +1,151 @@ +import styled from 'styled-components'; + +export const GlitchCtn = styled.div` + height: 100%; + display: flex; + + .glitch { + position: relative; + display: inline-block; + } + .glitch::before, + .glitch::after { + content: attr(data-text); + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + } + .glitch::before { + left: 2px; + text-shadow: -2px 0 ${props => props.theme.colors.accent}; + clip: rect(24px, 550px, 90px, 0); + -webkit-animation: glitch-anim-2 2.5s infinite linear alternate-reverse; + animation: glitch-anim-2 2.5s infinite linear alternate-reverse; + } + .glitch::after { + left: -2px; + text-shadow: -2px 0 ${props => props.theme.colors.primaryLight}; + clip: rect(85px, 550px, 140px, 0); + -webkit-animation: glitch-anim 2.5s infinite linear alternate-reverse; + animation: glitch-anim 2.5s infinite linear alternate-reverse; + } + + @keyframes glitch-anim { + 0% { + clip: rect(110px, 9999999px, 74px, 0); + } + 4% { + clip: rect(135px, 9999999px, 143px, 0); + } + 8% { + clip: rect(100px, 9999999px, 100px, 0); + } + 12.5% { + clip: rect(38px, 9999999px, 24px, 0); + } + 20% { + clip: rect(149px, 9999999px, 63px, 0); + } + 25% { + clip: rect(12px, 9999999px, 104px, 0); + } + 33% { + clip: rect(77px, 9999999px, 20px, 0); + } + 45.83333333% { + clip: rect(58px, 9999999px, 107px, 0); + } + 50% { + clip: rect(108px, 9999999px, 77px, 0); + } + 58% { + clip: rect(142px, 9999999px, 112px, 0); + } + 66% { + clip: rect(61px, 9999999px, 53px, 0); + } + 70% { + clip: rect(117px, 9999999px, 74px, 0); + } + 75% { + clip: rect(21px, 9999999px, 74px, 0); + } + 79% { + clip: rect(117px, 9999999px, 70px, 0); + } + 87.5% { + clip: rect(95px, 9999999px, 9px, 0); + } + 91% { + clip: rect(121px, 9999999px, 75px, 0); + } + 95% { + clip: rect(121px, 9999999px, 115px, 0); + } + } + + @keyframes glitch-anim-2 { + 6% { + clip: rect(76px, 9999999px, 132px, 0); + } + 10% { + clip: rect(13px, 9999999px, 82px, 0); + } + 13% { + clip: rect(97px, 9999999px, 2px, 0); + } + 16% { + clip: rect(1px, 9999999px, 147px, 0); + } + 20% { + clip: rect(113px, 9999999px, 124px, 0); + } + 30% { + clip: rect(2px, 9999999px, 10px, 0); + } + 36% { + clip: rect(140px, 9999999px, 79px, 0); + } + 40% { + clip: rect(37px, 9999999px, 67px, 0); + } + 46% { + clip: rect(6px, 9999999px, 16px, 0); + } + 50% { + clip: rect(98px, 9999999px, 123px, 0); + } + 56% { + clip: rect(77px, 9999999px, 110px, 0); + } + 60% { + clip: rect(22px, 9999999px, 145px, 0); + } + 66% { + clip: rect(109px, 9999999px, 135px, 0); + } + 70% { + clip: rect(118px, 9999999px, 40px, 0); + } + 73% { + clip: rect(74px, 9999999px, 141px, 0); + } + 76% { + clip: rect(59px, 9999999px, 100px, 0); + } + 80% { + clip: rect(14px, 9999999px, 32px, 0); + } + 90% { + clip: rect(33px, 9999999px, 97px, 0); + } + 93% { + clip: rect(94px, 9999999px, 29px, 0); + } + 100% { + clip: rect(5px, 9999999px, 14px, 0); + } + } +`; diff --git a/web/e.cash/data/socials.js b/web/e.cash/data/socials.js new file mode 100644 --- /dev/null +++ b/web/e.cash/data/socials.js @@ -0,0 +1,38 @@ +export const socials = [ + { + name: 'facebook', + link: 'https://www.facebook.com/ecashofficial', + }, + { + name: 'twitter', + link: 'https://twitter.com/ecashofficial', + }, + { + name: 'linkedin', + link: 'https://www.linkedin.com/company/ecashofficial/', + }, + { + name: 'youtube', + link: 'https://www.youtube.com/eCashOfficial', + }, + { + name: 'instagram', + link: 'https://www.instagram.com/ecashnetwork/', + }, + { + name: 'github', + link: 'https://github.com/bitcoin-abc/', + }, + { + name: 'reddit', + link: 'https://reddit.com/r/ecash', + }, + { + name: 'telegram', + link: 'https://t.me/ecash_official', + }, + { + name: 'discord', + link: 'https://discord.gg/d5EHW3PgTy', + }, +]; diff --git a/web/e.cash/pages/index.js b/web/e.cash/pages/index.js --- a/web/e.cash/pages/index.js +++ b/web/e.cash/pages/index.js @@ -1,9 +1,46 @@ -import Layout from '../components/layout'; -import VideoBackground from '../components/videobackground'; +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 } from '/styles/pages/homepage'; + export default function Home() { return ( + +
+

+ WEALTH + +

+

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

+
+ {socials.map(social => ( + + {social.name} + + ))} +
+
+
); } diff --git a/web/e.cash/public/images/discord.svg b/web/e.cash/public/images/discord.svg new file mode 100644 --- /dev/null +++ b/web/e.cash/public/images/discord.svg @@ -0,0 +1 @@ + diff --git a/web/e.cash/public/images/facebook.svg b/web/e.cash/public/images/facebook.svg new file mode 100644 --- /dev/null +++ b/web/e.cash/public/images/facebook.svg @@ -0,0 +1 @@ + diff --git a/web/e.cash/public/images/github.svg b/web/e.cash/public/images/github.svg new file mode 100644 --- /dev/null +++ b/web/e.cash/public/images/github.svg @@ -0,0 +1 @@ + diff --git a/web/e.cash/public/images/instagram.svg b/web/e.cash/public/images/instagram.svg new file mode 100644 --- /dev/null +++ b/web/e.cash/public/images/instagram.svg @@ -0,0 +1 @@ + diff --git a/web/e.cash/public/images/linkedin.svg b/web/e.cash/public/images/linkedin.svg new file mode 100644 --- /dev/null +++ b/web/e.cash/public/images/linkedin.svg @@ -0,0 +1 @@ + diff --git a/web/e.cash/public/images/reddit.svg b/web/e.cash/public/images/reddit.svg new file mode 100644 --- /dev/null +++ b/web/e.cash/public/images/reddit.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/web/e.cash/public/images/telegram.svg b/web/e.cash/public/images/telegram.svg new file mode 100644 --- /dev/null +++ b/web/e.cash/public/images/telegram.svg @@ -0,0 +1,12 @@ + + + + diff --git a/web/e.cash/public/images/twitter.svg b/web/e.cash/public/images/twitter.svg new file mode 100644 --- /dev/null +++ b/web/e.cash/public/images/twitter.svg @@ -0,0 +1 @@ + diff --git a/web/e.cash/public/images/youtube.svg b/web/e.cash/public/images/youtube.svg new file mode 100644 --- /dev/null +++ b/web/e.cash/public/images/youtube.svg @@ -0,0 +1 @@ + diff --git a/web/e.cash/styles/global.css b/web/e.cash/styles/global.css --- a/web/e.cash/styles/global.css +++ b/web/e.cash/styles/global.css @@ -56,3 +56,15 @@ a:hover { text-decoration: none; } + +.container { + width: 100%; + margin: auto; + max-width: 1400px; +} + +@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 new file mode 100644 --- /dev/null +++ b/web/e.cash/styles/pages/homepage.js @@ -0,0 +1,81 @@ +import styled from 'styled-components'; + +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; + width: 100%; + 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; + } + } +`; diff --git a/web/e.cash/styles/theme.js b/web/e.cash/styles/theme.js --- a/web/e.cash/styles/theme.js +++ b/web/e.cash/styles/theme.js @@ -20,7 +20,7 @@ export const stealth = { colors: { primary: '#000', - primaryLight: '#00abe7', + primaryLight: '#a0a0a0', accent: '#8a8a8a', darkBackground: '#232324', contrast: '#ffffff',