diff --git a/app/[locale]/learn/_components/learn.tsx b/app/[locale]/learn/_components/learn.tsx
deleted file mode 100644
index 428303a2b12..00000000000
--- a/app/[locale]/learn/_components/learn.tsx
+++ /dev/null
@@ -1,705 +0,0 @@
-"use client"
-
-import type { HTMLAttributes, ReactNode } from "react"
-
-import type {
- ChildOnlyProp,
- PageWithContributorsProps,
- ToCItem,
-} from "@/lib/types"
-
-import OriginalCard, {
- type CardProps as OriginalCardProps,
-} from "@/components/Card"
-import DocLink from "@/components/DocLink"
-import FeedbackCard from "@/components/FeedbackCard"
-import FileContributors from "@/components/FileContributors"
-import { HubHero } from "@/components/Hero"
-import type { HubHeroProps } from "@/components/Hero/HubHero"
-import { Image, type ImageProps } from "@/components/Image"
-import LeftNavBar from "@/components/LeftNavBar"
-import MainArticle from "@/components/MainArticle"
-import { ContentContainer } from "@/components/MdComponents"
-import { ButtonLink } from "@/components/ui/buttons/Button"
-import { Center, Flex, Stack } from "@/components/ui/flex"
-import InlineLink from "@/components/ui/Link"
-import { ListItem, UnorderedList } from "@/components/ui/list"
-
-import useTranslation from "@/hooks/useTranslation"
-import developersEthBlocks from "@/public/images/developers-eth-blocks.png"
-import dogeComputer from "@/public/images/doge-computer.png"
-import enterprise from "@/public/images/enterprise-eth.png"
-import eth from "@/public/images/eth.png"
-import financeTransparent from "@/public/images/finance_transparent.png"
-import futureTransparent from "@/public/images/future_transparent.png"
-import hackathon from "@/public/images/hackathon_transparent.png"
-import heroImage from "@/public/images/heroes/learn-hub-hero.png"
-import impact from "@/public/images/impact_transparent.png"
-import infrastructureTransparent from "@/public/images/infrastructure_transparent.png"
-import Layer2LearnHero from "@/public/images/layer-2/learn-hero.png"
-import ethereumInside from "@/public/images/run-a-node/ethereum-inside.png"
-import stablecoins from "@/public/images/stablecoins/hero.png"
-import merge from "@/public/images/upgrades/merge.png"
-import newRings from "@/public/images/upgrades/newrings.png"
-import rhino from "@/public/images/upgrades/upgrade_rhino.png"
-import dao from "@/public/images/use-cases/dao-2.png"
-import wallet from "@/public/images/wallet.png"
-import whatIsEth from "@/public/images/what-is-ethereum.png"
-
-// TODO: Migrate the original Card component before updating this
-const Card = ({ children, ...props }: OriginalCardProps) => (
-
- {children}
-
-)
-
-const CardImage = ({ children }: ChildOnlyProp) => (
- {children}
-)
-
-const AdditionalDocReading = ({
- headingText,
- docLinks,
-}: {
- headingText: string
- docLinks: Array<{ href: string; label: string; isExternal?: boolean }>
-}) => (
-
- {headingText}
-
- {docLinks.map(({ label, ...rest }) => (
-
- {label}
-
- ))}
-
-
-)
-
-const Section = ({
- headingId,
- headingTitle,
- description,
- children,
-}: {
- headingId: string
- headingTitle: string
- description?: string
- children: ReactNode
-}) => (
-
-
-
-
- {headingTitle}
-
- {description && {description}
}
-
- {children}
-
-
-)
-
-const CardGrid = ({ children }: ChildOnlyProp) => (
-
- {children}
-
-)
-
-const H3 = ({ children, ...props }: HTMLAttributes) => (
-
- {children}
-
-)
-
-const ImageHeight200 = ({ src, alt }: ImageProps) => (
-
-)
-
-const LearnPage = ({
- contributors,
- lastEditLocaleTimestamp,
-}: PageWithContributorsProps) => {
- const { t } = useTranslation("page-learn")
-
- const tocItems = [
- {
- id: "what-is-crypto-ethereum",
- title: t("toc-what-is-crypto-ethereum"),
- },
- {
- id: "how-do-i-use-ethereum",
- title: t("toc-how-do-i-use-ethereum"),
- },
- {
- id: "what-is-ethereum-used-for",
- title: t("toc-what-is-ethereum-used-for"),
- },
- {
- id: "strengthen-the-ethereum-network",
- title: t("toc-strengthen-the-ethereum-network"),
- },
- {
- id: "learn-about-the-ethereum-protocol",
- title: t("toc-learn-about-the-ethereum-protocol"),
- },
- {
- id: "learn-about-the-ethereum-community",
- title: t("toc-learn-about-the-ethereum-community"),
- },
- {
- id: "books-and-podcasts",
- title: t("toc-books-and-podcasts"),
- },
- ]
- const tocData: ToCItem[] = tocItems.map(({ id, title }) => ({
- title,
- url: "#" + id,
- }))
-
- const heroContent: HubHeroProps = {
- title: t("common:learn-hub"),
- header: t("hero-header"),
- description: t("hero-subtitle"),
- heroImg: heroImage,
- buttons: [
- {
- content: t("hero-button-lets-get-started"),
- toId: tocItems[0].id,
- matomo: {
- eventCategory: "learn hub hero buttons",
- eventAction: "click",
- eventName: "lets get started",
- },
- },
- ],
- }
-
- return (
-
-
-
-
-
-
-
-
-
-
-
- <>
-
-
-
-
- {t("what-is-ethereum-card-title")}
-
-
-
-
- <>
-
-
-
-
- {t("what-is-eth-card-title")}
-
-
-
-
- <>
-
-
-
-
- {t("what-is-web3-card-title")}
-
-
-
-
-
-
-
-
-
-
-
- <>
-
-
-
-
- {t("what-is-a-wallet-card-title")}
-
-
-
-
- <>
-
-
-
-
- {t("find-a-wallet-button")}
-
-
-
-
- <>
-
-
-
-
- {t("ethereum-networks-card-button")}
-
-
-
-
-
-
-
- {t("things-to-consider-banner-title")}
-
- {t("things-to-consider-banner-1")}
-
- {t("things-to-consider-banner-2")}{" "}
-
- {t("things-to-consider-banner-layer-2")}
-
- .
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- <>
-
-
-
-
- {t("defi-card-button")}
-
-
-
-
- <>
-
-
-
-
- {t("stablecoins-card-button")}
-
-
-
-
- <>
-
-
-
- {t("nft-card-button")}
-
-
-
- <>
-
-
-
- {t("dao-card-button")}
-
-
-
- <>
-
-
-
-
- {t("dapp-card-button")}
-
-
-
-
-
-
-
-
- {t("common:decentralized-identity")}
-
-
-
-
- {t("common:decentralized-social-networks")}
-
-
-
-
- {t("common:decentralized-science")}
-
-
-
-
- {t("play-to-earn")}
-
-
-
-
- {t("fundraising-through-quadratic-funding")}
-
-
-
-
- {t("supply-chain-management")}
-
-
-
-
-
-
-
-
-
-
-
- <>
-
-
-
-
- {t("staking-ethereum-card-button")}
-
-
-
-
- <>
-
-
-
-
- {t("run-a-node-card-title")}
-
-
-
-
-
-
-
-
-
- <>
-
-
-
-
- {t("energy-consumption-card-button")}
-
-
-
-
- <>
-
-
-
-
- {t("ethereum-upgrades-card-button")}
-
-
-
-
- <>
-
-
-
-
- {t("ethereum-whitepaper-card-button")}
-
-
-
-
-
-
-
-
-
-
-
- <>
-
-
-
-
- {t("community-hub-card-button")}
-
-
-
-
- <>
-
-
-
-
- {t("get-involved-card-title")}
-
-
-
-
- <>
-
-
-
-
- {t("online-communities-card-button")}
-
-
-
-
-
-
-
-
- {t("books-about-ethereum")}
-
-
-
- {t("cryptopians-title")}
- {" "}
- {t("cryptopians-description")}
-
-
-
- {t("out-of-the-ether-title")}
- {" "}
- {t("out-of-the-ether-description")}
-
-
-
- {t("the-infinite-machine-title")}
- {" "}
- {t("the-infinite-machine-description")}
-
-
-
- {t("mastering-ethereum-title")}
- {" "}
- {t("mastering-ethereum-description")}
-
-
-
- {t("proof-of-stake-title")}
- {" "}
- {t("proof-of-stake-description")}
-
-
- {t("podcasts-about-ethereum")}
-
-
-
- {t("green-pill-title")}
- {" "}
- {t("green-pill-description")}
-
-
-
- {t("zeroknowledge-title")}
- {" "}
- {t("zeroknowledge-description")}
-
-
-
- {t("unchained-title")}
- {" "}
- {t("unchained-description")}
-
-
-
- {t("the-daily-gwei-title")}
- {" "}
- {t("the-daily-gwei-description")}
-
-
-
- {t("bankless-title")}
- {" "}
- {t("bankless-description")}
-
-
-
-
-
-
-
-
-
-
-
{headingText}
+
+ {docLinks.map(({ label, ...rest }) => (
+
+ {label}
+
+ ))}
+
+
+)
+
+const Section = ({
+ headingId,
+ headingTitle,
+ description,
+ children,
+}: {
+ headingId: string
+ headingTitle: string
+ description?: string
+ children: ReactNode
+}) => (
+
+
+
+
+ {headingTitle}
+
+ {description && {description}
}
+
+ {children}
+
+
+)
- setRequestLocale(locale)
+const CardGrid = ({ children }: ChildOnlyProp) => (
+
+ {children}
+
+)
- // Get i18n messages
- const allMessages = await getMessages({ locale })
- const requiredNamespaces = getRequiredNamespacesForPage("/learn")
- const messages = pick(allMessages, requiredNamespaces)
+const H3 = ({ children, ...props }: HTMLAttributes) => (
+
+ {children}
+
+)
+
+const ImageHeight200 = ({ src, alt }: ImageProps) => (
+
+)
+
+export default async function Page({ params }: { params: Promise }) {
+ const { locale } = await params
+ const t = await getTranslations({ locale, namespace: "page-learn" })
+ const tCommon = await getTranslations({ locale, namespace: "common" })
const commitHistoryCache: CommitHistory = {}
const { contributors, lastEditLocaleTimestamp } =
await getAppPageContributorInfo("learn", locale as Lang, commitHistoryCache)
+ const tocItems = [
+ {
+ id: "what-is-crypto-ethereum",
+ title: t("toc-what-is-crypto-ethereum"),
+ },
+ {
+ id: "how-do-i-use-ethereum",
+ title: t("toc-how-do-i-use-ethereum"),
+ },
+ {
+ id: "what-is-ethereum-used-for",
+ title: t("toc-what-is-ethereum-used-for"),
+ },
+ {
+ id: "strengthen-the-ethereum-network",
+ title: t("toc-strengthen-the-ethereum-network"),
+ },
+ {
+ id: "learn-about-the-ethereum-protocol",
+ title: t("toc-learn-about-the-ethereum-protocol"),
+ },
+ {
+ id: "learn-about-the-ethereum-community",
+ title: t("toc-learn-about-the-ethereum-community"),
+ },
+ {
+ id: "books-and-podcasts",
+ title: t("toc-books-and-podcasts"),
+ },
+ ]
+ const tocData: ToCItem[] = tocItems.map(({ id, title }) => ({
+ title,
+ url: "#" + id,
+ }))
+
+ const heroContent: HubHeroProps = {
+ title: tCommon("learn-hub"),
+ header: t("hero-header"),
+ description: t("hero-subtitle"),
+ heroImg: heroImage,
+ buttons: [
+ {
+ content: t("hero-button-lets-get-started"),
+ toId: tocItems[0].id,
+ matomo: {
+ eventCategory: "learn hub hero buttons",
+ eventAction: "click",
+ eventName: "lets get started",
+ },
+ },
+ ],
+ }
+
return (
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+ <>
+
+
+
+
+ {t("what-is-ethereum-card-title")}
+
+
+
+
+ <>
+
+
+
+
+ {t("what-is-eth-card-title")}
+
+
+
+
+ <>
+
+
+
+
+ {t("what-is-web3-card-title")}
+
+
+
+
+
+
+
+
+
+
+
+ <>
+
+
+
+
+ {t("what-is-a-wallet-card-title")}
+
+
+
+
+ <>
+
+
+
+
+ {t("find-a-wallet-button")}
+
+
+
+
+ <>
+
+
+
+
+ {t("ethereum-networks-card-button")}
+
+
+
+
+
+
+
+ {t("things-to-consider-banner-title")}
+
+ {t("things-to-consider-banner-1")}
+
+ {t("things-to-consider-banner-2")}{" "}
+
+ {t("things-to-consider-banner-layer-2")}
+
+ .
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ <>
+
+
+
+
+ {t("defi-card-button")}
+
+
+
+
+ <>
+
+
+
+
+ {t("stablecoins-card-button")}
+
+
+
+
+ <>
+
+
+
+ {t("nft-card-button")}
+
+
+
+ <>
+
+
+
+ {t("dao-card-button")}
+
+
+
+ <>
+
+
+
+
+ {t("dapp-card-button")}
+
+
+
+
+
+
+
+
+ {tCommon("decentralized-identity")}
+
+
+
+
+ {tCommon("decentralized-social-networks")}
+
+
+
+
+ {tCommon("decentralized-science")}
+
+
+
+
+ {t("play-to-earn")}
+
+
+
+
+ {t("fundraising-through-quadratic-funding")}
+
+
+
+
+ {t("supply-chain-management")}
+
+
+
+
+
+
+
+
+
+
+
+ <>
+
+
+
+
+ {t("staking-ethereum-card-button")}
+
+
+
+
+ <>
+
+
+
+
+ {t("run-a-node-card-title")}
+
+
+
+
+
+
+
+
+
+ <>
+
+
+
+
+ {t("energy-consumption-card-button")}
+
+
+
+
+ <>
+
+
+
+
+ {t("ethereum-upgrades-card-button")}
+
+
+
+
+ <>
+
+
+
+
+ {t("ethereum-whitepaper-card-button")}
+
+
+
+
+
+
+
+
+
+
+
+ <>
+
+
+
+
+ {t("community-hub-card-button")}
+
+
+
+
+ <>
+
+
+
+
+ {t("get-involved-card-title")}
+
+
+
+
+ <>
+
+
+
+
+ {t("online-communities-card-button")}
+
+
+
+
+
+
+
+
+ {t("books-about-ethereum")}
+
+
+
+ {t("cryptopians-title")}
+ {" "}
+ {t("cryptopians-description")}
+
+
+
+ {t("out-of-the-ether-title")}
+ {" "}
+ {t("out-of-the-ether-description")}
+
+
+
+ {t("the-infinite-machine-title")}
+ {" "}
+ {t("the-infinite-machine-description")}
+
+
+
+ {t("mastering-ethereum-title")}
+ {" "}
+ {t("mastering-ethereum-description")}
+
+
+
+ {t("proof-of-stake-title")}
+ {" "}
+ {t("proof-of-stake-description")}
+
+
+ {t("podcasts-about-ethereum")}
+
+
+
+ {t("green-pill-title")}
+ {" "}
+ {t("green-pill-description")}
+
+
+
+ {t("zeroknowledge-title")}
+ {" "}
+ {t("zeroknowledge-description")}
+
+
+
+ {t("unchained-title")}
+ {" "}
+ {t("unchained-description")}
+
+
+
+ {t("the-daily-gwei-title")}
+ {" "}
+ {t("the-daily-gwei-description")}
+
+
+
+ {t("bankless-title")}
+ {" "}
+ {t("bankless-description")}
+
+
+
+
+
+
+
+
+
+
+