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">
+        <h2 className="feature-title">{translate(title)}</h2>
-          {translate(title)}
-        </h2>
       </header>
       <p className="feature-description">{translate(description)}</p>
     </article>
@@ -160,31 +157,21 @@ function RwaTokenizationFeatures() {
   const { useTranslate } = useThemeHooks();
   const { translate } = useTranslate();
   return (
-    <section className="rwa-tokenization">
+    <section className="token-features-section">
-      <div className="container max-w-1150">
+      <div className="rwa-tokenization">
-        <header className="rwa-header">
+        <div className="container max-w-1150">
-          <h2 className="rwa-title">
+          <header className="rwa-header">
-            {translate("Key Features for Asset Tokenization and DeFi Development")}
+            <h2 className="rwa-title">
-          </h2>
+              {translate(
-        </header>
+                "Defining Features on XRPL"
-        <div className="feature-grid">
+              )}
-          {featuresToken.map((feature, index) => (
+            </h2>
-            <FeatureCard key={index} {...feature} />
+          </header>
-          ))}
+          <div className="feature-grid">
-        </div>
+            {featuresToken.map((feature, index) => (
-        <div className="cta-container">
+              <FeatureCard key={index} {...feature} />
-          <Link
+            ))}
-            to="/docs/concepts/tokens/decentralized-exchange/autobridging"
+          </div>
-            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>
@@ -197,11 +184,11 @@ export function FeatureItem({ title, link }) {
   return (
     <li className="feature-item">
       <Link to={link} target="_blank">
-      <div className="feature-item__content">
+        <div className="feature-item__content">
-        <span className="feature-item__title">{translate(title)}</span>
+          <span className="feature-item__title">{translate(title)}</span>
-        <span className="right-arrow-item"> </span>
+          <span className="right-arrow-item"> </span>
-      </div>
+        </div>
-      <div className="feature-item__divider"></div>
+        <div className="feature-item__divider"></div>
       </Link>
     </li>
   );
@@ -211,36 +198,38 @@ function DeveloperTools() {
   const { useTranslate } = useThemeHooks();
   const { translate } = useTranslate();
   return (
-    <section className="developer-tools">
+    <section className="token-developer-tools-section">
-      <div className="container">
+      <div className="developer-tools">
-        <div className="row">
+        <div className="container">
-          <div className="col-lg-6">
+          <div className="row">
-            <header className="developer-tools__header">
+            <div className="col-lg-6">
-              <h2 className="developer-tools__title">
+              <header className="developer-tools__header">
-                {translate("Developer Tools & APIs")}
+                <h2 className="developer-tools__title">
-              </h2>
+                  {translate("Developer Tools & APIs")}
-              <p className="developer-tools__description">
+                </h2>
-                {translate(
+                <p className="developer-tools__description">
-                  "Streamline development and build powerful RWA tokenization solutions with XRP Ledger's comprehensive developer toolset:"
+                  {translate(
-                )}
+                    "Streamline development and build powerful RWA tokenization solutions with XRP Ledger's comprehensive developer toolset:"
-              </p>
+                  )}
-            </header>
+                </p>
-            <ul className="developer-tools__list">
+              </header>
-              {features.map((feature, index) => (
+              <ul className="developer-tools__list">
-                <FeatureItem
+                {features.map((feature, index) => (
-                  key={index}
+                  <FeatureItem
-                  link={feature.link}
+                    key={index}
-                  title={feature.title}
+                    link={feature.link}
-                />
+                    title={feature.title}
-              ))}
+                  />
-            </ul>
+                ))}
-          </div>
+              </ul>
-          <div className="col-lg-6 m-h-300">
+            </div>
-            <div
+            <div className="col-lg-6 m-h-300">
-              className="developer-tools__image"
+              <div
-              role="img"
+                className="developer-tools__image"
-              aria-label="Developer tools illustration"
+                role="img"
-            ></div>
+                aria-label="Developer tools illustration"
+              ></div>
+            </div>
           </div>
         </div>
       </div>
@@ -263,16 +252,18 @@ function UpcomingEvents() {
   const { useTranslate } = useThemeHooks();
   const { translate } = useTranslate();
   return (
-    <section className="upcoming-events">
+    <section className="token-events-wrapper">
-      <h2 className="upcoming-events__title">
+      <div className="upcoming-events">
-        {translate(
+        <h2 className="upcoming-events__title">
-          "Explore the companies pioneering tokenization using XRP Ledger"
+          {translate(
-        )}
+            "Trusted by Leaders in Real-World Asset Tokenization"
-      </h2>
+          )}
-      <div className="upcoming-events__logo-container">
+        </h2>
-        {companies.map((company, index) => (
+        <div className="upcoming-events__logo-container">
-          <CompanyLogo key={index} {...company} />
+          {companies.map((company, index) => (
-        ))}
+            <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
+        and onchain 24/7 order books, providing a developer-friendly environment
-        environment to create{" "}
+        to create <Link to="/docs/use-cases/defi">DeFi solutions</Link> for
-        <Link to="/docs/use-cases/defi">DeFi solutions</Link> for traditional
+        traditional finance applications.
-        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,6 +336,54 @@ function TokenUtilitySection() {
   );
 }
 
+function TokenVideoSection() {
+  const { useTranslate } = useThemeHooks();
+  const { translate } = useTranslate();
+  return (
+    <section className="token-video-container">
+      <div className="token-video">
+        <iframe
+          width="100%"
+          height="100%"
+          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">
+        <p>
+          {translate(
+            "Issue, manage, and trade real-world assets without needing to build smart contracts."
+          )}
+        </p>
+        <p>
+          {translate(
+            "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>
+  );
+}
+
 const BenefitCard = ({ iconClass, title, description }) => {
   const { useTranslate } = useThemeHooks();
   const { translate } = useTranslate();
@@ -358,76 +396,11 @@ const BenefitCard = ({ iconClass, title, description }) => {
   );
 };
 
-export default function RwaTokenization() {
+function TokenHeroSection() {
   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">
+    <section className="token-hero-section">
       <div className="position-relative d-none-sm">
         <img
           alt="orange waves"
@@ -437,9 +410,7 @@ export default function RwaTokenization() {
       </div>
       <div className="token-title-container">
         <h1 className="token-title">
-          {translate(
+          {translate("Real-World Asset (RWA) Tokenization")}
-            "Real-World Asset (RWA) Tokenization on the XRP Ledger"
-          )}
         </h1>
         <div className="d-lg-block small-100 ">
           <Link
@@ -451,68 +422,86 @@ export default function RwaTokenization() {
           </Link>
         </div>
       </div>
-      <div className="token-video-container">
+    </section>
-        <div className="token-video">
+  );
-          <iframe
+}
-            width="100%"
+
-            height="100%"
+function TokenBenefitsSection() {
-            src="https://www.youtube.com/embed/ZZ2KZTEJECg"
+  const { useTranslate } = useThemeHooks();
-            title="Generate and Send MPTs"
+  const { translate } = useTranslate();
-            frameBorder="0"
+  return (
-          ></iframe>
+    <section className="token-cards-wrapper">
-        </div>
+      <div className="token-cards-container">
-        <div className="token-video-text-container">
+        <div>
-          <p>
+          <h2 className="cards-title-token">
-            {translate(
+            {translate(
-              "Issue, manage, and trade real-world assets without needing to build smart contracts."
+              "Why Financial Developers Choose XRPL as an RWA Tokenization Platform"
-            )}
+            )}
-          </p>
+          </h2>
-          <p>
+        </div>
-            {translate(
+        <div className="benefits-section">
-              "XRP Ledger's built-in functionality and compliance-enabling features allow asset tokenization without additional layers of complexity."
+          <div className="benefits-container">
-            )}
+            {benefitsData.map((benefit, index) => (
-          </p>
+              <BenefitCard key={index} {...benefit} />
-        </div>
+            ))}
-      </div>
+          </div>
-
+        </div>
-      <div className="token-cards-wrapper">
+      </div>
-        <div className="token-cards-container">
+    </section>
-          <div>
+  );
-            <h2 className="cards-title-token">
+}
-              {translate(
+
-                "Why Financial Developers Choose XRPL as an RWA Tokenization Platform"
+export default function RwaTokenization() {
-              )}
+  const developerResourcesCards = [
-            </h2>
+    {
-          </div>
+      title: "Learn & Stay Updated",
-          <div className="benefits-section">
+      description:
-            <div className="benefits-container">
+        "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.",
-              {benefitsData.map((benefit, index) => (
+      links: [
-                <BenefitCard key={index} {...benefit} />
+        {
-              ))}
+          text: "Join the Developer Discord",
-            </div>
+          url: "https://discord.gg/sfX3ERAMjH",
-          </div>
+        },
-          <div className="d-lg-block small-100">
+        {
-            <Link
+          text: "Sign up for the Newsletter",
-              className="btn btn-primary btn-arrow-out"
+          url: "https://xrplresources.org/subscribe",
-              target="_blank"
+        },
-              to="/docs/use-cases/tokenization/creating-an-asset-backed-multi-purpose-token"
+      ],
-            >
+      backgroundClass: "learn-stay-updated"
-              {translate("Start Building Now")}
+    },
-            </Link>
+  ];
-          </div>
+
-        </div>
+  useEffect(() => {
-      </div>
+    const script = document.createElement("script");
-      <div className="token-events-wrapper">
+    script.id = "video-schema";
-        <UpcomingEvents />
+    script.type = "application/ld+json";
-      </div>
+    script.innerHTML = JSON.stringify({
-      <TokenUtilitySection />
+      "@context": "https://schema.org",
-      <div className="token-developer-tools-section">
+      "@type": "VideoObject",
-        <DeveloperTools />
+      name: "Generate and Send MPTs",
-      </div>
+      description:
-      <div className="token-features-section">
+        "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.",
-        <RwaTokenizationFeatures />
+      thumbnailUrl: "https://i.ytimg.com/vi_webp/ZZ2KZTEJECg/sddefault.webp",
-      </div>
+      uploadDate: "2025-04-11",
-      <DeveloperResourcesSection cards={developerResourcesCards} />
+      embedUrl: "https://www.youtube.com/embed/ZZ2KZTEJECg",
-    </div>
+    });
+    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">
+          <div key={index} className={`com-card ${card.backgroundClass || ''}`}>
-            <img
-              className={`${index === 0 ? 'top-right-img' : 'bottom-right-img'} bug-bounty-card-bg${index === 0 ? '' : '-2'} ${card.backgroundClass || ''}`}
-              alt={`${card.title} Background`}
-            />
             <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;
+
-      font-family: "Work Sans";
+      p {
-      font-size: 24px;
+        color: var(--black-black-10-gray-200, #E0E0E1);
-      line-height: 32px;
+        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;
+      display: grid;
-      flex-wrap: wrap;
+      grid-template-columns: repeat(4, 1fr);
-      justify-content: flex-start;
       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;
+      padding: 32px;
-      height: 310px;
+      min-height: 332px;
-      width: 352px;
     }
 
     .benefit-icon {
@@ -1680,18 +1754,25 @@ html.light {
   display: flex;
   flex-direction: column;
   justify-content: center;
-  overflow: hidden;
+  overflow: hidden; 
   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;
+        flex: 1 1 calc(50% - 20px);
-        max-width: calc(50% - 20px) !important;
+        max-width: calc(50% - 20px);
-        min-width: calc(50% - 20px) !important;
+        min-width: calc(50% - 20px);
-        width: auto !important;
+        width: auto;
       }
       
       @media (max-width: 767px) {
@@ -2071,6 +2148,23 @@ html.light {
         margin-bottom: 0 !important;
         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;
@@ -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;