Merge pull request #1450 from 0xProject/feature/website/0x-org-about

[website] 0x org about

6 files changed, 74 insertions, 76 deletions

diff --git a/packages/website/ts/@next/components/aboutPageLayout.tsx b/packages/website/ts/@next/components/aboutPageLayout.tsx
index 7d98804bb..86a94ae2b 100644
--- a/packages/website/ts/@next/components/aboutPageLayout.tsx
+++ b/packages/website/ts/@next/components/aboutPageLayout.tsx
@@ -1,3 +1,4 @@
+import * as _ from 'lodash';
 import * as React from 'react';
 import styled from 'styled-components';
 
@@ -14,7 +15,8 @@ interface Props {
     title: string;
     description: React.ReactNode | string;
     linkLabel?: string;
-    linkUrl?: string;
+    href?: string;
+    to?: string;
     children?: React.ReactNode;
 }
 
@@ -22,31 +24,32 @@ export const AboutPageLayout = (props: Props) => (
     <SiteWrap theme="light">
         <Section isFlex={true} maxWidth="1170px" wrapWidth="100%">
             <Column>
-               <ChapterLink to={WebsitePaths.AboutMission}>Mission</ChapterLink>
-               <ChapterLink to={WebsitePaths.AboutTeam}>Team</ChapterLink>
-               <ChapterLink to={WebsitePaths.AboutPress}>Press</ChapterLink>
-               <ChapterLink to={WebsitePaths.AboutJobs}>Jobs</ChapterLink>
-           </Column>
+                <ChapterLink to={WebsitePaths.AboutMission}>Mission</ChapterLink>
+                <ChapterLink to={WebsitePaths.AboutTeam}>Team</ChapterLink>
+                <ChapterLink to={WebsitePaths.AboutPress}>Press</ChapterLink>
+                <ChapterLink to={WebsitePaths.AboutJobs}>Jobs</ChapterLink>
+            </Column>
 
-           <Column width="70%" maxWidth="800px">
-               <Column width="100%" maxWidth="680px">
-                    <AnimatedHeading size="medium">
-                        {props.title}
-                    </AnimatedHeading>
+            <Column width="70%" maxWidth="800px">
+                <Column width="100%" maxWidth="680px">
+                    <AnimatedHeading size="medium">{props.title}</AnimatedHeading>
 
-                   <AnimatedParagraph size="medium" marginBottom="60px" isMuted={0.65}>
-                     {props.description}
-                   </AnimatedParagraph>
+                    <AnimatedParagraph size="medium" marginBottom="60px" isMuted={0.65}>
+                        {props.description}
+                    </AnimatedParagraph>
 
-                   {(props.linkLabel && props.linkUrl) &&
-                        <AnimatedLink
-                            to={props.linkUrl}
-                            isWithArrow={true}
-                            isAccentColor={true}
-                        >
-                            {props.linkLabel}
-                        </AnimatedLink>
-                   }
+                    {props.linkLabel &&
+                        (props.href || props.to) && (
+                            <AnimatedLink
+                                to={props.to}
+                                href={props.href}
+                                target={!_.isUndefined(props.href) ? '_blank' : undefined}
+                                isWithArrow={true}
+                                isAccentColor={true}
+                            >
+                                {props.linkLabel}
+                            </AnimatedLink>
+                        )}
                 </Column>
             </Column>
         </Section>
@@ -56,13 +59,13 @@ export const AboutPageLayout = (props: Props) => (
 );
 
 const AnimatedHeading = styled(Heading)`
-  ${addFadeInAnimation('0.5s')}
+    ${addFadeInAnimation('0.5s')};
 `;
 
 const AnimatedParagraph = styled(Paragraph)`
-  ${addFadeInAnimation('0.5s', '0.15s')}
+    ${addFadeInAnimation('0.5s', '0.15s')};
 `;
 
 const AnimatedLink = styled(Button)`
-  ${addFadeInAnimation('0.6s', '0.3s')}
+    ${addFadeInAnimation('0.6s', '0.3s')};
 `;
diff --git a/packages/website/ts/@next/pages/about/jobs.tsx b/packages/website/ts/@next/pages/about/jobs.tsx
index 1e9d54609..4dc9d8002 100644
--- a/packages/website/ts/@next/pages/about/jobs.tsx
+++ b/packages/website/ts/@next/pages/about/jobs.tsx
@@ -7,6 +7,7 @@ import { Column, FlexWrap, Section } from 'ts/@next/components/newLayout';
 import { Heading, Paragraph } from 'ts/@next/components/text';
 import { WebsiteBackendJobInfo } from 'ts/types';
 import { backendClient } from 'ts/utils/backend_client';
+import { constants } from 'ts/utils/constants';
 
 const OPEN_POSITIONS_HASH = 'positions';
 
@@ -95,7 +96,7 @@ export class NextAboutJobs extends React.Component<NextAboutJobsProps, NextAbout
                     </>
                 }
                 linkLabel="Our mission and values"
-                linkUrl="/about/mission"
+                href={constants.URL_MISSION_AND_VALUES_BLOG_POST}
             >
                 <Section bgColor="#F3F6F4" isFlex={true} maxWidth="1170px" wrapWidth="100%">
                     <Column maxWidth="442px">
diff --git a/packages/website/ts/@next/pages/about/mission.tsx b/packages/website/ts/@next/pages/about/mission.tsx
index 78602f8ad..35aac684b 100644
--- a/packages/website/ts/@next/pages/about/mission.tsx
+++ b/packages/website/ts/@next/pages/about/mission.tsx
@@ -7,21 +7,25 @@ import { Definition } from 'ts/@next/components/definition';
 import { Image } from 'ts/@next/components/image';
 import { Column, Section } from 'ts/@next/components/newLayout';
 import { Heading } from 'ts/@next/components/text';
+import { constants } from 'ts/utils/constants';
 
 const values = [
     {
         title: 'Do The Right Thing',
-        description: 'We acknowledge the broad subjectivity behind doing “the right thing,” and are committed to rigorously exploring its nuance in our decision making. We believe this responsibility drives our decision making above all else, and pledge to act in the best interest of our peers, community, and society as a whole.',
+        description:
+            'We acknowledge the broad subjectivity behind doing “the right thing,” and are committed to rigorously exploring its nuance in our decision making. We believe this responsibility drives our decision making above all else, and pledge to act in the best interest of our peers, community, and society as a whole.',
         icon: 'right-thing',
     },
     {
         title: 'Consistently Ship',
-        description: 'Achieving our mission requires dedication and diligence. We aspire to be an organization that consistently ships. We set high-impact goals that are rooted in data and pride ourselves in consistently outputting outstanding results across the organization.',
+        description:
+            'Achieving our mission requires dedication and diligence. We aspire to be an organization that consistently ships. We set high-impact goals that are rooted in data and pride ourselves in consistently outputting outstanding results across the organization.',
         icon: 'consistently-ship',
     },
     {
         title: 'Focus on Long-term Impact',
-        description: 'We anticipate that over time, awareness of the fundamentally disruptive nature of frictionless global exchange will cause some to see this technology as a threat. There will be setbacks, some will claim that this technology is too disruptive, and we will face adversity. Persistence and a healthy long-term focus will see us through these battles.',
+        description:
+            'We anticipate that over time, awareness of the fundamentally disruptive nature of frictionless global exchange will cause some to see this technology as a threat. There will be setbacks, some will claim that this technology is too disruptive, and we will face adversity. Persistence and a healthy long-term focus will see us through these battles.',
         icon: 'long-term-impact',
     },
 ];
@@ -31,15 +35,11 @@ export const NextAboutMission = () => (
         title="Creating a tokenized world where all value can flow freely."
         description="0x is important infrastructure for the emerging crypto economy and enables markets to be created that couldn't have existed before. As more assets become tokenized, public blockchains provide the opportunity to establish a new financial stack that is more efficient, transparent, and equitable than any system in the past."
         linkLabel="Our mission and values"
-        linkUrl="#"
+        href={constants.URL_MISSION_AND_VALUES_BLOG_POST}
     >
         <Section isFullWidth={true} isPadded={false}>
             <FullWidthImage>
-                <Image
-                    src="/images/@next/about/about-office.png"
-                    alt="0x Offices"
-                    isCentered={true}
-                />
+                <Image src="/images/@next/about/about-office.png" alt="0x Offices" isCentered={true} />
             </FullWidthImage>
         </Section>
 
diff --git a/packages/website/ts/@next/pages/about/press.tsx b/packages/website/ts/@next/pages/about/press.tsx
index 7d8dfccab..ef04506cf 100644
--- a/packages/website/ts/@next/pages/about/press.tsx
+++ b/packages/website/ts/@next/pages/about/press.tsx
@@ -22,26 +22,31 @@ const highlights: HighlightProps[] = [
     {
         logo: '/images/@next/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: '#',
+        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/@next/press/logo-venturebeat.png',
         title: 'VentureBeat',
         text: '0x leads the way for ‘tokenization’ of the world, and collectible game items are next',
-        href: '#',
+        href:
+            'https://venturebeat.com/2018/09/24/0x-leads-the-way-for-tokenization-of-the-world-and-collectible-game-items-are-next/',
     },
     {
         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: '#',
+        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/@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: '#',
+        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/',
     },
 ];
 
@@ -51,7 +56,7 @@ export const NextAboutPress = () => (
         description={
             <>
                 <Paragraph size="medium" marginBottom="60px">
-                    Want to write about 0x? <a href="#">Get in touch</a>, or <a href="#">download our press kit</a>.
+                    Want to write about 0x? <a href="mailto:team@0xproject.com">Get in touch.</a>
                 </Paragraph>
 
                 {_.map(highlights, (highlight, index) => (
@@ -72,7 +77,9 @@ export const Highlight: React.FunctionComponent<HighlightItemProps> = (props: Hi
 
             <Column width="60%" maxWidth="560px">
                 <Paragraph isMuted={false}>{highlight.text}</Paragraph>
-                <Button href={highlight.href} isWithArrow={true} isNoBorder={true}>Read Article</Button>
+                <Button href={highlight.href} isWithArrow={true} isNoBorder={true} target="_blank">
+                    Read Article
+                </Button>
             </Column>
         </HighlightWrap>
     );
diff --git a/packages/website/ts/@next/pages/about/team.tsx b/packages/website/ts/@next/pages/about/team.tsx
index bf8d02095..421cacb24 100644
--- a/packages/website/ts/@next/pages/about/team.tsx
+++ b/packages/website/ts/@next/pages/about/team.tsx
@@ -64,7 +64,7 @@ const team: TeamMember[] = [
     {
         imageUrl: '/images/@next/team/blake.jpg',
         name: 'Blake Henderson',
-        title: 'operations associate',
+        title: 'ecosystem programs lead',
     },
     {
         imageUrl: '/images/@next/team/zack.jpg',
@@ -89,7 +89,7 @@ const team: TeamMember[] = [
     {
         imageUrl: '/images/@next/team/melo.jpg',
         name: 'Mel Oberto',
-        title: 'office ops / executive assistant',
+        title: 'people operations associate',
     },
     {
         imageUrl: '/images/@next/team/alexb.jpg',
@@ -181,22 +181,14 @@ export const NextAboutTeam = () => (
         title="We are a global, growing team"
         description="We are a distributed team with backgrounds in engineering, academic research, business, and design. The 0x Core Team is passionate about accelerating the adoption decentralized technology and believe in its potential to be an equalizing force in the world. Join us and do the most impactful work of your life."
         linkLabel="Join the team"
-        linkUrl={WebsitePaths.AboutJobs}
+        to={WebsitePaths.AboutJobs}
     >
-        <Section
-            maxWidth="1170px"
-            wrapWidth="100%"
-            isFlex={true}
-            flexBreakpoint="900px"
-        >
+        <Section maxWidth="1170px" wrapWidth="100%" isFlex={true} flexBreakpoint="900px">
             <Column>
                 <Heading size="medium">0x Team</Heading>
             </Column>
 
-            <Column
-                width="70%"
-                maxWidth="800px"
-            >
+            <Column width="70%" maxWidth="800px">
                 <StyledGrid>
                     {_.map(team, (info: TeamMember, index: number) => (
                         <Member key={`team-${index}`} name={info.name} title={info.title} imageUrl={info.imageUrl} />
@@ -205,21 +197,12 @@ export const NextAboutTeam = () => (
             </Column>
         </Section>
 
-        <Section
-            bgColor="#F3F6F4"
-            maxWidth="1170px"
-            wrapWidth="100%"
-            flexBreakpoint="900px"
-            isFlex={true}
-        >
+        <Section bgColor="#F3F6F4" maxWidth="1170px" wrapWidth="100%" flexBreakpoint="900px" isFlex={true}>
             <Column>
                 <Heading size="medium">Advisors</Heading>
             </Column>
 
-            <Column
-                width="70%"
-                maxWidth="800px"
-            >
+            <Column width="70%" maxWidth="800px">
                 <StyledGrid>
                     {_.map(advisors, (info: TeamMember, index: number) => (
                         <Member key={`advisor-${index}`} name={info.name} title={info.title} imageUrl={info.imageUrl} />
@@ -239,9 +222,11 @@ const StyledGrid = styled.div`
 
 const Member = ({ name, title, imageUrl }: TeamMember) => (
     <StyledMember>
-        <img src={imageUrl} alt={name}/>
+        <img src={imageUrl} alt={name} />
         <Name>{name}</Name>
-        <MemberTitle isMuted={0.5} size={14} style={{ textTransform: 'capitalize' }}>{title}</MemberTitle>
+        <MemberTitle isMuted={0.5} size={14} style={{ textTransform: 'capitalize' }}>
+            {title}
+        </MemberTitle>
     </StyledMember>
 );
 
@@ -252,12 +237,13 @@ const StyledMember = styled.div`
     margin-right: 15px;
 
     @media (max-width: 600px) {
-        &:nth-child(2n+1) {
+        &:nth-child(2n + 1) {
             clear: left;
         }
     }
 
-    img, svg {
+    img,
+    svg {
         width: 100%;
         height: auto;
         object-fit: contain;
@@ -268,7 +254,7 @@ const StyledMember = styled.div`
         width: calc(33.3333% - 30px);
         margin-right: 20px;
 
-        &:nth-child(3n+1) {
+        &:nth-child(3n + 1) {
             clear: left;
         }
     }
@@ -276,11 +262,11 @@ const StyledMember = styled.div`
     @media (min-width: 900px) {
         width: calc(25% - 30px);
 
-        &:nth-child(3n+1) {
+        &:nth-child(3n + 1) {
             clear: none;
         }
 
-        &:nth-child(4n+1) {
+        &:nth-child(4n + 1) {
             clear: left;
         }
     }
diff --git a/packages/website/ts/index.tsx b/packages/website/ts/index.tsx
index 915d28aaa..f7a66c836 100644
--- a/packages/website/ts/index.tsx
+++ b/packages/website/ts/index.tsx
@@ -192,6 +192,7 @@ render(
                                     component={LazySolCompilerDocumentation}
                                 />
                                 <Redirect from={WebsiteLegacyPaths.Jobs} to={WebsitePaths.AboutJobs} />
+                                <Redirect from={WebsitePaths.Careers} to={WebsitePaths.AboutJobs} />
                                 <Route component={NotFound as any} />
                             </Switch>
                         </div>