Redesign the Learn section: hub, testimony, process, why-use-maple, and a new writing-tips page

components/AdditionalResources.tsx

@@ -1,48 +1,112 @@
-import { Container } from "react-bootstrap"
 import { useTranslation, Trans } from "next-i18next"
-import * as links from "components/links"
+import styled from "styled-components"
 
-const AdditionalResources = () => {
-  const content = [
-    {
-      i18nKey: "find_legislator",
-      href: "https://malegislature.gov/Search/FindMyLegislator"
-    },
-    {
-      i18nKey: "legislative_doc",
-      href: "https://www.mass.gov/doc/the-legislative-process-0/download"
-    },
-    {
-      i18nKey: "legal_services",
-      href: "https://www.masslegalservices.org/content/legislative-process-massachusetts-0"
+const Section = styled.section`
+  margin-top: 3rem;
+
+  h2 {
+    font-family: var(--maple-font-heading);
+    font-weight: 700;
+    color: var(--bs-blue);
+    font-size: clamp(1.5rem, 4vw, 1.875rem);
+    margin-bottom: 0.75rem;
+  }
+
+  .intro {
+    color: var(--maple-text-body);
+    line-height: 1.7;
+    margin-bottom: 1.5rem;
+  }
+
+  ul {
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  li {
+    background: var(--maple-surface-base);
+    border-radius: var(--maple-radius-xl);
+    box-shadow: var(--maple-shadow-sm);
+    padding: 1.25rem 1.5rem;
+    transition: box-shadow 0.2s ease;
+
+    &:hover {
+      box-shadow: var(--maple-shadow-hover);
+    }
+  }
+
+  p {
+    color: var(--maple-text-body);
+    line-height: 1.7;
+    margin: 0;
+  }
+
+  a {
+    color: var(--bs-blue);
+    text-decoration: underline;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    li {
+      transition: none;
     }
-  ]
+  }
+`
+
+const content = [
+  {
+    i18nKey: "find_legislator",
+    href: "https://malegislature.gov/Search/FindMyLegislator"
+  },
+  {
+    i18nKey: "legislative_doc",
+    href: "https://www.mass.gov/doc/the-legislative-process"
+  },
+  {
+    i18nKey: "legal_services",
+    href: "https://www.masslegalservices.org/content/legislative-process-massachusetts-0"
+  }
+]
+
+const AdditionalResources = () => {
   const { t } = useTranslation("learnComponents")
 
   return (
-    <Container fluid="md" className="mt-3">
-      <h1 className="fs-1 fw-bold text-center text-black">
+    <Section aria-labelledby="additional-resources-heading">
+      {/* h2, not h1: the page already has one, and this is a subsection of it. */}
+      <h2 id="additional-resources-heading">
         {t("legislative.additional_resources")}
-      </h1>
-      <p className="fs-4 mx-5 my-3">{t("legislative.resources_intro")}</p>
-
-      {content.map(({ i18nKey, href }) => (
-        <div
-          key={i18nKey}
-          className="m-4 py-2 px-4 text-bg-light rounded-4 d-flex align-items-center align-items-sm-start"
-        >
-          <div className="d-flex flex-0 justify-content-xs-center p-4">
-            <p className="fs-4">
+      </h2>
+      <p className="intro">{t("legislative.resources_intro")}</p>
+
+      <ul>
+        {content.map(({ i18nKey, href }) => (
+          <li key={i18nKey}>
+            <p>
+              {/* A bare anchor, not links.External: that helper appends a
+                  trailing space, which shows up as "the process ." here. */}
               <Trans
                 t={t}
                 i18nKey={`legislative.${i18nKey}`}
-                components={[<links.External href={href} key={i18nKey} />]}
+                components={[
+                  // eslint-disable-next-line jsx-a11y/anchor-has-content
+                  <a
+                    href={href}
+                    key={i18nKey}
+                    target="_blank"
+                    rel="noreferrer"
+                  />
+                ]}
               />
             </p>
-          </div>
-        </div>
-      ))}
-    </Container>
+          </li>
+        ))}
+      </ul>
+    </Section>
   )
 }
 

components/Footer/Footer.tsx

@@ -189,7 +189,7 @@ const LearnLinks = () => {
   const { t } = useTranslation(["footer", "common"])
   return (
     <>
-      <StyledInternalLink href="/learn/writing-effective-testimony">
+      <StyledInternalLink href="/learn/testimony">
         {t("links.learnWriting")}
       </StyledInternalLink>
       <StyledInternalLink href="/learn/legislative-process">
@@ -198,6 +198,9 @@ const LearnLinks = () => {
       <StyledInternalLink href="/why-use-maple/for-individuals">
         {t("links.learnWhy")}
       </StyledInternalLink>
+      <StyledInternalLink href="/learn/ai-tools">
+        {t("links.learnAi")}
+      </StyledInternalLink>
     </>
   )
 }