Created New Feature Banner and Added to Home Page

components/AnnouncementBanner/AnnouncementBanner.tsx

@@ -0,0 +1,45 @@
+import { Row } from "react-bootstrap"
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
+import { faXmark } from "@fortawesome/free-solid-svg-icons"
+import { useLocalStorage } from "usehooks-ts"
+
+function AnnouncementBanner({
+  endDate,
+  children
+}: {
+  endDate: Date
+  children: React.ReactElement
+}) {
+  const [open, setOpen] = useLocalStorage<boolean>("bannerOpen", true)
+
+  const close = () => {
+    setOpen(false)
+  }
+
+  const now: Date = new Date()
+  if (now < endDate && open) {
+    return (
+      <Row
+        style={{ zIndex: 100 }}
+        className="position-relative h3 text-center text-white p-3 bg-warning"
+      >
+        <button
+          className="position-absolute top-0 end-0 border-0 bg-transparent p-1"
+          style={{ width: "auto" }}
+          onClick={close}
+        >
+          <FontAwesomeIcon
+            icon={faXmark}
+            style={{ color: "white", fontSize: "18px", paddingRight: "8px" }}
+          />
+        </button>
+
+        {children}
+      </Row>
+    )
+  } else {
+    return <></>
+  }
+}
+
+export default AnnouncementBanner

components/AnnouncementBanner/TranscriptAnnouncement.tsx

@@ -0,0 +1,23 @@
+import { useTranslation } from "react-i18next"
+import AnnouncementBanner from "./AnnouncementBanner"
+
+function TranscriptAnnouncement() {
+  const { t } = useTranslation("common")
+  return (
+    <AnnouncementBanner endDate={new Date("2026-03-01T12:00:00.000Z")}>
+      <p className="mb-0">
+        <span className="fw-bold">{t("announcement.headingBold")}</span>{" "}
+        <span>
+          {t("announcement.headingBody")}
+          <br />
+          {t("announcement.description")}{" "}
+          <a href="/hearings" style={{ color: "white" }}>
+            {t("announcement.link")}
+          </a>
+        </span>
+      </p>
+    </AnnouncementBanner>
+  )
+}
+
+export default TranscriptAnnouncement

components/HeroHeader/HeroHeader.js

@@ -7,11 +7,13 @@ import styles from "./HeroHeader.module.css"
 import { useTranslation } from "next-i18next"
 import { capitalize } from "lodash"
 import { NEWSLETTER_SIGNUP_URL, TRAINING_CALENDAR_URL } from "../common"
+import TranscriptAnnouncement from "components/AnnouncementBanner/TranscriptAnnouncement"
 
 const HeroHeader = ({ authenticated }) => {
   const { t } = useTranslation("common")
   return (
     <Container fluid className={`${styles.container}`}>
+      <TranscriptAnnouncement />
       <ScrollTrackerContainer>
         <Row>
           <ScrollTrackingItem

public/locales/en/common.json

@@ -1,5 +1,11 @@
 {
   "about": "About",
+  "announcement": {
+    "headingBold": "New on MAPLE:", 
+    "headingBody": "Looking to learn about the latest action in a committee?", 
+    "description": "MAPLE now has searchable transcripts for all legislative hearings.", 
+    "link": "Try it out!"
+  }, 
   "back_to_bills": "back to list of bills",
   "back_to_hearings": "back to list of hearings",
   "bill": {

stories_hold/organisms/pageElements/AnnouncementBanner.stories.tsx

@@ -0,0 +1,17 @@
+import { StoryObj } from "@storybook/react"
+import AnnouncementBanner from "components/AnnouncementBanner/AnnouncementBanner"
+import { createMeta } from "stories/utils"
+
+export default createMeta({
+  title: "components/AnnouncementBanner",
+  component: AnnouncementBanner
+})
+
+type Story = StoryObj<typeof AnnouncementBanner>
+
+export const Primary: Story = {
+  args: {
+    endDate: new Date("2026-03-01T12:00:00.000Z")
+  },
+  name: "AnnouncementBanner"
+}