add CTA that links to Ethereum Ecosystem [Fixes #12372]

src/intl/en/page-dapps.json

@@ -286,5 +286,9 @@
   "page-dapps-dapp-description-dodo": "DODO is a on-chain liquidity provider, which leverages the Proactive Market Maker algorithm (PMM)",
   "page-dapps-dodo-image-alt": "DODO logo",
   "page-dapps-dapp-description-artblocks": "Art Blocks is dedicated to bringing compelling works of contemporary generative art to life",
-  "page-dapps-artblocks-image-alt": "Art Blocks logo"
+  "page-dapps-artblocks-image-alt": "Art Blocks logo",
+  "page-dapps-explore-title": "Looking for more Ethereum dapps?",
+  "page-dapps-explore-1": "Explore over 1000 dapps on Ethereum and its Layer 2s like Base, Optimism and Starknet easily – start your journey through the Ethereum ecosystem now.",
+  "page-dapps-explore-2": "Go to Ethereum Ecosystem",
+  "page-dapps-explore-callout-image-alt": "Illustration of a man tinkering with a computer."
 }

src/pages/dapps.tsx

@@ -1,11 +1,13 @@
 import { type ComponentPropsWithRef, useEffect, useRef, useState } from "react"
+import { merge } from "lodash"
 import { type GetStaticProps } from "next"
 import { useRouter } from "next/router"
 import { useTranslation } from "next-i18next"
 import { serverSideTranslations } from "next-i18next/serverSideTranslations"
 import {
   Badge,
   Box,
+  BoxProps,
   Button,
   type ButtonProps,
   Divider as ChakraDivider,
@@ -116,6 +118,7 @@ import zerion from "@/public/dapps/zerion.png"
 import developers from "@/public/developers-eth-blocks.png" // Handled inside Callout => height=200
 import doge from "@/public/doge-computer.png" // HERO, full? 624px
 import oneinch from "@/public/exchanges/1inch.png"
+import exploring from "@/public/hackathon_transparent.png"
 import magicians from "@/public/magicians.png"
 import wallet from "@/public/wallet.png" // width=300
 
@@ -1419,6 +1422,25 @@ const DappsPage = () => {
           ))}
         </StyledCardGrid>
       </Content>
+      {/* Explore Ecosystem Section */}
+      <Content>
+        <CalloutBanner
+          mt={0}
+          mx={0}
+          mb={{ base: 0, lg: 16 }}
+          titleKey={"page-dapps:page-dapps-explore-title"}
+          descriptionKey={"page-dapps:page-dapps-explore-1"}
+          image={exploring}
+          imageWidth={300}
+          alt={t("page-dapps-explore-callout-image-alt")}
+        >
+          <Box>
+            <ButtonLink to="https://www.ethereum-ecosystem.com/apps">
+              {t("page-dapps:page-dapps-explore-2")}
+            </ButtonLink>
+          </Box>
+        </CalloutBanner>
+      </Content>
       <FullWidthContainer ref={explore}>
         <H2 id="explore">{t("page-dapps-explore-dapps-title")}</H2>
         <CenterText>{t("page-dapps-explore-dapps-description")}</CenterText>