Refactor use-case end cards to use bg images

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

@@ -467,6 +467,7 @@ export default function RwaTokenization() {
           url: "https://xrplresources.org/subscribe",
         },
       ],
+      backgroundClass: "learn-stay-updated"
     },
   ];
 

shared/components/developer-resources-section.tsx

@@ -27,14 +27,10 @@ export const DeveloperResourcesSection: React.FC<DeveloperResourcesSectionProps>
   const isSingleCard = cards.length === 1;
 
   return (
-    <div className={` container developer-resources-section page-community ${className} ${isSingleCard ? 'single-card' : ''}`}>
+    <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 ${isSingleCard ? 'single-card' : ''}`}>
-            <img
-              className={`${isSingleCard ? 'bottom-right-img' : (index === 0 ? 'top-right-img' : 'bottom-right-img')} ${isSingleCard ? 'bug-bounty-card-bg-2' : `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/_pages.scss

@@ -2135,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) {
@@ -2148,19 +2148,22 @@ html.light {
         margin-bottom: 0 !important;
         flex: none !important;
       }
-      
-      // Single card layout styles
-      &.single-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;
+
+      &.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;
+
+        @media (max-width: 767px) {
+          background-image: url(../img/community/bug-bounty-card-bg-2-mobile.png);
+          background-size: 136px 177px;
         }
       }
       
@@ -2204,14 +2207,24 @@ html.light {
   }
   &.single-card {
     .bug-bounty-card-bg-2 {
-    @media (max-width: 767px) {
-      content: url("../img/community/bug-bounty-card-bg-2-mobile.png") !important;
+      @media (max-width: 767px) {
+        content: url("../img/community/bug-bounty-card-bg-2-mobile.png");
+      }
     }
-  }
-  }
-  
-  // Single card layout - background image full height and spacing
-  .com-card.single-card {
+
+    .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;
@@ -2239,6 +2252,7 @@ html.light {
         margin-bottom: 0;
       }
     }
+    }
   }
 }