diff options
| -rw-r--r-- | packages/website/ts/pages/instant/instant.tsx | 7 | ||||
| -rw-r--r-- | packages/website/ts/pages/instant/introducing_0x_instant.tsx | 41 | ||||
| -rw-r--r-- | packages/website/ts/style/colors.ts | 1 |
3 files changed, 48 insertions, 1 deletions
diff --git a/packages/website/ts/pages/instant/instant.tsx b/packages/website/ts/pages/instant/instant.tsx index ae91d7094..5abfaf4b2 100644 --- a/packages/website/ts/pages/instant/instant.tsx +++ b/packages/website/ts/pages/instant/instant.tsx @@ -6,7 +6,9 @@ import { Footer } from 'ts/components/footer'; import { MetaTags } from 'ts/components/meta_tags'; import { TopBar } from 'ts/components/top_bar/top_bar'; import { Container } from 'ts/components/ui/container'; +import { Introducing0xInstant } from 'ts/pages/instant/introducing_0x_instant'; import { Dispatcher } from 'ts/redux/dispatcher'; +import { colors } from 'ts/style/colors'; import { ScreenWidths } from 'ts/types'; import { Translate } from 'ts/utils/translate'; import { utils } from 'ts/utils/utils'; @@ -43,9 +45,12 @@ export class Instant extends React.Component<InstantProps, InstantState> { <TopBar blockchainIsLoaded={false} location={this.props.location} - style={{ position: 'relative' }} + style={{ backgroundColor: colors.instantBackground, position: 'relative' }} translate={this.props.translate} + isNightVersion={true} /> + <Container backgroundColor={colors.instantBackground} /> + <Introducing0xInstant /> <Footer translate={this.props.translate} dispatcher={this.props.dispatcher} /> </Container> ); diff --git a/packages/website/ts/pages/instant/introducing_0x_instant.tsx b/packages/website/ts/pages/instant/introducing_0x_instant.tsx new file mode 100644 index 000000000..da457521f --- /dev/null +++ b/packages/website/ts/pages/instant/introducing_0x_instant.tsx @@ -0,0 +1,41 @@ +import * as React from 'react'; + +import { Button } from 'ts/components/ui/button'; +import { Container } from 'ts/components/ui/container'; +import { Text } from 'ts/components/ui/text'; +import { colors } from 'ts/style/colors'; + +export const Introducing0xInstant = () => ( + <div className="clearfix center lg-py4 md-py4" style={{ backgroundColor: colors.instantBackground }}> + <div className="mx-auto inline-block align-middle py4" style={{ lineHeight: '44px', textAlign: 'center' }}> + <Container className="sm-center sm-pt3"> + <Text + fontColor={colors.white} + fontSize="42px" + lineHeight="52px" + fontFamily="Roboto Mono" + fontWeight="600" + > + Introducing 0x Instant + </Text> + </Container> + <Container className="pb2 lg-pt2 md-pt2 sm-pt3 sm-px3 sm-center" maxWidth="600px"> + <Text fontColor={colors.grey500} fontSize="20px" lineHeight="32px" fontFamily="Roboto Mono"> + A free and flexible way to offer simple crypto + <br /> purchasing in any app or website. + </Text> + </Container> + <div className="py3"> + <Button + type="button" + backgroundColor={colors.mediumBlue} + fontColor={colors.white} + fontSize="18px" + fontFamily="Roboto Mono" + > + Get Started + </Button> + </div> + </div> + </div> +); diff --git a/packages/website/ts/style/colors.ts b/packages/website/ts/style/colors.ts index 0620bae0f..119d22df7 100644 --- a/packages/website/ts/style/colors.ts +++ b/packages/website/ts/style/colors.ts @@ -13,6 +13,7 @@ const appColors = { jobsPageOpenPositionRow: sharedColors.grey100, metaMaskOrange: '#f68c24', metaMaskTransparentOrange: 'rgba(255, 248, 242, 0.8)', + instantBackground: '#222222', }; export const colors = { |