fix: improve styling in pro-help page

Author: Thund3rHawk

package.json

@@ -46,6 +46,7 @@
     "node-ical": "0.20.1",
     "react": "18.3.1",
     "react-dom": "18.3.1",
+    "react-markdown": "^9.0.3",
     "react-syntax-highlighter": "^15.6.1",
     "react-text-truncate": "^0.19.0",
     "reading-time": "^1.5.0",

pages/pro-help/index.page.tsx

@@ -5,6 +5,7 @@ import Head from 'next/head';
 import { Headline1 } from '~/components/Headlines';
 import { SectionContext } from '~/context';
 import { DocsHelp } from '~/components/DocsHelp';
+import ReactMarkdown from 'react-markdown';
 
 interface ContractorLink {
   title: string;
@@ -93,7 +94,7 @@ export default function ProHelp({ contractorData }: ProHelpPageProps) {
           <div className='w-full lg:w-full my-[10px] mx-auto mt-8 mb-8'>
             {contractorData.map((contractor) => (
               <div
-                className='border border-solid border-gray-300 px-5 py-3'
+                className='border border-solid border-gray-300 px-5 py-3 my-4'
                 key={contractor.github}
               >
                 <h1 className='text-xl mb-3 font-semibold'>
@@ -176,7 +177,7 @@ export default function ProHelp({ contractorData }: ProHelpPageProps) {
                   <div className='me-4 max-sm:flex max-sm:flex-col max-sm:items-center max-sm:gap-2'>
                     <img
                       src={`https://github.com/${contractor.github}.png`}
-                      className='border border-gray-400 max-sm:w-44'
+                      className='border border-gray-400 max-sm:w-44 w-44'
                     />
                     <a
                       href={`mailto:${contractor.email}`}
@@ -185,8 +186,10 @@ export default function ProHelp({ contractorData }: ProHelpPageProps) {
                       Reach out
                     </a>
                   </div>
-                  <div className='text-sm'>
-                    <p>{contractor.bio}</p>
+                  <div className='text-sm w-full'>
+                    <ReactMarkdown className='text-justify'>
+                      {contractor.bio}
+                    </ReactMarkdown>
                     <p className='my-3 font-bold'>
                       Previous work and relevant links
                     </p>
@@ -214,4 +217,4 @@ export default function ProHelp({ contractorData }: ProHelpPageProps) {
   );
 }
 
-ProHelp.getLayout = getLayout;
+ProHelp.getLayout = getLayout;