added hydration section

website/src/app/page.module.css

@@ -156,7 +156,7 @@
 }
 
 .pillars {
-    padding: 6rem 15em;
+    padding: 6rem 12em;
     background: var(--gray-alpha-100);
     min-height: 50vh;
     display: flex;
@@ -207,10 +207,10 @@
 }
 
 .hydrationSection {
-    padding: 6rem 15em;
+    padding: 6rem 12em;
     min-height: 50vh;
     display: flex;
-    align-items: center;
+    align-items: space;
     justify-content: center;
     position: relative;
     border-top: 1px solid var(--gray-alpha-200);
@@ -222,17 +222,17 @@
     justify-content: space-between;
     align-items: center;
     width: 100%;
-    max-width: 1200px;
 }
 
 .hydrationCode {
-    flex: 1;
-    min-width: 45%;
+    flex: 2;
+    width: 100%;
+    max-width: 800px;
 }
 
 .hydrationText {
     flex: 1;
-    padding: 2rem;
+    /* padding: 2rem; */
 }
 
 .hydrationText h2 {

website/src/app/page.tsx

@@ -2,8 +2,7 @@ import styles from "./page.module.css";
 import dynamic from 'next/dynamic';
 
 const CodeExample = dynamic(
-  () => import('../components/CodeExample'),
-  { ssr: false }
+  () => import('../components/CodeExample')
 );
 
 import { simpleExample, hydrationExample } from '../components/CodeExample';
@@ -55,7 +54,7 @@ export default function Home() {
                 <div className={styles.hydrationSection}>
                     <div className={styles.hydrationContainer}>
                         <div className={styles.hydrationCode}>
-                            <CodeExample code={hydrationExample} height={400} />
+                            <CodeExample code={hydrationExample} height={260} />
                         </div>
                         <div className={styles.hydrationText}>
                             <h2>Smart Hydration</h2>
@@ -65,11 +64,6 @@ export default function Home() {
                                 like messages, users, and guilds, ensuring your bot stays efficient while 
                                 keeping your code clean and predictable.
                             </p>
-                            <p>
-                                In this example, we're hydrating a message object to calculate ping times, 
-                                demonstrating how Unicord handles complex Discord API interactions with 
-                                simple, intuitive code.
-                            </p>
                         </div>
                     </div>
                 </div>