From b158a6d7226fb50ecedcc07da8ef30e5e5690e46 Mon Sep 17 00:00:00 2001
From: August Skare <post@augustskare.no>
Date: Thu, 18 Oct 2018 13:28:44 +0200
Subject: initial commit

---
 packages/dev-tools-pages/ts/components/Button.tsx  |  26 +++++
 packages/dev-tools-pages/ts/components/Code.tsx    | 114 +++++++++++++++++++++
 .../dev-tools-pages/ts/components/Container.tsx    |   9 ++
 .../dev-tools-pages/ts/components/ContentBlock.tsx |  47 +++++++++
 packages/dev-tools-pages/ts/components/Footer.tsx  |  91 ++++++++++++++++
 packages/dev-tools-pages/ts/components/Header.tsx  |  59 +++++++++++
 packages/dev-tools-pages/ts/components/Hero.tsx    |  37 +++++++
 .../dev-tools-pages/ts/components/InlineCode.tsx   |   8 ++
 packages/dev-tools-pages/ts/components/List.tsx    |  33 ++++++
 packages/dev-tools-pages/ts/components/Main.tsx    |  33 ++++++
 .../dev-tools-pages/ts/components/MetaTags.tsx     |  28 +++++
 packages/dev-tools-pages/ts/components/Tabs.tsx    |  79 ++++++++++++++
 .../dev-tools-pages/ts/components/Typography.tsx   |  17 +++
 .../dev-tools-pages/ts/components/meta_tags.tsx    |  25 -----
 .../dev-tools-pages/ts/components/ui/button.tsx    |  59 -----------
 .../dev-tools-pages/ts/components/ui/container.tsx |  55 ----------
 packages/dev-tools-pages/ts/components/ui/text.tsx |  74 -------------
 .../dev-tools-pages/ts/components/withContext.tsx  |  23 +++++
 packages/dev-tools-pages/ts/context/compiler.tsx   |  14 +++
 packages/dev-tools-pages/ts/context/cov.tsx        |  14 +++
 packages/dev-tools-pages/ts/context/index.tsx      |   5 +
 packages/dev-tools-pages/ts/context/profiler.tsx   |  14 +++
 packages/dev-tools-pages/ts/context/trace.tsx      |  14 +++
 packages/dev-tools-pages/ts/globalStyles.tsx       |  76 ++++++++++++++
 packages/dev-tools-pages/ts/globals.d.ts           |  10 ++
 packages/dev-tools-pages/ts/icons/logos/0x.svg     |   1 +
 .../dev-tools-pages/ts/icons/logos/compiler.svg    |   3 +
 packages/dev-tools-pages/ts/icons/logos/cov.svg    |   3 +
 .../dev-tools-pages/ts/icons/logos/profiler.svg    |   3 +
 packages/dev-tools-pages/ts/icons/logos/trace.svg  |   1 +
 packages/dev-tools-pages/ts/index.tsx              |  42 ++++++--
 packages/dev-tools-pages/ts/pages/Base.tsx         |  28 +++++
 packages/dev-tools-pages/ts/pages/Compiler.tsx     |  53 ++++++++++
 packages/dev-tools-pages/ts/pages/Cov.tsx          |  53 ++++++++++
 packages/dev-tools-pages/ts/pages/Profiler.tsx     |  53 ++++++++++
 packages/dev-tools-pages/ts/pages/Trace.tsx        |  53 ++++++++++
 packages/dev-tools-pages/ts/pages/landing.tsx      |  27 -----
 packages/dev-tools-pages/ts/utils/utils.ts         |  32 ------
 38 files changed, 1033 insertions(+), 283 deletions(-)
 create mode 100644 packages/dev-tools-pages/ts/components/Button.tsx
 create mode 100644 packages/dev-tools-pages/ts/components/Code.tsx
 create mode 100644 packages/dev-tools-pages/ts/components/Container.tsx
 create mode 100644 packages/dev-tools-pages/ts/components/ContentBlock.tsx
 create mode 100644 packages/dev-tools-pages/ts/components/Footer.tsx
 create mode 100644 packages/dev-tools-pages/ts/components/Header.tsx
 create mode 100644 packages/dev-tools-pages/ts/components/Hero.tsx
 create mode 100644 packages/dev-tools-pages/ts/components/InlineCode.tsx
 create mode 100644 packages/dev-tools-pages/ts/components/List.tsx
 create mode 100644 packages/dev-tools-pages/ts/components/Main.tsx
 create mode 100644 packages/dev-tools-pages/ts/components/MetaTags.tsx
 create mode 100644 packages/dev-tools-pages/ts/components/Tabs.tsx
 create mode 100644 packages/dev-tools-pages/ts/components/Typography.tsx
 delete mode 100644 packages/dev-tools-pages/ts/components/meta_tags.tsx
 delete mode 100644 packages/dev-tools-pages/ts/components/ui/button.tsx
 delete mode 100644 packages/dev-tools-pages/ts/components/ui/container.tsx
 delete mode 100644 packages/dev-tools-pages/ts/components/ui/text.tsx
 create mode 100644 packages/dev-tools-pages/ts/components/withContext.tsx
 create mode 100644 packages/dev-tools-pages/ts/context/compiler.tsx
 create mode 100644 packages/dev-tools-pages/ts/context/cov.tsx
 create mode 100644 packages/dev-tools-pages/ts/context/index.tsx
 create mode 100644 packages/dev-tools-pages/ts/context/profiler.tsx
 create mode 100644 packages/dev-tools-pages/ts/context/trace.tsx
 create mode 100644 packages/dev-tools-pages/ts/globalStyles.tsx
 create mode 100644 packages/dev-tools-pages/ts/icons/logos/0x.svg
 create mode 100644 packages/dev-tools-pages/ts/icons/logos/compiler.svg
 create mode 100644 packages/dev-tools-pages/ts/icons/logos/cov.svg
 create mode 100644 packages/dev-tools-pages/ts/icons/logos/profiler.svg
 create mode 100644 packages/dev-tools-pages/ts/icons/logos/trace.svg
 create mode 100644 packages/dev-tools-pages/ts/pages/Base.tsx
 create mode 100644 packages/dev-tools-pages/ts/pages/Compiler.tsx
 create mode 100644 packages/dev-tools-pages/ts/pages/Cov.tsx
 create mode 100644 packages/dev-tools-pages/ts/pages/Profiler.tsx
 create mode 100644 packages/dev-tools-pages/ts/pages/Trace.tsx
 delete mode 100644 packages/dev-tools-pages/ts/pages/landing.tsx
 delete mode 100644 packages/dev-tools-pages/ts/utils/utils.ts

(limited to 'packages/dev-tools-pages/ts')

diff --git a/packages/dev-tools-pages/ts/components/Button.tsx b/packages/dev-tools-pages/ts/components/Button.tsx
new file mode 100644
index 000000000..e676961c8
--- /dev/null
+++ b/packages/dev-tools-pages/ts/components/Button.tsx
@@ -0,0 +1,26 @@
+import styled from 'styled-components';
+
+import { withContext, Props } from './withContext';
+
+interface ButtonProps extends Props {
+    large?: boolean;
+}
+
+const Button =
+    styled.button <
+    ButtonProps >
+    `
+  font-family: inherit;
+  font-size: ${props => (props.large ? '1.125rem' : '.875rem')};
+  font-weight: 500;
+  white-space: nowrap;
+  vertical-align: middle;
+  background-color: ${props => props.colors.secondary};
+  color: #000;
+  border: 0;
+  border-radius: 5rem;
+  padding: ${props => (props.large ? '1.125rem 2.375rem' : '.5625rem 1.25rem')};
+  display: inline-block;
+`;
+
+export default withContext(Button);
diff --git a/packages/dev-tools-pages/ts/components/Code.tsx b/packages/dev-tools-pages/ts/components/Code.tsx
new file mode 100644
index 000000000..42d4234f1
--- /dev/null
+++ b/packages/dev-tools-pages/ts/components/Code.tsx
@@ -0,0 +1,114 @@
+import * as React from 'react';
+import styled from 'styled-components';
+
+import BaseButton from './Button';
+
+interface CodeProps {
+    children: React.ReactNode;
+    language?: string;
+}
+
+interface CodeState {
+    hlCode?: string;
+    copied?: boolean;
+}
+
+const Button = styled(BaseButton)`
+    opacity: 0;
+    position: absolute;
+    top: 1rem;
+    right: 1rem;
+    transition: opacity 0.2s;
+`;
+
+const Base =
+    styled.div <
+    CodeProps >
+    `
+  color: ${props => (props.language === undefined ? '#FFF' : 'inherit')};
+  background-color: ${props => (props.language === undefined ? '#000' : '#F1F4F5')};
+  white-space: ${props => (props.language === undefined ? 'nowrap' : '')};
+  position: relative;
+  &:hover ${Button} {
+    opacity: 1;
+  }
+`;
+
+const StyledCode = styled.code`
+    padding: 1.5rem;
+    display: block;
+    overflow-y: scroll;
+    -webkit-overflow-scrolling: touch;
+`;
+
+const StyledPre = styled.pre`
+    margin: 0;
+`;
+
+const StyledCopyInput = styled.textarea`
+    height: 0;
+    position: absolute;
+    top: 0;
+    right: 0;
+    z-index: -1;
+`;
+
+const CopyInput = StyledCopyInput as any;
+
+class Code extends React.Component<CodeProps, CodeState> {
+    code = React.createRef<HTMLTextAreaElement>();
+
+    state: CodeState = {};
+
+    constructor(props: CodeProps) {
+        super(props);
+    }
+
+    async componentDidMount() {
+        const { language, children } = this.props;
+
+        if (language !== undefined) {
+            const { highlight } = await import(/* webpackChunkName: 'highlight.js' */ 'highlight.js');
+            const { value: hlCode } = highlight(language, children as string);
+            this.setState({ hlCode });
+        }
+    }
+
+    handleCopy = async () => {
+        try {
+            if ('clipboard' in navigator) {
+                await (navigator as any).clipboard.writeText(this.props.children);
+                this.setState({ copied: true });
+            } else {
+                this.code.current.focus();
+                this.code.current.select();
+                document.execCommand('copy');
+                this.setState({ copied: true });
+            }
+        } catch (error) {
+            this.setState({ copied: false });
+        }
+    };
+
+    render() {
+        const { language, children } = this.props;
+
+        return (
+            <Base language={language}>
+                <StyledPre>
+                    {this.state.hlCode !== undefined ? (
+                        <StyledCode dangerouslySetInnerHTML={{ __html: this.state.hlCode }} />
+                    ) : (
+                        <StyledCode>{this.props.children}</StyledCode>
+                    )}
+                </StyledPre>
+                <Button onClick={this.handleCopy}>Copy</Button>
+                {!('clipboard' in navigator) ? (
+                    <CopyInput readOnly aria-hidden="true" ref={this.code} value={children} />
+                ) : null}
+            </Base>
+        );
+    }
+}
+
+export default Code;
diff --git a/packages/dev-tools-pages/ts/components/Container.tsx b/packages/dev-tools-pages/ts/components/Container.tsx
new file mode 100644
index 000000000..d6df7a0b4
--- /dev/null
+++ b/packages/dev-tools-pages/ts/components/Container.tsx
@@ -0,0 +1,9 @@
+import styled from 'styled-components';
+
+const Container = styled.div`
+    max-width: 77.5rem;
+    width: calc(100% - 3.75rem);
+    margin: 0 auto;
+`;
+
+export default Container;
diff --git a/packages/dev-tools-pages/ts/components/ContentBlock.tsx b/packages/dev-tools-pages/ts/components/ContentBlock.tsx
new file mode 100644
index 000000000..56d52a150
--- /dev/null
+++ b/packages/dev-tools-pages/ts/components/ContentBlock.tsx
@@ -0,0 +1,47 @@
+import * as React from 'react';
+import styled from 'styled-components';
+
+import { Beta } from './Typography';
+
+const Base = styled.div`
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    &:not(:last-of-type) {
+        margin-bottom: 6.25rem;
+    }
+`;
+
+const Content = styled.div`
+    width: 66.693548387%;
+`;
+
+const Item = styled.div`
+    p {
+        max-width: 31.25rem;
+    }
+
+    &:not(:last-of-type) {
+        margin-bottom: 2.5rem;
+    }
+`;
+
+interface ContentBlockProps {
+    title: string;
+    children: React.ReactNode;
+}
+
+function ContentBlock(props: ContentBlockProps) {
+    const children = React.Children.map(props.children, child => {
+        return <Item>{child}</Item>;
+    });
+
+    return (
+        <Base>
+            <Beta>{props.title}</Beta>
+            <Content>{children}</Content>
+        </Base>
+    );
+}
+
+export default ContentBlock;
diff --git a/packages/dev-tools-pages/ts/components/Footer.tsx b/packages/dev-tools-pages/ts/components/Footer.tsx
new file mode 100644
index 000000000..82b2de1a3
--- /dev/null
+++ b/packages/dev-tools-pages/ts/components/Footer.tsx
@@ -0,0 +1,91 @@
+import * as React from 'react';
+import styled from 'styled-components';
+
+import { Alpha, Beta } from './Typography';
+import { withContext, Props } from './withContext';
+import Container from './Container';
+
+import MainIcon from 'ts/icons/logos/0x.svg';
+import compiler from 'ts/context/compiler';
+import cov from 'ts/context/cov';
+import profiler from 'ts/context/profiler';
+import trace from 'ts/context/trace';
+
+const tools = [trace, cov, compiler, profiler];
+
+function Footer(props: Props) {
+    const { colors } = props;
+
+    return (
+        <StyledFooter background={colors.secondary}>
+            <Container>
+                <Top>
+                    <Alpha>Other tools by 0x</Alpha>
+                    <List>
+                        {tools.map(({ title, subtitle, icon }) => (
+                            <ListItem as="li" key={title}>
+                                <Icon as={icon} />
+                                <div>
+                                    <Beta>{title}</Beta>
+                                    <p>{subtitle}</p>
+                                </div>
+                            </ListItem>
+                        ))}
+                    </List>
+                </Top>
+                <Media as="aside">
+                    <Icon as={MainIcon} />
+                    <Small>
+                        Built by 0x. 0x is an open, permissionless protocol allowing for ERC20 tokens to be traded on
+                        the Ethereum blockchain.
+                    </Small>
+                </Media>
+            </Container>
+        </StyledFooter>
+    );
+}
+
+const StyledFooter = styled.footer`
+    background-color: ${(props: { background: string }) => props.background};
+    padding-top: 6.25rem;
+    padding-bottom: 5.4375rem;
+`;
+
+const Top = styled.div`
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 9.375rem;
+`;
+
+const Media = styled.div`
+    display: flex;
+    align-items: center;
+`;
+
+const Icon = styled.div`
+    margin-right: 1.3125rem;
+`;
+
+const List = styled.ul`
+    display: flex;
+    width: 66.693548387%;
+    flex-wrap: wrap;
+    flex-direction: row;
+    margin: 0;
+    padding: 0;
+`;
+
+const ListItem = styled(Media)`
+    flex-basis: 50%;
+    margin-bottom: 3.3125rem;
+    :nth-last-of-type(-n + 2) {
+        margin-bottom: 0;
+    }
+`;
+
+const Small = styled.small`
+    font-size: 1em;
+    max-width: 37.5rem;
+`;
+
+export default withContext(Footer);
diff --git a/packages/dev-tools-pages/ts/components/Header.tsx b/packages/dev-tools-pages/ts/components/Header.tsx
new file mode 100644
index 000000000..46dce01eb
--- /dev/null
+++ b/packages/dev-tools-pages/ts/components/Header.tsx
@@ -0,0 +1,59 @@
+import * as React from 'react';
+import styled from 'styled-components';
+
+import { withContext, Props } from './withContext';
+import Container from './Container';
+import { Small } from './Typography';
+
+function Header(props: Props) {
+    const { icon, title, colors } = props;
+
+    return (
+        <Container>
+            <StyledHeader>
+                <LogoMark>
+                    <Logo as={icon} color={colors.main} />
+                    <Title>{title}</Title>
+                </LogoMark>
+
+                <Link as="a" href="#">
+                    Built by 0x
+                </Link>
+            </StyledHeader>
+        </Container>
+    );
+}
+
+const StyledHeader = styled.header`
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding-top: 3.75rem;
+    padding-bottom: 0.875rem;
+`;
+
+const LogoMark = styled.div`
+    display: flex;
+    align-items: center;
+`;
+
+const StyledLogo = styled.div`
+    color: ${props => props.color}
+    width: 1.75rem;
+    height: 1.75rem;
+`;
+
+const Title = styled.h1`
+    font-size: 1.5rem;
+    margin: 0;
+    margin-left: 0.8125rem;
+`;
+
+const StyledLink = styled(Small)`
+    color: inherit;
+`;
+
+const Link = StyledLink as any;
+const Logo = StyledLogo as any;
+
+export default withContext(Header);
diff --git a/packages/dev-tools-pages/ts/components/Hero.tsx b/packages/dev-tools-pages/ts/components/Hero.tsx
new file mode 100644
index 000000000..60f859a55
--- /dev/null
+++ b/packages/dev-tools-pages/ts/components/Hero.tsx
@@ -0,0 +1,37 @@
+import * as React from 'react';
+import styled from 'styled-components';
+
+import { withContext, Props } from './withContext';
+import Button from './Button';
+import { Beta } from './Typography';
+
+function Hero(props: Props) {
+    const { subtitle, tagline } = props;
+    return (
+        <StyledHero>
+            <Subtitle>{subtitle}</Subtitle>
+            <Tagline as="p">{tagline}</Tagline>
+            <Button as="a" href="#" large>
+                Read the Docs
+            </Button>
+        </StyledHero>
+    );
+}
+
+const StyledHero = styled.section`
+    margin: 0 auto;
+    text-align: center;
+    max-width: 590px;
+`;
+
+const Subtitle = styled.h2`
+    font-size: 3.75rem;
+    line-height: 1.16;
+    margin-bottom: 1.5rem;
+`;
+
+const Tagline = styled(Beta)`
+    margin-bottom: 2rem;
+`;
+
+export default withContext(Hero);
diff --git a/packages/dev-tools-pages/ts/components/InlineCode.tsx b/packages/dev-tools-pages/ts/components/InlineCode.tsx
new file mode 100644
index 000000000..037cfa675
--- /dev/null
+++ b/packages/dev-tools-pages/ts/components/InlineCode.tsx
@@ -0,0 +1,8 @@
+import styled from 'styled-components';
+
+const InlineCode = styled.code`
+    background-color: #eceff9;
+    padding: 0.1875rem;
+`;
+
+export default InlineCode;
diff --git a/packages/dev-tools-pages/ts/components/List.tsx b/packages/dev-tools-pages/ts/components/List.tsx
new file mode 100644
index 000000000..df1fdc53b
--- /dev/null
+++ b/packages/dev-tools-pages/ts/components/List.tsx
@@ -0,0 +1,33 @@
+import * as React from 'react';
+import styled from 'styled-components';
+
+const StyledList = styled.ul`
+    list-style-type: none;
+    margin: 0;
+    padding-inline-start: 0.2rem;
+`;
+
+const StyledItem = styled.li`
+    :before {
+        content: '';
+        border: 1px solid black;
+        width: 0.6875rem;
+        height: 0.6875rem;
+        display: inline-block;
+        transform: rotate(45deg);
+        margin-right: 1.09375rem;
+    }
+`;
+
+interface ListProps {
+    items: Array<string>;
+}
+
+function List(props: ListProps) {
+    const items = props.items;
+    const listItems = items.map((bullet, index) => <StyledItem key={index}>{bullet}</StyledItem>);
+
+    return <StyledList>{listItems}</StyledList>;
+}
+
+export default List;
diff --git a/packages/dev-tools-pages/ts/components/Main.tsx b/packages/dev-tools-pages/ts/components/Main.tsx
new file mode 100644
index 000000000..8046abc91
--- /dev/null
+++ b/packages/dev-tools-pages/ts/components/Main.tsx
@@ -0,0 +1,33 @@
+import * as React from 'react';
+import styled from 'styled-components';
+
+import { withContext, Props } from './withContext';
+
+import { Alpha } from './Typography';
+
+const StyledMain = styled.div`
+    padding-top: 6.25rem;
+    padding-bottom: 6.25rem;
+`;
+
+const Title = styled(Alpha)`
+    color: ${props => props.color};
+    margin-bottom: 6.25rem;
+`;
+
+interface MainProps extends Props {
+    children: React.ReactNode;
+}
+
+function Main(props: MainProps) {
+    return (
+        <StyledMain>
+            <Title as="h2" color={props.colors.main}>
+                Get started
+            </Title>
+            {props.children}
+        </StyledMain>
+    );
+}
+
+export default withContext(Main);
diff --git a/packages/dev-tools-pages/ts/components/MetaTags.tsx b/packages/dev-tools-pages/ts/components/MetaTags.tsx
new file mode 100644
index 000000000..9bb33f7ab
--- /dev/null
+++ b/packages/dev-tools-pages/ts/components/MetaTags.tsx
@@ -0,0 +1,28 @@
+import * as React from 'react';
+import { Helmet } from 'react-helmet';
+
+import { withContext, Props } from './withContext';
+
+interface MetaTagsProps extends Props {
+    imgSrc?: string;
+}
+
+function MetaTags(props: MetaTagsProps) {
+    const { title, imgSrc = '/images/og_image.png' } = props;
+    const description = props.tagline;
+    return (
+        <Helmet>
+            <title>{props.title}</title>
+            <meta name="description" content={description} />
+            <link rel="shortcut icon" href={`/favicons/${props.name}.ico`} />
+            <meta property="og:title" content={title} />
+            <meta property="og:description" content={description} />
+            <meta property="og:type" content="website" />
+            <meta property="og:image" content={imgSrc} />
+            <meta name="twitter:site" content="@0xproject" />
+            <meta name="twitter:image" content={imgSrc} />
+        </Helmet>
+    );
+}
+
+export default withContext(MetaTags);
diff --git a/packages/dev-tools-pages/ts/components/Tabs.tsx b/packages/dev-tools-pages/ts/components/Tabs.tsx
new file mode 100644
index 000000000..1efbe1f61
--- /dev/null
+++ b/packages/dev-tools-pages/ts/components/Tabs.tsx
@@ -0,0 +1,79 @@
+import * as React from 'react';
+import styled from 'styled-components';
+import { Tabs as ReactTabs, Tab, TabList, TabPanel } from 'react-tabs'
+
+import {withContext, Props} from './withContext';
+
+const StyledTabList = styled(TabList)`
+  text-transform: uppercase;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  overflow: hidden;  
+`;
+
+const StyledTab = styled(Tab)`
+  height: 2.5rem;
+  padding-left: 1rem;
+  padding-right: 1rem;
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  float: left;
+  &:not(:first-of-type) {
+    margin-left: .25rem;
+  }
+  &:focus, &:hover {
+    color: red;
+    outline: 0;
+  }
+`;
+
+const Root = styled.div<{primaryColor: string;}>`
+  ${StyledTab} {
+    background-color: ${props => props.primaryColor};
+  }
+  ${StyledTab}[aria-selected="true"] {
+    background-color: #F1F2F7;
+  } 
+`;
+
+interface TabsProps extends Props {
+  children: React.ReactNode;
+}
+
+function Tabs(props: TabsProps) {
+  return (
+    <Root primaryColor={props.colors.secondary}>
+      <ReactTabs>
+        <StyledTabList>
+          { React.Children.map(props.children, child => {
+            const {props} = React.cloneElement(child as React.ReactElement<any>);
+            return <StyledTab>{props.title}</StyledTab>
+          }) }
+        </StyledTabList>
+
+        { React.Children.map(props.children, child => (
+          <TabPanel>{child}</TabPanel>
+        )) }
+      </ReactTabs>
+    </Root>
+  )
+}
+
+interface TabBlockProps {
+  title: string;
+  children: React.ReactNode;
+}
+
+function TabBlock(props: TabBlockProps) {
+  return (
+    <React.Fragment>
+      {props.children}
+    </React.Fragment>
+  )
+}
+
+const ContextTabs = withContext(Tabs);
+
+export {ContextTabs as Tabs, TabBlock};
\ No newline at end of file
diff --git a/packages/dev-tools-pages/ts/components/Typography.tsx b/packages/dev-tools-pages/ts/components/Typography.tsx
new file mode 100644
index 000000000..3ce18df3b
--- /dev/null
+++ b/packages/dev-tools-pages/ts/components/Typography.tsx
@@ -0,0 +1,17 @@
+import styled from 'styled-components';
+
+const Alpha = styled.h2`
+    font-size: 1.75rem;
+    line-height: 1;
+`;
+
+const Beta = styled.h3`
+    font-size: 1.25rem;
+    line-height: 1.65;
+`;
+
+const Small = styled.p`
+    font-size: 0.875rem;
+`;
+
+export { Alpha, Beta, Small };
diff --git a/packages/dev-tools-pages/ts/components/meta_tags.tsx b/packages/dev-tools-pages/ts/components/meta_tags.tsx
deleted file mode 100644
index f6c43d23f..000000000
--- a/packages/dev-tools-pages/ts/components/meta_tags.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import * as React from 'react';
-import { Helmet } from 'react-helmet';
-
-export interface MetaTagsProps {
-    title: string;
-    description: string;
-    imgSrc?: string;
-}
-
-export const MetaTags: React.StatelessComponent<MetaTagsProps> = ({ title, description, imgSrc }) => (
-    <Helmet>
-        <title>{title}</title>
-        <meta name="description" content={description} />
-        <meta property="og:title" content={title} />
-        <meta property="og:description" content={description} />
-        <meta property="og:type" content="website" />
-        <meta property="og:image" content={imgSrc} />
-        <meta name="twitter:site" content="@0xproject" />
-        <meta name="twitter:image" content={imgSrc} />
-    </Helmet>
-);
-
-MetaTags.defaultProps = {
-    imgSrc: '/images/og_image.png',
-};
diff --git a/packages/dev-tools-pages/ts/components/ui/button.tsx b/packages/dev-tools-pages/ts/components/ui/button.tsx
deleted file mode 100644
index 754eca40e..000000000
--- a/packages/dev-tools-pages/ts/components/ui/button.tsx
+++ /dev/null
@@ -1,59 +0,0 @@
-import { darken, saturate } from 'polished';
-import * as React from 'react';
-import styled from 'styled-components';
-
-/**
- * AN EXAMPLE OF HOW TO CREATE A STYLED COMPONENT USING STYLED-COMPONENTS
- * SEE: https://www.styled-components.com/docs/basics#coming-from-css
- */
-export interface ButtonProps {
-    backgroundColor?: string;
-    borderColor?: string;
-    width?: string;
-    padding?: string;
-    type?: string;
-    isDisabled?: boolean;
-    onClick?: (event: React.MouseEvent<HTMLElement>) => void;
-    className?: string;
-}
-
-const PlainButton: React.StatelessComponent<ButtonProps> = ({ children, isDisabled, onClick, type, className }) => (
-    <button type={type} className={className} onClick={isDisabled ? undefined : onClick} disabled={isDisabled}>
-        {children}
-    </button>
-);
-
-const darkenOnHoverAmount = 0.1;
-const darkenOnActiveAmount = 0.2;
-const saturateOnFocusAmount = 0.2;
-export const Button = styled(PlainButton)`
-    cursor: ${props => (props.isDisabled ? 'default' : 'pointer')};
-    transition: background-color, opacity 0.5s ease;
-    padding: ${props => props.padding};
-    border-radius: 3px;
-    outline: none;
-    width: ${props => props.width};
-    background-color: ${props => (props.backgroundColor ? props.backgroundColor : 'none')};
-    border: ${props => (props.borderColor ? `1px solid ${props.backgroundColor}` : 'none')};
-    &:hover {
-        background-color: ${props =>
-            !props.isDisabled ? darken(darkenOnHoverAmount, props.backgroundColor) : ''} !important;
-    }
-    &:active {
-        background-color: ${props => (!props.isDisabled ? darken(darkenOnActiveAmount, props.backgroundColor) : '')};
-    }
-    &:disabled {
-        opacity: 0.5;
-    }
-    &:focus {
-        background-color: ${props => saturate(saturateOnFocusAmount, props.backgroundColor)};
-    }
-`;
-
-Button.defaultProps = {
-    backgroundColor: 'red',
-    width: 'auto',
-    isDisabled: false,
-    padding: '1em 2.2em',
-};
-Button.displayName = 'Button';
diff --git a/packages/dev-tools-pages/ts/components/ui/container.tsx b/packages/dev-tools-pages/ts/components/ui/container.tsx
deleted file mode 100644
index f2ae68b70..000000000
--- a/packages/dev-tools-pages/ts/components/ui/container.tsx
+++ /dev/null
@@ -1,55 +0,0 @@
-import * as React from 'react';
-
-type StringOrNum = string | number;
-
-export type ContainerTag = 'div' | 'span';
-
-export interface ContainerProps {
-    marginTop?: StringOrNum;
-    marginBottom?: StringOrNum;
-    marginRight?: StringOrNum;
-    marginLeft?: StringOrNum;
-    padding?: StringOrNum;
-    paddingTop?: StringOrNum;
-    paddingBottom?: StringOrNum;
-    paddingRight?: StringOrNum;
-    paddingLeft?: StringOrNum;
-    backgroundColor?: string;
-    borderRadius?: StringOrNum;
-    maxWidth?: StringOrNum;
-    maxHeight?: StringOrNum;
-    width?: StringOrNum;
-    height?: StringOrNum;
-    minWidth?: StringOrNum;
-    minHeight?: StringOrNum;
-    isHidden?: boolean;
-    className?: string;
-    position?: 'absolute' | 'fixed' | 'relative' | 'unset';
-    display?: 'inline-block' | 'block' | 'inline-flex' | 'inline';
-    top?: string;
-    left?: string;
-    right?: string;
-    bottom?: string;
-    zIndex?: number;
-    Tag?: ContainerTag;
-    cursor?: string;
-    id?: string;
-    onClick?: (event: React.MouseEvent<HTMLElement>) => void;
-    overflowX?: 'scroll' | 'hidden' | 'auto' | 'visible';
-}
-
-export const Container: React.StatelessComponent<ContainerProps> = props => {
-    const { children, className, Tag, isHidden, id, onClick, ...style } = props;
-    const visibility = isHidden ? 'hidden' : undefined;
-    return (
-        <Tag id={id} style={{ ...style, visibility }} className={className} onClick={onClick}>
-            {children}
-        </Tag>
-    );
-};
-
-Container.defaultProps = {
-    Tag: 'div',
-};
-
-Container.displayName = 'Container';
diff --git a/packages/dev-tools-pages/ts/components/ui/text.tsx b/packages/dev-tools-pages/ts/components/ui/text.tsx
deleted file mode 100644
index 8e314beae..000000000
--- a/packages/dev-tools-pages/ts/components/ui/text.tsx
+++ /dev/null
@@ -1,74 +0,0 @@
-import { colors } from '@0xproject/react-shared';
-import { darken } from 'polished';
-import * as React from 'react';
-import styled from 'styled-components';
-
-export type TextTag = 'p' | 'div' | 'span' | 'label' | 'h1' | 'h2' | 'h3' | 'h4' | 'i';
-
-export interface TextProps {
-    className?: string;
-    Tag?: TextTag;
-    fontSize?: string;
-    fontFamily?: string;
-    fontStyle?: string;
-    fontColor?: string;
-    lineHeight?: string;
-    minHeight?: string;
-    center?: boolean;
-    fontWeight?: number | string;
-    textDecorationLine?: string;
-    onClick?: (event: React.MouseEvent<HTMLElement>) => void;
-    hoverColor?: string;
-    noWrap?: boolean;
-    display?: string;
-}
-
-const PlainText: React.StatelessComponent<TextProps> = ({ children, className, onClick, Tag }) => (
-    <Tag className={className} onClick={onClick}>
-        {children}
-    </Tag>
-);
-
-export const Text = styled(PlainText)`
-    font-family: ${props => props.fontFamily};
-    font-style: ${props => props.fontStyle};
-    font-weight: ${props => props.fontWeight};
-    font-size: ${props => props.fontSize};
-    text-decoration-line: ${props => props.textDecorationLine};
-    ${props => (props.lineHeight ? `line-height: ${props.lineHeight}` : '')};
-    ${props => (props.center ? 'text-align: center' : '')};
-    color: ${props => props.fontColor};
-    ${props => (props.minHeight ? `min-height: ${props.minHeight}` : '')};
-    ${props => (props.onClick ? 'cursor: pointer' : '')};
-    transition: color 0.5s ease;
-    ${props => (props.noWrap ? 'white-space: nowrap' : '')};
-    ${props => (props.display ? `display: ${props.display}` : '')};
-    &:hover {
-        ${props => (props.onClick ? `color: ${props.hoverColor || darken(0.3, props.fontColor || 'black')}` : '')};
-    }
-`;
-
-Text.defaultProps = {
-    fontFamily: 'Roboto',
-    fontStyle: 'normal',
-    fontWeight: 400,
-    fontColor: colors.black,
-    fontSize: '15px',
-    lineHeight: '1.5em',
-    textDecorationLine: 'none',
-    Tag: 'div',
-    noWrap: false,
-};
-
-Text.displayName = 'Text';
-
-export const Title: React.StatelessComponent<TextProps> = props => <Text {...props} />;
-
-Title.defaultProps = {
-    Tag: 'h2',
-    fontSize: '20px',
-    fontWeight: 600,
-    fontColor: colors.black,
-};
-
-Title.displayName = 'Title';
diff --git a/packages/dev-tools-pages/ts/components/withContext.tsx b/packages/dev-tools-pages/ts/components/withContext.tsx
new file mode 100644
index 000000000..d38c0afe4
--- /dev/null
+++ b/packages/dev-tools-pages/ts/components/withContext.tsx
@@ -0,0 +1,23 @@
+import * as React from 'react';
+
+import ThemeContext from '../context';
+
+interface Props {
+    title?: string;
+    name?: string;
+    subtitle?: string;
+    tagline?: string;
+    icon?: React.ReactNode;
+    colors?: any;
+}
+
+function withContext(WrappedComponent: any) {
+    function ComponentWithContext(props: any) {
+        return <ThemeContext.Consumer>{data => <WrappedComponent {...data} {...props} />}</ThemeContext.Consumer>;
+    }
+
+    return ComponentWithContext;
+}
+
+export default withContext;
+export { withContext, Props };
diff --git a/packages/dev-tools-pages/ts/context/compiler.tsx b/packages/dev-tools-pages/ts/context/compiler.tsx
new file mode 100644
index 000000000..63a051481
--- /dev/null
+++ b/packages/dev-tools-pages/ts/context/compiler.tsx
@@ -0,0 +1,14 @@
+import Icon from 'ts/icons/logos/compiler.svg';
+
+export default {
+    title: 'sol-compiler',
+    name: 'compiler',
+    subtitle: 'Solidity compilation that just works',
+    tagline: 'Seamlessly compile an entire solidity project and generate customisable artifacts',
+    icon: Icon,
+    colors: {
+        main: '#1EADCD',
+        secondary: '#D1F4FC',
+        link: '#D1F4FC',
+    },
+};
diff --git a/packages/dev-tools-pages/ts/context/cov.tsx b/packages/dev-tools-pages/ts/context/cov.tsx
new file mode 100644
index 000000000..4bf2b6ba7
--- /dev/null
+++ b/packages/dev-tools-pages/ts/context/cov.tsx
@@ -0,0 +1,14 @@
+import Icon from 'ts/icons/logos/cov.svg';
+
+export default {
+    title: 'sol-cov',
+    name: 'cov',
+    subtitle: 'Solidity code coverage',
+    tagline: "Don't get caught with your pants down",
+    icon: Icon,
+    colors: {
+        main: '#BB9200',
+        secondary: '#F1DB8D',
+        link: '#D7AE1B',
+    },
+};
diff --git a/packages/dev-tools-pages/ts/context/index.tsx b/packages/dev-tools-pages/ts/context/index.tsx
new file mode 100644
index 000000000..54556a3fd
--- /dev/null
+++ b/packages/dev-tools-pages/ts/context/index.tsx
@@ -0,0 +1,5 @@
+import { createContext } from 'react';
+
+const ThemeContext = createContext({});
+
+export default ThemeContext;
diff --git a/packages/dev-tools-pages/ts/context/profiler.tsx b/packages/dev-tools-pages/ts/context/profiler.tsx
new file mode 100644
index 000000000..d8982c56f
--- /dev/null
+++ b/packages/dev-tools-pages/ts/context/profiler.tsx
@@ -0,0 +1,14 @@
+import Icon from 'ts/icons/logos/profiler.svg';
+
+export default {
+    title: 'sol-profiler',
+    name: 'profiler',
+    subtitle: 'Gas profiling for Solidity',
+    tagline: "Implement data-guided optimizations by profiling your contrat's gas usage",
+    icon: Icon,
+    colors: {
+        main: '#FF7144',
+        secondary: '#FED7CB',
+        link: '#EB8666',
+    },
+};
diff --git a/packages/dev-tools-pages/ts/context/trace.tsx b/packages/dev-tools-pages/ts/context/trace.tsx
new file mode 100644
index 000000000..22289091d
--- /dev/null
+++ b/packages/dev-tools-pages/ts/context/trace.tsx
@@ -0,0 +1,14 @@
+import Icon from 'ts/icons/logos/trace.svg';
+
+export default {
+    title: 'sol-trace',
+    name: 'trace',
+    subtitle: 'Human-readable stack traces',
+    tagline: 'Immediately locate Solidity errors and rapidly debug failed transactions',
+    icon: Icon,
+    colors: {
+        main: '#5C80FF',
+        secondary: '#CDD8FF',
+        link: '#557AFF',
+    },
+};
diff --git a/packages/dev-tools-pages/ts/globalStyles.tsx b/packages/dev-tools-pages/ts/globalStyles.tsx
new file mode 100644
index 000000000..1a2a1769a
--- /dev/null
+++ b/packages/dev-tools-pages/ts/globalStyles.tsx
@@ -0,0 +1,76 @@
+import { createGlobalStyle } from 'styled-components';
+import styledNormalize from 'styled-normalize';
+import hljsStyles from 'highlight.js/styles/github-gist.css';
+
+import { withContext } from 'ts/components/withContext';
+
+const BaseStyles = createGlobalStyle`
+  ${styledNormalize}
+  ${hljsStyles}
+
+  @font-face {
+    font-family: "Maison Neue";
+    src: url("/fonts/MaisonNeue-Book-subset.woff") format("woff");
+    font-weight: 300;
+    font-display: swap;
+    unicode-range: U+20-7E;
+  }
+  @font-face {
+    font-family: "Maison Neue";
+    src: url("/fonts/MaisonNeue-Bold-subset.woff") format("woff");
+    font-weight: 500;
+    font-display: swap;
+    unicode-range: U+20-7E;
+  }
+  @font-face {
+    font-family: "Maison Neue Mono";
+    src: url("/fonts/MaisonNeue-Mono-subset.woff") format("woff");
+    font-weight: 300;
+    font-display: optional;
+    unicode-range: U+20-7E;
+  }
+
+  html {
+    font-size: 100%;
+    box-sizing: border-box;
+  }
+  
+  *, *::before, *::after {
+    box-sizing: inherit;
+  }
+  
+  body {
+    font-family: "Maison Neue", system-ui, sans-serif;
+    font-weight: 300;
+    font-size: 1rem;
+    line-height: 1.8;
+  }
+
+  a {
+  color: ${(props: any) => props.colors.link};
+    text-decoration: none; 
+
+    &:hover {
+      color: red; //what should this be?
+    }
+  }
+  
+  h1, h2, h3, h4 {
+    font-weight: 500;
+    margin: 0;
+  }
+
+  p {
+    margin-top: 0;
+    margin-bottom: 1em;
+    &:not([class]):last-of-type {
+      margin-bottom: 0;
+    }
+  }
+
+  code {
+    font-family: "Maison Neue Mono", monospace;
+  }
+`;
+
+export default withContext(BaseStyles);
diff --git a/packages/dev-tools-pages/ts/globals.d.ts b/packages/dev-tools-pages/ts/globals.d.ts
index d0890161c..da026a198 100644
--- a/packages/dev-tools-pages/ts/globals.d.ts
+++ b/packages/dev-tools-pages/ts/globals.d.ts
@@ -7,3 +7,13 @@ declare module '*.json' {
     export default json;
     /* tslint:enable */
 }
+
+declare module '*.css' {
+    const css: any;
+    export default css;
+}
+
+declare module '*.svg' {
+    const svg: any;
+    export default svg;
+}
diff --git a/packages/dev-tools-pages/ts/icons/logos/0x.svg b/packages/dev-tools-pages/ts/icons/logos/0x.svg
new file mode 100644
index 000000000..1856389db
--- /dev/null
+++ b/packages/dev-tools-pages/ts/icons/logos/0x.svg
@@ -0,0 +1 @@
+<svg width="37" height="37" viewBox="0 0 37 37" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path d="M9.20465 34.4904c2.38415 1.3926 5.13725 2.2736 8.08905 2.4725 4.0871.2558 7.9188-.8242 11.1261-2.8704 1.5894-1.0232 3.0085-2.2737 4.229-3.7231-.9934-1.3926-2.0719-2.842-3.2072-4.3199-.3123-.3979-.6245-.7958-.9367-1.1937-1.1921 1.9042-2.9518 3.4389-4.9953 4.4052l-3.1789-3.0978-11.12605 8.3272zM2.44955 9.30988C1.08718 11.6972.235696 14.3971.0370167 17.3244-.218428 21.417.860116 25.2821 2.90368 28.4652c1.02177 1.5916 2.27062 3.0126 3.71814 4.2347 1.39075-.9947 2.83827-2.0747 4.31418-3.2115.3974-.3127.7947-.6253 1.1921-.9379-1.9017-1.2221-3.43434-2.9841-4.39936-5.0304l3.12206-3.1831L2.44955 9.30988zM27.7954 2.51741C25.4112 1.12481 22.6581.243776 19.7063.0448336 15.6192-.23937 11.7591.840605 8.55184 2.91529 6.96241 3.93843 5.54327 5.18893 4.32281 6.63837c.9934 1.3926 2.07194 2.84204 3.20725 4.31993.31221.3979.62442.7957.93663 1.1936 1.22046-1.9041 2.95181-3.43884 5.02371-4.40514l2.9802 2.87044 11.3248-8.09979zM34.5788 27.6126c1.334-2.3589 2.1855-5.0304 2.3842-7.9293.2554-4.0925-.8231-7.9293-2.8667-11.14077-1.0218-1.59154-2.2706-3.01256-3.7181-4.23464-1.3908.99472-2.8383 2.07469-4.3142 3.21151-.3974.31262-.7947.62525-1.1921.93787 1.9301 1.22208 3.4627 2.98413 4.4277 5.03043l.0284.0568-3.0085 3.1263 8.2593 10.9418z"/></svg>
\ No newline at end of file
diff --git a/packages/dev-tools-pages/ts/icons/logos/compiler.svg b/packages/dev-tools-pages/ts/icons/logos/compiler.svg
new file mode 100644
index 000000000..43c338f29
--- /dev/null
+++ b/packages/dev-tools-pages/ts/icons/logos/compiler.svg
@@ -0,0 +1,3 @@
+<svg width="28" height="28" viewBox="0 0 28 28" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M0 28V15V0H15H28V15V28H15H0ZM26 13V2H15V13H26ZM15 15H26V26H15V15ZM13 13V2H2V13H13ZM2 15H13V26H2V15Z" />
+</svg>
diff --git a/packages/dev-tools-pages/ts/icons/logos/cov.svg b/packages/dev-tools-pages/ts/icons/logos/cov.svg
new file mode 100644
index 000000000..2c4dffb83
--- /dev/null
+++ b/packages/dev-tools-pages/ts/icons/logos/cov.svg
@@ -0,0 +1,3 @@
+<svg width="28" height="28" viewBox="0 0 28 28" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M0 0H28V28H0V0ZM2 2V26H26V16H12V2H2ZM14 2V14H26V2H14Z"/>
+</svg>
diff --git a/packages/dev-tools-pages/ts/icons/logos/profiler.svg b/packages/dev-tools-pages/ts/icons/logos/profiler.svg
new file mode 100644
index 000000000..c3ea61294
--- /dev/null
+++ b/packages/dev-tools-pages/ts/icons/logos/profiler.svg
@@ -0,0 +1,3 @@
+<svg width="28" height="28" viewBox="0 0 28 28" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M2 2H26V9H2V2ZM2 11V26H26V11H2ZM0 0H2H26H28V2V26V28H26H2H0V26V2V0Z" />
+</svg>
diff --git a/packages/dev-tools-pages/ts/icons/logos/trace.svg b/packages/dev-tools-pages/ts/icons/logos/trace.svg
new file mode 100644
index 000000000..c207b24cb
--- /dev/null
+++ b/packages/dev-tools-pages/ts/icons/logos/trace.svg
@@ -0,0 +1 @@
+<svg width="28" height="28" viewBox="0 0 28 28" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M10 15H2V2h24v13H10zm0 2H2v9h8v-9zm2 9h14v-9H12v9zm-2 2H0V0h28v28H10z"/></svg>
\ No newline at end of file
diff --git a/packages/dev-tools-pages/ts/index.tsx b/packages/dev-tools-pages/ts/index.tsx
index 4591c6d76..b185e270a 100644
--- a/packages/dev-tools-pages/ts/index.tsx
+++ b/packages/dev-tools-pages/ts/index.tsx
@@ -1,17 +1,37 @@
 import * as React from 'react';
 import { render } from 'react-dom';
-import { MetaTags } from 'ts/components/meta_tags';
-import { Landing } from 'ts/pages/landing';
+import { Router, Link } from '@reach/router';
 
-import 'basscss/css/basscss.css';
+import Trace from 'ts/pages/Trace';
+import Compiler from 'ts/pages/Compiler';
+import Cov from 'ts/pages/Cov';
+import Profiler from 'ts/pages/Profiler';
 
-const DOCUMENT_TITLE = '';
-const DOCUMENT_DESCRIPTION = '';
+const Index = (props: any) => (
+    <ul>
+        <li>
+            <Link to="/trace">sol-trace</Link>
+        </li>
+        <li>
+            <Link to="/compiler">sol-compiler</Link>
+        </li>
+        <li>
+            <Link to="/cov">sol-cov</Link>
+        </li>
+        <li>
+            <Link to="/profiler">sol-profiler</Link>
+        </li>
+    </ul>
+);
 
-render(
-    <div>
-        <MetaTags title={DOCUMENT_TITLE} description={DOCUMENT_DESCRIPTION} />
-        <Landing />
-    </div>,
-    document.getElementById('app'),
+const App = () => (
+    <Router>
+        <Trace path="/trace" />
+        <Compiler path="/compiler" />
+        <Cov path="/cov" />
+        <Profiler path="/profiler" />
+        <Index default />
+    </Router>
 );
+
+render(<App />, document.getElementById('app'));
diff --git a/packages/dev-tools-pages/ts/pages/Base.tsx b/packages/dev-tools-pages/ts/pages/Base.tsx
new file mode 100644
index 000000000..7bb578611
--- /dev/null
+++ b/packages/dev-tools-pages/ts/pages/Base.tsx
@@ -0,0 +1,28 @@
+import * as React from 'react';
+
+import ThemeContext from 'ts/context';
+import GlobalStyles from 'ts/globalStyles';
+import MetaTags from 'ts/components/MetaTags';
+import Header from 'ts/components/Header';
+import Hero from 'ts/components/Hero';
+import Footer from 'ts/components/Footer';
+
+interface BaseProps {
+    context: any;
+    children: React.ReactNode;
+}
+
+function Base(props: BaseProps) {
+    return (
+        <ThemeContext.Provider value={props.context}>
+            <MetaTags />
+            <GlobalStyles />
+            <Header />
+            <Hero />
+            {props.children}
+            <Footer />
+        </ThemeContext.Provider>
+    );
+}
+
+export default Base;
diff --git a/packages/dev-tools-pages/ts/pages/Compiler.tsx b/packages/dev-tools-pages/ts/pages/Compiler.tsx
new file mode 100644
index 000000000..2a91c465f
--- /dev/null
+++ b/packages/dev-tools-pages/ts/pages/Compiler.tsx
@@ -0,0 +1,53 @@
+import * as React from 'react';
+
+import context from 'ts/context/compiler';
+import Base from './Base';
+import Container from 'ts/components/Container';
+import Main from 'ts/components/Main';
+import ContentBlock from 'ts/components/ContentBlock';
+import { Tabs, TabBlock } from 'ts/components/Tabs';
+import Code from 'ts/components/Code';
+import InlineCode from 'ts/components/InlineCode';
+import List from 'ts/components/List';
+
+function Compiler(props: any) {
+    return (
+        <Base context={context}>
+            <Container>
+                <Main>
+                    <ContentBlock title="Required steps">
+                        <List items={['Step 1', 'Step 2']} />
+                    </ContentBlock>
+                    <ContentBlock title="Prerequisites">
+                        <Code>npm install @0x/sol-trace --save</Code>
+                        <p>
+                            Sol-trace is a subprovider that needs to be prepended to your{' '}
+                            <a href="#">provider engine</a>. Depending on your project setup, you will need to use a
+                            specific ArtifactAdapter. Sol-trace ships with the{' '}
+                            <InlineCode>SolCompilerArtifactAdapter</InlineCode> for use with Sol-compiler and{' '}
+                            <InlineCode>TruffleArtifactAdapter</InlineCode> for use with the Truffle framework. You can
+                            also write your own and support any artifact format.
+                        </p>
+                    </ContentBlock>
+
+                    <ContentBlock title="Installation">
+                        <Tabs>
+                            <TabBlock title="Sol-compiler">
+                                <Code language="js">
+                                    {`import { SolCompilerArtifactAdapter } from '@0x/sol-trace';
+
+// Both artifactsDir and contractsDir are optional and will be fetched from compiler.json if not passed in
+const artifactAdapter = new SolCompilerArtifactAdapter(artifactsDir, contractsDir);`}
+                                </Code>
+                            </TabBlock>
+                            <TabBlock title="Truffle">Truffle</TabBlock>
+                            <TabBlock title="Custom">Custom</TabBlock>
+                        </Tabs>
+                    </ContentBlock>
+                </Main>
+            </Container>
+        </Base>
+    );
+}
+
+export default Compiler;
diff --git a/packages/dev-tools-pages/ts/pages/Cov.tsx b/packages/dev-tools-pages/ts/pages/Cov.tsx
new file mode 100644
index 000000000..a0acfb869
--- /dev/null
+++ b/packages/dev-tools-pages/ts/pages/Cov.tsx
@@ -0,0 +1,53 @@
+import * as React from 'react';
+
+import context from 'ts/context/cov';
+import Base from './Base';
+import Container from 'ts/components/Container';
+import Main from 'ts/components/Main';
+import ContentBlock from 'ts/components/ContentBlock';
+import { Tabs, TabBlock } from 'ts/components/Tabs';
+import Code from 'ts/components/Code';
+import InlineCode from 'ts/components/InlineCode';
+import List from 'ts/components/List';
+
+function Cov(props: any) {
+    return (
+        <Base context={context}>
+            <Container>
+                <Main>
+                    <ContentBlock title="Required steps">
+                        <List items={['Step 1', 'Step 2']} />
+                    </ContentBlock>
+                    <ContentBlock title="Prerequisites">
+                        <Code>npm install @0x/sol-trace --save</Code>
+                        <p>
+                            Sol-trace is a subprovider that needs to be prepended to your{' '}
+                            <a href="#">provider engine</a>. Depending on your project setup, you will need to use a
+                            specific ArtifactAdapter. Sol-trace ships with the{' '}
+                            <InlineCode>SolCompilerArtifactAdapter</InlineCode> for use with Sol-compiler and{' '}
+                            <InlineCode>TruffleArtifactAdapter</InlineCode> for use with the Truffle framework. You can
+                            also write your own and support any artifact format.
+                        </p>
+                    </ContentBlock>
+
+                    <ContentBlock title="Installation">
+                        <Tabs>
+                            <TabBlock title="Sol-compiler">
+                                <Code language="js">
+                                    {`import { SolCompilerArtifactAdapter } from '@0x/sol-trace';
+
+// Both artifactsDir and contractsDir are optional and will be fetched from compiler.json if not passed in
+const artifactAdapter = new SolCompilerArtifactAdapter(artifactsDir, contractsDir);`}
+                                </Code>
+                            </TabBlock>
+                            <TabBlock title="Truffle">Truffle</TabBlock>
+                            <TabBlock title="Custom">Custom</TabBlock>
+                        </Tabs>
+                    </ContentBlock>
+                </Main>
+            </Container>
+        </Base>
+    );
+}
+
+export default Cov;
diff --git a/packages/dev-tools-pages/ts/pages/Profiler.tsx b/packages/dev-tools-pages/ts/pages/Profiler.tsx
new file mode 100644
index 000000000..ad2219c5e
--- /dev/null
+++ b/packages/dev-tools-pages/ts/pages/Profiler.tsx
@@ -0,0 +1,53 @@
+import * as React from 'react';
+
+import context from 'ts/context/profiler';
+import Base from './Base';
+import Container from 'ts/components/Container';
+import Main from 'ts/components/Main';
+import ContentBlock from 'ts/components/ContentBlock';
+import { Tabs, TabBlock } from 'ts/components/Tabs';
+import Code from 'ts/components/Code';
+import InlineCode from 'ts/components/InlineCode';
+import List from 'ts/components/List';
+
+function Profiler(props: any) {
+    return (
+        <Base context={context}>
+            <Container>
+                <Main>
+                    <ContentBlock title="Required steps">
+                        <List items={['Step 1', 'Step 2']} />
+                    </ContentBlock>
+                    <ContentBlock title="Prerequisites">
+                        <Code>npm install @0x/sol-trace --save</Code>
+                        <p>
+                            Sol-trace is a subprovider that needs to be prepended to your{' '}
+                            <a href="#">provider engine</a>. Depending on your project setup, you will need to use a
+                            specific ArtifactAdapter. Sol-trace ships with the{' '}
+                            <InlineCode>SolCompilerArtifactAdapter</InlineCode> for use with Sol-compiler and{' '}
+                            <InlineCode>TruffleArtifactAdapter</InlineCode> for use with the Truffle framework. You can
+                            also write your own and support any artifact format.
+                        </p>
+                    </ContentBlock>
+
+                    <ContentBlock title="Installation">
+                        <Tabs>
+                            <TabBlock title="Sol-compiler">
+                                <Code language="js">
+                                    {`import { SolCompilerArtifactAdapter } from '@0x/sol-trace';
+
+// Both artifactsDir and contractsDir are optional and will be fetched from compiler.json if not passed in
+const artifactAdapter = new SolCompilerArtifactAdapter(artifactsDir, contractsDir);`}
+                                </Code>
+                            </TabBlock>
+                            <TabBlock title="Truffle">Truffle</TabBlock>
+                            <TabBlock title="Custom">Custom</TabBlock>
+                        </Tabs>
+                    </ContentBlock>
+                </Main>
+            </Container>
+        </Base>
+    );
+}
+
+export default Profiler;
diff --git a/packages/dev-tools-pages/ts/pages/Trace.tsx b/packages/dev-tools-pages/ts/pages/Trace.tsx
new file mode 100644
index 000000000..797ec6f49
--- /dev/null
+++ b/packages/dev-tools-pages/ts/pages/Trace.tsx
@@ -0,0 +1,53 @@
+import * as React from 'react';
+
+import context from 'ts/context/trace';
+import Base from './Base';
+import Container from 'ts/components/Container';
+import Main from 'ts/components/Main';
+import ContentBlock from 'ts/components/ContentBlock';
+import { Tabs, TabBlock } from 'ts/components/Tabs';
+import Code from 'ts/components/Code';
+import InlineCode from 'ts/components/InlineCode';
+import List from 'ts/components/List';
+
+function Trace(props: any) {
+    return (
+        <Base context={context}>
+            <Container>
+                <Main>
+                    <ContentBlock title="Required steps">
+                        <List items={['Step 1', 'Step 2']} />
+                    </ContentBlock>
+                    <ContentBlock title="Prerequisites">
+                        <Code>npm install @0x/sol-trace --save</Code>
+                        <p>
+                            Sol-trace is a subprovider that needs to be prepended to your{' '}
+                            <a href="#">provider engine</a>. Depending on your project setup, you will need to use a
+                            specific ArtifactAdapter. Sol-trace ships with the{' '}
+                            <InlineCode>SolCompilerArtifactAdapter</InlineCode> for use with Sol-compiler and{' '}
+                            <InlineCode>TruffleArtifactAdapter</InlineCode> for use with the Truffle framework. You can
+                            also write your own and support any artifact format.
+                        </p>
+                    </ContentBlock>
+
+                    <ContentBlock title="Installation">
+                        <Tabs>
+                            <TabBlock title="Sol-compiler">
+                                <Code language="js">
+                                    {`import { SolCompilerArtifactAdapter } from '@0x/sol-trace';
+
+// Both artifactsDir and contractsDir are optional and will be fetched from compiler.json if not passed in
+const artifactAdapter = new SolCompilerArtifactAdapter(artifactsDir, contractsDir);`}
+                                </Code>
+                            </TabBlock>
+                            <TabBlock title="Truffle">Truffle</TabBlock>
+                            <TabBlock title="Custom">Custom</TabBlock>
+                        </Tabs>
+                    </ContentBlock>
+                </Main>
+            </Container>
+        </Base>
+    );
+}
+
+export default Trace;
diff --git a/packages/dev-tools-pages/ts/pages/landing.tsx b/packages/dev-tools-pages/ts/pages/landing.tsx
deleted file mode 100644
index a70a9de46..000000000
--- a/packages/dev-tools-pages/ts/pages/landing.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import * as _ from 'lodash';
-import * as React from 'react';
-
-import { Button } from '../components/ui/button';
-import { Container } from '../components/ui/container';
-import { Text } from '../components/ui/text';
-
-interface LandingProps {}
-
-interface LandingState {}
-
-export class Landing extends React.Component<LandingProps, LandingState> {
-    constructor(props: LandingProps) {
-        super(props);
-    }
-    public render(): React.ReactNode {
-        return (
-            <Container id="landing" className="clearfix">
-                <Container className="mx-auto p4" width="200px">
-                    <Button>
-                        <Text fontColor="white">Click me!</Text>
-                    </Button>
-                </Container>
-            </Container>
-        );
-    }
-}
diff --git a/packages/dev-tools-pages/ts/utils/utils.ts b/packages/dev-tools-pages/ts/utils/utils.ts
deleted file mode 100644
index b274706a2..000000000
--- a/packages/dev-tools-pages/ts/utils/utils.ts
+++ /dev/null
@@ -1,32 +0,0 @@
-import * as bowser from 'bowser';
-import * as _ from 'lodash';
-
-export const utils = {
-    getColSize(items: number): number {
-        const bassCssGridSize = 12; // Source: http://basscss.com/#basscss-grid
-        const colSize = bassCssGridSize / items;
-        if (!_.isInteger(colSize)) {
-            throw new Error(`Number of cols must be divisible by ${bassCssGridSize}`);
-        }
-        return colSize;
-    },
-    getCurrentBaseUrl(): string {
-        const port = window.location.port;
-        const hasPort = !_.isUndefined(port);
-        const baseUrl = `https://${window.location.hostname}${hasPort ? `:${port}` : ''}`;
-        return baseUrl;
-    },
-    onPageLoadPromise: new Promise<void>((resolve, _reject) => {
-        if (document.readyState === 'complete') {
-            resolve();
-            return;
-        }
-        window.onload = () => resolve();
-    }),
-    openUrl(url: string): void {
-        window.open(url, '_blank');
-    },
-    isMobileOperatingSystem(): boolean {
-        return bowser.mobile;
-    },
-};
-- 
cgit