diff options
15 files changed, 81 insertions, 66 deletions
diff --git a/packages/website/public/images/landing/project_logos/amadeus.png b/packages/website/public/images/landing/project_logos/amadeus.png Binary files differnew file mode 100644 index 000000000..e3926b79f --- /dev/null +++ b/packages/website/public/images/landing/project_logos/amadeus.png diff --git a/packages/website/public/images/landing/project_logos/ddex.png b/packages/website/public/images/landing/project_logos/ddex.png Binary files differnew file mode 100644 index 000000000..a1a8def26 --- /dev/null +++ b/packages/website/public/images/landing/project_logos/ddex.png diff --git a/packages/website/public/images/landing/project_logos/decent_ex.png b/packages/website/public/images/landing/project_logos/decent_ex.png Binary files differnew file mode 100644 index 000000000..1fac76947 --- /dev/null +++ b/packages/website/public/images/landing/project_logos/decent_ex.png diff --git a/packages/website/public/images/landing/project_logos/dextroid.png b/packages/website/public/images/landing/project_logos/dextroid.png Binary files differnew file mode 100644 index 000000000..5fdcd7f8e --- /dev/null +++ b/packages/website/public/images/landing/project_logos/dextroid.png diff --git a/packages/website/public/images/landing/project_logos/ercdex.png b/packages/website/public/images/landing/project_logos/ercdex.png Binary files differnew file mode 100644 index 000000000..1367837e0 --- /dev/null +++ b/packages/website/public/images/landing/project_logos/ercdex.png diff --git a/packages/website/public/images/landing/project_logos/ethfinex-top.png b/packages/website/public/images/landing/project_logos/ethfinex-top.png Binary files differdeleted file mode 100644 index 5eda914ca..000000000 --- a/packages/website/public/images/landing/project_logos/ethfinex-top.png +++ /dev/null diff --git a/packages/website/public/images/landing/project_logos/ethfinex.png b/packages/website/public/images/landing/project_logos/ethfinex.png Binary files differnew file mode 100644 index 000000000..5aa0c556f --- /dev/null +++ b/packages/website/public/images/landing/project_logos/ethfinex.png diff --git a/packages/website/public/images/landing/project_logos/idt.png b/packages/website/public/images/landing/project_logos/idt.png Binary files differnew file mode 100644 index 000000000..859c289d2 --- /dev/null +++ b/packages/website/public/images/landing/project_logos/idt.png diff --git a/packages/website/public/images/landing/project_logos/open_relay.png b/packages/website/public/images/landing/project_logos/open_relay.png Binary files differnew file mode 100644 index 000000000..fa1853df6 --- /dev/null +++ b/packages/website/public/images/landing/project_logos/open_relay.png diff --git a/packages/website/public/images/landing/project_logos/paradex.png b/packages/website/public/images/landing/project_logos/paradex.png Binary files differnew file mode 100644 index 000000000..7948eb938 --- /dev/null +++ b/packages/website/public/images/landing/project_logos/paradex.png diff --git a/packages/website/public/images/landing/project_logos/paradex_top.png b/packages/website/public/images/landing/project_logos/paradex_top.png Binary files differdeleted file mode 100644 index 3fe9472b9..000000000 --- a/packages/website/public/images/landing/project_logos/paradex_top.png +++ /dev/null diff --git a/packages/website/public/images/landing/project_logos/radar_relay.png b/packages/website/public/images/landing/project_logos/radar_relay.png Binary files differnew file mode 100644 index 000000000..af0e610f8 --- /dev/null +++ b/packages/website/public/images/landing/project_logos/radar_relay.png diff --git a/packages/website/public/images/landing/project_logos/radar_relay_top.png b/packages/website/public/images/landing/project_logos/radar_relay_top.png Binary files differdeleted file mode 100644 index 737159959..000000000 --- a/packages/website/public/images/landing/project_logos/radar_relay_top.png +++ /dev/null diff --git a/packages/website/ts/pages/landing/landing.tsx b/packages/website/ts/pages/landing/landing.tsx index b0c622fb4..fc943dce8 100644 --- a/packages/website/ts/pages/landing/landing.tsx +++ b/packages/website/ts/pages/landing/landing.tsx @@ -65,17 +65,17 @@ const boxContents: BoxContent[] = [ }, ]; -const projects: Project[] = [ +const relayersAndDappProjects: Project[] = [ { - logoFileName: 'ethfinex-top.png', + logoFileName: 'ethfinex.png', projectUrl: constants.PROJECT_URL_ETHFINEX, }, { - logoFileName: 'radar_relay_top.png', + logoFileName: 'radar_relay.png', projectUrl: constants.PROJECT_URL_RADAR_RELAY, }, { - logoFileName: 'paradex_top.png', + logoFileName: 'paradex.png', projectUrl: constants.PROJECT_URL_PARADEX, }, { @@ -132,6 +132,57 @@ const projects: Project[] = [ }, ]; +const relayerProjects: Project[] = [ + { + logoFileName: 'ethfinex.png', + projectUrl: constants.PROJECT_URL_ETHFINEX, + }, + { + 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: 'amadeus.png', + projectUrl: constants.PROJECT_URL_DYDX, + }, + { + logoFileName: 'ddex.png', + projectUrl: constants.PROJECT_URL_DYDX, + }, + { + logoFileName: 'decent_ex.png', + projectUrl: constants.PROJECT_URL_DYDX, + }, + { + logoFileName: 'dextroid.png', + projectUrl: constants.PROJECT_URL_DYDX, + }, + { + logoFileName: 'ercdex.png', + projectUrl: constants.PROJECT_URL_DYDX, + }, + { + logoFileName: 'open_relay.png', + projectUrl: constants.PROJECT_URL_DYDX, + }, + { + logoFileName: 'idt.png', + projectUrl: constants.PROJECT_URL_IDT, + }, +]; + export interface LandingProps { location: Location; } @@ -167,9 +218,10 @@ export class Landing extends React.Component<LandingProps, LandingState> { style={{ backgroundColor: colors.heroGrey, position: 'relative' }} /> {this._renderHero()} - {this._renderProjects()} + {this._renderProjects(relayersAndDappProjects, 'Projects building on 0x', colors.projectsGrey)} {this._renderTokenizationSection()} {this._renderProtocolSection()} + {this._renderProjects(relayerProjects, 'Relayers building on 0x', colors.heroGrey)} {this._renderInfoBoxes()} {this._renderBuildingBlocksSection()} {this._renderUseCases()} @@ -259,11 +311,25 @@ export class Landing extends React.Component<LandingProps, LandingState> { </div> ); } - private _renderProjects() { + private _renderProjects(projects: Project[], title: string, backgroundColor: string) { const isSmallScreen = this.state.screenWidth === ScreenWidths.Sm; const isMediumScreen = this.state.screenWidth === ScreenWidths.Md; const projectList = _.map(projects, (project: Project, i: number) => { - const colWidth = isSmallScreen ? 3 : isMediumScreen ? 4 : 2 - i % 2; + const isRelayersOnly = projects.length === 12; + let colWidth: number; + switch (this.state.screenWidth) { + case ScreenWidths.Sm: + colWidth = isRelayersOnly ? 4 : 4; + break; + + case ScreenWidths.Md: + colWidth = isRelayersOnly ? 3 : 3; + break; + + case ScreenWidths.Lg: + colWidth = isRelayersOnly ? 2 : 2 - i % 2; + break; + } return ( <div key={`project-${project.logoFileName}`} className={`col col-${colWidth} center`}> <div> @@ -285,10 +351,10 @@ export class Landing extends React.Component<LandingProps, LandingState> { letterSpacing: 3, }; return ( - <div className="clearfix py4" style={{ backgroundColor: colors.projectsGrey }}> + <div className="clearfix py4" style={{ backgroundColor }}> <div className="mx-auto max-width-4 clearfix sm-px3"> <div className="h4 pb3 md-pl3 sm-pl2" style={titleStyle}> - Projects building on 0x + {title} </div> <div className="clearfix">{projectList}</div> <div @@ -319,7 +385,7 @@ export class Landing extends React.Component<LandingProps, LandingState> { <div className="clearfix lg-py4 md-py4 sm-pb4 sm-pt2" style={{ backgroundColor: colors.grey100 }}> <div className="mx-auto max-width-4 py4 clearfix"> {isSmallScreen && this._renderTokenCloud()} - <div className="col lg-col-6 md-col-6 col-12"> + <div className="col lg-col-6 md-col-6 col-12" style={{ color: colors.darkestGrey }}> <div className="mx-auto" style={{ maxWidth: 385, paddingTop: 7 }}> <div className="lg-h1 md-h1 sm-h2 sm-center sm-pt3" style={{ fontFamily: 'Roboto Mono' }}> The world's value is becoming tokenized @@ -358,16 +424,15 @@ export class Landing extends React.Component<LandingProps, LandingState> { private _renderProtocolSection() { const isSmallScreen = this.state.screenWidth === ScreenWidths.Sm; return ( - <div className="clearfix lg-py4 md-py4 sm-pt4" style={{ backgroundColor: colors.heroGrey }}> - <div className="mx-auto max-width-4 lg-py4 md-py4 sm-pt4 clearfix"> + <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" + className="col lg-col-6 md-col-6 col-12 lg-pr3 md-pr3 sm-mx-auto lg-pt4 md-pt4 lg-mt3 md-mt3" style={{ color: colors.beigeWhite, - paddingTop: 8, maxWidth: isSmallScreen ? 'none' : 445, }} > @@ -388,57 +453,6 @@ export class Landing extends React.Component<LandingProps, LandingState> { eliminating blockchain bloat. Relayers help broadcast orders and collect a fee each time they facilitate a trade. Anyone can build a relayer. </div> - <div - className="pt3 sm-mx-auto sm-px3" - style={{ - color: colors.landingLinkGrey, - maxWidth: isSmallScreen ? 412 : 'none', - }} - > - <div className="flex" style={{ fontSize: 18 }}> - <div - className="lg-h4 md-h4 sm-h5" - style={{ - letterSpacing: isSmallScreen ? 1 : 3, - fontFamily: 'Roboto Mono', - }} - > - RELAYERS BUILDING ON 0X - </div> - <div className="h5" style={{ marginLeft: isSmallScreen ? 26 : 49 }}> - <Link - to={`${WebsitePaths.Wiki}#List-of-Projects-Using-0x-Protocol`} - className="text-decoration-none underline" - style={{ - color: colors.landingLinkGrey, - fontFamily: 'Roboto Mono', - }} - > - view all - </Link> - </div> - </div> - <div className="lg-flex md-flex sm-clearfix pt3" style={{ opacity: 0.4 }}> - <div className="col col-4 sm-center"> - <img - src="/images/landing/ethfinex.png" - style={{ height: isSmallScreen ? 85 : 107 }} - /> - </div> - <div className="col col-4 center"> - <img - src="/images/landing/radar_relay.png" - style={{ height: isSmallScreen ? 85 : 107 }} - /> - </div> - <div className="col col-4 sm-center" style={{ textAlign: 'right' }}> - <img - src="/images/landing/paradex.png" - style={{ height: isSmallScreen ? 85 : 107 }} - /> - </div> - </div> - </div> </div> </div> </div> @@ -551,7 +565,7 @@ export class Landing extends React.Component<LandingProps, LandingState> { fontFamily: 'Roboto Mono', fontSize: 13.5, fontWeight: 400, - opacity: 0.75, + color: colors.darkestGrey, }} > {assetType.title} diff --git a/packages/website/ts/utils/constants.ts b/packages/website/ts/utils/constants.ts index 3df4c9370..5bdf2ce8d 100644 --- a/packages/website/ts/utils/constants.ts +++ b/packages/website/ts/utils/constants.ts @@ -63,6 +63,7 @@ export const constants = { PROJECT_URL_AUGUR: 'https://augur.net', PROJECT_URL_AUCTUS: 'https://auctus.org', PROJECT_URL_OPEN_ANX: 'https://www.openanx.org', + PROJECT_URL_IDT: 'https://kinalpha.com', URL_ANGELLIST: 'https://angel.co/0xproject/jobs', URL_BIGNUMBERJS_GITHUB: 'http://mikemcl.github.io/bignumber.js', URL_BITLY_API: 'https://api-ssl.bitly.com', |
