Merge pull request #3268 from XRPLF/rwa-tokenization-changes

Rwa tokenization changes

@theme/components/Navbar/Navbar.tsx

@@ -145,7 +145,7 @@ export function Navbar(props) {
       const isNavbarCollapsed =
         navbarToggler.getAttribute("aria-expanded") === "true";
       if (isNavbarCollapsed) {
-        navbarToggler.click(); // Simulate click to toggle navbar
+        navbarToggler?.click(); // Simulate click to toggle navbar
       }
     };
 

community/index.page.tsx

@@ -844,7 +844,7 @@ const CommunityPage: React.FC = () => {
       </section>
       {/* Bottom Cards Section 2 cards */}
       <section className="bottom-cards-section bug-bounty">
-        <div className="com-card">
+        <div className="com-card ripplex-bug-bounty">
           <img className="top-right-img bug-bounty-card-bg" alt="Top Right Image" />
           <div className="card-content">
             <h6 className="card-title">

docs/use-cases/payments/index.page.tsx

@@ -185,7 +185,8 @@ const PaymentsPage: React.FC = () => {
           text: "Share Your Work",
           url: "https://discord.gg/sfX3ERAMjH"
         }
-      ]
+      ],
+      backgroundClass: "developer-spotlight"
     },
     {
       title: "Learn & Stay Updated", 
@@ -199,7 +200,8 @@ const PaymentsPage: React.FC = () => {
           text: "Sign up for the Newsletter",
           url: "https://xrplresources.org/subscribe"
         }
-      ]
+      ],
+      backgroundClass: "learn-stay-updated"
     }
   ];
 

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

@@ -20,7 +20,7 @@ const benefitsData = [
   },
   {
     iconClass: "access",
-    title: "On-Chain Metadata",
+    title: "Onchain Metadata",
     description:
       "Easily store key asset information or link to off-chain data using simple APIs giving token holders more transparency and functionality.",
   },
@@ -112,13 +112,12 @@ const features = [
     title: "Cross-chain Interoperability",
     link: "https://docs.xrplevm.org/docs/axelar/intro-to-axelar/",
   },
-  
 ];
 const featuresToken = [
   {
     title: "Proven Open-Source Technology",
     description:
-      "With over 3.3B transactions processed, XRP Ledger has been a trusted, battle-tested blockchain for over a decade, supported by a global developer community committed to financial innovation. ",
+      "With over 3.9B transactions processed, XRP Ledger has been a trusted, battle-tested blockchain for over a decade, supported by a global developer community committed to financial innovation. ",
     number: "01",
   },
   {
@@ -134,7 +133,7 @@ const featuresToken = [
     number: "03",
   },
   {
-    title: "Pathfinding & Auto-Bridging for Liquidity",
+    title: "Optimal Liquidity Pathways",
     description:
       "Streamline cross-currency transactions and trading as XRP Ledger’s embedded trading features automatically identify the most efficient routes to enhance liquidity issued tokens and XRP. ",
     number: "04",
@@ -147,9 +146,7 @@ function FeatureCard({ title, description }) {
   return (
     <article className="feature-card">
       <header className="feature-header">
-        <h2 className="feature-title">
-          {translate(title)}
-        </h2>
+        <h2 className="feature-title">{translate(title)}</h2>
       </header>
       <p className="feature-description">{translate(description)}</p>
     </article>
@@ -160,11 +157,14 @@ function RwaTokenizationFeatures() {
   const { useTranslate } = useThemeHooks();
   const { translate } = useTranslate();
   return (
-    <section className="rwa-tokenization">
+    <section className="token-features-section">
+      <div className="rwa-tokenization">
         <div className="container max-w-1150">
           <header className="rwa-header">
             <h2 className="rwa-title">
-            {translate("Key Features for Asset Tokenization and DeFi Development")}
+              {translate(
+                "Defining Features on XRPL"
+              )}
             </h2>
           </header>
           <div className="feature-grid">
@@ -172,19 +172,6 @@ function RwaTokenizationFeatures() {
               <FeatureCard key={index} {...feature} />
             ))}
           </div>
-        <div className="cta-container">
-          <Link
-            to="/docs/concepts/tokens/decentralized-exchange/autobridging"
-            className="btn btn-primary small-100 auto-bridge"
-          >
-            {translate("Learn About Auto-bridging")}
-          </Link>
-          <Link
-            to="/docs/concepts/tokens/fungible-tokens/paths"
-            className="btn btn-link"
-          >
-            {translate("Explore Pathfinding")}
-          </Link>
         </div>
       </div>
     </section>
@@ -211,7 +198,8 @@ function DeveloperTools() {
   const { useTranslate } = useThemeHooks();
   const { translate } = useTranslate();
   return (
-    <section className="developer-tools">
+    <section className="token-developer-tools-section">
+      <div className="developer-tools">
         <div className="container">
           <div className="row">
             <div className="col-lg-6">
@@ -244,6 +232,7 @@ function DeveloperTools() {
             </div>
           </div>
         </div>
+      </div>
     </section>
   );
 }
@@ -263,10 +252,11 @@ function UpcomingEvents() {
   const { useTranslate } = useThemeHooks();
   const { translate } = useTranslate();
   return (
-    <section className="upcoming-events">
+    <section className="token-events-wrapper">
+      <div className="upcoming-events">
         <h2 className="upcoming-events__title">
           {translate(
-          "Explore the companies pioneering tokenization using XRP Ledger"
+            "Trusted by Leaders in Real-World Asset Tokenization"
           )}
         </h2>
         <div className="upcoming-events__logo-container">
@@ -274,6 +264,7 @@ function UpcomingEvents() {
             <CompanyLogo key={index} {...company} />
           ))}
         </div>
+      </div>
     </section>
   );
 }
@@ -291,10 +282,9 @@ const marketIntegrationData = [
         <Link to="/docs/concepts/tokens/decentralized-exchange/automated-market-makers">
           Automated Market Makers (AMM)
         </Link>{" "}
-        and onchain 24/7 order books, providing a developer-friendly
-        environment to create{" "}
-        <Link to="/docs/use-cases/defi">DeFi solutions</Link> for traditional
-        finance applications.
+        and onchain 24/7 order books, providing a developer-friendly environment
+        to create <Link to="/docs/use-cases/defi">DeFi solutions</Link> for
+        traditional finance applications.
       </>
     ),
   },
@@ -303,7 +293,7 @@ const marketIntegrationData = [
     description: (
       <>
         Issuers can enable{" "}
-        <Link to="/docs/concepts/payment-types/escrow">
+        <Link target="_blank" to="/docs/concepts/payment-types/escrow">
           escrow functionality
         </Link>{" "}
         to lock tokens and facilitate secure, conditional transfers of assets
@@ -346,119 +336,20 @@ function TokenUtilitySection() {
   );
 }
 
-const BenefitCard = ({ iconClass, title, description }) => {
+function TokenVideoSection() {
   const { useTranslate } = useThemeHooks();
   const { translate } = useTranslate();
   return (
-    <article className="benefit-card">
-      <div className={`benefit-icon ${iconClass}`}></div>
-      <h3 className="benefit-title">{translate(title)}</h3>
-      <p className="benefit-description">{translate(description)}</p>
-    </article>
-  );
-};
-
-export default function RwaTokenization() {
-  const { useTranslate } = useThemeHooks();
-  const { translate } = useTranslate();
-  
-  const developerResourcesCards = [
-    {
-      title: "Developer Resources",
-      description: (
-        <>
-          {translate("use-cases.rwa.dev-resources.p1", "Easily integrate with ")}
-          <Link
-            target="_blank"
-            to="/docs/tutorials/public-servers"
-          >
-            {translate("use-cases.rwa.dev-resources.p2", "existing infrastructure ")}
-          </Link>
-          {translate(
-            "use-cases.rwa.dev-resources.p3", 
-            "and access resources to support your development journey. Fund your project with XRPL Grants or speak to our dev advocates today."
-          )}
-        </>
-      ),
-      links: [
-        {
-          text: "Apply for XRPL Grants",
-          url: "https://xrplgrants.org/"
-        },
-        {
-          text: "Talk to a Dev Advocate", 
-          url: "https://twitter.com/RippleDevRel"
-        }
-      ]
-    },
-    {
-      title: "Learn & Stay Updated",
-      description: "Stay ahead of the curve with the latest developments in RWA tokenization on the XRP Ledger by joining the developer Discord and signing up for the XRPL Community Newsletter.",
-      links: [
-        {
-          text: "Join the Developer Discord",
-          url: "https://discord.gg/sfX3ERAMjH"
-        },
-        {
-          text: "Sign up for the Newsletter",
-          url: "https://xrplresources.org/subscribe"
-        }
-      ]
-    }
-  ];
-  
-  useEffect(() => {
-    const script = document.createElement('script');
-    script.id = 'video-schema'
-    script.type = 'application/ld+json';
-    script.innerHTML = JSON.stringify({
-      "@context": "https://schema.org",
-      "@type": "VideoObject",
-      "name": "Generate and Send MPTs",
-      "description": "Use the Account Configurator to create an Issuing account. Use the MPT Generator to create a Multi-purpose Token. Send the MPT from the Issuing account to any account that authorizes receipt of the MPT.",
-      "thumbnailUrl": "https://i.ytimg.com/vi_webp/ZZ2KZTEJECg/sddefault.webp",
-      "uploadDate": "2025-04-11",
-      "embedUrl": "https://www.youtube.com/embed/ZZ2KZTEJECg"
-    });
-    document.head.appendChild(script);
-    // Remove the script from the head when the component unmounts
-    return () => {
-      document.head.removeChild(script);
-    };
-  }, []);
-  return (
-    <div className="page-rwa-tokenization">
-      <div className="position-relative d-none-sm">
-        <img
-          alt="orange waves"
-          src={require("./../../../static/img/backgrounds/events-orange.svg")}
-          id="events-orange"
-        />
-      </div>
-      <div className="token-title-container">
-        <h1 className="token-title">
-          {translate(
-            "Real-World Asset (RWA) Tokenization on the XRP Ledger"
-          )}
-        </h1>
-        <div className="d-lg-block small-100 ">
-          <Link
-            className="btn btn-primary btn-arrow-out"
-            target="_blank"
-            to="/docs/use-cases/tokenization/creating-an-asset-backed-multi-purpose-token"
-          >
-            {translate("Get Started Now")}
-          </Link>
-        </div>
-      </div>
-      <div className="token-video-container">
+    <section className="token-video-container">
       <div className="token-video">
         <iframe
           width="100%"
           height="100%"
-            src="https://www.youtube.com/embed/ZZ2KZTEJECg"
-            title="Generate and Send MPTs"
+          src="https://www.youtube.com/embed/oKbf-IgPHho"
+          title="Multi Purpose Tokens (MPTs) on the XRPL"
           frameBorder="0"
+          allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+          allowFullScreen
         ></iframe>
       </div>
       <div className="token-video-text-container">
@@ -472,10 +363,74 @@ export default function RwaTokenization() {
             "XRP Ledger's built-in functionality and compliance-enabling features allow asset tokenization without additional layers of complexity."
           )}
         </p>
+        <p>
+          {translate(
+            "Access the full white paper to learn how XRP Ledger’s new token standard is shaping institutional-grade finance."
+          )}
+        </p>
+        <div className="d-lg-block small-100 __button-container">
+          <a
+            className="btn btn-primary d-block d-md-inline-block small-100"
+            href="/static/pdf/Whitepaper_the_future_of_asset_tokenization.pdf"
+            target="_blank"
+            rel="noopener"
+            download
+          >
+            {translate("Download White Paper")}
+          </a>
         </div>
       </div>
+    </section>
+  );
+}
 
-      <div className="token-cards-wrapper">
+const BenefitCard = ({ iconClass, title, description }) => {
+  const { useTranslate } = useThemeHooks();
+  const { translate } = useTranslate();
+  return (
+    <article className="benefit-card">
+      <div className={`benefit-icon ${iconClass}`}></div>
+      <h3 className="benefit-title">{translate(title)}</h3>
+      <p className="benefit-description">{translate(description)}</p>
+    </article>
+  );
+};
+
+function TokenHeroSection() {
+  const { useTranslate } = useThemeHooks();
+  const { translate } = useTranslate();
+  return (
+    <section className="token-hero-section">
+      <div className="position-relative d-none-sm">
+        <img
+          alt="orange waves"
+          src={require("./../../../static/img/backgrounds/events-orange.svg")}
+          id="events-orange"
+        />
+      </div>
+      <div className="token-title-container">
+        <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"
+            target="_blank"
+            to="/docs/use-cases/tokenization/creating-an-asset-backed-multi-purpose-token"
+          >
+            {translate("Get Started Now")}
+          </Link>
+        </div>
+      </div>
+    </section>
+  );
+}
+
+function TokenBenefitsSection() {
+  const { useTranslate } = useThemeHooks();
+  const { translate } = useTranslate();
+  return (
+    <section className="token-cards-wrapper">
       <div className="token-cards-container">
         <div>
           <h2 className="cards-title-token">
@@ -491,28 +446,62 @@ export default function RwaTokenization() {
             ))}
           </div>
         </div>
-          <div className="d-lg-block small-100">
-            <Link
-              className="btn btn-primary btn-arrow-out"
-              target="_blank"
-              to="/docs/use-cases/tokenization/creating-an-asset-backed-multi-purpose-token"
-            >
-              {translate("Start Building Now")}
-            </Link>
-          </div>
-        </div>
-      </div>
-      <div className="token-events-wrapper">
-        <UpcomingEvents />
-      </div>
-      <TokenUtilitySection />
-      <div className="token-developer-tools-section">
-        <DeveloperTools />
-      </div>
-      <div className="token-features-section">
-        <RwaTokenizationFeatures />
-      </div>
-      <DeveloperResourcesSection cards={developerResourcesCards} />
       </div>
+    </section>
+  );
+}
+
+export default function RwaTokenization() {
+  const developerResourcesCards = [
+    {
+      title: "Learn & Stay Updated",
+      description:
+        "Stay ahead of the curve with the latest developments in RWA tokenization on the XRP Ledger by joining the developer Discord and signing up for the XRPL Community Newsletter.",
+      links: [
+        {
+          text: "Join the Developer Discord",
+          url: "https://discord.gg/sfX3ERAMjH",
+        },
+        {
+          text: "Sign up for the Newsletter",
+          url: "https://xrplresources.org/subscribe",
+        },
+      ],
+      backgroundClass: "learn-stay-updated"
+    },
+  ];
+
+  useEffect(() => {
+    const script = document.createElement("script");
+    script.id = "video-schema";
+    script.type = "application/ld+json";
+    script.innerHTML = JSON.stringify({
+      "@context": "https://schema.org",
+      "@type": "VideoObject",
+      name: "Generate and Send MPTs",
+      description:
+        "Use the Account Configurator to create an Issuing account. Use the MPT Generator to create a Multi-purpose Token. Send the MPT from the Issuing account to any account that authorizes receipt of the MPT.",
+      thumbnailUrl: "https://i.ytimg.com/vi_webp/ZZ2KZTEJECg/sddefault.webp",
+      uploadDate: "2025-04-11",
+      embedUrl: "https://www.youtube.com/embed/ZZ2KZTEJECg",
+    });
+    document.head.appendChild(script);
+    // Remove the script from the head when the component unmounts
+    return () => {
+      document.head.removeChild(script);
+    };
+  }, []);
+  return (
+    <main className="page-rwa-tokenization">
+      <TokenHeroSection />
+      <TokenBenefitsSection />
+      <TokenVideoSection />
+
+      <UpcomingEvents />
+      <TokenUtilitySection />
+      <DeveloperTools />
+      <RwaTokenizationFeatures />
+      <DeveloperResourcesSection cards={developerResourcesCards} />
+    </main>
   );
 }

shared/components/developer-resources-section.tsx

@@ -24,16 +24,13 @@ export const DeveloperResourcesSection: React.FC<DeveloperResourcesSectionProps>
 }) => {
   const { useTranslate } = useThemeHooks();
   const { translate } = useTranslate();
+  const isSingleCard = cards.length === 1;
 
   return (
-    <div className={`developer-resources-section page-community ${className}`}>
+    <div className={`container developer-resources-section page-community ${className} ${isSingleCard ? 'single-card' : ''}`}>
       <section className="bottom-cards-section bug-bounty section-padding">
         {cards.map((card, index) => (
-          <div key={index} className="com-card">
-            <img
-              className={`${index === 0 ? 'top-right-img' : 'bottom-right-img'} bug-bounty-card-bg${index === 0 ? '' : '-2'} ${card.backgroundClass || ''}`}
-              alt={`${card.title} Background`}
-            />
+          <div key={index} className={`com-card ${card.backgroundClass || ''}`}>
             <div className="card-content custom-gap">
               <h6 className="card-title">{translate(card.title)}</h6>
               <p className="card-description">

styles/_contribute.scss

@@ -908,7 +908,6 @@
     .w-222 {
         width: 222px;
     }
-
     .bottom-cards-section .com-card .card-content {
         display: flex;
         flex-direction: column;
@@ -978,10 +977,12 @@
                 content: url(../img/community/card-bg-1.svg);
             }
             .top-right-img.bug-bounty-card-bg {
-                content: url(../img/community/bug-bounty-card-bg.png)
+                content: url(../img/community/bug-bounty-card-bg.png);
+                height: 123px;
             }
             .bottom-right-img.bug-bounty-card-bg-2 {
-                content: url(../img/community/bug-bounty-card-bg-2.png)
+                content: url(../img/community/bug-bounty-card-bg-2.png);
+                height: 123px;
             }
 
             .bottom-right-img {

styles/_helpers.scss

@@ -149,6 +149,9 @@
     }
   }
 }
+.mt-1{
+  margin-top: 1rem;
+}
 .mt-12 {
   margin-top: 3rem;
 }

styles/_pages.scss

@@ -1507,59 +1507,103 @@ html.light {
     max-width: 720px;
     z-index: 1;
     @include media-breakpoint-down(md) {
+      line-height: 48px;
       font-size: 42px;
+      text-align: left;
     }
 
   }
 
   .token-title-container {
     gap: 32px;
-    padding: 104px 64px;
+    padding: 104px 40px;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
+    @media (max-width: 767px) {
+      padding-bottom: 0px;
+    }
   }
 
   .token-video-container {
-    flex-wrap: wrap;
     padding: 104px 64px;
     display: flex;
     flex-direction: row;
     align-items: center;
     justify-content: center;
-    /* Center the video and text */
     gap: 48px;
-
+    max-width: 1200px;
+    margin: 0 auto;
+    @media (max-width: 767px) {
+      padding-bottom: 0px;
+    }
+    .__button-container{
+      margin-top: 16px;
+    }
     .token-video {
       width: 50%;
-      /* Adjust width to keep it balanced with the text */
       max-width: 602px;
       height: 372px;
-
-      @include media-breakpoint-down(md) {
-        width: 100%;
-      }
     }
 
     .token-video-text-container {
-      @include media-breakpoint-down(md) {
-        width: 100%;
-      }
-
       max-width: 520px;
       width: 50%;
-      /* Adjust width to keep it balanced with the video */
       display: flex;
       flex-direction: column;
-      align-items: center;
+      align-items: flex-start;
       text-align: left;
-      /* Ensure text is aligned correctly */
       gap: 24px;
-      color: #E0E0E1;
+
+      p {
+        color: var(--black-black-10-gray-200, #E0E0E1);
         font-family: "Work Sans";
         font-size: 24px;
+        font-style: normal;
+        font-weight: 400;
         line-height: 32px;
+        margin: 0;
+      }
+    }
+
+    @media (max-width: 1145px) {
+      flex-direction: column;
+      gap: 40px;
+      padding: 80px 40px;
+      max-width: 800px;
+      
+      .token-video {
+        width: 100%;
+        max-width: 100%;
+        height: auto;
+        aspect-ratio: 16/9;
+      }
+      
+      .token-video-text-container {
+        width: 100%;
+        max-width: 100%;
+        align-items: flex-start;
+        text-align: left;
+        
+        p {
+          font-size: 22px;
+          line-height: 30px;
+        }
+      }
+    }
+
+    @media (max-width: 767px) {
+      padding: 60px 40px;
+      gap: 32px;
+      max-width: 100%;
+      
+      .token-video-text-container {
+        p {
+          font-size: 18px;
+          line-height: 26px;
+        }
+      }
     }
   }
 
@@ -1576,6 +1620,9 @@ html.light {
     align-items: start;
     gap: 40px;
     max-width: 1280px;
+    @media (max-width: 767px) {
+      padding-bottom: 0px;
+    }
 
     .cards-title-token {
       color: var(--black-black-0-white, #FFF);
@@ -1584,6 +1631,7 @@ html.light {
       font-style: normal;
       font-weight: 700;
       line-height: 38px;
+      max-width: 780px;
       /* 118.75% */
     }
 
@@ -1607,19 +1655,46 @@ html.light {
 
 
     .benefits-container {
-      display: flex;
-      flex-wrap: wrap;
-      justify-content: flex-start;
+      display: grid;
+      grid-template-columns: repeat(4, 1fr);
       gap: 40px;
       width: 100%;
       max-width: 1136px;
     }
 
-    @media (max-width: 991px) {
+    @media (max-width: 1399px) {
+      .benefits-container {
+        grid-template-columns: repeat(3, 1fr);
+      }
+    }
+    
+    @media (max-width: 1145px) {
       .section-title {
         font-size: 28px;
         line-height: 34px;
       }
+      
+      .benefits-container {
+        grid-template-columns: repeat(2, 1fr);
+        gap: 32px;
+      }
+      
+      .benefit-card {
+        padding: 24px;
+        min-height: 280px;
+      }
+    }
+    
+    @media (max-width: 767px) {
+      .benefits-container {
+        grid-template-columns: 1fr;
+        gap: 24px;
+      }
+      
+      .benefit-card {
+        padding: 20px;
+        min-height: 240px;
+      }
     }
 
     .benefit-card {
@@ -1628,9 +1703,8 @@ html.light {
       display: flex;
       flex-direction: column;
       justify-content: flex-start;
-      padding: 40px;
-      height: 310px;
-      width: 352px;
+      padding: 32px;
+      min-height: 332px;
     }
 
     .benefit-icon {
@@ -1684,14 +1758,21 @@ html.light {
   padding: 100px 40px;
   max-width: 1200px;
   width: 100%;
+  @media (max-width: 767px) {
+    padding-bottom: 0px;
+    padding-top: 0px;
+  }
 }
 
 .upcoming-events__title {
-  max-width: 620px;
+  max-width: 630px;
   align-self: stretch;
   color: #fff;
   font: 700 32px/38px Work Sans, -apple-system, Roboto, Helvetica, sans-serif;
   margin-bottom: 64px;
+  @media (max-width: 767px) {
+   text-align: left;
+  }
 }
 
 .upcoming-events__logo-container {
@@ -1856,7 +1937,7 @@ html.light {
   
   @media (max-width: 991px) {
     .developer-tools {
-      padding: 50px 0;
+      padding: 50px 40px;
     }
 
     .developer-tools__header {
@@ -2024,10 +2105,6 @@ html.light {
   padding: 100px 40px;
 }
 
-.card-description {
-  min-height: 96px;
-}
-
 // Developer Resources Section - Clean, responsive styles with high specificity
 .developer-resources-section {
   .bottom-cards-section.bug-bounty.section-padding {
@@ -2058,10 +2135,10 @@ html.light {
       margin: 0 !important;
       
       @media (min-width: 768px) {
-        flex: 1 1 calc(50% - 20px) !important;
-        max-width: calc(50% - 20px) !important;
-        min-width: calc(50% - 20px) !important;
-        width: auto !important;
+        flex: 1 1 calc(50% - 20px);
+        max-width: calc(50% - 20px);
+        min-width: calc(50% - 20px);
+        width: auto;
       }
       
       @media (max-width: 767px) {
@@ -2072,6 +2149,23 @@ html.light {
         flex: none !important;
       }
 
+      &.developer-spotlight {
+        background-image: url(../img/community/bug-bounty-card-bg.png);
+        background-position: top right;
+        background-size: 169px 88px;
+        background-repeat: no-repeat;
+      }
+      &.learn-stay-updated {
+        background-image: url(../img/community/bug-bounty-card-bg-2.png);
+        background-position: bottom right;
+        background-size: contain;
+        background-repeat: no-repeat;
+        background-size: 136px 177px;
+        @media (max-width: 767px) {
+          background-image: url(../img/community/bug-bounty-card-bg-2-mobile.png);
+        }
+      }
+      
       .card-content {
         display: flex;
         flex-direction: column;
@@ -2080,7 +2174,7 @@ html.light {
         .card-description {
           flex-grow: 1;
           margin-bottom: 24px;
-          
+          max-width: 560px;
           @media (max-width: 767px) {
             margin-bottom: 20px;
           }
@@ -2105,10 +2199,67 @@ html.light {
       }
     }
   }
+  
+  // Single card layout - remove gap and control spacing precisely
+  &.single-card .bottom-cards-section.bug-bounty.section-padding {
+    gap: 0 !important;
+  }
+  &.single-card {
+    .bug-bounty-card-bg-2 {
+      @media (max-width: 767px) {
+        content: url("../img/community/bug-bounty-card-bg-2-mobile.png");
+      }
+    }
+
+    .com-card {
+      font-size: 24px;
+      max-height: 288px !important;
+
+      @media (max-width: 768px) {
+        min-height: 493px !important;
+      }
+      @media (min-width: 768px) {
+        flex: 1 1 100% !important;
+        max-width: 100% !important;
+        min-width: 100% !important;
+      }
+
+    .bottom-right-img.bug-bounty-card-bg-2 {
+      height: 714px ;
+      width: auto;
+      object-fit: cover;
+      object-position: right bottom;
+    }
+    
+    .card-content {
+      gap: 0;
+      
+      .card-title {
+        margin-bottom: 24px;
+        margin-top: 0;
+      }
+      
+      .card-description {
+        margin-bottom: 24px;
+        margin-top: 0;
+        flex-grow: 0;
+        padding: 0;
+      }
+      
+      .card-links {
+        margin-top: 0;
+        margin-bottom: 0;
+      }
+    }
+    }
+  }
 }
 
 .token-utility-section {
-  padding-top: 100px;
+  padding: 100px 40px;
+  @media (max-width: 767px) {
+    padding-bottom: 0px;
+  }
   .section-title {
     font-size: 32px;
     font-weight: 700;