feat: implement configurator layout

2 files changed, 29 insertions, 4 deletions

diff --git a/packages/website/ts/pages/instant/code_demo.tsx b/packages/website/ts/pages/instant/code_demo.tsx
index b029cc368..4f44a6160 100644
--- a/packages/website/ts/pages/instant/code_demo.tsx
+++ b/packages/website/ts/pages/instant/code_demo.tsx
@@ -9,6 +9,10 @@ import { Container } from 'ts/components/ui/container';
 const CustomPre = styled.pre`
     margin: 0px;
     line-height: 24px;
+    overflow: hidden;
+    width: 600px;
+    height: 500px;
+    border-radius: 4px;
     code {
         background-color: inherit !important;
         border-radius: 0px;
@@ -22,7 +26,7 @@ const CustomPre = styled.pre`
         text-align: center;
         padding-right: 5px !important;
         padding-left: 5px;
-        margin-right: 5px;
+        margin-right: 15px;
         line-height: 25px;
         padding-top: 10px;
     }
diff --git a/packages/website/ts/pages/instant/configurator.tsx b/packages/website/ts/pages/instant/configurator.tsx
index 09a51d0bb..29a3e2b1e 100644
--- a/packages/website/ts/pages/instant/configurator.tsx
+++ b/packages/website/ts/pages/instant/configurator.tsx
@@ -1,6 +1,8 @@
 import * as React from 'react';
 
 import { Container } from 'ts/components/ui/container';
+import { Text } from 'ts/components/ui/text';
+import { ActionLink } from 'ts/pages/instant/action_link';
 import { CodeDemo } from 'ts/pages/instant/code_demo';
 import { colors } from 'ts/style/colors';
 
@@ -9,8 +11,27 @@ export interface ConfiguratorProps {
 }
 
 export const Configurator = (props: ConfiguratorProps) => (
-    <Container className="flex" id={props.hash} height="400px" backgroundColor={colors.instantTertiaryBackground}>
-        <Container> Forms </Container>
-        <CodeDemo />
+    <Container
+        className="flex justify-center py4 px3"
+        id={props.hash}
+        backgroundColor={colors.instantTertiaryBackground}
+    >
+        <Container className="mx3">
+            <Container className="mb3">
+                <Text fontSize="20px" lineHeight="28px" fontColor={colors.white} fontWeight={500}>
+                    0x Instant Configurator
+                </Text>
+            </Container>
+            <Container height="400px" width="300px" backgroundColor="white" />
+        </Container>
+        <Container className="mx3">
+            <Container className="mb3 flex justify-between">
+                <Text fontSize="20px" lineHeight="28px" fontColor={colors.white} fontWeight={500}>
+                    Code Snippet
+                </Text>
+                <ActionLink displayText="Explore the Docs" linkSrc="/docs/instant" color={colors.grey} />
+            </Container>
+            <CodeDemo />
+        </Container>
     </Container>
 );