Add research page

frontend/src/app/research/page.tsx

@@ -0,0 +1,46 @@
+import { RESEARCH_CRUMBS } from "src/constants/breadcrumbs";
+import ResearchIntro from "src/components/content/ResearchIntro";
+
+import Breadcrumbs from "src/components/Breadcrumbs";
+import PageSEO from "src/components/PageSEO";
+import BetaAlert from "src/components/AppBetaAlert";
+import ResearchArchetypes from "src/components/content/ResearchArchetypes";
+import ResearchImpact from "src/components/content/ResearchImpact";
+import ResearchMethodology from "src/components/content/ResearchMethodology";
+import ResearchThemes from "src/components/content/ResearchThemes";
+import { Metadata } from "next";
+import { useTranslations } from "next-intl";
+import { unstable_setRequestLocale } from "next-intl/server";
+
+export function generateMetadata() {
+  // TODO: Enable once [locale] folder created, see: https://next-intl-docs.vercel.app/docs/getting-started/app-router/with-i18n-routing
+  // const t = await getTranslations({ locale: "en" });
+  const meta: Metadata = {
+    // title: t("Research.page_title"),
+    title: "Research | Simpler.Grants.gov",
+    description:
+      "A one‑stop shop for all federal discretionary funding to make it easy for you to discover, understand, and apply for opportunities.",
+  };
+
+  return meta;
+}
+export default function Research() {
+  // TODO: Remove when https://github.com/amannn/next-intl/issues/663 lands.
+  unstable_setRequestLocale("en");
+  const t = useTranslations("Research");
+
+  return (
+    <>
+      <PageSEO title={t("page_title")} description={t("meta_description")} />
+      <BetaAlert />
+      <Breadcrumbs breadcrumbList={RESEARCH_CRUMBS} />
+      <ResearchIntro />
+      <ResearchMethodology />
+      <div className="padding-top-4 bg-gray-5">
+        <ResearchArchetypes />
+        <ResearchThemes />
+      </div>
+      <ResearchImpact />
+    </>
+  );
+}

frontend/src/pages/content/ResearchArchetypes.tsx → frontend/src/components/content/ResearchArchetypes.tsx

@@ -1,15 +1,14 @@
-import { useTranslation } from "next-i18next";
 import Image from "next/image";
 import { Grid } from "@trussworks/react-uswds";
-
+import { useTranslations } from "next-intl";
 import ContentLayout from "src/components/ContentLayout";
-import embarrassed from "../../../public/img/noun-embarrassed.svg";
-import goal from "../../../public/img/noun-goal.svg";
-import hiring from "../../../public/img/noun-hiring.svg";
-import leadership from "../../../public/img/noun-leadership.svg";
+import embarrassed from "public/img/noun-embarrassed.svg";
+import goal from "public/img/noun-goal.svg";
+import hiring from "public/img/noun-hiring.svg";
+import leadership from "public/img/noun-leadership.svg";
 
 const ResearchArchetypes = () => {
-  const { t } = useTranslation("common", { keyPrefix: "Research" });
+  const t = useTranslations("Research");
 
   return (
     <ContentLayout

frontend/src/components/content/ResearchImpact.tsx

@@ -0,0 +1,80 @@
+import { ExternalRoutes } from "src/constants/routes";
+import { useMessages, useTranslations } from "next-intl";
+
+import { Grid } from "@trussworks/react-uswds";
+
+import ContentLayout from "src/components/ContentLayout";
+import { USWDSIcon } from "src/components/USWDSIcon";
+
+const ResearchImpact = () => {
+  const t = useTranslations("Research");
+
+  const email = ExternalRoutes.EMAIL_SIMPLERGRANTSGOV;
+
+  const messages = useMessages() as unknown as IntlMessages;
+  const keys = Object.keys(messages.Research.impact.boxes);
+
+  return (
+    <ContentLayout
+      title={t("impact.title")}
+      data-testid="research-impact-content"
+      titleSize="m"
+      bottomBorder="none"
+    >
+      <Grid>
+        <p className="usa-intro">{t("impact.paragraph_1")}</p>
+        <p className="usa-intro text-bold margin-top-4">
+          {t("impact.paragraph_2")}
+        </p>
+      </Grid>
+      <Grid row gap="lg" className="margin-top-2">
+        {keys.map((key) => {
+          const title = t(`impact.boxes.${key}.title`);
+          const content = t(`impact.boxes.${key}.content`);
+          return (
+            <Grid
+              className="margin-bottom-6"
+              key={title + "-key"}
+              tabletLg={{ col: 4 }}
+            >
+              <div className="border radius-md border-base-lighter padding-x-205">
+                <h3 className="tablet-lg:font-serif-lg">{title}</h3>
+                <p className="margin-top-0 font-sans-md line-height-sans-4 desktop-lg:line-height-sans-6">
+                  {content}
+                </p>
+              </div>
+            </Grid>
+          );
+        })}
+      </Grid>
+      <Grid tabletLg={{ col: 8 }}>
+        <h3 className="tablet-lg:font-sans-lg tablet-lg:margin-bottom-05">
+          {t("impact.title_2")}
+        </h3>
+        <p className="font-sans-md line-height-sans-4 desktop-lg:line-height-sans-6">
+          {t.rich("impact.paragraph_3", {
+            email: (chunks) => (
+              <a
+                href={`mailto:${email}`}
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                {chunks}
+              </a>
+            ),
+            strong: (chunks) => <strong>{chunks}</strong>,
+            newsletter: (chunks) => <a href={"/newsletter"}>{chunks}</a>,
+            arrowUpRightFromSquare: () => (
+              <USWDSIcon
+                className="usa-icon text-middle"
+                name="launch"
+              ></USWDSIcon>
+            ),
+          })}
+        </p>
+      </Grid>
+    </ContentLayout>
+  );
+};
+
+export default ResearchImpact;

frontend/src/pages/content/ResearchIntro.tsx → frontend/src/components/content/ResearchIntro.tsx

@@ -1,10 +1,10 @@
-import { useTranslation } from "next-i18next";
+import { useTranslations } from "next-intl";
 import { Grid } from "@trussworks/react-uswds";
 
 import ContentLayout from "src/components/ContentLayout";
 
 const ResearchIntro = () => {
-  const { t } = useTranslation("common", { keyPrefix: "Research" });
+  const t = useTranslations("Research");
 
   return (
     <ContentLayout

frontend/src/pages/content/ResearchMethodology.tsx → frontend/src/components/content/ResearchMethodology.tsx

@@ -1,11 +1,12 @@
-import { Trans, useTranslation } from "next-i18next";
+import { useTranslations } from "next-intl";
 import Link from "next/link";
-import { Button, Grid, Icon } from "@trussworks/react-uswds";
+import { Button, Grid } from "@trussworks/react-uswds";
+import { USWDSIcon } from "src/components/USWDSIcon";
 
 import ContentLayout from "src/components/ContentLayout";
 
 const ResearchMethodology = () => {
-  const { t } = useTranslation("common", { keyPrefix: "Research" });
+  const t = useTranslations("Research");
 
   return (
     <ContentLayout
@@ -16,41 +17,36 @@ const ResearchMethodology = () => {
     >
       <Grid tabletLg={{ col: 6 }}>
         <div className="margin-top-3">
-          <Trans
-            t={t}
-            i18nKey={"methodology.paragraph_1"}
-            components={{
-              p: (
-                <p className="font-sans-md line-height-sans-4 desktop-lg:line-height-sans-6" />
-              ),
-            }}
-          />
+          {t.rich("methodology.paragraph_1", {
+            p: (chunks) => (
+              <p className="font-sans-md line-height-sans-4 desktop-lg:line-height-sans-6">
+                {chunks}
+              </p>
+            ),
+          })}
         </div>
       </Grid>
       <Grid tabletLg={{ col: 6 }}>
         <h3 className="tablet-lg:font-sans-lg tablet-lg:margin-bottom-05">
           {t("methodology.title_2")}
         </h3>
-        <Trans
-          t={t}
-          i18nKey="methodology.paragraph_2"
-          components={{
-            ul: (
-              <ul className="usa-list margin-top-0 tablet-lg:margin-top-3 font-sans-md line-height-sans-4 margin-bottom-4" />
-            ),
-            li: <li />,
-          }}
-        />
+        {t.rich("methodology.paragraph_2", {
+          ul: (chunks) => (
+            <ul className="usa-list margin-top-0 tablet-lg:margin-top-3 font-sans-md line-height-sans-4 margin-bottom-4">
+              {chunks}
+            </ul>
+          ),
+          li: (chunks) => <li>{chunks}</li>,
+        })}
         <p className="font-sans-md line-height-sans-4 desktop-lg:line-height-sans-6">
           {t("methodology.title_3")}
         </p>
         <Link href="/newsletter" passHref>
           <Button className="margin-bottom-4" type="button" outline>
             <span className="margin-right-4">{t("methodology.cta")}</span>
-            <Icon.ArrowForward
-              className="text-middle margin-left-neg-3"
-              size={3}
-              aria-label="arror-forward"
+            <USWDSIcon
+              className="usa-icon usa-icon--size-3 text-middle margin-left-neg-3"
+              name="arrow_forward"
             />
           </Button>
         </Link>

frontend/src/pages/content/ResearchThemes.tsx → frontend/src/components/content/ResearchThemes.tsx

@@ -1,10 +1,10 @@
-import { useTranslation } from "next-i18next";
+import { useTranslations } from "next-intl";
 import { Grid } from "@trussworks/react-uswds";
 
 import ContentLayout from "src/components/ContentLayout";
 
 const ResearchThemes = () => {
-  const { t } = useTranslation("common", { keyPrefix: "Research" });
+  const t = useTranslations("Research");
 
   return (
     <ContentLayout

frontend/stories/components/ReaserchImpact.stories.tsx

@@ -1,5 +1,5 @@
 import { Meta } from "@storybook/react";
-import ResearchImpact from "src/pages/content/ResearchImpact";
+import ResearchImpact from "src/components/content/ResearchImpact";
 
 const meta: Meta<typeof ResearchImpact> = {
   title: "Components/Content/Research Impact Content",

frontend/stories/components/ReaserchIntro.stories.tsx

@@ -1,5 +1,5 @@
 import { Meta } from "@storybook/react";
-import ResearchIntro from "src/pages/content/ResearchIntro";
+import ResearchIntro from "src/components/content/ResearchIntro";
 
 const meta: Meta<typeof ResearchIntro> = {
   title: "Components/Content/Research Intro Content",