Skip to content

Solutions section: 3-col grid, drop TVC, move Agentic Wallets #664

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
grahamritter merged 2 commits into from
May 15, 2026
Merged

Solutions section: 3-col grid, drop TVC, move Agentic Wallets #664

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
8e64e10
Rework solutions section: 3-col grid, drop TVC, move Agentic Wallets
lucy-aziz May 15, 2026
d6d7dd3
Fix Agentic Wallets link to company-wallets use-cases path
lucy-aziz May 15, 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
220 changes: 25 additions & 195 deletions styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Expand Down Expand Up @@ -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;
}

Expand All @@ -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;
}

Expand All @@ -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;
}
Expand All @@ -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;
Expand All @@ -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 {
Expand All @@ -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
============================================================ */
Expand Down
18 changes: 1 addition & 17 deletions welcome.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -151,7 +151,6 @@ mode: "custom"
<a href="/embedded-wallets/code-examples/embedded-consumer-wallet" className="tk-solution-link">Embedded Consumer Wallets</a>
<a href="/products/embedded-business-wallets/overview" className="tk-solution-link">Embedded Business Wallets</a>
<a href="/embedded-wallets/embedded-waas" className="tk-solution-link">Embedded Wallet-as-a-Service</a>
<a href="/products/embedded-wallets/features/agentic-wallets" className="tk-solution-link">Agentic Wallets</a>
</div>
</div>

Expand All @@ -164,6 +163,7 @@ mode: "custom"
<div className="tk-solution-links">
<a href="/company-wallets/code-examples/payment-orchestration" className="tk-solution-link">Payment Orchestration</a>
<a href="/company-wallets/code-examples/smart-contract-management" className="tk-solution-link">Smart Contract Management</a>
<a href="/company-wallets/use-cases/agentic-wallets" className="tk-solution-link">Agentic Wallets</a>
</div>
</div>

Expand All @@ -179,22 +179,6 @@ mode: "custom"
</div>
</div>

<div className="tk-solution-card">
<div className="tk-solution-thumbnail">
<img src="/images/solution-verifiable-cloud.png" alt="Turnkey Verifiable Cloud" noZoom />
</div>
<div className="tk-solution-title-row">
<a href="/products/verifiable-cloud/overview" className="tk-solution-title" title="Turnkey Verifiable Cloud">
<span className="tk-solution-title-long">Turnkey Verifiable Cloud</span>
<span className="tk-solution-title-short">TVC</span>
</a>
<span className="tk-badge">Beta</span>
</div>
<p className="tk-solution-desc">Run any code in isolated, verifiable secure enclaves powered by Turnkey's trusted infrastructure.</p>
<div className="tk-solution-links">
<a href="/products/verifiable-cloud/overview" className="tk-solution-link">Turnkey Verifiable Cloud</a>
</div>
</div>

</div>

Expand Down