diff options
| -rw-r--r-- | packages/react-shared/src/utils/colors.ts | 1 | ||||
| -rw-r--r-- | packages/website/ts/pages/landing/landing.tsx | 25 |
2 files changed, 26 insertions, 0 deletions
diff --git a/packages/react-shared/src/utils/colors.ts b/packages/react-shared/src/utils/colors.ts index 7613414ae..4617fa5dc 100644 --- a/packages/react-shared/src/utils/colors.ts +++ b/packages/react-shared/src/utils/colors.ts @@ -28,6 +28,7 @@ const baseColors = { linkBlue: '#1D5CDE', mediumBlue: '#488AEA', darkBlue: '#4D5481', + lightTurquois: '#aefcdc', turquois: '#058789', lightPurple: '#A81CA6', purple: '#690596', diff --git a/packages/website/ts/pages/landing/landing.tsx b/packages/website/ts/pages/landing/landing.tsx index f961220fd..a63c24fb7 100644 --- a/packages/website/ts/pages/landing/landing.tsx +++ b/packages/website/ts/pages/landing/landing.tsx @@ -37,6 +37,8 @@ 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[] = [ { @@ -233,6 +235,7 @@ export class Landing extends React.Component<LandingProps, LandingState> { 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-my4 md-my4 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} /> @@ -302,6 +305,28 @@ export class Landing extends React.Component<LandingProps, LandingState> { </div> ); } + private _renderWhatsNew() { + 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.lightTurquois, + borderRadius: 3, + color: colors.heroGrey, + height: 23, + }} + > + New + </div> + <div style={{ color: colors.darkGrey }}>{WHATS_NEW_TITLE}</div> + </div> + </a> + </div> + ); + } private _renderProjects(projects: Project[], title: string, backgroundColor: string, isTitleCenter: boolean) { const isSmallScreen = this.state.screenWidth === ScreenWidths.Sm; const projectList = _.map(projects, (project: Project, i: number) => { |