From 7d9ab27b9d26bf008a1113c50a00b18a1ad6e641 Mon Sep 17 00:00:00 2001 From: Ezekiel Aquino Date: Mon, 10 Dec 2018 13:11:31 +0100 Subject: Divides landing into section components, cleanup --- packages/website/ts/@next/components/button.tsx | 5 +- packages/website/ts/@next/components/icon.tsx | 2 +- .../ts/@next/components/sections/landing/about.tsx | 106 ++++++++ .../@next/components/sections/landing/clients.tsx | 78 ++++++ .../ts/@next/components/sections/landing/cta.tsx | 63 +++++ .../ts/@next/components/sections/landing/hero.tsx | 39 +++ .../website/ts/@next/constants/globalStyle.tsx | 9 - packages/website/ts/@next/pages/landing.tsx | 278 ++------------------- 8 files changed, 306 insertions(+), 274 deletions(-) create mode 100644 packages/website/ts/@next/components/sections/landing/about.tsx create mode 100644 packages/website/ts/@next/components/sections/landing/clients.tsx create mode 100644 packages/website/ts/@next/components/sections/landing/cta.tsx create mode 100644 packages/website/ts/@next/components/sections/landing/hero.tsx (limited to 'packages/website/ts') diff --git a/packages/website/ts/@next/components/button.tsx b/packages/website/ts/@next/components/button.tsx index 14228083f..ea7f286b3 100644 --- a/packages/website/ts/@next/components/button.tsx +++ b/packages/website/ts/@next/components/button.tsx @@ -11,6 +11,7 @@ interface ButtonInterface { isNoBorder?: boolean; isNoPadding?: boolean; isWithArrow?: boolean; + isAccentColor?: boolean; hasIcon?: boolean | string; isInline?: boolean; href?: string; @@ -26,7 +27,7 @@ export const Button = styled.button` display: ${props => props.isInline && 'inline-block'}; background-color: ${props => !props.isTransparent ? colors.brandLight : 'transparent'}; border-color: ${props => (props.isTransparent && !props.isNoBorder && !props.isWithArrow) && '#6a6a6a'}; - color: ${props => props.color || props.theme.textColor}; + color: ${props => props.isAccentColor ? props.theme.linkColor : (props.color || props.theme.textColor)}; padding: ${props => (!props.isNoPadding && !props.isWithArrow) && '18px 30px'}; text-align: center; font-size: ${props => props.isWithArrow ? '20px' : '18px'}; @@ -37,7 +38,7 @@ export const Button = styled.button` } path { - fill: ${props => props.color || props.theme.textColor}; + fill: ${props => props.isAccentColor ? props.theme.linkColor : (props.color || props.theme.textColor)}; } `; diff --git a/packages/website/ts/@next/components/icon.tsx b/packages/website/ts/@next/components/icon.tsx index 61f8f8f6f..07a882246 100644 --- a/packages/website/ts/@next/components/icon.tsx +++ b/packages/website/ts/@next/components/icon.tsx @@ -10,7 +10,7 @@ interface IconProps extends PaddingInterface { export const Icon: React.FunctionComponent = (props: Props) => { const IconSVG = Loadable({ - loader: () => import(`ts/@next/icons/illustrations/${props.name}.svg`), + loader: () => import(/* webpackChunkName: "icon" */`ts/@next/icons/illustrations/${props.name}.svg`), loading: () => 'Loading', }); diff --git a/packages/website/ts/@next/components/sections/landing/about.tsx b/packages/website/ts/@next/components/sections/landing/about.tsx new file mode 100644 index 000000000..42062a2e1 --- /dev/null +++ b/packages/website/ts/@next/components/sections/landing/about.tsx @@ -0,0 +1,106 @@ +import * as React from 'react'; +import {Button, ButtonWrap, Link} from 'ts/@next/components/button'; +import {Icon, InlineIconWrap} from 'ts/@next/components/icon'; +import {Column, Section, Wrap, WrapCentered, WrapGrid} from 'ts/@next/components/layout'; +import {Heading, Paragraph} from 'ts/@next/components/text'; +import {colors} from 'ts/style/colors'; + +export const SectionLandingAbout = () => ( +
+ + + + + + + + + + 0x is an open protocol that enables the peer-to-peer exchange of Ethereum-based + tokens. Anyone in the world can use 0x to service a wide variety of markets + ranging from gaming items to financial instruments to assets that could have + near existed before. + + + + Discover how developers use 0x + + +
+ + + {/* Note you can also pass in a string "large/default" or a number for custom margins */} + + {/* NOTE: this probably should be withComponent as part of a
*/} + + + 873,435 + + + + Number of transactions + + + + + + $203M + + + + Total volume + + + + + + 227,372 + + + + Number of relayers + + + +
+); diff --git a/packages/website/ts/@next/components/sections/landing/clients.tsx b/packages/website/ts/@next/components/sections/landing/clients.tsx new file mode 100644 index 000000000..c08a4ea48 --- /dev/null +++ b/packages/website/ts/@next/components/sections/landing/clients.tsx @@ -0,0 +1,78 @@ +import * as _ from 'lodash'; +import * as React from 'react'; +import styled from 'styled-components'; +import {Section, Wrap, WrapCentered, WrapGrid} from 'ts/@next/components/layout'; +import {Heading, Paragraph} from 'ts/@next/components/text'; + +interface ProjectLogo { + name: string; + imageUrl?: string; +} + +const projects: ProjectLogo[] = [ + { + name: 'Radar Relay', + imageUrl: '/images/@next/relayer-logos/logo_1.png', + }, + { + name: 'Paradex', + imageUrl: '/images/@next/relayer-logos/logo_5.png', + }, + { + name: 'Amadeus', + imageUrl: '/images/@next/relayer-logos/logo_3.png', + }, + { + name: 'The Ocean X', + imageUrl: '/images/@next/relayer-logos/logo_4.png', + }, + { + name: 'Paradex', + imageUrl: '/images/@next/relayer-logos/logo_5.png', + }, + { + name: 'Decent EX', + imageUrl: '/images/@next/relayer-logos/logo_2.1.png', + }, + { + name: 'dEX', + imageUrl: '/images/@next/relayer-logos/logo_2.2.png', + }, + { + name: 'OpenRelay', + imageUrl: '/images/@next/relayer-logos/logo_2.3.png', + }, + { + name: 'DDEX', + imageUrl: '/images/@next/relayer-logos/logo_2.png', + }, +]; + +export const SectionLandingClients = () => ( +
+ + You're in good company + + + + {_.map(projects, (item: ProjectLogo, index) => ( + + {item.name} + + ))} + +
+); + +const StyledProject = styled.div` + width: 90px; + height: 90px; + flex-shrink: 0; + margin: 30px; + + img { + object-fit: contain; + width: 100%; + height: 100%; + } +`; diff --git a/packages/website/ts/@next/components/sections/landing/cta.tsx b/packages/website/ts/@next/components/sections/landing/cta.tsx new file mode 100644 index 000000000..2f853f95b --- /dev/null +++ b/packages/website/ts/@next/components/sections/landing/cta.tsx @@ -0,0 +1,63 @@ +import * as React from 'react'; +import {Button, ButtonWrap, Link} from 'ts/@next/components/button'; +import {Icon, InlineIconWrap} from 'ts/@next/components/icon'; +import {Column, Section, Wrap, WrapCentered, WrapGrid} from 'ts/@next/components/layout'; +import {Heading, Paragraph} from 'ts/@next/components/text'; + +export const SectionLandingCta = () => ( +
+ + + + + + + Ready to build on 0x? + + + + Get Started + + + + + + + + + + Want help from the 0x team? + + + + Get in Touch + + + + +
+); diff --git a/packages/website/ts/@next/components/sections/landing/hero.tsx b/packages/website/ts/@next/components/sections/landing/hero.tsx new file mode 100644 index 000000000..e43ac41f2 --- /dev/null +++ b/packages/website/ts/@next/components/sections/landing/hero.tsx @@ -0,0 +1,39 @@ +import * as React from 'react'; +import {Button, ButtonWrap} from 'ts/@next/components/button'; +import {Column, Section, Wrap, WrapCentered, WrapGrid} from 'ts/@next/components/layout'; +import {Heading, Paragraph} from 'ts/@next/components/text'; + +import LogoOutlined from 'ts/@next/icons/illustrations/logo-outlined.svg'; + +export const SectionLandingHero = () => ( +
+ + + + Powering Decentralized Exchange + + + + 0x is the best solution for adding
+ exchange functionality to your business. + + + + + + + + + + + + + + + +
+); diff --git a/packages/website/ts/@next/constants/globalStyle.tsx b/packages/website/ts/@next/constants/globalStyle.tsx index 8ddf78922..7d5e59c6e 100644 --- a/packages/website/ts/@next/constants/globalStyle.tsx +++ b/packages/website/ts/@next/constants/globalStyle.tsx @@ -89,10 +89,6 @@ const GlobalStyles = withTheme(createGlobalStyle ` overflow: hidden; } - a { - color: ${props => props.theme.linkColor}; - } - img, svg { max-width: 100%; object-fit: contain; @@ -103,11 +99,6 @@ const GlobalStyles = withTheme(createGlobalStyle ` line-height: 1.444444444em; // 26px } - :root a { - color: inherit; - text-decoration: none; - } - svg + p, img + p { padding-top: 30px; diff --git a/packages/website/ts/@next/pages/landing.tsx b/packages/website/ts/@next/pages/landing.tsx index 2ee7ede2e..66c4138a1 100644 --- a/packages/website/ts/@next/pages/landing.tsx +++ b/packages/website/ts/@next/pages/landing.tsx @@ -1,270 +1,24 @@ -import * as _ from 'lodash'; import * as React from 'react'; -import styled from 'styled-components'; - -import {colors} from 'ts/style/colors'; - -import {Button, ButtonWrap, Link} from 'ts/@next/components/button'; -import {Icon, InlineIconWrap} from 'ts/@next/components/icon'; -import {Column, Section, Wrap, WrapCentered, WrapGrid} from 'ts/@next/components/layout'; import {SiteWrap} from 'ts/@next/components/siteWrap'; -import {Heading, Paragraph} from 'ts/@next/components/text'; -import LogoOutlined from 'ts/@next/icons/illustrations/logo-outlined.svg'; -import ProtocolIcon from 'ts/@next/icons/illustrations/protocol.svg'; -import ReadyToBuildIcon from 'ts/@next/icons/illustrations/ready-to-build.svg'; -import SupportIcon from 'ts/@next/icons/illustrations/support.svg'; - -interface ProjectLogo { - name: string; - imageUrl?: string; +import {SectionLandingAbout} from 'ts/@next/components/sections/landing/about'; +import {SectionLandingClients} from 'ts/@next/components/sections/landing/clients'; +import {SectionLandingCta} from 'ts/@next/components/sections/landing/cta'; +import {SectionLandingHero} from 'ts/@next/components/sections/landing/hero'; + +interface Props { + theme: { + bgColor: string; + textColor: string; + linkColor: string; + }; } -const projects: ProjectLogo[] = [ - { - name: 'Radar Relay', - imageUrl: '/images/@next/relayer-logos/logo_1.png', - }, - { - name: 'Paradex', - imageUrl: '/images/@next/relayer-logos/logo_5.png', - }, - { - name: 'Amadeus', - imageUrl: '/images/@next/relayer-logos/logo_3.png', - }, - { - name: 'The Ocean X', - imageUrl: '/images/@next/relayer-logos/logo_4.png', - }, - { - name: 'Paradex', - imageUrl: '/images/@next/relayer-logos/logo_5.png', - }, - { - name: 'Decent EX', - imageUrl: '/images/@next/relayer-logos/logo_2.1.png', - }, - { - name: 'dEX', - imageUrl: '/images/@next/relayer-logos/logo_2.2.png', - }, - { - name: 'OpenRelay', - imageUrl: '/images/@next/relayer-logos/logo_2.3.png', - }, - { - name: 'DDEX', - imageUrl: '/images/@next/relayer-logos/logo_2.png', - }, -]; - -export const NextLanding: React.StatelessComponent<{}> = () => ( +export const NextLanding: React.StatelessComponent<{}> = (props: Props) => ( -
- - - - Powering Decentralized Exchange - - - - 0x is the best solution for adding
- exchange functionality to your business. - - - - - - - - - - - - - - - -
- -
- - - - - - - - - - 0x is an open protocol that enables the peer-to-peer exchange of Ethereum-based - tokens. Anyone in the world can use 0x to service a wide variety of markets - ranging from gaming items to financial instruments to assets that could have - near existed before. - - - - - - {/* Note you can also pass in a string "large/default" or a number for custom margins */} - - {/* NOTE: this probably should be withComponent as part of a
*/} - - - 873,435 - - - - Number of transactions - - - - - - $203M - - - - Total volume - - - - - - 227,372 - - - - Number of relayers - - - -
- -
- - You're in good company - - - - {_.map(projects, (item: ProjectLogo, index) => ( - - ))} - -
- -
- - - - - - - Ready to build on 0x? - - - - Get Started - - - - - - - - - - Want help from the 0x team? - - - - Get in Touch - - - - -
+ + + + ); - -const Project = ({ name, imageUrl }: ProjectLogo) => ( - - {name} - -); - -const StyledProject = styled.div` - width: 90px; - height: 90px; - flex-shrink: 0; - margin: 30px; - - img { - object-fit: contain; - width: 100%; - height: 100%; - } -`; -- cgit v1.2.3