From ffa43b7ca9dd870e45cbccfc8737aff6b8de168b Mon Sep 17 00:00:00 2001
From: NgCuong <196793856+NguyenCuong1989@users.noreply.github.com>
Date: Sun, 29 Mar 2026 19:23:46 +0700
Subject: [PATCH] refine connect-your-tools layout and icon geometry

---
 connect-your-tools.html          |  53 ++++++----
 examples/connect-your-tools.html | 169 ++++++++++++-------------------
 2 files changed, 94 insertions(+), 128 deletions(-)

diff --git a/connect-your-tools.html b/connect-your-tools.html
index ca4a7459..1de3ddbf 100644
--- a/connect-your-tools.html
+++ b/connect-your-tools.html
@@ -26,19 +26,22 @@
         margin: 0;
         display: grid;
         place-items: center;
+        overflow: hidden;
         background: linear-gradient(125deg, var(--bg-start) 2%, var(--bg-mid) 51%, var(--bg-end) 98%);
         font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
       }
 
       .logos {
+        --logo-size: clamp(108px, 11vw, 168px);
         display: flex;
         align-items: center;
-        gap: clamp(38px, 5vw, 84px);
-        transform: translateY(5vh);
+        gap: clamp(24px, 5vw, 64px);
+        transform: translateY(clamp(10px, 5vh, 52px));
+        contain: layout paint;
       }
 
       .logo {
-        width: clamp(108px, 11vw, 168px);
+        width: var(--logo-size);
         aspect-ratio: 1;
         border-radius: 50%;
         background: var(--icon-bg);
@@ -51,19 +54,18 @@
         position: absolute;
         inset: 0;
         border-radius: 50%;
-        background:
-          linear-gradient(
-            45deg,
-            transparent 38%,
-            var(--icon-accent) 38% 43.4%,
-            transparent 43.4% 51.6%,
-            var(--icon-accent) 51.6% 57%,
-            transparent 57% 65.2%,
-            var(--icon-accent) 65.2% 70.6%,
-            transparent 70.6% 78.8%,
-            var(--icon-accent) 78.8% 84.2%,
-            transparent 84.2%
-          );
+        background: linear-gradient(
+          45deg,
+          transparent 38%,
+          var(--icon-accent) 38% 43.4%,
+          transparent 43.4% 51.6%,
+          var(--icon-accent) 51.6% 57%,
+          transparent 57% 65.2%,
+          var(--icon-accent) 65.2% 70.6%,
+          transparent 70.6% 78.8%,
+          var(--icon-accent) 78.8% 84.2%,
+          transparent 84.2%
+        );
       }
 
       .logo.plus::before,
@@ -72,21 +74,30 @@
         position: absolute;
         top: 50%;
         left: 50%;
-        width: clamp(42px, 4vw, 70px);
-        height: clamp(11px, 0.95vw, 16px);
+        width: 46%;
+        height: 10%;
         border-radius: 999px;
         background: var(--icon-accent);
         transform: translate(-50%, -50%);
       }
 
       .logo.plus::after {
-        transform: translate(-50%, -50%) rotate(90deg);
+        width: 10%;
+        height: 46%;
       }
 
       @media (max-width: 700px) {
         .logos {
-          gap: clamp(16px, 6vw, 36px);
-          transform: translateY(3vh);
+          transform: translateY(clamp(4px, 3vh, 20px));
+        }
+      }
+
+      @media (prefers-reduced-motion: reduce) {
+        *,
+        *::before,
+        *::after {
+          animation: none !important;
+          transition: none !important;
         }
       }
     </style>
diff --git a/examples/connect-your-tools.html b/examples/connect-your-tools.html
index 7f8c5dcf..1de3ddbf 100644
--- a/examples/connect-your-tools.html
+++ b/examples/connect-your-tools.html
@@ -6,151 +6,106 @@
     <title>Connect your tools</title>
     <style>
       :root {
-        --bg-left: #6b46db;
-        --bg-mid: #9e56b0;
-        --bg-right: #ef6e68;
-        --icon-white: #f4f4f5;
-        --icon-accent: #b3569a;
+        --bg-start: #6544dc;
+        --bg-mid: #9a54b5;
+        --bg-end: #ec6d74;
+        --icon-bg: #eeeeef;
+        --icon-accent: #b3579f;
       }
 
       * {
         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;
+        overflow: hidden;
+        background: linear-gradient(125deg, var(--bg-start) 2%, var(--bg-mid) 51%, var(--bg-end) 98%);
+        font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
       }
 
-      .icons {
+      .logos {
+        --logo-size: clamp(108px, 11vw, 168px);
         display: flex;
         align-items: center;
-        justify-content: center;
-        gap: 54px;
-        transform: translateY(12px);
+        gap: clamp(24px, 5vw, 64px);
+        transform: translateY(clamp(10px, 5vh, 52px));
+        contain: layout paint;
       }
 
-      .circle {
-        width: 154px;
+      .logo {
+        width: var(--logo-size);
         aspect-ratio: 1;
         border-radius: 50%;
-        background: var(--icon-white);
+        background: var(--icon-bg);
         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 {
+      .logo.linear::before {
+        content: "";
         position: absolute;
-        width: 128px;
-        height: 128px;
+        inset: 0;
         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 {
+        background: linear-gradient(
+          45deg,
+          transparent 38%,
+          var(--icon-accent) 38% 43.4%,
+          transparent 43.4% 51.6%,
+          var(--icon-accent) 51.6% 57%,
+          transparent 57% 65.2%,
+          var(--icon-accent) 65.2% 70.6%,
+          transparent 70.6% 78.8%,
+          var(--icon-accent) 78.8% 84.2%,
+          transparent 84.2%
+        );
+      }
+
+      .logo.plus::before,
+      .logo.plus::after {
         content: "";
         position: absolute;
+        top: 50%;
+        left: 50%;
+        width: 46%;
+        height: 10%;
+        border-radius: 999px;
         background: var(--icon-accent);
-        border-radius: 8px;
+        transform: translate(-50%, -50%);
       }
 
-      .plus::before {
-        width: 66px;
-        height: 18px;
+      .logo.plus::after {
+        width: 10%;
+        height: 46%;
       }
 
-      .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;
+      @media (max-width: 700px) {
+        .logos {
+          transform: translateY(clamp(4px, 3vh, 20px));
         }
+      }
 
-        .plus::after {
-          width: 14px;
-          height: 52px;
+      @media (prefers-reduced-motion: reduce) {
+        *,
+        *::before,
+        *::after {
+          animation: none !important;
+          transition: none !important;
         }
       }
     </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 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>
   </body>
 </html>