diff --git a/components/homepage/HeroSection.tsx b/components/homepage/HeroSection.tsx
index bdbc85d8f..4baa35b4b 100644
--- a/components/homepage/HeroSection.tsx
+++ b/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() {
{t("hero.title")}
{t("hero.body")}
+
+ {t("hero.body2a")}{" "}
+
+ {t("hero.calendar")}
+ {" "}
+ {t("hero.body2b")}
+
+
+
+ {t("hero.newsletter")}
+
+
{t("hero.primaryAction")}
diff --git a/components/homepage/Homepage.module.css b/components/homepage/Homepage.module.css
index 0d508184b..592afb424 100644
--- a/components/homepage/Homepage.module.css
+++ b/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;
diff --git a/public/locales/en/homepage.json b/public/locales/en/homepage.json
index d426b683a..445da42e1 100644
--- a/public/locales/en/homepage.json
+++ b/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"
},