style: update recent posts layout to 4 columns matching product categories and fix payload cms text typography styling

components/PayloadRichText.tsx

@@ -123,11 +123,87 @@ const jsxConverters: JSXConverters = {
     return <span key="text">{text}</span>;
   },
   // Use div instead of p for paragraphs to allow nested block elements (like the lists above)
-  paragraph: ({ children }: any) => <div className="mb-4 leading-relaxed">{children}</div>,
-  // Scale headings to prevent multiple H1s (H1 -> H2, etc)
-  h1: ({ children }: any) => <h2 className="text-3xl md:text-4xl font-bold my-6">{children}</h2>,
-  h2: ({ children }: any) => <h3 className="text-2xl md:text-3xl font-bold my-5">{children}</h3>,
-  h3: ({ children }: any) => <h4 className="text-xl md:text-2xl font-bold my-4">{children}</h4>,
+  paragraph: ({ children }: any) => (
+    <div className="mb-6 leading-relaxed text-text-secondary">{children}</div>
+  ),
+  // Scale headings to prevent multiple H1s (H1 -> H2, etc) and style natively
+  heading: ({ node, children }: any) => {
+    const tag = node?.tag;
+    if (tag === 'h1')
+      return (
+        <h2 className="text-3xl md:text-4xl font-bold mt-12 mb-6 text-text-primary">{children}</h2>
+      );
+    if (tag === 'h2')
+      return (
+        <h3 className="text-2xl md:text-3xl font-bold mt-10 mb-5 text-text-primary">{children}</h3>
+      );
+    if (tag === 'h3')
+      return (
+        <h4 className="text-xl md:text-2xl font-bold mt-8 mb-4 text-text-primary">{children}</h4>
+      );
+    if (tag === 'h4')
+      return (
+        <h5 className="text-lg md:text-xl font-bold mt-6 mb-4 text-text-primary">{children}</h5>
+      );
+    if (tag === 'h5')
+      return (
+        <h6 className="text-base md:text-lg font-bold mt-6 mb-4 text-text-primary">{children}</h6>
+      );
+    return <h6 className="text-base font-bold mt-6 mb-4 text-text-primary">{children}</h6>;
+  },
+  list: ({ node, children }: any) => {
+    if (node?.listType === 'number') {
+      return (
+        <ol className="list-decimal pl-6 my-6 space-y-2 text-text-secondary marker:text-primary marker:font-bold">
+          {children}
+        </ol>
+      );
+    }
+    if (node?.listType === 'check') {
+      return <ul className="list-none pl-0 my-6 space-y-2 text-text-secondary">{children}</ul>;
+    }
+    return (
+      <ul className="list-disc pl-6 my-6 space-y-2 text-text-secondary marker:text-primary">
+        {children}
+      </ul>
+    );
+  },
+  listitem: ({ node, children }: any) => {
+    if (node?.checked != null) {
+      return (
+        <li className="flex items-center gap-3 mb-2 leading-relaxed">
+          <input
+            type="checkbox"
+            checked={node.checked}
+            readOnly
+            className="mt-1 w-4 h-4 text-primary focus:ring-primary border-gray-300 rounded"
+          />
+          <span>{children}</span>
+        </li>
+      );
+    }
+    return <li className="mb-2 leading-relaxed">{children}</li>;
+  },
+  quote: ({ children }: any) => (
+    <blockquote className="border-l-4 border-primary bg-primary/5 rounded-r-2xl pl-6 py-4 my-8 italic text-text-secondary shadow-sm">
+      {children}
+    </blockquote>
+  ),
+  link: ({ node, children }: any) => {
+    // Handling Payload CMS link nodes
+    const href = node?.fields?.url || node?.url || '#';
+    const newTab = node?.fields?.newTab || node?.newTab;
+    return (
+      <a
+        href={href}
+        target={newTab ? '_blank' : undefined}
+        rel={newTab ? 'noopener noreferrer' : undefined}
+        className="text-primary no-underline hover:underline font-medium transition-colors"
+      >
+        {children}
+      </a>
+    );
+  },
 
   blocks: {
     // ... preserved existing blocks ...