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

---
 README.md               |  4 +++
 connect-your-tools.html | 70 +++++++++++++++++------------------------
 2 files changed, 32 insertions(+), 42 deletions(-)

diff --git a/README.md b/README.md
index 1cff9f51..75d9acc8 100644
--- a/README.md
+++ b/README.md
@@ -123,6 +123,10 @@ Each time you submit a prompt to GitHub Copilot CLI, your monthly quota of premi
 
 For more information about how to use the GitHub Copilot CLI, see [our official documentation](https://docs.github.com/copilot/concepts/agents/about-copilot-cli).
 
+## 🔌 Connect your tools mock
+
+For the Linear WWW-3 visual, open `connect-your-tools.html` in a browser to see the recreated "Connect your tools" gradient + icon composition.
+
 ## 📢 Feedback and Participation
 
 We're excited to have you join us early in the Copilot CLI journey.
diff --git a/connect-your-tools.html b/connect-your-tools.html
index b689c33d..afc42b96 100644
--- a/connect-your-tools.html
+++ b/connect-your-tools.html
@@ -6,41 +6,42 @@
     <title>Connect your tools</title>
     <style>
       :root {
-        --bg-start: #6e4ad8;
-        --bg-mid: #9f53b1;
-        --bg-end: #ea6a6f;
+        --bg-start: #6445db;
+        --bg-mid: #9b53b5;
+        --bg-end: #ea6f73;
         --icon-bg: #ececec;
-        --icon-accent: #b5569d;
+        --icon-accent: #b4579f;
       }
 
       * {
         box-sizing: border-box;
       }
 
+      html,
+      body {
+        height: 100%;
+      }
+
       body {
         margin: 0;
-        min-height: 100vh;
         display: grid;
         place-items: center;
-        background: linear-gradient(135deg, var(--bg-start) 0%, var(--bg-mid) 52%, var(--bg-end) 100%);
+        background: linear-gradient(125deg, var(--bg-start) 4%, var(--bg-mid) 52%, var(--bg-end) 96%);
         font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
       }
 
       .logos {
         display: flex;
         align-items: center;
-        gap: 84px;
+        gap: clamp(26px, 5vw, 86px);
       }
 
       .logo {
-        width: 220px;
-        height: 220px;
+        width: clamp(120px, 11vw, 220px);
+        aspect-ratio: 1;
         border-radius: 50%;
         background: var(--icon-bg);
         position: relative;
-      }
-
-      .logo.linear {
         overflow: hidden;
       }
 
@@ -50,16 +51,18 @@
         inset: 0;
         border-radius: 50%;
         background:
-          linear-gradient(45deg,
-            transparent 45%,
-            var(--icon-accent) 45% 50%,
-            transparent 50% 56%,
-            var(--icon-accent) 56% 61%,
-            transparent 61% 67%,
-            var(--icon-accent) 67% 72%,
-            transparent 72% 78%,
-            var(--icon-accent) 78% 84%,
-            transparent 84%);
+          linear-gradient(
+            45deg,
+            transparent 38%,
+            var(--icon-accent) 38% 44%,
+            transparent 44% 52%,
+            var(--icon-accent) 52% 58%,
+            transparent 58% 66%,
+            var(--icon-accent) 66% 72%,
+            transparent 72% 80%,
+            var(--icon-accent) 80% 86%,
+            transparent 86%
+          );
       }
 
       .logo.plus::before,
@@ -68,9 +71,9 @@
         position: absolute;
         top: 50%;
         left: 50%;
-        width: 100px;
-        height: 22px;
-        border-radius: 11px;
+        width: clamp(50px, 5vw, 100px);
+        height: clamp(12px, 1.1vw, 22px);
+        border-radius: 999px;
         background: var(--icon-accent);
         transform: translate(-50%, -50%);
       }
@@ -78,23 +81,6 @@
       .logo.plus::after {
         transform: translate(-50%, -50%) rotate(90deg);
       }
-
-      @media (max-width: 800px) {
-        .logos {
-          gap: 40px;
-        }
-
-        .logo {
-          width: 160px;
-          height: 160px;
-        }
-
-        .logo.plus::before,
-        .logo.plus::after {
-          width: 72px;
-          height: 16px;
-        }
-      }
     </style>
   </head>
   <body>