feat: Add reusable CodeExample component with hydration section

website/src/app/page.module.css

@@ -206,6 +206,49 @@
     line-height: 1.5;
 }
 
+.hydrationSection {
+    padding: 6rem 15em;
+    min-height: 50vh;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+    border-top: 1px solid var(--gray-alpha-200);
+}
+
+.hydrationContainer {
+    display: flex;
+    gap: 4rem;
+    justify-content: space-between;
+    align-items: center;
+    width: 100%;
+    max-width: 1200px;
+}
+
+.hydrationCode {
+    flex: 1;
+    min-width: 45%;
+}
+
+.hydrationText {
+    flex: 1;
+    padding: 2rem;
+}
+
+.hydrationText h2 {
+    color: #ff0080;
+    margin: 0 0 1.5rem 0;
+    font-size: 2rem;
+}
+
+.hydrationText p {
+    color: #fff;
+    opacity: 0.8;
+    margin: 1rem 0;
+    font-size: 1.1rem;
+    line-height: 1.6;
+}
+
 @media (max-width: 1200px) {
     .pillars {
         padding: 4rem 2rem;
@@ -220,4 +263,22 @@
         max-width: 400px;
         margin: 0 auto;
     }
+
+    .hydrationSection {
+        padding: 4rem 2rem;
+    }
+
+    .hydrationContainer {
+        flex-direction: column;
+        gap: 2rem;
+    }
+
+    .hydrationCode {
+        width: 100%;
+    }
+
+    .hydrationText {
+        width: 100%;
+        padding: 1rem;
+    }
 }

website/src/app/page.tsx

@@ -2,9 +2,12 @@ import styles from "./page.module.css";
 import dynamic from 'next/dynamic';
 
 const CodeExample = dynamic(
-  () => import('../components/CodeExample')
+  () => import('../components/CodeExample'),
+  { ssr: false }
 );
 
+import { simpleExample, hydrationExample } from '../components/CodeExample';
+
 export default function Home() {
     return (
         <div className={[styles.page, styles.pageWithHeader].join(" ")}>
@@ -25,7 +28,7 @@ export default function Home() {
                         </p>
                     </div>
                     <div className={styles.codeExample}>
-                        <CodeExample />
+                        <CodeExample code={simpleExample} />
                     </div>
                 </div>
 
@@ -48,6 +51,28 @@ export default function Home() {
                         </div>
                     </div>
                 </div>
+
+                <div className={styles.hydrationSection}>
+                    <div className={styles.hydrationContainer}>
+                        <div className={styles.hydrationCode}>
+                            <CodeExample code={hydrationExample} height={400} />
+                        </div>
+                        <div className={styles.hydrationText}>
+                            <h2>Smart Hydration</h2>
+                            <p>
+                                Unicord's hydration system automatically manages Discord object lifecycles. 
+                                The context.hydrate method intelligently fetches and caches Discord objects 
+                                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>
             </main>
         </div>
     );

website/src/components/CodeExample.tsx

@@ -1,10 +1,38 @@
 'use client';
 
-import { useRef } from 'react';
 import Editor from "@monaco-editor/react";
 import styles from './CodeExample.module.css';
 
-const exampleCode = `\
+type CodeExampleProps = {
+    code: string;
+    height?: string | number;
+}
+
+export default function CodeExample({ code, height = "100%" }: CodeExampleProps) {
+    return (
+        <div className={styles.editorContainer}>
+            <Editor
+                height={height}
+                defaultLanguage="typescript"
+                defaultValue={code}
+                theme="vs-dark"
+                options={{
+                    readOnly: true,
+                    minimap: { enabled: false },
+                    fontSize: 14,
+                    lineNumbers: 'on',
+                    scrollBeyondLastLine: false,
+                    roundedSelection: false,
+                    padding: { top: 16, bottom: 16 },
+                    automaticLayout: true,
+                }}
+            />
+        </div>
+    );
+}
+
+// Export the example code snippets for reuse
+export const simpleExample = `\
 import { Client, type Context } from 'unicord';
 
 // Initialize and configure
@@ -28,25 +56,14 @@ client.chatCommands.register('ping', (context: Context, args) => {
 // Connect
 client.connect();`;
 
-export default function CodeExample() {
+export const hydrationExample = `\
-    return (
+client.chatCommands.register('ping', async (context: Context, args: any[]) => {
-        <div className={styles.editorContainer}>
+    // Hydrate the message id from the context
-            <Editor
+    const { message } = await context.hydrate(context, [Expectation.Message]);
-                height="100%"
+    // Send a message to the channel
-                defaultLanguage="typescript"
+    const response = await context.reply(\`Pong!: got \${args.join(', ')}\`, true);
-                defaultValue={exampleCode}
+    // Calculate the time it took to send the message
-                theme="vs-dark"
+    const time = message.timestamp.getTime() - message.timestamp.getTime();
-                options={{
+    // Edit the message to include the time
-                    readOnly: true,
+    await context.editMessage(response, \`Pong! Latency: \${time}ms\`);
-                    minimap: { enabled: false },
+});`;
-                    fontSize: 14,
-                    lineNumbers: 'on',
-                    scrollBeyondLastLine: false,
-                    roundedSelection: false,
-                    padding: { top: 16, bottom: 16 },
-                    automaticLayout: true,
-                }}
-            />
-        </div>
-    );
-}