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

2026-10-18 21:47:40 +00:00 · 2025-02-23 00:32:17 -06:00
parent 934db0c285
commit f6115b0d17
2 changed files with 159 additions and 0 deletions
@@ -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;
+    }
+}