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.

shared/components/developer-resources-section.tsx

@@ -0,0 +1,60 @@
+import React from "react";
+import { useThemeHooks } from "@redocly/theme/core/hooks";
+import { Link } from "@redocly/theme/components/Link/Link";
+
+export interface DeveloperResourcesCard {
+  title: string;
+  description: string | React.ReactNode;
+  links: Array<{
+    text: string;
+    url: string;
+    target?: "_blank" | "_self";
+  }>;
+  backgroundClass?: string;
+}
+
+export interface DeveloperResourcesSectionProps {
+  cards: DeveloperResourcesCard[];
+  className?: string;
+}
+
+export const DeveloperResourcesSection: React.FC<DeveloperResourcesSectionProps> = ({
+  cards,
+  className = ""
+}) => {
+  const { useTranslate } = useThemeHooks();
+  const { translate } = useTranslate();
+
+  return (
+    <div className={`developer-resources-section page-community ${className}`}>
+      <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 className="card-content custom-gap">
+              <h6 className="card-title">{translate(card.title)}</h6>
+              <p className="card-description">
+                {typeof card.description === 'string' ? translate(card.description) : card.description}
+              </p>
+              <div className="card-links">
+                {card.links.map((link, linkIndex) => (
+                  <Link
+                    key={linkIndex}
+                    className={`com-card-link ${linkIndex === 0 ? 'mt-16' : ''}`}
+                    target={link.target || "_blank"}
+                    to={link.url}
+                  >
+                    {translate(link.text)}
+                  </Link>
+                ))}
+              </div>
+            </div>
+          </div>
+        ))}
+      </section>
+    </div>
+  );
+};