feat: Add type coercion section with code example and styling

website/src/app/page.module.css

@@ -281,6 +281,67 @@
         width: 100%;
         padding: 1rem;
     }
+
+    .typeSection {
+        padding: 4rem 2rem;
+    }
+
+    .typeContainer {
+        flex-direction: column;
+        gap: 2rem;
+    }
+
+    .typeCode {
+        width: 100%;
+    }
+
+    .typeText {
+        width: 100%;
+        padding: 1rem;
+    }
+}
+
+.typeSection {
+    padding: 6rem 12em;
+    min-height: 50vh;
+    display: flex;
+    align-items: space;
+    justify-content: center;
+    position: relative;
+    background: var(--gray-alpha-100);
+    border-top: 1px solid var(--gray-alpha-200);
+}
+
+.typeContainer {
+    display: flex;
+    gap: 4rem;
+    justify-content: space-between;
+    align-items: center;
+    width: 100%;
+}
+
+.typeText {
+    flex: 1;
+}
+
+.typeCode {
+    flex: 2;
+    width: 100%;
+    max-width: 780px;
+}
+
+.typeText h2 {
+    color: #ff0080;
+    margin: 0 0 1.5rem 0;
+    font-size: 2rem;
+}
+
+.typeText p {
+    color: #fff;
+    opacity: 0.8;
+    margin: 1rem 0;
+    font-size: 1.1rem;
+    line-height: 1.6;
 }
 
 .hydrationText p code {
@@ -291,4 +352,4 @@
     padding: 0.1em 0.2em;
     color: var(--foreground);
     border: 1px solid var(--gray-alpha-200);
-}
+}

website/src/app/page.tsx

@@ -67,6 +67,28 @@ export default function Home() {
                         </div>
                     </div>
                 </div>
+
+                <div className={styles.typeSection}>
+                    <div className={styles.typeContainer}>
+                        <div className={styles.typeText}>
+                            <h2>Type Coercion</h2>
+                            <p>
+                                Unicord automatically handles type coercion for command arguments, 
+                                ensuring you always get the correct types in your handlers. Define your 
+                                command structure once, and get full type safety and autocompletion 
+                                throughout your codebase.
+                            </p>
+                            <p>
+                                In this example, the <code>user</code> argument is automatically typed 
+                                as a <code>User</code> object, providing access to all user properties 
+                                with full TypeScript support.
+                            </p>
+                        </div>
+                        <div className={styles.typeCode}>
+                            <CodeExample code={typeCoercionExample} height={300} noScroll={true} />
+                        </div>
+                    </div>
+                </div>
             </main>
         </div>
     );

website/src/components/CodeExample.tsx

@@ -70,3 +70,21 @@ client.chatCommands.register('ping', async (context: Context, args: any[]) => {
     // Edit the message to include the time
     await context.editMessage(response, \`Pong! Latency: \${time}ms\`);
 });`;
+
+export const typeCoercionExample = `\
+const avatarCommand = createCommandHandler({
+    description: 'Get a users avatar',
+    args: [
+        {
+            id: 'user',
+            name: 'user',
+            type: CommandOptionType.User,
+            description: 'The user to get the avatar for',
+            required: true
+        }
+    ],
+    execute: async (context: Context, args) => {
+        // Args will be typed here as { user: User }
+        context.reply(args.user.avatarURL);
+    }
+});`;