Merge pull request #1440 from bakkenbaeck/feature/website/0x-org

Feature/website/0x org

10 files changed, 500 insertions, 60 deletions

diff --git a/packages/website/ts/@next/pages/about/jobs.tsx b/packages/website/ts/@next/pages/about/jobs.tsx
index 3e117f528..e4a9bb1ad 100644
--- a/packages/website/ts/@next/pages/about/jobs.tsx
+++ b/packages/website/ts/@next/pages/about/jobs.tsx
@@ -43,9 +43,18 @@ const positions: PositionProps[] = [
 export const NextAboutJobs = () => (
     <AboutPageLayout
         title="Join Us in Our Mission"
-        description="To create a tokenized world where all value can flow freely. 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."
+        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"
-        linkUrl="/mission"
+        linkUrl="/about/mission"
     >
         <Section bgColor="#F3F6F4" isFlex={true} maxWidth="1170px" wrapWidth="100%">
                 <Column maxWidth="442px">
diff --git a/packages/website/ts/@next/pages/about/press.tsx b/packages/website/ts/@next/pages/about/press.tsx
index 4ef043e80..7d8dfccab 100644
--- a/packages/website/ts/@next/pages/about/press.tsx
+++ b/packages/website/ts/@next/pages/about/press.tsx
@@ -34,7 +34,7 @@ const highlights: HighlightProps[] = [
     {
         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 className=""></blockchain>',
+        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: '#',
     },
     {
@@ -50,7 +50,7 @@ export const NextAboutPress = () => (
         title="Press Highlights"
         description={
             <>
-                <Paragraph marginBottom="60px">
+                <Paragraph size="medium" marginBottom="60px">
                     Want to write about 0x? <a href="#">Get in touch</a>, or <a href="#">download our press kit</a>.
                 </Paragraph>
 
diff --git a/packages/website/ts/@next/pages/community.tsx b/packages/website/ts/@next/pages/community.tsx
new file mode 100644
index 000000000..a02e7e6fd
--- /dev/null
+++ b/packages/website/ts/@next/pages/community.tsx
@@ -0,0 +1,282 @@
+import * as _ from 'lodash';
+import * as React from 'react';
+import styled from 'styled-components';
+
+import { colors } from 'ts/style/colors';
+
+import { Banner } from 'ts/@next/components/banner';
+import { Button } from 'ts/@next/components/button';
+import { Icon } from 'ts/@next/components/icon';
+import { ModalContact } from 'ts/@next/components/modals/modal_contact';
+import { Column, Section, WrapGrid } from 'ts/@next/components/newLayout';
+import { SiteWrap } from 'ts/@next/components/siteWrap';
+import { Heading, Paragraph } from 'ts/@next/components/text';
+
+interface EventProps {
+    title: string;
+    date: string;
+    signupUrl: string;
+    imageUrl: string;
+}
+
+interface CommunityLinkProps {
+    bgColor: string;
+    title?: string;
+    icon?: string;
+    url: string;
+}
+
+const events: EventProps[] = [
+    {
+        title: '0x London Meetup',
+        date: 'October 20th 2018',
+        imageUrl: '/images/@next/events/london.jpg',
+        signupUrl: '#',
+    },
+    {
+        title: '0x Berlin Meetup',
+        date: 'October 20th 2018',
+        imageUrl: '/images/@next/events/berlin.jpg',
+        signupUrl: '#',
+    },
+    {
+        title: '0x San Francisco Meetup',
+        date: 'October 20th 2018',
+        imageUrl: '/images/@next/events/sf.jpg',
+        signupUrl: '#',
+    },
+];
+const communityLinks: CommunityLinkProps[] = [
+    {
+        bgColor: '#1DA1F2',
+        title: 'Twitter',
+        icon: 'social-twitter',
+        url: 'https://twitter.com/0xProject',
+    },
+    {
+        bgColor: '#FF4500',
+        title: 'Reddit',
+        icon: 'social-reddit',
+        url: 'https://twitter.com/0xProject',
+    },
+    {
+        bgColor: '#7289DA',
+        title: 'Twitter',
+        icon: 'social-discord',
+        url: 'https://twitter.com/0xProject',
+    },
+    {
+        bgColor: '#3B5998',
+        title: 'Facebook',
+        icon: 'social-fb',
+        url: 'https://twitter.com/0xProject',
+    },
+    {
+        bgColor: '#181717',
+        title: 'GitHub',
+        icon: 'social-github',
+        url: 'https://twitter.com/0xProject',
+    },
+    {
+        bgColor: '#003831',
+        title: 'Newsletter',
+        icon: 'social-newsletter',
+        url: 'https://twitter.com/0xProject',
+    },
+];
+
+export class NextCommunity extends React.Component {
+    public state = {
+        isContactModalOpen: false,
+    };
+    public render(): React.ReactNode {
+        return (
+            <SiteWrap theme="light">
+                <Section isTextCentered={true}>
+                    <Column>
+                        <Heading size="medium" isCentered={true}>
+                            Community
+                        </Heading>
+                        <Paragraph size="medium" isCentered={true} isMuted={true} marginBottom="0">
+                            The 0x community is a global, passionate group of crypto developers and enthusiasts. The official channels below provide a great forum for connecting and engaging with the community.
+                        </Paragraph>
+                        <LinkWrap>
+                            <Button
+                                to="#"
+                                isWithArrow={true}
+                                isAccentColor={true}
+                            >
+                                Join the 0x community
+                            </Button>
+                        </LinkWrap>
+                    </Column>
+                </Section>
+
+                <Section isFullWidth={true}>
+                    <WrapGrid isTextCentered={true} isWrapped={true} isFullWidth={false} isCentered={false} maxWidth="1151px">
+                        {_.map(communityLinks, (link: CommunityLinkProps, index: number) => (
+                            <CommunityLink
+                                key={`cl-${index}`}
+                                icon={link.icon}
+                                title={link.title}
+                                bgColor={link.bgColor}
+                                url={link.url}
+                            />
+                        ))}
+                    </WrapGrid>
+                </Section>
+
+                <EventsWrapper bgColor={colors.backgroundLight} isFullWidth={true} isCentered={true} isTextCentered={true}>
+                    <Column maxWidth="720px">
+                        <Heading size="medium" asElement="h2" isCentered={true} maxWidth="507px" marginBottom="30px">
+                            Upcoming Events
+                        </Heading>
+                        <Paragraph size="medium" isCentered={true} isMuted={true}>
+                            0x meetups happen all over the world on a monthly basis and are hosted by devoted members of the community. Want to host a meetup in your city? Reach out for help finding a venue, connecting with local 0x mentors, and promoting your events.
+                        </Paragraph>
+                        <LinkWrap>
+                            <Button
+                                to="#"
+                                isWithArrow={true}
+                                isAccentColor={true}
+                            >
+                                Get in Touch
+                            </Button>
+                            <Button
+                                to="#"
+                                isWithArrow={true}
+                                isAccentColor={true}
+                            >
+                                Join Newsletter
+                            </Button>
+                        </LinkWrap>
+                    </Column>
+                    <WrapGrid isTextCentered={true} isWrapped={true} isFullWidth={false} isCentered={false} maxWidth="1149px">
+                        {_.map(events, (ev: EventProps, index: number) => (
+                            <Event
+                                key={`event-${index}`}
+                                title={ev.title}
+                                date={ev.date}
+                                signupUrl={ev.signupUrl}
+                                imageUrl={ev.imageUrl}
+                            />
+                        ))}
+                    </WrapGrid>
+                </EventsWrapper>
+
+                <Banner
+                    heading="Ready to get started?"
+                    subline="Dive into our docs, or contact us if needed"
+                    mainCta={{ text: 'Get Started', href: '/docs' }}
+                    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 Event: React.FunctionComponent<EventProps> = (event: EventProps) => (
+    <StyledEvent>
+        <EventIcon name="logo-mark" size={30} margin={0} />
+        <EventImage src={event.imageUrl} alt=""/>
+        <EventContent>
+            <Heading color={colors.white} size="small" marginBottom="0">
+                {event.title}
+            </Heading>
+            <Paragraph color={colors.white} isMuted={0.65}>
+                {event.date}
+            </Paragraph>
+            <Button
+                color={colors.white}
+                href={event.signupUrl}
+                isWithArrow={true}
+            >
+                Sign Up
+            </Button>
+        </EventContent>
+    </StyledEvent>
+);
+
+const CommunityLink: React.FunctionComponent<CommunityLinkProps> = (props: CommunityLinkProps) => (
+    <StyledCommunityLink bgColor={props.bgColor} href={props.url}>
+        <CommunityIcon name={props.icon} size={44} margin={0} />
+        <CommunityTitle color={colors.white} isMuted={false} marginBottom="0">
+            {props.title}
+        </CommunityTitle>
+    </StyledCommunityLink>
+);
+
+// Events
+const EventsWrapper = styled(Section)`
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+`;
+
+// Event
+const StyledEvent = styled.div`
+    background-color: ${colors.brandDark};
+    width: calc((100% / 3) - 30px);
+    text-align: left;
+    height: 424px;
+    margin-top: 130px;
+    position: relative;
+`;
+
+const EventIcon = styled(Icon)`
+    position: absolute;
+    top: 30px;
+    left: 30px;
+`;
+
+const EventImage = styled.img`
+    width: 100%;
+    height: 260px;
+    object-fit: cover;
+`;
+
+const EventContent = styled.div`
+    padding: 30px 30px;
+`;
+
+// Community Links
+const StyledCommunityLink = styled.a`
+    background-color: ${(props: CommunityLinkProps) => props.bgColor};
+    color: ${colors.white};
+    width: 175px;
+    height: 175px;
+    text-align: center;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+`;
+
+const CommunityTitle = styled(Paragraph)`
+    font-size: 20px;
+    font-weight: 400;
+`;
+
+const CommunityIcon = styled(Icon)`
+    margin-bottom: 20px;
+`;
+
+// Misc
+const LinkWrap = styled.div`
+    display: inline-flex;
+    margin-top: 60px;
+
+    a + a {
+        margin-left: 60px;
+    }
+`;
diff --git a/packages/website/ts/@next/pages/instant/code_demo.tsx b/packages/website/ts/@next/pages/instant/code_demo.tsx
index 35eaf6b2a..04556123e 100644
--- a/packages/website/ts/@next/pages/instant/code_demo.tsx
+++ b/packages/website/ts/@next/pages/instant/code_demo.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import * as CopyToClipboard from 'react-copy-to-clipboard';
 import SyntaxHighlighter from 'react-syntax-highlighter';
 
-import { Button } from 'ts/components/ui/button';
+import { Button } from 'ts/@next/components/button';
 import { Container } from 'ts/components/ui/container';
 import { styled } from 'ts/style/theme';
 import { zIndex } from 'ts/style/z_index';
@@ -161,9 +161,9 @@ export class CodeDemo extends React.Component<CodeDemoProps, CodeDemoState> {
             <Container position="relative" height="100%">
                 <Container position="absolute" top="10px" right="10px" zIndex={zIndex.overlay - 1}>
                     <CopyToClipboard text={this.props.children} onCopy={this._handleCopyClick}>
-                        <Button fontSize="14px">
-                            <b>{copyButtonText}</b>
-                        </Button>
+                        <StyledButton>
+                            {copyButtonText}
+                        </StyledButton>
                     </CopyToClipboard>
                 </Container>
                 <SyntaxHighlighter language="html" style={customStyle} showLineNumbers={true} PreTag={CustomPre}>
@@ -176,3 +176,10 @@ export class CodeDemo extends React.Component<CodeDemoProps, CodeDemoState> {
         this.setState({ didCopyCode: true });
     };
 }
+
+const StyledButton = styled(Button)`
+    border-radius: 4px;
+    font-size: 15px;
+    font-weight: 400;
+    padding: 9px 21px 7px;
+`;
diff --git a/packages/website/ts/@next/pages/instant/config_generator.tsx b/packages/website/ts/@next/pages/instant/config_generator.tsx
index 8857e4fea..4f837d7fa 100644
--- a/packages/website/ts/@next/pages/instant/config_generator.tsx
+++ b/packages/website/ts/@next/pages/instant/config_generator.tsx
@@ -64,7 +64,7 @@ export class ConfigGenerator extends React.Component<ConfigGeneratorProps, Confi
         return (
             <Container minWidth="350px">
                 <ConfigGeneratorSection title="Liquidity Source">
-                    <Select id="" value={value.orderSource} items={this._generateItems()} />
+                    <Select id="" value={value.orderSource} items={this._generateItems()} onChange={this._handleSRASelection.bind(this)} />
                 </ConfigGeneratorSection>
                 <ConfigGeneratorSection {...this._getTokenSelectorProps()}>
                     {this._renderTokenMultiSelectOrSpinner()}
@@ -122,7 +122,8 @@ export class ConfigGenerator extends React.Component<ConfigGeneratorProps, Confi
     private readonly _handleAffiliatePercentageLearnMoreClick = (): void => {
         window.open(`${WebsitePaths.Wiki}#Learn-About-Affiliate-Fees`, '_blank');
     };
-    private readonly _handleSRASelection = (sraEndpoint: string) => {
+    private readonly _handleSRASelection = (event: Event) => {
+        const sraEndpoint = event.target.value;
         const newConfig: ZeroExInstantBaseConfig = {
             ...this.props.value,
             orderSource: sraEndpoint,
diff --git a/packages/website/ts/@next/pages/instant/configurator.tsx b/packages/website/ts/@next/pages/instant/configurator.tsx
index e4334eabb..007526396 100644
--- a/packages/website/ts/@next/pages/instant/configurator.tsx
+++ b/packages/website/ts/@next/pages/instant/configurator.tsx
@@ -100,4 +100,8 @@ export class Configurator extends React.Component {
 const HeadingWrapper = styled.div`
     display: flex;
     justify-content: space-between;
+
+    a {
+        transform: translateY(-8px);
+    }
 `;
diff --git a/packages/website/ts/@next/pages/instant/select.tsx b/packages/website/ts/@next/pages/instant/select.tsx
index ae2a07b3d..422818f9f 100644
--- a/packages/website/ts/@next/pages/instant/select.tsx
+++ b/packages/website/ts/@next/pages/instant/select.tsx
@@ -12,12 +12,13 @@ interface SelectProps {
     id: string;
     items: SelectItemConfig[];
     emptyText?: string;
+    onChange?: () => void;
 }
 
-export const Select: React.FunctionComponent<SelectProps> = ({ value, id, items, emptyText }) => {
+export const Select: React.FunctionComponent<SelectProps> = ({ value, id, items, emptyText, onChange }) => {
     return (
         <Container>
-            <StyledSelect id={id}>
+            <StyledSelect id={id} onChange={onChange}>
                 <option value="">{emptyText}</option>
                 {items.map((item, index) => <option key={`${id}-item-${index}`} value={item.value} selected={item.value === value} onClick={item.onClick}>{item.label}</option>)}
             </StyledSelect>
diff --git a/packages/website/ts/@next/pages/launch_kit.tsx b/packages/website/ts/@next/pages/launch_kit.tsx
index 3161d9cf0..bef5d2164 100644
--- a/packages/website/ts/@next/pages/launch_kit.tsx
+++ b/packages/website/ts/@next/pages/launch_kit.tsx
@@ -59,7 +59,7 @@ export class NextLaunchKit extends React.Component {
                         title="Networked Liquidity Pool"
                         titleSize="small"
                         description="Tap into and share liquidity with other relayers"
-                        icon="supportForAllEthereumStandards"
+                        icon="networkedLiquidity"
                         iconSize="medium"
                         isInline={true}
                     />
@@ -100,7 +100,7 @@ export class NextLaunchKit extends React.Component {
                     heading="Need more flexibility?"
                     subline="Dive into our docs, or contact us if needed"
                     mainCta={{ text: 'Get Started', href: '/docs' }}
-                    secondaryCta={{ text: 'Get in Touch', href: this._onOpenContactModal.bind(this) }}
+                    secondaryCta={{ text: 'Get in Touch', onClick: this._onOpenContactModal.bind(this) }}
                 />
                 <ModalContact isOpen={this.state.isContactModalOpen} onDismiss={this._onDismissContactModal} />
             </SiteWrap>
@@ -118,7 +118,7 @@ export class NextLaunchKit extends React.Component {
 
 const HeroActions = () => (
     <>
-        <Button href="https://0x.org/docs" isInline={true}>
+        <Button href="https://github.com/0xProject/0x-launch-kit" isInline={true}>
             Get Started
         </Button>
 
diff --git a/packages/website/ts/@next/pages/market_maker.tsx b/packages/website/ts/@next/pages/market_maker.tsx
new file mode 100644
index 000000000..f2e49840f
--- /dev/null
+++ b/packages/website/ts/@next/pages/market_maker.tsx
@@ -0,0 +1,127 @@
+import * as _ from 'lodash';
+import * as React from 'react';
+
+import {Hero} from 'ts/@next/components/hero';
+
+import { Banner } from 'ts/@next/components/banner';
+import { Button } from 'ts/@next/components/button';
+import { Definition } from 'ts/@next/components/definition';
+import { Icon } from 'ts/@next/components/icon';
+import { SiteWrap } from 'ts/@next/components/siteWrap';
+
+import { ModalContact } from 'ts/@next/components/modals/modal_contact';
+import {Section} from 'ts/@next/components/newLayout';
+
+import { WebsitePaths } from 'ts/types';
+
+const offersData = [
+    {
+        icon: 'supportForAllEthereumStandards',
+        title: 'Comprehensive Tutorials',
+        description: 'Stay on the bleeding edge of crypto by learning how to market make on decentralized exchanges. The network of 0x relayers provides market makers a first-mover advantage to capture larger spreads, arbitrage markets, and access a long-tail of new tokens not currently listed on centralized exchanges.',
+    },
+    {
+        icon: 'generateRevenueForYourBusiness-large',
+        title: 'Market Making Compensation',
+        description: (
+            <ul>
+                <li>Receive an infrastructure grant of $20,000+ for completing onboarding</li>
+                <li>Earn an additional $5,000 by referring other market makers to the Program</li>
+            </ul>
+        ),
+    },
+    {
+        icon: 'getInTouch',
+        title: 'Personalized Support',
+        description: 'The 0x MM Success Manager will walk you through how to read 0x order types, spin up an Ethereum node, set up your MM bot, and execute trades on the blockchain. We are more than happy to promptly answer your questions and give you complete onboarding assistance.',
+    },
+];
+
+export class NextMarketMaker extends React.Component {
+    public state = {
+        isContactModalOpen: false,
+    };
+    public render(): React.ReactNode {
+        return (
+            <SiteWrap theme="dark">
+                <Hero
+                    isLargeTitle={false}
+                    isFullWidth={false}
+                    title="Bring liquidity to the exchanges of the future"
+                    description="Market makers (MMs) are important stakeholders in the 0x ecosystem. The Market Making Program provides a set of resources that help onboard MMs bring liquidity to the 0x network. The program includes tutorials, a robust data platform, trade compensation, and 1:1 support from our MM Success Manager."
+                    actions={<HeroActions/>}
+                />
+
+                <Section
+                    bgColor="dark"
+                    isFlex={true}
+                    maxWidth="1170px"
+                >
+                    <Definition
+                        title="Secure"
+                        titleSize="small"
+                        description="Take full custody of your assets to eliminate counterparty risk"
+                        icon="secureTrading"
+                        iconSize="medium"
+                        isInline={true}
+                    />
+
+                    <Definition
+                        title="Networked Liquidity Pool"
+                        titleSize="small"
+                        description="Use one pool of capital across multiple relayers to trade against a large group of takers"
+                        icon="networkedLiquidity"
+                        iconSize="medium"
+                        isInline={true}
+                    />
+
+                    <Definition
+                        title="Low Cost"
+                        titleSize="small"
+                        description="Pay no fees on orders except for bulk cancellations"
+                        icon="secureTrading"
+                        iconSize="medium"
+                        isInline={true}
+                    />
+                </Section>
+
+                <Section>
+                {_.map(offersData, (item, index) => (
+                    <Definition
+                        key={`offers-${index}`}
+                        icon={item.icon}
+                        title={item.title}
+                        description={item.description}
+                        isInlineIcon={true}
+                        iconSize={240}
+                    />
+                ))}
+                </Section>
+
+                <Banner
+                    heading="Need more flexibility?"
+                    subline="Dive into our docs, or contact us if needed"
+                    mainCta={{ text: 'Explore the Docs', href: '/docs' }}
+                    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 = () => (
+    <>
+        <Button href="https://github.com/0xProject/0x-launch-kit" isInline={true}>
+            Get Started
+        </Button>
+    </>
+);
diff --git a/packages/website/ts/@next/pages/why.tsx b/packages/website/ts/@next/pages/why.tsx
index a267bd09e..9c3c4d0a2 100644
--- a/packages/website/ts/@next/pages/why.tsx
+++ b/packages/website/ts/@next/pages/why.tsx
@@ -1,6 +1,7 @@
 import * as _ from 'lodash';
 import * as React from 'react';
-import AnchorLink from 'react-anchor-link-smooth-scroll';
+import ScrollableAnchor, { configureAnchors } from 'react-scrollable-anchor';
+
 import styled from 'styled-components';
 
 import {Hero} from 'ts/@next/components/hero';
@@ -79,6 +80,8 @@ const useCaseSlides = [
     },
 ];
 
+configureAnchors({ offset: -60 });
+
 export class NextWhy extends React.Component {
     public state = {
         isContactModalOpen: false,
@@ -136,57 +139,63 @@ export class NextWhy extends React.Component {
               <Section maxWidth="1170px" isFlex={true} isFullWidth={true}>
                   <Column>
                       <NavStickyWrap offsetTop="130px">
-                          <ChapterLink offset="60" href="#benefits">Benefits</ChapterLink>
-                          <ChapterLink offset="60" href="#cases">Use Cases</ChapterLink>
-                          <ChapterLink offset="60" href="#functionality">Features</ChapterLink>
+                          <ChapterLink href="#benefits">Benefits</ChapterLink>
+                          <ChapterLink href="#cases">Use Cases</ChapterLink>
+                          <ChapterLink href="#functionality">Features</ChapterLink>
                       </NavStickyWrap>
                   </Column>
 
                     <Column width="55%" maxWidth="826px">
                         <Column width="100%" maxWidth="560px" padding="0 30px 0 0">
-                            <SectionWrap id="benefits">
-                                <SectionTitle size="medium" marginBottom="60px" isNoBorder={true}>What 0x offers</SectionTitle>
-
-                                {_.map(offersData, (item, index) => (
-                                    <Definition
-                                        key={`offers-${index}`}
-                                        icon={item.icon}
-                                        title={item.title}
-                                        titleSize="small"
-                                        description={item.description}
-                                        isWithMargin={true}
-                                    />
-                                ))}
-                            </SectionWrap>
-
-                            <SectionWrap id="cases" isNotRelative={true}>
-                                <SectionTitle size="medium" marginBottom="60px">Use Cases</SectionTitle>
-                                <Slider>
-                                    {_.map(useCaseSlides, (item, index) => (
-                                        <Slide
-                                            key={`useCaseSlide-${index}`}
-                                            heading={item.title}
-                                            text={item.description}
+                            <ScrollableAnchor id="benefits">
+                                <SectionWrap>
+                                    <SectionTitle size="medium" marginBottom="60px" isNoBorder={true}>What 0x offers</SectionTitle>
+
+                                    {_.map(offersData, (item, index) => (
+                                        <Definition
+                                            key={`offers-${index}`}
+                                            icon={item.icon}
+                                            title={item.title}
+                                            titleSize="small"
+                                            description={item.description}
+                                            isWithMargin={true}
+                                        />
+                                    ))}
+                                </SectionWrap>
+                            </ScrollableAnchor>
+
+                            <ScrollableAnchor id="cases">
+                                <SectionWrap isNotRelative={true}>
+                                    <SectionTitle size="medium" marginBottom="60px">Use Cases</SectionTitle>
+                                    <Slider>
+                                        {_.map(useCaseSlides, (item, index) => (
+                                            <Slide
+                                                key={`useCaseSlide-${index}`}
+                                                heading={item.title}
+                                                text={item.description}
+                                                icon={item.icon}
+                                            />
+                                        ))}
+                                    </Slider>
+                                </SectionWrap>
+                            </ScrollableAnchor>
+
+                            <ScrollableAnchor id="functionality">
+                                <SectionWrap>
+                                    <SectionTitle size="medium" marginBottom="60px">Exchange Functionality</SectionTitle>
+
+                                    {_.map(functionalityData, (item, index) => (
+                                        <Definition
+                                            key={`functionality-${index}`}
                                             icon={item.icon}
+                                            title={item.title}
+                                            titleSize="small"
+                                            description={item.description}
+                                            isWithMargin={true}
                                         />
                                     ))}
-                                </Slider>
-                            </SectionWrap>
-
-                            <SectionWrap id="functionality">
-                                <SectionTitle size="medium" marginBottom="60px">Exchange Functionality</SectionTitle>
-
-                                {_.map(functionalityData, (item, index) => (
-                                    <Definition
-                                        key={`functionality-${index}`}
-                                        icon={item.icon}
-                                        title={item.title}
-                                        titleSize="small"
-                                        description={item.description}
-                                        isWithMargin={true}
-                                    />
-                                ))}
-                            </SectionWrap>
+                                </SectionWrap>
+                            </ScrollableAnchor>
                         </Column>
                     </Column>
               </Section>
@@ -270,7 +279,7 @@ const NavStickyWrap = styled(WrapSticky)`
     }
 `;
 
-const ChapterLink = styled(AnchorLink)`
+const ChapterLink = styled.a`
     color: ${props => props.theme.textColor};
     font-size: 22px;
     margin-bottom: 25px;