aboutsummaryrefslogtreecommitdiffstats
path: root/packages/website/ts/@next/pages/launchKit.tsx
blob: cd86f66c91629f50c461811a23af1f19594b79c4 (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
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
import * as React from 'react';

import {colors} from 'ts/style/colors';

import {Button} from 'ts/@next/components/button';
import {Column, Section, Wrap, WrapCentered} from 'ts/@next/components/layout';
import {SiteWrap} from 'ts/@next/components/siteWrap';
import {Heading, Paragraph} from 'ts/@next/components/text';

import ProtocolIcon from 'ts/@next/icons/illustrations/protocol.svg';
import TokensIcon from 'ts/@next/icons/illustrations/tokens.svg';

export const NextLaunchKit = () => (
    <SiteWrap>
        <Section>
            <WrapCentered>
                <Heading size="medium" isCentered={true}>
                    0x Launch Kit
                </Heading>
                <Paragraph size="medium" isCentered={true} isMuted={true}>
                    The definitive starting point for building a business on top of the 0x protocol.
                </Paragraph>
                <Button href="#">
                    Get Started
                </Button>
            </WrapCentered>
        </Section>

        <Section>
            <Wrap>
                <Column
                    borderColor="#003831"
                    colWidth="1/3"
                    isPadLarge={true}
                >
                    <WrapCentered>
                        <ProtocolIcon width="140" />
                        <Paragraph isCentered={true}>
                            Tap into and share liquidity with other relayers
                        </Paragraph>
                    </WrapCentered>
                </Column>
                <Column
                    borderColor="#003831"
                    colWidth="1/3"
                    isPadLarge={true}
                >
                    <WrapCentered>
                        <ProtocolIcon width="140" />
                        <Paragraph isCentered={true}>
                            Tap into and share liquidity with other relayers
                        </Paragraph>
                    </WrapCentered>
                </Column>
                <Column
                    borderColor="#003831"
                    colWidth="1/3"
                    isPadLarge={true}
                >
                    <WrapCentered>
                        <ProtocolIcon width="140" />
                        <Paragraph isCentered={true}>
                            Tap into and share liquidity with other relayer
                        </Paragraph>
                    </WrapCentered>
                </Column>
            </Wrap>
        </Section>

        <Section>
            <Wrap>
                <Column colWidth="1/3">
                    <TokensIcon width="248"/>
                </Column>

                <Column colWidth="2/3">
                    <Heading size="small">
                        Working on a new token?
                    </Heading>
                    <Paragraph isMuted={true}>
                        Easily create a secondary market for your asset/asset clas
                    </Paragraph>
                </Column>
            </Wrap>
        </Section>
        <Section>
            <Wrap>
                <Column colWidth="1/3">
                    <TokensIcon width="248"/>
                </Column>

                <Column colWidth="2/3">
                    <Heading size="small">
                        Working on a new game?
                    </Heading>
                    <Paragraph isMuted={true}>
                        Easily create an in-app marketplace
                    </Paragraph>
                </Column>
            </Wrap>
        </Section>
        <Section>
            <Wrap>
                <Column colWidth="1/3">
                    <TokensIcon width="248"/>
                </Column>

                <Column colWidth="2/3">
                    <Heading size="small">
                        No exchange in your location?
                    </Heading>
                    <Paragraph isMuted={true}>
                        Build a 0x relayer for your contry’s market
                    </Paragraph>
                </Column>
            </Wrap>
        </Section>

        <Section bgColor={colors.backgroundDark}>
            <Wrap>
                <Column colWidth="1/2">
                    <Heading>
                        0x Instant Configurator
                    </Heading>
                    <Paragraph>
                        Liquidity Source
                    </Paragraph>
                    <Paragraph>
                        What tokens can users buy? (select all)
                    </Paragraph>
                    <Paragraph>
                        Transaction fee ETH address
                    </Paragraph>
                    <Paragraph>
                        Fee Percentage
                    </Paragraph>
                </Column>

                <Column colWidth="1/2">
                    <Paragraph>
                        Code Snippet
                    </Paragraph>
                    <a href="#">Explore the Docs</a>
                    <Paragraph>
                        &lt;code snippet&gt;
                    </Paragraph>
                </Column>
            </Wrap>
        </Section>

        <Section bgColor={colors.brandDark}>
            <Wrap>
                <Column colWidth="1/2" isPadLarge={true}>
                    <WrapCentered>
                        <Heading>
                            Need more flexibility?
                        </Heading>
                        <Paragraph>
                            Dive into our docs, or contact us if needed
                        </Paragraph>
                    </WrapCentered>
                </Column>

                <Column colWidth="1/2" isPadLarge={true}>
                    <WrapCentered>
                        <div>
                            <Button href="#">
                                Explore the Docs
                            </Button>
                            <Button href="#" isTransparent={true}>
                                Get in Touch
                            </Button>
                        </div>
                    </WrapCentered>
                </Column>
            </Wrap>
        </Section>

        <Section>
            <Wrap width="full">
                <Column>
                    <Paragraph size="small" isMuted={0.5}>
                        Disclaimer: The laws and regulations applicable to the use and exchange of digital assets and blockchain-native tokens, including through any software developed using the licensed work created by ZeroEx Intl. (the “Work”), vary by jurisdiction. As set forth in the Apache License, Version 2.0 applicable to the Work, developers are “solely responsible for determining the appropriateness of using or redistributing the Work,” which includes responsibility for ensuring compliance with any such applicable laws and regulations.
                    </Paragraph>
                    <Paragraph size="small" isMuted={0.5}>
                        See the Apache License, Version 2.0 for the specific language governing all applicable permissions and limitations.
                    </Paragraph>
                </Column>
            </Wrap>
        </Section>
    </SiteWrap>
);