aboutsummaryrefslogtreecommitdiffstats
path: root/packages/website/ts
diff options
context:
space:
mode:
Diffstat (limited to 'packages/website/ts')
-rw-r--r--packages/website/ts/components/top_bar/top_bar.tsx14
-rw-r--r--packages/website/ts/components/ui/button.tsx1
-rw-r--r--packages/website/ts/components/ui/text.tsx2
-rw-r--r--packages/website/ts/components/ui/typed_text.tsx75
-rw-r--r--packages/website/ts/containers/connect_documentation.ts2
-rw-r--r--packages/website/ts/containers/contract_wrappers_documentation.ts3
-rw-r--r--packages/website/ts/containers/ethereum_types_documentation.ts1
-rw-r--r--packages/website/ts/containers/order_utils_documentation.ts1
-rw-r--r--packages/website/ts/containers/order_watcher_documentation.ts1
-rw-r--r--packages/website/ts/containers/sol_compiler_documentation.ts2
-rw-r--r--packages/website/ts/containers/sol_cov_documentation.ts2
-rw-r--r--packages/website/ts/containers/subproviders_documentation.ts3
-rw-r--r--packages/website/ts/containers/web3_wrapper_documentation.ts3
-rw-r--r--packages/website/ts/containers/zero_ex_js_documentation.ts3
-rw-r--r--packages/website/ts/globals.d.ts1
-rw-r--r--packages/website/ts/pages/landing/landing.tsx532
-rw-r--r--packages/website/ts/types.ts6
17 files changed, 296 insertions, 356 deletions
diff --git a/packages/website/ts/components/top_bar/top_bar.tsx b/packages/website/ts/components/top_bar/top_bar.tsx
index 8580c3a6e..bb61e4fb9 100644
--- a/packages/website/ts/components/top_bar/top_bar.tsx
+++ b/packages/website/ts/components/top_bar/top_bar.tsx
@@ -19,7 +19,7 @@ import { TopBarMenuItem } from 'ts/components/top_bar/top_bar_menu_item';
import { Container } from 'ts/components/ui/container';
import { DropDown } from 'ts/components/ui/drop_down';
import { Dispatcher } from 'ts/redux/dispatcher';
-import { Deco, Key, ProviderType, WebsiteLegacyPaths, WebsitePaths } from 'ts/types';
+import { Deco, Key, ProviderType, WebsitePaths } from 'ts/types';
import { constants } from 'ts/utils/constants';
import { Translate } from 'ts/utils/translate';
@@ -238,7 +238,7 @@ export class TopBar extends React.Component<TopBarProps, TopBarState> {
const fullWidthClasses = isExpandedDisplayType ? 'pr4' : '';
const logoUrl = isNightVersion ? '/images/protocol_logo_white.png' : '/images/protocol_logo_black.png';
const menuClasses = `col col-${
- isExpandedDisplayType ? '4' : '5'
+ isExpandedDisplayType ? '4' : '6'
} ${fullWidthClasses} lg-pr0 md-pr2 sm-hide xs-hide`;
const menuIconStyle = {
fontSize: 25,
@@ -302,6 +302,13 @@ export class TopBar extends React.Component<TopBarProps, TopBarState> {
isExternal={false}
/>
<TopBarMenuItem
+ title={this.props.translate.get(Key.Careers, Deco.Cap)}
+ path={`${WebsitePaths.Careers}`}
+ style={styles.menuItem}
+ isNightVersion={isNightVersion}
+ isExternal={false}
+ />
+ <TopBarMenuItem
title={this.props.translate.get(Key.TradeCallToAction, Deco.Cap)}
path={`${WebsitePaths.Portal}`}
isPrimary={true}
@@ -406,6 +413,9 @@ export class TopBar extends React.Component<TopBarProps, TopBarState> {
<Link to={`${WebsitePaths.About}`} className="text-decoration-none">
<MenuItem className="py2">{this.props.translate.get(Key.About, Deco.Cap)}</MenuItem>
</Link>
+ <Link to={`${WebsitePaths.Careers}`} className="text-decoration-none">
+ <MenuItem className="py2">{this.props.translate.get(Key.Careers, Deco.Cap)}</MenuItem>
+ </Link>
<a className="text-decoration-none" target="_blank" href={constants.URL_BLOG}>
<MenuItem className="py2">{this.props.translate.get(Key.Blog, Deco.Cap)}</MenuItem>
</a>
diff --git a/packages/website/ts/components/ui/button.tsx b/packages/website/ts/components/ui/button.tsx
index 2952c8859..75ba7bcff 100644
--- a/packages/website/ts/components/ui/button.tsx
+++ b/packages/website/ts/components/ui/button.tsx
@@ -96,4 +96,5 @@ export const CallToAction: React.StatelessComponent<CallToActionProps> = ({
CallToAction.defaultProps = {
type: 'dark',
fontSize: '14px',
+ padding: '0.9em 1.6em',
};
diff --git a/packages/website/ts/components/ui/text.tsx b/packages/website/ts/components/ui/text.tsx
index 734483564..cd8f290e3 100644
--- a/packages/website/ts/components/ui/text.tsx
+++ b/packages/website/ts/components/ui/text.tsx
@@ -20,6 +20,7 @@ export interface TextProps {
onClick?: (event: React.MouseEvent<HTMLElement>) => void;
hoverColor?: string;
noWrap?: boolean;
+ display?: string;
}
const PlainText: React.StatelessComponent<TextProps> = ({ children, className, onClick, Tag }) => (
@@ -41,6 +42,7 @@ export const Text = styled(PlainText)`
${props => (props.onClick ? 'cursor: pointer' : '')};
transition: color 0.5s ease;
${props => (props.noWrap ? 'white-space: nowrap' : '')};
+ ${props => (props.display ? `display: ${props.display}` : '')};
&:hover {
${props => (props.onClick ? `color: ${props.hoverColor || darken(0.3, props.fontColor)}` : '')};
}
diff --git a/packages/website/ts/components/ui/typed_text.tsx b/packages/website/ts/components/ui/typed_text.tsx
new file mode 100644
index 000000000..6d38580b9
--- /dev/null
+++ b/packages/website/ts/components/ui/typed_text.tsx
@@ -0,0 +1,75 @@
+import * as _ from 'lodash';
+import * as React from 'react';
+import Typist from 'react-typist';
+
+import { Text, TextProps } from 'ts/components/ui/text';
+
+import 'react-typist/dist/Typist.css';
+
+export interface TypedTextProps extends TextProps {
+ textList: string[];
+ shouldRepeat?: boolean;
+ wordDelayMs?: number;
+ avgKeystrokeDelayMs?: number;
+ stdKeystrokeDelay?: number;
+}
+
+export interface TypedTextState {
+ cycleCount: number;
+}
+
+export class TypedText extends React.Component<TypedTextProps, TypedTextState> {
+ public static defaultProps = {
+ shouldRepeat: false,
+ avgKeystrokeDelayMs: 90,
+ wordDelayMs: 1000,
+ };
+ public state = {
+ cycleCount: 0,
+ };
+ public render(): React.ReactNode {
+ const {
+ textList,
+ shouldRepeat,
+ wordDelayMs,
+ avgKeystrokeDelayMs,
+ stdKeystrokeDelay,
+ // tslint:disable-next-line
+ ...textProps
+ } = this.props;
+ const { cycleCount } = this.state;
+ if (_.isEmpty(textList)) {
+ return null;
+ }
+ const typistChildren: React.ReactNode[] = [];
+ _.forEach(textList, text => {
+ typistChildren.push(
+ <Text key={`text-${text}-${cycleCount}`} {...textProps}>
+ {text}
+ </Text>,
+ );
+ if (wordDelayMs) {
+ typistChildren.push(<Typist.Delay key={`delay-${text}-${cycleCount}`} ms={wordDelayMs} />);
+ }
+ typistChildren.push(<Typist.Backspace key={`backspace-${text}-${cycleCount}`} count={text.length} />);
+ });
+ return (
+ <Typist
+ avgTypingDelay={avgKeystrokeDelayMs}
+ stdTypingDelay={stdKeystrokeDelay}
+ className="inline"
+ key={`typist-key-${cycleCount}`}
+ onTypingDone={this._onTypingDone.bind(this)}
+ >
+ {typistChildren}
+ </Typist>
+ );
+ }
+ private _onTypingDone(): void {
+ if (this.props.shouldRepeat) {
+ this.setState({
+ cycleCount: this.state.cycleCount + 1,
+ });
+ }
+ }
+}
diff --git a/packages/website/ts/containers/connect_documentation.ts b/packages/website/ts/containers/connect_documentation.ts
index 90137243c..a728abe2c 100644
--- a/packages/website/ts/containers/connect_documentation.ts
+++ b/packages/website/ts/containers/connect_documentation.ts
@@ -1,4 +1,4 @@
-import { constants as docConstants, DocsInfo, DocsInfoConfig, SupportedDocJson } from '@0xproject/react-docs';
+import { DocsInfo, DocsInfoConfig, SupportedDocJson } from '@0xproject/react-docs';
import * as React from 'react';
import { connect } from 'react-redux';
import { Dispatch } from 'redux';
diff --git a/packages/website/ts/containers/contract_wrappers_documentation.ts b/packages/website/ts/containers/contract_wrappers_documentation.ts
index fd8599192..1e1735846 100644
--- a/packages/website/ts/containers/contract_wrappers_documentation.ts
+++ b/packages/website/ts/containers/contract_wrappers_documentation.ts
@@ -1,4 +1,4 @@
-import { constants as docConstants, DocsInfo, DocsInfoConfig, SupportedDocJson } from '@0xproject/react-docs';
+import { DocsInfo, DocsInfoConfig, SupportedDocJson } from '@0xproject/react-docs';
import * as React from 'react';
import { connect } from 'react-redux';
import { Dispatch } from 'redux';
@@ -6,7 +6,6 @@ import { DocPage as DocPageComponent, DocPageProps } from 'ts/pages/documentatio
import { Dispatcher } from 'ts/redux/dispatcher';
import { State } from 'ts/redux/reducer';
import { DocPackages } from 'ts/types';
-import { constants } from 'ts/utils/constants';
import { Translate } from 'ts/utils/translate';
/* tslint:disable:no-var-requires */
diff --git a/packages/website/ts/containers/ethereum_types_documentation.ts b/packages/website/ts/containers/ethereum_types_documentation.ts
index e0bf9a83e..2b6d6e64d 100644
--- a/packages/website/ts/containers/ethereum_types_documentation.ts
+++ b/packages/website/ts/containers/ethereum_types_documentation.ts
@@ -6,7 +6,6 @@ import { DocPage as DocPageComponent, DocPageProps } from 'ts/pages/documentatio
import { Dispatcher } from 'ts/redux/dispatcher';
import { State } from 'ts/redux/reducer';
import { DocPackages } from 'ts/types';
-import { constants } from 'ts/utils/constants';
import { Translate } from 'ts/utils/translate';
/* tslint:disable:no-var-requires */
diff --git a/packages/website/ts/containers/order_utils_documentation.ts b/packages/website/ts/containers/order_utils_documentation.ts
index 47ac35268..b54c30a1e 100644
--- a/packages/website/ts/containers/order_utils_documentation.ts
+++ b/packages/website/ts/containers/order_utils_documentation.ts
@@ -6,7 +6,6 @@ import { DocPage as DocPageComponent, DocPageProps } from 'ts/pages/documentatio
import { Dispatcher } from 'ts/redux/dispatcher';
import { State } from 'ts/redux/reducer';
import { DocPackages } from 'ts/types';
-import { constants } from 'ts/utils/constants';
import { Translate } from 'ts/utils/translate';
/* tslint:disable:no-var-requires */
diff --git a/packages/website/ts/containers/order_watcher_documentation.ts b/packages/website/ts/containers/order_watcher_documentation.ts
index 2fa2a9d61..59a018847 100644
--- a/packages/website/ts/containers/order_watcher_documentation.ts
+++ b/packages/website/ts/containers/order_watcher_documentation.ts
@@ -6,7 +6,6 @@ import { DocPage as DocPageComponent, DocPageProps } from 'ts/pages/documentatio
import { Dispatcher } from 'ts/redux/dispatcher';
import { State } from 'ts/redux/reducer';
import { DocPackages } from 'ts/types';
-import { constants } from 'ts/utils/constants';
import { Translate } from 'ts/utils/translate';
/* tslint:disable:no-var-requires */
diff --git a/packages/website/ts/containers/sol_compiler_documentation.ts b/packages/website/ts/containers/sol_compiler_documentation.ts
index 7cde68e5c..20f26ed1d 100644
--- a/packages/website/ts/containers/sol_compiler_documentation.ts
+++ b/packages/website/ts/containers/sol_compiler_documentation.ts
@@ -1,4 +1,4 @@
-import { constants as docConstants, DocsInfo, DocsInfoConfig, SupportedDocJson } from '@0xproject/react-docs';
+import { DocsInfo, DocsInfoConfig, SupportedDocJson } from '@0xproject/react-docs';
import * as React from 'react';
import { connect } from 'react-redux';
import { Dispatch } from 'redux';
diff --git a/packages/website/ts/containers/sol_cov_documentation.ts b/packages/website/ts/containers/sol_cov_documentation.ts
index a457cbc1e..27efd641e 100644
--- a/packages/website/ts/containers/sol_cov_documentation.ts
+++ b/packages/website/ts/containers/sol_cov_documentation.ts
@@ -1,4 +1,4 @@
-import { constants as docConstants, DocsInfo, DocsInfoConfig, SupportedDocJson } from '@0xproject/react-docs';
+import { DocsInfo, DocsInfoConfig, SupportedDocJson } from '@0xproject/react-docs';
import * as React from 'react';
import { connect } from 'react-redux';
import { Dispatch } from 'redux';
diff --git a/packages/website/ts/containers/subproviders_documentation.ts b/packages/website/ts/containers/subproviders_documentation.ts
index 43f06b4ed..28b2e9508 100644
--- a/packages/website/ts/containers/subproviders_documentation.ts
+++ b/packages/website/ts/containers/subproviders_documentation.ts
@@ -1,4 +1,4 @@
-import { constants as docConstants, DocsInfo, DocsInfoConfig, SupportedDocJson } from '@0xproject/react-docs';
+import { DocsInfo, DocsInfoConfig, SupportedDocJson } from '@0xproject/react-docs';
import * as React from 'react';
import { connect } from 'react-redux';
import { Dispatch } from 'redux';
@@ -6,7 +6,6 @@ import { DocPage as DocPageComponent, DocPageProps } from 'ts/pages/documentatio
import { Dispatcher } from 'ts/redux/dispatcher';
import { State } from 'ts/redux/reducer';
import { DocPackages } from 'ts/types';
-import { constants } from 'ts/utils/constants';
import { Translate } from 'ts/utils/translate';
/* tslint:disable:no-var-requires */
diff --git a/packages/website/ts/containers/web3_wrapper_documentation.ts b/packages/website/ts/containers/web3_wrapper_documentation.ts
index 13924fde8..dc9d23304 100644
--- a/packages/website/ts/containers/web3_wrapper_documentation.ts
+++ b/packages/website/ts/containers/web3_wrapper_documentation.ts
@@ -1,4 +1,4 @@
-import { constants as docConstants, DocsInfo, DocsInfoConfig, SupportedDocJson } from '@0xproject/react-docs';
+import { DocsInfo, DocsInfoConfig, SupportedDocJson } from '@0xproject/react-docs';
import * as React from 'react';
import { connect } from 'react-redux';
import { Dispatch } from 'redux';
@@ -6,7 +6,6 @@ import { DocPage as DocPageComponent, DocPageProps } from 'ts/pages/documentatio
import { Dispatcher } from 'ts/redux/dispatcher';
import { State } from 'ts/redux/reducer';
import { DocPackages } from 'ts/types';
-import { constants } from 'ts/utils/constants';
import { Translate } from 'ts/utils/translate';
/* tslint:disable:no-var-requires */
diff --git a/packages/website/ts/containers/zero_ex_js_documentation.ts b/packages/website/ts/containers/zero_ex_js_documentation.ts
index 367d3e064..922dd3c10 100644
--- a/packages/website/ts/containers/zero_ex_js_documentation.ts
+++ b/packages/website/ts/containers/zero_ex_js_documentation.ts
@@ -1,4 +1,4 @@
-import { constants as docConstants, DocsInfo, DocsInfoConfig, SupportedDocJson } from '@0xproject/react-docs';
+import { DocsInfo, DocsInfoConfig, SupportedDocJson } from '@0xproject/react-docs';
import * as React from 'react';
import { connect } from 'react-redux';
import { Dispatch } from 'redux';
@@ -6,7 +6,6 @@ import { DocPage as DocPageComponent, DocPageProps } from 'ts/pages/documentatio
import { Dispatcher } from 'ts/redux/dispatcher';
import { State } from 'ts/redux/reducer';
import { DocPackages } from 'ts/types';
-import { constants } from 'ts/utils/constants';
import { Translate } from 'ts/utils/translate';
/* tslint:disable:no-var-requires */
diff --git a/packages/website/ts/globals.d.ts b/packages/website/ts/globals.d.ts
index 719c2708a..eb8892aea 100644
--- a/packages/website/ts/globals.d.ts
+++ b/packages/website/ts/globals.d.ts
@@ -10,6 +10,7 @@ declare module '*.json' {
export default json;
/* tslint:enable */
}
+declare module 'web3-provider-engine/subproviders/filters';
// This will be defined by default in TS 2.4
// Source: https://github.com/Microsoft/TypeScript/issues/12364
diff --git a/packages/website/ts/pages/landing/landing.tsx b/packages/website/ts/pages/landing/landing.tsx
index 78f5fc3c1..211be7bf2 100644
--- a/packages/website/ts/pages/landing/landing.tsx
+++ b/packages/website/ts/pages/landing/landing.tsx
@@ -8,6 +8,9 @@ import { SubscribeForm } from 'ts/components/forms/subscribe_form';
import { TopBar } from 'ts/components/top_bar/top_bar';
import { CallToAction } from 'ts/components/ui/button';
import { Container } from 'ts/components/ui/container';
+import { Image } from 'ts/components/ui/image';
+import { Text } from 'ts/components/ui/text';
+import { TypedText } from 'ts/components/ui/typed_text';
import { Dispatcher } from 'ts/redux/dispatcher';
import { Deco, Key, Language, ScreenWidths, WebsitePaths } from 'ts/types';
import { constants } from 'ts/utils/constants';
@@ -19,11 +22,7 @@ interface BoxContent {
description: string;
imageUrl: string;
classNames: string;
-}
-interface AssetType {
- title: string;
- imageUrl: string;
- style?: React.CSSProperties;
+ maxWidth: number;
}
interface UseCase {
imageUrl: string;
@@ -31,7 +30,6 @@ interface UseCase {
description: string;
classNames: string;
style?: React.CSSProperties;
- projectIconUrls: string[];
}
interface Project {
logoFileName: string;
@@ -41,72 +39,22 @@ interface Project {
const THROTTLE_TIMEOUT = 100;
const WHATS_NEW_TITLE = '18 ideas for 0x relayers in 2018';
const WHATS_NEW_URL = 'https://blog.0xproject.com/18-ideas-for-0x-relayers-in-2018-80a1498b955f';
-
-const relayersAndDappProjects: Project[] = [
- {
- logoFileName: 'ercdex.png',
- projectUrl: constants.PROJECT_URL_ERC_DEX,
- },
- {
- logoFileName: 'radar_relay.png',
- projectUrl: constants.PROJECT_URL_RADAR_RELAY,
- },
- {
- logoFileName: 'paradex.png',
- projectUrl: constants.PROJECT_URL_PARADEX,
- },
- {
- logoFileName: 'the_ocean.png',
- projectUrl: constants.PROJECT_URL_0CEAN,
- },
- {
- logoFileName: 'dydx.png',
- projectUrl: constants.PROJECT_URL_DYDX,
- },
- {
- logoFileName: 'ethfinex.png',
- projectUrl: constants.PROJECT_URL_ETHFINEX,
- },
- {
- logoFileName: 'melonport.png',
- projectUrl: constants.PROJECT_URL_MELONPORT,
- },
- {
- logoFileName: 'maker.png',
- projectUrl: constants.PROJECT_URL_MAKER,
- },
- {
- logoFileName: 'dharma.png',
- projectUrl: constants.PROJECT_URL_DHARMA,
- },
- {
- logoFileName: 'lendroid.png',
- projectUrl: constants.PROJECT_URL_LENDROID,
- },
- {
- logoFileName: 'district0x.png',
- projectUrl: constants.PROJECT_URL_DISTRICT_0X,
- },
- {
- logoFileName: 'aragon.png',
- projectUrl: constants.PROJECT_URL_ARAGON,
- },
- {
- logoFileName: 'blocknet.png',
- projectUrl: constants.PROJECT_URL_BLOCKNET,
- },
- {
- logoFileName: 'imtoken.png',
- projectUrl: constants.PROJECT_URL_IMTOKEN,
- },
- {
- logoFileName: 'augur.png',
- projectUrl: constants.PROJECT_URL_AUGUR,
- },
- {
- logoFileName: 'anx.png',
- projectUrl: constants.PROJECT_URL_OPEN_ANX,
- },
+const TITLE_STYLE: React.CSSProperties = {
+ fontFamily: 'Roboto Mono',
+ color: colors.grey,
+ fontWeight: 300,
+ letterSpacing: 3,
+};
+const ROTATING_LIST = [
+ 'tokens',
+ 'game items',
+ 'digital art',
+ 'futures',
+ 'stocks',
+ 'derivatives',
+ 'loans',
+ 'cats',
+ 'everything',
];
const relayerProjects: Project[] = [
@@ -199,21 +147,13 @@ export class Landing extends React.Component<LandingProps, LandingState> {
/>
{this._renderHero()}
{this._renderProjects(
- relayersAndDappProjects,
- this.props.translate.get(Key.ProjectsHeader, Deco.Upper),
- colors.projectsGrey,
- false,
- )}
- {this._renderTokenizationSection()}
- {this._renderProtocolSection()}
- {this._renderProjects(
relayerProjects,
this.props.translate.get(Key.RelayersHeader, Deco.Upper),
- colors.heroGrey,
+ colors.projectsGrey,
true,
)}
{this._renderInfoBoxes()}
- {this._renderBuildingBlocksSection()}
+ {this._renderTokenizationSection()}
{this._renderUseCases()}
{this._renderCallToAction()}
<Footer translate={this.props.translate} dispatcher={this.props.dispatcher} />
@@ -222,15 +162,18 @@ export class Landing extends React.Component<LandingProps, LandingState> {
}
private _renderHero(): React.ReactNode {
const isSmallScreen = this.state.screenWidth === ScreenWidths.Sm;
- const left = 'col lg-col-7 md-col-7 col-12 lg-pl4 md-pl4 sm-pl0 sm-px3 sm-center';
+ const left = 'col lg-col-6 md-col-6 col-12 lg-pl4 md-pl4 sm-pl0 sm-px3 sm-center';
+ const flexClassName = isSmallScreen
+ ? 'flex items-center flex-column justify-center'
+ : 'flex items-center justify-center';
return (
<div className="clearfix py4" style={{ backgroundColor: colors.heroGrey }}>
<div className="mx-auto max-width-4 clearfix">
{this._renderWhatsNew()}
- <div className="lg-pt4 md-pt4 sm-pt2 lg-pb4 md-pb4 lg-mt4 md-mt4 sm-mt2 sm-mb4 clearfix">
- <div className="col lg-col-5 md-col-5 col-12 sm-center">
- <img src="/images/landing/hero_chip_image.png" height={isSmallScreen ? 300 : 395} />
- </div>
+ <div className={`${flexClassName} lg-pt4 md-pt4 sm-pt2 lg-pb4 md-pb4 lg-mt4 md-mt4 sm-mt2 sm-mb4`}>
+ <Container marginTop="30px" marginBottom="30px" marginLeft="15px" marginRight="15px">
+ <Image src="/images/landing/0x_homepage.svg" maxWidth="100%" height="auto" />
+ </Container>
<div className={left} style={{ color: colors.white, height: 390, lineHeight: '390px' }}>
<div
className="inline-block lg-align-middle md-align-middle sm-align-top"
@@ -239,37 +182,46 @@ export class Landing extends React.Component<LandingProps, LandingState> {
lineHeight: '36px',
}}
>
- <div
+ <Text
className="sm-pb2"
- style={{
- fontFamily: 'Roboto Mono',
- fontSize: isSmallScreen ? 26 : 34,
- }}
+ fontFamily="Roboto"
+ display="inline-block"
+ fontColor={colors.grey300}
+ fontWeight={500}
+ lineHeight="1.3em"
+ fontSize={isSmallScreen ? '28px' : '36px'}
>
{this.props.translate.get(Key.TopHeader, Deco.Cap)}
- </div>
- <div
- className="pt2 h5 sm-mx-auto"
- style={{
- maxWidth: 446,
- fontFamily: 'Roboto Mono',
- lineHeight: 1.7,
- fontWeight: 300,
- }}
+ {this.props.translate.getLanguage() === Language.English && (
+ <React.Fragment>
+ {' '}
+ for{' '}
+ <TypedText
+ fontFamily="Roboto"
+ display="inline-block"
+ fontColor={colors.white}
+ fontWeight={700}
+ lineHeight="1.3em"
+ fontSize={isSmallScreen ? '28px' : '36px'}
+ textList={ROTATING_LIST}
+ shouldRepeat={true}
+ />
+ </React.Fragment>
+ )}
+ </Text>
+ <Container
+ className={`pt3 flex clearfix sm-mx-auto ${isSmallScreen ? 'justify-center' : ''}`}
>
- {this.props.translate.get(Key.TopTagline)}
- </div>
- <Container className="pt3 clearfix sm-mx-auto" maxWidth="390px">
- <div className="lg-pr2 md-pr2 lg-col lg-col-6 sm-center sm-col sm-col-12 mb2">
+ <Container paddingRight="20px">
<Link to={WebsitePaths.ZeroExJs} className="text-decoration-none">
- <CallToAction width="175px" type="light">
+ <CallToAction type="light">
{this.props.translate.get(Key.BuildCallToAction, Deco.Cap)}
</CallToAction>
</Link>
- </div>
- <div className="lg-col lg-col-6 sm-center sm-col sm-col-12">
+ </Container>
+ <div>
<Link to={WebsitePaths.Portal} className="text-decoration-none">
- <CallToAction width="175px">
+ <CallToAction>
{this.props.translate.get(Key.TradeCallToAction, Deco.Cap)}
</CallToAction>
</Link>
@@ -287,19 +239,24 @@ export class Landing extends React.Component<LandingProps, LandingState> {
return (
<div className="sm-center sm-px1">
<a href={WHATS_NEW_URL} target="_blank" className="inline-block text-decoration-none">
- <div className="flex sm-pl0 md-pl2 lg-pl0" style={{ fontFamily: 'Roboto Mono', fontWeight: 600 }}>
- <div
- className="mr1 px1"
- style={{
- backgroundColor: colors.white,
- borderRadius: 3,
- color: colors.heroGrey,
- height: 23,
- }}
+ <div className="flex items-center sm-pl0 md-pl2 lg-pl0">
+ <Container
+ paddingTop="3px"
+ paddingLeft="8px"
+ paddingBottom="3px"
+ paddingRight="8px"
+ backgroundColor={colors.white}
+ borderRadius={6}
>
- New
- </div>
- <div style={{ color: colors.darkGrey }}>{WHATS_NEW_TITLE}</div>
+ <Text fontSize="14px" fontWeight={500} fontColor={colors.heroGrey}>
+ New
+ </Text>
+ </Container>
+ <Container marginLeft="12px">
+ <Text fontSize="16px" fontWeight={500} fontColor={colors.grey300}>
+ {WHATS_NEW_TITLE}
+ </Text>
+ </Container>
</div>
</a>
</div>
@@ -344,16 +301,10 @@ export class Landing extends React.Component<LandingProps, LandingState> {
</div>
);
});
- const titleStyle: React.CSSProperties = {
- fontFamily: 'Roboto Mono',
- color: colors.grey,
- fontWeight: 300,
- letterSpacing: 3,
- };
return (
<div className={`clearfix py4 ${isTitleCenter && 'center'}`} style={{ backgroundColor }}>
<div className="mx-auto max-width-4 clearfix sm-px3">
- <div className="h4 pb3 lg-pl0 md-pl3 sm-pl2" style={titleStyle}>
+ <div className="h4 pb3 lg-pl0 md-pl3 sm-pl2" style={TITLE_STYLE}>
{title}
</div>
<div className="clearfix">{projectList}</div>
@@ -368,7 +319,7 @@ export class Landing extends React.Component<LandingProps, LandingState> {
>
{this.props.translate.get(Key.FullListPrompt)}{' '}
<Link
- to={`${WebsitePaths.Wiki}#List-of-Projects-Using-0x-Protocol`}
+ to={WebsitePaths.Portal}
className="text-decoration-none underline"
style={{ color: colors.landingLinkGrey }}
>
@@ -402,7 +353,7 @@ export class Landing extends React.Component<LandingProps, LandingState> {
>
{this.props.translate.get(Key.TokenizedSectionDescription, Deco.Cap)}
</div>
- <div className="flex pt1 sm-px3">{this._renderAssetTypes()}</div>
+ <div className="flex pt1 sm-px3">{this._renderMissionAndValuesButton()}</div>
</div>
</div>
{!isSmallScreen && this._renderTokenCloud()}
@@ -410,116 +361,6 @@ export class Landing extends React.Component<LandingProps, LandingState> {
</div>
);
}
- private _renderProtocolSection(): React.ReactNode {
- const isSmallScreen = this.state.screenWidth === ScreenWidths.Sm;
- return (
- <div className="clearfix pt4" style={{ backgroundColor: colors.heroGrey }}>
- <div className="mx-auto max-width-4 pt4 clearfix">
- <div className="col lg-col-6 md-col-6 col-12 sm-center">
- <img src="/images/landing/relayer_diagram.png" height={isSmallScreen ? 326 : 426} />
- </div>
- <div
- className="col lg-col-6 md-col-6 col-12 lg-pr3 md-pr3 sm-mx-auto"
- style={{
- color: colors.beigeWhite,
- maxWidth: isSmallScreen ? 'none' : 445,
- height: 430,
- lineHeight: '430px',
- }}
- >
- <div
- className="inline-block lg-align-middle md-align-middle sm-align-top"
- style={{ lineHeight: '43px' }}
- >
- <div
- className="lg-h1 md-h1 sm-h2 pb1 sm-pt3 sm-center"
- style={{ fontFamily: 'Roboto Mono' }}
- >
- <div>{this.props.translate.get(Key.OffChainOrderRelay, Deco.Cap)}</div>
- <div> {this.props.translate.get(Key.OnChainSettlement, Deco.Cap)}</div>
- </div>
- <div
- className="pb2 pt2 h5 sm-center sm-px3 sm-mx-auto"
- style={{
- fontFamily: 'Roboto Mono',
- lineHeight: 1.7,
- fontWeight: 300,
- maxWidth: 445,
- }}
- >
- {this.props.translate.get(Key.OffChainOnChainDescription, Deco.Cap)}
- </div>
- </div>
- </div>
- </div>
- </div>
- );
- }
- private _renderBuildingBlocksSection(): React.ReactNode {
- const isSmallScreen = this.state.screenWidth === ScreenWidths.Sm;
- const descriptionStyle: React.CSSProperties = {
- fontFamily: 'Roboto Mono',
- lineHeight: isSmallScreen ? 1.5 : 2,
- fontWeight: 300,
- fontSize: 15,
- maxWidth: isSmallScreen ? 375 : 'none',
- };
- const callToActionStyle: React.CSSProperties = {
- fontFamily: 'Roboto Mono',
- fontSize: 15,
- fontWeight: 300,
- maxWidth: isSmallScreen ? 375 : 441,
- };
- return (
- <div className="clearfix lg-pt4 md-pt4" style={{ backgroundColor: colors.heroGrey }}>
- <div className="mx-auto max-width-4 lg-pt4 md-pt4 lg-mb4 md-mb4 sm-mb2 clearfix">
- {isSmallScreen && this._renderBlockChipImage()}
- <div
- className="col lg-col-6 md-col-6 col-12 lg-pr3 md-pr3 sm-px3"
- style={{ color: colors.beigeWhite }}
- >
- <div
- className="pb1 lg-pt4 md-pt4 sm-pt3 lg-h1 md-h1 sm-h2 sm-px3 sm-center"
- style={{ fontFamily: 'Roboto Mono' }}
- >
- {this.props.translate.get(Key.BuildingBlockSectionHeader, Deco.Cap)}
- </div>
- <div className="pb3 pt2 sm-mx-auto sm-center" style={descriptionStyle}>
- {this.props.translate.get(Key.BuildingBlockSectionDescription, Deco.Cap)}
- </div>
- <div className="sm-mx-auto sm-center" style={callToActionStyle}>
- {this.props.translate.get(Key.DevToolsPrompt, Deco.Cap)}{' '}
- <Link
- to={WebsitePaths.ZeroExJs}
- className="text-decoration-none underline"
- style={{ color: colors.beigeWhite, fontFamily: 'Roboto Mono' }}
- >
- 0x.js
- </Link>{' '}
- {this.props.translate.get(Key.And)}{' '}
- <Link
- to={WebsitePaths.SmartContracts}
- className="text-decoration-none underline"
- style={{ color: colors.beigeWhite, fontFamily: 'Roboto Mono' }}
- >
- {this.props.translate.get(Key.SmartContract)}
- </Link>{' '}
- {this.props.translate.get(Key.Docs)}
- </div>
- </div>
- {!isSmallScreen && this._renderBlockChipImage()}
- </div>
- </div>
- );
- }
- private _renderBlockChipImage(): React.ReactNode {
- const isSmallScreen = this.state.screenWidth === ScreenWidths.Sm;
- return (
- <div className="col lg-col-6 md-col-6 col-12 sm-center">
- <img src="/images/landing/0x_chips.png" height={isSmallScreen ? 240 : 368} />
- </div>
- );
- }
private _renderTokenCloud(): React.ReactNode {
const isSmallScreen = this.state.screenWidth === ScreenWidths.Sm;
return (
@@ -528,48 +369,16 @@ export class Landing extends React.Component<LandingProps, LandingState> {
</div>
);
}
- private _renderAssetTypes(): React.ReactNode {
- const isSmallScreen = this.state.screenWidth === ScreenWidths.Sm;
- const assetTypes: AssetType[] = [
- {
- title: this.props.translate.get(Key.Currency, Deco.Cap),
- imageUrl: '/images/landing/currency.png',
- },
- {
- title: this.props.translate.get(Key.TraditionalAssets, Deco.Cap),
- imageUrl: '/images/landing/stocks.png',
- style: {
- paddingLeft: isSmallScreen ? 41 : 56,
- paddingRight: isSmallScreen ? 41 : 56,
- },
- },
- {
- title: this.props.translate.get(Key.DigitalGoods, Deco.Cap),
- imageUrl: '/images/landing/digital_goods.png',
- },
- ];
- const assets = _.map(assetTypes, (assetType: AssetType) => {
- const style = _.isUndefined(assetType.style) ? {} : assetType.style;
- return (
- <div key={`asset-${assetType.title}`} className="center" style={{ opacity: 0.8, ...style }}>
- <div>
- <img src={assetType.imageUrl} height="80" />
- </div>
- <div
- style={{
- fontFamily: 'Roboto Mono',
- fontSize: 13.5,
- fontWeight: 400,
- color: colors.darkestGrey,
- lineHeight: 1.4,
- }}
- >
- {assetType.title}
- </div>
- </div>
- );
- });
- return assets;
+ private _renderMissionAndValuesButton(): React.ReactNode {
+ return (
+ <a
+ href={constants.URL_MISSION_AND_VALUES_BLOG_POST}
+ target="_blank"
+ className="inline-block text-decoration-none"
+ >
+ <CallToAction>{this.props.translate.get(Key.OurMissionAndValues, Deco.CapWords)}</CallToAction>
+ </a>
+ );
}
private _renderInfoBoxes(): React.ReactNode {
const isSmallScreen = this.state.screenWidth === ScreenWidths.Sm;
@@ -586,27 +395,34 @@ export class Landing extends React.Component<LandingProps, LandingState> {
description: this.props.translate.get(Key.BenefitOneDescription, Deco.Cap),
imageUrl: '/images/landing/distributed_network.png',
classNames: '',
+ maxWidth: 160,
},
{
title: this.props.translate.get(Key.BenefitTwoTitle, Deco.Cap),
description: this.props.translate.get(Key.BenefitTwoDescription, Deco.Cap),
imageUrl: '/images/landing/liquidity.png',
classNames: 'mx-auto',
+ maxWidth: 160,
},
{
title: this.props.translate.get(Key.BenefitThreeTitle, Deco.Cap),
description: this.props.translate.get(Key.BenefitThreeDescription, Deco.Cap),
- imageUrl: '/images/landing/open_source.png',
+ imageUrl: '/images/landing/exchange_everywhere.png',
classNames: 'right',
+ maxWidth: 130,
},
];
const boxes = _.map(boxContents, (boxContent: BoxContent) => {
return (
<div key={`box-${boxContent.title}`} className="col lg-col-4 md-col-4 col-12 sm-pb4">
<div className={`center sm-mx-auto ${!isSmallScreen && boxContent.classNames}`} style={boxStyle}>
- <div>
- <img src={boxContent.imageUrl} style={{ height: 210 }} />
- </div>
+ <Container className="flex items-center" height="210px">
+ <img
+ className="mx-auto"
+ src={boxContent.imageUrl}
+ style={{ height: 'auto', maxWidth: boxContent.maxWidth }}
+ />
+ </Container>
<div className="h3" style={{ color: 'black', fontFamily: 'Roboto Mono' }}>
{boxContent.title}
</div>
@@ -617,15 +433,9 @@ export class Landing extends React.Component<LandingProps, LandingState> {
</div>
);
});
- const titleStyle: React.CSSProperties = {
- fontFamily: 'Roboto Mono',
- color: colors.grey,
- fontWeight: 300,
- letterSpacing: 3,
- };
return (
<div className="clearfix" style={{ backgroundColor: colors.heroGrey }}>
- <div className="center pb3 pt4" style={titleStyle}>
+ <div className="center pb3 pt4" style={TITLE_STYLE}>
{this.props.translate.get(Key.BenefitsHeader, Deco.Upper)}
</div>
<div className="mx-auto pb4 sm-mt2 clearfix" style={{ maxWidth: '60em' }}>
@@ -634,53 +444,92 @@ export class Landing extends React.Component<LandingProps, LandingState> {
</div>
);
}
- private _renderUseCases(): React.ReactNode {
+ private _getUseCases(): UseCase[] {
const isSmallScreen = this.state.screenWidth === ScreenWidths.Sm;
-
- const useCases: UseCase[] = [
- {
- imageUrl: '/images/landing/governance_icon.png',
- type: this.props.translate.get(Key.DecentralizedGovernance, Deco.Upper),
- description: this.props.translate.get(Key.DecentralizedGovernanceDescription, Deco.Cap),
- projectIconUrls: ['/images/landing/aragon.png'],
- classNames: 'lg-px2 md-px2',
- },
- {
- imageUrl: '/images/landing/prediction_market_icon.png',
- type: this.props.translate.get(Key.PredictionMarkets, Deco.Upper),
- description: this.props.translate.get(Key.PredictionMarketsDescription, Deco.Cap),
- projectIconUrls: ['/images/landing/augur.png'],
- classNames: 'lg-px2 md-px2',
- },
- {
- imageUrl: '/images/landing/stable_tokens_icon.png',
- type: this.props.translate.get(Key.StableTokens, Deco.Upper),
- description: this.props.translate.get(Key.StableTokensDescription, Deco.Cap),
- projectIconUrls: ['/images/landing/maker.png'],
- classNames: 'lg-px2 md-px2',
- },
- {
- imageUrl: '/images/landing/loans_icon.png',
- type: this.props.translate.get(Key.DecentralizedLoans, Deco.Upper),
- description: this.props.translate.get(Key.DecentralizedLoansDescription, Deco.Cap),
- projectIconUrls: ['/images/landing/dharma.png', '/images/landing/lendroid.png'],
- classNames: 'lg-pr2 md-pr2 lg-col-6 md-col-6',
- style: {
- width: 291,
- float: 'right',
- marginTop: !isSmallScreen ? 38 : 0,
+ const isEnglish = this.props.translate.getLanguage() === Language.English;
+ if (isEnglish) {
+ return [
+ {
+ imageUrl: '/images/landing/governance_icon.png',
+ type: this.props.translate.get(Key.GamingAndCollectables, Deco.Upper),
+ description: this.props.translate.get(Key.GamingAndCollectablesDescription, Deco.Cap),
+ classNames: 'lg-px2 md-px2',
},
- },
- {
- imageUrl: '/images/landing/fund_management_icon.png',
- type: this.props.translate.get(Key.FundManagement, Deco.Upper),
- description: this.props.translate.get(Key.FundManagementDescription, Deco.Cap),
- projectIconUrls: ['/images/landing/melonport.png'],
- classNames: 'lg-pl2 md-pl2 lg-col-6 md-col-6',
- style: { width: 291, marginTop: !isSmallScreen ? 38 : 0 },
- },
- ];
-
+ {
+ imageUrl: '/images/landing/prediction_market_icon.png',
+ type: this.props.translate.get(Key.PredictionMarkets, Deco.Upper),
+ description: this.props.translate.get(Key.PredictionMarketsDescription, Deco.Cap),
+ classNames: 'lg-px2 md-px2',
+ },
+ {
+ imageUrl: '/images/landing/fund_management_icon.png',
+ type: this.props.translate.get(Key.OrderBooks, Deco.Upper),
+ description: this.props.translate.get(Key.OrderBooksDescription, Deco.Cap),
+ classNames: 'lg-px2 md-px2',
+ },
+ {
+ imageUrl: '/images/landing/loans_icon.png',
+ type: this.props.translate.get(Key.DecentralizedLoans, Deco.Upper),
+ description: this.props.translate.get(Key.DecentralizedLoansDescription, Deco.Cap),
+ classNames: 'lg-pr2 md-pr2 lg-col-6 md-col-6',
+ style: {
+ width: 291,
+ float: 'right',
+ marginTop: !isSmallScreen ? 38 : 0,
+ },
+ },
+ {
+ imageUrl: '/images/landing/stable_tokens_icon.png',
+ type: this.props.translate.get(Key.StableTokens, Deco.Upper),
+ description: this.props.translate.get(Key.StableTokensDescription, Deco.Cap),
+ classNames: 'lg-pl2 md-pl2 lg-col-6 md-col-6',
+ style: { width: 291, marginTop: !isSmallScreen ? 38 : 0 },
+ },
+ ];
+ } else {
+ return [
+ {
+ imageUrl: '/images/landing/governance_icon.png',
+ type: this.props.translate.get(Key.DecentralizedGovernance, Deco.Upper),
+ description: this.props.translate.get(Key.DecentralizedGovernanceDescription, Deco.Cap),
+ classNames: 'lg-px2 md-px2',
+ },
+ {
+ imageUrl: '/images/landing/prediction_market_icon.png',
+ type: this.props.translate.get(Key.PredictionMarkets, Deco.Upper),
+ description: this.props.translate.get(Key.PredictionMarketsDescription, Deco.Cap),
+ classNames: 'lg-px2 md-px2',
+ },
+ {
+ imageUrl: '/images/landing/stable_tokens_icon.png',
+ type: this.props.translate.get(Key.StableTokens, Deco.Upper),
+ description: this.props.translate.get(Key.StableTokensDescription, Deco.Cap),
+ classNames: 'lg-px2 md-px2',
+ },
+ {
+ imageUrl: '/images/landing/loans_icon.png',
+ type: this.props.translate.get(Key.DecentralizedLoans, Deco.Upper),
+ description: this.props.translate.get(Key.DecentralizedLoansDescription, Deco.Cap),
+ classNames: 'lg-pr2 md-pr2 lg-col-6 md-col-6',
+ style: {
+ width: 291,
+ float: 'right',
+ marginTop: !isSmallScreen ? 38 : 0,
+ },
+ },
+ {
+ imageUrl: '/images/landing/fund_management_icon.png',
+ type: this.props.translate.get(Key.FundManagement, Deco.Upper),
+ description: this.props.translate.get(Key.FundManagementDescription, Deco.Cap),
+ classNames: 'lg-pl2 md-pl2 lg-col-6 md-col-6',
+ style: { width: 291, marginTop: !isSmallScreen ? 38 : 0 },
+ },
+ ];
+ }
+ }
+ private _renderUseCases(): React.ReactNode {
+ const isSmallScreen = this.state.screenWidth === ScreenWidths.Sm;
+ const useCases = this._getUseCases();
const cases = _.map(useCases, (useCase: UseCase) => {
const style = _.isUndefined(useCase.style) || isSmallScreen ? {} : useCase.style;
const useCaseBoxStyle = {
@@ -715,7 +564,7 @@ export class Landing extends React.Component<LandingProps, LandingState> {
lineHeight: 1.5,
fontSize: 14,
overflow: 'hidden',
- height: 104,
+ height: 124,
}}
>
{useCase.description}
@@ -725,7 +574,10 @@ export class Landing extends React.Component<LandingProps, LandingState> {
);
});
return (
- <div className="clearfix pb4 lg-pt2 md-pt2 sm-pt4" style={{ backgroundColor: colors.heroGrey }}>
+ <div className="clearfix py4" style={{ backgroundColor: colors.heroGrey }}>
+ <div className="center h4 pb3 lg-pl0 md-pl3 sm-pl2" style={TITLE_STYLE}>
+ {this.props.translate.get(Key.UseCasesHeader, Deco.Upper)}
+ </div>
<div className="mx-auto pb4 pt3 mt1 sm-mt2 clearfix" style={{ maxWidth: '67em' }}>
{cases}
</div>
diff --git a/packages/website/ts/types.ts b/packages/website/ts/types.ts
index b95c80542..19cc8f858 100644
--- a/packages/website/ts/types.ts
+++ b/packages/website/ts/types.ts
@@ -399,6 +399,7 @@ export enum Key {
OffChainOnChainDescription = 'OFFCHAIN_ONCHAIN_DESCRIPTION',
RelayersHeader = 'RELAYERS_HEADER',
BenefitsHeader = 'BENEFITS_HEADER',
+ UseCasesHeader = 'USE_CASES_HEADER',
BenefitOneTitle = 'BENEFIT_ONE_TITLE',
BenefitOneDescription = 'BENEFIT_ONE_DESCRIPTION',
BenefitTwoTitle = 'BENEFIT_TWO_TITLE',
@@ -420,6 +421,10 @@ export enum Key {
DecentralizedLoansDescription = 'DECENTRALIZED_LOANS_DESCRIPTION',
FundManagement = 'FUND_MANAGEMENT',
FundManagementDescription = 'FUND_MANAGEMENT_DESCRIPTION',
+ GamingAndCollectables = 'GAMING_AND_COLLECTABLES',
+ GamingAndCollectablesDescription = 'GAMING_AND_COLLECTABLES_DESCRIPTION',
+ OrderBooks = 'ORDER_BOOKS',
+ OrderBooksDescription = 'ORDER_BOOKS_DESCRIPTION',
FinalCallToAction = 'FINAL_CALL_TO_ACTION',
Documentation = 'DOCUMENTATION',
Community = 'COMMUNITY',
@@ -452,6 +457,7 @@ export enum Key {
Home = 'HOME',
RocketChat = 'ROCKETCHAT',
TradeCallToAction = 'TRADE_CALL_TO_ACTION',
+ OurMissionAndValues = 'OUR_MISSION_AND_VALUES',
}
export enum SmartContractDocSections {