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

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

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

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

export const SectionLandingHero = () => (
    <Hero
        title="Powering Decentralized Exchange"
        description="0x is the best solution for adding exchange functionality to your business."
        figure={<LandingAnimation image={<LogoOutlined />} />}
        actions={<Actions />}
    />
);

const Actions = () => (
    <>
        <Button isInline={true}>
            Get Started
        </Button>

        <Button isTransparent={true} isInline={true}>
            Learn More
        </Button>
    </>
);