Move home page to app router

frontend/src/app/[locale]/page.tsx

@@ -0,0 +1,31 @@
+import BetaAlert from "src/components/BetaAlert";
+import PageSEO from "src/components/PageSEO";
+import Hero from "src/components/Hero";
+import IndexGoalContent from "src/components/content/IndexGoalContent";
+import ProcessAndResearchContent from "src/components/content/ProcessAndResearchContent";
+import { Metadata } from "next";
+import { useTranslations } from "next-intl";
+import { getTranslations } from "next-intl/server";
+
+export async function generateMetadata() {
+  const t = await getTranslations({ locale: "en" });
+  const meta: Metadata = {
+    title: t("Index.page_title"),
+    description: t("Index.meta_description"),
+  };
+  return meta;
+}
+
+export default function Home() {
+  const t = useTranslations("Index");
+
+  return (
+    <>
+      <PageSEO title={t("page_title")} description={t("meta_description")} />
+      <Hero />
+      <BetaAlert />
+      <IndexGoalContent />
+      <ProcessAndResearchContent />
+    </>
+  );
+}

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

@@ -1,11 +1,12 @@
-import { useTranslation } from "next-i18next";
-import Link from "next/link";
-import { Button, Grid, Icon } from "@trussworks/react-uswds";
+import { useTranslations } from "next-intl";
 
+import Link from "next/link";
+import { Button, Grid } from "@trussworks/react-uswds";
+import { USWDSIcon } from "../USWDSIcon";
 import ContentLayout from "src/components/ContentLayout";
 
 const IndexGoalContent = () => {
-  const { t } = useTranslation("common", { keyPrefix: "Index" });
+  const t = useTranslations("Index");
 
   return (
     <ContentLayout
@@ -18,9 +19,9 @@ const IndexGoalContent = () => {
         <Link href="/newsletter" passHref>
           <Button className="margin-bottom-4" type="button" size="big">
             <span className="margin-right-5">{t("goal.cta")}</span>
-            <Icon.ArrowForward
-              className="text-middle margin-left-neg-4"
-              size={4}
+            <USWDSIcon
+              name="arrow_forward"
+              className="usa-icon usa-icon--size-4 text-middle margin-left-neg-4"
               aria-label="arrow-forward"
             />
           </Button>

frontend/stories/components/FundingContent.stories.tsx

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

frontend/stories/components/GoalContent.stories.tsx

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

frontend/stories/components/ProcessContent.stories.tsx

@@ -1,5 +1,5 @@
 import { Meta } from "@storybook/react";
-import ProcessContent from "src/pages/content/ProcessIntro";
+import ProcessContent from "src/app/[locale]/process/ProcessIntro";
 
 const meta: Meta<typeof ProcessContent> = {
   title: "Components/Content/Process Content",

frontend/stories/pages/Index.stories.tsx

@@ -1,5 +1,5 @@
 import { Meta } from "@storybook/react";
-import Index from "src/pages/index";
+import Index from "src/app/[locale]/page";
 
 const meta: Meta<typeof Index> = {
   title: "Pages/Home",

frontend/tests/components/FundingContent.test.tsx

@@ -1,5 +1,5 @@
-import { render, screen } from "@testing-library/react";
-import FundingContent from "src/pages/content/FundingContent";
+import { render, screen } from "tests/react-utils";
+import FundingContent from "src/components/content/FundingContent";
 
 describe("Funding Content", () => {
   it("Renders without errors", () => {

frontend/tests/components/GoalContent.test.tsx

@@ -1,5 +1,5 @@
-import { render, screen } from "@testing-library/react";
-import GoalContent from "src/pages/content/IndexGoalContent";
+import { render, screen } from "tests/react-utils";
+import GoalContent from "src/components/content/IndexGoalContent";
 
 describe("Goal Content", () => {
   it("Renders without errors", () => {

frontend/tests/pages/index.test.tsx

@@ -1,6 +1,7 @@
-import { render, screen, waitFor } from "@testing-library/react";
+import { waitFor, screen, render } from "tests/react-utils";
+
 import { axe } from "jest-axe";
-import Index from "src/pages/index";
+import Index from "src/app/[locale]/page";
 
 describe("Index", () => {
   it("renders alert with grants.gov link", () => {