diff --git a/app/[locale]/learn/page.tsx b/app/[locale]/learn/page.tsx index bbd12bbca74..52db0c8a826 100644 --- a/app/[locale]/learn/page.tsx +++ b/app/[locale]/learn/page.tsx @@ -1,117 +1,85 @@ -import { HTMLAttributes, ReactNode } from "react" +import { Fragment } from "react" import { getTranslations } from "next-intl/server" -import type { ChildOnlyProp, PageParams, ToCItem } from "@/lib/types" +import type { PageParams, ToCItem } from "@/lib/types" import type { Lang } 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 CalloutBannerSSR from "@/components/CalloutBannerSSR" +import DocLink, { type DocLinkProps } from "@/components/DocLink" import { HubHero } from "@/components/Hero" import type { HubHeroProps } from "@/components/Hero/HubHero" -import { Image, ImageProps } from "@/components/Image" -import MainArticle from "@/components/MainArticle" -import { ContentContainer } from "@/components/MdComponents" -import TableOfContents from "@/components/TableOfContents" +import { Image, type ImageProps } from "@/components/Image" import { ButtonLink } from "@/components/ui/buttons/Button" -import { Center, Flex, Stack } from "@/components/ui/flex" +import { + Card, + CardBanner, + CardContent, + CardParagraph, + CardTitle, +} from "@/components/ui/card" import InlineLink from "@/components/ui/Link" import { ListItem, UnorderedList } from "@/components/ui/list" +import { Section } from "@/components/ui/section" import { getAppPageContributorInfo } from "@/lib/utils/contributors" import { getMetadata } from "@/lib/utils/metadata" import LearnPageJsonLD from "./page-jsonld" +import { ContentLayout } from "@/layouts/ContentLayout" 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, + heading, docLinks, }: { - headingText: string - docLinks: Array<{ href: string; label: string; isExternal?: boolean }> + heading: string + docLinks: DocLinkProps[] }) => ( - -

{headingText}

- - {docLinks.map(({ label, ...rest }) => ( - - {label} +
+

{heading}

+
+ {docLinks.map(({ children, ...rest }) => ( + + {children} ))} - - +
+
) -const Section = ({ - headingId, - headingTitle, +const LearnCard = ({ + href, + image, + title, description, - children, + ctaLabel, }: { - headingId: string - headingTitle: string - description?: string - children: ReactNode + href: string + image: ImageProps["src"] + title: string + description: string + ctaLabel: string }) => ( - -
- -

- {headingTitle} -

- {description &&

{description}

} -
- {children} -
-
-) - -const CardGrid = ({ children }: ChildOnlyProp) => ( -
{children}
-) - -const H3 = ({ children, ...props }: HTMLAttributes) => ( -

- {children} -

-) - -const ImageHeight200 = ({ src, alt }: ImageProps) => ( - {alt} + + + + + + {title} + {description} + + {ctaLabel} + ) export default async function Page(props: { params: Promise }) { @@ -125,7 +93,7 @@ export default async function Page(props: { params: Promise }) { const tocItems = [ { - id: "what-is-crypto-ethereum", + id: "understand-ethereum", title: t("toc-what-is-crypto-ethereum"), }, { @@ -137,22 +105,15 @@ export default async function Page(props: { params: Promise }) { 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: "go-deeper", + title: t("toc-go-deeper"), }, { id: "books-and-podcasts", title: t("toc-books-and-podcasts"), }, ] + const tocData: ToCItem[] = tocItems.map(({ id, title }) => ({ title, url: "#" + id, @@ -176,558 +137,329 @@ export default async function Page(props: { params: Promise }) { ], } + const furtherReading: { + heading: string + items: { + label: string + href: string + description: string + }[] + }[] = [ + { + heading: t("books-about-ethereum"), + items: [ + { + label: t("cryptopians-title"), + href: "https://www.goodreads.com/book/show/57356067-the-cryptopians", + description: t("cryptopians-description"), + }, + { + label: t("out-of-the-ether-title"), + href: "https://www.goodreads.com/book/show/55360267-out-of-the-ether", + description: t("out-of-the-ether-description"), + }, + { + label: t("the-infinite-machine-title"), + href: "https://www.goodreads.com/en/book/show/50175330-the-infinite-machine", + description: t("the-infinite-machine-description"), + }, + { + label: t("mastering-ethereum-title"), + href: "https://github.com/ethereumbook/ethereumbook", + description: t("mastering-ethereum-description"), + }, + { + label: t("proof-of-stake-title"), + href: "https://www.goodreads.com/en/book/show/59892281-proof-of-stake", + description: t("proof-of-stake-description"), + }, + ], + }, + { + heading: t("podcasts-about-ethereum"), + items: [ + { + label: t("green-pill-title"), + href: "https://www.youtube.com/@Green_Pill_Podcast", + description: t("green-pill-description"), + }, + { + label: t("zeroknowledge-title"), + href: "https://www.zeroknowledge.fm/", + description: t("zeroknowledge-description"), + }, + { + label: t("unchained-title"), + href: "https://unchainedpodcast.com/", + description: t("unchained-description"), + }, + { + label: t("the-daily-gwei-title"), + href: "https://www.youtube.com/@TheDailyGwei/", + description: t("the-daily-gwei-description"), + }, + { + label: t("bankless-title"), + href: "https://podcast.banklesshq.com/", + description: t("bankless-description"), + }, + ], + }, + { + heading: t("about-ethereum-video-series"), + items: [ + { + label: t("ethereum-basics-title"), + href: "https://www.youtube.com/playlist?list=PLqgutSGloqiJyyoL0zvLVFPS-GMD2wKa5", + description: t("ethereum-basics-description"), + }, + ], + }, + ] + return ( <> -
- - - - - - - -
- - - <> - - - - - {t("what-is-ethereum-card-title")} - - - - - <> - - - - - {t("what-is-eth-card-title")} - - - - - <> - - - - - {t("what-is-web3-card-title")} - - - - - - } + showDropdown={false} + > +
+ {/* Section 1: Understand Ethereum */} +
+
+

{tocItems[0].title}

+

+ {t("what-is-crypto-2-before-link")}{" "} + {tCommon("ethereum")}{" "} + {t("what-is-crypto-2-after-link")} +

+ +
+ -
- -
- - - <> - - - - - {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("keep-learning-title")}

    +
    + + + +
    + + +
    +
    + + {/* Section 2: How to use Ethereum */} +
    +
    +

    {tocItems[1].title}

    +

    {t("how-do-i-use-ethereum-1")}

    + +
    + + + +
    + + +
    +
    + + {/* Section 3: What is Ethereum used for - banner only */} +
    +
    +

    {tocItems[2].title}

    +

    {t("what-is-ethereum-used-for-1")}

    + + - -

    {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")} - - -

    {t("about-ethereum-video-series")}

    + + {t("explore-use-cases-cta")} + +
    +
    +
    + + {/* Section 4: Go deeper */} +
    +
    +

    {tocItems[3].title}

    +

    {t("go-deeper-description")}

    +
    + +
    + + + +
    + + +
    + + {/* Section 5: Books and podcasts */} +
    +
    +

    {tocItems[4].title}

    + + {furtherReading.map(({ heading, items }) => ( + +

    {heading}

    - - - {t("ethereum-basics-title")} - {" "} - {t("ethereum-basics-description")} - + {items.map(({ label, href, description }) => ( + + {label} -{" "} + {description} + + ))} - -
    - - - -
    -
    -
    -
    + + ))} + + + + ) } diff --git a/src/intl/en/page-learn.json b/src/intl/en/page-learn.json index 6b2fbeba9d8..cc5ca80f33e 100644 --- a/src/intl/en/page-learn.json +++ b/src/intl/en/page-learn.json @@ -1,26 +1,43 @@ { - "about-ethereum-video-series": "Video series about Ethereum", + "about-ethereum-video-series": "Video series", "toc-learn-hub": "Learn hub", - "toc-what-is-crypto-ethereum": "What is Ethereum?", + "toc-what-is-crypto-ethereum": "Understand Ethereum", "toc-how-do-i-use-ethereum": "How do I use Ethereum?", "toc-what-is-ethereum-used-for": "What is Ethereum used for?", - "toc-strengthen-the-ethereum-network": "Strengthen the Ethereum network", - "toc-learn-about-the-ethereum-protocol": "Learn about the Ethereum protocol", + "toc-go-deeper": "How Ethereum works", "toc-learn-about-the-ethereum-community": "Learn about the Ethereum community", - "toc-books-and-podcasts": "Books and podcasts", + "toc-books-and-podcasts": "Books, podcasts, and series about Ethereum", "hero-header": "Learn about Ethereum", "hero-subtitle": "Your educational guide to the world of Ethereum. Learn how Ethereum works and how to connect to it. This page includes technical and non-technical articles, guides, and resources.", "hero-button-lets-get-started": "Let's get started", "page-learn-meta-title": "Ethereum: A Comprehensive Learning Guide", - "what-is-crypto-1": "You may have heard about cryptocurrencies, blockchains and Bitcoin. The links below will help you learn what they are and how they relate to Ethereum.", - "what-is-crypto-2": "Cryptocurrencies, such as bitcoin, enable anyone to transfer money globally. Ethereum does that too, but it can also run code that enables people to create apps and organizations. It’s both resilient and flexible: any computer program can run on Ethereum. Learn more and find out how to get started:", + "what-is-crypto-2-before-link": "Cryptocurrencies, such as bitcoin, enable anyone to transfer money globally.", + "what-is-crypto-2-after-link": "does that too, but it can also run code that enables people to create apps and organizations. It's both resilient and flexible: any computer program can run on Ethereum. Learn more and find out how to get started:", "what-is-ethereum-card-title": "What is Ethereum?", "what-is-ethereum-card-description": "If you are new, start here to learn why Ethereum matters.", "what-is-ethereum-card-image-alt": "Illustration of a person peering into a bazaar, meant to represent Ethereum.", - "what-is-eth-card-title": "What is ETH?", - "what-is-eth-description": "Ether (ETH) is the currency powering the Ethereum network and apps.", + "understand-ethereum-card-description": "Understand what makes Ethereum special and how it differs from other technologies.", + "understand-ethereum-cta": "Start here", + "ethereum-network-card-title": "What is the Ethereum network?", + "ethereum-network-card-description": "Understand how the Ethereum network works: nodes, validators, and how transactions are processed.", + "ethereum-network-cta": "Explore the network", + "what-is-eth-card-title": "What is ether (ETH)?", + "what-is-eth-description": "Understand Ethereum's native currency ether (ETH) and how it powers the network.", + "what-is-eth-cta": "Learn about ETH", + "ethereum-vs-bitcoin-card-title": "Ethereum vs Bitcoin", + "ethereum-vs-bitcoin-card-description": "Understand the differences between Ethereum and Bitcoin and what each is designed to do.", + "ethereum-vs-bitcoin-cta": "Compare the two", + "ethereum-history-card-title": "History, founder and ownership", + "ethereum-history-card-description": "Understand the history, founder and ownership of Ethereum and how it is governed.", + "ethereum-history-cta": "Read the history", "what-is-web3-card-title": "What is Web3?", - "what-is-web3-card-description": "Web3 is a model for the internet valuing ownership of your assets and identity.", + "what-is-web3-card-description": "An alternative to centralized monopolies dictating the rules of the internet.", + "what-is-web3-cta": "Discover Web3", + "smart-contracts-card-title": "Smart contracts", + "smart-contracts-card-description": "The fundamental building blocks of the Ethereum ecosystem.", + "smart-contracts-cta": "How they work", + "wallets-card-description": "An app to interact with your Ethereum account, manage funds, and connect to applications.", + "wallets-cta": "Learn about wallets", "additional-reading-more-on-ethereum-basics": "More on Ethereum basics", "guides-hub-desc": "Guides: step-by-step instructions on using Ethereum", "quiz-hub-desc": "Quiz hub: test your knowledge", @@ -29,7 +46,7 @@ "additional-reading-ethereum-in-thirty-minutes": "Ethereum in 30 minutes by Vitalik Buterin", "additional-reading-get-eth": "Learn how to get ETH", "how-do-i-use-ethereum-1": "Using Ethereum can mean lots of things to lots of people. Maybe you want to sign in to an app, prove your online identity, or transfer some ETH. The first thing you'll need is an account. The easiest way to create and access an account is using software called a wallet.", - "what-is-a-wallet-card-title": "What is a wallet?", + "what-is-a-wallet-card-title": "Ethereum wallets", "what-is-a-wallet-card-description": "Digital wallets are like real wallets; they store what you need to prove your identity and get access to the places you value.", "what-is-a-wallet-card-alt": "Illustration of a robot.", "find-a-wallet-card-title": "Find a wallet", @@ -46,7 +63,7 @@ "additional-reading-how-to-create-an-ethereum-account": "How to create an Ethereum account", "additional-reading-how-to-use-a-wallet": "How to use a wallet", "additional-reading-layer-2": "Layer 2: reducing transaction fees", - "what-is-ethereum-used-for-1": "Ethereum has led to the creation of new products and services that can improve different areas of our lives. We're still in the early stages but there's a lot to be excited about.", + "what-is-ethereum-used-for-1": "Ethereum has led to the creation of new products and services that can improve different areas of our lives. From financial tools and digital ownership to governance and science, there is a growing list of use cases.", "defi-card-title": "Decentralized finance (DeFi)", "defi-card-description": "Explore an alternative financial system that is built without banks and is open to anyone.", "defi-card-button": "What is DeFi?", @@ -59,23 +76,18 @@ "dao-card-title": "Decentralized autonomous organizations (DAOs)", "dao-card-description": "Enable new ways to coordinate work without a boss.", "dao-card-button": "What are DAOs?", - "dapp-card-title": "Ethereum applications", - "dapp-card-description": "Create digital economy of peer-to-peer services.", - "dapp-card-button": "What are apps?", - "emerging-use-cases-title": "Emerging use cases", - "emerging-use-cases-description": "There are also other prominent industries being created or improved with Ethereum:", - "play-to-earn": "Play-to-earn games (P2E)", - "fundraising-through-quadratic-funding": "Fundraising through Quadratic Funding", - "supply-chain-management": "Supply chain management", - "more-on-ethereum-use-cases": "More on Ethereum use cases", - "more-on-ethereum-use-cases-link": "Blockchain in developing countries", - "strengthening-the-ethereum-network-description": "You can help secure Ethereum and earn rewards at the same time by staking your ETH. There are different options for staking depending on your technical knowledge and how much ETH you have.", - "staking-ethereum-card-title": "Staking Ethereum", - "staking-ethereum-card-description": "Learn how to start staking your ETH.", - "staking-ethereum-card-button": "Start staking", - "run-a-node-card-title": "Run a node", - "run-a-node-card-description": "Play a critical role in the Ethereum network by running a node.", - "learn-about-ethereum-protocol-description": "For users most interested in the technical part of the Ethereum network.", + "explore-use-cases-card-title": "Explore all use cases", + "explore-use-cases-card-description": "Discover what people are building on Ethereum: payments, gaming, prediction markets, AI agents, decentralized identity, and more.", + "explore-use-cases-cta": "Explore use cases", + "get-eth-card-title": "Get ETH", + "get-eth-card-description": "Buy or earn ether (ETH) so you can use Ethereum applications and send transactions.", + "get-eth-cta": "How to get ETH", + "more-on-ethereum-history": "More on Ethereum: history, founder and ownership", + "keep-learning-title": "Keep learning", + "go-deeper-description": "Explore the technical side of the Ethereum protocol.", + "privacy-card-title": "Privacy on Ethereum", + "privacy-card-description": "Learn about privacy tools and techniques for protecting your data on Ethereum.", + "privacy-card-button": "Explore privacy", "energy-consumption-card-title": "Energy consumption", "energy-consumption-card-description": "How much energy does Ethereum use?", "energy-consumption-card-button": "Is Ethereum green?", @@ -90,17 +102,18 @@ "more-on-ethereum-protocol-consensus": "Ethereum's proof-of-stake based consensus mechanism", "more-on-ethereum-protocol-evm": "Ethereum's embedded computer (The EVM)", "more-on-ethereum-protocol-nodes-and-clients": "Ethereum nodes and clients", - "ethereum-community-description": "The success of Ethereum is thanks to its incredibly dedicated community. Thousands of inspiring and driven people help push Ethereum’s vision forward, while also providing security to the network through staking and governance. Come and join us!", + "ethereum-community-description": "The success of Ethereum is thanks to its incredibly dedicated community. Thousands of inspiring and driven people help push Ethereum's vision forward, while also providing security to the network through staking and governance. Come and join us!", "community-hub-card-title": "Community hub", "community-hub-card-description": "Our community includes people from all backgrounds.", "community-hub-card-alt": "Illustration of a group of builders working together.", "community-hub-card-button": "Explore more", "get-involved-card-title": "How can I get involved?", "get-involved-card-description": "You (yes, you!) are welcome to contribute to the Ethereum community.", + "get-involved-cta": "Start contributing", "online-communities-card-title": "Online communities", "online-communities-card-description": "Online communities provide a great opportunity to ask more specific questions or get involved.", "online-communities-card-button": "Explore communities", - "books-about-ethereum": "Books about Ethereum", + "books-about-ethereum": "Books", "proof-of-stake-title": "Proof of Stake", "proof-of-stake-description": "September 13, 2022 - Vitalik Buterin, Nathan Schneider", "cryptopians-title": "The Cryptopians", @@ -110,8 +123,8 @@ "the-infinite-machine-title": "The Infinite Machine", "the-infinite-machine-description": "July 14, 2020 - Camila Russo", "mastering-ethereum-title": "Mastering Ethereum", - "mastering-ethereum-description": "December 23, 2018 – Andreas M. Antonopoulos, Gavin Wood Ph.D.", - "podcasts-about-ethereum": "Podcasts about Ethereum", + "mastering-ethereum-description": "December 23, 2018 - Andreas M. Antonopoulos, Gavin Wood Ph.D.", + "podcasts-about-ethereum": "Podcasts", "bankless-title": "Bankless", "bankless-description": "A guide to Crypto finance", "zeroknowledge-title": "Zero Knowledge",