intro component in profiler view

packages/dev-tools-pages/ts/components/Intro.tsx

@@ -0,0 +1,47 @@
+import * as React from 'react';
+import styled from 'styled-components';
+
+import { Alpha, Beta } from './Typography';
+
+const Main = styled.div`
+    background-color: #f1f4f5;
+    padding: 6.25rem;
+    display: flex;
+    justify-content: space-between;
+`;
+
+const Title = styled(Alpha)`
+    margin-bottom: 2.5rem;
+`;
+
+const Content = styled.div`
+    max-width: 25.9375rem;
+
+    display: flex;
+    flex-direction: column;
+`;
+
+const Code = styled.div`
+    background-color: #e9eced;
+    width: 520px;
+    height: 350px;
+`;
+
+interface IntroProps {
+    title: string;
+    children: React.ReactNode;
+}
+
+function Intro(props: IntroProps) {
+    return (
+        <Main>
+            <Content>
+                <Title>{props.title}</Title>
+                <Beta as="div">{props.children}</Beta>
+            </Content>
+            <Code />
+        </Main>
+    );
+}
+
+export default Intro;

packages/dev-tools-pages/ts/pages/Profiler.tsx

@@ -9,11 +9,19 @@ 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';
+import Intro from 'ts/components/Intro';
 
 function Profiler(props: any) {
     return (
         <Base context={context}>
             <Container>
+                <Intro title="ra">
+                    <p>
+                        Sol-profiler gathers line-by-line gas usage for any transaction submitted through your provider.
+                        This will help you find unexpected inefficiencies in parts of your smart contract, and take a
+                        data-driven approach to optimizing it.
+                    </p>
+                </Intro>
                 <Main>
                     <ContentBlock title="Required steps">
                         <List items={['Step 1', 'Step 2']} />