From f58c14d51ce43c7bfce293ccb0f62c1ea0a47610 Mon Sep 17 00:00:00 2001
From: "Jaron (aider)" <jaron@fishhat.dev>
Date: Sun, 23 Feb 2025 00:35:49 -0600
Subject: [PATCH] feat: Relocate and style install section with wordmark title

---
 website/src/app/page.module.css |  3 +-
 website/src/app/page.tsx        | 54 +++++++++++++++++++++++++++++++++
 2 files changed, 56 insertions(+), 1 deletion(-)

diff --git a/website/src/app/page.module.css b/website/src/app/page.module.css
index 785c192..cf5f0fe 100644
--- a/website/src/app/page.module.css
+++ b/website/src/app/page.module.css
@@ -361,6 +361,7 @@
     align-items: center;
     justify-content: center;
     position: relative;
+    background: var(--gray-alpha-100);
     border-top: 1px solid var(--gray-alpha-200);
 }
 
@@ -371,7 +372,7 @@
 }
 
 .installContainer h2 {
-    color: #ff0080;
+    color: #fff;
     margin: 0 0 2rem 0;
     font-size: 2rem;
 }
diff --git a/website/src/app/page.tsx b/website/src/app/page.tsx
index ac97983..e9bc7e1 100644
--- a/website/src/app/page.tsx
+++ b/website/src/app/page.tsx
@@ -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>
     );