fix(ipfs2filecoin): design review follow-ups for the landing page

[gmoranxyz]

📝 Description

Design review follow-ups for /ipfs2filecoin, from a walkthrough of the page with @filipagr on 31 July, plus two rounds of polish since.

This targets feat/ipfs2filecoin-landing-page rather than main on purpose, so it feeds #346 instead of competing with it. Merging here means #346 carries the polish through to main as one piece.

Filipa's overall read was that the structure, content and calls to action are right — opening with "paste your CIDs" instead of a wall of reading is the correct choice. Almost everything below is layout and type hierarchy, plus one genuine functional gap and one drift risk.

• Type: Bug fix

Two things to know before reviewing:

1. This currently conflicts with the base, in src/app/ipfs2filecoin/page.tsx. The base branch has gained four commits this head doesn't have (bc84838 runbook rewrite for the direct-upload flow, abbe4ca flat data set fee charged once, b67a9fb unpin the CLI, 55dcabd re-verify competitor rates), and they touch the same file as the layout rework. CostEstimator.tsx, constants/migration.ts and data/pricing-comparison.ts all auto-merge; only page.tsx needs hand-resolving.
2. The diff includes changes that aren't mine. This branch merged FilOzone:main, and the base is behind main, so the diff against the base also shows .github/CODEOWNERS (chore: set CODEOWNERS #349), the @filoz/synapse-sdk 1.1.1 bump (chore: update @filoz/synapse-sdk to v1.1.1 #348), and the temporary hiding of the Service Providers page with its redirect in next.config.ts (Temporarily hide the Service Providers page #347). Those aren't part of this work and will disappear once the base catches up with main. Reviewable scope is src/app/ipfs2filecoin/** plus src/components/{Accordion,Faq}.tsx and .gitignore.

🛠️ Key Changes

Three rounds, each commit scoped to one concern and independently revertable.

Round 1 — design review follow-ups (31 July)

fix(faq) — accordion dividers and chevrons were invisible. Faq hardcoded divide-white/20 and Accordion hardcoded text-zinc-200/text-zinc-300. All three assume a dark background, which held while the homepage was the only consumer; this page mounts the FAQ on a gray section, where they disappear. Now uses the --color-border-base / --color-text-base / --color-paragraph-text tokens, which already flip off the .light-section / .dark-section class Section sets — so no isDark branching was needed. Moving the colour onto the item rather than the parent also fixes the first divider: divide-* targets every child after the first, so item one's border was falling back to currentColor and rendering at full brightness on dark.

fix(ipfs2filecoin) — layout and type hierarchy.

• The hero and "Estimate your deposit" sat 60px inset from their siblings: PageSection already wraps children in a Container and page.tsx nested a second one, doubling the horizontal padding.
• Unit/Funded-for selects had the native arrow jammed against the border with a cavern between it and the value. Local SelectField goes appearance-none with a Phosphor caret inset to match the field's text.
• Both tables move off text-sm to text-base, service names to text-lg.
• Monospace figures dropped for the body font with tabular-nums.
• Step numbers sit above each title in the accent colour, which needed a new StepList — the shared Card types title as a plain string, so the number could otherwise only be inlined as "01. Hand over the list".
• Reason cards take Phosphor icons, following how agents/ and warm-storage-service/ already pass icons to Card.
• The agent column takes two thirds with "Talk to us" as a one third call-out.
• "What this does not do" constrained to max-w-5xl — lines ran past 15 words at desktop.

feat(ipfs2filecoin) — a checked CID list now produces something. parseCidList already validated, deduped and stripped gateway prefixes, but the verdict reported only a count, so the top of the page had no purpose — you still built cids.txt by hand. The prompt was in fact only offered on the over-cap branch, so the one outcome that succeeded was the one with no output. A checked list now yields the agent prompt with your own CIDs inlined via buildAgentPrompt, plus a cids.txt download of the cleaned list. AGENT_PROMPT stays as the fallback for the empty and over-cap cases, where pointing at a file is the right shape rather than inlining hundreds of lines. The instruction to "estimate what they cost to store below" is gone: a check reads the CIDs, not the bytes behind them, so it cannot price anything on its own.

chore — ignores CLAUDE.md and a local todo.md.

Round 2 — @filipagr's polish (#1, 3 August)

CID checker becomes one input surface. Label, textarea and action fold into a single bordered panel with a live "X of Y lines are CIDs" readout and a Cmd/Ctrl+Enter shortcut. The verdict moves into its own CidListVerdict component with an icon per outcome, and pluralize is extracted so the readout and the verdict agree.

Pricing table compares providers, not plan names. Each row gains a detail sub-line so the provider is what you compare on and the plan tier stays secondary, and rows are keyed by provider plus tier now that two Pinata tiers share a name. Below md the three columns don't fit, so each provider becomes a stacked card; the full table returns at md.

Estimator pairs with the table. It moves into a companion card beside the comparison table — the table is the market rate, the card prices it for your data — at lg:grid-cols-3 with the table on two columns and the estimator on one, its two inputs side by side and a compact stacked result that fits the narrow column. Also: a faint brand glow along the bottom of the hero (--color-brand-500 mixed to 12%, so it reads as light on the surface rather than a coloured panel), reason-card and agent-warning copy stepped down a size, and "How it works" four across at lg (2×2 from sm).

Round 3 — kill the hardcoded rate (#2, 5 August)

$2.50 was restated as a literal in the rate footnote, one reason card, and the SEO description, so all three could silently drift from the comparison table and estimator, which already derive from the constant. All now go through formatUsd(USD_PER_TIB_MONTH_PER_COPY).

📌 To-Do Before Merging

• Resolve the conflict in page.tsx against the base's four newer commits. Worth doing as a merge of the base into this branch rather than a rebase, since the history is shared with @filipagr.
• @filipagr — the monospace figures were dropped rather than resized. The reported problem was numbers looking larger than the service names beside them; that was a typeface illusion rather than a size difference, so matching the typeface removes it at the root while tabular-nums keeps the columns aligned. Still the most debatable call here, and easy to revert.
• @filipagr — Accordion/Faq are shared, so the homepage FAQ changes too: chevron zinc-200 → zinc-50, body zinc-300 → zinc-400. Both now match the site's own tokens, but worth eyeballing since it's outside this page's scope.
• The external-link arrow beside Filebase/Pinata is fixed with a local override in page.tsx. It's sized for button text inside ExternalTextLink in ui-filecoin, so the real fix belongs upstream — worth a follow-up issue.

Closed since the original review: the hero background treatment, now handled by the brand glow rather than a produced asset; and table whitespace, which the responsive stacked cards and settled type sizes addressed.

Still not attempted, both needing a call rather than code:

• The optional illustration beside "Nobody should migrate an archive by clicking" — Filipa's crowding caution stands.
• Resolving a CID to its actual byte size, so the estimate reflects the real list rather than a number the user guesses. Needs backend capability and is a separate conversation.

🧪 How to Test

• Setup: nvm use && npm install && npm run dev, then open /ipfs2filecoin.
• Steps to Test:
  1. CID check. Paste a deliberately messy list into the hero panel — a bare CID, an https://ipfs.io/ipfs/… gateway URL, a duplicate, and a junk line. Watch the "X of Y lines are CIDs" readout as you type, then submit with Cmd/Ctrl+Enter rather than the button.
  2. Cost section. At lg the comparison table should occupy two thirds with the "Estimate your deposit" card beside it on one third, tops aligned. Narrow the window: the card drops below the table, and below md the table itself becomes one stacked card per provider.
  3. Pricing rows. Both Pinata tiers should render distinctly, each with its plan tier as a sub-line under the provider name.
  4. How it works. Four across at lg, 2×2 from sm, step numbers above each title in the accent colour.
  5. FAQ. Dividers and chevrons should be clearly visible against the gray section, including the divider above the first item. Compare with the homepage FAQ on its dark section.
  6. Hero. A faint blue lift along the bottom edge, carrying into the section below — not a visible panel edge.
• Expected Results: step 1 resolves to the unique CIDs with the gateway prefix stripped, reports both the skipped line and the removed duplicate, and renders a prompt containing your actual CIDs plus a Download cids.txt link.
• Verified: npm run build (TypeScript, twoslash'd Synapse snippet, all 25 routes) passes at 2a8113a, the PR Bump the dependencies group with 11 updates #1 merge. The head has since taken Build Main Components #2 and a main merge and hasn't been rebuilt locally — the conflict resolution will need a fresh build anyway.

📸 Screenshots

Verified in-browser at 1284px. Not attached here — CLI-created PR. Happy to add before/afters for the FAQ, the steps grid, the table/estimator pairing and the CID-check flow if useful.

🔖 Resources

• Design review walkthrough with @filipagr, 31 July 2026
• Polish round: Bump the dependencies group with 11 updates #1 (fork-local), rate derivation: Build Main Components #2 (fork-local)
• Builds on [WIP - Do not merge] feat(ipfs2filecoin): add IPFS to Filecoin campaign landing page #346

🤖 Generated with Claude Code

[vercel]

@gmoranxyz is attempting to deploy a commit to the FilOz Team on Vercel.

A member of the Team first needs to authorize it.

[gmoranxyz]

@filipagr take a look and let me know what you think as a first pass!

[gmoranxyz]

@jennijuju I think this is ready for you to take a look! Please forgive anything we broke with our clumsy vibe coding!