diff options
author | Francesco Agosti <francesco.agosti93@gmail.com> | 2018-12-04 06:51:27 +0800 |
---|---|---|
committer | GitHub <noreply@github.com> | 2018-12-04 06:51:27 +0800 |
commit | e9fe7dcf54183416e114655595be4e565811d4ed (patch) | |
tree | 748372f2f919571a7221874f627124f61f606235 /packages/website/ts/pages/instant/need_more.tsx | |
parent | 50df67e7511460f051f91785bb4384485077ef60 (diff) | |
parent | 0f01e31cc3826df7000e0ddc35354aa9af515966 (diff) | |
download | dexon-sol-tools-e9fe7dcf54183416e114655595be4e565811d4ed.tar dexon-sol-tools-e9fe7dcf54183416e114655595be4e565811d4ed.tar.gz dexon-sol-tools-e9fe7dcf54183416e114655595be4e565811d4ed.tar.bz2 dexon-sol-tools-e9fe7dcf54183416e114655595be4e565811d4ed.tar.lz dexon-sol-tools-e9fe7dcf54183416e114655595be4e565811d4ed.tar.xz dexon-sol-tools-e9fe7dcf54183416e114655595be4e565811d4ed.tar.zst dexon-sol-tools-e9fe7dcf54183416e114655595be4e565811d4ed.zip |
Merge pull request #1353 from 0xProject/feature/website/instant-marketing
[website] instant marketing page shell
Diffstat (limited to 'packages/website/ts/pages/instant/need_more.tsx')
-rw-r--r-- | packages/website/ts/pages/instant/need_more.tsx | 62 |
1 files changed, 62 insertions, 0 deletions
diff --git a/packages/website/ts/pages/instant/need_more.tsx b/packages/website/ts/pages/instant/need_more.tsx new file mode 100644 index 000000000..e6d5c3694 --- /dev/null +++ b/packages/website/ts/pages/instant/need_more.tsx @@ -0,0 +1,62 @@ +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'; +import { ScreenWidths } from 'ts/types'; +import { constants } from 'ts/utils/constants'; +import { utils } from 'ts/utils/utils'; + +export interface NeedMoreProps { + screenWidth: ScreenWidths; +} +export const NeedMore = (props: NeedMoreProps) => { + const isSmallScreen = props.screenWidth === ScreenWidths.Sm; + const backgroundColor = isSmallScreen ? colors.instantTertiaryBackground : colors.instantSecondaryBackground; + const className = isSmallScreen ? 'flex flex-column items-center' : 'flex'; + const marginRight = isSmallScreen ? undefined : '200px'; + return ( + <Container className="flex flex-column items-center py4 px3" backgroundColor={backgroundColor}> + <Container className={className}> + <Container className="sm-center" marginRight={marginRight}> + <Text fontColor={colors.white} fontSize="32px" lineHeight="45px"> + Need more flexibility? + </Text> + <Text fontColor={colors.grey500} fontSize="18px" lineHeight="27px"> + View our full documentation or reach out if you have any questions. + </Text> + </Container> + <Container className="py3 flex"> + <Container marginRight="20px"> + <Button + type="button" + backgroundColor={colors.white} + fontColor={backgroundColor} + fontSize="18px" + onClick={onGetInTouchClick} + > + Get in Touch + </Button> + </Container> + <Button + type="button" + backgroundColor={colors.mediumBlue} + fontColor={colors.white} + fontSize="18px" + onClick={onDocsClick} + > + Explore the Docs + </Button> + </Container> + </Container> + </Container> + ); +}; + +const onGetInTouchClick = () => { + utils.openUrl(constants.URL_ZEROEX_CHAT); +}; +const onDocsClick = () => { + utils.openUrl(`${utils.getCurrentBaseUrl()}/wiki#Get-Started`); +}; |