aboutsummaryrefslogtreecommitdiffstats
path: root/packages/website/ts/pages/instant/features.tsx
blob: ed98ceb53993259dfaf5ec79e1fb7b5a9ec1c2d5 (plain) (blame)
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
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 { ActionLink, ActionLinkProps } from 'ts/pages/instant/action_link';
import { colors } from 'ts/style/colors';
import { ScreenWidths, WebsitePaths } from 'ts/types';

export interface FeatureProps {
    screenWidth: ScreenWidths;
    onGetStartedClick: () => void;
}

export const Features = (props: FeatureProps) => {
    const isSmallScreen = props.screenWidth === ScreenWidths.Sm;
    const getStartedLinkInfo = {
        displayText: 'Get started',
        onClick: props.onGetStartedClick,
    };
    const exploreTheDocsLinkInfo = {
        displayText: 'Explore the docs',
        linkSrc: `${WebsitePaths.Wiki}#Get-Started-With-Instant`,
    };
    const tokenLinkInfos = isSmallScreen ? [getStartedLinkInfo] : [getStartedLinkInfo, exploreTheDocsLinkInfo];
    return (
        <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={tokenLinkInfos}
                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: `${WebsitePaths.Wiki}#Learn-About-Affiliate-Fees`,
                    },
                ]}
                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: `${WebsitePaths.Docs}/asset-buyer`,
                    },
                ]}
                screenWidth={props.screenWidth}
            />
        </Container>
    );
};

interface FeatureItemProps {
    imgSrc: string;
    title: string;
    description: string;
    linkInfos: ActionLinkProps[];
    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} additionalStyle={{ filter: 'drop-shadow(0px 4px 4px rgba(0,0,0,.25))' }} />
        </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 => (
                    <Container key={linkInfo.displayText} marginRight="32px">
                        <ActionLink {...linkInfo} />
                    </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>
    );
};