testimony in 21st century base page

components/Footer/Footer.tsx

@@ -208,6 +208,9 @@ const AboutLinks = () => {
       <StyledInternalLink href="/about/how-maple-uses-ai">
         {t("links.mapleAI")}
       </StyledInternalLink>
+      <StyledInternalLink href="/about/testimony-in-the-21st-century">
+        {t("links.testimony21stCentury")}
+      </StyledInternalLink>
     </>
   )
 }

components/Navbar.tsx

@@ -8,6 +8,7 @@ import { Col, Container, Dropdown, Nav, Navbar, NavDropdown } from "./bootstrap"
 
 import {
   Avatar,
+  NavbarLink21stCentury,
   NavbarLinkAI,
   NavbarLinkBills,
   NavbarLinkEditProfile,
@@ -87,6 +88,7 @@ const MobileNav: React.FC<React.PropsWithChildren<unknown>> = () => {
           <NavbarLinkSupport handleClick={closeNav} />
           <NavbarLinkFAQ handleClick={closeNav} />
           <NavbarLinkAI handleClick={closeNav} />
+          <NavbarLink21stCentury handleClick={closeNav} />
         </NavDropdown>
 
         <NavDropdown className={"navLink-primary"} title={t("learn")}>
@@ -222,6 +224,7 @@ const DesktopNav: React.FC<React.PropsWithChildren<unknown>> = () => {
             <NavbarLinkSupport />
             <NavbarLinkFAQ />
             <NavbarLinkAI />
+            <NavbarLink21stCentury />
           </Dropdown.Menu>
         </Dropdown>
       </div>

components/NavbarComponents.tsx

@@ -32,6 +32,27 @@ export const Avatar = () => {
   )
 }
 
+export const NavbarLink21stCentury: React.FC<
+  React.PropsWithChildren<{
+    handleClick?: any
+    other?: any
+  }>
+> = ({ handleClick, other }) => {
+  const isMobile = useMediaQuery("(max-width: 768px)")
+  const { t } = useTranslation(["common", "auth"])
+  return (
+    <NavDropdown.Item onClick={handleClick}>
+      <NavLink
+        className={isMobile ? "navLink-primary" : ""}
+        href="/about/testimony-in-the-21st-century"
+        {...other}
+      >
+        {t("navigation.testimony21stCentury")}
+      </NavLink>
+    </NavDropdown.Item>
+  )
+}
+
 export const NavbarLinkAI: React.FC<
   React.PropsWithChildren<{
     handleClick?: any

components/about/Testimony21stCentury/Testimony21stCentury.tsx

@@ -0,0 +1,135 @@
+import { useTranslation } from "next-i18next"
+import { Container, Row, Col } from "../../bootstrap"
+import {
+  MemberItem,
+  Divider,
+  DescrContainer,
+  NameContainer,
+  PageTitle,
+  PageDescr,
+  SectionContainer,
+  SectionTitle
+} from "../../shared/CommonComponents"
+
+const Testimony21stCentury = () => {
+  const { t } = useTranslation("testimony21stCentury")
+  const whiteSpace = "\u00A0"
+
+  return (
+    <Container>
+      <Row>
+        <Col>
+          <PageTitle>{t("title")}</PageTitle>
+        </Col>
+      </Row>
+      <Row>
+        <Col className="py-3">
+          <SectionContainer>
+            <SectionTitle className="p-2">{whiteSpace}</SectionTitle>
+            <DescrContainer className="py-3 px-4">
+              {t("section1.desc1")}
+            </DescrContainer>
+          </SectionContainer>
+        </Col>
+      </Row>
+      <Row>
+        <Col className="py-3">
+          <SectionContainer>
+            <SectionTitle className="p-2">
+              {whiteSpace}
+              {t("section2.title")}
+            </SectionTitle>
+            <DescrContainer className="py-3 px-4">
+              {t("section2.desc1Main")}
+            </DescrContainer>
+            {/* <MemberItem
+              name={t("section2.desc1Title")}
+              descr={t("section2.desc1Main")}
+            />
+            <Divider /> */}
+          </SectionContainer>
+        </Col>
+      </Row>
+      <Row>
+        <Col className="py-3">
+          <SectionContainer>
+            <SectionTitle className="p-2">
+              {whiteSpace}
+              {t("section3.title")}
+            </SectionTitle>
+            <DescrContainer className="pb-3 px-4">
+              {t("section3.desc1Main")}
+            </DescrContainer>
+          </SectionContainer>
+        </Col>
+      </Row>
+      <Row>
+        <Col className="py-3">
+          <SectionContainer>
+            <SectionTitle className="p-2">
+              {whiteSpace}
+              {t("section4.title")}
+            </SectionTitle>
+            <DescrContainer className="pb-3 px-4">
+              {t("section4.desc1Main")}
+            </DescrContainer>
+          </SectionContainer>
+        </Col>
+      </Row>
+      <Row>
+        <Col className="py-3">
+          <SectionContainer>
+            <SectionTitle className="p-2">
+              {whiteSpace}
+              {t("section5.title")}
+            </SectionTitle>
+            <DescrContainer className="pb-3 px-4">
+              {t("section5.desc1Main")}
+            </DescrContainer>
+          </SectionContainer>
+        </Col>
+      </Row>
+      <Row>
+        <Col className="py-3">
+          <SectionContainer>
+            <SectionTitle className="p-2">
+              {whiteSpace}
+              {t("section6.title")}
+            </SectionTitle>
+            <DescrContainer className="pb-3 px-4">
+              {t("section6.desc1Main")}
+            </DescrContainer>
+          </SectionContainer>
+        </Col>
+      </Row>
+      <Row>
+        <Col className="py-3">
+          <SectionContainer>
+            <SectionTitle className="p-2">
+              {whiteSpace}
+              {t("section7.title")}
+            </SectionTitle>
+            <DescrContainer className="pb-3 px-4">
+              {t("section7.desc1Main")}
+            </DescrContainer>
+          </SectionContainer>
+        </Col>
+      </Row>
+      <Row>
+        <Col className="py-3">
+          <SectionContainer>
+            <SectionTitle className="p-2">
+              {whiteSpace}
+              {t("section8.title")}
+            </SectionTitle>
+            <DescrContainer className="pb-3 px-4">
+              {t("section8.desc1Main")}
+            </DescrContainer>
+          </SectionContainer>
+        </Col>
+      </Row>
+    </Container>
+  )
+}
+
+export default Testimony21stCentury

pages/about/testimony-in-the-21st-century.tsx

@@ -0,0 +1,21 @@
+import { createPage } from "../../components/page"
+import { createGetStaticTranslationProps } from "components/translations"
+import Testimony21stCentury from "components/about/Testimony21stCentury/Testimony21stCentury"
+
+export default createPage({
+  title: "Testimony in the 21st Century",
+  Page: () => {
+    return (
+      <div>
+        <Testimony21stCentury />
+      </div>
+    )
+  }
+})
+
+export const getStaticProps = createGetStaticTranslationProps([
+  "auth",
+  "common",
+  "footer",
+  "testimony21stCentury"
+])

public/locales/en/common.json

@@ -56,6 +56,7 @@
   "maple_abbr": "MAPLE",
   "maple_fullName": "Massachusetts Platform for Legislative Engagement",
   "navigation": {
+    "testimony21stCentury": "Testimony in the 21st Century",
     "accountProfile": "Profile",
     "additionalResources": "Additional Resources",
     "ai": "How MAPLE Uses AI",

public/locales/en/footer.json

@@ -14,6 +14,7 @@
     "team": "Team",
     "faq": "FAQ",
     "mapleAI": "How MAPLE Uses AI",
+    "testimony21stCentury": "Testimony in the 21st Century",
     "socials": {
       "instagram": "Follow MAPLE on Intagram",
       "linkedin":"Follow MAPLE on LinkedIn",

public/locales/en/testimony21stCentury.json

@@ -0,0 +1,42 @@
+{
+  "title": "Testimony in the 21st Century",
+  "section1": {
+    "title": "",
+    "desc1": "Despite this being a “testimony” website, we often struggle to define it!"
+  },
+  "section2": {
+    "title": "",
+    "desc1Title": "",
+    "desc1Main": "“Public testimony” used to be the sole avenue for influencing legislation and creating a record of legislative discussions and intent. But not anymore!"
+  },  
+  "section3": {
+    "title": "",
+    "desc1Title": "",
+    "desc1Main": "A “tweet” or viral video can influence legislation (and often does), and civic debate has moved from meeting halls to online forums and feeds."
+  },  
+  "section4": {
+    "title": "",
+    "desc1Title": "",
+    "desc1Main": "While “public testimony” may seem archaic, its underlying goals remain imperative – influencing legislation and documenting legislative discussions."
+  },  
+  "section5": {
+    "title": "",
+    "desc1Title": "",
+    "desc1Main": "Whatever the manifestation of political expression - whether a tweet, post, public comment or testimony - these expressions are essential."
+  },  
+  "section6": {
+    "title": "",
+    "desc1Title": "",
+    "desc1Main": "Perhaps just as essential is the space that elicits, houses and shares those political expressions."
+  },  
+  "section7": {
+    "title": "",
+    "desc1Title": "",
+    "desc1Main": "We, at MAPLE, do not take this responsibility lightly, and neither should you."
+  },  
+  "section8": {
+    "title": "",
+    "desc1Title": "",
+    "desc1Main": "However, you should not be intimidated by the phrase “public testimony”. It should not conjure much more uncomfortability than sharing a tweet or post."
+  }
+}