1 files changed, 186 insertions, 0 deletions
diff --git a/packages/website/ts/@next/components/dropdowns/dropdown_developers.tsx b/packages/website/ts/@next/components/dropdowns/dropdown_developers.tsx
new file mode 100644
index 000000000..791eae242
--- /dev/null
+++ b/packages/website/ts/@next/components/dropdowns/dropdown_developers.tsx
@@ -0,0 +1,186 @@
+import * as _ from 'lodash';
+import * as React from 'react';
+import {Link as RouterLink} from 'react-router-dom';
+import styled, {withTheme} from 'styled-components';
+
+import {Button} from 'ts/@next/components/button';
+import {Column, FlexWrap, WrapGrid} from 'ts/@next/components/newLayout';
+import {ThemeValuesInterface} from 'ts/@next/components/siteWrap';
+import {Heading} from 'ts/@next/components/text';
+
+interface Props {
+    theme: ThemeValuesInterface;
+}
+
+const introData = [
+    {
+        label: 'Build a relayer',
+        url: 'https://0xproject.com/wiki#Build-A-Relayer',
+    },
+    {
+        label: 'Develop on Ethereum',
+        url: 'https://0xproject.com/wiki#Ethereum-Development',
+    },
+    {
+        label: 'Make & take orders',
+        url: 'https://0xproject.com/wiki#Create,-Validate,-Fill-Order',
+    },
+    {
+        label: 'Use networked liquidity',
+        url: 'https://0xproject.com/wiki#Find,-Submit,-Fill-Order-From-Relayer',
+    },
+];
+
+const docsData = [
+    {
+        label: '0x.js',
+        url: 'https://0xproject.com/docs/0x.js',
+    },
+    {
+        label: '0x Connect',
+        url: 'https://0xproject.com/docs/connect',
+    },
+    {
+        label: 'Smart Contract',
+        url: 'https://0xproject.com/docs/contracts',
+    },
+];
+
+const linksData = [
+    {
+        label: 'Wiki',
+        url: 'https://0xproject.com/wiki',
+    },
+    {
+        label: 'Github',
+        url: 'https://github.com/0xProject',
+    },
+    {
+        label: 'Whitepaper',
+        url: 'https://github.com/0xProject/0x-protocol-specification/blob/master/v2/v2-specification.md',
+    },
+];
+
+export const DropdownDevelopers: React.FunctionComponent<Props> = withTheme((props: Props) => (
+    <>
+        <DropdownWrap>
+            <div>
+                <Heading
+                    asElement="h4"
+                    size={14}
+                    color="inherit"
+                    marginBottom="15px"
+                    isMuted={0.35}
+                >
+                    Getting Started
+                </Heading>
+
+                <StyledGrid isCentered={false} isWrapped={true}>
+                    {_.map(introData, (item, index) => (
+                        <li>
+                            <RouterLink
+                                key={`introLink-${index}`}
+                                to={item.url}
+                            >
+                                {item.label}
+                            </RouterLink>
+                        </li>
+                    ))}
+                </StyledGrid>
+            </div>
+
+            <StyledWrap>
+                <Column width="calc(100% - 15px)">
+                    <Heading
+                        asElement="h4"
+                        size={14}
+                        color="inherit"
+                        marginBottom="15px"
+                        isMuted={0.35}
+                    >
+                        Popular Docs
+                    </Heading>
+
+                    <ul>
+                        {_.map(docsData, (item, index) => (
+                            <li key={`docsLink-${index}`}>
+                                <RouterLink to={item.url}>
+                                    {item.label}
+                                </RouterLink>
+                            </li>
+                        ))}
+                    </ul>
+                </Column>
+
+                <Column width="calc(100% - 15px)">
+                    <Heading
+                        asElement="h4"
+                        size={14}
+                        color="inherit"
+                        marginBottom="15px"
+                        isMuted={0.35}
+                    >
+                        Useful Links
+                    </Heading>
+
+                    <ul>
+                        {_.map(linksData, (item, index) => (
+                            <li key={`usefulLink-${index}`}>
+                                <RouterLink to={item.url}>
+                                    {item.label}
+                                </RouterLink>
+                            </li>
+                        ))}
+                    </ul>
+                </Column>
+            </StyledWrap>
+
+            <StyledLink to="https://0xproject.com/docs" bgColor={props.theme.dropdownButtonBg} isAccentColor={true} isNoBorder={true}>
+                View All Documentation
+            </StyledLink>
+        </DropdownWrap>
+    </>
+));
+
+const DropdownWrap = styled.div`
+    padding: 15px 30px 75px 30px;
+
+    a {
+        color: inherit;
+    }
+
+    li {
+        margin: 8px 0;
+    }
+`;
+
+const StyledGrid = styled(WrapGrid.withComponent('ul'))`
+    li {
+        width: 50%;
+        flex-shrink: 0;
+    }
+`;
+
+const StyledWrap = styled(FlexWrap)`
+    padding-top: 20px;
+    margin-top: 30px;
+    position: relative;
+
+    &:before {
+        content: '';
+        width: 100%;
+        height: 1px;
+        background-color: ${props => props.theme.dropdownColor};
+        opacity: 0.15;
+        position: absolute;
+        top: 0;
+        left:0;
+    }
+`;
+
+const StyledLink = styled(Button)`
+    width: 100%;
+    position: absolute;
+    bottom: 0;
+    left: 0;
+`;