From d51b16f8199fb4e30ef23574e56658068be823e0 Mon Sep 17 00:00:00 2001
From: wackerow <54227730+wackerow@users.noreply.github.com>
Date: Sat, 9 May 2026 10:11:35 +0200
Subject: [PATCH 1/2] refactor(ui): ExpandableCard defaults

- forceMount to true
- space-y-[1lh] for Content children
- refactor usage to remove redundancy
- fix(i18n): extract hard-coded title string
---
 app/[locale]/bug-bounty/page.tsx             |  18 +-
 app/[locale]/gas/_components/gas.tsx         |  10 +-
 app/[locale]/layer-2/_components/layer-2.tsx |  36 ++--
 app/[locale]/roadmap/_components/roadmap.tsx |  54 +++---
 app/[locale]/staking/_components/staking.tsx |  39 ++--
 app/[locale]/videos/[slug]/page.tsx          |   6 +-
 src/components/ExpandableCard.tsx            |   6 +-
 src/components/ListingMethodology/index.tsx  |  19 +-
 src/components/NetworkMaturity.tsx           | 185 +++++++++----------
 src/components/ui/accordion.tsx              |   3 +-
 src/intl/en/page-layer-2-networks.json       |   1 +
 11 files changed, 174 insertions(+), 203 deletions(-)

diff --git a/app/[locale]/bug-bounty/page.tsx b/app/[locale]/bug-bounty/page.tsx
index 09056a63b56..22605caed51 100644
--- a/app/[locale]/bug-bounty/page.tsx
+++ b/app/[locale]/bug-bounty/page.tsx
@@ -775,29 +775,29 @@ export default async function Page(props: { params: Promise<Params> }) {
                 title={t("bug-bounty-faq-q2-title")}
                 contentPreview={t("bug-bounty-faq-q2-contentPreview")}
               >
-                <Text>
+                <p>
                   {t.rich("bug-bounty-faq-q2-content-1", {
                     a: (chunks) => (
                       <Link href="https://blog.ethereum.org/">{chunks}</Link>
                     ),
                   })}
-                </Text>
+                </p>
               </ExpandableCard>
               <ExpandableCard
                 title={t("bug-bounty-faq-q3-title")}
                 contentPreview={t("bug-bounty-faq-q3-contentPreview")}
               >
-                <Text>
+                <p>
                   {t.rich("bug-bounty-faq-q3-content-1", {
                     strong: Strong,
                   })}
-                </Text>
+                </p>
               </ExpandableCard>
               <ExpandableCard
                 title={t("bug-bounty-faq-q4-title")}
                 contentPreview={t("bug-bounty-faq-q4-contentPreview")}
               >
-                <Text>{t("bug-bounty-faq-q4-content-1")}</Text>
+                <p>{t("bug-bounty-faq-q4-content-1")}</p>
               </ExpandableCard>
             </div>
             <Flex className="ms-0 w-full flex-col lg:ms-8">
@@ -805,20 +805,20 @@ export default async function Page(props: { params: Promise<Params> }) {
                 title={t("bug-bounty-faq-q5-title")}
                 contentPreview={t("bug-bounty-faq-q5-contentPreview")}
               >
-                <Text>{t("bug-bounty-faq-q5-content-1")}</Text>
+                <p>{t("bug-bounty-faq-q5-content-1")}</p>
               </ExpandableCard>
               <ExpandableCard
                 title={t("bug-bounty-faq-q6-title")}
                 contentPreview={t("bug-bounty-faq-q6-contentPreview")}
               >
-                <Text>{t("bug-bounty-faq-q6-content-1")}</Text>
-                <Text>{t("bug-bounty-faq-q6-content-2")}</Text>
+                <p>{t("bug-bounty-faq-q6-content-1")}</p>
+                <p>{t("bug-bounty-faq-q6-content-2")}</p>
               </ExpandableCard>
               <ExpandableCard
                 title={t("bug-bounty-faq-q7-title")}
                 contentPreview={t("bug-bounty-faq-q7-contentPreview")}
               >
-                <Text>{t("bug-bounty-faq-q7-content-1")}</Text>
+                <p>{t("bug-bounty-faq-q7-content-1")}</p>
               </ExpandableCard>
             </Flex>
           </Flex>
diff --git a/app/[locale]/gas/_components/gas.tsx b/app/[locale]/gas/_components/gas.tsx
index 7ccf8f80a93..a2de06d8fc0 100644
--- a/app/[locale]/gas/_components/gas.tsx
+++ b/app/[locale]/gas/_components/gas.tsx
@@ -338,15 +338,15 @@ const GasPage = ({
         {/* MaxWidth will be enforced by FAQ component once implemented */}
         <div className="max-w-[832px]">
           <ExpandableCard title={t("page-gas-faq-question-1-q")}>
-            <p className="mb-6">
+            <p>
               <Translation id="page-gas:page-gas-faq-question-1-a-1" />
             </p>
-            <p className="mb-6">
+            <p>
               <Translation id="page-gas:page-gas-faq-question-1-a-2" />
             </p>
           </ExpandableCard>
           <ExpandableCard title={t("page-gas-faq-question-2-q")}>
-            <p className="mb-6">
+            <p>
               <Translation id="page-gas:page-gas-faq-question-2-a-1" />
             </p>
             <BaseLink href="/eth/">
@@ -354,10 +354,10 @@ const GasPage = ({
             </BaseLink>
           </ExpandableCard>
           <ExpandableCard title={t("page-gas-faq-question-3-q")}>
-            <p className="mb-6">
+            <p>
               <Translation id="page-gas:page-gas-faq-question-3-a-1" />
             </p>
-            <p className="mb-6">{t("page-gas-faq-question-3-a-2")}</p>
+            <p>{t("page-gas-faq-question-3-a-2")}</p>
           </ExpandableCard>
         </div>
       </Content>
diff --git a/app/[locale]/layer-2/_components/layer-2.tsx b/app/[locale]/layer-2/_components/layer-2.tsx
index 68a9f50ff07..3a803cc290f 100644
--- a/app/[locale]/layer-2/_components/layer-2.tsx
+++ b/app/[locale]/layer-2/_components/layer-2.tsx
@@ -431,16 +431,14 @@ const Layer2Hub = ({
               eventAction="expand"
               eventName="how do i know if a network is part of ethereum"
             >
-              <div className="flex flex-col gap-8">
-                <p>
-                  {t("page-layer-2-faq-ExpandableCard-1-description-1")}{" "}
-                  <InlineLink href="/layer-2/networks">
-                    {t("common:nav-ethereum-networks")}
-                  </InlineLink>
-                  {t("page-layer-2-period")}
-                </p>
-                <p>{t("page-layer-2-faq-ExpandableCard-1-description-2")}</p>
-              </div>
+              <p>
+                {t("page-layer-2-faq-ExpandableCard-1-description-1")}{" "}
+                <InlineLink href="/layer-2/networks">
+                  {t("common:nav-ethereum-networks")}
+                </InlineLink>
+                {t("page-layer-2-period")}
+              </p>
+              <p>{t("page-layer-2-faq-ExpandableCard-1-description-2")}</p>
             </ExpandableCard>
             <ExpandableCard
               title={t("page-layer-2-faq-ExpandableCard-2-title")}
@@ -448,16 +446,14 @@ const Layer2Hub = ({
               eventAction="expand"
               eventName="are all these networks safe"
             >
-              <div className="flex flex-col gap-8">
-                <p>
-                  {t("page-layer-2-faq-ExpandableCard-2-description-1")}{" "}
-                  <InlineLink href="/layer-2/networks">
-                    {t("page-layer-2-faq-ExpandableCard-2-link")}
-                  </InlineLink>
-                  {t("page-layer-2-period")}
-                </p>
-                <p>{t("page-layer-2-faq-ExpandableCard-2-description-2")}</p>
-              </div>
+              <p>
+                {t("page-layer-2-faq-ExpandableCard-2-description-1")}{" "}
+                <InlineLink href="/layer-2/networks">
+                  {t("page-layer-2-faq-ExpandableCard-2-link")}
+                </InlineLink>
+                {t("page-layer-2-period")}
+              </p>
+              <p>{t("page-layer-2-faq-ExpandableCard-2-description-2")}</p>
             </ExpandableCard>
             <ExpandableCard
               title={t("page-layer-2-faq-ExpandableCard-3-title")}
diff --git a/app/[locale]/roadmap/_components/roadmap.tsx b/app/[locale]/roadmap/_components/roadmap.tsx
index e08ab3d979d..e99ff7e9fed 100644
--- a/app/[locale]/roadmap/_components/roadmap.tsx
+++ b/app/[locale]/roadmap/_components/roadmap.tsx
@@ -214,52 +214,44 @@ const RoadmapPage = () => {
                   title={t("page-roadmap-faq-1-title")}
                   className="mb-0"
                 >
-                  <div className="flex flex-col gap-4">
-                    <p>
-                      <strong>{t("page-roadmap-faq-1-p1")}</strong>{" "}
-                      {t("page-roadmap-faq-1-p1-continued")}
-                    </p>
-                    <p>{t("page-roadmap-faq-1-p2")}</p>
-                  </div>
+                  <p>
+                    <strong>{t("page-roadmap-faq-1-p1")}</strong>{" "}
+                    {t("page-roadmap-faq-1-p1-continued")}
+                  </p>
+                  <p>{t("page-roadmap-faq-1-p2")}</p>
                 </ExpandableCard>
                 <ExpandableCard
                   title={t("page-roadmap-faq-2-title")}
                   className="mb-0"
                 >
-                  <div className="flex flex-col gap-4">
-                    <p>
-                      {t("page-roadmap-faq-2-p1")}{" "}
-                      <strong>{t("page-roadmap-faq-2-p1-strong")}</strong>{" "}
-                      {t("page-roadmap-faq-2-p1-continued")}
-                    </p>
-                    <p>{t("page-roadmap-faq-2-p2")}</p>
-                  </div>
+                  <p>
+                    {t("page-roadmap-faq-2-p1")}{" "}
+                    <strong>{t("page-roadmap-faq-2-p1-strong")}</strong>{" "}
+                    {t("page-roadmap-faq-2-p1-continued")}
+                  </p>
+                  <p>{t("page-roadmap-faq-2-p2")}</p>
                 </ExpandableCard>
                 <ExpandableCard
                   title={t("page-roadmap-faq-3-title")}
                   className="mb-0"
                 >
-                  <div className="flex flex-col gap-4">
-                    <p>
-                      <Translation
-                        id="page-roadmap:page-roadmap-faq-3-p1"
-                        transform={{ a: Link }}
-                      />
-                    </p>
-                  </div>
+                  <p>
+                    <Translation
+                      id="page-roadmap:page-roadmap-faq-3-p1"
+                      transform={{ a: Link }}
+                    />
+                  </p>
                 </ExpandableCard>
                 <ExpandableCard
                   title={t("page-roadmap-faq-4-title")}
                   className="mb-0"
                 >
-                  <div className="flex flex-col gap-4">
-                    <p>
-                      <Translation
-                        id="page-roadmap:page-roadmap-faq-4-p1"
-                        transform={{ a: Link }}
-                      />
-                    </p>
-                  </div>
+                  <p>
+                    <Translation
+                      id="page-roadmap:page-roadmap-faq-4-p1"
+                      transform={{ a: Link }}
+                    />
+                  </p>
                 </ExpandableCard>
               </div>
             </div>
diff --git a/app/[locale]/staking/_components/staking.tsx b/app/[locale]/staking/_components/staking.tsx
index 6196ea39878..3dac8b0b32c 100644
--- a/app/[locale]/staking/_components/staking.tsx
+++ b/app/[locale]/staking/_components/staking.tsx
@@ -464,26 +464,19 @@ const StakingPage = async ({
             <div>
               <H2 id={tocItems.faq.id}>{tocItems.faq.title}</H2>
               <ExpandableCard title={t("page-staking-faq-4-question")}>
-                <Stack className="gap-[1.45rem]">
-                  <p>{t("page-staking-faq-4-answer-p1")}</p>
-                  <p>{t("page-staking-faq-4-answer-p2")}</p>
-                  <p>{t("page-staking-faq-4-answer-p3")}</p>
-                  <ButtonLink className="self-start" href="/roadmap/merge/">
-                    {t("page-upgrades-merge-btn")}
-                  </ButtonLink>
-                </Stack>
+                <p>{t("page-staking-faq-4-answer-p1")}</p>
+                <p>{t("page-staking-faq-4-answer-p2")}</p>
+                <p>{t("page-staking-faq-4-answer-p3")}</p>
+                <ButtonLink className="self-start" href="/roadmap/merge/">
+                  {t("page-upgrades-merge-btn")}
+                </ButtonLink>
               </ExpandableCard>
               <ExpandableCard title={t("page-staking-faq-5-question")}>
-                <Stack className="gap-[1.45rem]">
-                  <p>{t("page-staking-faq-5-answer-p1")}</p>
-                  <p>{t("page-staking-faq-5-answer-p2")}</p>
-                  <ButtonLink
-                    className="self-start"
-                    href="/staking/withdrawals/"
-                  >
-                    {t("page-staking-faq-5-answer-link")}
-                  </ButtonLink>
-                </Stack>
+                <p>{t("page-staking-faq-5-answer-p1")}</p>
+                <p>{t("page-staking-faq-5-answer-p2")}</p>
+                <ButtonLink className="self-start" href="/staking/withdrawals/">
+                  {t("page-staking-faq-5-answer-link")}
+                </ButtonLink>
               </ExpandableCard>
               <ExpandableCard title={t("page-staking-faq-1-question")}>
                 <Translation id="page-staking:page-staking-faq-1-answer" />
@@ -492,12 +485,10 @@ const StakingPage = async ({
                 {t("page-staking-faq-2-answer")}
               </ExpandableCard>
               <ExpandableCard title={t("page-staking-faq-3-question")}>
-                <Stack className="gap-[1.45rem]">
-                  <p>{t("page-staking-faq-3-answer-p1")}</p>
-                  <p>
-                    <Translation id="page-staking:page-staking-faq-3-answer-p2" />
-                  </p>
-                </Stack>
+                <p>{t("page-staking-faq-3-answer-p1")}</p>
+                <p>
+                  <Translation id="page-staking:page-staking-faq-3-answer-p2" />
+                </p>
               </ExpandableCard>
             </div>
             <div>
diff --git a/app/[locale]/videos/[slug]/page.tsx b/app/[locale]/videos/[slug]/page.tsx
index 329c32cce7b..1a0292b344b 100644
--- a/app/[locale]/videos/[slug]/page.tsx
+++ b/app/[locale]/videos/[slug]/page.tsx
@@ -94,11 +94,7 @@ const VideoLandingPage = async (props: {
               <AccordionTrigger className="py-4">
                 <h2 className="text-xl">{t("page-videos-view-transcript")}</h2>
               </AccordionTrigger>
-              {/* forceMount keeps transcript in DOM for SEO crawlers */}
-              <AccordionContent
-                className="text-base [[data-state=closed]_&]:invisible [[data-state=closed]_&]:h-0"
-                forceMount
-              >
+              <AccordionContent className="text-base [[data-state=closed]_&]:invisible [[data-state=closed]_&]:h-0">
                 {await renderSimpleMarkdown(transcriptMdx, {
                   h1: htmlElements.h2,
                 })}
diff --git a/src/components/ExpandableCard.tsx b/src/components/ExpandableCard.tsx
index 8b0c4659b38..d86d746ccfc 100644
--- a/src/components/ExpandableCard.tsx
+++ b/src/components/ExpandableCard.tsx
@@ -39,7 +39,7 @@ const ExpandableCard = ({
   eventName = "",
   visible = false,
   className,
-  forceMount,
+  forceMount = true,
 }: ExpandableCardProps) => {
   const [isVisible, setIsVisible] = useState(visible)
   const { t } = useTranslation("common")
@@ -104,7 +104,9 @@ const ExpandableCard = ({
                 "in-data-[state=closed]:hidden in-data-[state=closed]:h-0"
             )}
           >
-            <div className="border-t pt-6">{children}</div>
+            <div className="space-y-[1lh] border-t pt-6 [&>p]:first:mt-0 [&>p]:last:mb-0">
+              {children}
+            </div>
           </AccordionContent>
         </AccordionItem>
       </Accordion>
diff --git a/src/components/ListingMethodology/index.tsx b/src/components/ListingMethodology/index.tsx
index 76e9eaa4d28..5b959b5a07a 100644
--- a/src/components/ListingMethodology/index.tsx
+++ b/src/components/ListingMethodology/index.tsx
@@ -54,19 +54,16 @@ const ListingMethodology = async ({
         <ExpandableCard
           title={t("details-title")}
           contentPreview={t("details-preview")}
-          forceMount
         >
-          <div className="space-y-4">
-            {children}
+          {children}
 
-            {footers && (
-              <div className="mt-6 space-y-2 border-t border-body-light pt-6 text-sm text-body-medium">
-                {footers.map((footer) => (
-                  <p key={footer}>{footer}</p>
-                ))}
-              </div>
-            )}
-          </div>
+          {footers && (
+            <div className="mt-6 space-y-2 border-t border-body-light pt-6 text-sm text-body-medium">
+              {footers.map((footer) => (
+                <p key={footer}>{footer}</p>
+              ))}
+            </div>
+          )}
         </ExpandableCard>
       </div>
     </Section>
diff --git a/src/components/NetworkMaturity.tsx b/src/components/NetworkMaturity.tsx
index a0202cfd755..33d0467fea2 100644
--- a/src/components/NetworkMaturity.tsx
+++ b/src/components/NetworkMaturity.tsx
@@ -20,105 +20,100 @@ const NetworkMaturity = () => {
 
   return (
     <div className="mx-9 mt-10">
-      <ExpandableCard title="Network maturity explained">
-        <div>
-          <div className="space-y-4">
-            <p>
-              {t("page-layer-2-network-maturity-component-1")}{" "}
-              <InlineLink href="https://medium.com/l2beat/introducing-stages-a-framework-to-evaluate-rollups-maturity-d290bb22befe">
-                {t("page-layer-2-network-maturity-component-2")}
-              </InlineLink>{" "}
-              (<strong>{t("page-layer-2-network-maturity-component-3")}</strong>
-              ),{" "}
-              <strong>
-                {t("page-layer-2-network-maturity-component-4")}
-              </strong>,{" "}
-              <strong>{t("page-layer-2-network-maturity-component-5")}</strong>.{" "}
-              {t("page-layer-2-network-maturity-component-6")}
-            </p>
-            <p>{t("page-layer-2-network-maturity-component-7")}</p>
-          </div>
+      <ExpandableCard
+        title={t("page-layer-2-network-maturity-component-title")}
+      >
+        <p>
+          {t("page-layer-2-network-maturity-component-1")}{" "}
+          <InlineLink href="https://medium.com/l2beat/introducing-stages-a-framework-to-evaluate-rollups-maturity-d290bb22befe">
+            {t("page-layer-2-network-maturity-component-2")}
+          </InlineLink>{" "}
+          (<strong>{t("page-layer-2-network-maturity-component-3")}</strong>
+          ), <strong>
+            {t("page-layer-2-network-maturity-component-4")}
+          </strong>,{" "}
+          <strong>{t("page-layer-2-network-maturity-component-5")}</strong>.{" "}
+          {t("page-layer-2-network-maturity-component-6")}
+        </p>
+        <p>{t("page-layer-2-network-maturity-component-7")}</p>
 
-          <Table className="mt-4 w-full max-w-[760px]">
-            <TableHeader>
-              <TableRow>
-                <TableHead className="w-1/2">
-                  {t("page-layer-2-network-maturity-component-8")}
-                </TableHead>
-                <TableHead className="w-1/2">
-                  {t("page-layer-2-network-maturity-component-9")}
-                </TableHead>
-              </TableRow>
-            </TableHeader>
-            <TableBody>
-              <TableRow>
-                <TableCell className="border-none bg-[#3C4CEB] align-middle text-white">
-                  <div className="flex items-center gap-2">
-                    <RobustImage />
-                    <strong>{t("page-layer-2-networks-robust-label")}</strong>
-                  </div>
-                </TableCell>
-                <TableCell>
-                  {t("page-layer-2-network-maturity-component-10")}
-                  <br />
-                  {t("page-layer-2-network-maturity-component-11")}
-                </TableCell>
-              </TableRow>
+        <Table className="w-full max-w-[760px]">
+          <TableHeader>
+            <TableRow>
+              <TableHead className="w-1/2">
+                {t("page-layer-2-network-maturity-component-8")}
+              </TableHead>
+              <TableHead className="w-1/2">
+                {t("page-layer-2-network-maturity-component-9")}
+              </TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            <TableRow>
+              <TableCell className="border-none bg-[#3C4CEB] align-middle text-white">
+                <div className="flex items-center gap-2">
+                  <RobustImage />
+                  <strong>{t("page-layer-2-networks-robust-label")}</strong>
+                </div>
+              </TableCell>
+              <TableCell>
+                {t("page-layer-2-network-maturity-component-10")}
+                <br />
+                {t("page-layer-2-network-maturity-component-11")}
+              </TableCell>
+            </TableRow>
 
-              <TableRow>
-                <TableCell className="bg-[#6995F7] align-middle text-white">
-                  <div className="flex items-center gap-2">
-                    <MaturingImage />
-                    <strong>{t("page-layer-2-networks-maturing-label")}</strong>
-                  </div>
-                </TableCell>
-                <TableCell>
-                  {t("page-layer-2-network-maturity-component-12")}
-                  <br />
-                  {t("page-layer-2-network-maturity-component-13")}
-                  <br />
-                  {t("page-layer-2-network-maturity-component-14")}
-                </TableCell>
-              </TableRow>
+            <TableRow>
+              <TableCell className="bg-[#6995F7] align-middle text-white">
+                <div className="flex items-center gap-2">
+                  <MaturingImage />
+                  <strong>{t("page-layer-2-networks-maturing-label")}</strong>
+                </div>
+              </TableCell>
+              <TableCell>
+                {t("page-layer-2-network-maturity-component-12")}
+                <br />
+                {t("page-layer-2-network-maturity-component-13")}
+                <br />
+                {t("page-layer-2-network-maturity-component-14")}
+              </TableCell>
+            </TableRow>
 
-              <TableRow>
-                <TableCell className="bg-[#CADFFB] align-middle text-black">
-                  <div className="flex items-center gap-2">
-                    <DevelopingImage />
-                    <strong>
-                      {t("page-layer-2-networks-developing-label")}
-                    </strong>
-                  </div>
-                </TableCell>
-                <TableCell>
-                  {t("page-layer-2-network-maturity-component-15")}
-                  <br />
-                  {t("page-layer-2-network-maturity-component-16")}
-                  <br />
-                  {t("page-layer-2-network-maturity-component-13")}
-                  <br />
-                  {t("page-layer-2-network-maturity-component-14")}
-                </TableCell>
-              </TableRow>
+            <TableRow>
+              <TableCell className="bg-[#CADFFB] align-middle text-black">
+                <div className="flex items-center gap-2">
+                  <DevelopingImage />
+                  <strong>{t("page-layer-2-networks-developing-label")}</strong>
+                </div>
+              </TableCell>
+              <TableCell>
+                {t("page-layer-2-network-maturity-component-15")}
+                <br />
+                {t("page-layer-2-network-maturity-component-16")}
+                <br />
+                {t("page-layer-2-network-maturity-component-13")}
+                <br />
+                {t("page-layer-2-network-maturity-component-14")}
+              </TableCell>
+            </TableRow>
 
-              <TableRow>
-                <TableCell className="bg-[#E8F1FF] align-middle text-black">
-                  <div className="flex items-center gap-2">
-                    <EmergingImage />
-                    <strong>{t("page-layer-2-networks-emerging-label")}</strong>
-                  </div>
-                </TableCell>
-                <TableCell>
-                  {t("page-layer-2-network-maturity-component-15")}
-                  <br />
-                  {t("page-layer-2-network-maturity-component-17")}
-                  <br />
-                  {t("page-layer-2-network-maturity-component-18")}
-                </TableCell>
-              </TableRow>
-            </TableBody>
-          </Table>
-        </div>
+            <TableRow>
+              <TableCell className="bg-[#E8F1FF] align-middle text-black">
+                <div className="flex items-center gap-2">
+                  <EmergingImage />
+                  <strong>{t("page-layer-2-networks-emerging-label")}</strong>
+                </div>
+              </TableCell>
+              <TableCell>
+                {t("page-layer-2-network-maturity-component-15")}
+                <br />
+                {t("page-layer-2-network-maturity-component-17")}
+                <br />
+                {t("page-layer-2-network-maturity-component-18")}
+              </TableCell>
+            </TableRow>
+          </TableBody>
+        </Table>
       </ExpandableCard>
     </div>
   )
diff --git a/src/components/ui/accordion.tsx b/src/components/ui/accordion.tsx
index 46c4fd8e557..a42e99d2693 100644
--- a/src/components/ui/accordion.tsx
+++ b/src/components/ui/accordion.tsx
@@ -46,9 +46,10 @@ AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName
 const AccordionContent = React.forwardRef<
   React.ComponentRef<typeof AccordionPrimitive.Content>,
   React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
->(({ className, children, ...props }, ref) => (
+>(({ className, forceMount = true, children, ...props }, ref) => (
   <AccordionPrimitive.Content
     ref={ref}
+    forceMount={forceMount} // forceMount keeps content in DOM for SEO crawlers
     className="overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
     {...props}
   >
diff --git a/src/intl/en/page-layer-2-networks.json b/src/intl/en/page-layer-2-networks.json
index 06c73943b9f..33df9fccaf6 100644
--- a/src/intl/en/page-layer-2-networks.json
+++ b/src/intl/en/page-layer-2-networks.json
@@ -64,6 +64,7 @@
   "page-layer-2-networks-transaction-fee": "Transaction fee",
   "page-layer-2-networks-transaction-fee-description": "The average cost of transaction for transfers, swaps, minting and other activities.",
   "page-layer-2-networks-transaction-see-networks": "See networks",
+  "page-layer-2-network-maturity-component-title": "Network maturity explained",
   "page-layer-2-network-maturity-component-1": "We review the network’s progress towards",
   "page-layer-2-network-maturity-component-2": "Ethereum alignment",
   "page-layer-2-network-maturity-component-3": "total value locked (TVL)",

From ea8bec55a25b3090e7d2ced0ec6a071a6ab96240 Mon Sep 17 00:00:00 2001
From: wackerow <54227730+wackerow@users.noreply.github.com>
Date: Tue, 12 May 2026 15:38:41 +0200
Subject: [PATCH 2/2] feat(ui): update border-radius to `2xl` token

Co-Authored-By: Jakub <100724231+konopkja@users.noreply.github.com>
---
 src/components/ExpandableCard.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/ExpandableCard.tsx b/src/components/ExpandableCard.tsx
index d86d746ccfc..df71f805544 100644
--- a/src/components/ExpandableCard.tsx
+++ b/src/components/ExpandableCard.tsx
@@ -71,7 +71,7 @@ const ExpandableCard = ({
       >
         <AccordionItem
           value="item-1"
-          className="rounded-xs border hover:bg-background-highlight"
+          className="rounded-2xl border hover:bg-background-highlight"
         >
           <AccordionTrigger
             hideIcon