1 files changed, 90 insertions, 0 deletions
diff --git a/packages/dev-tools-pages/ts/components/compiler.tsx b/packages/dev-tools-pages/ts/components/compiler.tsx
new file mode 100644
index 000000000..694a535dd
--- /dev/null
+++ b/packages/dev-tools-pages/ts/components/compiler.tsx
@@ -0,0 +1,90 @@
+import * as _ from 'lodash';
+import * as React from 'react';
+import styled from 'styled-components';
+
+import { colors, media } from 'ts/variables';
+
+import { Breakout } from './breakout';
+import { Container } from './container';
+import { InlineCode } from './inline-code';
+
+const Cards = styled.dl`
+    column-count: 3;
+    column-gap: 1.25rem;
+
+    ${media.medium`
+        column-count: 1;
+    `};
+`;
+
+const Card = styled.div`
+    background-color: ${colors.lightGray};
+    padding: 3.125rem;
+    padding-bottom: 2.5rem;
+    display: inline-block;
+    margin-bottom: 1.25rem;
+    width: 100%;
+
+    ${media.medium`
+        padding: 1.875rem;
+    `};
+`;
+
+const Dt = styled.dt`
+    font-weight: 500;
+    display: inline;
+    ::after {
+        content: '. ';
+    }
+`;
+
+const Dd = styled.dd`
+    display: inline;
+    margin-left: 0;
+`;
+
+const cards = [
+    {
+        title: 'A Project-centric',
+        body: (
+            <React.Fragment>
+                Compiles an entire project instead of only individual <InlineCode isAlt={true}>.sol</InlineCode> files.
+            </React.Fragment>
+        ),
+    },
+    {
+        title: 'Incremental builds',
+        body: 'Recompiles your smart contracts after they have changed',
+    },
+    {
+        title: 'Customizable artifacts',
+        body:
+            'Stores only the required compiler output in your artifacts, so you can have complete control over your bundle size.',
+    },
+    {
+        title: 'Seamless',
+        body: 'Fetches and caches the required compiler binaries.',
+    },
+    {
+        title: 'Versioning',
+        body:
+            'Compiles each contract with the version specified at the top of its file (sol-compiler even supports version ranges!).',
+    },
+];
+
+const Compiler: React.StatelessComponent<{}> = () => (
+    <Container>
+        <Breakout>
+            <Cards>
+                {_.map(cards, card => (
+                    <Card key={card.title.split(' ').join('-')}>
+                        <Dt>{card.title}</Dt>
+                        <Dd>{card.body}</Dd>
+                    </Card>
+                ))}
+            </Cards>
+        </Breakout>
+    </Container>
+);
+
+export { Compiler };