Add extensions page

packages/website/ts/components/card.tsx

@@ -0,0 +1,69 @@
+import * as React from 'react';
+import styled from 'styled-components';
+
+import { colors } from 'ts/style/colors';
+
+import { Icon } from 'ts/components/icon';
+import { Heading, Paragraph } from 'ts/components/text';
+
+interface CardProps {
+    icon: string;
+    heading: string;
+    description: string;
+    href?: string;
+}
+
+export const Card: React.StatelessComponent<CardProps> = (props: CardProps) => {
+    const { heading, description, icon } = props;
+
+    return (
+        <StyledCard>
+            <CardHead>
+                <Icon name={icon} size="large" />
+            </CardHead>
+            <CardContent>
+                <Heading asElement="h4" size="small" marginBottom="15px">
+                    {heading}
+                </Heading>
+                <Paragraph isMuted={true}>{description}</Paragraph>
+            </CardContent>
+        </StyledCard>
+    );
+};
+
+const StyledCard = styled.div`
+    background-color: ${colors.backgroundDark};
+    width: 100%;
+    min-height: 520px;
+    flex: 0 0 auto;
+    transition: opacity 0.4s ease-in-out;
+
+    @media (max-width: 1200px) {
+        width: 100%;
+    }
+
+    @media (max-width: 500px) {
+        width: calc(100vw - 10px - 30px);
+        height: 450px;
+    }
+`;
+
+const CardHead = styled.div`
+    background-color: ${colors.brandDark};
+    height: 300px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    @media (max-width: 500px) {
+        height: 240px;
+    }
+`;
+
+const CardContent = styled.div`
+    padding: 30px;
+
+    @media (max-width: 500px) {
+        padding: 20px;
+    }
+`;

packages/website/ts/components/dropdowns/dropdown_products.tsx

@@ -17,6 +17,11 @@ const navData = [
         description: 'Build on the 0x protocol',
         url: WebsitePaths.LaunchKit,
     },
+    {
+        title: '0x Extensions',
+        description: 'Support new types of trading on your relayer with 0x Extensions',
+        url: WebsitePaths.Extensions,
+    },
     {
         title: 'Governance',
         description: 'Vote on changes to the 0x protocol',

packages/website/ts/index.tsx

@@ -22,6 +22,7 @@ import { NextAboutPress } from 'ts/pages/about/press';
 import { NextAboutTeam } from 'ts/pages/about/team';
 import { Credits } from 'ts/pages/credits';
 import { NextEcosystem } from 'ts/pages/ecosystem';
+import { Extensions } from 'ts/pages/extensions';
 import { Governance } from 'ts/pages/governance/governance';
 import { Next0xInstant } from 'ts/pages/instant';
 import { NextLanding } from 'ts/pages/landing';
@@ -117,6 +118,7 @@ render(
                                 <Route exact={true} path={WebsitePaths.LaunchKit} component={NextLaunchKit as any} />
                                 <Route exact={true} path={WebsitePaths.Ecosystem} component={NextEcosystem as any} />
                                 <Route exact={true} path={WebsitePaths.Vote} component={Governance as any} />
+                                <Route exact={true} path={WebsitePaths.Extensions} component={Extensions as any} />
                                 <Route
                                     exact={true}
                                     path={WebsitePaths.AboutMission}

packages/website/ts/pages/extensions.tsx

@@ -0,0 +1,143 @@
+import * as _ from 'lodash';
+import * as React from 'react';
+import DocumentTitle from 'react-document-title';
+import styled from 'styled-components';
+
+import { Hero } from 'ts/components/hero';
+
+import { Banner } from 'ts/components/banner';
+import { Button } from 'ts/components/button';
+import { Definition } from 'ts/components/definition';
+import { Icon } from 'ts/components/icon';
+import { SiteWrap } from 'ts/components/siteWrap';
+
+import { Card } from 'ts/components/card';
+import { Section } from 'ts/components/newLayout';
+import { constants } from 'ts/utils/constants';
+
+import { ModalContact } from '../components/modals/modal_contact';
+
+interface Extension {
+    icon: string;
+    title: string;
+    description: string;
+}
+
+const extensionData: Extension[] = [
+    {
+        icon: 'supportForAllEthereumStandards',
+        title: 'Dutch Auction',
+        description: `Dutch Auctions continually reduce prices until a buyer is found. They're perfect for new or rare assets, and with 0x's off-chain model, they're gas-efficient as well.`,
+    },
+    {
+        icon: 'supportForAllEthereumStandards',
+        title: 'Forwarder Contract',
+        description: `Say goodbye to WETH! The Forwarder Contract will automatically wrap ETH and fill orders, making buying assets on 0x one step simpler.`,
+    },
+    {
+        icon: 'supportForAllEthereumStandards',
+        title: 'Whitelist Filter',
+        description: `Restrict access to your relayer with a Whitelist of approved traders. Bring your own list of addresses, or use Wyre's KYC list for free.`,
+    },
+    {
+        icon: 'supportForAllEthereumStandards',
+        title: 'Whitelist Filter',
+        description: `Restrict access to your relayer with a Whitelist of approved traders. Bring your own list of addresses, or use Wyre's KYC list for free.`,
+    },
+    {
+        icon: 'supportForAllEthereumStandards',
+        title: 'Whitelist Filter',
+        description: `Restrict access to your relayer with a Whitelist of approved traders. Bring your own list of addresses, or use Wyre's KYC list for free.`,
+    },
+    {
+        icon: 'supportForAllEthereumStandards',
+        title: 'Whitelist Filter',
+        description: `Restrict access to your relayer with a Whitelist of approved traders. Bring your own list of addresses, or use Wyre's KYC list for free.`,
+    },
+    {
+        icon: 'supportForAllEthereumStandards',
+        title: 'Whitelist Filter',
+        description: `Restrict access to your relayer with a Whitelist of approved traders. Bring your own list of addresses, or use Wyre's KYC list for free.`,
+    },
+];
+
+export class Extensions extends React.Component {
+    public state = {
+        isContactModalOpen: false,
+    };
+    public render(): React.ReactNode {
+        return (
+            <SiteWrap theme="dark">
+                <DocumentTitle title="0x Extensions" />
+                <Hero
+                    isLargeTitle={false}
+                    isFullWidth={false}
+                    title="0x Extensions"
+                    description="Support new types of trading on your relayer with 0x Extensions"
+                    figure={<Icon name="launchKit" size="hero" margin={['small', 0, 'small', 0]} />}
+                    actions={<HeroActions />}
+                />
+
+                <Section isFullWidth={true} wrapWidth="100%">
+                    <Grid>
+                        {_.map(extensionData, (item, index) => (
+                            <Card
+                                key={`extensionCard-${index}`}
+                                heading={item.title}
+                                description={item.description}
+                                icon={item.icon}
+                            />
+                        ))}
+                    </Grid>
+                </Section>
+
+                <Banner
+                    heading="Create your own 0x extension contracts"
+                    subline="Developers can build custom extensions on 0x to add new modes of exchange"
+                    mainCta={{
+                        text: 'Get Started',
+                        href: `${constants.URL_LAUNCH_KIT}/#table-of-contents`,
+                        shouldOpenInNewTab: true,
+                    }}
+                    secondaryCta={{ text: 'Get in Touch', onClick: this._onOpenContactModal.bind(this) }}
+                />
+                <ModalContact isOpen={this.state.isContactModalOpen} onDismiss={this._onDismissContactModal} />
+            </SiteWrap>
+        );
+    }
+
+    public _onOpenContactModal = (): void => {
+        this.setState({ isContactModalOpen: true });
+    };
+
+    public _onDismissContactModal = (): void => {
+        this.setState({ isContactModalOpen: false });
+    };
+}
+
+const HeroActions = () => (
+    <React.Fragment>
+        <Button href={constants.URL_LAUNCH_KIT} isInline={true} target="_blank">
+            Learn More
+        </Button>
+
+        <Button href={constants.URL_LAUNCH_KIT_BLOG_POST} isTransparent={true} isInline={true} target="_blank">
+            Learn More!
+        </Button>
+    </React.Fragment>
+);
+
+const Grid = styled.div`
+    display: grid;
+    grid-template-columns: repeat(1, 1fr);
+    grid-column-gap: 30px;
+    grid-row-gap: 30px;
+
+    @media (min-width: 500px) {
+        grid-template-columns: repeat(2, 1fr);
+    }
+
+    @media (min-width: 900px) {
+        grid-template-columns: repeat(3, 1fr);
+    }
+`;

packages/website/ts/types.ts

@@ -386,6 +386,7 @@ export enum WebsitePaths {
     Careers = '/careers',
     Credits = '/credits',
     Vote = '/vote',
+    Extensions = '/extensions',
 }
 
 export enum DocPackages {