aboutsummaryrefslogtreecommitdiffstats
path: root/packages/website/ts/pages
diff options
context:
space:
mode:
authorBrandon Millman <brandon.millman@gmail.com>2018-11-28 03:23:10 +0800
committerBrandon Millman <brandon.millman@gmail.com>2018-11-29 02:59:54 +0800
commit3d88b7f289a9d36887c96a9cb62266ee5cc1065a (patch)
tree22674ce60141f708202c2d9150748fb81ff6aa6e /packages/website/ts/pages
parentd3e6f78fdbb6f18ded0e573d1c54adf335e05208 (diff)
downloaddexon-0x-contracts-3d88b7f289a9d36887c96a9cb62266ee5cc1065a.tar
dexon-0x-contracts-3d88b7f289a9d36887c96a9cb62266ee5cc1065a.tar.gz
dexon-0x-contracts-3d88b7f289a9d36887c96a9cb62266ee5cc1065a.tar.bz2
dexon-0x-contracts-3d88b7f289a9d36887c96a9cb62266ee5cc1065a.tar.lz
dexon-0x-contracts-3d88b7f289a9d36887c96a9cb62266ee5cc1065a.tar.xz
dexon-0x-contracts-3d88b7f289a9d36887c96a9cb62266ee5cc1065a.tar.zst
dexon-0x-contracts-3d88b7f289a9d36887c96a9cb62266ee5cc1065a.zip
feature(website): add links to instant marketing page
Diffstat (limited to 'packages/website/ts/pages')
-rw-r--r--packages/website/ts/pages/instant/features.tsx59
1 files changed, 51 insertions, 8 deletions
diff --git a/packages/website/ts/pages/instant/features.tsx b/packages/website/ts/pages/instant/features.tsx
index b460796c1..3f5d3d8d1 100644
--- a/packages/website/ts/pages/instant/features.tsx
+++ b/packages/website/ts/pages/instant/features.tsx
@@ -1,7 +1,7 @@
+import * as _ from 'lodash';
import * as React from 'react';
import { Container } from 'ts/components/ui/container';
-import { Image } from 'ts/components/ui/image';
import { Text } from 'ts/components/ui/text';
import { colors } from 'ts/style/colors';
import { ScreenWidths } from 'ts/types';
@@ -16,29 +16,52 @@ export const Features = (props: FeatureProps) => (
imgSrc="images/instant/snt_screenshot.png"
title="Support ERC-20 and ERC-721 tokens"
description="Seamlessly integrate token purchasing into your product experience by offering digital assets ranging from in-game items to stablecoins."
- linkInfos={[]}
+ linkInfos={[
+ {
+ displayText: 'Get started',
+ linkSrc: 'google.com',
+ },
+ {
+ displayText: 'Explore the docs',
+ linkSrc: 'google.com',
+ },
+ ]}
screenWidth={props.screenWidth}
/>
<FeatureItem
imgSrc="images/instant/snt_screenshot.png"
title="Generate revenue for your business"
description="With just a few lines of code, you can earn up to 5% in affiliate fees on every transaction from your crypto wallet or dApp."
- linkInfos={[]}
+ linkInfos={[
+ {
+ displayText: 'Learn about affiliate fees',
+ linkSrc: 'google.com',
+ },
+ ]}
screenWidth={props.screenWidth}
/>
<FeatureItem
imgSrc="images/instant/snt_screenshot.png"
title="Easy and Flexible Integration"
description="Use our out-of-the-box design or customize the user interface by integrating the AssetBuyer engine. You can also tap into 0x networked liquidity or choose your own liquidity pool."
- linkInfos={[]}
+ linkInfos={[
+ {
+ displayText: 'Explore AssetBuyer',
+ linkSrc: 'google.com',
+ },
+ {
+ displayText: 'Learn about liquidity',
+ linkSrc: 'google.com',
+ },
+ ]}
screenWidth={props.screenWidth}
/>
</Container>
);
interface LinkInfo {
- linkSrc: string;
displayText: string;
+ linkSrc: string;
}
interface FeatureItemProps {
@@ -63,6 +86,28 @@ const FeatureItem = (props: FeatureItemProps) => {
{description}
</Text>
</Container>
+ <Container className="flex" marginTop="28px">
+ {_.map(linkInfos, linkInfo => {
+ const onClick = (event: React.MouseEvent<HTMLElement>) => {
+ window.open(linkInfo.linkSrc, '_blank');
+ };
+ return (
+ <Container className="flex items-center" marginRight="32px" onClick={onClick} cursor="pointer">
+ <Container>
+ <Text fontSize="16px" fontColor={colors.white}>
+ {linkInfo.displayText}
+ </Text>
+ </Container>
+ <Container paddingTop="1px" paddingLeft="6px">
+ <i
+ className="zmdi zmdi-chevron-right bold"
+ style={{ fontSize: 16, color: colors.white }}
+ />
+ </Container>
+ </Container>
+ );
+ })}
+ </Container>
</Container>
);
return (
@@ -75,9 +120,7 @@ const FeatureItem = (props: FeatureItemProps) => {
) : (
<Container className="flex flex-column items-center">
{image}
- <Container className="center" marginTop="32px">
- {info}
- </Container>
+ <Container marginTop="32px">{info}</Container>
</Container>
)}
</Container>