chore: fix docs page after migration

content/docs.page.tsx

@@ -3,89 +3,227 @@ import { useTranslate } from '@portal/hooks';
 
 const recommendedPages = [
   {
-        "description": "rippled API Reference",
-        "link": "./manage-the-rippled-server.html",
+    description: 'rippled API Reference',
+    link: './manage-the-rippled-server.html',
   },
   {
-        "description": "XRP Faucet",
-        "link": "./xrp-testnet-faucet.html",
+    description: 'XRP Faucet',
+    link: './xrp-testnet-faucet.html',
   },
   {
-        "description": "Getting Started with Python",
-        "link": "./get-started-using-python.html#get-started-using-python",
+    description: 'Getting Started with Python',
+    link: './get-started-using-python.html#get-started-using-python',
   },
   {
-        "description": "Websocket API Tool",
-        "link": "./websocket-api-tool.html",
+    description: 'Websocket API Tool',
+    link: './websocket-api-tool.html',
   },
-      { "description": "XRP Ledger Explorer", "link": "https://livenet.xrpl.org" },
+  { description: 'XRP Ledger Explorer', link: 'https://livenet.xrpl.org' },
 ];
 
 const useCases = [
   {
-      "title": "On-Chain Finance",
-      "id": "on-chain-finance-use-cases",
-      "imgClass": "wallet-illustration",
-      "subItems": [
+    title: 'On-Chain Finance',
+    id: 'on-chain-finance-use-cases',
+    imgClass: 'wallet-illustration',
+    subItems: [
       {
-          "description": "Trade on the decentralized exchange",
-          "link": "./trade-in-the-decentralized-exchange.html",
+        description: 'Trade on the decentralized exchange',
+        link: './trade-in-the-decentralized-exchange.html',
       },
       {
-          "description": "Make payments",
-          "link": "./send-xrp.html",
+        description: 'Make payments',
+        link: './send-xrp.html',
       },
       {
-          "description": "Use specialized payment types",
-          "link": "./use-specialized-payment-types.html"
-        }
-      ],
-    },
-    {
-      "title": "Tokens",
-      "id": "token-use-cases",
-      "imgClass": "token-illustration",
-      "subItems": [
-        {
-          "description": "Non-fungible Tokens",
-          "link": "./non-fungible-tokens.html",
-        },
-        {
-          "description": "Issue a stablecoin",
-          "link": "./issue-a-fungible-token.html",
-        },
-        {
-          "description": "Assign an authorized minter",
-          "link": "./assign-an-authorized-minter-using-javascript.html",
+        description: 'Use specialized payment types',
+        link: './use-specialized-payment-types.html',
       },
     ],
   },
   {
-      "title": "Payments",
-      "id": "payments-use-cases",
-      "imgClass": "connections-illustration",
-      "subItems": [
+    title: 'Tokens',
+    id: 'token-use-cases',
+    imgClass: 'token-illustration',
+    subItems: [
       {
-          "description": "Peer to peer payments",
-          "link": "./direct-xrp-payments.html",
+        description: 'Non-fungible Tokens',
+        link: './non-fungible-tokens.html',
       },
       {
-          "description": "Cross-currency payments",
-          "link": "./cross-currency-payments.html",
+        description: 'Issue a stablecoin',
+        link: './issue-a-fungible-token.html',
       },
       {
-          "description": "Escrows",
-          "link": "./escrow.html",
+        description: 'Assign an authorized minter',
+        link: './assign-an-authorized-minter-using-javascript.html',
       },
     ],
   },
-  ]
-  ;
+  {
+    title: 'Payments',
+    id: 'payments-use-cases',
+    imgClass: 'connections-illustration',
+    subItems: [
+      {
+        description: 'Peer to peer payments',
+        link: './direct-xrp-payments.html',
+      },
+      {
+        description: 'Cross-currency payments',
+        link: './cross-currency-payments.html',
+      },
+      {
+        description: 'Escrows',
+        link: './escrow.html',
+      },
+    ],
+  },
+];
+const intermediateVideos = [
+  {
+    src: require('./static/img/backgrounds/docs-advanced-payment-features@2x.png'),
+    title: 'Advanced Payment Features',
+    url: 'https://www.youtube.com/embed/e2Iwsk37LMk?rel=0&showinfo=0&autoplay=1',
+  },
+  {
+    src: require('./static/img/backgrounds/docs-governance@2x.png'),
+    title: 'Governance and the Amendment Process',
+    url: 'https://www.youtube.com/embed/4GbRdanHoR4?rel=0&showinfo=0&autoplay=1',
+  },
+  {
+    src: require('./static/img/backgrounds/docs-sidechains@2x.png'),
+    title: 'Federated Sidechains',
+    url: 'https://www.youtube.com/embed/NhH4LM8NxgY?rel=0&showinfo=0&autoplay=1',
+  },
+];
+const getStartedVideos = [
+  {
+    src: require('./static/img/backgrounds/docs-intro-to-XRP-ledger@2x.png'),
+    title: 'Intro to XRP Ledger',
+    url: 'https://www.youtube.com/embed/sVTybJ3cNyo?rel=0&showinfo=0&autoplay=1',
+  },
+  {
+    src: require('./static/img/backgrounds/docs-accounts@2x.png'),
+    title: 'Accounts',
+    url: 'https://www.youtube.com/embed/eO8jE6PftX8?rel=0&showinfo=0&autoplay=1',
+  },
+  {
+    src: require('./static/img/backgrounds/docs-decentralized-exchange@2x.png'),
+    title: 'Decentralized Exchange',
+    url: 'https://www.youtube.com/embed/VWNrHBDfXvA?rel=0&showinfo=0&autoplay=1',
+  },
+  {
+    src: require('./static/img/backgrounds/docs-tokenization@2x.png'),
+    title: 'Tokenization',
+    url: 'https://www.youtube.com/embed/Oj4cWOiWf4A?rel=0&showinfo=0&autoplay=1',
+  },
+];
 
-const test = "./assets/img/backgrounds/docs-intro-to-XRP-ledger@2x.png";
+const devTools = [
+  {
+    title: 'Faucets',
+    link: './xrp-testnet-faucet.html',
+    description: 'Get credentials and test-XRP for XRP Ledger Testnet or Devnet.',
+  },
+  {
+    title: 'WebSocket Tool',
+    link: './websocket-api-tool.html',
+    description: 'Send sample requests and get responses from the rippled API.',
+  },
+  {
+    title: 'XRP Ledger Explorer',
+    link: 'https://livenet.xrpl.org',
+    description:
+      'View validations of new ledger versions in real-time, chart the location of servers in the XRP Ledger.',
+  },
+  {
+    title: 'Transaction Sender',
+    link: './tx-sender.html',
+    description:
+      'Test how your code handles various XRP Ledger transactions by sending them over the Testnet to the address.',
+  },
+];
+const test = './assets/img/backgrounds/docs-intro-to-XRP-ledger@2x.png';
 
 const target = { prefix: '' }; // TODO: fixme
 
+function UseCasesCard(props: {
+  useCase: {
+    id: string;
+    title: string;
+    imgClass: string;
+    subItems: { description: string; link: string }[];
+  };
+}) {
+  const { useCase } = props;
+  return (
+    <div className="col">
+      <img className={'use-cases-img img-fluid mb-2 shadow ' + useCase.imgClass} alt={useCase.title} id={useCase.id} />
+      <h5 className="mt-4">{useCase.title}</h5>
+      <ul className="nav flex-column">
+        {useCase.subItems.map(item => (
+          <li key={item.link} className="nav-item">
+            <a href={item.link} className="nav-link">
+              {item.description}
+            </a>
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+}
+
+function FlatCard(props: { href: string; title: string; description: string; linkText: string; imgClass }) {
+  const { title, description, linkText, href, imgClass } = props;
+  return (
+    <a href={href} className="card flat-card float-up-on-hover">
+      <img className={'mb-2 ' + imgClass} alt={title} />
+      <h5 className="row">
+        <div className="nav-link">{title}</div>
+      </h5>
+      <p className="row faded-text flat-card-padding">{description}</p>
+      <div className="col align-button-on-bottom">
+        <div className="btn btn-primary btn-arrow" id={href + '-button'}>
+          {linkText}
+        </div>
+      </div>
+    </a>
+  );
+}
+
+function VideoCard(props: { url: string; title: string; src: string }) {
+  const { url, title, src } = props;
+  return (
+    <div className="col float-up-on-hover">
+      <a href={url} id="playvideo" className="btn1" data-url={url}>
+        <img alt={title} className="get-started-img video-image" id={title} src={src} />
+        <h6 className="pt-3">{title}</h6>
+      </a>
+    </div>
+  );
+}
+
+function DevToolCard(props: { link: string; title: string; description: string }) {
+  const { translate } = useTranslate();
+  const { link, title, description } = props;
+  return (
+    <a href={link} className="col dev-tools-link">
+      <h6 className="btn-arrow">{translate(title)}</h6>
+      <p> {translate(description)}</p>
+    </a>
+  );
+}
+
+function PrimaryButton(props: { href: string; text: string; isArrowUp: boolean }) {
+  const { href, text, isArrowUp } = props;
+  return (
+    <a className={`btn btn-primary ${isArrowUp ? 'btn-arrow-out' : 'btn-arrow'}`} id={href + '-button'} href="{href}">
+      {text}
+    </a>
+  );
+}
+
 export default function Docs() {
   const { translate } = useTranslate();
 
@@ -95,175 +233,62 @@ export default function Docs() {
         <section className="text-center title-space">
           <div className="col-lg-9 mx-auto text-center">
             <div className="d-flex flex-column-reverse">
-                <h1 className>{translate("XRP Ledger Developer Resources")}</h1>
-                <h6 className="eyebrow mb-3">{translate("Documentation")}</h6>
+              <h1>{translate('XRP Ledger Developer Resources')}</h1>
+              <h6 className="eyebrow mb-3">{translate('Documentation')}</h6>
             </div>
           </div>
         </section>
-    {'{'}# Macros #{'}'}
-    $$ macro primaryButton(href, text, isArrowUp) $$
-    $$ if isArrowUp $$
-    <a className="btn btn-primary btn-arrow-out" id="$$href$$-button" href="$$href$$">$$ text $$</a>
-    $$ else $$
-    <a className="btn btn-primary btn-arrow" id="$$href$$-button" href="$$href$$">$$ text $$</a>
-    $$ endif $$
-    $$ endmacro $$
-    $$ macro flatCard(href, title, description, linkText, imgClass) $$
-    <a href="$$href$$" className="card flat-card float-up-on-hover">
-        <img className="mb-2 $$imgClass$$" alt="$$title$$" />
-        <h5 className="row">
-            <div className="nav-link">$$ title $$</div>
-        </h5>
-        <p className="row faded-text flat-card-padding">
-            $$ description $$
-        </p>
-        <div className="col align-button-on-bottom">
-            <div className="btn btn-primary btn-arrow" id="$$href$$-button">$$ linkText $$</div>
-        </div>
-    </a>
-    $$ endmacro $$
-    $$ macro videoCard(url, title, src)$$
-    <div className="col float-up-on-hover">
-        <a href="$$url$$" id="playvideo" className="btn1" data-url="$$url$$">
-            <img alt="$$title$$" className="get-started-img video-image" id="$$title$$" src={require("$$src$$")} />
-            <h6 className="pt-3">$$ title $$</h6>
-        </a>
-    </div>
-    $$ endmacro $$
-    $$ macro useCasesCard(subItems, title, imgClass, id) $$
-    <div className="col">
-        <img className="use-cases-img img-fluid mb-2 shadow $$imgClass$$" alt="$$title$$" id="$$id$$" />
-        <h5 className="mt-4">$$title$$ </h5>
-        <ul className="nav flex-column">
-             { subItems.map(item => (
-            <li className="nav-item"><a href={item.link} className="nav-link">{item.description}</a>
-                )) }
-            </li></ul>
-    </div>
-    $$ endmacro $$
-    $$ macro devToolsCard(link, title, description) $$
-    <a href="$$ link $$" className="col dev-tools-link">
-        <h6 className="btn-arrow">$$ title $$</h6>
-        <p> $$ description $$</p>
-    </a>
-    $$ endmacro $$
-    $$
-    set intermediateVideos = [
-    {'{'}
-    "src": "./assets/img/backgrounds/docs-advanced-payment-features@2x.png",
-    "title": _("Advanced Payment Features"),
-    "url": "https://www.youtube.com/embed/e2Iwsk37LMk?rel=0&amp;showinfo=0&amp;autoplay=1",
-    {'}'},
-    {'{'}
-    "src": "./assets/img/backgrounds/docs-governance@2x.png",
-    "title": _("Governance and the Amendment Process"),
-    "url": "https://www.youtube.com/embed/4GbRdanHoR4?rel=0&amp;showinfo=0&amp;autoplay=1",
-    {'}'},
-    {'{'}
-    "src": "./assets/img/backgrounds/docs-sidechains@2x.png",
-    "title": _("Federated Sidechains"),
-    "url": "https://www.youtube.com/embed/NhH4LM8NxgY?rel=0&amp;showinfo=0&amp;autoplay=1",
-    {'}'},
-    ]
-    $$
-    $$
-    set getStartedVideos = [
-    {'{'}
-    "src": "./assets/img/backgrounds/docs-intro-to-XRP-ledger@2x.png",
-    "title": _("Intro to XRP Ledger"),
-    "url": "https://www.youtube.com/embed/sVTybJ3cNyo?rel=0&amp;showinfo=0&amp;autoplay=1",
-    {'}'},
-    {'{'}
-    "src": "./assets/img/backgrounds/docs-accounts@2x.png",
-    "title": _("Accounts"),
-    "url": "https://www.youtube.com/embed/eO8jE6PftX8?rel=0&amp;showinfo=0&amp;autoplay=1",
-    {'}'},
-    {'{'}
-    "src": "./assets/img/backgrounds/docs-decentralized-exchange@2x.png",
-    "title": _("Decentralized Exchange"),
-    "url": "https://www.youtube.com/embed/VWNrHBDfXvA?rel=0&amp;showinfo=0&amp;autoplay=1",
-    {'}'},
-    {'{'}
-    "src": "./assets/img/backgrounds/docs-tokenization@2x.png",
-    "title": _("Tokenization"),
-    "url": "https://www.youtube.com/embed/Oj4cWOiWf4A?rel=0&amp;showinfo=0&amp;autoplay=1",
-    {'}'},
-    ]
-    $$
-    $$
-    set devTools = [
-    {'{'}
-    "title": _("Faucets"),
-    "link": "./xrp-testnet-faucet.html",
-    "description":
-    _("Get credentials and test-XRP for XRP Ledger Testnet or Devnet."),
-    {'}'},
-    {'{'}
-    "title": _("WebSocket Tool"),
-    "link": "./websocket-api-tool.html",
-    "description":
-    _("Send sample requests and get responses from the rippled API."),
-    {'}'},
-    {'{'}
-    "title": _("XRP Ledger Explorer"),
-    "link": "https://livenet.xrpl.org",
-    "description":
-    _("View validations of new ledger versions in real-time, chart the location of servers in the XRP Ledger."),
-    {'}'},
-    {'{'}
-    "title": _("Transaction Sender"),
-    "link": "./tx-sender.html",
-    "description":
-    _("Test how your code handles various XRP Ledger transactions by sending them over the Testnet to the address."),
-    {'}'},
-    ]
-    $$
+
         <section className="container-new ">
           <div className="nav card-grid flat-card-grid card-grid-3xN">
             <div className="col">
-                $$ flatCard("./concepts.html", 
-                _("Concepts"), 
-                _("Learn the \"what\" and the \"why\" behind fundamental aspects of the XRP Ledger."), 
-                _("Read the Docs"),
-                "concepts-doc-illustration") $$
+              <FlatCard
+                href="./concepts.html"
+                title={translate('Concepts')}
+                description={translate('Learn the "what" and the "why" behind fundamental aspects of the XRP Ledger.')}
+                linkText={translate('Read the Docs')}
+                imgClass="concepts-doc-illustration"
+              />
             </div>
             <div className="col">
-                $$ flatCard("./tutorials.html", 
-                _("Tutorials"), 
-                _("Get step-by-step guidance to perform common tasks with the XRP Ledger."), 
-                _("View Tutorials"),
-                "tutorial-illustration") $$
+              <FlatCard
+                href="./tutorials.html"
+                title={translate('Tutorials')}
+                description={translate('Get step-by-step guidance to perform common tasks with the XRP Ledger.')}
+                linkText={translate('View Tutorials')}
+                imgClass="tutorial-illustration"
+              />
             </div>
             <div className="col">
-                $$ flatCard("./references.html", 
-                _("References"), 
-                _("Look up reference documentation for the XRP Ledger protocol, API methods, and more."), 
-                _("View References"),
-                "ref-book-illustration") $$
+              <FlatCard
+                href="./references.html"
+                title={translate('References')}
+                description={translate(
+                  'Look up reference documentation for the XRP Ledger protocol, API methods, and more.'
+                )}
+                linkText={translate('View References')}
+                imgClass="ref-book-illustration"
+              />
             </div>
           </div>
         </section>
         <section className="container-new">
-        <h4 className="pb-4">{translate("Use Cases")}</h4>
+          <h4 className="pb-4">{translate('Use Cases')}</h4>
           <div className="card-grid card-grid-3xN use-cases">
             {useCases.map(useCase => (
-            $$ useCasesCard(useCase.subItems, useCase.title, useCase.imgClass, useCase.id)$$
+              <UseCasesCard useCase={useCase} />
             ))}
           </div>
         </section>
         <section className="container-new ">
-        <h4 className="pb-4">{translate("Getting Started")}</h4>
+          <h4 className="pb-4">{translate('Getting Started')}</h4>
           <div className="card-grid card-grid-2xN quickstart-card">
             <div className="col">
               <a href="./send-payments-using-javascript.html" className="card float-up-on-hover">
-                    <h5 className="mt-7">{translate("Quickstart to XRP Ledger")}</h5>
-                    <p className="mb-8 mt-4">
-                        {translate("An introduction to fundamental aspects of the XRP Ledger.")}
-                    </p>
+                <h5 className="mt-7">{translate('Quickstart to XRP Ledger')}</h5>
+                <p className="mb-8 mt-4">{translate('An introduction to fundamental aspects of the XRP Ledger.')}</p>
                 <div className="dg-lg-block mb-3">
-                        <div className="btn btn-primary btn-arrow get-started-button">
-                            {translate("Get Started")}
-                        </div>
+                  <div className="btn btn-primary btn-arrow get-started-button">{translate('Get Started')}</div>
                 </div>
                 <img alt="quick-start" id="quick-start-img" className="quickstart-image" />
               </a>
@@ -271,39 +296,47 @@ export default function Docs() {
             <div className="col">
               <div className="card-grid card-grid-2xN video-grid">
                 {getStartedVideos.map(video => (
-                    $$ videoCard(video.url, video.title, video.src) $$
+                  <VideoCard url={video.url} title={translate(video.title)} src={video.src} />
                 ))}
               </div>
               <div className="align-button-on-bottom">
-                    $$ primaryButton("https://www.youtube.com/playlist?list=PLJQ55Tj1hIVZtJ_JdTvSum2qMTsedWkNi", _("Watch Full Series"), true) $$
+                <PrimaryButton
+                  href="https://www.youtube.com/playlist?list=PLJQ55Tj1hIVZtJ_JdTvSum2qMTsedWkNi"
+                  text={translate('Watch Full Series')}
+                  isArrowUp={true}
+                />
               </div>
             </div>
           </div>
         </section>
         <section className="container-new ">
           <div className="d-flex flex-column-reverse col-sm-8 p-0">
-            <h3 className="h4 h2-sm">{translate("Interact with the XRP Ledger in a language of your choice")}</h3>
-            <h6 className="eyebrow mb-3">{translate("Explore SDKs")}</h6>
+            <h3 className="h4 h2-sm">{translate('Interact with the XRP Ledger in a language of your choice')}</h3>
+            <h6 className="eyebrow mb-3">{translate('Explore SDKs')}</h6>
           </div>
           <div className="card-grid card-grid-2xN">
             <div className="col">
               <div className="card-grid langs-cards card-grid-2xN mt-10" id="langs-cards">
                 <div className="col langs">
                   <a href="./get-started-using-javascript.html">
-                            <img alt="Javascript Logo" src={require("./assets/img/logos/javascript.svg")} className="circled-logo" />
-                            <h5 className="btn-arrow">{translate("Javascript")}</h5>
+                    <img
+                      alt="Javascript Logo"
+                      src={require('./static/img/logos/javascript.svg')}
+                      className="circled-logo"
+                    />
+                    <h5 className="btn-arrow">{translate('Javascript')}</h5>
                   </a>
                 </div>
                 <div className="col langs">
                   <a href="./get-started-using-python.html">
-                            <img alt="Python Logo" src={require("./assets/img/logos/python.svg")} className="circled-logo" />
-                            <h5 className="btn-arrow">{translate("Python")}</h5>
+                    <img alt="Python Logo" src={require('./static/img/logos/python.svg')} className="circled-logo" />
+                    <h5 className="btn-arrow">{translate('Python')}</h5>
                   </a>
                 </div>
                 <div className="col langs">
                   <a href="./get-started-using-java.html">
-                            <img alt="Java Logo" src={require("./assets/img/logos/java.svg")} className="circled-logo" />
-                            <h5 className="btn-arrow">{translate("Java")}</h5>
+                    <img alt="Java Logo" src={require('./static/img/logos/java.svg')} className="circled-logo" />
+                    <h5 className="btn-arrow">{translate('Java')}</h5>
                   </a>
                 </div>
               </div>
@@ -314,10 +347,10 @@ export default function Docs() {
           </div>
         </section>
         <section className="container-new ">
-        <h4 className="pb-4">{translate("Intermediate Learning Sources")}</h4>
+          <h4 className="pb-4">{translate('Intermediate Learning Sources')}</h4>
           <div className="card-grid card-grid-3xN">
             {intermediateVideos.map(video => (
-            $$ videoCard(video.url, video.title, video.src) $$
+              <VideoCard url={video.url} title={translate(video.title)} src={video.src} />
             ))}
           </div>
         </section>
@@ -328,49 +361,66 @@ export default function Docs() {
             </div>
             <div className="col explore-links">
               <div className="d-flex flex-column-reverse w-100">
-                    <h4 className="mb-10">{translate("Explore, Test, Verify")}</h4>
-                    <h6 className="mb-3">{translate("Explore Dev Tools")}</h6>
+                <h4 className="mb-10">{translate('Explore, Test, Verify')}</h4>
+                <h6 className="mb-3">{translate('Explore Dev Tools')}</h6>
               </div>
               <p className="mb-20">
-                    {translate("Use these web-based tools to assist during all stages of development, from getting your first payment to testing your implementation for best practices.")}
+                {translate(
+                  'Use these web-based tools to assist during all stages of development, from getting your first payment to testing your implementation for best practices.'
+                )}
               </p>
               <div className="card-grid card-grid-2xN">
                 {devTools.map(card => (
-                    $$ devToolsCard(card.link, card.title, card.description) $$
+                  <DevToolCard
+                    link={card.link}
+                    title={translate(card.title)}
+                    description={translate(card.description)}
+                  />
                 ))}
               </div>
-                $$ primaryButton("./dev-tools.html", "View All tools", false) $$
+              <PrimaryButton href="./dev-tools.html" text={translate('View All tools')} isArrowUp={false} />
             </div>
           </div>
         </section>
         <section className="container-new " id="docs-browse-by">
           <div className="row card-grid card-grid-2xN">
             <div className="col" id="popular-topics">
-                <h2 className="h4">{translate("Browse By Recommended Pages")}</h2>
+              <h2 className="h4">{translate('Browse By Recommended Pages')}</h2>
               <ul className="nav flex-column">
                 {recommendedPages.map(page => (
-                    <li className="nav-item"><a href={page.link} className="nav-link">{page.description}</a>
+                  <li className="nav-item">
+                    <a href={page.link} className="nav-link">
+                      {translate(page.description)}
+                    </a>
+                  </li>
                 ))}
-                    </li></ul>
-            </div>{/*/#popular-topics*/}
+              </ul>
+            </div>
             <div className="col">
               <div className="card cta-card p-8-sm p-10-until-sm br-8">
-                    <img src={require("./img/backgrounds/cta-home-purple.svg")} className="d-none-sm cta cta-top-left" />
-                    <img src={require("./img/backgrounds/cta-home-green.svg")} className="cta cta-bottom-right" />
+                <img src={require('./img/backgrounds/cta-home-purple.svg')} className="d-none-sm cta cta-top-left" />
+                <img src={require('./img/backgrounds/cta-home-green.svg')} className="cta cta-bottom-right" />
                 <div className="z-index-1 position-relative">
-                        <h2 className="h4 mb-8-sm mb-10-until-sm">{translate("Get Free Test XRP")}</h2>
-                        <p className="mb-10">{translate("Connect to the XRP Ledger Testnet network to develop and test your apps built on the XRP Ledger, without risking real money or impacting production XRP Ledger users.")}</p>
-                        <a className="btn btn-primary btn-arrow" href="xrp-testnet-faucet.html">{translate("Generate Testnet Credentials")}</a>
+                  <h2 className="h4 mb-8-sm mb-10-until-sm">{translate('Get Free Test XRP')}</h2>
+                  <p className="mb-10">
+                    {translate(
+                      'Connect to the XRP Ledger Testnet network to develop and test your apps built on the XRP Ledger, without risking real money or impacting production XRP Ledger users.'
+                    )}
+                  </p>
+                  <a className="btn btn-primary btn-arrow" href="xrp-testnet-faucet.html">
+                    {translate('Generate Testnet Credentials')}
+                  </a>
                 </div>
               </div>
             </div>
           </div>
-    </section>{/* Browse by recommended and Generate Testnet Credentials */}
+        </section>
         <section className="container-new">
-        <a href="./docs-index.html" className="btn-arrow arrow-purple documentation-index mr-auto">{translate("See full documentation index")}</a>
+          <a href="./docs-index.html" className="btn-arrow arrow-purple documentation-index mr-auto">
+            {translate('See full documentation index')}
+          </a>
         </section>
       </div>
-
     </div>
-  )
+  );
 }

content/top-nav.yaml

@@ -10,58 +10,58 @@
     - group: XRP Ledger Overview
       items:
         - label: XRPL Overview
-          link: /about/xrp-ledger-overview/
+          href: /about/xrp-ledger-overview/
         - label: Use Cases
-          link: /about/use-cases/
+          href: /about/use-cases/
         - label: History
-          link: /about/history/
+          href: /about/history/
         - label: Ledger Explorer
-          link: https://livenet.xrpl.org
+          href: https://livenet.xrpl.org
           external: true
     - group: XRP
       items:
         - label: XRP Overview
-          link: /about/xrp-overview
+          href: /about/xrp-overview
     - group: Sustainability
       items:
         - label: Impact
-          link: /about/impact/
+          href: /about/impact/
     - group: About
       items:
         - label: XRPL Foundation
-          link: https://foundation.xrpl.org/
+          href: https://foundation.xrpl.org/
           external: true
         - label: FAQ
-          link: /about/faq/
+          href: /about/faq/
 
 - group: Docs
   items:
     - hero: top-nav-hero-docs
       label: Documentation
       description: Dive into XRP Ledger technology and start integrating.
-      link: /docs/
+      page: ./docs.page.tsx
     - group: Introduction to the XRP Ledger
       items:
         - label: What is XRP?
-          link: /docs/concepts/introduction/what-is-xrp
+          href: /docs/concepts/introduction/what-is-xrp
         - label: What is the XRP Ledger?
-          link: /docs/concepts/introduction/what-is-xrpl
+          href: /docs/concepts/introduction/what-is-xrpl
         - label: Transactions and Requests
-          link: /docs/concepts/introduction/txn-and-requests
+          href: /docs/concepts/introduction/txn-and-requests
     - group: Tutorials
       items:
         - label: Quickstart
-          link: /docs/tutorials/quickstart
+          href: /docs/tutorials/quickstart
         - label: Code Samples
-          link: /docs/code-samples
+          href: /docs/code-samples
     - group: API Reference
       items:
         - label: Client Libraries
-          link: /docs/references/client-libraries/
+          href: /docs/references/client-libraries/
         - label: Public API Methods
-          link: /docs/references/http-websocket-apis/public-api-methods/
+          href: /docs/references/http-websocket-apis/public-api-methods/
         - label: Admin API Methods
-          link: /docs/references/http-websocket-apis/admin-api-methods/
+          href: /docs/references/http-websocket-apis/admin-api-methods/
     - group: Popular Pages
       items:
         - label: Send XRP
@@ -71,7 +71,7 @@
         - label: XRPL Servers
           href: /infrastructure/xrpl-servers/
     - label: Dev Tools
-      link: /docs/dev-tools/
+      href: /docs/dev-tools/
 
 
 - group: Community
@@ -79,18 +79,18 @@
     - hero: top-nav-hero-contribute
       label: Contribute to the XRPL Community
       description: Join the conversation
-      link: /community/
+      href: /community/
     - label: Events
-      link: /community/events/
+      href: /community/events/
     - label: Ambassadors
-      link: /community/ambassadors/
+      href: /community/ambassadors/
     - label: XRPL Jobs
-      link: https://jobs.xrpl.org/
+      href: https://jobs.xrpl.org/
       external: true
     - label: Blog
-      link: /blog/
+      href: /blog/
     - label: XRPL Grants
-      link: https://xrplgrants.org/
+      href: https://xrplgrants.org/
       external: true
     - label: Report a Scam
-      link: /community/report-a-scam/
+      href: /community/report-a-scam/