diff --git a/README.md b/README.md
index 85562a92..73918a7f 100644
--- a/README.md
+++ b/README.md
@@ -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.
 For LIN-5 handoff and future link-development maintenance, use: `docs/lin-5-link-development-checklist.md`.
 
 ## 📢 Feedback and Participation
diff --git a/import-your-data.html b/import-your-data.html
new file mode 100644
index 00000000..ed473cd7
--- /dev/null
+++ b/import-your-data.html
@@ -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">
+          <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>
+      </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>
+    </main>
+  </body>
+</html>
