feat: add Salary and Tools sections to RecruiterInfo page

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

@@ -0,0 +1,68 @@
+import ReactMarkdown from 'react-markdown';
+
+import '@/components/molecules/RecruiterInfo/recruiterInfo.css';
+
+import Heading from '@/components/atoms/headings/Heading';
+import { SalaryHappinessTool } from '@/components/molecules/RecruiterInfo/SalaryHappinessTool';
+
+import { queryRecruitersPage } from '@/queries/recruiters-page';
+
+export const metadata = {
+  title: 'Recruiters Info | MartaCodes.it',
+  description: 'Information for Recruiters',
+};
+
+const queryData = async () => {
+  const recruitersPage = await queryRecruitersPage();
+
+  return {
+    recruitersPage,
+  };
+};
+
+const RecruitersPage = async () => {
+  const { recruitersPage } = await queryData();
+
+  const salaryData = {
+    min: 70000,
+    median: 85000,
+    max: 120000,
+  };
+
+  const config = {
+    displayTitle: true,
+    currency: 'EUR',
+    forexMultiplier: 1,
+  };
+
+  return (
+    <main className='min-h-main'>
+      <section>
+        <div className='layout relative flex flex-col py-12'>
+          <Heading title='recruiters.title' />
+
+          <div
+            className='salary-expectations mb-2'
+            aria-label='Salary Expectations'
+          >
+            <h2 className='mb-2'>{recruitersPage.salary.title}</h2>
+            <ReactMarkdown>{recruitersPage.salary.content}</ReactMarkdown>
+
+            <SalaryHappinessTool salaryData={salaryData} config={config} />
+          </div>
+
+          <hr />
+
+          <div className='tools-techs mb-8'>
+            <h2 className='my-4'>{recruitersPage.toolsTechs.title}</h2>
+            <ReactMarkdown>{recruitersPage.toolsTechs.content}</ReactMarkdown>
+          </div>
+
+          <hr />
+        </div>
+      </section>
+    </main>
+  );
+};
+
+export default RecruitersPage;

src/components/molecules/RecruiterInfo/SalaryHappinessTool.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import { Box, Slider } from '@mui/material';
 import * as React from 'react';
 import { useEffect, useState } from 'react';
@@ -26,10 +28,10 @@ const SalaryHappinessTool = ({ salaryData, config }: SalaryHappinessProps) => {
   const minVisible = roundNum(medianInCurrency * 0.5);
   const minSad = roundNum(medianInCurrency * 0.6);
   const stillSad = roundNum(medianInCurrency * 0.7);
-  const minAcceptable = roundNum(medianInCurrency * 0.8);
+  const minAcceptable = roundNum(medianInCurrency * 0.9);
   const veryHappy = roundNum(medianInCurrency * 1.2);
   const overTheMoon = roundNum(medianInCurrency * 1.3);
-  const maxVisible = roundNum(medianInCurrency * 1.5);
+  const maxVisible = roundNum(medianInCurrency * 1.4);
 
   const [selectedSalary, setSelectedSalary] = useState(minAcceptable);
   const [happinessScore, setHappinessScore] = useState({
@@ -72,8 +74,8 @@ const SalaryHappinessTool = ({ salaryData, config }: SalaryHappinessProps) => {
   }, [selectedSalary]);
 
   return (
-    <Box width={300} className='m-2 '>
-      {config.displayTitle && <h3>Salary Happiness Tool</h3>}
+    <Box width={340} className='p-4'>
+      {config.displayTitle && <h3>Salary &rArr; Happiness Tool</h3>}
 
       <Slider
         className='mt-2'

src/components/molecules/RecruiterInfo/recruiterInfo.css

@@ -0,0 +1,21 @@
+.salary-expectations p {
+  margin-bottom: 12px;
+}
+
+.tools-techs h4 {
+  margin-bottom: 8px;
+}
+
+.tools-techs p {
+  margin-top: 20px;
+}
+
+ul {
+  margin-bottom: 16px;
+  list-style: inside;
+}
+
+li {
+  margin-left: 22px;
+  margin-bottom: 5px;
+}

src/data/locales/en.json

@@ -95,5 +95,8 @@
   },
   "uses": {
     "title": "Uses"
+  },
+  "recruiters": {
+    "title": "Info for Recruiters"
   }
 }

src/queries/recruiters-page.ts

@@ -0,0 +1,41 @@
+import { gql } from '@apollo/client';
+
+import { flattenToObject } from '@/lib/graphqlUtils';
+
+import apolloClient from '../../apollo/apollo-client';
+
+import { RecruitersPage } from '@/types/RecruitersPage';
+
+export async function queryRecruitersPage() {
+  const { data } = await apolloClient.query({ query: recruitersPageQuery });
+
+  return flattenToObject<RecruitersPage>(data.recruitersPage);
+}
+
+export const recruitersPageQuery = gql`
+  {
+    recruitersPage {
+      data {
+        id
+        attributes {
+          salary {
+            title
+            content
+          }
+          toolsTechs {
+            title
+            content
+          }
+          jobPreferences {
+            title
+            content
+          }
+          tldr {
+            title
+            content
+          }
+        }
+      }
+    }
+  }
+`;

src/types/RecruitersPage.ts

@@ -0,0 +1,11 @@
+export interface RecruitersPage {
+  salary: TitledParagraph;
+  toolsTechs: TitledParagraph;
+  jobPreferences: TitledParagraph;
+  tldr: TitledParagraph;
+}
+
+interface TitledParagraph {
+  title: string;
+  content: string;
+}