feat: Homepage 2026 redesign#17261
Conversation
- Add generateMetadata for proper SEO with localized title/description - Convert heavy client components (KPISection, SavingsCarousel, SimulatorSection) to dynamic imports for code splitting - Wrap dynamic components in Suspense with skeleton fallbacks
pettinarip
changed the title
✅ Deploy Preview for ethereumorg ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
The Mastercard logo has a nearly-square aspect ratio (99x61) while other logos are much wider. This made it appear smaller when all logos shared the same height constraint. Adding a custom className prop allows per-logo sizing adjustments.
A/B/C Test Readiness Review — HomepageRedesign2026This PR is the implementation for a 3-way A/B/C test (Matomo Experiment ID: 11, currently in draft). Before the test can launch, the following items need to be addressed. Matomo Setup (Done)
Blockers — Must Fix Before Test Launch1. Event Tracking Missing on New ComponentsThe redesigned homepage has almost no event tracking. Only GetStartedGrid (
FeatureCards (
SavingsCarousel (
2. Scroll Depth TrackingNo scroll depth tracking exists in the redesign. Need an IntersectionObserver-based component that fires once per session at each threshold: // Fire these events as user scrolls
{ eventCategory: "Homepage - en", eventAction: "scroll_depth", eventName: "25" }
{ eventCategory: "Homepage - en", eventAction: "scroll_depth", eventName: "50" } // Triggers Goal 9
{ eventCategory: "Homepage - en", eventAction: "scroll_depth", eventName: "75" }
{ eventCategory: "Homepage - en", eventAction: "scroll_depth", eventName: "100" }3. Section Visibility TrackingTo measure which sections users actually see (not just click), add IntersectionObserver tracking for each section: { eventCategory: "Homepage - en", eventAction: "section_view", eventName: "hero" | "kpi" | "savings_carousel" | "trust_logos" | "feature_cards" | "simulator" | "get_started" }Fire once per section per session when the section is visible for >1 second. 4. Fix eventCategory Inconsistency
Fix in - <PersonaModalCTA eventCategory="Homepage" />
+ <PersonaModalCTA eventCategory="Homepage - en" />Or better: pass the locale dynamically. 5. Modal Close Tracking
Add to { eventCategory: "Homepage - en", eventAction: "modal_close", eventName: "persona_modal" }6. Variation C (4-CTA) Does Not Exist YetThis PR only implements the 1-CTA modal version (Variation B). The 4-CTA version (Variation C) — with Learn Ethereum, Get ETH, Try Apps, Start Building as direct buttons — still needs to be built. This is the version that swaps the first CTA from "Find Wallet" to "Learn Ethereum" based on the previous test's finding that /what-is-ethereum/ had +122% demand. Each button must fire: 7. Dynamic Rendering for A/B TestingThe previous A/B test was broken for 2 days because the homepage was statically generated (SSG) and When integrating this with
Reference PRs: #17192, #17194 (hotfixes for this exact issue) Pre-Launch ChecklistBefore activating the experiment (via Matomo UI or
Reference
|
Add bot detection to prevent search engine indexing fluctuation and ensure consistent social media link previews during A/B tests. Bots receive the original variant per Google's A/B testing guidelines. Ref: https://developers.google.com/search/docs/advanced/guidelines/cloaking
wackerow
left a comment
wackerow
left a comment
There was a problem hiding this comment.
Looking good overall! Just left a few comments, but should be able to get this in very soon
| </div> | ||
|
|
||
| <div className="mx-auto grid w-full max-w-[76rem] gap-8 md:grid-cols-2 lg:grid-cols-3"> | ||
| {cards.map((card) => ( |
There was a problem hiding this comment.
Noticing a small (non-blocking) bug related to the LinkBox... can't select any text inside. Not necessarily an issue, but felt a little awkward. Out-of-scope for this PR though
| <Image | ||
| src={freeAccessImage} | ||
| alt="" | ||
| sizes="(max-width: 768px) 50vw, (max-width: 1024px) 33vw, 300px" | ||
| className="absolute -bottom-6 -right-8 h-2/3 w-auto object-contain" | ||
| /> |
There was a problem hiding this comment.
Just noting occasional overlap with image/text at some view points
| strokeWidth={1.5} | ||
| /> | ||
| <div className="flex flex-col gap-1"> | ||
| <AnimatedNumber |
feat: A/B/C test for homepage 2026 redesign
The A/B test has concluded. This reverts the test infrastructure from #17261 and #17294 while preserving the Homepage2026 component code. Changes reverted: - Remove ABTestWrapper, ScrollDepthTracker, TrackedSection wrappers - Remove force-dynamic rendering and .catch() graceful degradation - Restore original error handling (throw on missing data) - Restore original event names and action labels - Remove getAccountHolders fetch (only used by redesign variants)
Replace the old homepage with the Homepage2026 component that won the A/B/C test (PR #17261). The components were already in the codebase from the test; this wires them up as the permanent homepage. Key changes: - page.tsx simplified to render Homepage2026 directly - Hero heading updated to "The internet that belongs to you" - Persona modal restructured: Beginners, Explorers, Builders (+ Enterprise on mobile) - Privacy carousel slide replaces DeFi savings slide - Trust section copy updated, logos removed per final Figma design - Simulator section moved before Feature Cards per Figma order
3 participants
Summary
Complete redesign of the ethereum.org homepage with a modern, conversion-focused layout.
New Sections
Data Layer
fetchAccountHoldersfetcher (placeholder for real API)Performance
generateMetadataAssets
public/images/homepage/Preview
https://deploy-preview-17261.ethereum.it/
Test plan
/en/home-2026