Refactor press highlgihts

3 files changed, 48 insertions, 39 deletions

diff --git a/packages/website/public/images/@next/press/logo-techcrunch.png b/packages/website/public/images/@next/press/logo-techcrunch.png
new file mode 100644
index 000000000..7f260d0ea
--- /dev/null
+++ b/packages/website/public/images/@next/press/logo-techcrunch.png
diff --git a/packages/website/public/images/@next/press/logo-venturebeat.png b/packages/website/public/images/@next/press/logo-venturebeat.png
new file mode 100644
index 000000000..2086bf0b7
--- /dev/null
+++ b/packages/website/public/images/@next/press/logo-venturebeat.png
diff --git a/packages/website/ts/@next/pages/about/press.tsx b/packages/website/ts/@next/pages/about/press.tsx
index db2a631e7..80307a98f 100644
--- a/packages/website/ts/@next/pages/about/press.tsx
+++ b/packages/website/ts/@next/pages/about/press.tsx
@@ -1,12 +1,57 @@
 import * as React from 'react';
-import { Link as ReactRouterLink } from 'react-router-dom';
+import * as _ from 'lodash';
 import styled from 'styled-components';
 
 import { ChapterLink } from 'ts/@next/components/chapter_link';
 import { Column, Section, Wrap } from 'ts/@next/components/layout';
+import { Link } from 'ts/@next/components/link';
+import { Separator } from 'ts/@next/components/separator';
 import { SiteWrap } from 'ts/@next/components/siteWrap';
 import { Heading, Paragraph } from 'ts/@next/components/text';
 
+interface HighlightInterface {
+    logo: string;
+    title?: string;
+    text: string;
+    href: string;
+}
+
+const highlights: HighlightInterface[] = [
+    {
+        logo: '/images/@next/press/logo-venturebeat.png',
+        title: 'VentureBeat',
+        text: '0x leads the way for ‘tokenization’ of the world, and collectible game items are next',
+        href: '#',
+    },
+    {
+        logo: '/images/@next/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: '#',
+    },
+    {
+        logo: '/images/@next/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: '#',
+    },
+];
+
+const Highlight = ({ highlight }) => (
+    <>
+    <Wrap>
+        <Column colWidth="1/3">
+            <img src={highlight.logo} alt={highlight.title} />
+        </Column>
+        <Column colWidth="2/3">
+            <Paragraph isMuted={false}>{highlight.text}</Paragraph>
+            <Link href={highlight.href}>Read Article</Link>
+        </Column>
+    </Wrap>
+    <Separator/>
+    </>
+);
+
 export const NextAboutPress = () => (
   <SiteWrap theme="light">
     <Section>
@@ -21,45 +66,9 @@ export const NextAboutPress = () => (
             <Heading size="medium">Press Highlights</Heading>
             <Paragraph size="medium">Want to write about 0x? Get in touch, or download our press kit.</Paragraph>
 
-            <Wrap>
-                <Column colWidth="1/3">
-                    <img src="/images/@next/press/logo-fortune.png" width="100" alt="Fortune"/>
-                </Column>
-                <Column colWidth="2/3">
-                    <Paragraph isMuted={false}>The difference is that 0x is decentralized, operating as a series of anonymous nodes...</Paragraph>
-                    <a href="#">Read Article</a>
-                </Column>
-            </Wrap>
-
-            <Wrap>
-                <Column colWidth="1/3">
-                    <img src="/images/@next/press/logo-fortune.png" width="100" alt="Fortune"/>
-                </Column>
-                <Column colWidth="2/3">
-                    <Paragraph isMuted={false}>The difference is that 0x is decentralized, operating as a series of anonymous nodes...</Paragraph>
-                    <a href="#">Read Article</a>
-                </Column>
-            </Wrap>
-
-            <Wrap>
-                <Column colWidth="1/3">
-                    <img src="/images/@next/press/logo-fortune.png" width="100" alt="Fortune"/>
-                </Column>
-                <Column colWidth="2/3">
-                    <Paragraph isMuted={false}>The difference is that 0x is decentralized, operating as a series of anonymous nodes...</Paragraph>
-                    <a href="#">Read Article</a>
-                </Column>
-            </Wrap>
+            <Separator/>
 
-            <Wrap>
-                <Column colWidth="1/3">
-                    <img src="/images/@next/press/logo-fortune.png" width="100" alt="Fortune"/>
-                </Column>
-                <Column colWidth="2/3">
-                    <Paragraph isMuted={false}>The difference is that 0x is decentralized, operating as a series of anonymous nodes...</Paragraph>
-                    <a href="#">Read Article</a>
-                </Column>
-            </Wrap>
+            {_.map(highlights, (highlight, index) => <Highlight key={`highlight-${index}`} highlight={highlight} /> )}
         </Column>
       </Wrap>
     </Section>