Merge pull request #3368 from XRPLF/rwa-updates

Refactor RWA tokenization buttons

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

@@ -162,9 +162,7 @@ function RwaTokenizationFeatures() {
         <div className="container max-w-1150">
           <header className="rwa-header">
             <h2 className="rwa-title">
-              {translate(
+              {translate("Defining Features on XRPL")}
-                "Defining Features on XRPL"
-              )}
             </h2>
           </header>
           <div className="feature-grid">
@@ -239,8 +237,10 @@ function DeveloperTools() {
 
 function CompanyLogo({ className, alt, aspectRatio, link }) {
   return (
-    <div
+    <Link
-      onClick={() => window.open(link, "_blank")}
+      to={link}
+      target="_blank"
+      rel="noopener noreferrer"
       className={`company-logo ${className}`}
       role="img"
       aria-label={alt}
@@ -255,9 +255,7 @@ function UpcomingEvents() {
     <section className="token-events-wrapper">
       <div className="upcoming-events">
         <h2 className="upcoming-events__title">
-          {translate(
+          {translate("Trusted by Leaders in Real-World Asset Tokenization")}
-            "Trusted by Leaders in Real-World Asset Tokenization"
-          )}
         </h2>
         <div className="upcoming-events__logo-container">
           {companies.map((company, index) => (
@@ -412,14 +410,20 @@ function TokenHeroSection() {
         <h1 className="token-title">
           {translate("Real-World Asset (RWA) Tokenization")}
         </h1>
-        <div className="d-lg-block small-100 ">
+        <div className="button-container">
           <Link
-            className="btn btn-primary btn-arrow-out"
+            className="btn btn-primary p-12 btn-arrow-out"
             target="_blank"
-            to="/docs/use-cases/tokenization/creating-an-asset-backed-multi-purpose-token"
+            to="/static/pdf/Whitepaper_the_future_of_asset_tokenization.pdf"
           >
             {translate("Get Started Now")}
           </Link>
+          <Link
+            className="internal-link"
+            to="/docs/use-cases/tokenization/creating-an-asset-backed-multi-purpose-token"
+          >
+            {translate("Explore Institutional Solutions")}
+          </Link>
         </div>
       </div>
     </section>
@@ -467,7 +471,7 @@ export default function RwaTokenization() {
           url: "https://xrplresources.org/subscribe",
         },
       ],
-      backgroundClass: "learn-stay-updated"
+      backgroundClass: "learn-stay-updated",
     },
   ];
 

styles/_pages.scss

@@ -1514,17 +1514,55 @@ html.light {
 
   }
 
-  .token-title-container {
+    .token-title-container {
-    gap: 32px;
+      gap: 32px;
-    padding: 104px 40px;
+      padding: 104px 40px;
-    display: flex;
+      display: flex;
-    flex-direction: column;
+      flex-direction: column;
-    align-items: center;
+      align-items: center;
-    justify-content: center;
+      justify-content: center;
-    @media (max-width: 767px) {
+  
-      padding-bottom: 0px;
+      .button-container {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 32px;
+        justify-content: center;
+        align-items: center;
+  
+        .internal-link {
+            color: #9a52ff;
+            font-size: 16px;
+            font-style: normal;
+            font-weight: 700;
+            text-decoration: none;
+            cursor: pointer;
+            display: inline-flex;
+            align-items: center;
+            background: none !important;
+          }
+  
+        @media (max-width: 767px) {
+          padding-bottom: 0px;
+          gap: 16px;
+          flex-direction: column;
+          width: 100%;
+          
+          .btn-primary.p-12 {
+            width: 100%;
+          }
+          
+          .internal-link {
+            width: 100%;
+            text-align: center;
+            white-space: normal;
+          }
+        }
+  
+        .btn-primary.p-12 {
+          padding: 12px;
+        }
+      }
     }
-  }
 
   .token-video-container {
     padding: 104px 64px;