From 502406547e6a9b00e71ad2a677ae91e188e1c2c6 Mon Sep 17 00:00:00 2001
From: NgCuong <196793856+NguyenCuong1989@users.noreply.github.com>
Date: Sun, 29 Mar 2026 19:24:21 +0700
Subject: [PATCH] refine connect-your-tools hero responsiveness and geometry

---
 connect-your-tools.html          |  62 +++++++-----
 examples/connect-your-tools.html | 168 ++++++++++++-------------------
 2 files changed, 101 insertions(+), 129 deletions(-)

diff --git a/connect-your-tools.html b/connect-your-tools.html
index ca4a7459..2ee2e201 100644
--- a/connect-your-tools.html
+++ b/connect-your-tools.html
@@ -6,11 +6,14 @@
     <title>Connect your tools</title>
     <style>
       :root {
-        --bg-start: #6544dc;
-        --bg-mid: #9a54b5;
-        --bg-end: #ec6d74;
-        --icon-bg: #eeeeef;
-        --icon-accent: #b3579f;
+        --bg-start: #6746db;
+        --bg-mid: #9d56b1;
+        --bg-end: #ee6e6a;
+        --icon-bg: #f1f1f3;
+        --icon-accent: #b4579f;
+        --icon-size: clamp(96px, 11.2vw, 156px);
+        --icon-gap: clamp(24px, 5vw, 64px);
+        --cluster-shift-y: clamp(0px, 3.8vh, 42px);
       }
 
       * {
@@ -24,26 +27,31 @@
 
       body {
         margin: 0;
+        min-height: 100vh;
+        overflow: hidden;
         display: grid;
         place-items: center;
-        background: linear-gradient(125deg, var(--bg-start) 2%, var(--bg-mid) 51%, var(--bg-end) 98%);
+        background: linear-gradient(124deg, var(--bg-start) 4%, var(--bg-mid) 53%, var(--bg-end) 98%);
         font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
       }
 
       .logos {
         display: flex;
         align-items: center;
-        gap: clamp(38px, 5vw, 84px);
-        transform: translateY(5vh);
+        justify-content: center;
+        gap: var(--icon-gap);
+        transform: translateY(var(--cluster-shift-y));
+        contain: layout paint;
       }
 
       .logo {
-        width: clamp(108px, 11vw, 168px);
+        width: var(--icon-size);
         aspect-ratio: 1;
         border-radius: 50%;
         background: var(--icon-bg);
         position: relative;
         overflow: hidden;
+        flex: 0 0 auto;
       }
 
       .logo.linear::before {
@@ -54,15 +62,15 @@
         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%
+            transparent 37.6%,
+            var(--icon-accent) 37.6% 43.2%,
+            transparent 43.2% 50.9%,
+            var(--icon-accent) 50.9% 56.5%,
+            transparent 56.5% 64.2%,
+            var(--icon-accent) 64.2% 69.8%,
+            transparent 69.8% 77.5%,
+            var(--icon-accent) 77.5% 83.1%,
+            transparent 83.1%
           );
       }
 
@@ -72,8 +80,8 @@
         position: absolute;
         top: 50%;
         left: 50%;
-        width: clamp(42px, 4vw, 70px);
-        height: clamp(11px, 0.95vw, 16px);
+        width: 44%;
+        height: 10.5%;
         border-radius: 999px;
         background: var(--icon-accent);
         transform: translate(-50%, -50%);
@@ -83,10 +91,16 @@
         transform: translate(-50%, -50%) rotate(90deg);
       }
 
-      @media (max-width: 700px) {
-        .logos {
-          gap: clamp(16px, 6vw, 36px);
-          transform: translateY(3vh);
+      @media (max-width: 480px) {
+        :root {
+          --cluster-shift-y: clamp(0px, 2vh, 16px);
+        }
+      }
+
+      @media (prefers-reduced-motion: reduce) {
+        * {
+          animation: none !important;
+          transition: none !important;
         }
       }
     </style>
diff --git a/examples/connect-your-tools.html b/examples/connect-your-tools.html
index 7f8c5dcf..2ee2e201 100644
--- a/examples/connect-your-tools.html
+++ b/examples/connect-your-tools.html
@@ -6,151 +6,109 @@
     <title>Connect your tools</title>
     <style>
       :root {
-        --bg-left: #6b46db;
-        --bg-mid: #9e56b0;
-        --bg-right: #ef6e68;
-        --icon-white: #f4f4f5;
-        --icon-accent: #b3569a;
+        --bg-start: #6746db;
+        --bg-mid: #9d56b1;
+        --bg-end: #ee6e6a;
+        --icon-bg: #f1f1f3;
+        --icon-accent: #b4579f;
+        --icon-size: clamp(96px, 11.2vw, 156px);
+        --icon-gap: clamp(24px, 5vw, 64px);
+        --cluster-shift-y: clamp(0px, 3.8vh, 42px);
       }
 
       * {
         box-sizing: border-box;
       }
 
+      html,
+      body {
+        height: 100%;
+      }
+
       body {
         margin: 0;
         min-height: 100vh;
+        overflow: hidden;
         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(124deg, var(--bg-start) 4%, var(--bg-mid) 53%, var(--bg-end) 98%);
+        font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
       }
 
-      .icons {
+      .logos {
         display: flex;
         align-items: center;
         justify-content: center;
-        gap: 54px;
-        transform: translateY(12px);
+        gap: var(--icon-gap);
+        transform: translateY(var(--cluster-shift-y));
+        contain: layout paint;
       }
 
-      .circle {
-        width: 154px;
+      .logo {
+        width: var(--icon-size);
         aspect-ratio: 1;
         border-radius: 50%;
-        background: var(--icon-white);
+        background: var(--icon-bg);
         position: relative;
-      }
-
-      .linear-mark {
         overflow: hidden;
+        flex: 0 0 auto;
       }
 
-      .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 37.6%,
+            var(--icon-accent) 37.6% 43.2%,
+            transparent 43.2% 50.9%,
+            var(--icon-accent) 50.9% 56.5%,
+            transparent 56.5% 64.2%,
+            var(--icon-accent) 64.2% 69.8%,
+            transparent 69.8% 77.5%,
+            var(--icon-accent) 77.5% 83.1%,
+            transparent 83.1%
+          );
+      }
+
+      .logo.plus::before,
+      .logo.plus::after {
         content: "";
         position: absolute;
+        top: 50%;
+        left: 50%;
+        width: 44%;
+        height: 10.5%;
+        border-radius: 999px;
         background: var(--icon-accent);
-        border-radius: 8px;
+        transform: translate(-50%, -50%);
       }
 
-      .plus::before {
-        width: 66px;
-        height: 18px;
+      .logo.plus::after {
+        transform: translate(-50%, -50%) rotate(90deg);
       }
 
-      .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: 480px) {
+        :root {
+          --cluster-shift-y: clamp(0px, 2vh, 16px);
         }
+      }
 
-        .plus::after {
-          width: 14px;
-          height: 52px;
+      @media (prefers-reduced-motion: reduce) {
+        * {
+          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>