Divides landing into section components, cleanup
This commit is contained in:
Ezekiel Aquino
@@ -11,6 +11,7 @@ interface ButtonInterface {
|
||||
isNoBorder?: boolean;
|
||||
isNoPadding?: boolean;
|
||||
isWithArrow?: boolean;
|
||||
isAccentColor?: boolean;
|
||||
hasIcon?: boolean | string;
|
||||
isInline?: boolean;
|
||||
href?: string;
|
||||
@@ -26,7 +27,7 @@ export const Button = styled.button<ButtonInterface>`
|
||||
display: ${props => props.isInline && 'inline-block'};
|
||||
background-color: ${props => !props.isTransparent ? colors.brandLight : 'transparent'};
|
||||
border-color: ${props => (props.isTransparent && !props.isNoBorder && !props.isWithArrow) && '#6a6a6a'};
|
||||
color: ${props => props.color || props.theme.textColor};
|
||||
color: ${props => props.isAccentColor ? props.theme.linkColor : (props.color || props.theme.textColor)};
|
||||
padding: ${props => (!props.isNoPadding && !props.isWithArrow) && '18px 30px'};
|
||||
text-align: center;
|
||||
font-size: ${props => props.isWithArrow ? '20px' : '18px'};
|
||||
@@ -37,7 +38,7 @@ export const Button = styled.button<ButtonInterface>`
|
||||
}
|
||||
|
||||
path {
|
||||
fill: ${props => props.color || props.theme.textColor};
|
||||
fill: ${props => props.isAccentColor ? props.theme.linkColor : (props.color || props.theme.textColor)};
|
||||
}
|
||||
`;
|
||||
|
||||
|
||||
@@ -10,7 +10,7 @@ interface IconProps extends PaddingInterface {
|
||||
|
||||
export const Icon: React.FunctionComponent<Props> = (props: Props) => {
|
||||
const IconSVG = Loadable({
|
||||
loader: () => import(`ts/@next/icons/illustrations/${props.name}.svg`),
|
||||
loader: () => import(/* webpackChunkName: "icon" */`ts/@next/icons/illustrations/${props.name}.svg`),
|
||||
loading: () => 'Loading',
|
||||
});
|
||||
|
||||
|
||||
106
packages/website/ts/@next/components/sections/landing/about.tsx
Normal file
106
packages/website/ts/@next/components/sections/landing/about.tsx
Normal file
@@ -0,0 +1,106 @@
|
||||
import * as React from 'react';
|
||||
import {Button, ButtonWrap, Link} from 'ts/@next/components/button';
|
||||
import {Icon, InlineIconWrap} from 'ts/@next/components/icon';
|
||||
import {Column, Section, Wrap, WrapCentered, WrapGrid} from 'ts/@next/components/layout';
|
||||
import {Heading, Paragraph} from 'ts/@next/components/text';
|
||||
import {colors} from 'ts/style/colors';
|
||||
|
||||
export const SectionLandingAbout = () => (
|
||||
<Section bgColor={colors.backgroundDark} isPadLarge={true}>
|
||||
<WrapCentered width="narrow">
|
||||
<InlineIconWrap>
|
||||
<Icon name="coin" size="small" />
|
||||
<Icon name="coin" size="small" />
|
||||
<Icon name="coin" size="small" />
|
||||
<Icon name="coin" size="small" />
|
||||
</InlineIconWrap>
|
||||
|
||||
<Paragraph
|
||||
size="large"
|
||||
isCentered={true}
|
||||
padding={['large', 0, 'default', 0]}
|
||||
>
|
||||
0x is an open protocol that enables the peer-to-peer exchange of Ethereum-based
|
||||
tokens. Anyone in the world can use 0x to service a wide variety of markets
|
||||
ranging from gaming items to financial instruments to assets that could have
|
||||
near existed before.
|
||||
</Paragraph>
|
||||
|
||||
<Link
|
||||
href="#"
|
||||
isTransparent={true}
|
||||
isWithArrow={true}
|
||||
isAccentColor={true}
|
||||
>
|
||||
Discover how developers use 0x
|
||||
</Link>
|
||||
|
||||
<hr
|
||||
style={{
|
||||
width: '340px',
|
||||
margin: '0 auto',
|
||||
borderColor: '#3C4746',
|
||||
marginTop: '60px auto 0 auto',
|
||||
}}
|
||||
/>
|
||||
</WrapCentered>
|
||||
|
||||
{/* Note you can also pass in a string "large/default" or a number for custom margins */}
|
||||
<Wrap padding={['large', 0, 0, 0]}>
|
||||
{/* NOTE: this probably should be withComponent as part of a <dl> */}
|
||||
<Column colWidth="1/3" isNoPadding={true}>
|
||||
<Heading
|
||||
size="medium"
|
||||
isCentered={true}
|
||||
isNoMargin={true}
|
||||
>
|
||||
873,435
|
||||
</Heading>
|
||||
|
||||
<Paragraph
|
||||
isMuted={0.4}
|
||||
isCentered={true}
|
||||
isNoMargin={true}
|
||||
>
|
||||
Number of transactions
|
||||
</Paragraph>
|
||||
</Column>
|
||||
|
||||
<Column colWidth="1/3" isNoPadding={true}>
|
||||
<Heading
|
||||
size="medium"
|
||||
isCentered={true}
|
||||
isNoMargin={true}
|
||||
>
|
||||
$203M
|
||||
</Heading>
|
||||
|
||||
<Paragraph
|
||||
isMuted={0.4}
|
||||
isCentered={true}
|
||||
isNoMargin={true}
|
||||
>
|
||||
Total volume
|
||||
</Paragraph>
|
||||
</Column>
|
||||
|
||||
<Column colWidth="1/3" isNoPadding={true}>
|
||||
<Heading
|
||||
size="medium"
|
||||
isCentered={true}
|
||||
isNoMargin={true}
|
||||
>
|
||||
227,372
|
||||
</Heading>
|
||||
|
||||
<Paragraph
|
||||
isMuted={0.4}
|
||||
isCentered={true}
|
||||
isNoMargin={true}
|
||||
>
|
||||
Number of relayers
|
||||
</Paragraph>
|
||||
</Column>
|
||||
</Wrap>
|
||||
</Section>
|
||||
);
|
||||
@@ -0,0 +1,78 @@
|
||||
import * as _ from 'lodash';
|
||||
import * as React from 'react';
|
||||
import styled from 'styled-components';
|
||||
import {Section, Wrap, WrapCentered, WrapGrid} from 'ts/@next/components/layout';
|
||||
import {Heading, Paragraph} from 'ts/@next/components/text';
|
||||
|
||||
interface ProjectLogo {
|
||||
name: string;
|
||||
imageUrl?: string;
|
||||
}
|
||||
|
||||
const projects: ProjectLogo[] = [
|
||||
{
|
||||
name: 'Radar Relay',
|
||||
imageUrl: '/images/@next/relayer-logos/logo_1.png',
|
||||
},
|
||||
{
|
||||
name: 'Paradex',
|
||||
imageUrl: '/images/@next/relayer-logos/logo_5.png',
|
||||
},
|
||||
{
|
||||
name: 'Amadeus',
|
||||
imageUrl: '/images/@next/relayer-logos/logo_3.png',
|
||||
},
|
||||
{
|
||||
name: 'The Ocean X',
|
||||
imageUrl: '/images/@next/relayer-logos/logo_4.png',
|
||||
},
|
||||
{
|
||||
name: 'Paradex',
|
||||
imageUrl: '/images/@next/relayer-logos/logo_5.png',
|
||||
},
|
||||
{
|
||||
name: 'Decent EX',
|
||||
imageUrl: '/images/@next/relayer-logos/logo_2.1.png',
|
||||
},
|
||||
{
|
||||
name: 'dEX',
|
||||
imageUrl: '/images/@next/relayer-logos/logo_2.2.png',
|
||||
},
|
||||
{
|
||||
name: 'OpenRelay',
|
||||
imageUrl: '/images/@next/relayer-logos/logo_2.3.png',
|
||||
},
|
||||
{
|
||||
name: 'DDEX',
|
||||
imageUrl: '/images/@next/relayer-logos/logo_2.png',
|
||||
},
|
||||
];
|
||||
|
||||
export const SectionLandingClients = () => (
|
||||
<Section isPadLarge={true}>
|
||||
<WrapCentered>
|
||||
<Heading size="small">You're in good company</Heading>
|
||||
</WrapCentered>
|
||||
|
||||
<WrapGrid width="narrow" isWrapped={true}>
|
||||
{_.map(projects, (item: ProjectLogo, index) => (
|
||||
<StyledProject key={`client-${index}`}>
|
||||
<img src={item.imageUrl} alt={item.name} />
|
||||
</StyledProject>
|
||||
))}
|
||||
</WrapGrid>
|
||||
</Section>
|
||||
);
|
||||
|
||||
const StyledProject = styled.div`
|
||||
width: 90px;
|
||||
height: 90px;
|
||||
flex-shrink: 0;
|
||||
margin: 30px;
|
||||
|
||||
img {
|
||||
object-fit: contain;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
`;
|
||||
@@ -0,0 +1,63 @@
|
||||
import * as React from 'react';
|
||||
import {Button, ButtonWrap, Link} from 'ts/@next/components/button';
|
||||
import {Icon, InlineIconWrap} from 'ts/@next/components/icon';
|
||||
import {Column, Section, Wrap, WrapCentered, WrapGrid} from 'ts/@next/components/layout';
|
||||
import {Heading, Paragraph} from 'ts/@next/components/text';
|
||||
|
||||
export const SectionLandingCta = () => (
|
||||
<Section>
|
||||
<Wrap>
|
||||
<Column
|
||||
bgColor="#003831"
|
||||
colWidth="1/2"
|
||||
isPadLarge={true}
|
||||
>
|
||||
<WrapCentered>
|
||||
<Icon
|
||||
name="ready-to-build"
|
||||
size="large"
|
||||
margin={[0, 0, 'default', 0]}
|
||||
/>
|
||||
|
||||
<Paragraph size="medium" color="#00AE99">
|
||||
Ready to build on 0x?
|
||||
</Paragraph>
|
||||
|
||||
<Link
|
||||
href="#"
|
||||
isTransparent={true}
|
||||
isWithArrow={true}
|
||||
>
|
||||
Get Started
|
||||
</Link>
|
||||
</WrapCentered>
|
||||
</Column>
|
||||
|
||||
<Column
|
||||
bgColor="#003831"
|
||||
colWidth="1/2"
|
||||
isPadLarge={true}
|
||||
>
|
||||
<WrapCentered>
|
||||
<Icon
|
||||
name="ready-to-build"
|
||||
size="large"
|
||||
margin={[0, 0, 'default', 0]}
|
||||
/>
|
||||
|
||||
<Paragraph size="medium" color="#00AE99">
|
||||
Want help from the 0x team?
|
||||
</Paragraph>
|
||||
|
||||
<Link
|
||||
href="#"
|
||||
isTransparent={true}
|
||||
isWithArrow={true}
|
||||
>
|
||||
Get in Touch
|
||||
</Link>
|
||||
</WrapCentered>
|
||||
</Column>
|
||||
</Wrap>
|
||||
</Section>
|
||||
);
|
||||
@@ -0,0 +1,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>
|
||||
<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>
|
||||
|
||||
<Column colWidth="1/2">
|
||||
<WrapCentered>
|
||||
<LogoOutlined/>
|
||||
</WrapCentered>
|
||||
</Column>
|
||||
</Wrap>
|
||||
</Section>
|
||||
);
|
||||
@@ -89,10 +89,6 @@ const GlobalStyles = withTheme(createGlobalStyle<GlobalStyle> `
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
a {
|
||||
color: ${props => props.theme.linkColor};
|
||||
}
|
||||
|
||||
img, svg {
|
||||
max-width: 100%;
|
||||
object-fit: contain;
|
||||
@@ -103,11 +99,6 @@ const GlobalStyles = withTheme(createGlobalStyle<GlobalStyle> `
|
||||
line-height: 1.444444444em; // 26px
|
||||
}
|
||||
|
||||
:root a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
svg + p,
|
||||
img + p {
|
||||
padding-top: 30px;
|
||||
|
||||
@@ -1,270 +1,24 @@
|
||||
import * as _ from 'lodash';
|
||||
import * as React from 'react';
|
||||
import styled from 'styled-components';
|
||||
|
||||
import {colors} from 'ts/style/colors';
|
||||
|
||||
import {Button, ButtonWrap, Link} from 'ts/@next/components/button';
|
||||
import {Icon, InlineIconWrap} from 'ts/@next/components/icon';
|
||||
import {Column, Section, Wrap, WrapCentered, WrapGrid} from 'ts/@next/components/layout';
|
||||
import {SiteWrap} from 'ts/@next/components/siteWrap';
|
||||
import {Heading, Paragraph} from 'ts/@next/components/text';
|
||||
|
||||
import LogoOutlined from 'ts/@next/icons/illustrations/logo-outlined.svg';
|
||||
import ProtocolIcon from 'ts/@next/icons/illustrations/protocol.svg';
|
||||
import ReadyToBuildIcon from 'ts/@next/icons/illustrations/ready-to-build.svg';
|
||||
import SupportIcon from 'ts/@next/icons/illustrations/support.svg';
|
||||
import {SectionLandingAbout} from 'ts/@next/components/sections/landing/about';
|
||||
import {SectionLandingClients} from 'ts/@next/components/sections/landing/clients';
|
||||
import {SectionLandingCta} from 'ts/@next/components/sections/landing/cta';
|
||||
import {SectionLandingHero} from 'ts/@next/components/sections/landing/hero';
|
||||
|
||||
interface ProjectLogo {
|
||||
name: string;
|
||||
imageUrl?: string;
|
||||
interface Props {
|
||||
theme: {
|
||||
bgColor: string;
|
||||
textColor: string;
|
||||
linkColor: string;
|
||||
};
|
||||
}
|
||||
|
||||
const projects: ProjectLogo[] = [
|
||||
{
|
||||
name: 'Radar Relay',
|
||||
imageUrl: '/images/@next/relayer-logos/logo_1.png',
|
||||
},
|
||||
{
|
||||
name: 'Paradex',
|
||||
imageUrl: '/images/@next/relayer-logos/logo_5.png',
|
||||
},
|
||||
{
|
||||
name: 'Amadeus',
|
||||
imageUrl: '/images/@next/relayer-logos/logo_3.png',
|
||||
},
|
||||
{
|
||||
name: 'The Ocean X',
|
||||
imageUrl: '/images/@next/relayer-logos/logo_4.png',
|
||||
},
|
||||
{
|
||||
name: 'Paradex',
|
||||
imageUrl: '/images/@next/relayer-logos/logo_5.png',
|
||||
},
|
||||
{
|
||||
name: 'Decent EX',
|
||||
imageUrl: '/images/@next/relayer-logos/logo_2.1.png',
|
||||
},
|
||||
{
|
||||
name: 'dEX',
|
||||
imageUrl: '/images/@next/relayer-logos/logo_2.2.png',
|
||||
},
|
||||
{
|
||||
name: 'OpenRelay',
|
||||
imageUrl: '/images/@next/relayer-logos/logo_2.3.png',
|
||||
},
|
||||
{
|
||||
name: 'DDEX',
|
||||
imageUrl: '/images/@next/relayer-logos/logo_2.png',
|
||||
},
|
||||
];
|
||||
|
||||
export const NextLanding: React.StatelessComponent<{}> = () => (
|
||||
export const NextLanding: React.StatelessComponent<{}> = (props: Props) => (
|
||||
<SiteWrap theme="dark">
|
||||
<Section>
|
||||
<Wrap>
|
||||
<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>
|
||||
|
||||
<Column colWidth="1/2">
|
||||
<WrapCentered>
|
||||
<LogoOutlined/>
|
||||
</WrapCentered>
|
||||
</Column>
|
||||
</Wrap>
|
||||
</Section>
|
||||
|
||||
<Section bgColor={colors.backgroundDark} isPadLarge={true}>
|
||||
<WrapCentered width="narrow">
|
||||
<InlineIconWrap>
|
||||
<Icon name="coin" size="small" />
|
||||
<Icon name="coin" size="small" />
|
||||
<Icon name="coin" size="small" />
|
||||
<Icon name="coin" size="small" />
|
||||
</InlineIconWrap>
|
||||
|
||||
<Paragraph
|
||||
size="large"
|
||||
isCentered={true}
|
||||
padding={['large', 0, 'default', 0]}
|
||||
>
|
||||
0x is an open protocol that enables the peer-to-peer exchange of Ethereum-based
|
||||
tokens. Anyone in the world can use 0x to service a wide variety of markets
|
||||
ranging from gaming items to financial instruments to assets that could have
|
||||
near existed before.
|
||||
</Paragraph>
|
||||
|
||||
<Button href="#" isTransparent={true}>
|
||||
Discover how developers use 0x
|
||||
</Button>
|
||||
</WrapCentered>
|
||||
|
||||
{/* Note you can also pass in a string "large/default" or a number for custom margins */}
|
||||
<Wrap padding={['large', 0, 0, 0]}>
|
||||
{/* NOTE: this probably should be withComponent as part of a <dl> */}
|
||||
<Column colWidth="1/3" isNoPadding={true}>
|
||||
<Heading
|
||||
size="medium"
|
||||
isCentered={true}
|
||||
isNoMargin={true}
|
||||
>
|
||||
873,435
|
||||
</Heading>
|
||||
|
||||
<Paragraph
|
||||
isMuted={0.4}
|
||||
isCentered={true}
|
||||
isNoMargin={true}
|
||||
>
|
||||
Number of transactions
|
||||
</Paragraph>
|
||||
</Column>
|
||||
|
||||
<Column colWidth="1/3" isNoPadding={true}>
|
||||
<Heading
|
||||
size="medium"
|
||||
isCentered={true}
|
||||
isNoMargin={true}
|
||||
>
|
||||
$203M
|
||||
</Heading>
|
||||
|
||||
<Paragraph
|
||||
isMuted={0.4}
|
||||
isCentered={true}
|
||||
isNoMargin={true}
|
||||
>
|
||||
Total volume
|
||||
</Paragraph>
|
||||
</Column>
|
||||
|
||||
<Column colWidth="1/3" isNoPadding={true}>
|
||||
<Heading
|
||||
size="medium"
|
||||
isCentered={true}
|
||||
isNoMargin={true}
|
||||
>
|
||||
227,372
|
||||
</Heading>
|
||||
|
||||
<Paragraph
|
||||
isMuted={0.4}
|
||||
isCentered={true}
|
||||
isNoMargin={true}
|
||||
>
|
||||
Number of relayers
|
||||
</Paragraph>
|
||||
</Column>
|
||||
</Wrap>
|
||||
</Section>
|
||||
|
||||
<Section isPadLarge={true}>
|
||||
<WrapCentered>
|
||||
<Heading size="small">You're in good company</Heading>
|
||||
</WrapCentered>
|
||||
|
||||
<WrapGrid width="narrow" isWrapped={true}>
|
||||
{_.map(projects, (item: ProjectLogo, index) => (
|
||||
<Project
|
||||
key={index}
|
||||
name={item.name}
|
||||
imageUrl={item.imageUrl}
|
||||
/>
|
||||
))}
|
||||
</WrapGrid>
|
||||
</Section>
|
||||
|
||||
<Section>
|
||||
<Wrap>
|
||||
<Column
|
||||
bgColor="#003831"
|
||||
colWidth="1/2"
|
||||
isPadLarge={true}
|
||||
>
|
||||
<WrapCentered>
|
||||
<Icon
|
||||
name="ready-to-build"
|
||||
size="large"
|
||||
margin={[0, 0, 'default', 0]}
|
||||
/>
|
||||
|
||||
<Paragraph size="medium" color="#00AE99">
|
||||
Ready to build on 0x?
|
||||
</Paragraph>
|
||||
|
||||
<Link
|
||||
href="#"
|
||||
isTransparent={true}
|
||||
isWithArrow={true}
|
||||
>
|
||||
Get Started
|
||||
</Link>
|
||||
</WrapCentered>
|
||||
</Column>
|
||||
|
||||
<Column
|
||||
bgColor="#003831"
|
||||
colWidth="1/2"
|
||||
isPadLarge={true}
|
||||
>
|
||||
<WrapCentered>
|
||||
<Icon
|
||||
name="ready-to-build"
|
||||
size="large"
|
||||
margin={[0, 0, 'default', 0]}
|
||||
/>
|
||||
|
||||
<Paragraph size="medium" color="#00AE99">
|
||||
Want help from the 0x team?
|
||||
</Paragraph>
|
||||
|
||||
<Link
|
||||
href="#"
|
||||
isTransparent={true}
|
||||
isWithArrow={true}
|
||||
>
|
||||
Get in Touch
|
||||
</Link>
|
||||
</WrapCentered>
|
||||
</Column>
|
||||
</Wrap>
|
||||
</Section>
|
||||
<SectionLandingHero />
|
||||
<SectionLandingAbout />
|
||||
<SectionLandingClients />
|
||||
<SectionLandingCta />
|
||||
</SiteWrap>
|
||||
);
|
||||
|
||||
const Project = ({ name, imageUrl }: ProjectLogo) => (
|
||||
<StyledProject>
|
||||
<img src={imageUrl} alt={name} />
|
||||
</StyledProject>
|
||||
);
|
||||
|
||||
const StyledProject = styled.div`
|
||||
width: 90px;
|
||||
height: 90px;
|
||||
flex-shrink: 0;
|
||||
margin: 30px;
|
||||
|
||||
img {
|
||||
object-fit: contain;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
`;
|
||||
|
||||
Reference in New Issue
Block a user