From 219700e7debfc43ad4256a771950a1815d3c29a0 Mon Sep 17 00:00:00 2001
From: NgCuong <196793856+NguyenCuong1989@users.noreply.github.com>
Date: Fri, 27 Feb 2026 10:22:13 +0700
Subject: [PATCH] Add connect-your-tools integration hero mockup

---
 connect-your-tools.html | 106 ++++++++++++++++++++++++++++++++++++++++
 1 file changed, 106 insertions(+)
 create mode 100644 connect-your-tools.html
diff --git a/connect-your-tools.html b/connect-your-tools.html
new file mode 100644
index 00000000..b689c33d
--- /dev/null
+++ b/connect-your-tools.html
@@ -0,0 +1,106 @@
+<!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-start: #6e4ad8;
+        --bg-mid: #9f53b1;
+        --bg-end: #ea6a6f;
+        --icon-bg: #ececec;
+        --icon-accent: #b5569d;
+      }
+
+      * {
+        box-sizing: border-box;
+      }
+
+      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%);
+        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;
+      }
+
+      .logo {
+        width: 220px;
+        height: 220px;
+        border-radius: 50%;
+        background: var(--icon-bg);
+        position: relative;
+      }
+
+      .logo.linear {
+        overflow: hidden;
+      }
+
+      .logo.linear::before {
+        content: "";
+        position: absolute;
+        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%);
+      }
+
+      .logo.plus::before,
+      .logo.plus::after {
+        content: "";
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        width: 100px;
+        height: 22px;
+        border-radius: 11px;
+        background: var(--icon-accent);
+        transform: translate(-50%, -50%);
+      }
+
+      .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>
+    <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>
