feat: Homepage 2026 redesign

app/[locale]/what-is-ethereum/page.tsx

@@ -35,6 +35,8 @@ import { getAppPageContributorInfo } from "@/lib/utils/contributors"
 import { getMetadata } from "@/lib/utils/metadata"
 import { screens } from "@/lib/utils/screen"
 
+import { ENTERPRISE_ETHEREUM_URL } from "@/lib/constants"
+
 import WhatIsEthereumPageJsonLD from "./page-jsonld"
 
 import contributionBanner from "@/public/images/doge-computer.png"
@@ -788,7 +790,7 @@ const Page = async ({ params }: { params: PageParams }) => {
                       })}
                     </p>
                   </div>
-                  <ButtonLink href="/enterprise/">
+                  <ButtonLink href={ENTERPRISE_ETHEREUM_URL}>
                     {t("page-what-is-ethereum-start-business-cta")}
                   </ButtonLink>
                 </CardContent>

app/api/ab-config/route.ts

@@ -1,6 +1,6 @@
 import { NextResponse } from "next/server"
 
-import { IS_PREVIEW_DEPLOY, IS_PROD } from "@/lib/utils/env"
+import { IS_PROD } from "@/lib/utils/env"
 
 import type { ABTestConfig, MatomoExperiment } from "@/lib/ab-testing/types"
 
@@ -33,8 +33,9 @@ const getPreviewConfig = () => ({
 
 export async function GET() {
   // Preview mode: Show menu with original default
-  if (!IS_PROD || IS_PREVIEW_DEPLOY)
+  if (!IS_PROD) {
     return NextResponse.json(getPreviewConfig())
+  }
 
   try {
     const matomoUrl = process.env.NEXT_PUBLIC_MATOMO_URL

src/components/BigNumber/index.tsx

@@ -118,9 +118,18 @@ const BigNumber = async ({
           </div>
         </>
       ) : (
-        <span className="pt-4 text-md text-body-medium">
-          {t("loading-error-refresh")}
-        </span>
+        <>
+          <div
+            data-label="value"
+            className={valueVariants({ variant })}
+            aria-label={t("loading-error-refresh")}
+          >
+            —
+          </div>
+          <div className={childrenVariants({ variant })}>
+            <span>{children}</span>
+          </div>
+        </>
       )}
     </div>
   )

src/components/Footer.tsx

@@ -13,6 +13,8 @@ import Translation from "@/components/Translation"
 import { cn } from "@/lib/utils/cn"
 import { scrollIntoView } from "@/lib/utils/scrollIntoView"
 
+import { ENTERPRISE_ETHEREUM_URL } from "@/lib/constants"
+
 import { Button } from "./ui/buttons/Button"
 import { BaseLink } from "./ui/Link"
 import { List, ListItem } from "./ui/list"
@@ -185,7 +187,7 @@ const Footer = ({ lastDeployLocaleTimestamp }: FooterProps) => {
           text: t("nav-docs-design-label"),
         },
         {
-          href: "https://institutions.ethereum.org/",
+          href: ENTERPRISE_ETHEREUM_URL,
           text: t("enterprise-mainnet"),
         },
         {

src/components/Hero/HomeHero2026/index.tsx

@@ -0,0 +1,187 @@
+import { Fragment } from "react"
+import { getImageProps, type StaticImageData } from "next/image"
+
+import type { ClassNameProp } from "@/lib/types"
+
+import LanguageMorpher from "@/components/Homepage/LanguageMorpher"
+import PersonaModalCTA from "@/components/Homepage/PersonaModalCTA"
+import EthGlyphIcon from "@/components/icons/eth-glyph.svg"
+import EthTokenIcon from "@/components/icons/eth-token.svg"
+import EthWalletIcon from "@/components/icons/eth-wallet.svg"
+import TryAppsIcon from "@/components/icons/phone-homescreen.svg"
+import SvgButtonLink, {
+  type SvgButtonLinkProps,
+} from "@/components/ui/buttons/SvgButtonLink"
+
+import { cn } from "@/lib/utils/cn"
+import { breakpointAsNumber } from "@/lib/utils/screen"
+
+import heroBase from "@/public/images/home/hero.png"
+import hero2xl from "@/public/images/home/hero-2xl.png"
+
+export type CTAVariant = "modal" | "direct-buttons"
+
+type HomeHero2026Props = ClassNameProp & {
+  image?: StaticImageData
+  image2xl?: StaticImageData
+  alt?: string
+  ctaVariant?: CTAVariant
+  eventCategory?: string
+}
+
+const directButtonCTAs = [
+  {
+    label: "Learn Ethereum",
+    description: "What is Ethereum?",
+    href: "/what-is-ethereum/",
+    Svg: EthGlyphIcon,
+    className: "text-accent-a hover:text-accent-a-hover",
+    eventName: "learn_ethereum",
+  },
+  {
+    label: "Pick a wallet",
+    description: "Create accounts, manage assets",
+    href: "/wallets/find-wallet/",
+    Svg: EthWalletIcon,
+    className: "text-primary hover:text-primary-hover",
+    eventName: "pick_wallet",
+  },
+  {
+    label: "Get ETH",
+    description: "The currency of Ethereum",
+    href: "/get-eth/",
+    Svg: EthTokenIcon,
+    className: "text-accent-b hover:text-accent-b-hover",
+    eventName: "get_eth",
+  },
+  {
+    label: "Try apps",
+    description: "See what Ethereum can do",
+    href: "/dapps/",
+    Svg: TryAppsIcon,
+    className: "text-accent-c hover:text-accent-c-hover",
+    eventName: "try_apps",
+  },
+]
+
+const HomeHero2026 = ({
+  className,
+  image,
+  image2xl,
+  alt: altProp,
+  ctaVariant = "modal",
+  eventCategory = "Homepage",
+}: HomeHero2026Props) => {
+  const baseImage = image ?? heroBase
+  const xlImage = image2xl ?? image ?? hero2xl
+  const alt = altProp ?? "Ethereum illustration"
+
+  const common = {
+    alt,
+    sizes: `(max-width: ${breakpointAsNumber["2xl"]}px) 100vw, ${breakpointAsNumber["2xl"]}px`,
+    priority: true,
+  }
+
+  const {
+    props: { srcSet: srcSet2xl },
+  } = getImageProps({ ...common, ...xlImage, quality: 20 })
+
+  const {
+    props: { srcSet: srcSetMd },
+  } = getImageProps({ ...common, ...baseImage, quality: 10 })
+
+  const {
+    props: { srcSet: srcSetBase, ...rest },
+  } = getImageProps({ ...common, ...baseImage, quality: 5 })
+
+  return (
+    <section className={cn("w-full", className)}>
+      <div className="h-[240px] overflow-hidden md:h-[380px] lg:h-[480px]">
+        <picture>
+          <source
+            media={`(min-width: ${breakpointAsNumber["2xl"]}px)`}
+            srcSet={srcSet2xl}
+          />
+          <source
+            media={`(min-width: ${breakpointAsNumber["md"]}px) and (max-width: ${breakpointAsNumber["2xl"] - 1}px)`}
+            srcSet={srcSetMd}
+          />
+          <source
+            media={`(max-width: ${breakpointAsNumber["md"] - 1}px)`}
+            srcSet={srcSetBase}
+          />
+          <img {...rest} alt={alt} className="h-full w-full object-cover" />
+        </picture>
+      </div>
+
+      <div className="flex flex-col items-center px-4 py-12 text-center lg:py-16">
+        <div className="flex w-full flex-col items-center gap-4">
+          <LanguageMorpher />
+
+          <div className="flex flex-col items-center gap-8">
+            <h1 className="max-w-[893px] text-4xl font-black leading-[1.1] md:text-6xl lg:text-7xl lg:leading-[0.9]">
+              The internet that the world can rely on.
+            </h1>
+
+            <p className="max-w-[741px] text-lg leading-relaxed tracking-[0.07px] text-body-medium md:text-2xl md:leading-[1.625]">
+              Ethereum is the global network where you control your assets, your
+              data, and your identity.
+            </p>
+
+            {ctaVariant === "modal" ? (
+              <PersonaModalCTA eventCategory={eventCategory} />
+            ) : (
+              <div className="-mb-8 grid w-full grid-cols-2 gap-x-4 gap-y-8 border-b py-20 md:grid-cols-4 md:gap-x-10 lg:-mb-12">
+                {directButtonCTAs.map(
+                  ({
+                    label,
+                    description,
+                    href,
+                    className: ctaClass,
+                    Svg,
+                    eventName,
+                  }) => {
+                    const Link = (
+                      props: Omit<
+                        SvgButtonLinkProps,
+                        "Svg" | "href" | "label" | "children"
+                      >
+                    ) => (
+                      <SvgButtonLink
+                        Svg={Svg}
+                        href={href}
+                        label={label}
+                        customEventOptions={{
+                          eventCategory,
+                          eventAction: "cta_click",
+                          eventName,
+                        }}
+                        {...props}
+                      >
+                        <p className="text-body">{description}</p>
+                      </SvgButtonLink>
+                    )
+                    return (
+                      <Fragment key={label}>
+                        <Link
+                          className={cn("xl:hidden", ctaClass)}
+                          variant="col"
+                        />
+                        <Link
+                          className={cn("hidden xl:block", ctaClass)}
+                          variant="row"
+                        />
+                      </Fragment>
+                    )
+                  }
+                )}
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+    </section>
+  )
+}
+
+export default HomeHero2026

src/components/Homepage/BentoCardSwiper.tsx

@@ -32,8 +32,8 @@ const BentoCardSwiper = ({
       onSlideChange={({ activeIndex }) => {
         trackCustomEvent({
           eventCategory,
-          eventAction: "mobile use cases",
-          eventName: `swipe to card ${activeIndex + 1}`,
+          eventAction: "cta_swipe",
+          eventName: String(activeIndex + 1),
         })
       }}
     >