1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
|
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';
export interface FeatureProps {
screenWidth: ScreenWidths;
}
export const Features = (props: FeatureProps) => (
<Container backgroundColor={colors.instantSecondaryBackground} className="py3 flex flex-column px3">
<FeatureItem
imgSrc="images/instant/feature_1.svg"
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={[
{
displayText: 'Get started',
linkSrc: 'google.com',
},
{
displayText: 'Explore the docs',
linkSrc: 'google.com',
},
]}
screenWidth={props.screenWidth}
/>
<FeatureItem
imgSrc="images/instant/feature_2.svg"
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={[
{
displayText: 'Learn about affiliate fees',
linkSrc: 'google.com',
},
]}
screenWidth={props.screenWidth}
/>
<FeatureItem
imgSrc="images/instant/feature_3.svg"
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={[
{
displayText: 'Explore AssetBuyer',
linkSrc: 'google.com',
},
{
displayText: 'Learn about liquidity',
linkSrc: 'google.com',
},
]}
screenWidth={props.screenWidth}
/>
</Container>
);
interface LinkInfo {
displayText: string;
linkSrc: string;
}
interface FeatureItemProps {
imgSrc: string;
title: string;
description: string;
linkInfos: LinkInfo[];
screenWidth: ScreenWidths;
}
const FeatureItem = (props: FeatureItemProps) => {
const { imgSrc, title, description, linkInfos, screenWidth } = props;
const isLargeScreen = screenWidth === ScreenWidths.Lg;
const maxWidth = isLargeScreen ? '500px' : undefined;
const image = (
<Container className="center" minWidth="435px" maxHeight="225px">
<Image src={imgSrc} />
</Container>
);
const info = (
<Container maxWidth={maxWidth}>
<Text fontSize="24px" lineHeight="34px" fontColor={colors.white} fontWeight={500}>
{title}
</Text>
<Container marginTop="28px">
<Text fontFamily="Roboto Mono" fontSize="14px" lineHeight="2em" fontColor={colors.grey500}>
{description}
</Text>
</Container>
<Container className="flex" marginTop="28px">
{_.map(linkInfos, linkInfo => {
const onClick = (event: React.MouseEvent<HTMLElement>) => {
window.open(linkInfo.linkSrc, '_blank');
};
return (
<Container
key={linkInfo.linkSrc}
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 (
<Container className="flex flex-column items-center py4 px3">
{isLargeScreen ? (
<Container className="flex">
{image}
<Container marginLeft="115px">{info}</Container>
</Container>
) : (
<Container className="flex flex-column items-center" width="100%">
{image}
<Container marginTop="48px">{info}</Container>
</Container>
)}
</Container>
);
};
|
