status-im/nimbus-gui
2
0
Fork 0
mirror of https://github.com/status-im/nimbus-gui.git synced 2025-02-27 18:40:33 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: add styles to landing page

Browse Source
This commit is contained in:
RadoslavDimchev 2023-12-15 10:22:00 +02:00
parent 0e21f85fb6
commit 216ac601b2
2 changed files with 17 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/pages/LandingPage/LandingPage.module.css
View File

@ -1,3 +1,13 @@
.landing-page {
height: 100%;
}
.landing-texts {
margin: 30vh 0 4vh;
}
@media (max-width: 1000px) {
.landing-texts {
margin-top: 20vh;
}
}

14
src/pages/LandingPage/LandingPage.tsx
View File

@ -1,11 +1,12 @@
import './LandingPage.css'
import { useNavigate } from 'react-router'
import { XStack, YStack } from 'tamagui'
import PageWrapperShadow from '../../components/PageWrappers/PageWrapperShadow'
import NimbusLogo from '../../components/Logos/NimbusLogo'
import { NodeIcon } from '@status-im/icons'
import { Button as StatusButton, Text } from '@status-im/components'
import PageWrapperShadow from '../../components/PageWrappers/PageWrapperShadow'
import QuickStartBar from '../../components/General/QuickStartBar/QuickStartBar'
import { useNavigate } from 'react-router'
import NimbusLogo from '../../components/Logos/NimbusLogo'
import styles from './LandingPage.module.css'
const LandingPage = () => {
const navigate = useNavigate()
@ -17,11 +18,11 @@ const LandingPage = () => {
return (
<>
<PageWrapperShadow rightImageSrc="./background-images/landing-page-bg.png" imgHeight="150%">
<YStack className="landing-page">
<YStack className={styles['landing-page']}>
<XStack pt={'70px'}>
<NimbusLogo />
</XStack>
<YStack style={{ width: '100%', margin: '30vh 0 4vh' }} space={'16px'}>
<YStack className={styles['landing-texts']} space={'16px'}>
<Text size={27} weight={'semibold'}>
Light and performant clients, for all Ethereum validators.
</Text>
@ -30,7 +31,6 @@ const LandingPage = () => {
you wish to run in a completely trustless and decentralized manner.
</Text>
</YStack>
<XStack>
<StatusButton icon={<NodeIcon size={20} />} onPress={getStartedHanlder}>
Get Started