Skip to content

Add connect-your-tools integration hero mockup #6

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
NguyenCuong1989 merged 1 commit into from
Feb 27, 2026
Merged

Add connect-your-tools integration hero mockup #6

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
106 changes: 106 additions & 0 deletions connect-your-tools.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
}
Comment on lines +29 to +33
Copy link
Copy Markdown

@sourcery-ai sourcery-ai Bot Feb 27, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

suggestion: Hãy cân nhắc xử lý các viewport rất hẹp để tránh bị tràn ngang.

Với chiều rộng logo cố định (220px/160px) cộng với gap cố định, layout có thể vượt quá các màn hình rất nhỏ (ví dụ rộng 320px) và gây ra cuộn ngang. Hãy cân nhắc cho phép wrap (flex-wrap: wrap), thu nhỏ logo thêm ở các breakpoint nhỏ hơn, hoặc dùng clamp() cho kích thước logo responsive.

Suggested change
.logos {
display: flex;
align-items: center;
gap: 84px;
}
.logos {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: 84px;
}
@media (max-width: 480px) {
.logos {
gap: 32px;
}
}
Original comment in English

suggestion: Consider handling very narrow viewports to avoid horizontal overflow.

With fixed logo widths (220px/160px) plus a fixed gap, the layout can exceed very small screens (e.g., 320px wide) and cause horizontal scrolling. Consider allowing wrapping (flex-wrap: wrap), shrinking the logos further on smaller breakpoints, or using clamp() for responsive logo sizing.

Suggested change
.logos {
display: flex;
align-items: center;
gap: 84px;
}
.logos {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: 84px;
}
@media (max-width: 480px) {
.logos {
gap: 32px;
}
}


.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;
}
Comment on lines +87 to +90
Copy link
Copy Markdown

@chatgpt-codex-connector chatgpt-codex-connector Bot Feb 27, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P2 Badge Make mobile layout fit narrow viewports

The mobile breakpoint still hard-codes a minimum composition width of 160 + 160 + 40 = 360px, so on common 320px-wide devices the two logos overflow the viewport and introduce horizontal clipping/scrolling instead of scaling down. This means the “responsive sizing” behavior breaks for the smallest phones and should be adjusted (e.g., further scaling or wrapping) for widths below 360px.

Useful? React with 👍 / 👎.


.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>
Comment on lines +101 to +102
Copy link
Copy Markdown

@sourcery-ai sourcery-ai Bot Feb 27, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

suggestion: Làm rõ ngữ nghĩa cho các logo minh họa để cải thiện hành vi của trình đọc màn hình.

aria-label trên các div generic được các công cụ hỗ trợ xử lý không nhất quán. Vì đây là các phần tử minh họa, hoặc là hãy xem cả nhóm như một hình ảnh (ví dụ gán cho <main> hoặc một <figure> lồng bên trong role="img" với một aria-label duy nhất và bỏ nhãn trên các div con), hoặc thêm role="img" vào từng div .logo nếu bạn muốn chúng được thông báo riêng. Cách này giúp đầu ra của trình đọc màn hình nhất quán hơn.

Original comment in English

suggestion: Clarify semantics for the illustrative logos to improve screen reader behavior.

aria-label on generic divs is handled inconsistently by assistive tech. Since these are illustrative, either treat the group as one image (e.g., give <main> or a nested <figure> role="img" with a single aria-label and remove labels from the child divs), or add role="img" to each .logo div if they should be announced separately. This leads to more predictable screen reader output.

<div class="logo plus" aria-label="Add integration"></div>
</main>
</body>
</html>