Merge pull request #464 from thiagobardini/public-view-sep-2023-impro…

…vement

SEP/2023 - Implemented the design suggestions provided by the UX team

frontend/front/src/pages/Public/Assets/theme.js

@@ -18,7 +18,7 @@ const theme = createTheme({
     // body
     body: {
       margin: 0,
-      fontWeight: 400,
+      // fontWeight: 400,
       fontSize: "16px",
       lineHeight: 1.5,
       letterSpacing: "0.00938em",

frontend/front/src/pages/Public/Components/Button/ButtonWhite.js

@@ -14,7 +14,9 @@ const ButtonWhite = ({ text, to, children }) => {
         to={to}
         onClick={() => window.scrollTo(0, 0)}
         sx={{
-          width: "200px",
+          width: "auto",
+          minWidth: "200px",
+          maxWidth: "250px",
           height: "50px",
           color: "var(--color-text-2)",
           background: "var(--bgColor-3)",

frontend/front/src/pages/Public/Components/Typography/Heading2.js

@@ -4,13 +4,15 @@ function Heading2({ text, textDecoration = "none" }) {
   return (
     <Typography
       variant="h4"
+      gutterBottom
       sx={{
         fontFamily: "var(--font-family-1)",
         color: "var(--color-text-2)",
         fontWeight: "600",
         textDecoration: textDecoration,
         textUnderlinePosition: "under",
         textDecorationColor: "var(--color-text-2)",
+        textTransform: "capitalize",
       }}
     >
       {text}

frontend/front/src/pages/Public/Components/Typography/Heading3.js

@@ -12,6 +12,7 @@ function Heading3({ text, icon = null, textDecoration = "none" }) {
               fontFamily: "var(--font-family-1)",
               color: "var(--color-text-2)",
               fontWeight: "600",
+              textTransform: "capitalize",
             }}
           >
             {text}
@@ -27,6 +28,7 @@ function Heading3({ text, icon = null, textDecoration = "none" }) {
             textDecoration: textDecoration,
             textUnderlinePosition: "under",
             textDecorationColor: "var(--color-text-2)",
+            textTransform: "capitalize",
           }}
         >
           {text}

frontend/front/src/pages/Public/Layout/Footer.js

@@ -27,7 +27,6 @@ const footerItems = {
   "About Heat Pumps": { link: "about-heat-pump" },
   "Benefits of Heat Pumps": { link: "benefits-heat-pump" },
   "Get Involved": { link: "get-involved" },
-  "Our Partners": { link: "our-partners-section" },
   Testimonials: { link: "testimonial-section" },
 };
 
@@ -36,8 +35,8 @@ const FooterWrapper = styled("div")(({ theme }) => ({
   color: "var(--color-text-1)",
   position: "relative",
   "& .subtitle-footer": {
-    fontWeight: "bold",
-    textDecoration: "underline",
+    fontWeight: "700",
+    textDecoration: "none",
   },
 }));
 
@@ -87,7 +86,7 @@ const Footer = () => {
             <ButtonGetPump />
           </Grid>
 
-          {/* BENEFITS OF HEAT PUMPS */}
+          {/* LEARN MORE */}
           <Grid
             item
             sx={{
@@ -140,6 +139,9 @@ const Footer = () => {
                       sx={{
                         color: "var(--color-text-1)",
                       }}
+                      primaryTypographyProps={{
+                        fontWeight: "300",
+                      }}
                     />
                   </ListItemButton>
                 </ListItem>
@@ -166,7 +168,12 @@ const Footer = () => {
 
               <ListItem sx={{ py: { xs: 0, lg: 0 }, px: 0 }}>
                 <ListItemButton
-                  sx={{ py: 0, px: 0, textAlign: { xs: "center", lg: "left" } }}
+                  sx={{
+                    py: 0,
+                    px: 0,
+                    textAlign: { xs: "center", lg: "left" },
+                    fontWeight: "300",
+                  }}
                   component={Link}
                   to="privacy-policy"
                   onClick={() => window.scrollTo(0, 0)}
@@ -176,13 +183,16 @@ const Footer = () => {
                     sx={{
                       color: "var(--color-text-1)",
                     }}
+                    primaryTypographyProps={{
+                      fontWeight: "300",
+                    }}
                   />
                 </ListItemButton>
               </ListItem>
             </List>
           </Grid>
 
-          {/* GET IN TOUCH */}
+          {/* CONTACT US   */}
           <Grid
             item
             xs={12}
@@ -195,8 +205,8 @@ const Footer = () => {
             }}
           >
             <>
-              <Typography className="subtitle-footer">
-                Get to Know Us
+              <Typography className="subtitle-footer" pb={1}>
+                Contact Us
               </Typography>
               <Box>
                 <Box
@@ -211,7 +221,11 @@ const Footer = () => {
                   <PermPhoneMsgIcon sx={{ mr: 1 }} />
                   <a
                     href="tel:617-635-4500"
-                    style={{ textDecoration: "none", color: "inherit" }}
+                    style={{
+                      textDecoration: "none",
+                      color: "inherit",
+                      fontWeight: "300",
+                    }}
                   >
                     617-635-4500
                   </a>
@@ -229,7 +243,11 @@ const Footer = () => {
                   <EmailIcon sx={{ mr: 1 }} />
                   <a
                     href="mailto:[email protected]"
-                    style={{ textDecoration: "none", color: "inherit" }}
+                    style={{
+                      textDecoration: "none",
+                      color: "inherit",
+                      fontWeight: "300",
+                    }}
                   >
                     [email protected]
                   </a>

frontend/front/src/pages/Public/Pages/BenefitsHeatPumps.js

@@ -22,7 +22,7 @@ import ButtonDarkBlue from "../Components/Button/ButtonDarkBlue";
 const cardBenefits = [
   {
     icon: moneyIcon,
-    title: "Saving Money",
+    title: "Lower utility bills",
     body: "Air source heat pumps (ASHPs) can reduce electricity usage for heating by up to 50% compared to electrical furnaces and baseboard heaters (",
     bodyLink:
       "https://www.amerenmissourisavings.com/hvac-air-source-heat-pump-education-flyer/",
@@ -32,21 +32,21 @@ const cardBenefits = [
   },
   {
     icon: snowSunIcon,
-    title: "Improved Heating & Cooling",
+    title: "Better Heating & Cooling",
     body: "Heat pumps are an excellent way to heat and cool your home. They’re nearly silent, draw less electricity, and they are continuous: heat pumps’ continuous, low-level operation provides constant heating or cooling, eliminating the blasts of hot or cold that legacy systems usually create. To learn more about ASHP operation and benefits, ",
     bodyLink: "",
     link: "https://goclean.masscec.com/clean-energy-solutions/air-source-heat-pumps",
   },
   {
     icon: communityIcon,
-    title: "Strengthening Community",
+    title: "Stronger Communities",
     body: "Boston residents want to stay in their homes and keep their communities strong, even while facing challenges from rising costs. Switching to heat pumps can lower utility costs, reducing the financial challenge of staying in the community. By also adding active cooling capacity, ASHPs also improve the “housing resiliency” of entire neighborhoods as annual temperatures rise. With both energy bills and temperatures on the rise, housing resiliency is more important than ever to empower communities to stay strong and stay together. To learn more, ",
     bodyLink: "",
     link: "https://www.energy.gov/policy/articles/heat-pumps-keep-homes-warm-and-bills-low-winter",
   },
   {
     icon: heatIcon,
-    title: "Reducing Carbon Emissions",
+    title: "Lower Carbon Emissions",
     body: "Heat pumps are highly efficient heating and cooling systems that are electrically-powered. As such, they become “cleaner” whenever the source of their electric power becomes cleaner. Gas or oil fueled heating/cooling cannot benefit in the same way. How much of a difference will switching to ASHPs make in your case? Find specifics on the climate impact of a switch to heat pumps, ",
     bodyLink: "",
     link: "https://goclean.masscec.com/clean-energy-solutions/",

frontend/front/src/pages/Public/Pages/GetInvolved.js

@@ -33,7 +33,6 @@ function GetInvolved() {
       mediaSource: card3,
       title: "Discuss with your community",
       body: "You can host any sort of event and share flyers about how to help your neighbors save money by getting a heat pump!",
-      linkDescription: "Download informational flyer",
       linkDownload: CommunityFlyer,
     },
     {

frontend/front/src/pages/Public/Pages/Home/CardBenefitsSection.js

@@ -29,7 +29,7 @@ const CardBenefitsSection = () => {
   const cards = [
     {
       id: 1,
-      title: "Saving Money",
+      title: "Lower energy bills",
       paragraphs: [
         "Heat pumps are so energy efficient that they can lead to significant savings on monthly utility bills and lower maintenance, repair and replacement costs.",
       ],
@@ -39,29 +39,29 @@ const CardBenefitsSection = () => {
     },
     {
       id: 2,
-      title: "Experience The All In One Comfort",
+      title: "Comfort at home",
       paragraphs: [
-        "Heat pumps can help you keep cool in the summer and warm in the winter. They are efficient, nearly silent, and convenient, providing comfort throughout the home.",
+        "The same heat pump that helps to cool in the summer can then provide warmth in the winter- it's one system that is efficient, quiet, and convenient, providing comfort throughout the home.",
       ],
       image: imageTwo,
       buttonText: "",
       buttonLink: "",
     },
     {
       id: 3,
-      title: "Strengthen Community",
+      title: "Stronger communities",
       paragraphs: [
-        "Because heat pumps can lower your utility bills, they can help seniors and low-income residents stay in their homes longer.",
+        "By helping to lower utility bills, heat pumps can lower the cost of living for residents, which in turn can support residents living on fixed- or low-incomes to remain in their homes longer, strengthening communities.",
       ],
       image: strengthenCommunity,
       buttonText: "",
       buttonLink: "",
     },
     {
       id: 4,
-      title: "Environmentally Friendly ",
+      title: "Cleaner air",
       paragraphs: [
-        "Heat pumps use electricity that can be produced by renewable sources, making them much more eco-friendly than gas or oil-fueled systems. With a single “green-powered” unit that heats and cools, your home’s carbon footprint is as low as it can go.",
+        "Heat pumps use electricity that can be produced by renewable sources. As the grid becomes more green, heat pumps become much more eco-friendly than gas or oil-fueled systems. With a single “green-powered” unit that heats and cools, your home’s carbon footprint is as low as it can go.",
       ],
       image: beEnvironmentally,
       buttonText: "",
@@ -91,7 +91,7 @@ const CardBenefitsSection = () => {
               variant="body"
               sx={{ color: "var(--color-text-3)", display: "inline-block" }}
             >
-              Learn more about
+              Learn more about the
             </Typography>
             <Link to="benefits-heat-pump" style={{ textDecoration: "none" }}>
               <Typography variant="body" sx={{ color: "var(--color-text-4)" }}>

frontend/front/src/pages/Public/Pages/Home/CardLinksSection.js

@@ -30,7 +30,7 @@ const GridLinkWrapper = styled(Grid)(({ theme }) => ({
   justifyContent: "center",
   flexWrap: "nowrap",
   gap: "2rem",
-  [theme.breakpoints.down("md")]: {
+  [theme.breakpoints.down("lg")]: {
     flexWrap: "wrap",
   },
 }));
@@ -39,26 +39,27 @@ const CardLinksSection = () => {
   const linkCards = [
     {
       id: 1,
-      title: "Add Your Voice",
+      title: "What is a heat pump?",
       paragraph:
-        "To a collections of homeowner’s questions and thoughts about heat pumps.",
+        "A heat pump is an energy-efficient system that heats your home in the winter, and cools your home in the summer.",
       button: {
         text: "Take the survey",
         to: "survey",
       },
       idCSS: "survey-link-section",
-      image: imageVoice,
+      image: imageAbout,
     },
     {
       id: 2,
       title: "About Us",
-      paragraph: "Empowering Boston residents to save, stay, and sustain.",
+      paragraph:
+        "The Boston Heat Pump Accelerator is an initiative of the Urban League of Eastern Massachusetts, in partnership with local and national organizations.",
       button: {
         text: "Learn more",
         to: "about-us",
       },
       idCSS: "learnmore-link-section",
-      image: imageAbout,
+      image: imageVoice,
     },
   ];
 
@@ -72,7 +73,8 @@ const CardLinksSection = () => {
               background: "var(--bgColor-3)",
               display: "flex",
               flexDirection: { xs: "column", sm: "row" },
-              minWidth: "260px",
+              width: "100%",
+              minWidth: { xs: "260px", lg: "634px" },
               maxWidth: { xs: "468px", sm: "680px" },
               borderRadius: "2%",
             }}

frontend/front/src/pages/Public/Pages/Home/CarrouselHero.js

@@ -22,16 +22,28 @@ function CarrouselHero(props) {
     {
       component: (
         <HeroPage
-          title="Boston Residents Can "
-          titleBold="Save Money with Heat Pumps"
-          text1="Make your home heating and cooling "
-          textBold="less costly"
+          title="Save money on your "
+          titleBold="heating and cooling bills"
+          text1="You may be able to get incentives to install a heat pump, a type of heating and cooling system that can  "
+          textBold="lower your utility bills"
           text2="."
           image={imageHeroFirst}
           link="https://www.cenhud.com/en/my-energy/save-energy-money/energy-calculators/fuel-switching-calculator/"
         />
       ),
     },
+    //   component: (
+    //     <HeroPage
+    //       title="Boston Residents Can "
+    //       titleBold="Save Money with Heat Pumps"
+    //       text1="Make your home heating and cooling "
+    //       textBold="less costly"
+    //       text2="."
+    //       image={imageHeroFirst}
+    //       link="https://www.cenhud.com/en/my-energy/save-energy-money/energy-calculators/fuel-switching-calculator/"
+    //     />
+    //   ),
+    // },
     // {
     //   component: (
     //     <HeroPage

frontend/front/src/pages/Public/Pages/Home/HeroPage.js

@@ -1,9 +1,10 @@
 import React from "react";
 import { styled } from "@mui/material/styles";
-import { Typography, Box, Link } from "@mui/material";
-import ButtonWhite from "../../Components/Button/ButtonWhite";
+import { Typography, Box, Button } from "@mui/material";
 import AnimatedBox from "../../Components/AnimatedBox";
 import TitleHero from "../../Components/Typography/TitleHero";
+import { Link as MuiLink } from "@mui/material";
+import { Link as RouterLink } from "react-router-dom";
 
 const HeroWrapper = styled("div")(({ theme, image }) => ({
   display: "flex",
@@ -70,7 +71,7 @@ const HeroPage = ({
                 <Typography variant="h6" sx={{ color: "var(--color-text-9)" }}>
                   {text1}
                   {link !== "" && (
-                    <Link
+                    <MuiLink
                       href={link}
                       target="_blank"
                       rel="noopener"
@@ -84,13 +85,32 @@ const HeroPage = ({
                       }}
                     >
                       {textBold}
-                    </Link>
+                    </MuiLink>
                   )}
                   {text2}
                 </Typography>
               </Box>
 
-              <ButtonWhite text="Take the survey" to="survey" />
+              <Button
+                component={RouterLink}
+                to="/public/benefits-heat-pump"
+                onClick={() => window.scrollTo(0, 0)}
+                sx={{
+                  width: "auto",
+                  minWidth: "200px",
+                  maxWidth: "250px",
+                  height: "50px",
+                  color: "var(--color-text-2)",
+                  background: "var(--bgColor-3)",
+                  borderRadius: "50px",
+                  px: 3,
+                  "&:hover": {
+                    backgroundColor: "var(--bgColor-3)",
+                  },
+                }}
+              >
+                Benefits of heat pumps
+              </Button>
             </Box>
           </AnimatedBox>
         </Box>