Enhance landing page with GitHub icon, emojis, and improved copy UX

site/index.html

@@ -29,7 +29,10 @@ <h1 class="wordmark">reeve</h1>
       </div>
 
       <div class="cta">
-        <a class="btn btn-primary" href="https://github.com/fredrivett/reeve">View on GitHub</a>
+        <a class="btn btn-primary" href="https://github.com/fredrivett/reeve">
+          <svg class="btn-icon" viewBox="0 0 16 16" width="18" height="18" aria-hidden="true" fill="currentColor"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82a7.6 7.6 0 012-.27c.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg>
+          View on GitHub
+        </a>
         <a class="btn btn-ghost" href="https://github.com/fredrivett/reeve/releases">Download DMG</a>
       </div>
 
@@ -42,29 +45,37 @@ <h1 class="wordmark">reeve</h1>
 
     <section class="features">
       <div class="feature">
-        <h3>Monitor at a glance</h3>
+        <h3><span class="emoji">📊</span> Monitor at a glance</h3>
         <p>Status, CPU, memory, uptime and ports for every process, with sparkline history.</p>
       </div>
       <div class="feature">
-        <h3>Manage without the terminal</h3>
+        <h3><span class="emoji">🎛️</span> Manage without the terminal</h3>
         <p>Restart, stop or delete any process straight from the menu bar.</p>
       </div>
       <div class="feature">
-        <h3>Grouped by workspace</h3>
+        <h3><span class="emoji">🗂️</span> Grouped by workspace</h3>
         <p>Auto-discovers every PM2 workspace and groups processes by environment — built for juggling several projects at once.</p>
       </div>
       <div class="feature">
-        <h3>Crash-loop detection</h3>
+        <h3><span class="emoji">🔀</span> Git repo &amp; branch info</h3>
+        <p>Shows the git repo and branch for each workspace, so you always know which worktree you're looking at.</p>
+      </div>
+      <div class="feature">
+        <h3><span class="emoji">🔁</span> Crash-loop detection</h3>
         <p>Flags processes that are rapidly restarting, so you spot trouble before it spreads.</p>
       </div>
       <div class="feature">
-        <h3>Daemon error recovery</h3>
+        <h3><span class="emoji">🛟</span> Daemon error recovery</h3>
         <p>Surfaces a broken PM2 daemon inline, with a one-click kill to clear stuck or duplicate daemons.</p>
       </div>
       <div class="feature">
-        <h3>Live logs &amp; notifications</h3>
+        <h3><span class="emoji">🪵</span> Live logs &amp; notifications</h3>
         <p>Stream process logs in real time, and get a desktop alert when something crashes or restarts.</p>
       </div>
+      <div class="feature">
+        <h3><span class="emoji">🔍</span> Quick filter</h3>
+        <p>Search processes by name, repo or branch, with ⌘K to jump straight to the filter.</p>
+      </div>
     </section>
 
     <footer class="footer">
@@ -80,18 +91,48 @@ <h3>Live logs &amp; notifications</h3>
   <script>
     const btn = document.getElementById('copy-btn');
     const cmd = document.getElementById('install-cmd');
-    btn.addEventListener('click', async () => {
+    let resetTimer;
+
+    function showCopied() {
+      btn.textContent = 'Copied';
+      btn.classList.add('copied');
+      clearTimeout(resetTimer);
+      resetTimer = setTimeout(() => {
+        btn.textContent = 'Copy';
+        btn.classList.remove('copied');
+      }, 1500);
+    }
+
+    async function copyText(text) {
+      // Preferred path: async Clipboard API (needs a secure context, e.g. HTTPS).
+      if (navigator.clipboard && window.isSecureContext) {
+        try {
+          await navigator.clipboard.writeText(text);
+          return true;
+        } catch (err) {
+          // Fall through to the legacy path below.
+        }
+      }
+      // Fallback for non-secure contexts / older browsers.
       try {
-        await navigator.clipboard.writeText(cmd.textContent);
-        const original = btn.textContent;
-        btn.textContent = 'Copied';
-        btn.classList.add('copied');
-        setTimeout(() => {
-          btn.textContent = original;
-          btn.classList.remove('copied');
-        }, 1500);
+        const ta = document.createElement('textarea');
+        ta.value = text;
+        ta.setAttribute('readonly', '');
+        ta.style.position = 'fixed';
+        ta.style.top = '-1000px';
+        document.body.appendChild(ta);
+        ta.select();
+        const ok = document.execCommand('copy');
+        document.body.removeChild(ta);
+        return ok;
       } catch (err) {
-        // Clipboard unavailable — leave the command visible for manual copy.
+        return false;
+      }
+    }
+
+    btn.addEventListener('click', async () => {
+      if (await copyText(cmd.textContent.trim())) {
+        showCopied();
       }
     });
   </script>

site/styles.css

@@ -117,14 +117,20 @@ a:hover {
 }
 
 .btn {
-  display: inline-block;
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
   padding: 11px 22px;
   border-radius: 10px;
   font-weight: 600;
   font-size: 15px;
   transition: transform 0.05s ease, background 0.15s ease, border-color 0.15s ease;
 }
 
+.btn-icon {
+  flex-shrink: 0;
+}
+
 .btn:hover {
   text-decoration: none;
 }