Responsive Intro

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

@@ -1,30 +1,35 @@
 import * as React from 'react';
 import styled from 'styled-components';
-import { colors } from '../variables';
+import { media, colors } from '../variables';
 
 import { Alpha, Beta } from './Typography';
+import Breakout from './Breakout';
+import Code from './Code';
 
 const Main = styled.div`
     background-color: ${colors.lightGray};
     padding: 6.25rem;
     display: flex;
     justify-content: space-between;
+
+    ${media.small`
+        padding: 2.5rem 1.875rem
+        display: block;     
+    `};
 `;
 
 const Title = styled(Alpha)`
     margin-bottom: 2.5rem;
+
+    ${media.small`margin-bottom: 2.25rem;`};
 `;
 
 const Content = styled.div`
     max-width: 25.9375rem;
     display: flex;
     flex-direction: column;
-`;
 
-const Code = styled.div`
+    ${media.small`margin-bottom: 2.25rem;`};
-    background-color: ${colors.darkGray};
-    width: 520px;
-    height: 350px;
 `;
 
 interface IntroProps {
@@ -34,13 +39,17 @@ interface IntroProps {
 
 function Intro(props: IntroProps) {
     return (
-        <Main>
+        <Breakout>
-            <Content>
+            <Main>
-                <Title>{props.title}</Title>
+                <Content>
-                <Beta as="div">{props.children}</Beta>
+                    <Title>{props.title}</Title>
-            </Content>
+                    <Beta as="div">{props.children}</Beta>
-            <Code />
+                </Content>
-        </Main>
+                <Breakout>
+                    <Code>Function execute transaction Function execute transaction Function execute transaction</Code>
+                </Breakout>
+            </Main>
+        </Breakout>
     );
 }