Refactor tokenization page layout and enhance styling

- Updated the structure of the tokenization page to improve readability and organization.
- Introduced new sections for video content and benefits, enhancing user engagement.
- Adjusted CSS styles for better responsiveness and alignment with design standards.
- Added a new margin utility class in _helpers.scss for consistent spacing.
- Improved the developer resources section to handle single card layouts more effectively.

shared/components/developer-resources-section.tsx

@@ -24,14 +24,15 @@ 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 ${isSingleCard ? 'single-card' : ''}`}>
             <img
-              className={`${index === 0 ? 'top-right-img' : 'bottom-right-img'} bug-bounty-card-bg${index === 0 ? '' : '-2'} ${card.backgroundClass || ''}`}
+              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 className="card-content custom-gap">