From 8e64e1054207595f4e703239d3330e340856ec77 Mon Sep 17 00:00:00 2001 From: Lucy Date: Fri, 15 May 2026 15:49:16 -0400 Subject: [PATCH 1/2] Rework solutions section: 3-col grid, drop TVC, move Agentic Wallets MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Remove Turnkey Verifiable Cloud card - Move Agentic Wallets from Embedded Wallets to Company Wallets - Replace vertical list layout with 3-col CSS grid (1-col at ≤768px) - Switch card internals to subgrid so divider line aligns across all 3 cards - Vertical card design: thumbnail → title → desc → divider → links Co-Authored-By: Claude Sonnet 4.6 --- styles.css | 220 ++++++---------------------------------------------- welcome.mdx | 18 +---- 2 files changed, 26 insertions(+), 212 deletions(-) diff --git a/styles.css b/styles.css index a805ed1a..bafbe707 100644 --- a/styles.css +++ b/styles.css @@ -561,10 +561,6 @@ a.nav-tabs-item[href="/welcome"][data-active="true"]::before { /* Tablet — Figma Responsive frame (1000px) */ @media (max-width: 1000px) { - .tk-solutions-grid { - gap: 0; - } - .tk-whitepaper-inner { align-items: flex-start; } @@ -1193,41 +1189,32 @@ a.nav-tabs-item[href="/welcome"][data-active="true"]::before { } .tk-solutions-grid { - display: flex; - flex-direction: column; - gap: 24px; + display: grid; + grid-template-columns: repeat(3, 1fr); + column-gap: 24px; + row-gap: 12px; width: 100%; } .tk-solution-card { + grid-row: span 4; display: grid; - grid-template-columns: 120px minmax(0, 1fr); - grid-template-areas: - "thumb title" - "thumb desc" - "thumb links"; - column-gap: 40px; - row-gap: 8px; - align-items: start; + grid-template-rows: subgrid; box-sizing: border-box; - width: 100%; - padding: 20px 48px; + padding: 24px; background: rgba(0, 0, 0, 0.02); border: 1px solid rgba(13, 12, 17, 0.1); border-radius: 16px; } -@media (min-width: 1001px) { - .dark .tk-solution-card { - background: rgba(255, 255, 255, 0.02); - border-color: rgba(255, 255, 255, 0.12); - } +.dark .tk-solution-card { + background: rgba(255, 255, 255, 0.02); + border-color: rgba(255, 255, 255, 0.12); } .tk-solution-thumbnail { - grid-area: thumb; - width: 120px; - height: 120px; + width: 100px; + height: 100px; flex-shrink: 0; } @@ -1240,7 +1227,6 @@ a.nav-tabs-item[href="/welcome"][data-active="true"]::before { .tk-solution-card > .tk-solution-title, .tk-solution-card > .tk-solution-title-row { - grid-area: title; min-width: 0; } @@ -1254,7 +1240,6 @@ a.nav-tabs-item[href="/welcome"][data-active="true"]::before { } .tk-solution-title-row .tk-solution-title { - grid-area: unset; width: auto; max-width: none; } @@ -1281,7 +1266,6 @@ a.nav-tabs-item[href="/welcome"][data-active="true"]::before { .dark .tk-solution-title { color: #f9fafb; } .tk-solution-desc { - grid-area: desc; margin: 0; font-family: Inter, sans-serif; font-size: 14px; @@ -1294,12 +1278,17 @@ a.nav-tabs-item[href="/welcome"][data-active="true"]::before { .dark .tk-solution-desc { color: #a1a1aa; } .tk-solution-links { - grid-area: links; display: flex; - flex-wrap: wrap; - gap: 16px 28px; + flex-direction: column; + gap: 12px; align-items: flex-start; min-width: 0; + border-top: 1px solid rgba(0, 0, 0, 0.12); + padding-top: 16px; +} + +.dark .tk-solution-links { + border-top-color: rgba(255, 255, 255, 0.06); } .tk-solution-link { @@ -1309,177 +1298,18 @@ a.nav-tabs-item[href="/welcome"][data-active="true"]::before { font-weight: 500; color: #4C48FF; transition: opacity 0.15s; - white-space: nowrap; -} - -/* Solutions list — Figma 169:4651 (≤1000px) */ -@media (max-width: 1000px) { - .tk-solution-title-long { - display: none; - } - - .tk-solution-title-short { - display: inline; - } } -@media (max-width: 1000px) and (min-width: 869px) { - .tk-solutions-grid { - gap: 0; - } - - .tk-solution-card { - grid-template-columns: 220px minmax(0, 1fr) 100px; - grid-template-areas: - "title desc thumb" - "title links thumb"; - column-gap: 20px; - row-gap: 20px; - padding: 0; - background: transparent; - border: none; - border-radius: 0; - } - - .dark .tk-solution-card { - background: transparent; - border-color: transparent; - } - - .tk-solution-card + .tk-solution-card { - border-top: 1px solid rgba(0, 0, 0, 0.12); - margin-top: 24px; - padding-top: 24px; - } - - .dark .tk-solution-card + .tk-solution-card { - border-top-color: rgba(255, 255, 255, 0.06); - } - - .tk-solution-thumbnail { - width: 100px; - height: 100px; - margin-left: 20px; - align-self: start; - } - - .tk-solution-card > .tk-solution-title, - .tk-solution-card > .tk-solution-title-row { - font-size: 20px; - line-height: normal; - width: 220px; - max-width: 220px; - } - - .tk-solution-title-row { - width: fit-content; - max-width: 220px; - } - - .tk-solution-title-row .tk-solution-title { - font-size: 20px; - line-height: normal; - } - - .tk-solution-links { - flex-direction: column; - gap: 16px; - align-items: flex-start; - } - - .tk-solution-link { - white-space: nowrap; - } -} - -@media (max-width: 868px) { - .tk-solution-title-long { - display: inline; - } - - .tk-solution-title-short { - display: none; - } +.tk-solution-link:hover { opacity: 0.75; color: #4C48FF; } +.dark .tk-solution-link { color: #5B68FF; } +.dark .tk-solution-link:hover { opacity: 0.75; } +@media (max-width: 768px) { .tk-solutions-grid { - gap: 0; - } - - .tk-solution-card { - position: relative; - grid-template-columns: minmax(0, 1fr); - grid-template-areas: - "title" - "desc" - "links"; - column-gap: 0; - row-gap: 8px; - padding: 0 116px 0 0; /* reserve space for thumbnail top-right */ - background: transparent; - border: none; - border-radius: 0; - } - - .dark .tk-solution-card { - background: transparent; - border-color: transparent; - } - - .tk-solution-card + .tk-solution-card { - border-top: 1px solid rgba(0, 0, 0, 0.12); - margin-top: 24px; - padding-top: 24px; - } - - .dark .tk-solution-card + .tk-solution-card { - border-top-color: rgba(255, 255, 255, 0.06); - } - - .tk-solution-thumbnail { - position: absolute; - top: 12px; - right: 0; - width: 100px; - height: 100px; - margin: 0; - grid-area: unset; - } - - .tk-solution-card > .tk-solution-title, - .tk-solution-card > .tk-solution-title-row { - font-size: 20px; - line-height: normal; - width: auto; - max-width: none; - padding-right: 0; - } - - .tk-solution-title-row { - max-width: none; - flex-wrap: wrap; - padding-right: 0; - } - - .tk-solution-desc { - margin-top: 0; - } - - .tk-solution-links { - flex-direction: column; - gap: 12px; - align-items: flex-start; - margin-top: 12px; /* 8px row-gap + 12px ≈ prior 20px desc→links */ - } - - .tk-solution-link { - white-space: normal; + grid-template-columns: 1fr; } } -.tk-solution-link:hover { opacity: 0.75; color: #4C48FF; } -.dark .tk-solution-link { color: #5B68FF; } -.dark .tk-solution-link:hover { opacity: 0.75; } - /* ============================================================ Features section ============================================================ */ diff --git a/welcome.mdx b/welcome.mdx index 34cd6c9f..658ca2a8 100644 --- a/welcome.mdx +++ b/welcome.mdx @@ -151,7 +151,6 @@ mode: "custom" Embedded Consumer Wallets Embedded Business Wallets Embedded Wallet-as-a-Service - Agentic Wallets @@ -164,6 +163,7 @@ mode: "custom"
Payment Orchestration Smart Contract Management + Agentic Wallets
@@ -179,22 +179,6 @@ mode: "custom" -
-
- Turnkey Verifiable Cloud -
-
- - Turnkey Verifiable Cloud - TVC - - Beta -
-

Run any code in isolated, verifiable secure enclaves powered by Turnkey's trusted infrastructure.

-
- Turnkey Verifiable Cloud -
-
From d6d7dd308f1d99084d0ca42441a0bad4d85d0f0f Mon Sep 17 00:00:00 2001 From: Lucy Date: Fri, 15 May 2026 15:51:04 -0400 Subject: [PATCH 2/2] Fix Agentic Wallets link to company-wallets use-cases path Co-Authored-By: Claude Sonnet 4.6 --- welcome.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/welcome.mdx b/welcome.mdx index 658ca2a8..3757c974 100644 --- a/welcome.mdx +++ b/welcome.mdx @@ -163,7 +163,7 @@ mode: "custom"
Payment Orchestration Smart Contract Management - Agentic Wallets + Agentic Wallets