feat: Add interactive package manager installation section with tabs and copy functionality

website/src/app/page.module.css

@@ -353,3 +353,104 @@
     color: var(--foreground);
     border: 1px solid var(--gray-alpha-200);
 }
+
+.installSection {
+    padding: 6rem 12em;
+    min-height: 30vh;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+    border-top: 1px solid var(--gray-alpha-200);
+}
+
+.installContainer {
+    width: 100%;
+    max-width: 600px;
+    text-align: center;
+}
+
+.installContainer h2 {
+    color: #ff0080;
+    margin: 0 0 2rem 0;
+    font-size: 2rem;
+}
+
+.packageManagerTabs {
+    display: flex;
+    justify-content: center;
+    gap: 0.5rem;
+    margin-bottom: 1rem;
+}
+
+.tabButton {
+    background: transparent;
+    border: 1px solid var(--gray-alpha-200);
+    color: #fff;
+    padding: 0.5rem 1rem;
+    border-radius: 6px;
+    cursor: pointer;
+    font-size: 0.9rem;
+    transition: all 0.2s ease;
+}
+
+.tabButton:hover {
+    background: var(--gray-alpha-200);
+}
+
+.activeTab {
+    background: var(--gray-alpha-200);
+    border-color: #ff0080;
+}
+
+.installCommandWrapper {
+    display: flex;
+    align-items: center;
+    background: var(--gray-alpha-100);
+    border: 1px solid var(--gray-alpha-200);
+    border-radius: 8px;
+    padding: 1rem;
+    gap: 1rem;
+}
+
+.installCommand {
+    flex: 1;
+    display: block;
+    text-align: left;
+    font-family: var(--font-mono);
+    font-size: 0.9rem;
+    color: #fff;
+}
+
+.copyButton {
+    background: transparent;
+    border: 1px solid var(--gray-alpha-200);
+    color: #fff;
+    padding: 0.4rem 0.8rem;
+    border-radius: 6px;
+    cursor: pointer;
+    font-size: 0.9rem;
+    transition: all 0.2s ease;
+    white-space: nowrap;
+}
+
+.copyButton:hover {
+    background: var(--gray-alpha-200);
+}
+
+@media (max-width: 1200px) {
+    .installSection {
+        padding: 4rem 2rem;
+    }
+}
+
+@media (max-width: 600px) {
+    .packageManagerTabs {
+        flex-wrap: wrap;
+    }
+    
+    .tabButton {
+        flex: 1;
+        min-width: 80px;
+    }
+}

website/src/app/page.tsx

@@ -1,3 +1,6 @@
+'use client';
+
+import { useState } from 'react';
 import styles from "./page.module.css";
 import dynamic from 'next/dynamic';
 
@@ -8,6 +11,7 @@ const CodeExample = dynamic(
 import { simpleExample, hydrationExample, typeCoercionExample } from '../components/CodeExample';
 
 export default function Home() {
+    const [activeTab, setActiveTab] = useState('npm');
     return (
         <div className={[styles.page, styles.pageWithHeader].join(" ")}>
             <header className={styles.header}>
@@ -31,6 +35,60 @@ export default function Home() {
                     </div>
                 </div>
 
+                <div className={styles.installSection}>
+                    <div className={styles.installContainer}>
+                        <h2>Quick Install</h2>
+                        <div className={styles.packageManagerTabs}>
+                            <button 
+                                className={`${styles.tabButton} ${activeTab === 'npm' ? styles.activeTab : ''}`}
+                                onClick={() => setActiveTab('npm')}
+                            >
+                                npm
+                            </button>
+                            <button 
+                                className={`${styles.tabButton} ${activeTab === 'yarn' ? styles.activeTab : ''}`}
+                                onClick={() => setActiveTab('yarn')}
+                            >
+                                yarn
+                            </button>
+                            <button 
+                                className={`${styles.tabButton} ${activeTab === 'pnpm' ? styles.activeTab : ''}`}
+                                onClick={() => setActiveTab('pnpm')}
+                            >
+                                pnpm
+                            </button>
+                            <button 
+                                className={`${styles.tabButton} ${activeTab === 'bun' ? styles.activeTab : ''}`}
+                                onClick={() => setActiveTab('bun')}
+                            >
+                                bun
+                            </button>
+                        </div>
+                        <div className={styles.installCommandWrapper}>
+                            <code className={styles.installCommand}>
+                                {activeTab === 'npm' && 'npm install unicord'}
+                                {activeTab === 'yarn' && 'yarn add unicord'}
+                                {activeTab === 'pnpm' && 'pnpm add unicord'}
+                                {activeTab === 'bun' && 'bun add unicord'}
+                            </code>
+                            <button 
+                                className={styles.copyButton}
+                                onClick={() => {
+                                    const commands = {
+                                        npm: 'npm install unicord',
+                                        yarn: 'yarn add unicord',
+                                        pnpm: 'pnpm add unicord',
+                                        bun: 'bun add unicord'
+                                    };
+                                    navigator.clipboard.writeText(commands[activeTab]);
+                                }}
+                            >
+                                Copy
+                            </button>
+                        </div>
+                    </div>
+                </div>
+
                 <div className={styles.pillars}>
                     <div className={styles.pillarContainer}>
                         <div className={styles.pillar}>