Fix multiple H1 tags and update section titles (#457)

* fix: replace h1 tags with h2 for section titles (e.g., JobLanding, Testimonials, Faqs sections) on home page * fix: update job card title tags from h1 and h3 to h2 in Jobcard and job-card components * fix: update job component title tag to h1, other to h2, and "Recommended for you" section title tags to h2 on job detail page
code100x · Oct 5, 2024 · a132042 · a132042
1 parent 904e395
commit a132042
Show file tree

Hide file tree

Showing 7 changed files with 13 additions and 13 deletions.
diff --git a/src/app/jobs/[id]/page.tsx b/src/app/jobs/[id]/page.tsx
@@ -47,7 +47,7 @@ const page = async ({ params }: { params: JobByIdSchemaType }) => {
         {/* job recommendations */}
         <aside className="col-span-1 rounded-md lg:col-span-2">
           <div className="sticky top-4">
-            <h1 className="text-xl font-semibold mb-4">Recommended for you</h1>
+            <h2 className="text-xl font-semibold mb-4">Recommended for you</h2>
             <main className="my-2 flex flex-col gap-4">
               {recommendedJobs &&
                 recommendedJobs.map((job, index) => {

diff --git a/src/components/Faqs.tsx b/src/components/Faqs.tsx
@@ -17,9 +17,9 @@ export default function Faqs() {
       className="w-full h-fit dark:bg-faq-dark md:px-16 px-5 flex flex-col items-center pt-10"
     >
       <div className="w-full h-fit flex flex-col items-center">
-        <h1 className="font-bold md:text-4xl text-3xl text-center">
+        <h2 className="font-bold md:text-4xl text-3xl text-center">
           Frequently Asked Questions
-        </h1>
+        </h2>
         <p className="md:text-sm text-xs py-2 font-semibold text-[#64748B] dark:text-[#94A3B8]">
           Quick answers to any questions you may have.
         </p>

diff --git a/src/components/Jobcard.tsx b/src/components/Jobcard.tsx
@@ -46,9 +46,9 @@ export default function JobCard({
           ) : null}
         </div>
         <div className="flex flex-col gap-2">
-          <h1 className="font-bold text-black dark:text-white text-xl">
+          <h2 className="font-bold text-black dark:text-white text-xl">
             {job.title}
-          </h1>
+          </h2>
           <div className="flex">
             <p>{job.companyName + '.'} </p>
             <p className="ml-2">{'Posted on ' + job.postedAt.toDateString()}</p>

diff --git a/src/components/Testimonials.tsx b/src/components/Testimonials.tsx
@@ -16,7 +16,7 @@ export default function Testimonials() {
   return (
     <div className="flex justify-center items-center min-h-fit max-w-[100vw] overflow-hidden flex-col">
       <div className="w-full h-fit flex flex-col items-center">
-        <h1 className="font-bold text-2xl md:text-4xl">Testimonials</h1>
+        <h2 className="font-bold text-2xl md:text-4xl">Testimonials</h2>
         <p className="text-sm md:text-base py-2 font-semibold text-[#64748B] dark:text-[#94A3B8]">
           Real Success Stories from Job Seekers and Employers
         </p>

diff --git a/src/components/job-card.tsx b/src/components/job-card.tsx
@@ -23,7 +23,7 @@ export default function JobCard({ job }: { job: JobType }) {
             )}
           </div>
           <div className="flex flex-col gap-2">
-            <h3 className="font-bold">{job.title}</h3>
+            <h2 className="font-bold">{job.title}</h2>
             <div className="text-xs flex gap-1 font-medium items-center text-gray-500">
               <span>{job.companyName}</span>•
               <span>{'Posted on ' + job.postedAt.toDateString()}</span>

diff --git a/src/components/job-landing.tsx b/src/components/job-landing.tsx
@@ -20,7 +20,7 @@ export const JobLanding = () => {
       className="w-full h-fit md:px-16 px-5 flex flex-col items-center pt-6 md:pt-20 dark:bg-grad-dark bg-grad-light"
     >
       <div className="w-full h-fit flex flex-col items-center">
-        <h1 className="font-bold md:text-4xl text-3xl">Recently Added jobs</h1>
+        <h2 className="font-bold md:text-4xl text-3xl">Recently Added jobs</h2>
         <p className="md:text-sm text-xs py-2 font-semibold text-[#64748B] dark:text-[#94A3B8]">
           Stay ahead with newly added jobs
         </p>

diff --git a/src/components/job.tsx b/src/components/job.tsx
@@ -43,7 +43,7 @@ export const Job = ({ job }: { job: JobType }) => {
             ) : null}
           </div>
           <div className="flex flex-col gap-2">
-            <h3 className="font-bold text-2xl">{job.title}</h3>
+            <h1 className="font-bold text-2xl">{job.title}</h1>
             <div className="text-xs flex gap-1 font-medium items-center text-gray-500">
               <span>{job.companyName}</span>•
               <span>{'Posted on ' + job.postedAt.toDateString()}</span>
@@ -102,9 +102,9 @@ export const Job = ({ job }: { job: JobType }) => {
 
       {/* job description */}
       <section className="border-2 bg-[#F1F5F9] dark:bg-[#0F172A] h-auto max-h-[20rem] overflow-y-auto p-6 rounded-xl">
-        <h1 className="font-extrabold px-4 py-1 w-fit text-white bg-blue-500/20 rounded-lg text-xl ">
+        <h2 className="font-extrabold px-4 py-1 w-fit text-white bg-blue-500/20 rounded-lg text-xl ">
           Job Description
-        </h1>
+        </h2>
         <Linkify options={options}>
           <div
             className="my-4 text-neutral-100"
@@ -115,9 +115,9 @@ export const Job = ({ job }: { job: JobType }) => {
 
       {/* about company */}
       <section className="border-2 bg-[#F1F5F9] dark:bg-[#0F172A] h-auto max-h-[15rem] overflow-y-auto p-6 rounded-xl">
-        <h1 className="font-extrabold px-4 py-1 w-fit text-white bg-blue-500/20 rounded-lg text-xl ">
+        <h2 className="font-extrabold px-4 py-1 w-fit text-white bg-blue-500/20 rounded-lg text-xl ">
           About {job.companyName}
-        </h1>
+        </h2>
         <div
           dangerouslySetInnerHTML={{ __html: job.companyBio ?? '' }}
           className="my-4 text-neutral-200"