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

feat: add layout changes to landing page to match design

Browse Source
This commit is contained in:
Ivana Andersson 2023-08-21 16:03:40 +03:00
parent ad7f4a9fa3
commit 80fc6347fe
1 changed files with 21 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,30 +1,36 @@
import PageWrapperShadow from '../../components/PageWrappers/PageWrapperShadow' import PageWrapperShadow from '../../components/PageWrappers/PageWrapperShadow'
import './LandingPage.css' import './LandingPage.css'
import QuickStartBar from '../../components/General/QuickStartBar/QuickStartBar' import QuickStartBar from '../../components/General/QuickStartBar/QuickStartBar'
import Titles from '../../components/General/Titles' // import Titles from '../../components/General/Titles'
import { Button as StatusButton } from '@status-im/components'
import NodeIcon from '../../components/Icons/NodeIcon'
import NimbusLogo from '../../components/Logos/NimbusLogo'
import { XStack, YStack } from 'tamagui' import { XStack, YStack } from 'tamagui'
import Title from '../../components/General/Title'
import NimbusLogo from '../../components/Logos/NimbusLogo'
import NodeIcon from '../../components/Icons/NodeIcon'
import { Button as StatusButton, Text } from '@status-im/components'
function LandingPage() { function LandingPage() {
return ( return (
<> <>
<PageWrapperShadow rightImageSrc="/background-images/landing-page-bg.png"> <PageWrapperShadow rightImageSrc="/background-images/landing-page-bg.png">
<div className="landing-page"> <YStack className="landing-page">
<XStack> <XStack pt={'70px'}>
<NimbusLogo /> <NimbusLogo />
</XStack> </XStack>
<YStack>
<Titles <YStack style={{ width: '100%', margin: '7em 0 4em' }}>
title="Light and performant clients, for all Ethereum validators." <Title color={'#09101C'}>
subtitle="Nimbus Nodes allows you to take control and ownership of the services you wish to run in a completely trustless and decentralized manner." Light and performant clients, for all Ethereum validators.
/> </Title>
<XStack> <Text size={15} weight="regular">
<StatusButton icon={<NodeIcon />}>Get Started</StatusButton> <strong>Nimbus Nodes</strong> allows you to take control and ownership of the services
</XStack> you wish to run in a completely trustless and decentralized manner.
</Text>
</YStack> </YStack>
</div>
<XStack>
<StatusButton icon={<NodeIcon />}>Get Started</StatusButton>
</XStack>
</YStack>
</PageWrapperShadow> </PageWrapperShadow>
<QuickStartBar /> <QuickStartBar />
</> </>