WIP dropdown header

2 files changed, 76 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..a9cfed538
--- /dev/null
+++ b/packages/website/ts/@next/components/dropdowns/dropdown_developers.tsx
@@ -0,0 +1,37 @@
+import * as React from 'react';
+import styled from 'styled-components';
+
+import {Link} from 'react-router-dom';
+import {WrapGrid} from 'ts/@next/components/layout';
+import {Heading} from 'ts/@next/components/text';
+
+export const DropdownDevelopers = () => (
+    <>
+        <Wrap>
+            <Heading size="small" color="#5d5d5d">
+                Getting Started
+            </Heading>
+
+            <WrapGrid isCentered={false} isWrapped={true}>
+                <Link to="#">Build a relayer</Link>
+                <Link to="#">Develop on Ethereum</Link>
+                <Link to="#">Make & take orders</Link>
+                <Link to="#">Use networked liquidity</Link>
+            </WrapGrid>
+        </Wrap>
+
+        <Wrap>
+            asdf
+        </Wrap>
+    </>
+);
+
+const Wrap = styled.div`
+    padding: 15px 30px;
+`;
+
+const StyledLink = styled(Link)`
+    width: calc(50% - 15px);
+    flex-shrink: 0;
+    color: #000000;
+`;
diff --git a/packages/website/ts/@next/components/dropdowns/dropdown_products.tsx b/packages/website/ts/@next/components/dropdowns/dropdown_products.tsx
new file mode 100644
index 000000000..366c00a1e
--- /dev/null
+++ b/packages/website/ts/@next/components/dropdowns/dropdown_products.tsx
@@ -0,0 +1,39 @@
+import * as React from 'react';
+import styled from 'styled-components';
+import {Heading, Paragraph} from 'ts/@next/components/text';
+
+export const DropdownProducts = () => (
+    <List>
+        <li>
+            <Heading color="#000000" isNoMargin={true}>
+                0x Instant
+            </Heading>
+
+            <Paragraph color="#5d5d5d" isNoMargin={true}>
+                Simple crypto purchasing
+            </Paragraph>
+        </li>
+
+        <li>
+            <Heading color="#000000" isNoMargin={true}>
+                0x Launch Kit
+            </Heading>
+
+            <Paragraph color="#5d5d5d" isNoMargin={true}>
+                Build on the 0x protocol
+            </Paragraph>
+        </li>
+
+        <li>
+            <Heading color="#000000" isNoMargin={true}>
+                Extensions
+            </Heading>
+        </li>
+    </List>
+);
+
+const List = styled.ul`
+    li {
+        padding: 15px 30px;
+    }
+`;