diff --git a/web/e.cash/components/button/index.js b/web/e.cash/components/button/index.js new file mode 100644 index 000000000..e7970cc00 --- /dev/null +++ b/web/e.cash/components/button/index.js @@ -0,0 +1,55 @@ +import { ButtonCtn, ButtonMain, ButtonInner } from './styles.js'; + +/****** +Button Props +text = String: the text that will be displayed in the button +link = String: the link for the button +corner = String: accepts "topLeft", "topRight", "bottomRight", "bottomLeft", clips the corner of the button +color = String: accepts "accent" or "white". If no option is given button defaults to primary theme color +glow = Boolean: adds a glow behind the button +******/ + +; + +export default function Button({ + text = 'Button', + link = '/', + corner = null, + color = null, + glow = false, +}) { + const corners = { + topLeft: { + outer: 'polygon(20px 0, 100% 0, 100% 100%, 0 100%, 0 20px)', + inner: 'polygon(19px 0, 100% 0, 100% 100%, 0 100%, 0 19px)', + }, + topRight: { + outer: 'polygon(0 0, calc(100% - 20px) 0%, 100% calc(0% + 20px), 100% 100%, 0 100%)', + inner: 'polygon(0 0, calc(100% - 19px) 0%, 100% calc(0% + 19px), 100% 100%, 0 100%)', + }, + bottomRight: { + outer: 'polygon(100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%, 0 0', + inner: 'polygon(100% 0, 100% calc(100% - 19px), calc(100% - 19px) 100%, 0 100%, 0 0', + }, + bottomLeft: { + outer: 'polygon(100% 0, 100% 100%, 20px 100%, 0 calc(100% - 20px), 0 0', + inner: 'polygon(100% 0, 100% 100%, 19px 100%, 0 calc(100% - 19px), 0 0', + }, + }; + return ( + + + + {text} + + + + ); +} diff --git a/web/e.cash/components/button/styles.js b/web/e.cash/components/button/styles.js new file mode 100644 index 000000000..51a7888e6 --- /dev/null +++ b/web/e.cash/components/button/styles.js @@ -0,0 +1,83 @@ +import styled from 'styled-components'; +import Link from 'next/link'; +import { stealth } from '/styles/theme'; + +export const ButtonCtn = styled.div` + ${props => + props.glow && + `filter: drop-shadow(0px 0px 10px ${ + props.color === 'accent' + ? props.theme.colors.accent + '90' + : props.color === 'white' + ? props.theme.colors.contrast + '90' + : props.theme.colors.primaryLight + '90' + });`} +`; + +export const ButtonMain = styled(Link)` + display: inline-flex; + padding: 2px; + align-items: center; + transition: all 300ms ease-in-out; + color: ${props => + props.color === 'accent' + ? props.theme.colors.accent + : props.color === 'white' + ? props.theme.colors.contrast + : props.theme.colors.primaryLight}; + font-size: 15px; + line-height: 1.5; + font-weight: 400; + letter-spacing: 1px; + background-color: ${props => + props.color === 'accent' + ? props.theme.colors.accent + : props.color === 'white' + ? props.theme.colors.contrast + : props.theme.colors.primaryLight}; + ${props => + props.theme === stealth + ? 'background-color: #fff !important; color: #fff !important; ' + : null}; +`; + +export const ButtonInner = styled.div` + background-color: ${props => props.theme.colors.darkBlue}; + padding: 16px 40px; + font-size: 15px; + line-height: 1.5; + font-weight: 500; + letter-spacing: 1px; + transition: all ease-in-out 150ms; + + &:hover { + box-shadow: inset 0 0 13px 2px + ${props => + props.color === 'accent' + ? props.theme.colors.accent + '90' + : props.color === 'white' + ? props.theme.colors.contrast + '90' + : props.theme.colors.primaryLight + '90'}; + animation: hoverbutton 150ms ease-in-out 1; + } + + @keyframes hoverbutton { + 0% { + background-color: ${props => + props.color === 'accent' + ? props.theme.colors.accent + : props.color === 'white' + ? props.theme.colors.contrast + : props.theme.colors.primaryLight} !important; + } + 100% { + background-color: unset; + } + } + ${props => props.theme.breakpoint.medium} { + .buttoninner { + padding: 14px 30px; + font-size: 14px; + } + } +`; diff --git a/web/e.cash/pages/index.js b/web/e.cash/pages/index.js index 3a138df84..b03a85491 100644 --- a/web/e.cash/pages/index.js +++ b/web/e.cash/pages/index.js @@ -1,46 +1,55 @@ 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'; +import { Hero, ButtonCtn } from '/styles/pages/homepage'; +import Button from '/components/button'; export default function Home() { return ( WEALTH Simple. Instant. Secure. Experience the revolutionary new money powered by Avalanche. + + + {socials.map(social => ( ))} ); } diff --git a/web/e.cash/styles/pages/homepage.js b/web/e.cash/styles/pages/homepage.js index b4f2a2d78..4c8cb5196 100644 --- a/web/e.cash/styles/pages/homepage.js +++ b/web/e.cash/styles/pages/homepage.js @@ -1,81 +1,87 @@ 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; } } `; + +export const ButtonCtn = styled.div` + display: flex; + justify-content: center; + margin-top: 40px; +`;
Simple. Instant. Secure. Experience the revolutionary new money powered by Avalanche.