Enhance payments and tokenization pages with developer resources and layout improvements

- Integrated DeveloperResourcesSection into both payments and tokenization pages to provide developers with essential resources and community links.
- Updated payment URLs for various stablecoins to direct users to relevant external resources.
- Improved layout and styling for the payments integration section, ensuring better responsiveness and user experience.
- Refactored CSS for shared developer tools styles between payments and tokenization pages, enhancing visual consistency.

styles/_pages.scss

@@ -1470,7 +1470,8 @@ html.light {
   }
 }
 
-.page-rwa-tokenization {
+.page-rwa-tokenization,
+.use-case-payments {
 
   .right-arrow-item::after {
     display: inline-block;
@@ -1764,10 +1765,11 @@ html.light {
     height: 100%;
   }
 
-.token-developer-tools-section {
+/* Developer tools styles - shared between tokenization and payments pages */
+.token-developer-tools-section,
+.payments-integration-section {
   .developer-tools {
     font-family: 'Work Sans', sans-serif;
-    padding: 180px 0;
     color: #fff;
   }
 
@@ -1814,7 +1816,6 @@ html.light {
     /* Moves the arrow 4px to the right on hover */
   }
 
-
   .feature-item__title {
     font-size: 16px;
     color: #e0e0e1;
@@ -1833,6 +1834,8 @@ html.light {
     background-color: #fff;
   }
 
+
+
   .developer-tools__image {
     width: 110%;
     height: 124%;
@@ -2019,83 +2022,79 @@ html.light {
   min-height: 96px;
 }
 
-// Developer Resources section responsive improvements
-.token-dev-resources-section {
-  .bottom-cards-section.bug-bounty {
+// Developer Resources Section - Clean, responsive styles with high specificity
+.developer-resources-section {
+  .bottom-cards-section.bug-bounty.section-padding {
     display: flex !important;
     flex-wrap: wrap !important;
-    gap: 40px !important;
-    justify-content: center !important;
-    max-width: 1280px;
-    margin: 100px auto;
-    padding: 0 40px;
+    gap: 32px;
+    max-width: 1200px;
+    margin: 80px auto;
+    padding: 0px;
+    justify-content: center;
     
-    @media (max-width: 1199px) {
-      gap: 32px;
-      margin: 80px auto;
-    }
-    
-    @media (max-width: 991px) {
-      gap: 24px;
-      padding: 0 20px;
-      margin: 60px auto;
+    @media (min-width: 768px) {
+      gap: 40px;
+      justify-content: space-between;
     }
     
     @media (max-width: 767px) {
       flex-direction: column;
-      align-items: center;
-      gap: 24px;
+      gap: 20px;
+      margin: 40px auto;
+      padding: 0px;
     }
     
+    // High specificity to override contribute styles
     .com-card {
-      flex: 1 1 calc(50% - 20px) !important;
-      min-width: 300px !important;
-      max-width: 600px !important;
-      width: auto !important;
-      height: auto !important;
-      max-height: none !important;
+      flex: 1 !important;
+      position: relative;
       margin: 0 !important;
       
-      @media (max-width: 1199px) {
-        flex: 1 1 100% !important;
-        max-width: 600px !important;
-      }
-      
-      @media (max-width: 991px) {
-        max-width: 500px !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;
       }
       
       @media (max-width: 767px) {
-        min-width: 100% !important;
+        width: 100% !important;
         max-width: 100% !important;
-        padding: 32px !important;
+        min-width: 100% !important;
+        margin-bottom: 0 !important;
+        flex: none !important;
       }
       
       .card-content {
-        height: 100%;
         display: flex;
         flex-direction: column;
+        height: 100%;
         
         .card-description {
           flex-grow: 1;
-          min-height: auto;
           margin-bottom: 24px;
+          
+          @media (max-width: 767px) {
+            margin-bottom: 20px;
+          }
         }
         
         .card-links {
           margin-top: auto;
-        }
-      }
-      
-      // Override background image positioning for responsive
-      .top-right-img,
-      .bottom-right-img {
-        @media (max-width: 991px) {
-          height: 250px;
-        }
-        
-        @media (max-width: 767px) {
-          height: 200px;
+          
+          @media (max-width: 767px) {
+            margin-top: 16px;
+            
+            .com-card-link {
+              display: block;
+              margin-bottom: 12px;
+              
+              &:last-child {
+                margin-bottom: 0;
+              }
+            }
+          }
         }
       }
     }
@@ -2154,3 +2153,17 @@ html.light {
   }
 }
 }
+// RWA Tokenization page specific styles for developer resources cards - Maximum Specificity
+// div.page-rwa-tokenization div.developer-resources-section.page-community section.bottom-cards-section.bug-bounty.section-padding {
+//   padding-left: 40px ;
+//   padding-right: 40px ;
+//   padding-top: 0 ;
+//   padding-bottom: 0 ;
+  
+//   @media (max-width: 767px) {
+//     padding-left: 26px ;
+//     padding-right: 26px ;
+//     padding-top: 0 ;
+//     padding-bottom: 0 ;
+//   }
+// }