From 3ec85d003df84691c8b5225479e6359d7737fd56 Mon Sep 17 00:00:00 2001
From: NgCuong <196793856+NguyenCuong1989@users.noreply.github.com>
Date: Sun, 29 Mar 2026 19:24:30 +0700
Subject: [PATCH] refine connect-your-tools visual to match reference

---
 connect-your-tools.html          |  74 +++++++++--------
 examples/connect-your-tools.html | 134 +++++++++----------------------
 2 files changed, 76 insertions(+), 132 deletions(-)
diff --git a/connect-your-tools.html b/connect-your-tools.html
index afc42b96..ecf08276 100644
--- a/connect-your-tools.html
+++ b/connect-your-tools.html
@@ -6,10 +6,10 @@
     <title>Connect your tools</title>
     <style>
       :root {
-        --bg-start: #6445db;
-        --bg-mid: #9b53b5;
-        --bg-end: #ea6f73;
-        --icon-bg: #ececec;
+        --bg-start: #6646da;
+        --bg-mid: #9d54b2;
+        --bg-end: #ec6f69;
+        --icon-fill: #f2f2f3;
         --icon-accent: #b4579f;
       }
 
@@ -26,67 +26,71 @@
         margin: 0;
         display: grid;
         place-items: center;
-        background: linear-gradient(125deg, var(--bg-start) 4%, var(--bg-mid) 52%, var(--bg-end) 96%);
+        background: linear-gradient(127deg, var(--bg-start) 0%, var(--bg-mid) 54%, var(--bg-end) 100%);
         font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
       }
 
-      .logos {
+      .icons {
         display: flex;
         align-items: center;
-        gap: clamp(26px, 5vw, 86px);
+        justify-content: center;
+        gap: clamp(46px, 6.5vw, 100px);
+        transform: translateY(12px);
       }
 
-      .logo {
-        width: clamp(120px, 11vw, 220px);
+      .circle {
+        width: clamp(124px, 10.8vw, 220px);
         aspect-ratio: 1;
         border-radius: 50%;
-        background: var(--icon-bg);
+        background: var(--icon-fill);
         position: relative;
         overflow: hidden;
       }
 
-      .logo.linear::before {
+      .linear::before {
         content: "";
         position: absolute;
-        inset: 0;
-        border-radius: 50%;
-        background:
-          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%
-          );
+        left: -14%;
+        bottom: 0;
+        width: 74%;
+        height: 76%;
+        background: repeating-linear-gradient(
+          -46deg,
+          var(--icon-accent) 0 10px,
+          transparent 10px 24px
+        );
+        opacity: 0.98;
       }
 
-      .logo.plus::before,
-      .logo.plus::after {
+      .plus::before,
+      .plus::after {
         content: "";
         position: absolute;
         top: 50%;
         left: 50%;
-        width: clamp(50px, 5vw, 100px);
-        height: clamp(12px, 1.1vw, 22px);
+        width: clamp(54px, 4.8vw, 98px);
+        height: clamp(14px, 1.2vw, 24px);
         border-radius: 999px;
-        background: var(--icon-accent);
         transform: translate(-50%, -50%);
+        background: var(--icon-accent);
       }
 
-      .logo.plus::after {
+      .plus::after {
         transform: translate(-50%, -50%) rotate(90deg);
       }
+
+      @media (max-width: 680px) {
+        .icons {
+          transform: none;
+          gap: clamp(24px, 8vw, 42px);
+        }
+      }
     </style>
   </head>
   <body>
-    <main class="logos" aria-label="Connected tools illustration">
-      <div class="logo linear" aria-label="Linear logo"></div>
-      <div class="logo plus" aria-label="Add integration"></div>
+    <main class="icons" aria-label="Connected tools illustration">
+      <div class="circle linear" aria-hidden="true"></div>
+      <div class="circle plus" aria-hidden="true"></div>
     </main>
   </body>
 </html>
diff --git a/examples/connect-your-tools.html b/examples/connect-your-tools.html
index 7f8c5dcf..ecf08276 100644
--- a/examples/connect-your-tools.html
+++ b/examples/connect-your-tools.html
@@ -6,150 +6,90 @@
     <title>Connect your tools</title>
     <style>
       :root {
-        --bg-left: #6b46db;
-        --bg-mid: #9e56b0;
-        --bg-right: #ef6e68;
-        --icon-white: #f4f4f5;
-        --icon-accent: #b3569a;
+        --bg-start: #6646da;
+        --bg-mid: #9d54b2;
+        --bg-end: #ec6f69;
+        --icon-fill: #f2f2f3;
+        --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(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;
+        background: linear-gradient(127deg, var(--bg-start) 0%, var(--bg-mid) 54%, var(--bg-end) 100%);
+        font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
       }
 
       .icons {
         display: flex;
         align-items: center;
         justify-content: center;
-        gap: 54px;
+        gap: clamp(46px, 6.5vw, 100px);
         transform: translateY(12px);
       }
 
       .circle {
-        width: 154px;
+        width: clamp(124px, 10.8vw, 220px);
         aspect-ratio: 1;
         border-radius: 50%;
-        background: var(--icon-white);
+        background: var(--icon-fill);
         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 {
+      .linear::before {
+        content: "";
         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;
+        left: -14%;
+        bottom: 0;
+        width: 74%;
+        height: 76%;
+        background: repeating-linear-gradient(
+          -46deg,
+          var(--icon-accent) 0 10px,
+          transparent 10px 24px
+        );
+        opacity: 0.98;
       }
 
       .plus::before,
       .plus::after {
         content: "";
         position: absolute;
+        top: 50%;
+        left: 50%;
+        width: clamp(54px, 4.8vw, 98px);
+        height: clamp(14px, 1.2vw, 24px);
+        border-radius: 999px;
+        transform: translate(-50%, -50%);
         background: var(--icon-accent);
-        border-radius: 8px;
-      }
-
-      .plus::before {
-        width: 66px;
-        height: 18px;
       }
 
       .plus::after {
-        width: 18px;
-        height: 66px;
+        transform: translate(-50%, -50%) rotate(90deg);
       }
 
       @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;
+          gap: clamp(24px, 8vw, 42px);
         }
       }
     </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>
+    <main class="icons" aria-label="Connected tools illustration">
+      <div class="circle linear" aria-hidden="true"></div>
       <div class="circle plus" aria-hidden="true"></div>
     </main>
   </body>
