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..37796e6cc
--- /dev/null
+++ b/packages/dev-tools-pages/ts/components/Compiler.tsx
@@ -0,0 +1,90 @@
+import * as React from 'react';
+import styled from 'styled-components';
+import { media, colors } from '../variables';
+
+import Container from './Container';
+import InlineCode from './InlineCode';
+import Breakout from './Breakout';
+
+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 alt>.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!).',
+    },
+];
+
+function Compiler() {
+    return (
+        <Container>
+            <Breakout>
+                <Cards>
+                    {cards.map(card => (
+                        <Card key={card.title.split(' ').join('-')}>
+                            <Dt>{card.title}</Dt>
+                            <Dd>{card.body}</Dd>
+                        </Card>
+                    ))}
+                </Cards>
+            </Breakout>
+        </Container>
+    );
+}
+
+export default Compiler;