adds requested changes

docs/use-cases/tokenization/real-world-assets.page.tsx

@@ -81,7 +81,7 @@ const features = [
   },
   {
     title: "DEX Integration",
-    link: "https://xrpl.org/docs/tutorials/how-tos/use-tokens/trade-in-the-decentralized-exchange",
+    link: "/docs/tutorials/how-tos/use-tokens/trade-in-the-decentralized-exchange",
   },
   {
     title: "Cross-chain Interoperability",
@@ -172,12 +172,14 @@ function FeatureItem({ title, link }) {
   const { useTranslate } = useThemeHooks();
   const { translate } = useTranslate();
   return (
-    <li onClick={() => window.open(link, "_blank")} className="feature-item">
+    <li className="feature-item">
+      <Link to={link} target="_blank">
       <div className="feature-item__content">
         <span className="feature-item__title">{translate(title)}</span>
         <span className="right-arrow-item"> </span>
       </div>
       <div className="feature-item__divider"></div>
+      </Link>
     </li>
   );
 }

styles/_pages.scss

@@ -1445,7 +1445,7 @@ html.light {
     line-height: 70px;
     /* 112.903% */
     max-width: 720px;
-
+    z-index: 1;
     @include media-breakpoint-down(md) {
       font-size: 42px;
     }
@@ -1742,6 +1742,9 @@ html.light {
   }
 
   .feature-item {
+    a:hover {
+      text-decoration: none;
+    }
     margin-bottom: 16px;
     cursor: pointer;
   }