aboutsummaryrefslogtreecommitdiffstats
path: root/packages/website/ts/@next/pages/launch_kit.tsx
blob: 30fedba1bcb54007e76f894d71321ab346450699 (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
116
117
118
119
120
121
122
123
124
125
126
127
128
129
import * as _ from 'lodash';
import * as React from 'react';

import {Hero} from 'ts/@next/components/hero';

import { Banner } from 'ts/@next/components/banner';
import { Button } from 'ts/@next/components/button';
import { Definition } from 'ts/@next/components/definition';
import { Icon } from 'ts/@next/components/icon';
import { SiteWrap } from 'ts/@next/components/siteWrap';

import {Section} from 'ts/@next/components/newLayout';
import { ModalContact } from '../components/modals/modal_contact';

import { WebsitePaths } from 'ts/types';

const offersData = [
    {
        icon: 'supportForAllEthereumStandards',
        title: 'Perfect for developers who need a simple drop-in marketplace',
        description: (
            <ul>
                <li>
                    Quickly launch a market for your project’s token
                </li>
                <li>
                    Seamlessly create an in-game marketplace for digital items and collectables
                </li>
                <li>
                    Easily build a 0x relayer for your local market
                </li>
            </ul>
        ),
    },
];

export class NextLaunchKit extends React.Component {
    public state = {
        isContactModalOpen: false,
    };
    public render(): React.ReactNode {
        return (
            <SiteWrap theme="dark">
                <Hero
                    isLargeTitle={false}
                    isFullWidth={false}
                    title="0x Launch Kit"
                    description="Launch a relayer in under a minute"
                    figure={<Icon name="launchKit" size="hero" margin={['small', 0, 'small', 0]} />}
                    actions={<HeroActions/>}
                />

                <Section
                    bgColor="dark"
                    isFlex={true}
                    maxWidth="1170px"
                >
                    <Definition
                        title="Networked Liquidity Pool"
                        titleSize="small"
                        description="Tap into and share liquidity with other relayers"
                        icon="supportForAllEthereumStandards"
                        iconSize="medium"
                        isInline={true}
                    />

                    <Definition
                        title="Extensible Code Repo"
                        titleSize="small"
                        description="Fork and extend to support modes of exchange"
                        icon="code-repo"
                        iconSize="medium"
                        isInline={true}
                    />

                    <Definition
                        title="Exchange Ethereum based Tokens"
                        titleSize="small"
                        description="Enable trading for any ERC-20 or ERC-721 asset"
                        icon="eth-based-tokens"
                        iconSize="medium"
                        isInline={true}
                    />
                </Section>

                <Section>
                {_.map(offersData, (item, index) => (
                    <Definition
                        key={`offers-${index}`}
                        icon={item.icon}
                        title={item.title}
                        description={item.description}
                        isInlineIcon={true}
                        iconSize={240}
                    />
                ))}
                </Section>

                <Banner
                    heading="Need more flexibility?"
                    subline="Dive into our docs, or contact us if needed"
                    mainCta={{ text: 'Get Started', href: '/docs' }}
                    secondaryCta={{ text: 'Get in Touch', href: this._onOpenContactModal.bind(this) }}
                />
                <ModalContact isOpen={this.state.isContactModalOpen} onDismiss={this._onDismissContactModal} />
            </SiteWrap>
        );
    }

    public _onOpenContactModal = (): void => {
        this.setState({ isContactModalOpen: true });
    }

    public _onDismissContactModal = (): void => {
        this.setState({ isContactModalOpen: false });
    }
}

const HeroActions = () => (
    <>
        <Button href="https://0xproject.com/docs" isInline={true}>
            Get Started
        </Button>

        <Button to={WebsitePaths.Why} isTransparent={true} isInline={true}>
            Learn More
        </Button>
    </>
);