responsiveness

src/components/ReleaseCycle/graphics/ReleaseCycleDiagram.module.scss

@@ -4,7 +4,8 @@
 .releaseCycleDiagram {
   position: relative;
   display: flex;
-  width: 100%;
+  width: 90%;
+  left: 5%;
   height: 100%;
   align-items: center;
   justify-content: center;

src/components/StartExperimenting/StartExperimenting.module.scss

@@ -10,6 +10,7 @@
   color: $white-0;
   display: flex;
   flex-direction: column;
+  padding-top: 96px;
 
   @include breakpoint(md) {
     height: 100vh;
@@ -23,11 +24,8 @@
       display: flex;
       flex-direction: column;
       justify-content: center;
-      // padding: 6rem 0;
-      grid-column-start: 2;
 
       @include breakpoint(md) {
-        // padding: 6rem 2rem;
         grid-column-start: 1;
       }
 
@@ -42,8 +40,10 @@
       flex-direction: column;
       justify-content: center;
       padding-bottom: 6rem;
+      padding-top: 96px;
 
       @include breakpoint(md) {
+        padding-top: unset;
         padding-bottom: unset;
       }
 
@@ -62,8 +62,8 @@
       .action {
         margin-top: 32px;
         padding-left: 16px;
-        width: calc(60% + $grid-gutter);
-        max-width: 272px;
+        width: 100%;
+        max-width: 282px;
 
         @include breakpoint(lg) {
           margin-top: 48px;

src/components/StartExperimenting/StartExperimenting.tsx

@@ -47,7 +47,7 @@ const StartExperimenting: FC<StartExperimentingProps> = ({ onCtaClicked }) => (
         className={styles.graphics}
         lg={{ span: 6 }}
         md={{ span: 4 }}
-        sm={{ span: 2 }}
+        sm={{ span: 4, offset: 0 }}
       >
         <AnimatedTerminal />
       </Column>

src/components/StartExperimenting/components/AnimatedTerminal/AnimatedTerminal.module.scss

@@ -6,9 +6,24 @@
     height: 380px;
   }
 
+  :global(.Terminal-header) {
+    top: 0;
+    background-color: $gray-100;
+    height: 32px;
+  }
+
   :global(.Terminal-window) {
     background-color: $gray-100;
     border: none;
+    overflow: hidden;
+    position: relative;
+  }
+
+  :global(.Terminal-console) {
+    min-height: calc(100% - 60px);
+    position: absolute;
+    bottom: 60px;
+    width: calc(100% - 32px);
   }
 
   :global(.Terminal-btn) {

src/components/StartExperimenting/components/AnimatedTerminal/animations/animationStyles.module.scss

@@ -0,0 +1,27 @@
+@use '@carbon/colors' as *;
+
+.borderedAnswer {
+  position: relative;
+  border: solid 1px white;
+  padding: 1em;
+  display: flex;
+  flex-direction: column;
+  margin: 1em 0 -1em 0;
+  width: 100%;
+
+  &__title {
+    position: absolute;
+    align-self: center;
+    background-color: $gray-100;
+    top: -10px;
+    padding: 0 1em;
+  }
+
+  &__footer {
+    position: absolute;
+    align-self: flex-end;
+    background-color: $gray-100;
+    bottom: -10px;
+    padding: 0 1em;
+  }
+}

src/components/StartExperimenting/components/AnimatedTerminal/animations/chat.tsx

@@ -0,0 +1,78 @@
+import wait from './wait';
+
+import styles from './animationStyles.module.scss';
+
+const BorderedResponse: React.FC<{
+  title?: string;
+  children?: React.ReactNode;
+  footer?: string;
+}> = ({ children, title, footer }) => {
+  return (
+    <div className={styles.borderedAnswer}>
+      {title ? (
+        <div className={styles.borderedAnswer__title}>{title}</div>
+      ) : null}
+      <span>{children}</span>
+      {footer ? (
+        <div className={styles.borderedAnswer__footer}>{footer}</div>
+      ) : null}
+    </div>
+  );
+};
+
+const chat: object[] = [
+  {
+    text: 'ilab chat',
+    cmd: true,
+    delay: 40,
+  },
+  {
+    cmd: false,
+    ...wait(10, () => ({
+      text: (
+        <>
+          <BorderedResponse title="system">
+            Welcome to Chat CLI w/ GGML-MERLINITE-7B-0302-Q4_K_M
+          </BorderedResponse>{' '}
+        </>
+      ),
+    })),
+  },
+  {
+    ...wait(
+      10,
+      (i, arr) => ({
+        text: `>>> ${arr.slice(0, i + 1).join('')}`,
+      }),
+      'what is the capital of canada',
+    ),
+  },
+  {
+    cmd: false,
+    ...wait(25, i => ({
+      text:
+        i < 20 ? (
+          ''
+        ) : (
+          <BorderedResponse
+            title="ggml-merlinite-7b-0302-Q4_K_M"
+            footer="elapsed 1.208 seconds"
+          >
+            The capital city of Canada is Ottawa. It is located in the province
+            of Ontario, on the southern banks of the Ottawa River in the eastern
+            portion of southern Ontario. The city serves as the political center
+            for Canada, as it is home to Parliament Hill, which houses the House
+            of Commons, Senate, Supreme Court, and Cabinet of Canada. Ottawa has
+            a rich history and cultural significance, making it an essential
+            part of Canada&apos;s identity.
+          </BorderedResponse>
+        ),
+    })),
+  },
+  {
+    text: '>>> ',
+    cmd: false,
+  },
+];
+
+export default chat;