diff options
author | Francesco Agosti <francesco.agosti93@gmail.com> | 2019-01-02 22:13:14 +0800 |
---|---|---|
committer | GitHub <noreply@github.com> | 2019-01-02 22:13:14 +0800 |
commit | 1ddf1087dd327b2ef35165518ee91eb457b84174 (patch) | |
tree | 619d5b8afd97945eb7917cb71b74ed1c721a77d3 /packages/website/ts/pages/about/press.tsx | |
parent | dbbd0c5c9233965713a3ee30a1a0c5eb06448212 (diff) | |
parent | dc6d6024dc7e72d2634c6bbd88886af6cc0ef6fc (diff) | |
download | dexon-0x-contracts-1ddf1087dd327b2ef35165518ee91eb457b84174.tar.gz dexon-0x-contracts-1ddf1087dd327b2ef35165518ee91eb457b84174.tar.zst dexon-0x-contracts-1ddf1087dd327b2ef35165518ee91eb457b84174.zip |
Merge pull request #1470 from 0xProject/feature/website/0x-org-cleanup
[website] Remove @next dir, remove unused files.
Diffstat (limited to 'packages/website/ts/pages/about/press.tsx')
-rw-r--r-- | packages/website/ts/pages/about/press.tsx | 94 |
1 files changed, 94 insertions, 0 deletions
diff --git a/packages/website/ts/pages/about/press.tsx b/packages/website/ts/pages/about/press.tsx new file mode 100644 index 000000000..03003d656 --- /dev/null +++ b/packages/website/ts/pages/about/press.tsx @@ -0,0 +1,94 @@ +import * as _ from 'lodash'; +import * as React from 'react'; +import DocumentTitle from 'react-document-title'; +import styled from 'styled-components'; + +import { AboutPageLayout } from 'ts/components/aboutPageLayout'; +import { Button } from 'ts/components/button'; +import { Column, FlexWrap } from 'ts/components/newLayout'; +import { Paragraph } from 'ts/components/text'; + +interface HighlightProps { + logo: string; + title?: string; + text: string; + href: string; +} + +interface HighlightItemProps { + highlight: HighlightProps; +} + +const highlights: HighlightProps[] = [ + { + logo: '/images/press/logo-forbes.png', + title: 'Forbes', + text: + '0x Instant is aiming to aid businesses and developers such as news sites, crypto wallets, dApps or price trackers to monetize or add a new revenue stream to their existing pipeline.', + href: + 'https://www.forbes.com/sites/rebeccacampbell1/2018/12/06/0x-launches-instant-delivers-an-easy-and-flexible-way-to-buy-crypto-tokens/#bfb73a843561', + }, + { + logo: '/images/press/logo-venturebeat.png', + title: 'VentureBeat', + text: '0x leads the way for ‘tokenization’ of the world, and collectible game items are next', + href: + 'https://venturebeat.com/2018/09/24/0x-leads-the-way-for-tokenization-of-the-world-and-collectible-game-items-are-next/', + }, + { + logo: '/images/press/logo-fortune.png', + title: 'Fortune', + text: + 'In the future, many traditional investments like real estate and corporate shares will come in the form of digital tokens that are bought and transferred on a blockchain.', + href: 'http://fortune.com/2018/09/06/0x-harbor-blockchain/', + }, + { + logo: '/images/press/logo-techcrunch.png', + title: 'TechCrunch', + text: + '0x allows any developer to quickly build their own decentralized cryptocurrency exchange and decide their own fees.', + href: 'https://techcrunch.com/2018/07/16/0x/', + }, +]; + +export const NextAboutPress = () => ( + <AboutPageLayout + title="Press Highlights" + description={ + <> + <Paragraph size="medium" marginBottom="60px"> + Want to write about 0x? <a href="mailto:team@0xproject.com">Get in touch.</a> + </Paragraph> + + {_.map(highlights, (highlight, index) => ( + <Highlight key={`highlight-${index}`} highlight={highlight} /> + ))} + </> + } + > + <DocumentTitle title="Press Highlights - 0x" /> + </AboutPageLayout> +); + +export const Highlight: React.FunctionComponent<HighlightItemProps> = (props: HighlightItemProps) => { + const { highlight } = props; + return ( + <HighlightWrap> + <Column> + <img src={highlight.logo} alt={highlight.title} /> + </Column> + + <Column width="60%" maxWidth="560px"> + <Paragraph isMuted={false}>{highlight.text}</Paragraph> + <Button href={highlight.href} isWithArrow={true} isNoBorder={true} target="_blank"> + Read Article + </Button> + </Column> + </HighlightWrap> + ); +}; + +const HighlightWrap = styled(FlexWrap)` + border-top: 1px solid #eaeaea; + padding: 30px 0; +`; |