diff options
| author | Fabio Berger <me@fabioberger.com> | 2018-05-03 18:35:07 +0800 |
|---|---|---|
| committer | Fabio Berger <me@fabioberger.com> | 2018-05-03 18:35:07 +0800 |
| commit | 528008b1a9d6d74434b34568bb4c3ba29a355b0c (patch) | |
| tree | 6649c9367c210c455b7c1b03e8044215a16c737c | |
| parent | 5e3576ed695ce0aaff7d7b59d77380f68e334df1 (diff) | |
| download | dexon-sol-tools-528008b1a9d6d74434b34568bb4c3ba29a355b0c.tar.gz dexon-sol-tools-528008b1a9d6d74434b34568bb4c3ba29a355b0c.tar.zst dexon-sol-tools-528008b1a9d6d74434b34568bb4c3ba29a355b0c.zip | |
Add new section to homepage
| -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) => { |