packages/website/ts/@next/components/sections/landing/hero.tsx


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

import * as React from 'react';
import {Button, ButtonWrap} from 'ts/@next/components/button';
import {Column, Section, Wrap, WrapCentered, WrapGrid} from 'ts/@next/components/layout';
import {Heading, Paragraph} from 'ts/@next/components/text';

import LogoOutlined from 'ts/@next/icons/illustrations/logo-outlined.svg';

export const SectionLandingHero = () => (
    <Section>
        <Wrap isReversed={true}>
            <Column colWidth="1/2">
                <WrapCentered>
                    <LogoOutlined/>
                </WrapCentered>
            </Column>

            <Column colWidth="1/2">
                <Heading size="large">
                    Powering Decentralized Exchange
                </Heading>

                <Paragraph size="medium" isMuted={true}>
                    0x is the best solution for adding<br />
                    exchange functionality to your business.
                </Paragraph>

                <ButtonWrap>
                    <Button isInline={true}>
                        Get Started
                    </Button>

                    <Button isTransparent={true} isInline={true}>
                        Learn More
                    </Button>
                </ButtonWrap>
            </Column>
        </Wrap>
    </Section>
);