[Issue 719] Add research intro component (#793)

* Add research intro component

* Update common.json for 404 content

frontend/public/locales/en/common.json

@@ -33,7 +33,9 @@
     "page_title": "Research | Simpler Grants.gov",
     "meta_description": "A one‑stop shop for all federal discretionary funding to make it easy for you to discover, understand, and apply for opportunities.",
     "alert_title": "Simpler Grants.gov is a work in progress.",
-    "alert": "To search for funding opportunities and apply, go to <LinkToGrants>www.grants.gov</LinkToGrants>."
+    "alert": "To search for funding opportunities and apply, go to <LinkToGrants>www.grants.gov</LinkToGrants>.",
+    "intro_title": "Our existing research",
+    "intro_content": "We conducted extensive research in 2023 to gather insights from applicants, potential applicants, and grantmakers. We’re using these findings to guide our work. And your ongoing feedback will inform and inspire new features as we build a simpler Grants gov together."
   },
   "Process": {
     "page_title": "Process | Simpler Grants.gov",
@@ -51,8 +53,8 @@
   },
   "ErrorPages": {
     "page_not_found": {
-      "title": "Ooops! Page Not Found",
-      "message_content_1": "The page you have requested cannot be displayed because it does not exist, has been moved, or the server has been instrcuted not to let you view it. There is nothing to see here.",
+      "title": "Oops! Page Not Found",
+      "message_content_1": "The page you have requested cannot be displayed because it does not exist, has been moved, or the server has been instructed not to let you view it. There is nothing to see here.",
       "visit_homepage_button": "Return Home"
     }
   },

frontend/src/components/ResearchIntro.tsx

@@ -0,0 +1,27 @@
+import { useTranslation } from "next-i18next";
+import { Grid, GridContainer } from "@trussworks/react-uswds";
+
+const ResearchIntro = () => {
+  const { t } = useTranslation("common", { keyPrefix: "Research" });
+
+  return (
+    <GridContainer className="padding-bottom-5 tablet:padding-top-0 desktop-lg:padding-top-0 border-bottom-2px border-base-lightest">
+      <h1 className="margin-0 tablet-lg:font-sans-xl desktop-lg:font-sans-2xl">
+        {t("intro_title")}
+      </h1>
+      <Grid row gap>
+        <Grid
+          tabletLg={{ col: 12 }}
+          desktop={{ col: 12 }}
+          desktopLg={{ col: 12 }}
+        >
+          <p className="tablet-lg:font-sans-xl line-height-sans-3 usa-intro margin-top-2">
+            {t("intro_content")}
+          </p>
+        </Grid>
+      </Grid>
+    </GridContainer>
+  );
+};
+
+export default ResearchIntro;

frontend/src/pages/research.tsx

@@ -7,6 +7,7 @@ import { serverSideTranslations } from "next-i18next/serverSideTranslations";
 
 import Breadcrumbs from "src/components/Breadcrumbs";
 import PageSEO from "src/components/PageSEO";
+import ResearchIntro from "src/components/ResearchIntro";
 import FullWidthAlert from "../components/FullWidthAlert";
 
 const Research: NextPage = () => {
@@ -31,7 +32,7 @@ const Research: NextPage = () => {
         />
       </FullWidthAlert>
       <Breadcrumbs breadcrumbList={RESEARCH_CRUMBS} />
-      Research Placeholder
+      <ResearchIntro />
     </>
   );
 };

frontend/tests/components/ResearchIntro.test.tsx

@@ -0,0 +1,15 @@
+import { render, screen } from "@testing-library/react";
+
+import ResearchIntro from "src/components/ResearchIntro";
+
+describe("Research Content", () => {
+  it("Renders without errors", () => {
+    render(<ResearchIntro />);
+    const ProcessH1 = screen.getByRole("heading", {
+      level: 1,
+      name: /Our existing research/i,
+    });
+
+    expect(ProcessH1).toBeInTheDocument();
+  });
+});