Add bridge content to whitepaper page for better user guidance

[konopkja]

Summary

This PR adds a "bridge" component to the whitepaper page that helps users arriving from investment/banking apps understand that the 2014 whitepaper is a historical document and directs them to current content.

Closes #17185

Problem

Many users land on /whitepaper/ from investment apps (Robinhood, Coinbase, etc.) expecting to learn "what Ethereum is today" but find a 2014 historical document that doesn't reflect 10+ years of protocol evolution.

Solution

Add a WhitepaperBridge component that:

• Displays a prominent "Before you read" section above the whitepaper
• Explains that the whitepaper is from 2014 and no longer reflects current Ethereum
• Provides clear CTA to /learn/ for up-to-date content
• Lists key changes since 2014 (PoS, L2s, DeFi/NFTs/DAOs, ERCs)
• Preserves the original whitepaper below (enhancement, not replacement)

Design

Uses only existing design tokens:

• bg-radial-a - Purple/blue radial gradient for section background
• border-primary-low-contrast - Subtle purple border
• bg-card-gradient-secondary - Purple-tinted gradient for context card
• text-body, text-body-medium, text-success - Typography and icon colors
• Existing components: Tag, ButtonLink, Card, Stack, Flex

Files Changed

• New: src/components/WhitepaperBridge/index.tsx - The bridge component
• Modified: src/layouts/Static.tsx - Conditionally renders bridge on whitepaper page

Visual Structure

┌─────────────────────────────────────────┐
│  Breadcrumbs                            │
├─────────────────────────────────────────┤
│  ┌───────────────────────────────────┐  │
│  │  WhitepaperBridge (NEW)           │  │
│  │  - "Before you read" tag          │  │
│  │  - "Looking to understand..."     │  │
│  │  - CTAs to /learn/ and PDF        │  │
│  │  - "What's changed" context       │  │
│  └───────────────────────────────────┘  │
├─────────────────────────────────────────┤
│  Original whitepaper content            │
│  (unchanged)                            │
└─────────────────────────────────────────┘

Test plan

• Verify bridge displays on /whitepaper/ page
• Test primary CTA links to /learn/
• Test secondary CTA downloads the PDF
• Verify whitepaper content still renders below
• Test responsive layout (mobile/desktop)
• Test light/dark mode

Follow-up considerations

• i18n: Text should be moved to translation keys for 60+ supported languages
• Analytics: Could track CTA clicks to measure effectiveness

---

🤖 Generated with Claude Code

[netlify]

✅ Deploy Preview for ethereumorg ready!

Name	Link
🔨 Latest commit	0f6454c
🔍 Latest deploy log	https://app.netlify.com/projects/ethereumorg/deploys/6984fb3515b9470008696124
😎 Deploy Preview	https://deploy-preview-17190.ethereum.it
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
Lighthouse	7 paths audited Performance: 58 (🔴 down 1 from production) Accessibility: 94 (no change from production) Best Practices: 100 (🟢 up 1 from production) SEO: 100 (no change 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.

[konopkja]

@claude why dont i see WhitepaperBridge component on the whitepaper page on preview deploy - https://deploy-preview-17190.ethereum.it/whitepaper/

[claude]

Claude encountered an error —— View job

Command failed: git fetch origin --depth=20 feature/whitepaper-bridge-content

---

I'll analyze this and get back to you.

[wackerow]

Looks good! Couple commits to polish things up per discussion. Non-English translations/versions can be handled in follow-up task. Pulling in