Changeset View
Changeset View
Standalone View
Standalone View
web/e.cash/styles/pages/homepage.js
// Copyright (c) 2023 The Bitcoin developers | // Copyright (c) 2023 The Bitcoin developers | ||||
// Distributed under the MIT software license, see the accompanying | // Distributed under the MIT software license, see the accompanying | ||||
// file COPYING or http://www.opensource.org/licenses/mit-license.php. | // file COPYING or http://www.opensource.org/licenses/mit-license.php. | ||||
import styled from 'styled-components'; | import styled from 'styled-components'; | ||||
import Neoncity from '/public/images/neon-city.png'; | import Neoncity from '/public/images/neon-city.png'; | ||||
import { motion } from 'framer-motion'; | |||||
import { getAnimationSettings } from '/styles/framer-motion'; | |||||
export const Hero = styled.div` | export const Hero = styled(motion.div).attrs(() => | ||||
getAnimationSettings({ duration: 2, delay: 0.4, displacement: 300 }), | |||||
)` | |||||
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; | ||||
text-align: center; | text-align: center; | ||||
position: relative; | position: relative; | ||||
▲ Show 20 Lines • Show All 147 Lines • ▼ Show 20 Lines | export const GradientSpacer = styled.div` | ||||
width: 100%; | width: 100%; | ||||
background-image: linear-gradient( | background-image: linear-gradient( | ||||
180deg, | 180deg, | ||||
${props => props.theme.colors.darkBlue}, | ${props => props.theme.colors.darkBlue}, | ||||
${props => props.theme.colors.black} | ${props => props.theme.colors.black} | ||||
); | ); | ||||
`; | `; | ||||
export const StorySection = styled.div` | export const StorySection = styled(motion.div).attrs(() => | ||||
getAnimationSettings(), | |||||
)` | |||||
display: flex; | display: flex; | ||||
gap: 30px; | gap: 30px; | ||||
position: relative; | position: relative; | ||||
> :first-child { | > :first-child { | ||||
width: 45%; | width: 45%; | ||||
} | } | ||||
▲ Show 20 Lines • Show All 101 Lines • ▼ Show 20 Lines | |||||
export const RoadmapSection = styled.div` | export const RoadmapSection = styled.div` | ||||
width: 100%; | width: 100%; | ||||
text-align: center; | text-align: center; | ||||
background-color: ${props => props.theme.colors.black}; | background-color: ${props => props.theme.colors.black}; | ||||
padding: 120px 0; | padding: 120px 0; | ||||
position: relative; | position: relative; | ||||
`; | `; | ||||
export const TilesSectionCtn = styled.div` | export const TilesSectionCtn = styled(motion.div).attrs(() => | ||||
getAnimationSettings(), | |||||
)` | |||||
margin-top: 200px; | margin-top: 200px; | ||||
text-align: center; | text-align: center; | ||||
`; | `; |