Refactor tokenization page layout and styles; update button structure and link behavior for improved responsiveness and user experience.

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(
-                "Defining Features on XRPL"
-              )}
+              {translate("Defining Features on XRPL")}
             </h2>
           </header>
           <div className="feature-grid">
@@ -255,9 +253,7 @@ function UpcomingEvents() {
     <section className="token-events-wrapper">
       <div className="upcoming-events">
         <h2 className="upcoming-events__title">
-          {translate(
-            "Trusted by Leaders in Real-World Asset Tokenization"
-          )}
+          {translate("Trusted by Leaders in Real-World Asset Tokenization")}
         </h2>
         <div className="upcoming-events__logo-container">
           {companies.map((company, index) => (
@@ -412,13 +408,19 @@ function TokenHeroSection() {
         <h1 className="token-title">
           {translate("Real-World Asset (RWA) Tokenization")}
         </h1>
-        <div className="d-lg-block small-100 ">
-          <Link
-            className="btn btn-primary btn-arrow-out"
+        <div className="button-container">
+          <a
+            className="btn btn-primary p-12"
             target="_blank"
-            to="/docs/use-cases/tokenization/creating-an-asset-backed-multi-purpose-token"
+            href="/static/pdf/Whitepaper_the_future_of_asset_tokenization.pdf"
           >
             {translate("Get Started Now")}
+          </a>
+          <Link
+            className="internal-link btn-arrow"
+            to="/docs/use-cases/tokenization/creating-an-asset-backed-multi-purpose-token"
+          >
+            {translate("Explore Institutional Solutions")}
           </Link>
         </div>
       </div>
@@ -467,7 +469,7 @@ export default function RwaTokenization() {
           url: "https://xrplresources.org/subscribe",
         },
       ],
-      backgroundClass: "learn-stay-updated"
+      backgroundClass: "learn-stay-updated",
     },
   ];
 

styles/_pages.scss

@@ -1514,17 +1514,63 @@ html.light {
 
   }
 
-  .token-title-container {
-    gap: 32px;
-    padding: 104px 40px;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    @media (max-width: 767px) {
-      padding-bottom: 0px;
+    .token-title-container {
+      gap: 32px;
+      padding: 104px 40px;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+  
+      .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;
+            &::after {
+              content: url('../img/icons/arrow-right-purple.svg') !important;
+              position: relative;
+              top: 3px;
+              vertical-align: middle;
+              padding-left: 8px;
+              transition: transform 0.3s ease-out;
+            }
+          }
+  
+        @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;