diff --git a/web/e.cash/pages/index.js b/web/e.cash/pages/index.js index b03a85491..9cec945eb 100644 --- a/web/e.cash/pages/index.js +++ b/web/e.cash/pages/index.js @@ -1,55 +1,59 @@ 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 } from '/styles/pages/homepage'; +import { Hero, ButtonCtn, HeroImage } from '/styles/pages/homepage'; import Button from '/components/button'; +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/hand.png b/web/e.cash/public/images/hand.png new file mode 100644 index 000000000..ae43bf385 Binary files /dev/null and b/web/e.cash/public/images/hand.png differ diff --git a/web/e.cash/styles/pages/homepage.js b/web/e.cash/styles/pages/homepage.js index 1bfbec2bb..d86490028 100644 --- a/web/e.cash/styles/pages/homepage.js +++ b/web/e.cash/styles/pages/homepage.js @@ -1,86 +1,121 @@ 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; 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); + } + } +`;