feat: Adjust code example styling for dynamic height and responsive layout

website/src/app/page.module.css

@@ -100,6 +100,12 @@
   pointer-events: none;
 }
 
+.hero > div:nth-child(2) {
+  flex: 1;
+  min-width: 45%;
+  height: 100%;
+}
+
 .code {
   font-family: var(--font-mono);
   font-size: 1em;
@@ -145,4 +151,4 @@
 
 .codeBlock code:focus-within {
   background: var(--gray-alpha-200);
-}
+}

website/src/components/CodeExample.module.css

@@ -1,6 +1,7 @@
 .editorContainer {
     width: 100%;
-    height: 400px;
+    height: 100%;
+    min-height: 300px;
     border-radius: 8px;
     overflow: hidden;
     margin: 20px 0;

website/src/components/CodeExample.tsx

@@ -32,7 +32,7 @@ export default function CodeExample() {
     return (
         <div className={styles.editorContainer}>
             <Editor
-                height="400px"
+                height="100%"
                 defaultLanguage="typescript"
                 defaultValue={exampleCode}
                 theme="vs-dark"