Changeset View
Changeset View
Standalone View
Standalone View
web/e.cash/styles/pages/homepage.js
import styled from 'styled-components'; | import styled from 'styled-components'; | ||||
import Neoncity from '/public/images/neon-city.png'; | |||||
export const Hero = styled.div` | export const Hero = styled.div` | ||||
width: 100%; | width: 100%; | ||||
height: 100vh; | height: 100vh; | ||||
min-height: 600px; | min-height: 600px; | ||||
display: flex; | display: flex; | ||||
align-items: center; | align-items: center; | ||||
justify-content: center; | justify-content: center; | ||||
▲ Show 20 Lines • Show All 69 Lines • ▼ Show 20 Lines | export const Hero = styled.div` | ||||
} | } | ||||
`; | `; | ||||
export const ButtonCtn = styled.div` | export const ButtonCtn = styled.div` | ||||
display: flex; | display: flex; | ||||
justify-content: center; | justify-content: center; | ||||
margin-top: 40px; | margin-top: 40px; | ||||
`; | `; | ||||
export const HomepageBody = 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} | |||||
); | |||||
`; |