[ISSUE 359] Implement Hero for static site (#376)

frontend/public/locales/en/common.json

@@ -17,6 +17,11 @@
     "nav_menu_toggle": "Menu",
     "title": "Grants.gov"
   },
+  "Hero": {
+    "title": "We're building a new Grants.gov!",
+    "beta": "BETA!",
+    "content": "This new website will be your go-to resource to follow our progress on improving funding opportunity announcements and the application experience."
+  },
   "Footer": {
     "agency_name": "Agency name",
     "return_to_top": "Return to top"

frontend/src/components/Hero.tsx

@@ -0,0 +1,27 @@
+import { useTranslation } from "next-i18next";
+import { GridContainer } from "@trussworks/react-uswds";
+
+const Hero = () => {
+  const { t } = useTranslation("common", {
+    keyPrefix: "Hero",
+  });
+
+  return (
+    <div
+      data-testid="hero"
+      className="bg-primary desktop:padding-y-15 tablet:padding-y-2 padding-y-1"
+    >
+      <GridContainer>
+        <h1 className="text-white desktop:font-sans-3xl tablet:font-sans-2xl font-sans-xl">
+          {t("title")}
+        </h1>
+        <p className="usa-intro desktop:font-sans-xl tablet:font-sans-lg font-sans-md">
+          <span className="text-yellow text-bold">{t("beta")}</span>&nbsp;
+          <span className="text-white">{t("content")}</span>
+        </p>
+      </GridContainer>
+    </div>
+  );
+};
+
+export default Hero;

frontend/src/components/Layout.tsx

@@ -2,6 +2,7 @@ import { useTranslation } from "next-i18next";
 
 import Footer from "./Footer";
 import Header from "./Header";
+import Hero from "./Hero";
 
 type Props = {
   children: React.ReactNode;
@@ -19,6 +20,7 @@ const Layout = ({ children }: Props) => {
         {t("skip_to_main")}
       </a>
       <Header />
+      <Hero />
       <main id="main-content">{children}</main>
       <Footer />
     </div>

frontend/src/styles/_uswds-theme.scss

@@ -18,6 +18,10 @@ in the form $setting: value,
   // Ensure utility classes always override other styles
   $utilities-use-important: true,
 
+  // Prettier defaults for typography
+  $theme-font-type-sans: "public-sans",
+  $theme-global-link-styles: true,
+
   $background-color-palettes: (
     "palette-color-system-cyan-light",
     "palette-color-system-yellow-light",

frontend/stories/components/Hero.stories.tsx

@@ -0,0 +1,18 @@
+import { Meta } from "@storybook/react";
+
+import Hero from "src/components/Hero";
+
+const meta: Meta<typeof Hero> = {
+  title: "Components/Hero",
+  component: Hero,
+};
+export default meta;
+
+export const Default = {
+  parameters: {
+    design: {
+      type: "figma",
+      url: "https://www.figma.com/file/lpKPdyTyLJB5JArxhGjJnE/beta.grants.gov?type=design&node-id=14-754&mode=design&t=KpB2R08k4fhBL2DJ-4",
+    },
+  },
+};

frontend/tests/components/Hero.test.tsx

@@ -0,0 +1,11 @@
+import { render, screen } from "@testing-library/react";
+
+import Hero from "src/components/Hero";
+
+describe("Hero", () => {
+  it("Renders without errors", () => {
+    render(<Hero />);
+    const hero = screen.getByTestId("hero");
+    expect(hero).toBeInTheDocument();
+  });
+});