Skip to content

Add WWW-4 'Import your data' static mock page #13

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 3 commits into from
May 17, 2026
Merged

Add WWW-4 'Import your data' static mock page #13

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
37a4fad
Add WWW-4 import-your-data visual mock
NguyenCuong1989 Mar 29, 2026
f301de5
Merge branch 'main' into codex/linear-mention-www-4-import-your-data-4
NguyenCuong1989 May 17, 2026
7b709f5
Update import-your-data.html
NguyenCuong1989 May 17, 2026
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
4 changes: 4 additions & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -144,6 +144,10 @@ If you need a custom workflow, you can build directly on the [Linear API](https:

For the Linear WWW-3 visual, open `connect-your-tools.html` in a browser to see the recreated "Connect your tools" gradient + icon composition.


## 🌐 Import your data mock

For the Linear `WWW-4` visual, open `import-your-data.html` in a browser to see the recreated gradient hero, integration logos, and migration preview section.
Comment on lines +147 to +150
For LIN-5 handoff and future link-development maintenance, use: `docs/lin-5-link-development-checklist.md`.

## 📢 Feedback and Participation
Expand Down
149 changes: 149 additions & 0 deletions import-your-data.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,149 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Import your data</title>
<style>
:root {
--bg-left: #cc8ac8;
--bg-mid: #9f63d9;
--bg-right: #6443d7;
--surface: #ffffff;
--text: #111218;
--muted: #63667a;
}

* {
box-sizing: border-box;
}

body {
margin: 0;
font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
background: #f4f5f8;
color: var(--text);
}

.hero {
min-height: 66vh;
display: grid;
place-items: center;
background: linear-gradient(118deg, var(--bg-left) 2%, var(--bg-mid) 52%, var(--bg-right) 98%);
padding: 56px 24px;
}

.logo-row {
display: flex;
align-items: center;
justify-content: center;
gap: clamp(28px, 5.5vw, 76px);
}

.logo {
width: clamp(44px, 5vw, 80px);
height: clamp(44px, 5vw, 80px);
color: #f6f7fb;
}

.content {
max-width: 1040px;
margin: 0 auto;
padding: 52px 20px 72px;
}

h1 {
margin: 0 0 12px;
font-size: clamp(32px, 5vw, 44px);
}

.lead {
margin: 0;
font-size: clamp(16px, 2vw, 20px);
color: var(--muted);
}

.panel {
margin-top: 26px;
background: var(--surface);
border: 1px solid #e6e7eb;
border-radius: 16px;
box-shadow: 0 16px 38px rgba(17, 18, 24, 0.09);
padding: 14px;
}

.panel img {
width: 100%;
border-radius: 12px;
display: block;
}

.links {
margin-top: 28px;
display: grid;
gap: 10px;
}

.links a {
color: #4c3fd4;
text-decoration: none;
font-weight: 600;
}

.links a:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<header class="hero" aria-label="Integration logos on gradient background">
<div class="logo-row" aria-hidden="true">
<svg viewBox="0 0 64 64" class="logo" role="img" aria-label="Asana">
<circle cx="32" cy="14" r="9" fill="currentColor" />
<circle cx="18" cy="38" r="9" fill="currentColor" />
<circle cx="46" cy="38" r="9" fill="currentColor" />
</svg>

<svg viewBox="0 0 64 64" class="logo" role="img" aria-label="Jira">
<path fill="currentColor" d="M32 6 58 32 32 58 6 32zm0 13.6L19.6 32 32 44.4 44.4 32z" />
</svg>

<svg viewBox="0 0 64 64" class="logo" role="img" aria-label="Linear">
<rect x="8" y="8" width="48" height="48" rx="15" ry="15" fill="none" stroke="currentColor" stroke-width="6" />
<path d="M17 17 47 47" stroke="currentColor" stroke-width="7" stroke-linecap="round" />
<path d="M26 17h21" stroke="currentColor" stroke-width="7" stroke-linecap="round" />
<path d="M17 47h21" stroke="currentColor" stroke-width="7" stroke-linecap="round" />
</svg>

<svg viewBox="0 0 64 64" class="logo" role="img" aria-label="GitHub">
Comment on lines +99 to +118
<circle cx="32" cy="32" r="30" fill="currentColor" />
<path
d="M32.2 17.5c-8.8 0-15.9 7.1-15.9 15.8 0 6.9 4.5 12.7 10.8 14.8.8.1 1.1-.4 1.1-.8v-2.9c-4.4.9-5.3-1.8-5.3-1.8-.7-1.8-1.7-2.2-1.7-2.2-1.4-.9.1-.9.1-.9 1.5.1 2.4 1.6 2.4 1.6 1.4 2.3 3.7 1.7 4.6 1.3.1-1 .5-1.7 1-2.1-3.6-.4-7.4-1.8-7.4-8 0-1.8.6-3.3 1.6-4.4-.2-.4-.7-2 .1-4.3 0 0 1.3-.4 4.4 1.7a15.1 15.1 0 0 1 8 0c3-2.1 4.3-1.7 4.3-1.7.9 2.3.4 3.9.2 4.3 1 1.1 1.6 2.6 1.6 4.4 0 6.2-3.8 7.6-7.4 8 .6.5 1.1 1.4 1.1 2.8v4.1c0 .5.3 1 .9.8a15.8 15.8 0 0 0 10.8-14.8c0-8.7-7.1-15.8-15.9-15.8Z"
fill="#8d62d8"
/>
</svg>
Comment on lines +118 to +124
</div>
</header>

<main class="content">
<h1>Import your data</h1>
<p class="lead">Sync data between Linear and your other tools.</p>

<div class="links" aria-label="Migration resources">
<a href="https://linear.app/switch/pitch-guide">Pitch Linear</a>
<a href="https://linear.app/switch/pilot-guide">Run a pilot</a>
<a href="https://linear.app/switch/migration-guide">Migration guide</a>
</div>

<section class="panel" aria-label="Linear migration preview">
<img
src="https://uploads.linear.app/fe63b3e2-bf87-46c0-8784-cd7d639287c8/191f6985-8562-4f62-9482-a094b69c4756/0e4ff63b-3da2-4699-912b-04afb68511e8"
alt="Linear migration workflow"
loading="lazy"
decoding="async"
style="aspect-ratio: 16 / 9; width: 100%; height: auto;"
/>
</section>
Comment thread
sourcery-ai[bot] marked this conversation as resolved.
</main>
</body>
</html>