diff options
| -rw-r--r-- | packages/website/ts/@next/constants/globalStyle.tsx | 5 | ||||
| -rw-r--r-- | packages/website/ts/@next/constants/utilities.tsx | 1 | ||||
| -rw-r--r-- | packages/website/ts/@next/pages/landing.tsx | 62 |
3 files changed, 55 insertions, 13 deletions
diff --git a/packages/website/ts/@next/constants/globalStyle.tsx b/packages/website/ts/@next/constants/globalStyle.tsx index fd9e67cb4..b22a5c6db 100644 --- a/packages/website/ts/@next/constants/globalStyle.tsx +++ b/packages/website/ts/@next/constants/globalStyle.tsx @@ -61,6 +61,11 @@ const GlobalStyles = withTheme(createGlobalStyle<GlobalStyle> ` color: inherit; text-decoration: none; } + + svg + p, + img + p { + padding-top: 30px; + } `); export { GlobalStyles }; diff --git a/packages/website/ts/@next/constants/utilities.tsx b/packages/website/ts/@next/constants/utilities.tsx index 7d9313583..35956c47b 100644 --- a/packages/website/ts/@next/constants/utilities.tsx +++ b/packages/website/ts/@next/constants/utilities.tsx @@ -9,6 +9,7 @@ interface PaddingSizes { const PADDING_SIZES: PaddingSizes = { 'default': '30px', 'large': '60px', + 'small': '15px', }; export const getCSSPadding = (value: number | Array<string | number>): string => { diff --git a/packages/website/ts/@next/pages/landing.tsx b/packages/website/ts/@next/pages/landing.tsx index 2feb4a302..fd6b5345b 100644 --- a/packages/website/ts/@next/pages/landing.tsx +++ b/packages/website/ts/@next/pages/landing.tsx @@ -119,27 +119,45 @@ export const NextLanding: React.StatelessComponent<{}> = () => ( 873,435 </Heading> - <Paragraph isMuted={0.4} isCentered={true} isNoMargin={true}> + <Paragraph + isMuted={0.4} + isCentered={true} + isNoMargin={true} + > Number of transactions </Paragraph> </Column> <Column colWidth="1/3" isNoPadding={true}> - <Heading size="medium" isCentered={true}> + <Heading + size="medium" + isCentered={true} + > $203M </Heading> - <Paragraph isMuted={0.4} isCentered={true} isNoMargin={true}> + <Paragraph + isMuted={0.4} + isCentered={true} + isNoMargin={true} + > Total volume </Paragraph> </Column> <Column colWidth="1/3" isNoPadding={true}> - <Heading size="medium" isCentered={true}> + <Heading + size="medium" + isCentered={true} + > 227,372 </Heading> - <Paragraph isMuted={0.4} isCentered={true} isNoMargin={true}> + <Paragraph + isMuted={0.4} + isCentered={true} + isNoMargin={true} + > Number of relayers </Paragraph> </Column> @@ -151,9 +169,13 @@ export const NextLanding: React.StatelessComponent<{}> = () => ( <Heading size="small">You're in good company</Heading> </WrapCentered> - <WrapGrid width="narrow"> + <WrapGrid width="narrow" isWrapped={true}> {_.map(projects, (item: ProjectLogo, index) => ( - <Project key={index} name={item.name} imageUrl={item.imageUrl} /> + <Project + key={index} + name={item.name} + imageUrl={item.imageUrl} + /> ))} </WrapGrid> </Section> @@ -167,7 +189,14 @@ export const NextLanding: React.StatelessComponent<{}> = () => ( > <WrapCentered> <ReadyToBuildIcon width="150" /> - Ready to build on 0x? + + <Paragraph> + Ready to build on 0x? + </Paragraph> + + <Button isTransparent={true}> + Get Started + </Button> </WrapCentered> </Column> @@ -178,7 +207,14 @@ export const NextLanding: React.StatelessComponent<{}> = () => ( > <WrapCentered> <SupportIcon width="150" /> - Want help from the 0x team? + + <Paragraph> + Want help from the 0x team? + </Paragraph> + + <Button isTransparent={true}> + Get in Touch + </Button> </WrapCentered> </Column> </Wrap> @@ -193,10 +229,10 @@ const Project = ({ name, imageUrl }: ProjectLogo) => ( ); const StyledProject = styled.div` - width: 80px; - height: 116px; - border: 1px solid blue; - margin: 30px 60px; + width: 90px; + height: 90px; + flex-shrink: 0; + margin: 30px; img { object-fit: contain; |