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" },