Change headline #185

* Change headline

* Adjust content and alignment

* Fix bug on summary

apps/web/src/app/report/[id]/full-report.tsx

@@ -89,11 +89,6 @@ export const FullReport = ({
 
   return (
     <>
-      <h2 className="mx-auto my-16 max-w-xl text-center text-4xl font-extrabold md:text-7xl">
-        Here is your
-        <br />
-        breakdown
-      </h2>
       <div className="mb-10">
         {report?.docsScore ? (
           <ScoreDetailsSection

apps/web/src/app/report/[id]/report-summary.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import getScoreHeadline from "@/utils/get-score-headline";
 import getScoreTextColor from "@/utils/get-score-test-color";
 import { useState } from "react";
 
@@ -16,23 +17,33 @@ const ReportSummary = ({
 }: ReportSummaryProps) => {
   const [isExpanded, setIsExpanded] = useState(false);
   const scoreTextColor = getScoreTextColor(score);
+  const scoreHeadline = getScoreHeadline(score);
   return (
-    <div className="my-10 flex flex-col	overflow-hidden rounded-lg bg-white p-8 shadow-md md:p-10">
-      <h3
-        className={`mb-6 font-roboto-mono text-xl font-bold uppercase ${scoreTextColor}`}
-      >
-        Summary
-      </h3>
-      <p className="whitespace-pre-wrap text-base">
-        {isExpanded ? longSummary : shortSummary}
-      </p>
-      <button
-        className="button-transparent mt-4"
-        onClick={() => setIsExpanded(!isExpanded)}
-      >
-        {isExpanded ? "Hide advice" : "Show advice"}
-      </button>
-    </div>
+    <>
+      <h2 className="mx-auto my-16 max-w-xl text-center text-4xl font-extrabold md:text-7xl">
+        {scoreHeadline.headline}
+        <div className="mt-2 text-xl font-bold text-gray-500">
+          {scoreHeadline.sub}
+        </div>
+      </h2>
+      <div className="my-10 flex flex-col	overflow-hidden rounded-lg bg-white p-8 shadow-md md:p-10">
+        <h3
+          className={`mb-6 font-roboto-mono text-xl font-bold uppercase ${scoreTextColor}`}
+        >
+          Summary
+        </h3>
+        <p className="whitespace-pre-wrap text-base">{shortSummary}</p>
+        {isExpanded ? (
+          <p className="whitespace-pre-wrap text-base">{longSummary}</p>
+        ) : null}
+        <button
+          className="button-transparent mt-4"
+          onClick={() => setIsExpanded(!isExpanded)}
+        >
+          {isExpanded ? "Hide advice" : "Show advice"}
+        </button>
+      </div>
+    </>
   );
 };
 

apps/web/src/utils/get-score-headline.ts

@@ -0,0 +1,29 @@
+const getScoreHeadline = (score: number) => {
+  if (score > 80) {
+    return {
+      headline: "You deserve a round of API-lause!",
+      sub: "But don't REST on your laurels",
+    };
+  }
+
+  if (score > 60) {
+    return {
+      headline: "You're on the right track",
+      sub: "Here's some tips to make your endpoints more API-ling",
+    };
+  }
+
+  if (score > 40) {
+    return {
+      headline: "We API-reciate the effort",
+      sub: "But you're not quite there yet",
+    };
+  }
+
+  return {
+    headline: "You have some work to do",
+    sub: "REST assured, we can help!",
+  };
+};
+
+export default getScoreHeadline;