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

import * as React from 'react';

import { Button } from 'ts/@next/components/button';
import { Hero } from 'ts/@next/components/hero';
import { LandingAnimation } from 'ts/@next/components/heroImage';

import { HeroAnimation } from 'ts/@next/components/heroAnimation';
import { WebsitePaths } from 'ts/types';

export const SectionLandingHero = () => (
    <Hero
        title="Powering Decentralized Exchange"
        isLargeTitle={true}
        isFullWidth={true}
        description="0x is an open protocol that enables the peer-to-peer exchange of assets on the Ethereum blockchain."
        figure={<LandingAnimation image={<HeroAnimation />} />}
        actions={<HeroActions />}
    />
);

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

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