Skip to content

fix(landing): give the country lockups the partner-tile treatment - #2692

Merged
0xkkonrad merged 1 commit into
lp-refreshfrom
fix/qrpay-lockup-house-tiles
Aug 14, 2026
Merged

fix(landing): give the country lockups the partner-tile treatment#2692
0xkkonrad merged 1 commit into
lp-refreshfrom
fix/qrpay-lockup-house-tiles

Conversation

@0xkkonrad

Copy link
Copy Markdown
Contributor

Stacked on lp-refresh (#2690), which is where this fold's background moved to blue and where Manteca.tsx is already being changed.

The bug

The Pix wordmark inside pix-brz.svg is mint #32BCAD. Against the homepage's #90A8ED that is 1.01:1 — the same luminance as the ground. It reads as a rendering fault, not a logo.

It was already failing on cream (2.15:1); the blue only made it obvious. And a lighter card does not rescue it — the mint measures 2.35:1 on white and 1.17:1 on pink. Only the black mark clears 4.5:1 anywhere.

against #90A8ED ratio
Pix mint #32BCAD 1.01:1 fail
Argentine flag blue #3F96D7 1.37:1 fail
Brazilian flag green #177D32 2.24:1 fail
MercadoPago navy #0A0080 6.80:1 pass
black — what this PR uses 9.01:1 pass

What changed

Each lockup now uses what #regulated-rails already ships one fold up: the pink partner tile, 1px black border, 4px hard shadow, holding the black mark on the white inner card that fold gives PIX and MercadoPago. That inner card is not new here — RegulatedRails.tsx already flags those two marks onWhite because they are line art rather than heavy wordmarks and go weak straight on the pink. Black on white in the tile is 21:1.

The flags stay, but as their own assets drawn to one rule. The old SVGs baked flag and logo into a single file, so the logo could not move into a tile without splitting them. mepa-arg.svg also carried no black outline at all, which is why Argentina dissolved into the background; both flags now share the same 3px black edge and hold their silhouette on either ground.

Asset fix, independent of this fold: pix-logo.svg declared viewBox="0 0 88 38" while its ink spans x = −15.7…87.7, so the left petal of the diamond was sheared off. That is visible on the rails marquee today. Widened to -15.5 0 102 38.

Affordance: both links keep their hrefs and now look like links — the tile lifts on hover and an underlined Learn more → sits under each, reusing the existing landingLearnMore key, so no locale files change.

Mobile: the pair sits above the phone, so the sticky CTA covers the screenshot instead of a link. Mobile and desktop now share one block via md:contents, which drops the duplicated markup from four link elements to two.

mepa-arg.svg and pix-brz.svg are deleted — Manteca.tsx was their only consumer.

Checks

  • pnpm typecheck clean
  • pnpm test — 232 suites, 2973 passed
  • pnpm prettier --check . clean

Not verified locally: the dev server would not serve on this sandbox (inotify watch limit exhausted, 36s+ compiles). The fold needs an eyes-on check on the Vercel preview before merge.

Open for review

  • The PIX mark carries a "powered by Banco Central" strapline that is unreadable below ~40px. Left as-is here so the mark matches the rails fold exactly; a descriptor-free asset would be the real fix.
  • The flags are hand-drawn simplifications. Worth a designer's eye at other sizes.

The Pix wordmark in pix-brz.svg is mint #32BCAD. Against the homepage's
#90A8ED that is 1.01:1 — the same luminance as the ground — so it reads as
a rendering fault rather than a logo. It failed on cream too (2.15:1); the
blue only made it obvious. A lighter card does not rescue it either: the
mint is 2.35:1 on white and 1.17:1 on pink. Only the black mark clears 4.5:1.

So each lockup now uses what #regulated-rails already ships one fold up: the
pink partner tile, 1px black border and 4px hard shadow, holding the black
mark on the white inner card that fold gives PIX and MercadoPago (both are
line art, not heavy wordmarks, and go weak straight on the pink).

The flags stay, but as their own assets drawn to one rule — the old SVGs
baked flag and logo into a single file, so the logo could not move into a
tile without splitting them. mepa-arg.svg also carried no outline at all,
which is why Argentina dissolved into the background at 1.37:1; both flags
now have the same 3px black edge and hold their silhouette on either ground.

Also fixes the asset itself: pix-logo.svg declared viewBox "0 0 88 38" while
its ink spans x = -15.7..87.7, so the left petal of the diamond was sheared
off — visible on the rails marquee today, not just here.

Both links keep their hrefs and now look like links: the tile lifts on hover
and an underlined "Learn more ->" sits under each, reusing landingLearnMore,
so no locale file changes. On mobile the pair sits above the phone, so the
sticky CTA covers the screenshot instead of a link. Mobile and desktop share
one block via md:contents, which drops the duplicated markup from four link
elements to two.
@vercel

vercel Bot commented Aug 14, 2026

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
peanut-wallet Ready Ready Preview Aug 14, 2026 6:27am

Request Review

@coderabbitai

coderabbitai Bot commented Aug 14, 2026

Copy link
Copy Markdown
Contributor

Important

Review skipped

Auto reviews are disabled on base/target branches other than the default branch.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro Plus

Run ID: 6eae7b40-5bd9-4fa8-ad7a-6cede2bc9394

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

  • 🔍 Trigger review

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands.

@0xkkonrad

Copy link
Copy Markdown
Contributor Author

Verified on the preview

https://peanut-wallet-git-fix-qrpay-lockup-house-tiles-squirrellabs.vercel.app/en

Checked at 1280 and 390 against the deployed build, not the mockup:

  • Fold background resolves to rgb(144, 168, 237) — the homepage still passes blue, unchanged by this PR.
  • 2 links in the fold, down from 4 — the mobile and desktop blocks are now one via md:contents.
  • Both marks render on the white inner card inside the pink tile; the PIX diamond shows all four petals, so the viewBox fix lands.
  • Both flags hold their silhouette against the blue — the Argentine flag has an outer edge for the first time.
  • On mobile the lockups sit above the phone, so the sticky CTA overlaps the screenshot instead of a link.
  • No page or console errors on either viewport.

CI: e2e, eslint, format, typecheck, unit, report, ci-success all pass.

Not checked: /quests, which renders this same component on cream. The mockup held on cream, but the deployed cream case has not been opened.

@0xkkonrad
0xkkonrad merged commit d93758c into lp-refresh Aug 14, 2026
11 checks passed
0xkkonrad added a commit that referenced this pull request Aug 14, 2026
…ground

Implements mono projects/lp-refresh/handoff-qrpay-lockups.md (Konrad's
revised ruling): the pink tile and white inner card go, the original
wavy flag artwork returns (cropped flag-only via root viewBox — ink
untouched), and the black marks sit directly on the section bg (9:1 on
the homepage blue, 19:1 on the /quests cream). Mark scale L per the
brief's recommendation — the PIX Banco Central strapline is illegible
at S. Fixed-height slot keeps the marks on a shared baseline; the
underlined Learn more stays as the sole click affordance. Kept from
#2692: the pix-logo viewBox fix and the Manteca mobile/desktop
collapse.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant