From ba119ca2a81bfea6cf154b6764e47c6b39fbccb4 Mon Sep 17 00:00:00 2001
From: NgCuong <196793856+NguyenCuong1989@users.noreply.github.com>
Date: Sat, 28 Feb 2026 00:36:09 +0700
Subject: [PATCH] Add connect-your-tools visual mock page

---
 README.md                        |   8 ++
 examples/connect-your-tools.html | 156 +++++++++++++++++++++++++++++++
 2 files changed, 164 insertions(+)
 create mode 100644 examples/connect-your-tools.html
diff --git a/README.md b/README.md
index 1cff9f51..23e7f601 100644
--- a/README.md
+++ b/README.md
@@ -130,3 +130,11 @@ We're excited to have you join us early in the Copilot CLI journey.
 This is an early-stage preview, and we're building quickly. Expect frequent updates--please keep your client up to date for the latest features and fixes!
 
 Your insights are invaluable! Open issue in this repo, join Discussions, and run `/feedback` from the CLI to submit a confidential feedback survey!
+
+## 🎨 Design mock: "Connect your tools"
+
+A static recreation of the Linear-style integration visual from the `WWW-3` issue is available at:
+
+- `examples/connect-your-tools.html`
+
+Open it locally in a browser to preview the gradient background and icon lockup.
diff --git a/examples/connect-your-tools.html b/examples/connect-your-tools.html
new file mode 100644
index 00000000..7f8c5dcf
--- /dev/null
+++ b/examples/connect-your-tools.html
@@ -0,0 +1,156 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Connect your tools</title>
+    <style>
+      :root {
+        --bg-left: #6b46db;
+        --bg-mid: #9e56b0;
+        --bg-right: #ef6e68;
+        --icon-white: #f4f4f5;
+        --icon-accent: #b3569a;
+      }
+
+      * {
+        box-sizing: border-box;
+      }
+
+      body {
+        margin: 0;
+        min-height: 100vh;
+        display: grid;
+        place-items: center;
+        background: linear-gradient(120deg, var(--bg-left) 10%, var(--bg-mid) 52%, var(--bg-right) 95%);
+        font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
+      }
+
+      .icons {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: 54px;
+        transform: translateY(12px);
+      }
+
+      .circle {
+        width: 154px;
+        aspect-ratio: 1;
+        border-radius: 50%;
+        background: var(--icon-white);
+        position: relative;
+      }
+
+      .linear-mark {
+        overflow: hidden;
+      }
+
+      .stripe {
+        position: absolute;
+        width: 16px;
+        height: 104px;
+        background: linear-gradient(120deg, #c65fa4, #a24c9d);
+        border-radius: 10px;
+        transform: rotate(-46deg);
+        left: 44px;
+        bottom: -8px;
+      }
+
+      .stripe.s2 {
+        left: 65px;
+      }
+
+      .stripe.s3 {
+        left: 86px;
+      }
+
+      .stripe.s4 {
+        left: 107px;
+      }
+
+      .mask {
+        position: absolute;
+        width: 128px;
+        height: 128px;
+        border-radius: 50%;
+        bottom: -64px;
+        left: -64px;
+        background: linear-gradient(120deg, var(--bg-left) 0%, var(--bg-mid) 60%);
+      }
+
+      .plus {
+        display: grid;
+        place-items: center;
+      }
+
+      .plus::before,
+      .plus::after {
+        content: "";
+        position: absolute;
+        background: var(--icon-accent);
+        border-radius: 8px;
+      }
+
+      .plus::before {
+        width: 66px;
+        height: 18px;
+      }
+
+      .plus::after {
+        width: 18px;
+        height: 66px;
+      }
+
+      @media (max-width: 680px) {
+        .icons {
+          gap: 26px;
+          transform: none;
+        }
+
+        .circle {
+          width: 120px;
+        }
+
+        .stripe {
+          height: 82px;
+          width: 12px;
+          left: 34px;
+        }
+
+        .stripe.s2 { left: 50px; }
+        .stripe.s3 { left: 66px; }
+        .stripe.s4 { left: 82px; }
+
+        .mask {
+          width: 98px;
+          height: 98px;
+          bottom: -50px;
+          left: -50px;
+        }
+
+        .plus::before {
+          width: 52px;
+          height: 14px;
+        }
+
+        .plus::after {
+          width: 14px;
+          height: 52px;
+        }
+      }
+    </style>
+  </head>
+  <body>
+    <main class="icons" aria-label="Linear and add integration symbols">
+      <div class="circle linear-mark" aria-hidden="true">
+        <span class="stripe"></span>
+        <span class="stripe s2"></span>
+        <span class="stripe s3"></span>
+        <span class="stripe s4"></span>
+        <span class="mask"></span>
+      </div>
+      <div class="circle plus" aria-hidden="true"></div>
+    </main>
+  </body>
+</html>
