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

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}>