changing font color and adding small descriptive text

src/App.tsx

@@ -20,11 +20,23 @@ function App(): JSX.Element {
   };
 
   return (
-    <div className="grid h-screen grid-cols-1 grid-rows-header">
+    <div className="grid h-screen grid-cols-1 grid-rows-header text-gray-500">
       <Header />
 
       <div className="App flex flex-col self-center items-center justify-items-center">
-        {!submitted && <SalaryCheckForm onSubmit={onSubmit} />}
+        {!submitted && (
+          <>
+            <div className="mb-8 px-4">
+              <p>
+                Sometimes you need a reality check when it comes to your
+                earnings.
+              </p>
+              <p>Spoiler alert: You&apos;ll be fine</p>
+            </div>
+
+            <SalaryCheckForm onSubmit={onSubmit} />
+          </>
+        )}
         {submitted && jobInfo && <SalaryResults jobInfo={jobInfo} />}
         {submitted && <Button text="Reset" onClick={reset} />}
       </div>

src/components/salary results/SalaryResults.tsx

@@ -13,7 +13,7 @@ export default function SalaryResults({ jobInfo }: ResultProps): JSX.Element {
   const salaryData =
     jobInfo.type === 'FullTime' ? ukJobData.fullTime[0] : ukJobData.partTime[0];
   return (
-    <div className="flex flex-col items-center text-xl md:text-4xl p-5 gap-y-2 text-gray-600">
+    <div className="flex flex-col items-center text-xl md:text-4xl p-5 gap-y-2">
       <MedianText
         salary={jobInfo.salary}
         medianSalary={salaryData.medianSalary}

tailwind.config.js

@@ -16,7 +16,7 @@ module.exports = {
         '1/6': '16.66%',
       },
       gridTemplateRows: {
-        header: '15% auto 50px',
+        header: '12% auto 50px',
       },
       fontFamily: {
         sans: ['Raleway', ...defaultTheme.fontFamily.sans],