moar Homepage Tweaks

components/homepage/HeroSection.tsx

@@ -1,8 +1,11 @@
 import { useTranslation } from "next-i18next"
 import Image from "react-bootstrap/Image"
-import { Internal } from "components/links"
+
 import styles from "./Homepage.module.css"
 
+import { NEWSLETTER_SIGNUP_URL, TRAINING_CALENDAR_URL } from "components/common"
+import { Internal } from "components/links"
+
 export default function HeroSection() {
   const { t } = useTranslation("homepage")
 
@@ -22,6 +25,28 @@ export default function HeroSection() {
           <div className={styles.heroContent}>
             <h1 className={styles.heroTitle}>{t("hero.title")}</h1>
             <p className={styles.heroBody}>{t("hero.body")}</p>
+            <p className={styles.heroBody}>
+              {t("hero.body2a")}{" "}
+              <a
+                href={TRAINING_CALENDAR_URL}
+                style={{ color: "white" }}
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                {t("hero.calendar")}
+              </a>{" "}
+              {t("hero.body2b")}
+            </p>
+            <p className={styles.heroBody}>
+              <a
+                href={NEWSLETTER_SIGNUP_URL}
+                style={{ color: "white" }}
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                {t("hero.newsletter")}
+              </a>
+            </p>
             <div className={styles.heroActions}>
               <Internal href="/bills" className={styles.primaryAction}>
                 {t("hero.primaryAction")}

components/homepage/Homepage.module.css

@@ -22,16 +22,15 @@
 .heroSection {
   position: relative;
   width: 100%;
-  padding-top: 5rem;
-  background: var(--maple-surface-base);
+  background: var(--maple-brand-primary);
   overflow: hidden;
 }
 
 .hero {
   display: grid;
-  grid-template-columns: minmax(23rem, 1.05fr) minmax(24rem, 1.15fr);
+  grid-template-columns: minmax(30rem, 1.05fr) minmax(30rem, 2fr);
   align-items: center;
-  gap: clamp(1.8rem, 4vw, 3.4rem);
+  gap: clamp(1.8rem, 4vw, 10rem);
   min-height: 38rem;
   padding-top: 0rem;
   padding-bottom: 1rem;
@@ -43,7 +42,7 @@
   right: 0;
   bottom: 0;
   height: 100%;
-  background-image: url("/skyline_blue.svg");
+  background-image: url("/skyline.svg");
   background-repeat: no-repeat;
   background-position: bottom center;
   background-size: 100% auto;
@@ -55,6 +54,7 @@
 .heroVisual {
   position: relative;
   height: 100%;
+  width: 100%;
   min-height: 24rem;
   display: flex;
   align-items: flex-end;
@@ -78,18 +78,18 @@
 }
 
 .heroTitle {
-  color: var(--maple-brand-primary-strong);
-  font-size: clamp(2.5rem, 3.5vw, 3.8rem);
+  color: white;
+  font-size: clamp(2.5rem, 3vw, 3rem);
   line-height: 1.08;
   margin: 0 0 1.35rem;
 }
 
 .heroBody {
-  color: var(--maple-text-body);
+  color: white;
   font-size: 1.125rem;
   line-height: 1.62;
   margin: 0 0 1.9rem;
-  max-width: 42rem;
+  max-width: 50rem;
 }
 
 .heroActions {
@@ -440,6 +440,7 @@
 
   .heroVisual {
     min-height: 20rem;
+    width: 100%;
     order: 1;
     margin-bottom: 1.5rem;
     display: flex;

public/locales/en/homepage.json

@@ -26,7 +26,11 @@
   },
   "hero": {
     "title": "Your Voice Matters",
-    "body": "MAPLE makes it easy for anyone to submit and see testimony to the Massachusetts Legislature about the bills that will shape our future.",
+    "body": "MAPLE makes it easy for anyone to view and submit testimony to the Massachusetts Legislature about the bills that will shape our future.",
+    "body2a": "New to MAPLE? For extra support, check",
+    "calendar": "Our Calendar",
+    "body2b": "and join an upcoming training session!",
+    "newsletter": "Click Here to Subscribe to Our Newsletter",
     "primaryAction": "Get Started",
     "secondaryAction": "Learn More"
   },