From c7e48e6b6930d352d4e4831781b112fd97d30bcd Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Sat, 14 Feb 2026 07:14:46 +0000
Subject: [PATCH] feat(landing): add npm install command section

Adds a stylized 'Install via NPM' code block with a copy button to the landing page, positioned between the hero and features sections.

- Updates landing/index.html with new HTML structure and CSS styles.
- Refactors copyToClipboard function to preserve button innerHTML (icon support).

Co-authored-by: PR0M3TH3AN <53631862+PR0M3TH3AN@users.noreply.github.com>
---
 landing/index.html | 115 ++++++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 113 insertions(+), 2 deletions(-)

diff --git a/landing/index.html b/landing/index.html
index be41128..ee5712b 100644
--- a/landing/index.html
+++ b/landing/index.html
@@ -342,6 +342,103 @@
             font-size: 0.875rem;
             border-top: 1px solid var(--border);
         }
+
+        /* Install CTA Section */
+        .install-container {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            margin: 0 auto 4rem;
+            text-align: center;
+            width: 100%;
+            max-width: 600px;
+            padding: 0 1rem;
+            animation: fadeIn 0.8s ease-out forwards;
+            opacity: 0;
+            transform: translateY(10px);
+        }
+
+        @keyframes fadeIn {
+            to { opacity: 1; transform: translateY(0); }
+        }
+
+        .install-label {
+            font-size: 0.9rem;
+            color: var(--muted);
+            margin-bottom: 0.75rem;
+            font-weight: 500;
+            letter-spacing: 0.05em;
+            text-transform: uppercase;
+        }
+
+        .install-code-wrapper {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            background: rgba(11, 16, 32, 0.8);
+            border: 1px solid var(--border);
+            border-radius: 12px;
+            padding: 0.75rem 1rem;
+            width: 100%;
+            max-width: 450px;
+            position: relative;
+            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
+            transition: all 0.3s ease;
+        }
+
+        .install-code-wrapper:hover {
+            border-color: var(--accent);
+            box-shadow: 0 0 0 1px var(--accent), 0 8px 30px rgba(79, 140, 255, 0.2);
+            transform: translateY(-2px);
+        }
+
+        .install-code-wrapper code {
+            font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+            font-size: 1rem;
+            color: var(--text-strong);
+            background: transparent;
+            padding: 0;
+            margin-right: 1rem;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            text-align: left;
+            flex: 1;
+        }
+
+        .install-code-wrapper code::before {
+            content: "$ ";
+            color: var(--muted);
+            user-select: none;
+        }
+
+        .copy-install-btn {
+            background: rgba(255, 255, 255, 0.05);
+            border: 1px solid var(--border);
+            color: var(--text);
+            padding: 0.4rem 0.8rem;
+            border-radius: 6px;
+            font-size: 0.8rem;
+            cursor: pointer;
+            transition: all 0.2s ease;
+            display: flex;
+            align-items: center;
+            gap: 6px;
+            font-weight: 500;
+            flex-shrink: 0;
+            line-height: 1;
+        }
+
+        .copy-install-btn:hover {
+            background: var(--surface-alt);
+            color: var(--text-strong);
+            border-color: var(--accent);
+        }
+
+        .copy-install-btn:active {
+            transform: scale(0.98);
+        }
     </style>
 </head>
 <body>
@@ -368,6 +465,20 @@
             </div>
         </section>
 
+        <div class="install-container">
+            <p class="install-label">Install via NPM</p>
+            <div class="install-code-wrapper">
+                <code id="install-cmd">npm install torch-lock</code>
+                <button class="copy-install-btn" onclick="copyToClipboard('install-cmd', this)">
+                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                        <rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
+                        <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
+                    </svg>
+                    Copy
+                </button>
+            </div>
+        </div>
+
         <section class="features">
             <div class="feature-card">
                 <div class="feature-icon">⚡</div>
@@ -501,13 +612,13 @@
         function copyToClipboard(elementId, btn) {
             const code = document.getElementById(elementId).textContent;
             navigator.clipboard.writeText(code).then(() => {
-                const originalText = btn.textContent;
+                const originalContent = btn.innerHTML;
                 btn.textContent = 'Copied!';
                 btn.style.borderColor = 'var(--success)';
                 btn.style.color = 'var(--success)';
 
                 setTimeout(() => {
-                    btn.textContent = originalText;
+                    btn.innerHTML = originalContent;
                     btn.style.borderColor = '';
                     btn.style.color = '';
                 }, 2000);