updates

Author: OchiengPaul442

website2/src/app/clean-air-forum/sponsorships/page.tsx

@@ -54,7 +54,6 @@ const SponsorshipPage = () => {
       {/* Additional Section Data for Sponsorship Page */}
       {sponsorshipSections && sponsorshipSections.length > 0 && (
         <>
-          <Divider className="bg-black p-0 m-0 h-[1px] w-full" />
           {sponsorshipSections.map((section: any) => (
             <SectionDisplay key={section.id} section={section} />
           ))}

website2/src/views/Forum/SectionDisplay.tsx

@@ -2,6 +2,7 @@
 import DOMPurify from 'dompurify';
 import React from 'react';
 
+import Divider from '@/components/ui/Divider';
 import { renderContent } from '@/utils/quillUtils';
 
 export interface SectionData {
@@ -35,23 +36,26 @@ const SectionDisplay: React.FC<{ section: SectionData }> = ({ section }) => {
 
   if (section.section_type === 'split') {
     return (
-      <div className="flex flex-col md:flex-row gap-4 my-8">
-        {/* 
-            For split sections, we use conditional order classes.
-            - If reverse_order is false: title is first (left) and content second (right).
-            - If reverse_order is true: content is first (left) and title second (right).
-         */}
-        <div
-          className={`w-full md:w-1/2 ${section.reverse_order ? 'order-2' : 'order-1'}`}
-        >
-          <h2 className="text-2xl font-bold">{section.title}</h2>
-        </div>
-        <div
-          className={`w-full md:w-1/2 ${section.reverse_order ? 'order-1' : 'order-2'}`}
-        >
-          <div dangerouslySetInnerHTML={{ __html: contentHTML }} />
+      <>
+        <Divider className="bg-black p-0 m-0 h-[1px] w-full" />
+        <div className="flex flex-col md:flex-row gap-4 my-8">
+          {/* 
+              For split sections, we use conditional order classes.
+              - If reverse_order is false: title is first (left) and content second (right).
+              - If reverse_order is true: content is first (left) and title second (right).
+           */}
+          <div
+            className={`w-full md:w-1/3 ${section.reverse_order ? 'order-2' : 'order-1'}`}
+          >
+            <h2 className="text-xl font-bold">{section.title}</h2>
+          </div>
+          <div
+            className={`w-full md:w-2/3 text-left space-y-4 ${section.reverse_order ? 'order-1' : 'order-2'}`}
+          >
+            <div dangerouslySetInnerHTML={{ __html: contentHTML }} />
+          </div>
         </div>
-      </div>
+      </>
     );
   } else {
     // For "column" type, render the title above the content with a small gap.