From f1e64797d96a10af36bb65e4b6887007d34365d8 Mon Sep 17 00:00:00 2001
From: Joe Chen <jiajuncjoe@gmail.com>
Date: Sat, 18 Jan 2025 10:08:42 +0800
Subject: [PATCH 1/2] Migrated Image

---
 src/pages/learn.tsx | 58 +++++++++++++++++++--------------------------
 1 file changed, 25 insertions(+), 33 deletions(-)

diff --git a/src/pages/learn.tsx b/src/pages/learn.tsx
index 64dba595f93..2e8592b343e 100644
--- a/src/pages/learn.tsx
+++ b/src/pages/learn.tsx
@@ -12,7 +12,7 @@ import DocLink from "@/components/DocLink"
 import FeedbackCard from "@/components/FeedbackCard"
 import { HubHero } from "@/components/Hero"
 import type { HubHeroProps } from "@/components/Hero/HubHero"
-import { Image, type ImageProps } from "@/components/Image"
+import { type ImageProps, TwImage } from "@/components/Image"
 import LeftNavBar from "@/components/LeftNavBar"
 import MainArticle from "@/components/MainArticle"
 import { ContentContainer } from "@/components/MdComponents"
@@ -121,6 +121,10 @@ const H3 = ({ children, ...props }: HTMLAttributes<HTMLHeadingElement>) => (
   </h3>
 )
 
+const StandarImage = ({ src, alt }: ImageProps) => (
+  <TwImage className="h-[200px] w-auto" src={src} alt={alt} />
+)
+
 export const getStaticProps = (async ({ locale }) => {
   const requiredNamespaces = getRequiredNamespacesForPage("/learn")
 
@@ -197,11 +201,6 @@ const LearnPage = () => {
     ],
   }
 
-  const height200: Partial<ImageProps> = {
-    height: 200,
-    style: { width: "auto", objectFit: "cover" },
-  }
-
   return (
     <div className="relative w-full">
       <PageMetadata
@@ -236,10 +235,9 @@ const LearnPage = () => {
                 >
                   <>
                     <CardImage>
-                      <Image
+                      <StandarImage
                         src={whatIsEth}
                         alt={t("what-is-ethereum-card-image-alt")}
-                        {...height200}
                       />
                     </CardImage>
                     <ButtonLink href="/what-is-ethereum/">
@@ -253,7 +251,7 @@ const LearnPage = () => {
                 >
                   <>
                     <CardImage>
-                      <Image src={eth} alt="" {...height200} />
+                      <StandarImage src={eth} alt="" />
                     </CardImage>
                     <ButtonLink href="/eth/">
                       {t("what-is-eth-card-title")}
@@ -266,7 +264,7 @@ const LearnPage = () => {
                 >
                   <>
                     <CardImage>
-                      <Image src={impact} alt="" {...height200} />
+                      <StandarImage src={impact} alt="" />
                     </CardImage>
                     <ButtonLink href="/web3/">
                       {t("what-is-web3-card-title")}
@@ -305,10 +303,9 @@ const LearnPage = () => {
                 >
                   <>
                     <CardImage>
-                      <Image
+                      <StandarImage
                         src={wallet}
                         alt={t("what-is-a-wallet-card-alt")}
-                        {...height200}
                       />
                     </CardImage>
                     <ButtonLink href="/wallets/">
@@ -322,7 +319,7 @@ const LearnPage = () => {
                 >
                   <>
                     <CardImage>
-                      <Image src={futureTransparent} alt="" {...height200} />
+                      <StandarImage src={futureTransparent} alt="" />
                     </CardImage>
                     <ButtonLink href="/wallets/find-wallet/">
                       {t("find-a-wallet-button")}
@@ -335,7 +332,7 @@ const LearnPage = () => {
                 >
                   <>
                     <CardImage>
-                      <Image src={Layer2LearnHero} alt="" {...height200} />
+                      <StandarImage src={Layer2LearnHero} alt="" />
                     </CardImage>
                     <ButtonLink href="/layer-2/networks">
                       {t("ethereum-networks-card-button")}
@@ -359,7 +356,7 @@ const LearnPage = () => {
                   </UnorderedList>
                 </Stack>
                 <div className="self-end">
-                  <Image src={newRings} alt="" maxW={265} />
+                  <TwImage className="max-w-[265px]" src={newRings} alt="" />
                 </div>
               </Flex>
 
@@ -394,7 +391,7 @@ const LearnPage = () => {
                 >
                   <>
                     <CardImage>
-                      <Image src={financeTransparent} alt="" {...height200} />
+                      <StandarImage src={financeTransparent} alt="" />
                     </CardImage>
                     <ButtonLink href="/defi/">
                       {t("defi-card-button")}
@@ -407,7 +404,7 @@ const LearnPage = () => {
                 >
                   <>
                     <CardImage>
-                      <Image src={stablecoins} alt="" {...height200} />
+                      <StandarImage src={stablecoins} alt="" />
                     </CardImage>
                     <ButtonLink href="/stablecoins/">
                       {t("stablecoins-card-button")}
@@ -420,11 +417,7 @@ const LearnPage = () => {
                 >
                   <>
                     <CardImage>
-                      <Image
-                        src={infrastructureTransparent}
-                        alt=""
-                        {...height200}
-                      />
+                      <StandarImage src={infrastructureTransparent} alt="" />
                     </CardImage>
                     <ButtonLink href="/nft/">{t("nft-card-button")}</ButtonLink>
                   </>
@@ -435,7 +428,7 @@ const LearnPage = () => {
                 >
                   <>
                     <CardImage>
-                      <Image src={dao} alt="" {...height200} />
+                      <StandarImage src={dao} alt="" />
                     </CardImage>
                     <ButtonLink href="/dao/">{t("dao-card-button")}</ButtonLink>
                   </>
@@ -446,7 +439,7 @@ const LearnPage = () => {
                 >
                   <>
                     <CardImage>
-                      <Image src={developersEthBlocks} alt="" {...height200} />
+                      <StandarImage src={developersEthBlocks} alt="" />
                     </CardImage>
                     <ButtonLink href="/dapps/">
                       {t("dapp-card-button")}
@@ -509,7 +502,7 @@ const LearnPage = () => {
                 >
                   <>
                     <CardImage>
-                      <Image src={rhino} alt="" {...height200} />
+                      <StandarImage src={rhino} alt="" />
                     </CardImage>
                     <ButtonLink href="/staking/">
                       {t("staking-ethereum-card-button")}
@@ -522,7 +515,7 @@ const LearnPage = () => {
                 >
                   <>
                     <CardImage>
-                      <Image src={ethereumInside} alt="" {...height200} />
+                      <StandarImage src={ethereumInside} alt="" />
                     </CardImage>
                     <ButtonLink href="/run-a-node/">
                       {t("run-a-node-card-title")}
@@ -544,7 +537,7 @@ const LearnPage = () => {
                 >
                   <>
                     <CardImage>
-                      <Image src={hackathon} alt="" {...height200} />
+                      <StandarImage src={hackathon} alt="" />
                     </CardImage>
                     <ButtonLink href="/energy-consumption/">
                       {t("energy-consumption-card-button")}
@@ -557,7 +550,7 @@ const LearnPage = () => {
                 >
                   <>
                     <CardImage>
-                      <Image src={merge} alt="" {...height200} />
+                      <StandarImage src={merge} alt="" />
                     </CardImage>
                     <ButtonLink href="/roadmap/">
                       {t("ethereum-upgrades-card-button")}
@@ -570,7 +563,7 @@ const LearnPage = () => {
                 >
                   <>
                     <CardImage>
-                      <Image src={financeTransparent} alt="" {...height200} />
+                      <StandarImage src={financeTransparent} alt="" />
                     </CardImage>
                     <ButtonLink href="/whitepaper/">
                       {t("ethereum-whitepaper-card-button")}
@@ -616,10 +609,9 @@ const LearnPage = () => {
                 >
                   <>
                     <CardImage>
-                      <Image
+                      <StandarImage
                         src={enterprise}
                         alt={t("community-hub-card-alt")}
-                        {...height200}
                       />
                     </CardImage>
                     <ButtonLink href="/community/">
@@ -633,7 +625,7 @@ const LearnPage = () => {
                 >
                   <>
                     <CardImage>
-                      <Image src={dogeComputer} alt="" {...height200} />
+                      <StandarImage src={dogeComputer} alt="" />
                     </CardImage>
                     <ButtonLink href="/community/get-involved/">
                       {t("get-involved-card-title")}
@@ -646,7 +638,7 @@ const LearnPage = () => {
                 >
                   <>
                     <CardImage>
-                      <Image src={impact} alt="" {...height200} />
+                      <StandarImage src={impact} alt="" />
                     </CardImage>
                     <ButtonLink href="/community/online/">
                       {t("online-communities-card-button")}

From 0b960b741ac579b7820927210f6d4314aa630ae7 Mon Sep 17 00:00:00 2001
From: Joe Chen <jiajuncjoe@gmail.com>
Date: Sat, 18 Jan 2025 10:22:29 +0800
Subject: [PATCH 2/2] little changes

---
 src/pages/learn.tsx | 40 ++++++++++++++++++++--------------------
 1 file changed, 20 insertions(+), 20 deletions(-)

diff --git a/src/pages/learn.tsx b/src/pages/learn.tsx
index 2e8592b343e..77f3d9e5356 100644
--- a/src/pages/learn.tsx
+++ b/src/pages/learn.tsx
@@ -121,7 +121,7 @@ const H3 = ({ children, ...props }: HTMLAttributes<HTMLHeadingElement>) => (
   </h3>
 )
 
-const StandarImage = ({ src, alt }: ImageProps) => (
+const ImageHeight200 = ({ src, alt }: ImageProps) => (
   <TwImage className="h-[200px] w-auto" src={src} alt={alt} />
 )
 
@@ -235,7 +235,7 @@ const LearnPage = () => {
                 >
                   <>
                     <CardImage>
-                      <StandarImage
+                      <ImageHeight200
                         src={whatIsEth}
                         alt={t("what-is-ethereum-card-image-alt")}
                       />
@@ -251,7 +251,7 @@ const LearnPage = () => {
                 >
                   <>
                     <CardImage>
-                      <StandarImage src={eth} alt="" />
+                      <ImageHeight200 src={eth} alt="" />
                     </CardImage>
                     <ButtonLink href="/eth/">
                       {t("what-is-eth-card-title")}
@@ -264,7 +264,7 @@ const LearnPage = () => {
                 >
                   <>
                     <CardImage>
-                      <StandarImage src={impact} alt="" />
+                      <ImageHeight200 src={impact} alt="" />
                     </CardImage>
                     <ButtonLink href="/web3/">
                       {t("what-is-web3-card-title")}
@@ -303,7 +303,7 @@ const LearnPage = () => {
                 >
                   <>
                     <CardImage>
-                      <StandarImage
+                      <ImageHeight200
                         src={wallet}
                         alt={t("what-is-a-wallet-card-alt")}
                       />
@@ -319,7 +319,7 @@ const LearnPage = () => {
                 >
                   <>
                     <CardImage>
-                      <StandarImage src={futureTransparent} alt="" />
+                      <ImageHeight200 src={futureTransparent} alt="" />
                     </CardImage>
                     <ButtonLink href="/wallets/find-wallet/">
                       {t("find-a-wallet-button")}
@@ -332,7 +332,7 @@ const LearnPage = () => {
                 >
                   <>
                     <CardImage>
-                      <StandarImage src={Layer2LearnHero} alt="" />
+                      <ImageHeight200 src={Layer2LearnHero} alt="" />
                     </CardImage>
                     <ButtonLink href="/layer-2/networks">
                       {t("ethereum-networks-card-button")}
@@ -391,7 +391,7 @@ const LearnPage = () => {
                 >
                   <>
                     <CardImage>
-                      <StandarImage src={financeTransparent} alt="" />
+                      <ImageHeight200 src={financeTransparent} alt="" />
                     </CardImage>
                     <ButtonLink href="/defi/">
                       {t("defi-card-button")}
@@ -404,7 +404,7 @@ const LearnPage = () => {
                 >
                   <>
                     <CardImage>
-                      <StandarImage src={stablecoins} alt="" />
+                      <ImageHeight200 src={stablecoins} alt="" />
                     </CardImage>
                     <ButtonLink href="/stablecoins/">
                       {t("stablecoins-card-button")}
@@ -417,7 +417,7 @@ const LearnPage = () => {
                 >
                   <>
                     <CardImage>
-                      <StandarImage src={infrastructureTransparent} alt="" />
+                      <ImageHeight200 src={infrastructureTransparent} alt="" />
                     </CardImage>
                     <ButtonLink href="/nft/">{t("nft-card-button")}</ButtonLink>
                   </>
@@ -428,7 +428,7 @@ const LearnPage = () => {
                 >
                   <>
                     <CardImage>
-                      <StandarImage src={dao} alt="" />
+                      <ImageHeight200 src={dao} alt="" />
                     </CardImage>
                     <ButtonLink href="/dao/">{t("dao-card-button")}</ButtonLink>
                   </>
@@ -439,7 +439,7 @@ const LearnPage = () => {
                 >
                   <>
                     <CardImage>
-                      <StandarImage src={developersEthBlocks} alt="" />
+                      <ImageHeight200 src={developersEthBlocks} alt="" />
                     </CardImage>
                     <ButtonLink href="/dapps/">
                       {t("dapp-card-button")}
@@ -502,7 +502,7 @@ const LearnPage = () => {
                 >
                   <>
                     <CardImage>
-                      <StandarImage src={rhino} alt="" />
+                      <ImageHeight200 src={rhino} alt="" />
                     </CardImage>
                     <ButtonLink href="/staking/">
                       {t("staking-ethereum-card-button")}
@@ -515,7 +515,7 @@ const LearnPage = () => {
                 >
                   <>
                     <CardImage>
-                      <StandarImage src={ethereumInside} alt="" />
+                      <ImageHeight200 src={ethereumInside} alt="" />
                     </CardImage>
                     <ButtonLink href="/run-a-node/">
                       {t("run-a-node-card-title")}
@@ -537,7 +537,7 @@ const LearnPage = () => {
                 >
                   <>
                     <CardImage>
-                      <StandarImage src={hackathon} alt="" />
+                      <ImageHeight200 src={hackathon} alt="" />
                     </CardImage>
                     <ButtonLink href="/energy-consumption/">
                       {t("energy-consumption-card-button")}
@@ -550,7 +550,7 @@ const LearnPage = () => {
                 >
                   <>
                     <CardImage>
-                      <StandarImage src={merge} alt="" />
+                      <ImageHeight200 src={merge} alt="" />
                     </CardImage>
                     <ButtonLink href="/roadmap/">
                       {t("ethereum-upgrades-card-button")}
@@ -563,7 +563,7 @@ const LearnPage = () => {
                 >
                   <>
                     <CardImage>
-                      <StandarImage src={financeTransparent} alt="" />
+                      <ImageHeight200 src={financeTransparent} alt="" />
                     </CardImage>
                     <ButtonLink href="/whitepaper/">
                       {t("ethereum-whitepaper-card-button")}
@@ -609,7 +609,7 @@ const LearnPage = () => {
                 >
                   <>
                     <CardImage>
-                      <StandarImage
+                      <ImageHeight200
                         src={enterprise}
                         alt={t("community-hub-card-alt")}
                       />
@@ -625,7 +625,7 @@ const LearnPage = () => {
                 >
                   <>
                     <CardImage>
-                      <StandarImage src={dogeComputer} alt="" />
+                      <ImageHeight200 src={dogeComputer} alt="" />
                     </CardImage>
                     <ButtonLink href="/community/get-involved/">
                       {t("get-involved-card-title")}
@@ -638,7 +638,7 @@ const LearnPage = () => {
                 >
                   <>
                     <CardImage>
-                      <StandarImage src={impact} alt="" />
+                      <ImageHeight200 src={impact} alt="" />
                     </CardImage>
                     <ButtonLink href="/community/online/">
                       {t("online-communities-card-button")}