feat: add general info and outro

src/app/(public)/recruiters-info/page.tsx

@@ -38,21 +38,32 @@ const RecruitersPage = async () => {
   return (
     <main className='min-h-main'>
       <section>
-        <div className='layout relative flex flex-col py-12'>
+        <div className='layout relative flex flex-col py-12 recruiters-info'>
           <Heading title='recruiters.title' />
 
+          <div className='intro mb-2' aria-label='Introduction'>
+            <ReactMarkdown>{recruitersPage.intro}</ReactMarkdown>
+          </div>
+
           <div
             className='salary-expectations mb-2'
             aria-label='Salary Expectations'
           >
-            <h2 className='mb-2'>{recruitersPage.salary.title}</h2>
+            <h2 className='my-4'>{recruitersPage.salary.title}</h2>
             <ReactMarkdown>{recruitersPage.salary.content}</ReactMarkdown>
 
             <SalaryHappinessTool salaryData={salaryData} config={config} />
           </div>
 
           <hr />
 
+          <div className='general-info mb-2' aria-label='General Info'>
+            <h2 className='my-4'>{recruitersPage.generalInfo.title}</h2>
+            <ReactMarkdown>{recruitersPage.generalInfo.content}</ReactMarkdown>
+          </div>
+
+          <hr />
+
           <div className='tools-techs mb-8'>
             <h2 className='my-4'>{recruitersPage.toolsTechs.title}</h2>
             <ReactMarkdown>{recruitersPage.toolsTechs.content}</ReactMarkdown>
@@ -73,6 +84,12 @@ const RecruitersPage = async () => {
             <h2 className='my-4'>{recruitersPage.tldr.title}</h2>
             <ReactMarkdown>{recruitersPage.tldr.content}</ReactMarkdown>
           </div>
+
+          <hr />
+
+          <div className='outro mt-8'>
+            <ReactMarkdown>{recruitersPage.outro}</ReactMarkdown>
+          </div>
         </div>
       </section>
     </main>

src/components/molecules/RecruiterInfo/recruiterInfo.css

@@ -1,25 +1,35 @@
+.recruiters-info ul {
+  margin-bottom: 16px;
+  list-style: inside;
+}
+
+.recruiters-info li {
+  margin-left: 22px;
+  margin-bottom: 5px;
+}
+
 .salary-expectations p {
   margin-bottom: 12px;
 }
 
-.tools-techs h4 {
+.tools-techs h4,
+.general-info h4 {
   margin-bottom: 8px;
 }
 
 .tools-techs p {
   margin-top: 20px;
 }
 
-ul {
-  margin-bottom: 16px;
-  list-style: inside;
+.tldr p {
+  margin-bottom: 12px;
 }
 
-li {
-  margin-left: 22px;
-  margin-bottom: 5px;
+.job-preferences p {
+  margin: 12px 0;
 }
 
-.tldr p {
+.job-preferences h3 {
+  margin-top: 24px;
   margin-bottom: 12px;
 }

src/queries/recruiters-page.ts

@@ -18,6 +18,11 @@ export const recruitersPageQuery = gql`
       data {
         id
         attributes {
+          intro
+          generalInfo {
+            title
+            content
+          }
           salary {
             title
             content
@@ -34,6 +39,7 @@ export const recruitersPageQuery = gql`
             title
             content
           }
+          outro
         }
       }
     }

src/types/RecruitersPage.ts

@@ -1,8 +1,11 @@
 export interface RecruitersPage {
+  intro: string;
   salary: TitledParagraph;
+  generalInfo: TitledParagraph;
   toolsTechs: TitledParagraph;
   jobPreferences: TitledParagraph;
   tldr: TitledParagraph;
+  outro: string;
 }
 
 interface TitledParagraph {