fix(marketing): inline graph paper SVG, swap copy link for icon button

apps/marketing/src/pages/index.astro

@@ -43,10 +43,14 @@ import { AnimatedBeamDemo } from '../components/animated-beam-demo'
           </p>
           <div class="rise-4 flex flex-wrap items-center justify-center gap-5">
             <a href="/cloud" class="btn-primary">Try Cloud →</a>
-            <a href="#install" class="btn-link">
+            <button type="button" class="btn-link copy-btn" data-copy="npx executor web" aria-label="Copy npx executor web to clipboard">
               <span class="font-mono text-[13px] text-ink-3">$</span>
               <span>npx executor web</span>
-            </a>
+              <span class="copy-icons text-ink-3" aria-hidden="true">
+                <svg class="copy-icon-copy" 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"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>
+                <svg class="copy-icon-check" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
+              </span>
+            </button>
           </div>
         </div>
       </div>
@@ -291,3 +295,23 @@ import { AnimatedBeamDemo } from '../components/animated-beam-demo'
     </div>
   </main>
 </Layout>
+
+<script>
+  document.querySelectorAll<HTMLButtonElement>('button[data-copy]').forEach((btn) => {
+    let timer: ReturnType<typeof setTimeout> | null = null
+
+    btn.addEventListener('click', async () => {
+      const text = btn.dataset.copy ?? ''
+      try {
+        await navigator.clipboard.writeText(text)
+        btn.dataset.copied = 'true'
+      } catch {
+        btn.dataset.copied = 'false'
+      }
+      if (timer) clearTimeout(timer)
+      timer = setTimeout(() => {
+        delete btn.dataset.copied
+      }, 1500)
+    })
+  })
+</script>

apps/marketing/src/styles/global.css

@@ -55,8 +55,9 @@ body {
   z-index: 1;
 }
 .pattern-graph {
-  -webkit-mask-image: url("/pattern-graph-paper.svg");
-  mask-image: url("/pattern-graph-paper.svg");
+  --pattern-graph: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='100'%20height='100'%20viewBox='0%200%20100%20100'%3E%3Cg%20fill-rule='evenodd'%3E%3Cg%20fill='%23000'%3E%3Cpath%20opacity='.5'%20d='M96%2095h4v1h-4v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9zm-1%200v-9h-9v9h9zm-10%200v-9h-9v9h9zm-10%200v-9h-9v9h9zm-10%200v-9h-9v9h9zm-10%200v-9h-9v9h9zm-10%200v-9h-9v9h9zm-10%200v-9h-9v9h9zm-10%200v-9h-9v9h9zm-9-10h9v-9h-9v9zm10%200h9v-9h-9v9zm10%200h9v-9h-9v9zm10%200h9v-9h-9v9zm10%200h9v-9h-9v9zm10%200h9v-9h-9v9zm10%200h9v-9h-9v9zm10%200h9v-9h-9v9zm9-10v-9h-9v9h9zm-10%200v-9h-9v9h9zm-10%200v-9h-9v9h9zm-10%200v-9h-9v9h9zm-10%200v-9h-9v9h9zm-10%200v-9h-9v9h9zm-10%200v-9h-9v9h9zm-10%200v-9h-9v9h9zm-9-10h9v-9h-9v9zm10%200h9v-9h-9v9zm10%200h9v-9h-9v9zm10%200h9v-9h-9v9zm10%200h9v-9h-9v9zm10%200h9v-9h-9v9zm10%200h9v-9h-9v9zm10%200h9v-9h-9v9zm9-10v-9h-9v9h9zm-10%200v-9h-9v9h9zm-10%200v-9h-9v9h9zm-10%200v-9h-9v9h9zm-10%200v-9h-9v9h9zm-10%200v-9h-9v9h9zm-10%200v-9h-9v9h9zm-10%200v-9h-9v9h9zm-9-10h9v-9h-9v9zm10%200h9v-9h-9v9zm10%200h9v-9h-9v9zm10%200h9v-9h-9v9zm10%200h9v-9h-9v9zm10%200h9v-9h-9v9zm10%200h9v-9h-9v9zm10%200h9v-9h-9v9zm9-10v-9h-9v9h9zm-10%200v-9h-9v9h9zm-10%200v-9h-9v9h9zm-10%200v-9h-9v9h9zm-10%200v-9h-9v9h9zm-10%200v-9h-9v9h9zm-10%200v-9h-9v9h9zm-10%200v-9h-9v9h9zm-9-10h9v-9h-9v9zm10%200h9v-9h-9v9zm10%200h9v-9h-9v9zm10%200h9v-9h-9v9zm10%200h9v-9h-9v9zm10%200h9v-9h-9v9zm10%200h9v-9h-9v9zm10%200h9v-9h-9v9z'/%3E%3Cpath%20d='M6%205V0H5v5H0v1h5v94h1V6h94V5H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
+  -webkit-mask-image: var(--pattern-graph);
+  mask-image: var(--pattern-graph);
   -webkit-mask-size: 100px 100px;
   mask-size: 100px 100px;
   opacity: 0.08;
@@ -141,11 +142,44 @@ body {
   align-items: center;
   gap: 0.4rem;
   transition: color 0.15s ease;
+  background: transparent;
+  border: 0;
+  padding: 0;
+  font-family: inherit;
+  cursor: pointer;
 }
 .btn-link:hover {
   color: var(--color-ink);
 }
 
+.copy-icons {
+  position: relative;
+  display: inline-flex;
+  width: 14px;
+  height: 14px;
+  margin-left: 0.15rem;
+}
+.copy-icons > svg {
+  position: absolute;
+  inset: 0;
+  transition:
+    opacity 0.15s ease,
+    transform 0.15s ease;
+}
+.copy-icon-check {
+  opacity: 0;
+  transform: scale(0.8);
+  color: var(--color-accent);
+}
+.copy-btn[data-copied="true"] .copy-icon-copy {
+  opacity: 0;
+  transform: scale(0.8);
+}
+.copy-btn[data-copied="true"] .copy-icon-check {
+  opacity: 1;
+  transform: scale(1);
+}
+
 /* Legal pages */
 .legal-prose {
   color: color-mix(in srgb, var(--color-ink) 85%, transparent);