Rebuild the landing page SDK card in HTML/CSS, with Swift and Rust as real tabs

[devin-ai-integration]

Summary

The SDK mockup on /learn/home was a Rive canvas (sdk-rive.riv, hosted on the Webflow CDN). Its state machine only defines TypeScript, Python, GO, Java, NET, PHP and Ruby; Swift and Rust are inert grey artwork with no hover, no active state and no install string, and nothing in this repo can change that. This replaces the canvas with plain markup + CSS, so all nine languages are real tabs.

How it works:

• Nine visually hidden <input type="radio"> at the top of .sdk-card, one <label> per language. Selection is CSS-only — #sdk-card-<lang>:checked ~ .sdk-card-tabs sets --tab-index / --underline-width (the sliding green underline) and ~ .sdk-card-command .sdk-card-command-<lang> reveals that language's install string. No JS, no hydration, works on preview deployments, and the radios give arrow-key navigation for free.
• Every dimension is calc(N * var(--u)) where --u: 0.271003cqw — one unit of the Rive artboard's 369×93 grid, with the card as a container query container. N is the measurement taken off the rendered .riv, so the layout is the artboard's geometry rather than an approximation, and it scales with the card like the canvas did.
• The outer border is an inset box-shadow rather than a real border: with aspect-ratio: 369/93 a 1px border would shrink the content box below 93u and drag every row off the grid.
• Swift and Rust get commands the artboard never had: .package(url: "https://github.com/your-company/swift-sdk") (SwiftPM has no registry) and cargo add your-company.
• Drops the SDK entry from rive-animation.js; the Docs and Ask Fern canvases are untouched.

Two known deltas from the artboard: the labels/commands render in the site's var(--font-code) stack instead of the artboard's JetBrains Mono (advance widths match, so the layout is identical; glyph shapes differ), and the intro wipe/typing animation is gone.

Reference (Rive) on top, this PR below — light TypeScript and dark Ruby:

Link to Devin session: https://app.devin.ai/sessions/3f1fa02d46d94431b1331d3d9ae97933

[devin-ai-integration]

🤖 Devin AI Engineer

I'll be helping with this pull request! Here's what you should know:

✅ I will automatically:

• Address comments on this PR. Add '(aside)' to your comment to have me ignore it.
• Look at CI failures and help fix them

Note: I can only respond to comments from users who have write access to this repository.

⚙️ Control Options:

• Disable automatic comment, CI, and merge conflict monitoring

[github-actions]

🌿 Preview your docs: https://fern-preview-devin-1785978439-sdk-swift-rust-tabs.docs.buildwithfern.com/learn

Here are the markdown pages you've updated:

• learn/home

[devin-ai-integration]

Runtime test results — rebuilt SDK card

Tested on a local fern docs dev preview of this branch at /learn/home, in light mode, dark mode and narrow viewports. Devin session

✅ All nine tabs work — Swift and Rust are live

Every tab moves the green underline and swaps the install command; only one command is visible at a time. Swift and Rust, previously dead grey artwork, are now fully selectable.

Swift	Rust

Hover (scale + pointer cursor, no layout shift), arrow-key navigation with a visible focus ring, dark mode (card background, underline and Rust logo variant all switch), and ~520px / ~286px widths (all nine tabs stay on one row, no wrapping or overlap) all pass.

🔧 Fixed during testing: .NET command rendered an em dash

The run caught MDX smart punctuation converting --version into —version (char code 8212), which made the .NET command non-copy-pasteable. Wrapping the string in a JSX expression fixes it; re-verified in the browser that the rendered text now contains a literal --version and no non-ASCII characters.

⚠️ Rive regression check — structural only

No console errors related to the card or Rive. The SDK canvas is gone as intended; #docs-rive-canvas and #ai-rive-canvas remain and both .riv files are still fetched.

Neither remaining animation actually paints in the local dev preview — but the same is true on the pre-PR baseline commit 30802a8e6, where all three canvases are blank, so this is a local-preview limitation rather than a regression. Worth a quick look on a deployed preview.

Pre-PR baseline (blank)	This PR (SDK card now real markup)