feat: Add Monaco Editor component for code example

website/src/components/CodeExample.module.css

@@ -0,0 +1,8 @@
+.editorContainer {
+    width: 100%;
+    height: 400px;
+    border-radius: 8px;
+    overflow: hidden;
+    margin: 20px 0;
+    border: 1px solid #2d2d2d;
+}

website/src/components/CodeExample.tsx

@@ -0,0 +1,55 @@
+'use client';
+
+import { useEffect, useRef } from 'react';
+import * as monaco from 'monaco-editor';
+import styles from './CodeExample.module.css';
+
+const exampleCode = `\
+import { Client, type Context } from 'unicord';
+
+// Initialize and configure
+const client = new Client({
+    token: '<token>',
+    application_id: '<application_id>',
+    intents: [
+        Intent.GUILDS,
+        Intent.GUILD_MESSAGES,
+        Intent.GUILD_MESSAGE_REACTIONS,
+        Intent.MESSAGE_CONTENT
+    ],
+    prefix: '??'
+});
+
+// Register a command
+client.chatCommands.register('ping', (context: Context, args) => {
+    context.reply('Pong!', true);
+});
+
+// Connect
+client.connect();`;
+
+export default function CodeExample() {
+    const editorRef = useRef<HTMLDivElement>(null);
+
+    useEffect(() => {
+        if (editorRef.current) {
+            const editor = monaco.editor.create(editorRef.current, {
+                value: exampleCode,
+                language: 'typescript',
+                theme: 'vs-dark',
+                minimap: { enabled: false },
+                readOnly: true,
+                automaticLayout: true,
+                fontSize: 14,
+                lineNumbers: 'on',
+                scrollBeyondLastLine: false,
+                roundedSelection: false,
+                padding: { top: 16, bottom: 16 },
+            });
+
+            return () => editor.dispose();
+        }
+    }, []);
+
+    return <div className={styles.editorContainer} ref={editorRef} />;
+}