Whitepaper page needs bridge content for users arriving from investment apps #17185
Description
Problem
Many users land on the /whitepaper/ page from investment and banking apps (Robinhood, Coinbase, etc.) that link to it as a canonical resource for understanding Ethereum. However, the original 2014 whitepaper no longer reflects what Ethereum is today after 10+ years of development.
Why this matters
- User expectation mismatch: Users coming from investment apps expect to learn "what Ethereum is today" but find a historical document
- Ecosystem convention: Most crypto projects publish whitepapers as introductory content, so users are conditioned to read them first. This works for new projects, but not for Ethereum which has evolved significantly since 2014
- Key changes not reflected: The whitepaper predates:
- Proof of Stake (The Merge, 2022)
- Layer 2 scaling solutions
- DeFi, NFTs, and DAOs as major use cases
- ERC-20, ERC-721 standards
Current state
The page has a small italic disclaimer but it's easy to miss and doesn't provide a clear path to current content.
Proposed Solution
Add a prominent "bridge" section at the top of the whitepaper page that:
- Acknowledges the context - Clear "Before you read" indicator
- Explains the disconnect - States the whitepaper is from 2014 and no longer reflects current Ethereum
- Provides clear CTA - Links to
/learn/for up-to-date content - Preserves the whitepaper - The historical document remains fully accessible below
Design approach
- Uses existing design tokens (
bg-radial-a,border-primary-low-contrast,bg-card-gradient-secondary) - Leverages existing components (
Tag,ButtonLink,Card,Stack,Flex) - Non-intrusive: enhances the page rather than replacing the whitepaper content
- Respects researchers who specifically want the historical document
Mockup
I've created a working implementation:
New component: src/components/WhitepaperBridge/index.tsx
import { ArrowRight, CheckCircle2, Info } from "lucide-react"
import { ButtonLink } from "@/components/ui/buttons/Button"
import { Card, CardContent } from "@/components/ui/card"
import { Flex, Stack } from "@/components/ui/flex"
import { Tag } from "@/components/ui/tag"
const WhitepaperBridge = () => {
const evolutionPoints = [
"Ethereum moved from Proof of Work to Proof of Stake (The Merge, 2022)",
"Layer 2 scaling solutions now process millions of transactions",
"DeFi, NFTs, and DAOs emerged as major use cases",
"Smart contract standards (ERC-20, ERC-721) became industry foundations",
]
return (
<section className="mb-8 rounded-2xl border border-primary-low-contrast bg-radial-a p-6 md:p-8">
<Stack className="gap-6">
<Tag status="warning" variant="outline" size="small" className="w-fit gap-1.5">
<Info className="size-3.5" />
Before you read
</Tag>
<div className="space-y-3">
<h2 className="text-2xl font-bold text-body md:text-3xl">
Looking to understand Ethereum?
</h2>
<p className="max-w-2xl text-body-medium">
This whitepaper was published in <strong className="text-body">2014</strong>,
before Ethereum launched. After 10+ years of development, major upgrades,
and ecosystem growth, <strong className="text-body">the original whitepaper
no longer reflects what Ethereum is today</strong>.
</p>
</div>
<Flex className="flex-wrap gap-3">
<ButtonLink href="/learn/" size="lg">
Learn about Ethereum today
<ArrowRight className="size-5" />
</ButtonLink>
<ButtonLink
href="/whitepaper/whitepaper-pdf/Ethereum_Whitepaper_-_Buterin_2014.pdf"
variant="outline"
isSecondary
>
Download original PDF (2014)
</ButtonLink>
</Flex>
<Card className="mt-2 border border-border bg-card-gradient-secondary">
<CardContent className="p-4 md:p-6">
<p className="mb-4 text-sm font-semibold uppercase tracking-wide text-body-medium">
What's changed since 2014?
</p>
<Stack className="gap-3">
{evolutionPoints.map((point, index) => (
<Flex key={index} className="items-start gap-3">
<CheckCircle2 className="mt-0.5 size-5 flex-shrink-0 text-success" />
<span className="text-body-medium">{point}</span>
</Flex>
))}
</Stack>
</CardContent>
</Card>
</Stack>
</section>
)
}
export default WhitepaperBridgeLayout modification: src/layouts/Static.tsx
// Add conditional rendering after Breadcrumbs
{slug.includes("/whitepaper") && <WhitepaperBridge />}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) │
└─────────────────────────────────────────┘
Additional considerations
- i18n: Text should be moved to translation keys for the 60+ supported languages
- Analytics: Could track CTA clicks to measure effectiveness
- A/B testing: Could test different messaging approaches
Happy to submit a PR if this direction is approved.