content: refresh Learn hub as guided learning journey by konopkja · Pull Request #17976 · ethereum/ethereum-org-website

konopkja · 2026-04-14T15:24:37Z

Summary

Restructures the Learn hub into a guided educational tour through Ethereum's core topics, using the founders-page card design pattern.

What changed

Section 1: "Understand Ethereum" (expanded from 3 cards to 8)
New guided tour through all core learn pages:

What is Ethereum?
What is the Ethereum network?
What is ether (ETH)?
Ethereum vs Bitcoin
History, founder and ownership
Ethereum wallets
What is Web3?
Smart contracts

Section 2: "How to use Ethereum" (slimmed)

Find a wallet, Ethereum networks
Kept the "things to consider" banner and doc links

Section 3: "What is Ethereum used for?" (slimmed)

Replaced 6 individual use case cards + emerging use cases list with a single card linking to /use-cases/ hub

Removed:

"Strengthen the Ethereum network" section (staking/nodes belong under Use, not Learn)
All individual use case cards (DeFi, stablecoins, NFTs, DAOs, dApps)
Stale emerging use cases (play-to-earn, quadratic funding, supply chain management)

Fixed:

Bankless podcast link: http:// to https://

Card design

Migrated from the old OriginalCard component to the newer Card from @/components/ui/card with CardBanner, CardTitle, CardParagraph, matching the founders page pattern (grid-cols-fill-4 + subgrid).

Files changed

app/[locale]/learn/page.tsx (restructured, net -216 lines)
src/intl/en/page-learn.json (updated/added i18n keys)

Closes #17974
Depends on #17975 (use-cases landing page) for the /use-cases/ link

Test plan

Verify all 8 guided tour cards render and link correctly
Check card design matches founders-page style
Verify /use-cases/ link works (requires content: add /use-cases/ landing page as central hub #17975)
Check mobile responsive layout
Verify books/podcasts section unchanged
Confirm "Strengthen the Ethereum network" section is fully removed

🤖 Generated with Claude Code

Preview link

https://deploy-preview-17976.ethereum.it/learn

Restructures the Learn hub (/learn/) into a guided tour through Ethereum's educational content: - Section 1 "Understand Ethereum": 8-card guided tour using the founders-page card design (Card from ui/card.tsx with CardBanner, CardTitle, CardParagraph). Covers: What is Ethereum, the network, ETH, Ethereum vs Bitcoin, history, wallets, Web3, smart contracts. - Section 2 "How to use Ethereum": Slim, focused on wallet finder and Layer 2 networks. - Section 3 "What is Ethereum used for": Single card linking to /use-cases/ hub instead of listing individual use cases. - Section 4 "Ethereum protocol": Kept with energy consumption, roadmap, whitepaper. - Section 5 "Community": Kept as-is. - Section 6 "Books and podcasts": Fixed Bankless link (http -> https). Removed: - "Strengthen the Ethereum network" section (staking/nodes belong under Use, not Learn) - Individual use case cards (DeFi, stablecoins, NFTs, DAOs, dApps, emerging use cases) replaced with link to /use-cases/ Closes ethereum#17974 Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

netlify · 2026-04-14T15:25:01Z

✅ Deploy Preview for ethereumorg ready!

Name	Link
🔨 Latest commit	`979903b`
🔍 Latest deploy log	https://app.netlify.com/projects/ethereumorg/deploys/69e7e749fd47920008b2c6f8
😎 Deploy Preview	https://deploy-preview-17976.ethereum.it
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
Lighthouse	7 paths audited Performance: 56 (🔴 down 2 from production) Accessibility: 93 (no change from production) Best Practices: 100 (no change from production) SEO: 98 (🔴 down 1 from production) PWA: 59 (no change from production) View the detailed breakdown and full score reports

To edit notification comments on pull requests, go to your Netlify project configuration.

…first flow Card design fixes: - Remove grey background from card images (background="none") - Add full-width CTA buttons to all cards using CardFooter + buttonVariants - Change row-span-3 to row-span-4 for subgrid with new footer row Structural changes (based on content architecture, UX, and PO review): - Reorder to motivation-first: use cases section now leads the page - Use cases section shows 4 featured cards (DeFi, Stablecoins, NFTs, DAOs) plus a full-width gradient banner linking to /use-cases/ hub - Understand Ethereum split into 3 featured cards (Ethereum, ETH, vs Bitcoin) and 5 deeper learning cards under "Keep learning" subheading - "Things to consider" banner moved to top of "How to use" section (context before action) - Community section moved before protocol (belonging before depth) - Protocol section renamed "Go deeper" with softer description Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

konopkja · 2026-04-14T16:54:32Z

Note: Deploy failures are not caused by this PR.

The build fails with a pre-existing TypeScript error in src/lib/md/rehypeImg.ts:106:

Type error: Argument of type 'Buffer<ArrayBufferLike>' is not assignable to parameter of type 'BufferSource'.

This file is not modified in this PR (only app/[locale]/learn/page.tsx and src/intl/en/page-learn.json are changed). The error exists on the dev branch itself and affects all PRs currently.

ESLint and unit tests pass. The build will succeed once the upstream type error is resolved.

buttonVariants() is from a "use client" module and cannot be called from a server component. Inline the outline variant Tailwind classes directly instead. Fixes: "Attempted to call buttonVariants() from the server but buttonVariants is on the client" Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Rewrites LearnCard to match the founders page pattern exactly: - Uses Card with plain HTML elements (h3, p, span) instead of CardBanner/CardContent/CardTitle/CardParagraph/CardFooter sub-components - row-span-3 + grid-rows-subgrid + gap-y-8 (matching founders) - bg-background-highlight + p-8 + max-md:px-4 (matching founders) - Image rendered directly (no CardBanner wrapper with grey gradient) - Title underlines on hover via group-hover/link (matching Card's link behavior) - Visual-only CTA span at bottom (whole card is the link) Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

- Move "Understand Ethereum" back to section 1 (was incorrectly reordered) - Remove all use case cards (DeFi, stablecoins, NFTs, DAOs) - "What is Ethereum used for?" is now section 3 with only the gradient banner linking to /use-cases/ - "How do I use Ethereum" now leads with Wallets card, then Find a wallet, then Ethereum networks. Removed "things to consider" banner. - "Go deeper" section: Roadmap first, Whitepaper second, Privacy third (replacing energy consumption card). Energy consumption moved to doc links. - Removed Wallets from "Understand Ethereum" (already in "How to use") Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

- Switch buttons from outline to solid variant (bg-primary-action, white text) - Add min-h-10.5 to match default button component sizing - Remove group-hover/link:underline from card and banner titles Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

- Switch from subgrid to flex-col layout with flex-1 on content div, so CTA button naturally sticks to bottom of card regardless of content height - Add unique CTA labels for each card: Understand Ethereum: "Start here", "Learn about ETH", "Compare the two" Keep learning: "Explore the network", "Read the history", "Discover Web3", "How they work" How to use: "Learn about wallets", "List of wallets", "Choose network" Community: "Explore more", "Start contributing", "Explore communities" Go deeper: "Explore the roadmap", "Read whitepaper", "Explore privacy" Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Switch back to row-span-3 + grid-rows-subgrid so buttons align at the same vertical position across all cards in a row. Added self-end on button to pin it to the bottom of its subgrid row. Removed grid-rows-[auto] from parent grids which was blocking subgrid. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

- Use real ButtonLink component (matching founders page pattern exactly) instead of fake span buttons. Cards are no longer clickable wrappers, button is the link. - Restore original description text under "Understand Ethereum" - Remove History card, add as doc link "More on Ethereum: history, founder and ownership" - Replace Ethereum networks card with "Get ETH" card - Remove "Learn about the Ethereum community" section entirely - Remove Layer 2 and Get ETH from doc links (redundant with cards) - Fix use-cases banner: black title (text-body), halved gap (gap-3), spacing before button (mt-3) Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

- "Go deeper" H2 → "How Ethereum works" - "Books and podcasts" H2 → "Books, podcasts, and series about Ethereum" - H3s simplified: "Books", "Podcasts", "Video series" (removed redundant "about Ethereum" since H2 carries it) - Link "Ethereum" in intro text to homepage - Updated go-deeper description to match new heading Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

wackerow · 2026-04-20T19:34:34Z

(Blocked pending merge of PR #17975)

wackerow

@konopkja Let me know if this looks good from your end after the refactors.

Would suggest adding a link to the new /videos/ page, but doesn't necessarily have to block... let me know and I can patch as-needed.

konopkja requested review from minimalsm, pettinarip and wackerow as code owners April 14, 2026 15:24

github-actions Bot added content 🖋️ This involves copy additions or edits translation 🌍 This is related to our Translation Program labels Apr 14, 2026

konopkja and others added 2 commits April 14, 2026 17:57

ci: trigger rebuild

95557e4

konopkja and others added 8 commits April 14, 2026 19:09

wackerow added the Status: Blocked 🛑 This is blocked label Apr 20, 2026

wackerow mentioned this pull request Apr 21, 2026

content: add /use-cases/ landing page as central hub #17975

Merged

4 tasks

Merge branch 'dev' into content/refresh-learn-hub-17974

7c98707

wackerow removed the Status: Blocked 🛑 This is blocked label Apr 21, 2026

refactor(ui): standardize ui component usage

979903b

wackerow approved these changes Apr 21, 2026

View reviewed changes

wackerow merged commit b14efc6 into ethereum:dev Apr 22, 2026
10 checks passed

wackerow mentioned this pull request Apr 24, 2026

Deploy v11.5.0 #18035

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

content: refresh Learn hub as guided learning journey#17976

content: refresh Learn hub as guided learning journey#17976
wackerow merged 13 commits into
ethereum:devfrom
konopkja:content/refresh-learn-hub-17974

konopkja commented Apr 14, 2026 •

edited by wackerow

Loading

Uh oh!

netlify Bot commented Apr 14, 2026 •

edited

Loading

Uh oh!

konopkja commented Apr 14, 2026

Uh oh!

wackerow commented Apr 20, 2026

Uh oh!

wackerow left a comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Conversation

konopkja commented Apr 14, 2026 • edited by wackerow Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

What changed

Card design

Files changed

Test plan

Preview link

Uh oh!

netlify Bot commented Apr 14, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for ethereumorg ready!

Uh oh!

konopkja commented Apr 14, 2026

Uh oh!

wackerow commented Apr 20, 2026

Uh oh!

wackerow left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

konopkja commented Apr 14, 2026 •

edited by wackerow

Loading

netlify Bot commented Apr 14, 2026 •

edited

Loading