aboutsummaryrefslogtreecommitdiffstats
path: root/packages/website/ts/pages/about
diff options
context:
space:
mode:
Diffstat (limited to 'packages/website/ts/pages/about')
-rw-r--r--packages/website/ts/pages/about/about.tsx421
-rw-r--r--packages/website/ts/pages/about/jobs.tsx236
-rw-r--r--packages/website/ts/pages/about/mission.tsx97
-rw-r--r--packages/website/ts/pages/about/press.tsx94
-rw-r--r--packages/website/ts/pages/about/profile.tsx80
-rw-r--r--packages/website/ts/pages/about/team.tsx286
6 files changed, 713 insertions, 501 deletions
diff --git a/packages/website/ts/pages/about/about.tsx b/packages/website/ts/pages/about/about.tsx
deleted file mode 100644
index 81a3f59e1..000000000
--- a/packages/website/ts/pages/about/about.tsx
+++ /dev/null
@@ -1,421 +0,0 @@
-import { colors, Link, Styles } from '@0x/react-shared';
-import * as _ from 'lodash';
-import * as React from 'react';
-import * as DocumentTitle from 'react-document-title';
-import { Footer } from 'ts/components/footer';
-import { TopBar } from 'ts/components/top_bar/top_bar';
-import { Profile } from 'ts/pages/about/profile';
-import { Dispatcher } from 'ts/redux/dispatcher';
-import { ProfileInfo, WebsitePaths } from 'ts/types';
-import { Translate } from 'ts/utils/translate';
-import { utils } from 'ts/utils/utils';
-
-const teamRow1: ProfileInfo[] = [
- {
- name: 'Will Warren',
- title: 'Co-founder & CEO',
- description: `Smart contract R&D. Previously applied physics at Los Alamos \
- Nat Lab. Mechanical engineering at UC San Diego. PhD dropout.`,
- image: '/images/team/will.jpg',
- linkedIn: 'https://www.linkedin.com/in/will-warren-92aab62b/',
- github: 'https://github.com/willwarren89',
- medium: 'https://medium.com/@willwarren89',
- },
- {
- name: 'Amir Bandeali',
- title: 'Co-founder & CTO',
- description: `Smart contract R&D. Previously fixed income trader at DRW. \
- Finance at University of Illinois, Urbana-Champaign.`,
- image: '/images/team/amir.png',
- linkedIn: 'https://www.linkedin.com/in/abandeali1/',
- github: 'https://github.com/abandeali1',
- medium: 'https://medium.com/@abandeali1',
- },
- {
- name: 'Fabio Berger',
- title: 'Senior Engineer',
- description: `Full-stack blockchain engineer. Previously software engineer \
- at Airtable and founder of WealthLift. Computer Science at Duke.`,
- image: '/images/team/fabio.jpg',
- linkedIn: 'https://www.linkedin.com/in/fabio-berger-03ab261a/',
- github: 'https://github.com/fabioberger',
- medium: 'https://medium.com/@fabioberger',
- },
-];
-
-const teamRow2: ProfileInfo[] = [
- {
- name: 'Alex Xu',
- title: 'Director of Operations',
- description: `Strategy and operations. Previously digital marketing at Google \
- and vendor management at Amazon. Economics at UC San Diego.`,
- image: '/images/team/alex.jpg',
- linkedIn: 'https://www.linkedin.com/in/alex-xu/',
- github: '',
- medium: 'https://medium.com/@aqxu',
- },
- {
- name: 'Leonid Logvinov',
- title: 'Engineer',
- description: `Full-stack blockchain engineer. Previously blockchain engineer \
- at Neufund. Computer Science at University of Warsaw.`,
- image: '/images/team/leonid.png',
- linkedIn: 'https://www.linkedin.com/in/leonidlogvinov/',
- github: 'https://github.com/LogvinovLeon',
- medium: 'https://medium.com/@Logvinov',
- },
- {
- name: 'Ben Burns',
- title: 'Designer',
- description: `Product, motion, and graphic designer. Previously designer \
- at Airtable and Apple. Digital Design at University of Cincinnati.`,
- image: '/images/team/ben.jpg',
- linkedIn: 'https://www.linkedin.com/in/ben-burns-30170478/',
- github: '',
- medium: '',
- },
-];
-
-const teamRow3: ProfileInfo[] = [
- {
- name: 'Brandon Millman',
- title: 'Senior Engineer',
- description: `Full-stack engineer. Previously senior software engineer at \
- Twitter. Computer Science and Electrical Engineering at Duke.`,
- image: '/images/team/brandon.png',
- linkedIn: 'https://www.linkedin.com/in/brandon-millman-b093a022/',
- github: 'https://github.com/BMillman19',
- medium: 'https://medium.com/@bchillman',
- },
- {
- name: 'Tom Schmidt',
- title: 'Product Manager',
- description: `Previously engineering at Apple, product management at Facebook and Instagram. Computer Science at Stanford.`,
- image: '/images/team/tom.jpg',
- linkedIn: 'https://www.linkedin.com/in/tomhschmidt/',
- github: 'https://github.com/tomhschmidt',
- medium: '',
- },
- {
- name: 'Jacob Evans',
- title: 'Ecosystem Engineer',
- description: `Previously software engineer at Qantas and RSA Security.`,
- image: '/images/team/jacob.jpg',
- linkedIn: 'https://www.linkedin.com/in/dekzter/',
- github: 'https://github.com/dekz',
- medium: '',
- },
-];
-
-const teamRow4: ProfileInfo[] = [
- {
- name: 'Blake Henderson',
- title: 'Operations Associate',
- description: `Operations and Analytics. Previously analytics at LinkedIn. Economics at UC San Diego.`,
- image: '/images/team/blake.jpg',
- linkedIn: 'https://www.linkedin.com/in/blakerhenderson/',
- github: '',
- medium: '',
- },
- {
- name: 'Zack Skelly',
- title: 'Lead Recruiter',
- description: `Talent. Previously first recruiter at Heap, recruiting at Dropbox and Google. English Rhetoric and Composition at Pepperdine.`,
- image: '/images/team/zach.png',
- linkedIn: 'https://www.linkedin.com/in/zackaryskelly/',
- github: '',
- medium: '',
- },
- {
- name: 'Greg Hysen',
- title: 'Blockchain Engineer',
- description: `Smart contract R&D. Previously lead distributed systems engineer at Hivemapper. Computer Science at University of Waterloo.`,
- image: '/images/team/greg.jpeg',
- linkedIn: 'https://www.linkedin.com/in/gregory-hysen-71741463/',
- github: 'https://github.com/hysz',
- medium: '',
- },
-];
-
-const teamRow5: ProfileInfo[] = [
- {
- name: 'Remco Bloemen',
- title: 'Technical Fellow',
- description: `Previously cofounder at Neufund and Coblue. Part III at Cambridge. PhD dropout at Twente Business School.`,
- image: '/images/team/remco.jpeg',
- linkedIn: 'https://www.linkedin.com/in/remcobloemen/',
- github: 'http://github.com/recmo',
- medium: '',
- },
- {
- name: 'Francesco Agosti',
- title: 'Engineer',
- description: `Full-stack engineer. Previously senior software engineer at Yelp. Computer Science at Duke.`,
- image: 'images/team/fragosti.png',
- linkedIn: 'https://www.linkedin.com/in/fragosti/',
- github: 'http://github.com/fragosti',
- },
- {
- name: 'Mel Oberto',
- title: 'Office Ops / Executive Assistant',
- description: `Daily Operations. Previously People Operations Associate at Heap. Marketing and MBA at Sacred Heart University.`,
- image: 'images/team/mel.png',
- linkedIn: 'https://www.linkedin.com/in/melanieoberto',
- },
-];
-
-const teamRow6: ProfileInfo[] = [
- {
- name: 'Alex Browne',
- title: 'Engineer in Residence',
- description: `Full-stack blockchain engineer. Previously at Plaid. Open source guru and footgun dismantler. Computer Science and Electrical Engineering at Duke.`,
- image: 'images/team/alexbrowne.png',
- linkedIn: 'https://www.linkedin.com/in/stephenalexbrowne/',
- github: 'http://github.com/albrow',
- },
- {
- name: 'Peter Zeitz',
- title: 'Research Fellow',
- description: `Researching decentralized governance. Previously Assistant Professor of Economics at National University of Singapore Business School. PhD in Economics at UCLA.`,
- image: 'images/team/peter.jpg',
- linkedIn: 'https://www.linkedin.com/in/peter-z-7b9595163/',
- },
- {
- name: 'Chris Kalani',
- title: 'Director of Design',
- description: `Previously founded Wake (acquired by InVision). Early Facebook product designer.`,
- image: 'images/team/chris.png',
- linkedIn: 'https://www.linkedin.com/in/chriskalani/',
- github: 'https://github.com/chriskalani',
- },
-];
-
-const teamRow7: ProfileInfo[] = [
- {
- name: 'Clay Robbins',
- title: 'Ecosystem Development Lead',
- description: `Growth & Business Development. Previously product and partnerships at Square. Economics at Dartmouth College.`,
- image: 'images/team/clay.png',
- linkedIn: 'https://www.linkedin.com/in/robbinsclay/',
- },
- {
- name: 'Matt Taylor',
- title: 'Marketing Lead',
- description: `Growth & Marketing. Previously marketing at Abra and Square. Economics and Philosophy at Claremont McKenna College.`,
- image: 'images/team/matt.jpg',
- linkedIn: 'https://www.linkedin.com/in/mattytay/',
- },
- {
- name: 'Eugene Aumson',
- title: 'Engineer',
- description: `Developer Experience. Previously senior software engineer in foreign exchange applications at Bloomberg LP.`,
- image: 'images/team/gene.jpg',
- linkedIn: 'https://www.linkedin.com/in/aumson/',
- github: 'https://github.com/feuGeneA',
- },
-];
-
-const teamRow8: ProfileInfo[] = [
- {
- name: 'Weijie Wu',
- title: 'Research Fellow',
- description: `Researching decentralized governance. Previously Researcher at Huawei and Assistant Professor at Shanghai Jiao Tong University. PhD in Computer Science at The Chinese University of Hong Kong.`,
- image: 'images/team/weijie.png',
- linkedIn: 'https://www.linkedin.com/in/weijiewu/',
- },
- {
- name: 'Rahul Singireddy',
- title: 'Relayer Success Manager',
- description: `Previously community at Zeppelin, growth at Dharma, and cryptocurrency contributor at Forbes. Symbolic Systems at Stanford.`,
- image: 'images/team/rahul.png',
- linkedIn: 'https://www.linkedin.com/in/rahul-singireddy-3037908a/',
- },
- {
- name: 'Jason Somensatto',
- title: 'Strategic Legal Counsel',
- description: `Legal. Previously head of blockchain and crypto practice at Orrick. JD from George Washington University and undergrad at UVA.`,
- image: 'images/team/jason.png',
- linkedIn: 'https://www.linkedin.com/in/jasonsomensatto/',
- },
-];
-
-const teamRow9: ProfileInfo[] = [
- {
- name: 'Steve Klebanoff',
- title: 'Senior Engineer',
- description: ` Full-stack engineer. Previously Staff Software Engineer at AppFolio. Computer Science & Cognitive Psychology at Northeastern University.`,
- image: 'images/team/steve.png',
- linkedIn: 'https://www.linkedin.com/in/steveklebanoff/',
- github: 'https://github.com/steveklebanoff',
- },
- {
- name: 'Xianny Ng',
- title: 'Engineer',
- description: `Developer Experience. Previously telemetry at Mapbox and platform engineering at Bench Accounting.`,
- image: 'images/team/xianny.png',
- linkedIn: 'https://www.linkedin.com/in/xianny/',
- github: 'https://github.com/xianny',
- },
-];
-
-const advisors1: ProfileInfo[] = [
- {
- name: 'Fred Ehrsam',
- description: 'Co-founder of Coinbase. Previously FX trader at Goldman Sachs.',
- image: '/images/advisors/fred.jpg',
- linkedIn: 'https://www.linkedin.com/in/fredehrsam/',
- medium: 'https://medium.com/@FEhrsam',
- twitter: 'https://twitter.com/FEhrsam',
- },
- {
- name: 'Olaf Carlson-Wee',
- image: '/images/advisors/olaf.png',
- description: 'Founder of Polychain Capital. First hire at Coinbase. Angel investor.',
- linkedIn: 'https://www.linkedin.com/in/olafcw/',
- angellist: 'https://angel.co/olafcw',
- },
- {
- name: 'Joey Krug',
- description: `Co-CIO at Pantera Capital. Founder of Augur. Thiel 20 Under 20 Fellow.`,
- image: '/images/advisors/joey.jpg',
- linkedIn: 'https://www.linkedin.com/in/joeykrug/',
- github: 'https://github.com/joeykrug',
- angellist: 'https://angel.co/joeykrug',
- },
-];
-
-const advisors2: ProfileInfo[] = [
- {
- name: 'Linda Xie',
- description: 'Co-founder of Scalar Capital. Previously PM at Coinbase.',
- image: '/images/advisors/linda.jpg',
- linkedIn: 'https://www.linkedin.com/in/lindaxie/',
- medium: 'https://medium.com/@linda.xie',
- twitter: 'https://twitter.com/ljxie',
- },
- {
- name: 'David Sacks',
- description: 'General Partner at Craft Ventures. Original COO of PayPal. Founder of Yammer.',
- image: '/images/advisors/david.png',
- linkedIn: 'https://www.linkedin.com/in/davidoliversacks/',
- medium: 'https://medium.com/@davidsacks',
- twitter: 'https://twitter.com/DavidSacks',
- },
-];
-
-export interface AboutProps {
- source: string;
- location: Location;
- translate: Translate;
- dispatcher: Dispatcher;
-}
-
-interface AboutState {}
-
-const styles: Styles = {
- header: {
- fontFamily: 'Roboto Mono',
- fontSize: 36,
- color: 'black',
- paddingTop: 110,
- },
- weAreHiring: {
- fontSize: 30,
- color: colors.darkestGrey,
- fontFamily: 'Roboto Mono',
- letterSpacing: 7.5,
- },
-};
-
-export class About extends React.Component<AboutProps, AboutState> {
- public componentDidMount(): void {
- window.scrollTo(0, 0);
- }
- public render(): React.ReactNode {
- return (
- <div style={{ backgroundColor: colors.lightestGrey }}>
- <DocumentTitle title="0x About Us" />
- <TopBar
- blockchainIsLoaded={false}
- location={this.props.location}
- style={{ backgroundColor: colors.lightestGrey }}
- translate={this.props.translate}
- />
- <div id="about" className="mx-auto max-width-4 py4" style={{ color: colors.grey800 }}>
- <div className="mx-auto pb4 sm-px3" style={{ maxWidth: 435 }}>
- <div style={styles.header}>About us:</div>
- <div
- className="pt3"
- style={{
- fontSize: 17,
- color: colors.darkestGrey,
- lineHeight: 1.5,
- }}
- >
- Our team is a globally distributed group with backgrounds in engineering, research, business
- and design. We are passionate about decentralized technology and its potential to act as an
- equalizing force in the world.
- </div>
- </div>
- <div className="pt3 md-px4 lg-px0">
- <div className="clearfix pb3">{this._renderProfiles(teamRow1)}</div>
- <div className="clearfix">{this._renderProfiles(teamRow2)}</div>
- <div className="clearfix">{this._renderProfiles(teamRow3)}</div>
- <div className="clearfix">{this._renderProfiles(teamRow4)}</div>
- <div className="clearfix">{this._renderProfiles(teamRow5)}</div>
- <div className="clearfix">{this._renderProfiles(teamRow6)}</div>
- <div className="clearfix">{this._renderProfiles(teamRow7)}</div>
- <div className="clearfix">{this._renderProfiles(teamRow8)}</div>
- <div className="clearfix">{this._renderProfiles(teamRow9)}</div>
- </div>
- <div className="pt3 pb2">
- <div
- className="pt2 pb3 sm-center md-pl4 lg-pl0 md-ml3"
- style={{
- color: colors.grey,
- fontSize: 24,
- fontFamily: 'Roboto Mono',
- }}
- >
- Advisors:
- </div>
- <div className="clearfix">{this._renderProfiles(advisors1)}</div>
- <div className="clearfix">{this._renderProfiles(advisors2)}</div>
- </div>
- <div className="mx-auto py4 sm-px3" style={{ maxWidth: 308 }}>
- <div className="pb2" style={styles.weAreHiring}>
- WE'RE HIRING
- </div>
- <div
- className="pb4 mb4"
- style={{
- fontSize: 16,
- color: colors.darkestGrey,
- lineHeight: 1.5,
- letterSpacing: '0.5px',
- }}
- >
- We are seeking outstanding candidates to{' '}
- <Link to={WebsitePaths.Careers} textDecoration="underline" fontColor="black">
- join our team
- </Link>
- . We value passion, diversity and unique perspectives.
- </div>
- </div>
- </div>
- <Footer translate={this.props.translate} dispatcher={this.props.dispatcher} />
- </div>
- );
- }
- private _renderProfiles(profiles: ProfileInfo[]): React.ReactNode {
- const numIndiv = profiles.length;
- const colSize = utils.getColSize(numIndiv);
- return _.map(profiles, profile => {
- return (
- <div key={`profile-${profile.name}`}>
- <Profile colSize={colSize} profileInfo={profile} />
- </div>
- );
- });
- }
-}
diff --git a/packages/website/ts/pages/about/jobs.tsx b/packages/website/ts/pages/about/jobs.tsx
new file mode 100644
index 000000000..ee1aa6cef
--- /dev/null
+++ b/packages/website/ts/pages/about/jobs.tsx
@@ -0,0 +1,236 @@
+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 { Link } from 'ts/components/link';
+import { Column, FlexWrap, Section } from 'ts/components/newLayout';
+import { Heading, Paragraph } from 'ts/components/text';
+import { Container } from 'ts/components/ui/container';
+import { colors } from 'ts/style/colors';
+import { WebsiteBackendJobInfo } from 'ts/types';
+import { backendClient } from 'ts/utils/backend_client';
+import { constants } from 'ts/utils/constants';
+
+const OPEN_POSITIONS_HASH = 'positions';
+
+interface PositionProps {
+ title: string;
+ location: string;
+ href: string;
+}
+
+interface PositionItemProps {
+ position: PositionProps;
+}
+
+const Position: React.FunctionComponent<PositionItemProps> = (props: PositionItemProps) => {
+ const { position } = props;
+ return (
+ <PositionWrap>
+ <StyledColumn width="50%">
+ <Container position="relative" top="-3px" paddingRight="12px">
+ <Heading asElement="h3" size="small" fontWeight="400" marginBottom="0">
+ <a href={position.href} target="_blank">
+ {position.title}
+ </a>
+ </Heading>
+ </Container>
+ </StyledColumn>
+
+ <StyledColumn width="30%" padding="0 40px 0 0">
+ <Paragraph isMuted={true} marginBottom="0">
+ {position.location}
+ </Paragraph>
+ </StyledColumn>
+
+ <StyledColumn width="20%">
+ <Paragraph marginBottom="0" textAlign="right" color={colors.brandDark} fontWeight={400}>
+ <Link href={position.href} target="_blank">
+ Apply
+ </Link>
+ </Paragraph>
+ </StyledColumn>
+ </PositionWrap>
+ );
+};
+
+export interface NextAboutJobsProps {}
+interface NextAboutJobsState {
+ jobInfos: WebsiteBackendJobInfo[];
+}
+
+export class NextAboutJobs extends React.Component<NextAboutJobsProps, NextAboutJobsState> {
+ private _isUnmounted: boolean;
+ private static _convertJobInfoToPositionProps(jobInfo: WebsiteBackendJobInfo): PositionProps {
+ return {
+ title: jobInfo.title,
+ location: jobInfo.office,
+ href: jobInfo.url,
+ };
+ }
+ constructor(props: NextAboutJobsProps) {
+ super(props);
+ this.state = {
+ jobInfos: [],
+ };
+ }
+
+ public componentWillMount(): void {
+ // tslint:disable-next-line:no-floating-promises
+ this._fetchJobInfosAsync();
+ }
+ public componentWillUnmount(): void {
+ this._isUnmounted = true;
+ }
+ public render(): React.ReactNode {
+ const positions = this.state.jobInfos.map(jobInfo => NextAboutJobs._convertJobInfoToPositionProps(jobInfo));
+ return (
+ <AboutPageLayout
+ title="Join Us in Our Mission"
+ description={
+ <>
+ <Paragraph size="medium">
+ To create a tokenized world where all value can flow freely.
+ </Paragraph>
+ <Paragraph size="medium">
+ We are growing an ecosystem of businesses and projects by solving difficult challenges to
+ make our technology intuitive, flexible, and accessible to all. Join us in building
+ infrastructure upon which the exchange of all assets will take place.
+ </Paragraph>
+ </>
+ }
+ linkLabel="Our mission and values"
+ href={constants.URL_MISSION_AND_VALUES_BLOG_POST}
+ >
+ <DocumentTitle title="Jobs at 0x" />
+ <Section bgColor="#F3F6F4" isFlex={true} maxWidth="1170px" wrapWidth="100%">
+ <Column maxWidth="442px">
+ <Heading size="medium" marginBottom="30px">
+ Powered by a Diverse, Global Community
+ </Heading>
+
+ <Paragraph>
+ We're a highly technical team with varied backgrounds in engineering, science, business,
+ finance, and research. While the Core Team is headquartered in San Francisco, there are 30+
+ teams building on 0x and hundreds of thousands of participants behind our efforts worldwide.
+ We're passionate about open-source software and decentralized technology's potential to act
+ as an equalizing force in the world.
+ </Paragraph>
+ </Column>
+
+ <Column maxWidth="600px">
+ <ImageWrap>
+ <img src="/images/jobs/map@2x.png" height="365" alt="Map of community" />
+ </ImageWrap>
+ </Column>
+ </Section>
+
+ <Section isFlex={true} maxWidth="1170px" wrapWidth="100%">
+ <Column>
+ <Heading size="medium">Benefits</Heading>
+ </Column>
+
+ <Column maxWidth="826px">
+ <BenefitsList>
+ <li>Comprehensive Insurance</li>
+ <li>Unlimited Vacation</li>
+ <li>Meals and snacks provided daily</li>
+ <li>Flexible hours and liberal work-from-home-policy</li>
+ <li>Supportive of remote working</li>
+ <li>Transportation, phone, and wellness expense</li>
+ <li>Relocation assistance</li>
+ <li>Optional team excursions</li>
+ <li>Competitive salary</li>
+ <li>Cryptocurrency based compensation</li>
+ </BenefitsList>
+ </Column>
+ </Section>
+
+ <Section id={OPEN_POSITIONS_HASH} isFlex={true} maxWidth="1170px" wrapWidth="100%">
+ <Column>
+ <Heading size="medium">
+ Current<br />Openings
+ </Heading>
+ </Column>
+
+ <Column maxWidth="826px">
+ {_.map(positions, (position, index) => (
+ <Position key={`position-${index}`} position={position} />
+ ))}
+ </Column>
+ </Section>
+ </AboutPageLayout>
+ );
+ }
+ private async _fetchJobInfosAsync(): Promise<void> {
+ try {
+ if (!this._isUnmounted) {
+ this.setState({
+ jobInfos: [],
+ });
+ }
+ const jobInfos = await backendClient.getJobInfosAsync();
+ if (!this._isUnmounted) {
+ this.setState({
+ jobInfos,
+ });
+ }
+ } catch (error) {
+ if (!this._isUnmounted) {
+ this.setState({
+ jobInfos: [],
+ });
+ }
+ }
+ }
+}
+
+const BenefitsList = styled.ul`
+ color: #000;
+ font-weight: 300;
+ line-height: 1.444444444;
+ list-style: disc;
+ columns: auto 2;
+ column-gap: 80px;
+
+ li {
+ margin-bottom: 1em;
+ }
+`;
+
+const ImageWrap = styled.figure`
+ @media (min-width: 768px) {
+ height: 600px;
+ padding-left: 60px;
+ display: flex;
+ align-items: flex-end;
+ }
+`;
+
+const StyledColumn = styled(Column)`
+ flex-shrink: 0;
+
+ @media (max-width: 768px) {
+ & + & {
+ margin-top: 15px;
+ }
+ }
+`;
+
+const PositionWrap = styled(FlexWrap)`
+ margin-bottom: 40px;
+ padding-bottom: 30px;
+ position: relative;
+
+ &:after {
+ content: '';
+ width: 100%;
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ height: 1px;
+ background-color: #e3e3e3;
+ }
+`;
diff --git a/packages/website/ts/pages/about/mission.tsx b/packages/website/ts/pages/about/mission.tsx
new file mode 100644
index 000000000..ab8949fae
--- /dev/null
+++ b/packages/website/ts/pages/about/mission.tsx
@@ -0,0 +1,97 @@
+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 { Definition } from 'ts/components/definition';
+import { Image } from 'ts/components/image';
+import { Column, Section } from 'ts/components/newLayout';
+import { Heading } from 'ts/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.',
+ 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.',
+ 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.',
+ icon: 'long-term-impact',
+ },
+];
+
+export const NextAboutMission = () => (
+ <AboutPageLayout
+ 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"
+ href={constants.URL_MISSION_AND_VALUES_BLOG_POST}
+ >
+ <DocumentTitle title="Our Mission - 0x" />
+ <Section isFullWidth={true} isPadded={false}>
+ <FullWidthImage>
+ <Image src="/images/about/about-office.png" alt="0x Offices" isCentered={true} />
+ </FullWidthImage>
+ </Section>
+
+ <Section isFlex={true} maxWidth="1170px" wrapWidth="100%">
+ <Column>
+ <Heading size="medium" maxWidth="226px">
+ Core Values
+ </Heading>
+ </Column>
+
+ <Column width="70%" maxWidth="826px">
+ <Column width="100%" maxWidth="800px">
+ {_.map(values, (item, index) => (
+ <StyledDefinition
+ icon={item.icon}
+ title={item.title}
+ description={item.description}
+ isInlineIcon={true}
+ iconSize="large"
+ />
+ ))}
+ </Column>
+ </Column>
+ </Section>
+ </AboutPageLayout>
+);
+
+const StyledDefinition = styled(Definition)`
+ & + & {
+ margin-top: 30px;
+ padding-top: 30px;
+ border-top: 1px solid #eaeaea;
+ }
+`;
+
+const FullWidthImage = styled.figure`
+ width: 100vw;
+ margin-left: calc(50% - 50vw);
+
+ img {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ }
+
+ @media (min-width: 768px) {
+ height: 500px;
+ }
+
+ @media (max-width: 768px) {
+ height: 400px;
+ }
+`;
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;
+`;
diff --git a/packages/website/ts/pages/about/profile.tsx b/packages/website/ts/pages/about/profile.tsx
deleted file mode 100644
index 2361c6418..000000000
--- a/packages/website/ts/pages/about/profile.tsx
+++ /dev/null
@@ -1,80 +0,0 @@
-import { colors, Styles } from '@0x/react-shared';
-import * as _ from 'lodash';
-import * as React from 'react';
-import { ProfileInfo } from 'ts/types';
-
-const IMAGE_DIMENSION = 149;
-const styles: Styles = {
- subheader: {
- textTransform: 'uppercase',
- fontSize: 32,
- margin: 0,
- },
- imageContainer: {
- width: IMAGE_DIMENSION,
- height: IMAGE_DIMENSION,
- boxShadow: 'rgba(0, 0, 0, 0.19) 2px 5px 10px',
- },
-};
-
-interface ProfileProps {
- colSize: number;
- profileInfo: ProfileInfo;
-}
-
-export const Profile = (props: ProfileProps) => {
- return (
- <div className={`lg-col md-col lg-col-${props.colSize} md-col-6`}>
- <div style={{ maxWidth: 300 }} className="mx-auto lg-px3 md-px3 sm-px4 sm-pb3">
- <div className="circle overflow-hidden mx-auto" style={styles.imageContainer}>
- <img width={IMAGE_DIMENSION} src={props.profileInfo.image} />
- </div>
- <div className="center" style={{ fontSize: 18, fontWeight: 'bold', paddingTop: 20 }}>
- {props.profileInfo.name}
- </div>
- {!_.isUndefined(props.profileInfo.title) && (
- <div
- className="pt1 center"
- style={{
- fontSize: 14,
- fontFamily: 'Roboto Mono',
- color: colors.darkGrey,
- whiteSpace: 'nowrap',
- }}
- >
- {props.profileInfo.title.toUpperCase()}
- </div>
- )}
- <div style={{ minHeight: 60, lineHeight: 1.4 }} className="pt1 pb2 mx-auto lg-h6 md-h6 sm-h5 sm-center">
- {props.profileInfo.description}
- </div>
- <div className="flex pb3 sm-hide xs-hide" style={{ width: 280, opacity: 0.5 }}>
- {renderSocialMediaIcons(props.profileInfo)}
- </div>
- </div>
- </div>
- );
-};
-
-function renderSocialMediaIcons(profileInfo: ProfileInfo): React.ReactNode {
- const icons = [
- renderSocialMediaIcon('zmdi-github-box', profileInfo.github),
- renderSocialMediaIcon('zmdi-linkedin-box', profileInfo.linkedIn),
- renderSocialMediaIcon('zmdi-twitter-box', profileInfo.twitter),
- ];
- return icons;
-}
-
-function renderSocialMediaIcon(iconName: string, url: string): React.ReactNode {
- if (_.isEmpty(url)) {
- return null;
- }
-
- return (
- <div key={url} className="pr1">
- <a href={url} style={{ color: 'inherit' }} target="_blank" className="text-decoration-none">
- <i className={`zmdi ${iconName}`} style={{ ...styles.socalIcon }} />
- </a>
- </div>
- );
-}
diff --git a/packages/website/ts/pages/about/team.tsx b/packages/website/ts/pages/about/team.tsx
new file mode 100644
index 000000000..41d6c2cf8
--- /dev/null
+++ b/packages/website/ts/pages/about/team.tsx
@@ -0,0 +1,286 @@
+import * as _ from 'lodash';
+import * as React from 'react';
+import DocumentTitle from 'react-document-title';
+import styled from 'styled-components';
+
+import { colors } from 'ts/style/colors';
+
+import { AboutPageLayout } from 'ts/components/aboutPageLayout';
+import { Column, Section } from 'ts/components/newLayout';
+import { Heading, Paragraph } from 'ts/components/text';
+import { WebsitePaths } from 'ts/types';
+
+interface TeamMember {
+ name: string;
+ title: string;
+ imageUrl?: string;
+}
+
+const team: TeamMember[] = [
+ {
+ imageUrl: '/images/team/willw.jpg',
+ name: 'Will Warren',
+ title: 'co-founder & CEO',
+ },
+ {
+ imageUrl: '/images/team/amirb.jpg',
+ name: 'Amir Bandeali',
+ title: 'Co-founder & CTO',
+ },
+ {
+ imageUrl: '/images/team/fabiob.jpg',
+ name: 'Fabio Berger',
+ title: 'senior engineer',
+ },
+ {
+ imageUrl: '/images/team/alexv.jpg',
+ name: 'Alex Xu',
+ title: 'Director of operations',
+ },
+ {
+ imageUrl: '/images/team/leonidL.jpg',
+ name: 'Leonid Logvinov',
+ title: 'engineer',
+ },
+ {
+ imageUrl: '/images/team/benb.jpg',
+ name: 'Ben Burns',
+ title: 'designer',
+ },
+ {
+ imageUrl: '/images/team/brandonm.jpg',
+ name: 'Brandon Millman',
+ title: 'senior engineer',
+ },
+ {
+ imageUrl: '/images/team/toms.jpg',
+ name: 'Tom Schmidt',
+ title: 'product manager',
+ },
+ {
+ imageUrl: '/images/team/jacobe.jpg',
+ name: 'Jacob Evans',
+ title: 'ecosystem engineer',
+ },
+ {
+ imageUrl: '/images/team/blake.jpg',
+ name: 'Blake Henderson',
+ title: 'ecosystem programs lead',
+ },
+ {
+ imageUrl: '/images/team/zack.jpg',
+ name: 'Zack Skelly',
+ title: 'lead recruiter',
+ },
+ {
+ imageUrl: '/images/team/greg.jpg',
+ name: 'Greg Hysen',
+ title: 'blockchain engineer',
+ },
+ {
+ imageUrl: '/images/team/remcoB.jpg',
+ name: 'Remco Bloemen',
+ title: 'technical fellow',
+ },
+ {
+ imageUrl: '/images/team/francesco.jpg',
+ name: 'Francesco Agosti',
+ title: 'engineer',
+ },
+ {
+ imageUrl: '/images/team/melo.jpg',
+ name: 'Mel Oberto',
+ title: 'people operations associate',
+ },
+ {
+ imageUrl: '/images/team/alexb.jpg',
+ name: 'Alex Browne',
+ title: 'engineer in residence',
+ },
+ {
+ imageUrl: '/images/team/peterz.jpg',
+ name: 'Peter Zeitz',
+ title: 'research fellow',
+ },
+ {
+ imageUrl: '/images/team/chrisk.jpg',
+ name: 'Chris Kalani',
+ title: 'director of design',
+ },
+ {
+ imageUrl: '/images/team/clayr.jpg',
+ name: 'Clay Robbins',
+ title: 'ecosystem development lead',
+ },
+ {
+ imageUrl: '/images/team/mattt.jpg',
+ name: 'Matt Taylor',
+ title: 'marketing lead',
+ },
+ {
+ imageUrl: '/images/team/eugenea.jpg',
+ name: 'Eugene Aumson',
+ title: 'engineer',
+ },
+ {
+ imageUrl: '/images/team/weijew.jpg',
+ name: 'Weijie Wu',
+ title: 'research fellow',
+ },
+ {
+ imageUrl: '/images/team/rahuls.jpg',
+ name: 'Rahul Singireddy',
+ title: 'relayer success manager',
+ },
+ {
+ imageUrl: '/images/team/jasons.jpg',
+ name: 'Jason Somensatto',
+ title: 'strategic legal counsel',
+ },
+ {
+ imageUrl: '/images/team/steveK.jpg',
+ name: 'Steve Klebanoff',
+ title: 'senior engineer',
+ },
+ {
+ imageUrl: '/images/team/xianny.jpg',
+ name: 'Xianny Ng',
+ title: 'engineer',
+ },
+];
+
+const advisors: TeamMember[] = [
+ {
+ imageUrl: '/images/team/advisors/frede.jpg',
+ name: 'Fred Ehrsam',
+ title: 'Advisor',
+ },
+ {
+ imageUrl: '/images/team/advisors/olafc.jpg',
+ name: 'Olaf Carlson-Wee',
+ title: 'Advisor',
+ },
+ {
+ imageUrl: '/images/team/advisors/joeyk.jpg',
+ name: 'Joey Krug',
+ title: 'Advisor',
+ },
+ {
+ imageUrl: '/images/team/advisors/lindax.jpg',
+ name: 'Linda Xie',
+ title: 'Advisor',
+ },
+ {
+ imageUrl: '/images/team/advisors/davids.jpg',
+ name: 'David Sacks',
+ title: 'Advisor',
+ },
+];
+
+export const NextAboutTeam = () => (
+ <AboutPageLayout
+ 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"
+ to={WebsitePaths.AboutJobs}
+ >
+ <DocumentTitle title="Our Team - 0x" />
+ <Section maxWidth="1170px" wrapWidth="100%" isFlex={true} flexBreakpoint="900px">
+ <Column>
+ <Heading size="medium">0x Team</Heading>
+ </Column>
+
+ <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} />
+ ))}
+ </StyledGrid>
+ </Column>
+ </Section>
+
+ <Section bgColor="#F3F6F4" maxWidth="1170px" wrapWidth="100%" flexBreakpoint="900px" isFlex={true}>
+ <Column>
+ <Heading size="medium">Advisors</Heading>
+ </Column>
+
+ <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} />
+ ))}
+ </StyledGrid>
+ </Column>
+ </Section>
+ </AboutPageLayout>
+);
+
+const StyledGrid = styled.div`
+ &:after {
+ content: '';
+ clear: both;
+ }
+`;
+
+const Member = ({ name, title, imageUrl }: TeamMember) => (
+ <StyledMember>
+ <img src={imageUrl} alt={name} />
+ <Name>{name}</Name>
+ <MemberTitle isMuted={0.5} size={14} style={{ textTransform: 'capitalize' }}>
+ {title}
+ </MemberTitle>
+ </StyledMember>
+);
+
+const StyledMember = styled.div`
+ margin-bottom: 10px;
+ float: left;
+ width: calc(50% - 15px);
+ margin-right: 15px;
+
+ @media (max-width: 600px) {
+ &:nth-child(2n + 1) {
+ clear: left;
+ }
+ }
+
+ img,
+ svg {
+ width: 100%;
+ height: auto;
+ object-fit: contain;
+ margin-bottom: 10px;
+ }
+
+ @media (min-width: 600px) {
+ width: calc(33.3333% - 30px);
+ margin-right: 20px;
+
+ &:nth-child(3n + 1) {
+ clear: left;
+ }
+ }
+
+ @media (min-width: 900px) {
+ width: calc(25% - 30px);
+
+ &:nth-child(3n + 1) {
+ clear: none;
+ }
+
+ &:nth-child(4n + 1) {
+ clear: left;
+ }
+ }
+`;
+
+const Name = styled.h3`
+ color: ${colors.textDarkPrimary};
+ font-size: 14px;
+ line-height: 1;
+ margin: 0;
+`;
+
+const MemberTitle = styled(Paragraph)`
+ font-size: 14px;
+`;
generated by cgit v1.2.3 (git 2.25.1) at 2024-07-16 20:30:33 +0800