feat: Relocate and style install section with wordmark title

2026-10-18 21:47:40 +00:00 · 2025-02-23 00:35:49 -06:00
parent f6115b0d17
commit f58c14d51c
2 changed files with 56 additions and 1 deletions
@@ -147,6 +147,60 @@ export default function Home() {
                        </div>
                    </div>
                </div>
+
+                <div className={styles.installSection}>
+                    <div className={styles.installContainer}>
+                        <h2>Install <span className={styles.logoMarkSpan}>uni</span>cord</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>
            </main>
        </div>
    );