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

Feature/website/0x org

40 files changed, 756 insertions, 187 deletions

diff --git a/packages/website/ts/@next/components/banner.tsx b/packages/website/ts/@next/components/banner.tsx
index e779c5889..2620b92ef 100644
--- a/packages/website/ts/@next/components/banner.tsx
+++ b/packages/website/ts/@next/components/banner.tsx
@@ -1,6 +1,8 @@
 import * as React from 'react';
 import styled from 'styled-components';
 
+import { colors } from 'ts/style/colors';
+
 import {Button} from 'ts/@next/components/button';
 import {ThemeInterface} from 'ts/@next/components/siteWrap';
 import {Paragraph} from 'ts/@next/components/text';
@@ -46,7 +48,7 @@ export const Banner: React.StatelessComponent<Props> = (props: Props) => {
                 <CustomHeading>{heading}</CustomHeading>
 
                 {subline &&
-                    <Paragraph isMuted={0.5} isNoMargin={true}>
+                    <Paragraph color={colors.white} isMuted={0.5} isNoMargin={true}>
                         {subline}
                     </Paragraph>
                 }
@@ -55,6 +57,7 @@ export const Banner: React.StatelessComponent<Props> = (props: Props) => {
                 <ButtonWrap>
                     {mainCta &&
                         <Button
+                            color={colors.white}
                             isTransparent={false}
                             href={mainCta.href}
                         >
@@ -64,6 +67,7 @@ export const Banner: React.StatelessComponent<Props> = (props: Props) => {
 
                     {secondaryCta &&
                         <Button
+                            color={colors.white}
                             href={secondaryCta.href}
                             onClick={secondaryCta.onClick}
                             isTransparent={true}
@@ -78,6 +82,7 @@ export const Banner: React.StatelessComponent<Props> = (props: Props) => {
 };
 
 const CustomSection = styled(Section)`
+    color: ${colors.white};
     margin-top: 30px;
 
     @media (max-width: 900px) {
@@ -137,4 +142,11 @@ const Border = styled.div<BorderProps>`
     top: ${props => !props.isBottom && 0 };
     bottom: ${props => props.isBottom && 0 };
     transform: translate(-112px);
+
+    @media (max-width: 768px) {
+        width: calc(100% + 82px);
+        height: 40px;
+        transform: translate(-41px);
+        background-size: auto 80px;
+    }
 `;
diff --git a/packages/website/ts/@next/components/button.tsx b/packages/website/ts/@next/components/button.tsx
index 05afa3534..ab804b758 100644
--- a/packages/website/ts/@next/components/button.tsx
+++ b/packages/website/ts/@next/components/button.tsx
@@ -62,6 +62,7 @@ const ButtonBase = styled.button<ButtonInterface>`
     border-color: ${props => (props.isTransparent && !props.isWithArrow) && 'rgba(255, 255, 255, .4)'};
     color: ${props => props.isAccentColor ? props.theme.linkColor : (props.color || props.theme.textColor)};
     padding: ${props => (!props.isNoPadding && !props.isWithArrow) && '18px 30px'};
+    white-space: ${props => props.isWithArrow && 'nowrap'};
     text-align: center;
     font-size: ${props => props.isWithArrow ? '20px' : '18px'};
     text-decoration: none;
diff --git a/packages/website/ts/@next/components/definition.tsx b/packages/website/ts/@next/components/definition.tsx
index d556bc647..77f837294 100644
--- a/packages/website/ts/@next/components/definition.tsx
+++ b/packages/website/ts/@next/components/definition.tsx
@@ -116,10 +116,21 @@ const TextWrap = styled.div<Props>`
 `;
 
 const LinkWrap = styled.div`
-    display: inline-flex;
     margin-top: 60px;
 
-    a + a {
-        margin-left: 60px;
+    @media (min-width: 768px) {
+        display: inline-flex;
+
+        a + a {
+            margin-left: 60px;
+        }
+    }
+
+    @media (max-width: 768px) {
+        max-width: 250px;
+
+        a + a {
+            margin-top: 15px;
+        }
     }
 `;
diff --git a/packages/website/ts/@next/components/footer.tsx b/packages/website/ts/@next/components/footer.tsx
index 5e5106ff3..155f46979 100644
--- a/packages/website/ts/@next/components/footer.tsx
+++ b/packages/website/ts/@next/components/footer.tsx
@@ -160,10 +160,10 @@ const Link = styled(ReactRouterLink)`
     display: block;
     font-size: 16px;
     line-height: 20px;
-    transition: color 0.25s ease-in-out;
+    transition: opacity 0.25s;
     text-decoration: none;
 
     &:hover {
-        color: rgba(255, 255, 255, 1);
+        opacity: 0.8;
     }
 `;
diff --git a/packages/website/ts/@next/components/hamburger.tsx b/packages/website/ts/@next/components/hamburger.tsx
index 3ca276705..b5c01a2b0 100644
--- a/packages/website/ts/@next/components/hamburger.tsx
+++ b/packages/website/ts/@next/components/hamburger.tsx
@@ -53,7 +53,6 @@ const StyledHamburger = styled.button<Props>`
         ${props => props.isOpen && `
             opacity: 1;
             transform: rotate(45deg) translate(0, 1px);
-            background-color: #fff;
 
             &:nth-child(2) {
                 opacity: 0;
diff --git a/packages/website/ts/@next/components/header.tsx b/packages/website/ts/@next/components/header.tsx
index fde549642..544a7daf1 100644
--- a/packages/website/ts/@next/components/header.tsx
+++ b/packages/website/ts/@next/components/header.tsx
@@ -4,6 +4,8 @@ import MediaQuery from 'react-responsive';
 import { NavLink as ReactRouterLink } from 'react-router-dom';
 import styled, { withTheme } from 'styled-components';
 
+import Headroom from 'react-headroom';
+
 import { Button } from 'ts/@next/components/button';
 import { DropdownDevelopers } from 'ts/@next/components/dropdowns/dropdown_developers';
 import { DropdownProducts } from 'ts/@next/components/dropdowns/dropdown_products';
@@ -66,39 +68,47 @@ const navItems: NavItemProps[] = [
 ];
 
 class HeaderBase extends React.Component<HeaderProps> {
+    public onUnpin = () => {
+        if (this.props.isNavToggled) {
+            this.props.toggleMobileNav();
+        }
+    }
+
     public render(): React.ReactNode {
         const { isNavToggled, toggleMobileNav, theme } = this.props;
 
         return (
-            <StyledHeader>
-                <HeaderWrap>
-                    <ReactRouterLink to={WebsitePaths.Home}>
-                        <Logo />
-                    </ReactRouterLink>
-
-                    <NavLinks>
-                        {_.map(navItems, (link, index) => (
-                            <NavItem
-                                key={`navlink-${index}`}
-                                link={link}
-                            />
-                        ))}
-                    </NavLinks>
-
-                    <MediaQuery minWidth={990}>
-                        <TradeButton
-                            bgColor={theme.headerButtonBg}
-                            color="#ffffff"
-                            href="https://0x.org/portal"
-                        >
-                            Trade on 0x
-                        </TradeButton>
-                    </MediaQuery>
-
-                    <Hamburger isOpen={isNavToggled} onClick={toggleMobileNav} />
-                    <MobileNav isToggled={isNavToggled} toggleMobileNav={toggleMobileNav} />
-                </HeaderWrap>
-            </StyledHeader>
+            <Headroom onUnpin={this.onUnpin} downTolerance={4} upTolerance={10}>
+                <StyledHeader isNavToggled={isNavToggled}>
+                    <HeaderWrap>
+                        <ReactRouterLink to={WebsitePaths.Home}>
+                            <Logo />
+                        </ReactRouterLink>
+
+                        <NavLinks>
+                            {_.map(navItems, (link, index) => (
+                                <NavItem
+                                    key={`navlink-${index}`}
+                                    link={link}
+                                />
+                            ))}
+                        </NavLinks>
+
+                        <MediaQuery minWidth={990}>
+                            <TradeButton
+                                bgColor={theme.headerButtonBg}
+                                color="#ffffff"
+                                href="/portal"
+                            >
+                                Trade on 0x
+                            </TradeButton>
+                        </MediaQuery>
+
+                        <Hamburger isOpen={isNavToggled} onClick={toggleMobileNav} />
+                        <MobileNav isToggled={isNavToggled} toggleMobileNav={toggleMobileNav} />
+                    </HeaderWrap>
+                </StyledHeader>
+            </Headroom>
         );
     }
 }
@@ -126,6 +136,7 @@ const NavItem = (props: { link: NavItemProps; key: string }) => {
 
 const StyledHeader = styled.header<HeaderProps>`
     padding: 30px;
+    background-color: ${props => props.theme.bgColor};
 `;
 
 const LinkWrap = styled.li`
diff --git a/packages/website/ts/@next/components/mobileNav.tsx b/packages/website/ts/@next/components/mobileNav.tsx
index 52a46ed69..8b5ffd7e8 100644
--- a/packages/website/ts/@next/components/mobileNav.tsx
+++ b/packages/website/ts/@next/components/mobileNav.tsx
@@ -24,12 +24,12 @@ export class MobileNav extends React.PureComponent<Props> {
 
                         <ul>
                             <li>
-                                <Link to="#">
-                                    0x instant
+                                <Link to={WebsitePaths.Instant}>
+                                    0x Instant
                                 </Link>
                             </li>
                             <li>
-                                <Link to="#">
+                                <Link to={WebsitePaths.LaunchKit}>
                                     0x Launch Kit
                                 </Link>
                             </li>
@@ -49,9 +49,9 @@ export class MobileNav extends React.PureComponent<Props> {
                                 </Link>
                             </li>
                             <li>
-                                <Link to="https://blog.0x.org/latest">
+                                <a href="https://blog.0x.org/latest" target="_blank">
                                     Blog
-                                </Link>
+                                </a>
                             </li>
                         </Grid>
                     </Section>
@@ -70,8 +70,9 @@ const Wrap = styled.nav<{ isToggled: boolean }>`
     height: 357px;
     background-color: ${props => props.theme.mobileNavBgUpper};
     color: ${props => props.theme.mobileNavColor};
-    transition: transform 0.5s;
+    transition: ${props => props.isToggled ? 'visibility 0s, transform 0.5s' : 'visibility 0s 0.5s, transform 0.5s'};
     transform: translate3d(0, ${props => props.isToggled ? 0 : '-100%'}, 0);
+    visibility: ${props => !props.isToggled && 'hidden'};
     position: fixed;
     display: flex;
     flex-direction: column;
@@ -109,6 +110,8 @@ const Section = styled.div<{ isDark?: boolean }>`
 `;
 
 const Grid = styled(WrapGrid)<WrapProps>`
+    justify-content: flex-start;
+
     li {
         width: 50%;
         flex-shrink: 0;
diff --git a/packages/website/ts/@next/components/modals/input.tsx b/packages/website/ts/@next/components/modals/input.tsx
index 61663d906..d4d9206a2 100644
--- a/packages/website/ts/@next/components/modals/input.tsx
+++ b/packages/website/ts/@next/components/modals/input.tsx
@@ -11,27 +11,37 @@ interface InputProps {
     width?: InputWidth;
     label: string;
     type?: string;
+    errors?: ErrorProps;
+    isErrors?: boolean;
 }
 
 interface LabelProps {
     string: boolean;
 }
 
+interface ErrorProps {
+    [key: string]: string;
+}
+
 export const Input = React.forwardRef((props: InputProps, ref?: React.Ref<HTMLInputElement>) => {
-    const { name, label, type } = props;
+    const { name, label, type, errors } = props;
     const id = `input-${name}`;
     const componentType = type === 'textarea' ? 'textarea' : 'input';
+    const isErrors = errors.hasOwnProperty(name) && errors[name] !== null;
+    const errorMessage = isErrors ? errors[name] : null;
 
     return (
         <InputWrapper {...props}>
             <Label htmlFor={id}>{label}</Label>
-            <StyledInput as={componentType} ref={ref} id={id} placeholder={label} {...props} />
+            <StyledInput as={componentType} ref={ref} id={id} placeholder={label} isErrors={isErrors} {...props} />
+            {isErrors && <Error>{errorMessage}</Error>}
         </InputWrapper>
     );
 });
 
 Input.defaultProps = {
     width: InputWidth.Full,
+    errors: {},
 };
 
 const StyledInput = styled.input`
@@ -45,6 +55,9 @@ const StyledInput = styled.input`
     width: 100%;
     min-height: ${props => props.type === 'textarea' && `120px`};
 
+    background-color: ${(props: InputProps) => props.isErrors && `#FDEDED`};
+    border-color: ${(props: InputProps) => props.isErrors && `#FD0000`};
+
     &::placeholder {
         color: #C3C3C3;
     }
@@ -68,3 +81,15 @@ const Label = styled.label`
     margin-bottom: 10px;
     display: inline-block;
 `;
+
+const Error = styled.span`
+    color: #FD0000;
+    font-size: .833333333rem;
+    line-height: 1em;
+    display: inline-block;
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    transform: translateY(24px);
+`;
diff --git a/packages/website/ts/@next/components/modals/modal_contact.tsx b/packages/website/ts/@next/components/modals/modal_contact.tsx
index f107b9174..b595c236d 100644
--- a/packages/website/ts/@next/components/modals/modal_contact.tsx
+++ b/packages/website/ts/@next/components/modals/modal_contact.tsx
@@ -24,6 +24,20 @@ interface FormProps {
     isSubmitting?: boolean;
 }
 
+interface ErrorResponseProps {
+    param: string;
+    location: string;
+    msg: string;
+}
+
+interface ErrorResponse {
+    errors: ErrorResponseProps[];
+}
+
+interface ErrorProps {
+    [key: string]: string;
+}
+
 export class ModalContact extends React.Component<Props> {
     public state = {
         isSubmitting: false,
@@ -40,7 +54,7 @@ export class ModalContact extends React.Component<Props> {
     }
     public render(): React.ReactNode {
         const {isOpen, onDismiss} = this.props;
-        const {isSuccessful} = this.state;
+        const {isSuccessful, errors} = this.state;
 
         return (
             <>
@@ -61,6 +75,7 @@ export class ModalContact extends React.Component<Props> {
                                     width={InputWidth.Half}
                                     ref={this.nameRef}
                                     required={true}
+                                    errors={errors}
                                 />
                                 <Input
                                     name="email"
@@ -68,6 +83,7 @@ export class ModalContact extends React.Component<Props> {
                                     type="email"
                                     ref={this.emailRef}
                                     required={true}
+                                    errors={errors}
                                     width={InputWidth.Half}
                                 />
                             </InputRow>
@@ -78,6 +94,7 @@ export class ModalContact extends React.Component<Props> {
                                     type="text"
                                     ref={this.companyProjectRef}
                                     required={true}
+                                    errors={errors}
                                 />
                             </InputRow>
                             <InputRow>
@@ -86,6 +103,7 @@ export class ModalContact extends React.Component<Props> {
                                     label="Do you have any documentation or a website?"
                                     type="text"
                                     ref={this.linkRef}
+                                    errors={errors}
                                 />
                             </InputRow>
                             <InputRow>
@@ -94,6 +112,7 @@ export class ModalContact extends React.Component<Props> {
                                     label="Anything else?"
                                     type="textarea"
                                     ref={this.commentsRef}
+                                    errors={errors}
                                 />
                             </InputRow>
                             <ButtonRow>
@@ -129,24 +148,42 @@ export class ModalContact extends React.Component<Props> {
         const link = this.linkRef.current.value;
         const comments = this.commentsRef.current.value;
 
-        this.setState({ ...this.state, isSubmitting: true });
+        this.setState({ ...this.state, errors: [], isSubmitting: true });
 
         try {
-            await fetch('https://website-api.0x.org/leads', {
+            const response = await fetch('https://website-api.0x.org/leads', {
                 method: 'post',
                 mode: 'cors',
                 credentials: 'same-origin',
                 headers: {
                     'content-type': 'application/json; charset=utf-8',
                 },
-                body: JSON.stringify({ name, email, projectOrCompany, link, comments }),
+                body: JSON.stringify(_.omitBy({ name, email, projectOrCompany, link, comments }, _.isEmpty)),
             });
 
+            if (!response.ok) {
+                const errorResponse: ErrorResponse = await response.json();
+                const errors = this._parseErrors(errorResponse.errors);
+                this.setState({ ...this.state, isSubmitting: false, errors });
+
+                throw new Error('Request failed');
+            }
+
             this.setState({ ...this.state, isSuccessful: true });
         } catch (e) {
-            this.setState({ ...this.state, errors: [] });
+            // Empty block
         }
     }
+    private _parseErrors(errors: ErrorResponseProps[]): ErrorProps  {
+        return _
+            .reduce(errors, (hash: ErrorProps, error: ErrorResponseProps) => {
+                const { param, msg } = error;
+                const key = param;
+                hash[key] = msg;
+
+                return hash;
+            }, {});
+    }
 }
 // Handle errors: {"errors":[{"location":"body","param":"name","msg":"Invalid value"},{"location":"body","param":"email","msg":"Invalid value"}]}
 
diff --git a/packages/website/ts/@next/components/newsletter_form.tsx b/packages/website/ts/@next/components/newsletter_form.tsx
index 859cd1d9c..6dc4bf678 100644
--- a/packages/website/ts/@next/components/newsletter_form.tsx
+++ b/packages/website/ts/@next/components/newsletter_form.tsx
@@ -1,13 +1,20 @@
 import * as React from 'react';
-import styled from 'styled-components';
+import styled, { withTheme } from 'styled-components';
 
 import { colors } from 'ts/style/colors';
 
+import {ThemeValuesInterface} from 'ts/@next/components/siteWrap';
+
+interface FormProps {
+    theme: ThemeValuesInterface;
+}
+
 interface InputProps {
     isSubmitted: boolean;
     name: string;
     type: string;
     label: string;
+    textColor: string;
 }
 
 interface ArrowProps {
@@ -26,18 +33,19 @@ const Input = React.forwardRef((props: InputProps, ref: React.Ref<HTMLInputEleme
     );
 });
 
-export class NewsletterForm extends React.Component {
+class Form extends React.Component<FormProps> {
     public emailInput = React.createRef<HTMLInputElement>();
     public state = {
         isSubmitted: false,
     };
     public render(): React.ReactNode {
         const {isSubmitted} = this.state;
+        const {theme} = this.props;
 
         return (
             <StyledForm onSubmit={this._onSubmitAsync.bind(this)}>
                 <InputWrapper>
-                    <Input isSubmitted={isSubmitted} name="email" type="email" label="Email Address" ref={this.emailInput} required={true} />
+                    <Input isSubmitted={isSubmitted} name="email" type="email" label="Email Address" ref={this.emailInput} required={true} textColor={theme.textColor} />
 
                     <SubmitButton>
                         <Arrow isSubmitted={isSubmitted} width="22" height="17" fill="none" xmlns="http://www.w3.org/2000/svg">
@@ -74,6 +82,8 @@ export class NewsletterForm extends React.Component {
     }
 }
 
+export const NewsletterForm = withTheme(Form);
+
 const StyledForm = styled.form`
     appearance: none;
     border: 0;
@@ -82,12 +92,12 @@ const StyledForm = styled.form`
     margin-top: 27px;
 `;
 
-const StyledInput = styled.input`
+const StyledInput = styled.input<InputProps>`
     appearance: none;
     background-color: transparent;
     border: 0;
     border-bottom: 1px solid #393939;
-    color: #fff;
+    color: ${props => props.textColor || '#fff'};
     font-size: 1.294117647rem;
     padding: 15px 0;
     outline: none;
diff --git a/packages/website/ts/@next/components/sections/landing/about.tsx b/packages/website/ts/@next/components/sections/landing/about.tsx
index 700d5e7d2..ee1cfb434 100644
--- a/packages/website/ts/@next/components/sections/landing/about.tsx
+++ b/packages/website/ts/@next/components/sections/landing/about.tsx
@@ -26,7 +26,7 @@ export const SectionLandingAbout = () => (
             isMuted={1}
             padding={['large', 0, 'default', 0]}
         >
-            Anyone in the world can use 0x to service a wide variety of markets ranging from gaming items to financial instruments to assets that could have near existed before.
+            Anyone in the world can use 0x to service a wide variety of markets ranging from gaming items to financial instruments to assets that could have never existed before.
         </Paragraph>
 
         <Button
diff --git a/packages/website/ts/@next/components/sections/landing/clients.tsx b/packages/website/ts/@next/components/sections/landing/clients.tsx
index 8e2347d02..e411feeb0 100644
--- a/packages/website/ts/@next/components/sections/landing/clients.tsx
+++ b/packages/website/ts/@next/components/sections/landing/clients.tsx
@@ -18,39 +18,40 @@ interface StyledProjectInterface {
 const projects: ProjectLogo[] = [
     {
         name: 'Radar Relay',
-        imageUrl: 'images/@next/clients/client-radar.png',
+        imageUrl: 'images/@next/clients/radar-relay.svg',
         persistOnMobile: true,
     },
     {
         name: 'Paradex',
-        imageUrl: 'images/@next/clients/client-paradex.png',
+        imageUrl: 'images/@next/clients/paradex.svg',
         persistOnMobile: true,
     },
     {
-        name: 'The Ocean X',
-        imageUrl: 'images/@next/clients/client-oceanx.png',
+        name: 'Star Bit Ex',
+        imageUrl: 'images/@next/clients/starbitex.svg',
     },
     {
-        name: 'Decent EX',
-        imageUrl: 'images/@next/clients/client-decent.png',
+        name: 'LedgerDex',
+        imageUrl: 'images/@next/clients/ledgerdex.svg',
     },
     {
-        name: 'dEX',
-        imageUrl: 'images/@next/clients/client-dex.png',
+        name: 'OpenRelay',
+        imageUrl: 'images/@next/clients/openrelay.svg',
+        persistOnMobile: true,
     },
     {
-        name: 'OpenRelay',
-        imageUrl: 'images/@next/clients/client-openrelay.png',
+        name: 'Bamboo Relay',
+        imageUrl: 'images/@next/clients/bamboo.svg',
         persistOnMobile: true,
     },
     {
-        name: 'Amadeus',
-        imageUrl: 'images/@next/clients/client-amadeus.png',
+        name: 'Shark Relay',
+        imageUrl: 'images/@next/clients/sharkrelay.svg',
         persistOnMobile: true,
     },
     {
-        name: 'DDEX',
-        imageUrl: 'images/@next/clients/client-ddex.png',
+        name: 'dEX',
+        imageUrl: 'images/@next/clients/ercdex.svg',
         persistOnMobile: true,
     },
 ];
diff --git a/packages/website/ts/@next/components/siteWrap.tsx b/packages/website/ts/@next/components/siteWrap.tsx
index c1513c647..ad7691885 100644
--- a/packages/website/ts/@next/components/siteWrap.tsx
+++ b/packages/website/ts/@next/components/siteWrap.tsx
@@ -109,9 +109,6 @@ export class SiteWrap extends React.Component<Props, State> {
     public toggleMobileNav = () => {
         this.setState({
             isMobileNavOpen: !this.state.isMobileNavOpen,
-        }, () => {
-            const overflow = this.state.isMobileNavOpen ? 'hidden' : 'auto';
-            document.documentElement.style.overflowY = overflow;
         });
     }
 
@@ -148,6 +145,5 @@ export class SiteWrap extends React.Component<Props, State> {
 
 const Main = styled.main<MainProps>`
     transition: transform 0.5s, opacity 0.5s;
-    transform: translate3d(0, ${props => props.isNavToggled ? '357px' : 0}, 0);
     opacity: ${props => props.isNavToggled && '0.5'};
 `;
diff --git a/packages/website/ts/@next/constants/globalStyle.tsx b/packages/website/ts/@next/constants/globalStyle.tsx
index 6844381c9..bf168d344 100644
--- a/packages/website/ts/@next/constants/globalStyle.tsx
+++ b/packages/website/ts/@next/constants/globalStyle.tsx
@@ -13,20 +13,6 @@ export interface GlobalStyle {
 const GlobalStyles = withTheme(createGlobalStyle<GlobalStyle> `
     ${cssReset};
 
-    @font-face {
-        font-family: "Formular";
-        src: url("/fonts/Formular-Light.woff2") format("woff2"), url("/fonts/Formular-Light.woff") format("woff");
-        font-weight: 300;
-        font-display: swap;
-    }
-
-    @font-face {
-        font-family: "Formular";
-        src: url("/fonts/Formular-Regular.woff2") format("woff2"), url("/fonts/Formular-Regular.woff") format("woff");
-        font-weight: 400;
-        font-display: swap;
-    }
-
     html {
         font-size: 18px;
         background-color: ${props => props.theme.bgColor};
diff --git a/packages/website/ts/@next/constants/utilities.tsx b/packages/website/ts/@next/constants/utilities.tsx
index 685b9e6f9..0d626c91b 100644
--- a/packages/website/ts/@next/constants/utilities.tsx
+++ b/packages/website/ts/@next/constants/utilities.tsx
@@ -13,7 +13,7 @@ export const PADDING_SIZES: PaddingSizes = {
     'small': '15px',
 };
 
-export const getCSSPadding = (value: number | Array<string | number>): string => {
+export const getCSSPadding = (value: number | Array<string | number> = 0): string => {
     if (Array.isArray(value)) {
         return value.map(val => PADDING_SIZES[val] || `${val}px`).join(' ');
     } else {
diff --git a/packages/website/ts/@next/icons/illustrations/consistently-ship.svg b/packages/website/ts/@next/icons/illustrations/consistently-ship.svg
index b7b0110be..733655a3f 100644
--- a/packages/website/ts/@next/icons/illustrations/consistently-ship.svg
+++ b/packages/website/ts/@next/icons/illustrations/consistently-ship.svg
@@ -1,6 +1,6 @@
 <svg width="104" height="104" viewBox="0 0 104 104" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M9.84985 78.8087L36.7242 61.1239L37.9881 63.0445L38.1969 62.8389L40.3021 64.9762L17.1691 87.7629L15.0638 85.6256L35.4224 65.5718L11.499 81.3147L9.84985 78.8087Z" fill="#00AE99"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M30.5626 97.04L44.5116 68.1307L42.2297 67.0297L42.4954 66.6708L40.0844 64.8856L20.6933 91.0738L23.1043 92.8591L40.7433 69.0371L27.8606 95.7363L30.5626 97.04Z" fill="#00AE99"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M77.0274 21.945L77.7817 22.597L77.9176 22.9305C78.4037 24.1238 78.4331 25.4595 78.2991 26.6101C78.163 27.7797 77.841 28.9043 77.4856 29.7663C77.111 30.6749 76.1177 32.2645 75.1401 33.7277C74.1583 35.1972 73.0749 36.711 72.3583 37.6171C72.3108 37.6936 72.2613 37.7744 72.2099 37.8592L72.2154 37.8639L72.1874 37.8963C70.7572 40.2611 67.9041 45.6532 66.4461 50.8115C64.8495 56.46 65.5015 61.0514 65.9556 64.2492C66.0373 64.8248 66.1127 65.3553 66.1673 65.8386C66.2974 66.9893 65.9903 68.1889 65.5872 69.2248C65.1736 70.2879 64.5976 71.3318 64.0302 72.2257C63.4471 73.1444 62.8475 73.9446 62.387 74.4938L61.4071 75.6622L50.0298 65.7966L48.5502 67.5084L48.5056 67.552C48.1953 67.8559 47.618 68.2291 46.8939 68.3763C46.4862 68.4592 46.0304 68.4687 45.5642 68.359L45.5313 68.3971L45.3992 68.4954C44.8377 68.9128 43.4689 69.4006 42.2387 68.3372L36.9111 63.732C35.6809 62.6686 35.9656 61.2437 36.2974 60.6277L36.3755 60.4828L36.4085 60.4446C36.2324 59.9993 36.1759 59.5468 36.1989 59.1315C36.2398 58.3937 36.5256 57.7685 36.7814 57.4174L36.8181 57.367L38.2977 55.6553L26.8899 45.8252L27.9042 44.6866C28.3809 44.1514 29.086 43.4424 29.9106 42.7324C30.713 42.0417 31.6626 41.3207 32.6547 40.7576C33.6213 40.2089 34.764 39.7315 35.9213 39.6937C36.4075 39.6779 36.9432 39.6756 37.5246 39.6732C40.7544 39.6599 45.3919 39.6406 50.75 37.2437C55.6431 35.0547 60.5656 31.4513 62.6986 29.6941L62.7266 29.6617L62.7321 29.6665C62.8085 29.6033 62.8812 29.5426 62.9501 29.4846C63.743 28.6445 65.0842 27.3534 66.3961 26.1693C67.7024 24.9903 69.1316 23.7775 69.9764 23.2754C70.778 22.799 71.8441 22.3176 72.9817 22.0137C74.1009 21.7147 75.4267 21.5505 76.6778 21.8589L77.0274 21.945ZM55.203 38.3654C54.147 38.9466 53.0625 39.4956 51.9751 39.9821C45.9873 42.6608 40.6767 42.6707 37.4612 42.6766C36.9186 42.6776 36.4356 42.6785 36.0192 42.6921C35.5706 42.7068 34.9295 42.916 34.1355 43.3666C33.367 43.8029 32.579 44.3938 31.8679 45.006C31.6377 45.2042 31.4191 45.4015 31.2155 45.5925L40.2596 53.3857L40.9605 52.5749C41.9509 51.429 43.2047 50.9183 44.4009 50.8619L55.203 38.3654ZM47.4939 51.8712L64.806 31.8436C64.8574 31.8005 64.9071 31.7587 64.9549 31.7181L65.0206 31.6623L65.0795 31.5994C65.7829 30.8478 67.0916 29.5828 68.4061 28.3964C69.7605 27.1739 70.9671 26.1765 71.5092 25.8543C72.0946 25.5064 72.9071 25.1388 73.7561 24.912C74.3265 24.7596 74.8542 24.6865 75.3101 24.694C75.3835 25.1441 75.3875 25.6768 75.3193 26.2632C75.2177 27.1361 74.9716 27.9933 74.712 28.6228C74.4717 29.2059 73.6592 30.544 72.6456 32.061C71.6619 33.5334 70.5996 35.0114 69.9577 35.8161L69.9039 35.8835L69.8582 35.9566C69.825 36.0098 69.7908 36.0649 69.7556 36.1221L52.4435 56.1497C51.943 55.696 51.0966 54.9401 50.1455 54.1125C50.0948 54.0686 50.0447 54.0244 49.9942 53.981C49.944 53.9373 49.8935 53.8935 49.8427 53.8496C48.8862 53.0284 48.0152 52.3008 47.4939 51.8712ZM48.0324 56.2506C47.0025 55.3641 46.0577 54.5744 45.535 54.1444L45.5208 54.1327L45.507 54.1207C45.1484 53.8107 44.0456 53.5933 43.2301 54.5367L42.5307 55.3458L49.7236 61.5634L50.423 60.7543C51.2385 59.811 50.8638 58.7512 50.5052 58.4412L50.4913 58.4292L50.4777 58.4169C49.9766 57.9619 49.0585 57.1414 48.0324 56.2506ZM47.7618 63.833L40.5688 57.6154L39.222 59.1735C39.2059 59.2171 39.1963 59.2619 39.1943 59.2975C39.1934 59.3136 39.1943 59.3242 39.1951 59.33C39.1959 59.3352 39.1967 59.3374 39.1971 59.3385C39.1974 59.3394 39.1997 59.3452 39.2078 59.3564C39.2161 59.3681 39.2351 59.3918 39.273 59.4245L46.1591 65.377C46.197 65.4097 46.2232 65.4251 46.236 65.4317C46.2483 65.438 46.2543 65.4394 46.2552 65.4396C46.2563 65.4399 46.2587 65.4404 46.2639 65.4404C46.2669 65.4404 46.271 65.4402 46.2764 65.4396C46.2818 65.439 46.2884 65.4381 46.2963 65.4365C46.3312 65.4293 46.3742 65.4133 46.4149 65.3911L47.7618 63.833ZM39.2383 59.1353C39.2391 59.1338 39.2394 59.1333 39.2392 59.1338ZM53.8897 59.0642C54.007 60.2559 53.683 61.5704 52.6926 62.7162L51.9917 63.527L61.0115 71.3484C61.171 71.1193 61.3346 70.8745 61.4974 70.618C62.0002 69.8258 62.471 68.9606 62.7914 68.1371C63.1224 67.2862 63.2367 66.6216 63.1863 66.1756C63.1395 65.7616 63.0705 65.2836 62.993 64.7465C62.5336 61.564 61.775 56.3079 63.5592 49.9955C63.8832 48.8491 64.2695 47.6966 64.6918 46.5676L53.8897 59.0642Z" fill="#00AE99"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M52 3.5C25.2142 3.5 3.5 25.2142 3.5 52C3.5 78.7858 25.2142 100.5 52 100.5C78.7858 100.5 100.5 78.7858 100.5 52C100.5 25.2142 78.7858 3.5 52 3.5ZM0.5 52C0.5 23.5573 23.5573 0.5 52 0.5C80.4427 0.5 103.5 23.5573 103.5 52C103.5 80.4427 80.4427 103.5 52 103.5C23.5573 103.5 0.5 80.4427 0.5 52Z" fill="#00AE99"/>
+<path d="M37.5485 62.3767L10.6742 80.0615M16.1162 86.694L39.2493 63.9073" stroke="#00AE99" stroke-width="2.5"/>
+<path d="M43.1605 67.4788L29.2115 96.3881M21.8987 91.9664L41.2898 65.7782" stroke="#00AE99" stroke-width="2.5"/>
+<path d="M64.6767 66.0071L63.4346 66.1475L63.4346 66.1475L64.6767 66.0071ZM65.0025 50.4035L66.2054 50.7435L65.0025 50.4035ZM71.1301 36.7515L70.153 35.9719L70.1082 36.0281L70.0701 36.0891L71.1301 36.7515ZM61.2375 73.5299L60.4186 74.4743L61.3787 75.3068L62.1953 74.3331L61.2375 73.5299ZM47.4561 66.4802L48.3306 67.3734L48.3678 67.337L48.4018 67.2977L47.4561 66.4802ZM45.1781 66.5118L45.9955 65.5661L45.9955 65.5661L45.1781 66.5118ZM44.504 67.2916L45.2499 68.2947L45.36 68.2128L45.4497 68.109L44.504 67.2916ZM43.2195 67.2024L44.037 66.2568L44.037 66.2568L43.2195 67.2024ZM51.486 57.3064L50.6457 58.2318L50.657 58.2421L50.6685 58.2521L51.486 57.3064ZM62.7637 71.4218L63.819 72.0917L63.819 72.0917L62.7637 71.4218ZM76.5283 23.4963L77.6859 23.0248L77.5727 22.7469L77.3457 22.5507L76.5283 23.4963ZM35.9701 41.1929L36.0109 42.4422L36.0109 42.4422L35.9701 41.1929ZM51.3624 38.6129L50.8519 37.4718L51.3624 38.6129ZM63.9842 30.5744L64.793 31.5275L64.8478 31.481L64.8969 31.4285L63.9842 30.5744ZM29.0241 45.6843L28.0908 44.8528L27.2455 45.8017L28.2082 46.6313L29.0241 45.6843ZM37.9936 58.3007L37.0479 57.4833L37.0139 57.5226L36.9833 57.5647L37.9936 58.3007ZM38.2919 60.5593L39.1094 59.6137L39.1094 59.6137L38.2919 60.5593ZM37.6179 61.3391L36.6722 60.5217L36.5825 60.6255L36.5174 60.7463L37.6179 61.3391ZM37.8919 62.5972L38.7094 61.6516L38.7094 61.6515L37.8919 62.5972ZM46.4878 52.9859L45.6704 53.9316L45.6819 53.9416L45.6937 53.9513L46.4878 52.9859ZM30.8892 43.8692L30.0736 42.9219L30.0736 42.9219L30.8892 43.8692ZM76.3188 23.3153L77.1362 22.3696L76.9092 22.1734L76.6179 22.1016L76.3188 23.3153ZM70.1348 36.0655L51.3508 57.796L53.2421 59.4309L72.0261 37.7004L70.1348 36.0655ZM65.9188 65.8667C65.5634 62.7233 64.3047 57.4681 66.2054 50.7435L63.7996 50.0635C61.7311 57.3817 63.1075 63.2547 63.4346 66.1475L65.9188 65.8667ZM66.2054 50.7435C67.7494 45.2809 70.8444 39.5677 72.1902 37.4138L70.0701 36.0891C68.6538 38.3557 65.431 44.2919 63.7996 50.0635L66.2054 50.7435ZM72.1073 37.531C72.8165 36.642 73.9266 35.0937 74.9321 33.5888C75.9127 32.1211 76.8909 30.5525 77.2543 29.671L74.943 28.7181C74.6915 29.3283 73.864 30.6874 72.8534 32.1999C71.8677 33.6752 70.801 35.1596 70.153 35.9719L72.1073 37.531ZM62.0564 72.5855L50.6963 62.7347L49.0585 64.6235L60.4186 74.4743L62.0564 72.5855ZM48.9317 62.8617L46.5104 65.6628L48.4018 67.2977L50.823 64.4966L48.9317 62.8617ZM46.5816 65.5871C46.6163 65.5531 46.6022 65.5735 46.5354 65.6101C46.4766 65.6423 46.4098 65.6684 46.3459 65.6814C46.2855 65.6937 46.2383 65.6924 46.1986 65.6831C46.1638 65.6751 46.0953 65.6523 45.9955 65.5661L44.3607 67.4575C45.1854 68.1704 46.1014 68.2823 46.8439 68.1313C47.5166 67.9946 48.0515 67.6467 48.3306 67.3734L46.5816 65.5871ZM44.2324 65.6944L43.5584 66.4741L45.4497 68.109L46.1238 67.3293L44.2324 65.6944ZM43.7582 66.2885C43.804 66.2544 43.8326 66.2427 43.8431 66.2387C43.857 66.2334 43.8754 66.2284 43.9003 66.2268C43.9278 66.2251 43.9618 66.228 43.9962 66.2392C44.0323 66.251 44.0456 66.2643 44.037 66.2568L42.4021 68.1481C43.5138 69.1091 44.7467 68.6688 45.2499 68.2947L43.7582 66.2885ZM50.6685 58.2521C51.1247 58.6464 51.5236 59.8632 50.612 60.9178L52.5033 62.5527C54.3763 60.3859 53.7352 57.5984 52.3034 56.3607L50.6685 58.2521ZM50.612 60.9178L48.9317 62.8617L50.823 64.4966L52.5033 62.5527L50.612 60.9178ZM62.1953 74.3331C62.6486 73.7926 63.2417 73.0013 63.819 72.0917L61.7083 70.7519C61.1892 71.5698 60.6611 72.2719 60.2798 72.7266L62.1953 74.3331ZM63.819 72.0917C64.381 71.2063 64.9483 70.1773 65.3541 69.1342C65.7512 68.1137 66.0422 66.9586 65.9188 65.8667L63.4346 66.1475C63.4916 66.6522 63.3613 67.3615 63.0243 68.2277C62.6961 69.0712 62.2166 69.9513 61.7083 70.7519L63.819 72.0917ZM50.6948 62.7335L45.811 58.5118L44.1761 60.4032L49.0599 64.6248L50.6948 62.7335ZM48.0426 55.9286C49.1315 56.8715 50.1183 57.753 50.6457 58.2318L52.3263 56.381C51.7849 55.8894 50.7834 54.9948 49.679 54.0386L48.0426 55.9286ZM40.7648 64.3497L44.3607 67.4575L45.9955 65.5661L42.3996 62.4582L40.7648 64.3497ZM39.6096 65.7343L42.4021 68.1481L44.037 66.2568L41.2445 63.8429L39.6096 65.7343ZM77.2543 29.671C77.6017 28.8283 77.9174 27.7261 78.0507 26.5812C78.1821 25.4521 78.1499 24.1638 77.6859 23.0248L75.3706 23.9679C75.6133 24.5637 75.6738 25.3787 75.5675 26.2921C75.463 27.1897 75.2106 28.0692 74.943 28.7181L77.2543 29.671ZM62.9156 29.8252L44.1315 51.5557L46.0229 53.1906L64.8069 31.4601L62.9156 29.8252ZM36.0109 42.4422C38.9206 42.3473 44.9309 42.8595 51.8728 39.7539L50.8519 37.4718C44.4731 40.3255 39.0911 39.8404 35.9294 39.9436L36.0109 42.4422ZM51.8728 39.7539C57.3477 37.3047 62.7552 33.2568 64.793 31.5275L63.1754 29.6213C61.2389 31.2646 56.0337 35.1537 50.8519 37.4718L51.8728 39.7539ZM64.8969 31.4285C65.6069 30.6698 66.9213 29.3996 68.2385 28.2108C69.5889 26.992 70.814 25.9765 71.3813 25.6394L70.1041 23.4903C69.2845 23.9774 67.8738 25.1723 66.5635 26.3549C65.2199 27.5676 63.8485 28.89 63.0715 29.7203L64.8969 31.4285ZM28.2082 46.6313L39.5989 56.4466L41.2308 54.5527L29.8401 44.7374L28.2082 46.6313ZM39.4692 54.6822L37.0479 57.4833L38.9392 59.1182L41.3605 56.3171L39.4692 54.6822ZM36.9833 57.5647C36.7532 57.8804 36.4864 58.46 36.4484 59.1453C36.4065 59.9019 36.6497 60.7921 37.4745 61.505L39.1094 59.6137C39.0096 59.5275 38.9772 59.4629 38.9642 59.4297C38.9494 59.3918 38.9412 59.3452 38.9446 59.2836C38.9482 59.2185 38.9644 59.1487 38.9878 59.0859C39.0143 59.0144 39.0324 58.9976 39.0039 59.0368L36.9833 57.5647ZM37.3462 59.7419L36.6722 60.5217L38.5635 62.1566L39.2376 61.3768L37.3462 59.7419ZM36.5174 60.7463C36.22 61.2983 35.9627 62.5819 37.0745 63.5429L38.7094 61.6515C38.7007 61.6441 38.7158 61.6554 38.7326 61.6893C38.7487 61.7218 38.7565 61.755 38.7588 61.7825C38.7609 61.8074 38.7585 61.8263 38.7553 61.8408C38.7529 61.8517 38.7454 61.8817 38.7183 61.9319L36.5174 60.7463ZM47.3052 52.0403C45.8734 50.8026 43.0225 50.5715 41.1495 52.7383L43.0408 54.3732C43.9524 53.3186 45.2142 53.5373 45.6704 53.9316L47.3052 52.0403ZM41.1495 52.7383L39.4692 54.6822L41.3605 56.3171L43.0408 54.3732L41.1495 52.7383ZM29.9575 46.5158C30.3523 46.0726 30.9705 45.4485 31.7047 44.8165L30.0736 42.9219C29.2572 43.6247 28.56 44.3261 28.0908 44.8528L29.9575 46.5158ZM31.7047 44.8165C32.4234 44.1978 33.2248 43.596 34.012 43.1492C34.8203 42.6904 35.5033 42.4588 36.0109 42.4422L35.9294 39.9436C34.8311 39.9794 33.7302 40.4345 32.7779 40.975C31.8045 41.5275 30.8684 42.2377 30.0736 42.9219L31.7047 44.8165ZM39.5974 56.4453L44.4813 60.667L46.1161 58.7756L41.2323 54.554L39.5974 56.4453ZM49.9826 54.3011C48.8767 53.3467 47.8466 52.4851 47.2819 52.0206L45.6937 53.9513C46.2438 54.4038 47.2588 55.2527 48.3493 56.1937L49.9826 54.3011ZM42.7049 62.7221L39.1094 59.6137L37.4744 61.5049L41.0699 64.6133L42.7049 62.7221ZM41.5018 64.0654L38.7094 61.6516L37.0745 63.5429L39.8669 65.9567L41.5018 64.0654ZM71.3813 25.6394C71.9847 25.2807 72.8184 24.9037 73.6914 24.6705C74.5799 24.4331 75.395 24.375 76.0197 24.529L76.6179 22.1016C75.4237 21.8073 74.1443 21.9618 73.0462 22.2552C71.9326 22.5527 70.8876 23.0246 70.1041 23.4903L71.3813 25.6394ZM77.3457 22.5507L77.1362 22.3696L75.5013 24.2609L75.7108 24.442L77.3457 22.5507Z" fill="#00AE99"/>
+<path d="M52 102C79.6142 102 102 79.6142 102 52C102 24.3858 79.6142 2 52 2C24.3858 2 2 24.3858 2 52C2 79.6142 24.3858 102 52 102Z" stroke="#00AE99" stroke-width="2.5" stroke-miterlimit="10"/>
 </svg>
diff --git a/packages/website/ts/@next/icons/illustrations/descriptionCopy.svg b/packages/website/ts/@next/icons/illustrations/descriptionCopy.svg
index a8e454ffd..6c9b5f0fc 100755
--- a/packages/website/ts/@next/icons/illustrations/descriptionCopy.svg
+++ b/packages/website/ts/@next/icons/illustrations/descriptionCopy.svg
@@ -1,7 +1,7 @@
 <svg width="78" height="78" viewBox="0 0 78 78" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M38.8181 76C59.2526 76 75.8181 59.4345 75.8181 39C75.8181 18.5655 59.2526 2 38.8181 2C18.3836 2 1.8181 18.5655 1.8181 39C1.8181 59.4345 18.3836 76 38.8181 76Z" stroke="#00AE99" stroke-width="3" stroke-miterlimit="10"/>
-<path d="M48.5054 10.9474V20.0965H57.6545" stroke="#00AE99" stroke-width="3" stroke-miterlimit="10"/>
-<path d="M57.6546 20.0964V48.351H32.5619V10.9473H48.5055L57.6546 20.0964Z" stroke="#00AE99" stroke-width="3" stroke-miterlimit="10"/>
-<path d="M29.1309 67.0529V57.9038H19.9818" stroke="#00AE99" stroke-width="3" stroke-miterlimit="10"/>
-<path d="M19.9818 57.9039V29.6494H45.0745V67.053H29.1309L19.9818 57.9039Z" stroke="#00AE99" stroke-width="3" stroke-miterlimit="10"/>
-</svg>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M38.8181 3.5C19.212 3.5 3.31812 19.3939 3.31812 39C3.31812 58.6061 19.212 74.5 38.8181 74.5C58.4242 74.5 74.3181 58.6061 74.3181 39C74.3181 19.3939 58.4242 3.5 38.8181 3.5ZM0.318115 39C0.318115 17.737 17.5552 0.5 38.8181 0.5C60.0811 0.5 77.3181 17.737 77.3181 39C77.3181 60.263 60.0811 77.5 38.8181 77.5C17.5552 77.5 0.318115 60.263 0.318115 39Z" fill="#00AE99"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M47.0054 10.9473H50.0054V18.5964H57.6545V21.5964H47.0054V10.9473Z" fill="#00AE99"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M31.0619 9.44727H49.1268L59.1546 19.475V49.8509H31.0619V9.44727ZM34.0619 12.4473V46.8509H56.1546V20.7177L47.8842 12.4473H34.0619Z" fill="#00AE99"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M19.9818 56.4038H30.6309V67.0529H27.6309V59.4038H19.9818V56.4038Z" fill="#00AE99"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M18.4818 28.1494H46.5745V68.553H28.5096L18.4818 58.5253V28.1494ZM21.4818 31.1494V57.2826L29.7522 65.553H43.5745V31.1494H21.4818Z" fill="#00AE99"/>
+</svg>
\ No newline at end of file
diff --git a/packages/website/ts/@next/icons/illustrations/logo-mark.svg b/packages/website/ts/@next/icons/illustrations/logo-mark.svg
new file mode 100644
index 000000000..4e9c9d2cb
--- /dev/null
+++ b/packages/website/ts/@next/icons/illustrations/logo-mark.svg
@@ -0,0 +1,6 @@
+<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6.30134 18.9605L8.63004 16.5511L5.73498 12.6444L2.04888 7.4287C0.746637 9.65112 0 12.2381 0 15C0 19.5753 2.04888 23.6718 5.28027 26.4229L9.95919 23.1161C8.36771 22.1247 7.08565 20.6812 6.30134 18.9605Z" fill="white"/>
+<path d="M11.0395 6.30134L13.4489 8.63004L17.3556 5.73498L22.5713 2.04888C20.3489 0.746637 17.7619 0 15 0C10.4247 0 6.32825 2.04888 3.57713 5.28027L6.88386 9.95919C7.87534 8.36771 9.31883 7.08565 11.0395 6.30134Z" fill="white"/>
+<path d="M21.37 13.4489L24.265 17.3556L27.9511 22.5713C29.2534 20.3489 30 17.7619 30 15C30 10.4247 27.9511 6.32825 24.7197 3.57713L20.0408 6.88386C21.6323 7.87534 22.9144 9.31883 23.6987 11.0395L21.37 13.4489Z" fill="white"/>
+<path d="M26.4229 24.7197L23.1161 20.0408C22.1247 21.6323 20.6812 22.9144 18.9605 23.6987L16.5511 21.37L12.6444 24.265L7.4287 27.9511C9.65112 29.2534 12.2381 30 15 30C19.5753 30 23.6718 27.9511 26.4229 24.7197Z" fill="white"/>
+</svg>
diff --git a/packages/website/ts/@next/icons/illustrations/long-term-impact.svg b/packages/website/ts/@next/icons/illustrations/long-term-impact.svg
index 6e5478b7c..dbd051598 100644
--- a/packages/website/ts/@next/icons/illustrations/long-term-impact.svg
+++ b/packages/website/ts/@next/icons/illustrations/long-term-impact.svg
@@ -1,9 +1,9 @@
 <svg width="104" height="104" viewBox="0 0 104 104" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M52 3.5C25.2142 3.5 3.5 25.2142 3.5 52C3.5 78.7858 25.2142 100.5 52 100.5C78.7858 100.5 100.5 78.7858 100.5 52C100.5 25.2142 78.7858 3.5 52 3.5ZM0.5 52C0.5 23.5573 23.5573 0.5 52 0.5C80.4427 0.5 103.5 23.5573 103.5 52C103.5 80.4427 80.4427 103.5 52 103.5C23.5573 103.5 0.5 80.4427 0.5 52Z" fill="#00AE99"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M51.864 13.2959C30.6011 13.2959 13.364 30.5329 13.364 51.7959C13.364 73.0589 30.6011 90.2959 51.864 90.2959C73.127 90.2959 90.364 73.0589 90.364 51.7959C90.364 30.5329 73.127 13.2959 51.864 13.2959ZM10.364 51.7959C10.364 28.8761 28.9442 10.2959 51.864 10.2959C74.7838 10.2959 93.364 28.8761 93.364 51.7959C93.364 74.7157 74.7838 93.2959 51.864 93.2959C28.9442 93.2959 10.364 74.7157 10.364 51.7959Z" fill="#00AE99"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M36.2372 24.2815C32.0699 31.2502 29.4438 40.9744 29.4438 51.7959C29.4438 62.6173 32.0699 72.3416 36.2372 79.3103C40.4227 86.3097 45.9947 90.2959 51.8636 90.2959C57.7325 90.2959 63.3044 86.3097 67.49 79.3103C71.6573 72.3416 74.2833 62.6173 74.2833 51.7959C74.2833 40.9744 71.6573 31.2502 67.49 24.2815C63.3044 17.2821 57.7325 13.2959 51.8636 13.2959C45.9947 13.2959 40.4227 17.2821 36.2372 24.2815ZM33.6624 22.7418C38.1341 15.264 44.5219 10.2959 51.8636 10.2959C59.2052 10.2959 65.5931 15.264 70.0648 22.7418C74.5548 30.2502 77.2833 40.526 77.2833 51.7959C77.2833 63.0658 74.5548 73.3416 70.0648 80.85C65.5931 88.3278 59.2052 93.2959 51.8636 93.2959C44.5219 93.2959 38.1341 88.3278 33.6624 80.85C29.1724 73.3416 26.4438 63.0658 26.4438 51.7959C26.4438 40.526 29.1724 30.2502 33.6624 22.7418Z" fill="#00AE99"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M50.364 91.7959V11.7959H53.364V91.7959H50.364Z" fill="#00AE99"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M11.864 50.2959H91.864V53.2959H11.864V50.2959Z" fill="#00AE99"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M17.1084 70.2825H86.6201V73.2825H17.1084V70.2825Z" fill="#00AE99"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M17.1084 30.2822H86.6201V33.2822H17.1084V30.2822Z" fill="#00AE99"/>
-</svg>
+<path d="M52 102C79.6142 102 102 79.6142 102 52C102 24.3858 79.6142 2 52 2C24.3858 2 2 24.3858 2 52C2 79.6142 24.3858 102 52 102Z" stroke="#00AE99" stroke-width="2.5" stroke-miterlimit="10"/>
+<path d="M51.8639 91.7959C73.9553 91.7959 91.8639 73.8873 91.8639 51.7959C91.8639 29.7045 73.9553 11.7959 51.8639 11.7959C29.7726 11.7959 11.864 29.7045 11.864 51.7959C11.864 73.8873 29.7726 91.7959 51.8639 91.7959Z" stroke="#00AE99" stroke-width="2.5" stroke-miterlimit="10"/>
+<path d="M51.8636 91.7959C65.0741 91.7959 75.7833 73.8873 75.7833 51.7959C75.7833 29.7045 65.0741 11.7959 51.8636 11.7959C38.6531 11.7959 27.9438 29.7045 27.9438 51.7959C27.9438 73.8873 38.6531 91.7959 51.8636 91.7959Z" stroke="#00AE99" stroke-width="2.5" stroke-miterlimit="10"/>
+<path d="M51.864 11.7959V91.7959" stroke="#00AE99" stroke-width="2.5" stroke-miterlimit="10"/>
+<path d="M91.8639 51.796H11.864" stroke="#00AE99" stroke-width="2.5" stroke-miterlimit="10"/>
+<path d="M86.6201 71.7827H17.1084" stroke="#00AE99" stroke-width="2.5" stroke-miterlimit="10"/>
+<path d="M86.6201 31.7823H17.1084" stroke="#00AE99" stroke-width="2.5" stroke-miterlimit="10"/>
+</svg>
\ No newline at end of file
diff --git a/packages/website/ts/@next/icons/illustrations/right-thing.svg b/packages/website/ts/@next/icons/illustrations/right-thing.svg
index 4e360c0b4..eba2bbc36 100644
--- a/packages/website/ts/@next/icons/illustrations/right-thing.svg
+++ b/packages/website/ts/@next/icons/illustrations/right-thing.svg
@@ -1 +1,6 @@
-<svg width="104" height="104" viewBox="0 0 104 104" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M52 102c27.614 0 50-22.386 50-50S79.614 2 52 2 2 24.386 2 52s22.386 50 50 50z" stroke="#00AE99" stroke-width="3" stroke-miterlimit="10"/><path d="M92.061 24.613c-10.138-10.137-26.574-10.137-36.711 0l-3.67 3.673-3.672-3.673c-10.138-10.137-26.574-10.137-36.711 0-10.138 10.138-10.138 26.574 0 36.712l3.672 3.672 36.711 36.709 36.712-36.712 3.672-3.672c10.135-10.135 10.135-26.57-.003-36.709z" stroke="#00AE99" stroke-width="3" stroke-miterlimit="10"/><path d="M81.293 45.17c-7.435-7.434-19.489-7.434-26.92 0l-2.693 2.694-2.694-2.694c-7.434-7.434-19.488-7.434-26.922 0-7.435 7.435-7.435 19.488 0 26.923l2.693 2.693 26.92 26.923 26.922-26.923 2.694-2.693c7.434-7.435 7.434-19.488 0-26.923z" stroke="#00AE99" stroke-width="3" stroke-miterlimit="10"/><path d="M70.525 65.73c-4.732-4.731-12.403-4.731-17.13 0l-1.715 1.715-1.715-1.715c-4.731-4.731-12.403-4.731-17.13 0-4.732 4.731-4.732 12.402 0 17.13l1.714 1.715 17.13 17.131 17.131-17.13 1.715-1.715c4.731-4.732 4.731-12.4 0-17.131z" stroke="#00AE99" stroke-width="3" stroke-miterlimit="10"/></svg>
\ No newline at end of file
+<svg width="104" height="104" viewBox="0 0 104 104" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M52 102C79.6142 102 102 79.6142 102 52C102 24.3858 79.6142 2 52 2C24.3858 2 2 24.3858 2 52C2 79.6142 24.3858 102 52 102Z" stroke="#00AE99" stroke-width="2.5" stroke-miterlimit="10"/>
+<path d="M92.0611 24.6135C81.9235 14.476 65.4872 14.476 55.3496 24.6135L51.6804 28.286L48.008 24.6135C37.8704 14.476 21.4341 14.476 11.2965 24.6135C1.15897 34.7511 1.15897 51.1874 11.2965 61.325L14.969 64.9974L51.6804 101.706L88.3918 64.9942L92.0643 61.3218C102.199 51.1874 102.199 34.7511 92.0611 24.6135Z" stroke="#00AE99" stroke-width="2.5" stroke-miterlimit="10"/>
+<path d="M81.2925 45.1702C73.8581 37.7358 61.8044 37.7358 54.3731 45.1702L51.6796 47.8637L48.9861 45.1702C41.5517 37.7358 29.4979 37.7358 22.0635 45.1702C14.6291 52.6046 14.6291 64.6583 22.0635 72.0928L24.757 74.7863L51.6764 101.709L78.599 74.7863L81.2925 72.0928C88.7269 64.6583 88.7269 52.6046 81.2925 45.1702Z" stroke="#00AE99" stroke-width="2.5" stroke-miterlimit="10"/>
+<path d="M70.5248 65.73C65.7935 60.9987 58.1223 60.9987 53.3942 65.73L51.6796 67.4446L49.9649 65.73C45.2336 60.9987 37.5625 60.9987 32.8344 65.73C28.1031 70.4613 28.1031 78.1324 32.8344 82.8605L34.5491 84.5752L51.6796 101.706L68.8101 84.5752L70.5248 82.8605C75.256 78.1292 75.256 70.4613 70.5248 65.73Z" stroke="#00AE99" stroke-width="2.5" stroke-miterlimit="10"/>
+</svg>
diff --git a/packages/website/ts/@next/icons/illustrations/social-discord.svg b/packages/website/ts/@next/icons/illustrations/social-discord.svg
new file mode 100644
index 000000000..144f6e061
--- /dev/null
+++ b/packages/website/ts/@next/icons/illustrations/social-discord.svg
@@ -0,0 +1,3 @@
+<svg width="40" height="44" viewBox="0 0 40 44" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M34.8156 0C37.3489 0 39.3921 2.04861 39.5129 4.45939V43.2425L34.6895 39.1471L32.0409 36.7363L29.1509 34.2175L30.3581 38.1904H5.06478C2.5387 38.1904 0.488281 36.2715 0.488281 33.7292V4.46839C0.488281 2.05762 2.5423 0.00540532 5.07379 0.00540532H34.803L34.8156 0ZM23.7924 10.2395H23.7383L23.3744 10.5998C27.1095 11.6809 28.9166 13.3691 28.9166 13.3691C26.5095 12.1656 24.3401 11.5638 22.1708 11.3205C20.6033 11.0773 19.0357 11.2052 17.7114 11.3205H17.3511C16.5042 11.3205 14.7025 11.6809 12.2881 12.6448C11.4467 13.0106 10.9638 13.2502 10.9638 13.2502C10.9638 13.2502 12.7692 11.4449 16.7475 10.4809L16.5042 10.2377C16.5042 10.2377 13.4917 10.1224 10.2395 12.5259C10.2395 12.5259 6.98727 18.1907 6.98727 25.1744C6.98727 25.1744 8.78905 28.3094 13.7313 28.4284C13.7313 28.4284 14.452 27.468 15.1817 26.623C12.407 25.7798 11.3259 24.0933 11.3259 24.0933C11.3259 24.0933 11.5674 24.2122 11.9295 24.4536H12.0376C12.0917 24.4536 12.1169 24.4807 12.1457 24.5077V24.5185C12.1746 24.5473 12.1998 24.5726 12.2539 24.5726C12.8484 24.8176 13.443 25.059 13.9295 25.2933C14.7691 25.6572 15.8484 26.0194 17.1727 26.259C18.8483 26.5023 20.769 26.6194 22.9564 26.259C24.0374 26.0158 25.1185 25.778 26.1996 25.2951C26.9023 24.9347 27.7671 24.5744 28.7166 23.9672C28.7166 23.9672 27.6356 25.6536 24.7437 26.4969C25.3383 27.3365 26.1761 28.2986 26.1761 28.2986C31.1202 28.1905 33.0409 25.0554 33.149 25.1888C33.149 18.2159 29.8788 12.5403 29.8788 12.5403C26.9329 10.353 24.1762 10.2701 23.6897 10.2701L23.7906 10.2341L23.7924 10.2395ZM24.0951 18.1907C25.3617 18.1907 26.3834 19.2718 26.3834 20.5961C26.3834 21.9294 25.3563 23.0104 24.0951 23.0104C22.8339 23.0104 21.8068 21.9294 21.8068 20.6069C21.8105 19.2736 22.8393 18.1961 24.0951 18.1961V18.1907ZM15.9096 18.1907C17.1709 18.1907 18.1907 19.2718 18.1907 20.5961C18.1907 21.9294 17.1637 23.0104 15.9024 23.0104C14.6412 23.0104 13.6142 21.9294 13.6142 20.6069C13.6142 19.2736 14.6412 18.1961 15.9024 18.1961L15.9096 18.1907Z" fill="white"/>
+</svg>
diff --git a/packages/website/ts/@next/icons/illustrations/social-fb.svg b/packages/website/ts/@next/icons/illustrations/social-fb.svg
new file mode 100644
index 000000000..e50cf107a
--- /dev/null
+++ b/packages/website/ts/@next/icons/illustrations/social-fb.svg
@@ -0,0 +1,3 @@
+<svg width="38" height="38" viewBox="0 0 38 38" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M35.9037 0H2.09633C0.938917 0 0 0.938917 0 2.09633V35.9037C0 37.0627 0.938917 38 2.09633 38H20.2952V23.2845H15.3409V17.5513H20.2952V13.3158C20.2952 8.40908 23.294 5.73958 27.6719 5.73958C29.7698 5.73958 31.5733 5.89317 32.0989 5.96283V11.0928H29.0573C26.6823 11.0928 26.22 12.2344 26.22 13.8969V17.556H31.8947L31.1584 23.3035H26.22V38H35.9021C37.0627 38 38 37.0627 38 35.9037V2.09633C38 0.938917 37.0627 0 35.9037 0Z" fill="white"/>
+</svg>
diff --git a/packages/website/ts/@next/icons/illustrations/social-github.svg b/packages/website/ts/@next/icons/illustrations/social-github.svg
new file mode 100644
index 000000000..ef0025582
--- /dev/null
+++ b/packages/website/ts/@next/icons/illustrations/social-github.svg
@@ -0,0 +1,3 @@
+<svg width="38" height="38" viewBox="0 0 38 38" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M19 0.17334C8.5025 0.17334 0 8.68059 0 19.1733C0 27.5698 5.4435 34.69 12.9913 37.1996C13.9412 37.3785 14.2896 36.7911 14.2896 36.286C14.2896 35.8348 14.2738 34.6393 14.2658 33.056C8.98067 34.2023 7.866 30.5068 7.866 30.5068C7.0015 28.3139 5.75225 27.7281 5.75225 27.7281C4.03117 26.5501 5.88525 26.5738 5.88525 26.5738C7.79317 26.7068 8.79542 28.5308 8.79542 28.5308C10.4896 31.4363 13.243 30.5971 14.3292 30.111C14.5002 28.8823 14.9894 28.0448 15.5325 27.5698C11.3129 27.0948 6.878 25.4608 6.878 18.1806C6.878 16.1064 7.61425 14.4123 8.83342 13.0823C8.61967 12.6025 7.97842 10.6708 8.99967 8.05359C8.99967 8.05359 10.5909 7.54376 14.2247 10.0011C15.7447 9.57834 17.3597 9.36934 18.9747 9.35984C20.5897 9.36934 22.2047 9.57834 23.7247 10.0011C27.3347 7.54376 28.9259 8.05359 28.9259 8.05359C29.9472 10.6708 29.3059 12.6025 29.1159 13.0823C30.3272 14.4123 31.0634 16.1064 31.0634 18.1806C31.0634 25.4798 26.6222 27.0868 22.3947 27.5539C23.0597 28.1239 23.6772 29.2893 23.6772 31.0689C23.6772 33.6118 23.6534 35.6543 23.6534 36.2718C23.6534 36.7705 23.9859 37.3643 24.9597 37.1743C32.5613 34.6821 38 27.5571 38 19.1733C38 8.68059 29.4928 0.17334 19 0.17334Z" fill="white"/>
+</svg>
diff --git a/packages/website/ts/@next/icons/illustrations/social-newsletter.svg b/packages/website/ts/@next/icons/illustrations/social-newsletter.svg
new file mode 100644
index 000000000..572cb8ed9
--- /dev/null
+++ b/packages/website/ts/@next/icons/illustrations/social-newsletter.svg
@@ -0,0 +1,3 @@
+<svg width="38" height="30" viewBox="0 0 38 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M38 3.125V26.875C38 28.2208 36.9708 29.25 35.625 29.25H33.25V7.69608L19 17.9292L4.75 7.69608V29.25H2.375C1.02758 29.25 0 28.2208 0 26.875V3.125C0 2.45208 0.2565 1.85833 0.682417 1.434C1.10833 1.00333 1.70367 0.75 2.375 0.75H3.16667L19 12.2292L34.8333 0.75H35.625C36.2979 0.75 36.8917 1.0065 37.3176 1.434C37.7451 1.85833 38 2.45208 38 3.125Z" fill="white"/>
+</svg>
diff --git a/packages/website/ts/@next/icons/illustrations/social-reddit.svg b/packages/website/ts/@next/icons/illustrations/social-reddit.svg
new file mode 100644
index 000000000..b93510b36
--- /dev/null
+++ b/packages/website/ts/@next/icons/illustrations/social-reddit.svg
@@ -0,0 +1,3 @@
+<svg width="50" height="41" viewBox="0 0 50 41" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4.49975 24.6813C4.37725 25.2447 4.31396 25.8246 4.31396 26.4105C4.31396 33.4398 13.3012 39.1687 24.3505 39.1687C35.3957 39.1687 44.383 33.4439 44.383 26.4105C44.383 25.8511 44.3238 25.2958 44.2156 24.7588L44.1849 24.6935C44.1421 24.5812 44.1257 24.4689 44.1257 24.3566C43.5092 21.9577 41.8452 19.7813 39.4382 18.0215C39.3463 17.9888 39.2585 17.9418 39.1809 17.8785C39.1278 17.8377 39.089 17.7928 39.0441 17.7479C35.3855 15.2285 30.1508 13.6483 24.3526 13.6483C18.6054 13.6483 13.4217 15.1979 9.76307 17.6723C9.73449 17.7091 9.70386 17.7397 9.66303 17.7724C9.58341 17.8398 9.49154 17.8949 9.39762 17.9255C6.93542 19.6854 5.22861 21.8801 4.59162 24.3015C4.59162 24.4199 4.56304 24.5343 4.51608 24.6506L4.49975 24.6813ZM24.4526 35.7898C20.7899 35.7898 18.2113 34.9956 16.5658 33.3459C16.2126 32.9907 16.2126 32.4129 16.5658 32.0556C16.9251 31.7188 17.5049 31.7188 17.8622 32.0556C19.1484 33.3398 21.3024 33.9809 24.4526 33.9809C27.6008 33.9809 29.7425 33.3684 31.0246 32.0842C31.3615 31.7494 31.9433 31.7494 32.3088 32.0842C32.6457 32.4517 32.6457 33.0336 32.3088 33.4011C30.6571 35.0507 28.0928 35.8469 24.424 35.8469L24.4526 35.7898ZM17.0905 20.3285C15.2244 20.3285 13.6667 21.8903 13.6667 23.7523C13.6667 25.6102 15.2244 27.121 17.0905 27.121C18.9565 27.121 20.4612 25.6102 20.4612 23.7523C20.4612 21.8903 18.9524 20.3285 17.0905 20.3285ZM31.8576 20.3285C29.9915 20.3285 28.4317 21.8903 28.4317 23.7523C28.4317 25.6102 29.9915 27.121 31.8576 27.121C33.7236 27.121 35.2283 25.6102 35.2283 23.7523C35.2283 21.8903 33.7196 20.3285 31.8576 20.3285ZM41.1429 17.0721C43.2601 18.7728 44.8178 20.7899 45.612 23.001C46.5308 22.315 47.08 21.237 47.08 20.0427C47.08 17.997 45.416 16.3351 43.3683 16.3351C42.5537 16.3351 41.7799 16.5984 41.1429 17.0762V17.0721ZM5.53486 16.3392C3.4871 16.3392 1.82522 18.0051 1.82522 20.0508C1.82522 21.1594 2.31317 22.1905 3.14003 22.8867C3.95872 20.6837 5.53282 18.6952 7.65815 17.0149C7.04158 16.5862 6.30455 16.3432 5.5369 16.3432V16.3392H5.53486ZM24.3526 41C12.2947 41 2.48875 34.4566 2.48875 26.4187C2.48875 25.8572 2.5357 25.308 2.62758 24.767C1.00856 23.7605 0 21.9863 0 20.0427C0 16.9884 2.50508 14.5037 5.56344 14.5037C6.9395 14.5037 8.22368 15.006 9.23225 15.8961C13.0215 13.4645 18.1276 11.9333 23.7523 11.8292L27.4517 0.55124L28.2766 0.745195C28.2766 0.745195 28.3092 0.745194 28.3092 0.749278L36.931 2.77662C37.6334 1.1474 39.2544 0 41.147 0C43.6562 0 45.7019 2.0498 45.7019 4.561C45.7019 7.07629 43.6541 9.122 41.147 9.122C38.6399 9.122 36.5942 7.0722 36.5942 4.56917L28.7318 2.7072L25.7368 11.8476C31.1471 12.0619 36.0409 13.5911 39.7097 15.9737C40.7183 15.0264 42.0453 14.5058 43.452 14.5058C46.5104 14.5058 49.0011 16.9823 49.0011 20.0406C49.0011 22.0557 47.8987 23.8911 46.1878 24.8691C46.247 25.3897 46.3082 25.8777 46.3082 26.3983C46.2776 34.4382 36.4962 40.9816 24.422 40.9816L24.3526 41ZM41.051 1.82726C39.5402 1.82726 38.3153 3.05019 38.3153 4.55896C38.3153 6.06568 39.5402 7.29474 41.051 7.29474C42.5455 7.29474 43.7664 6.06976 43.7664 4.57121C43.7664 3.07469 42.5455 1.85176 41.0163 1.85176L41.051 1.82726Z" fill="white"/>
+</svg>
diff --git a/packages/website/ts/@next/icons/illustrations/social-twitter.svg b/packages/website/ts/@next/icons/illustrations/social-twitter.svg
new file mode 100644
index 000000000..bc8e2f7d7
--- /dev/null
+++ b/packages/website/ts/@next/icons/illustrations/social-twitter.svg
@@ -0,0 +1,3 @@
+<svg width="45" height="36" viewBox="0 0 45 36" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M44.8202 4.28708C43.1869 5.00497 41.4429 5.49403 39.6067 5.71733C41.478 4.58974 42.9175 2.81253 43.5985 0.692059C41.8434 1.71631 39.8983 2.46189 37.8276 2.87712C36.1741 1.10729 33.8174 0 31.2005 0C26.1863 0 22.1206 4.06562 22.1206 9.07428C22.1206 9.79402 22.2037 10.4861 22.355 11.1486C14.807 10.7924 8.11705 7.16789 3.63989 1.68862C2.85186 3.02107 2.41079 4.56944 2.41079 6.25622C2.41079 9.41201 4.01637 12.1858 6.44872 13.8153C4.95941 13.7674 3.55869 13.3577 2.33697 12.6785V12.7911C2.33697 17.1926 5.46139 20.8633 9.61928 21.6993C8.85709 21.9041 8.05246 22.0149 7.22752 22.0149C6.64804 22.0149 6.09255 21.9595 5.53705 21.8562C6.70156 25.4604 10.0493 28.0884 14.0337 28.1622C10.9333 30.5964 7.00422 32.047 2.77251 32.047C2.05276 32.047 1.33487 32.0045 0.613281 31.9233C4.65306 34.4959 9.41258 36 14.5597 36C31.2687 36 40.3947 22.1662 40.3947 10.189C40.3947 9.80325 40.3947 9.41385 40.367 9.0263C42.1405 7.75475 43.6889 6.14733 44.9069 4.32399L44.8202 4.28708Z" fill="white"/>
+</svg>
diff --git a/packages/website/ts/@next/icons/illustrations/supportForAllEthereumStandards.svg b/packages/website/ts/@next/icons/illustrations/supportForAllEthereumStandards.svg
index d75302da6..32a4d8602 100755
--- a/packages/website/ts/@next/icons/illustrations/supportForAllEthereumStandards.svg
+++ b/packages/website/ts/@next/icons/illustrations/supportForAllEthereumStandards.svg
@@ -1,21 +1,21 @@
-<svg width="150" height="150" viewBox="0 0 150 150" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M114.673 67.6531C132.527 67.6531 147 53.18 147 35.3265C147 17.4731 132.527 3 114.673 3C96.82 3 82.3469 17.4731 82.3469 35.3265C82.3469 53.18 96.82 67.6531 114.673 67.6531Z" stroke="#00AE99" stroke-width="3" stroke-miterlimit="10"/>
-<path d="M123.137 10.8173V18.8107H131.131" stroke="#00AE99" stroke-width="3" stroke-miterlimit="10"/>
-<path d="M131.131 18.8107V43.4964H109.207V10.8172H123.137L131.131 18.8107Z" stroke="#00AE99" stroke-width="3" stroke-miterlimit="10"/>
-<path d="M106.21 59.8361V51.8426H98.2163" stroke="#00AE99" stroke-width="3" stroke-miterlimit="10"/>
-<path d="M98.2163 51.8427V27.157H120.14V59.8362H106.21L98.2163 51.8427Z" stroke="#00AE99" stroke-width="3" stroke-miterlimit="10"/>
-<path d="M35.3265 68.5936C53.18 68.5936 67.6531 54.1205 67.6531 36.267C67.6531 18.4136 53.18 3.94049 35.3265 3.94049C17.4731 3.94049 3 18.4136 3 36.267C3 54.1205 17.4731 68.5936 35.3265 68.5936Z" stroke="#00AE99" stroke-width="3" stroke-miterlimit="10"/>
-<path d="M35.3265 68.5343C53.1472 68.5343 67.5937 54.0878 67.5937 36.2672C67.5937 18.4465 53.1472 4 35.3265 4C17.5058 4 3.05933 18.4465 3.05933 36.2672C3.05933 54.0878 17.5058 68.5343 35.3265 68.5343Z" stroke="#00AE99" stroke-width="3" stroke-miterlimit="10"/>
-<path d="M26.4197 49.1738V50.6738H27.9197H45.3H46.8V49.1738V44.1137V42.6137H45.3H41.0799V21.0134V19.5134H39.5799H34.0798H33.6189L33.2376 19.7722L27.0775 23.9522L26.4197 24.3986V25.1934V31.2802V34.1108L28.762 32.5214L32.5798 29.9307V42.6137H27.9197H26.4197V44.1137V49.1738Z" stroke="#00AE99" stroke-width="3"/>
-<path d="M3.05933 36.0472C9.73276 34.9471 14.8662 29.2271 14.8662 22.1869C14.8662 19.0336 13.8395 16.1735 12.0795 13.8268C6.57938 19.6202 3.13266 27.467 3.05933 36.0472Z" stroke="#00AE99" stroke-width="3" stroke-miterlimit="10"/>
-<path d="M3.05933 36.487C3.13266 45.1405 6.57938 52.9139 12.0795 58.7074C13.8395 56.3606 14.8662 53.5006 14.8662 50.3472C14.8662 43.3071 9.73276 37.5137 3.05933 36.487Z" stroke="#00AE99" stroke-width="3" stroke-miterlimit="10"/>
-<path d="M67.5937 36.0472C60.9202 34.9471 55.7868 29.2271 55.7868 22.1869C55.7868 19.0336 56.8135 16.1735 58.5735 13.8268C64.0736 19.6202 67.5203 27.467 67.5937 36.0472Z" stroke="#00AE99" stroke-width="3" stroke-miterlimit="10"/>
-<path d="M67.5937 36.4871C67.5203 45.1405 64.0736 52.914 58.5735 58.7074C56.8135 56.3607 55.7868 53.5007 55.7868 50.3473C55.7868 43.3072 60.9202 37.5137 67.5937 36.4871Z" stroke="#00AE99" stroke-width="3" stroke-miterlimit="10"/>
-<path d="M35.3265 147.94C53.18 147.94 67.6531 133.467 67.6531 115.614C67.6531 97.7605 53.18 83.2874 35.3265 83.2874C17.4731 83.2874 3 97.7605 3 115.614C3 133.467 17.4731 147.94 35.3265 147.94Z" stroke="#00AE99" stroke-width="3" stroke-miterlimit="10"/>
-<path d="M35.3265 147.94C53.18 147.94 67.6531 133.467 67.6531 115.614C67.6531 97.7605 53.18 83.2874 35.3265 83.2874C17.4731 83.2874 3 97.7605 3 115.614C3 133.467 17.4731 147.94 35.3265 147.94Z" stroke="#00AE99" stroke-width="3" stroke-miterlimit="10"/>
-<path d="M38.618 113.966V94.9818H41.3217V89.6333H29.3315V94.9818H32.0352V113.966C25.8637 115.436 21.2792 121.019 21.2792 127.602C21.2792 135.361 27.5682 141.65 35.3266 141.65C43.085 141.65 49.3739 135.361 49.3739 127.602C49.3739 120.961 44.7894 115.436 38.618 113.966Z" stroke="#00AE99" stroke-width="3" stroke-miterlimit="10"/>
-<path d="M41.3216 89.5762H29.3314V94.9247H41.3216V89.5762Z" stroke="#00AE99" stroke-width="3" stroke-miterlimit="10"/>
-<path d="M23.6302 119.728H46.9641" stroke="#00AE99" stroke-width="3" stroke-miterlimit="10"/>
-<path d="M114.673 147.94C132.527 147.94 147 133.467 147 115.614C147 97.7605 132.527 83.2874 114.673 83.2874C96.82 83.2874 82.3469 97.7605 82.3469 115.614C82.3469 133.467 96.82 147.94 114.673 147.94Z" stroke="#00AE99" stroke-width="3" stroke-miterlimit="10"/>
-<path d="M114.5 94L95 120.253H114.5L114.554 137L134 110.693H114.5V94Z" stroke="#00AE99" stroke-width="3" stroke-miterlimit="10"/>
+<svg width="200" height="200" viewBox="0 0 200 200" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M152.898 90.2041C176.703 90.2041 196 70.9066 196 47.102C196 23.2974 176.703 4 152.898 4C129.093 4 109.796 23.2974 109.796 47.102C109.796 70.9066 129.093 90.2041 152.898 90.2041Z" stroke="#00AE99" stroke-width="2.5" stroke-miterlimit="10"/>
+<path d="M164.183 14.423V25.081H174.841" stroke="#00AE99" stroke-width="2.5" stroke-miterlimit="10"/>
+<path d="M174.841 25.0809V57.9952H145.61V14.4229H164.183L174.841 25.0809Z" stroke="#00AE99" stroke-width="2.5" stroke-miterlimit="10"/>
+<path d="M141.613 79.7814V69.1234H130.955" stroke="#00AE99" stroke-width="2.5" stroke-miterlimit="10"/>
+<path d="M130.955 69.1236V36.2093H160.186V79.7815H141.613L130.955 69.1236Z" stroke="#00AE99" stroke-width="2.5" stroke-miterlimit="10"/>
+<path d="M47.102 91.4581C70.9066 91.4581 90.2041 72.1606 90.2041 48.356C90.2041 24.5514 70.9066 5.25398 47.102 5.25398C23.2974 5.25398 4 24.5514 4 48.356C4 72.1606 23.2974 91.4581 47.102 91.4581Z" stroke="#00AE99" stroke-width="2.5" stroke-miterlimit="10"/>
+<path d="M47.102 91.3791C70.8629 91.3791 90.1249 72.1171 90.1249 48.3562C90.1249 24.5953 70.8629 5.33333 47.102 5.33333C23.3411 5.33333 4.0791 24.5953 4.0791 48.3562C4.0791 72.1171 23.3411 91.3791 47.102 91.3791Z" stroke="#00AE99" stroke-width="2.5" stroke-miterlimit="10"/>
+<path d="M35.9761 65.5651V66.8151H37.2261H60.3998H61.6498V65.5651V58.8183V57.5683H60.3998H54.023V28.0178V26.7678H52.773H45.4395H45.0555L44.7377 26.9835L36.5242 32.5569L35.9761 32.9289V33.5913V41.7069V44.0658L37.928 42.7413L44.1895 38.4924V57.5683H37.2261H35.9761V58.8183V65.5651Z" stroke="#00AE99" stroke-width="2.5"/>
+<path d="M4.0791 48.0629C12.977 46.5962 19.8216 38.9694 19.8216 29.5826C19.8216 25.3781 18.4527 21.5647 16.106 18.4357C8.77251 26.1603 4.17688 36.6227 4.0791 48.0629Z" stroke="#00AE99" stroke-width="2.5" stroke-miterlimit="10"/>
+<path d="M4.0791 48.6493C4.17688 60.1873 8.77251 70.5519 16.106 78.2765C18.4527 75.1475 19.8216 71.3341 19.8216 67.1296C19.8216 57.7428 12.977 50.0182 4.0791 48.6493Z" stroke="#00AE99" stroke-width="2.5" stroke-miterlimit="10"/>
+<path d="M90.1248 48.0629C81.2269 46.5962 74.3823 38.9694 74.3823 29.5826C74.3823 25.3781 75.7512 21.5647 78.0979 18.4357C85.4314 26.1603 90.027 36.6227 90.1248 48.0629Z" stroke="#00AE99" stroke-width="2.5" stroke-miterlimit="10"/>
+<path d="M90.1248 48.6494C90.027 60.1874 85.4314 70.552 78.0979 78.2765C75.7512 75.1476 74.3823 71.3342 74.3823 67.1297C74.3823 57.7429 81.2269 50.0183 90.1248 48.6494Z" stroke="#00AE99" stroke-width="2.5" stroke-miterlimit="10"/>
+<path d="M47.102 197.254C70.9066 197.254 90.2041 177.957 90.2041 154.152C90.2041 130.347 70.9066 111.05 47.102 111.05C23.2974 111.05 4 130.347 4 154.152C4 177.957 23.2974 197.254 47.102 197.254Z" stroke="#00AE99" stroke-width="2.5" stroke-miterlimit="10"/>
+<path d="M47.102 197.254C70.9066 197.254 90.2041 177.957 90.2041 154.152C90.2041 130.347 70.9066 111.05 47.102 111.05C23.2974 111.05 4 130.347 4 154.152C4 177.957 23.2974 197.254 47.102 197.254Z" stroke="#00AE99" stroke-width="2.5" stroke-miterlimit="10"/>
+<path d="M51.4904 151.955V126.642H55.0953V119.511H39.1084V126.642H42.7133V151.955C34.4847 153.914 28.3721 161.359 28.3721 170.136C28.3721 180.481 36.7574 188.866 47.1019 188.866C57.4464 188.866 65.8317 180.481 65.8317 170.136C65.8317 161.281 59.719 153.914 51.4904 151.955Z" stroke="#00AE99" stroke-width="2.5" stroke-miterlimit="10"/>
+<path d="M55.0953 119.435H39.1084V126.566H55.0953V119.435Z" stroke="#00AE99" stroke-width="2.5" stroke-miterlimit="10"/>
+<path d="M31.5068 159.638H62.6187" stroke="#00AE99" stroke-width="2.5" stroke-miterlimit="10"/>
+<path d="M152.898 197.254C176.703 197.254 196 177.957 196 154.152C196 130.347 176.703 111.05 152.898 111.05C129.093 111.05 109.796 130.347 109.796 154.152C109.796 177.957 129.093 197.254 152.898 197.254Z" stroke="#00AE99" stroke-width="2.5" stroke-miterlimit="10"/>
+<path d="M152.667 125.333L126.667 160.338H152.667L152.738 182.667L178.667 147.591H152.667V125.333Z" stroke="#00AE99" stroke-width="2.5" stroke-miterlimit="10"/>
 </svg>
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;
diff --git a/packages/website/ts/globals.d.ts b/packages/website/ts/globals.d.ts
index c5de8a3e5..9addab335 100644
--- a/packages/website/ts/globals.d.ts
+++ b/packages/website/ts/globals.d.ts
@@ -7,6 +7,8 @@ declare module 'reach__dialog';
 declare module 'react-flickity-component';
 declare module 'react-anchor-link-smooth-scroll';
 declare module 'react-responsive';
+declare module 'react-scrollable-anchor';
+declare module 'react-headroom'
 
 declare module '*.json' {
     const json: any;
diff --git a/packages/website/ts/index.tsx b/packages/website/ts/index.tsx
index e9f629c09..3e3dced1a 100644
--- a/packages/website/ts/index.tsx
+++ b/packages/website/ts/index.tsx
@@ -25,10 +25,12 @@ import { NextAboutJobs } from 'ts/@next/pages/about/jobs';
 import { NextAboutMission } from 'ts/@next/pages/about/mission';
 import { NextAboutPress } from 'ts/@next/pages/about/press';
 import { NextAboutTeam } from 'ts/@next/pages/about/team';
+import { NextCommunity } from 'ts/@next/pages/community';
 import { NextEcosystem } from 'ts/@next/pages/ecosystem';
 import { Next0xInstant } from 'ts/@next/pages/instant';
 import { NextLanding } from 'ts/@next/pages/landing';
 import { NextLaunchKit } from 'ts/@next/pages/launch_kit';
+import { NextMarketMaker } from 'ts/@next/pages/market_maker';
 import { NextWhy } from 'ts/@next/pages/why';
 
 // Check if we've introduced an update that requires us to clear the tradeHistory local storage entries
@@ -107,6 +109,8 @@ render(
                                 <Route exact path={WebsitePaths.Instant} component={Next0xInstant as any} />
                                 <Route exact path={WebsitePaths.LaunchKit} component={NextLaunchKit as any} />
                                 <Route exact path={WebsitePaths.Ecosystem} component={NextEcosystem as any} />
+                                <Route exact path={WebsitePaths.Community} component={NextCommunity as any} />
+                                <Route exact path={WebsitePaths.MarketMaker} component={NextMarketMaker as any} />
                                 <Route exact path={WebsitePaths.AboutMission} component={NextAboutMission as any} />
                                 <Route exact path={WebsitePaths.AboutTeam} component={NextAboutTeam as any} />
                                 <Route exact path={WebsitePaths.AboutPress} component={NextAboutPress as any} />
diff --git a/packages/website/ts/types.ts b/packages/website/ts/types.ts
index 73e248713..b54ec94b6 100644
--- a/packages/website/ts/types.ts
+++ b/packages/website/ts/types.ts
@@ -358,7 +358,9 @@ export enum WebsitePaths {
     AboutJobs = '/about/jobs',
     LaunchKit = '/launch-kit',
     Instant = '/instant',
+    Community = '/community',
     Ecosystem = '/ecosystem',
+    MarketMaker = '/market-maker',
     Why = '/why',
     Whitepaper = '/pdfs/0x_white_paper.pdf',
     SmartContracts = '/docs/contracts',