feat(#3622): add hover on home cards

Author: MSzalowski

govtool/frontend/src/components/molecules/HomeCard.tsx

@@ -23,16 +23,24 @@ export const HomeCard = ({ title, description, onCardClick }: Props) => (
       "&:focus": {
         boxShadow: "0 0 0 3px rgba(47, 98, 220, 0.5)",
       },
+      "&:hover": {
+        boxShadow: onCardClick
+          ? "0 0 0 3px rgba(47, 98, 220, 0.5)"
+          : "2px 2px 20px 0px rgba(47, 98, 220, 0.20)",
+      },
+      backgroundColor: "white",
     }}
     onCardClick={onCardClick}
     component="button"
     role="button"
     aria-label={`${title}. ${description}`}
     dataTestId={`home-card-${title.replace(/\s+/g, "-").toLowerCase()}`}
   >
-    <Typography component="h3" variant="titleH3">
+    <Typography component="h3" variant="titleH3" sx={{ textAlign: "left" }}>
       {title}
     </Typography>
-    <Typography variant="body">{description}</Typography>
+    <Typography variant="body" sx={{ textAlign: "left" }}>
+      {description}
+    </Typography>
   </Card>
 );

govtool/frontend/src/components/organisms/Home/OpenToAny.tsx

@@ -87,7 +87,7 @@ export const OpenToAny = () => {
       component="section"
       data-testid="open-to-any-and-all-users-section"
     >
-      <Typography variant="title">
+      <Typography variant="title" component="h2">
         {t("home.openToAny.section.title")}
       </Typography>
       <Box

govtool/frontend/src/components/organisms/Home/UsefulLinks.tsx

@@ -87,6 +87,7 @@ export const UsefulLinks = ({ align = "left" }: Props) => {
               display: "flex",
               flexDirection: "column",
               gap: 1,
+              backgroundColor: "white",
             }}
           >
             <Typography component="h3" variant="titleH3">

govtool/frontend/src/pages/Home.tsx

@@ -48,6 +48,7 @@ export const Home = () => {
               whiteSpace: "pre-line",
             }}
             variant="title"
+            component="h1"
           >
             <Trans
               i18nKey="hero.description"