From 9a2f97165ddb115a99e6c47588678bd177cf53d0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Sza=C5=82owski?= <michal.szalowski@gmail.com>
Date: Fri, 23 May 2025 13:20:07 +0200
Subject: [PATCH 1/2] fix(#3622): apply new design system theme changes to home
 page

---
 .../frontend/src/components/atoms/Typography.tsx |  9 +++++++++
 govtool/frontend/src/components/atoms/types.ts   |  3 +++
 .../src/components/molecules/HomeCard.tsx        |  7 +++++--
 .../organisms/Home/ConnectWalletTo.tsx           |  6 +++---
 .../organisms/Home/HelpBuildGovTool.tsx          |  6 +++---
 .../src/components/organisms/Home/OpenToAny.tsx  |  6 +++---
 .../src/components/organisms/Home/Socials.tsx    |  6 +++---
 .../components/organisms/Home/UsefulLinks.tsx    | 16 ++++++++++------
 govtool/frontend/src/pages/Home.tsx              |  4 ++--
 9 files changed, 41 insertions(+), 22 deletions(-)

diff --git a/govtool/frontend/src/components/atoms/Typography.tsx b/govtool/frontend/src/components/atoms/Typography.tsx
index 34e1af742..c11a9f3fc 100644
--- a/govtool/frontend/src/components/atoms/Typography.tsx
+++ b/govtool/frontend/src/components/atoms/Typography.tsx
@@ -12,8 +12,11 @@ export const Typography = ({
     headline3: 36,
     headline4: 32,
     headline5: 28,
+    title: 27,
     title1: 24,
+    titleH3: 23,
     title2: 22,
+    body: 21,
     body1: 16,
     body2: 14,
     caption: 12,
@@ -25,8 +28,11 @@ export const Typography = ({
     headline3: 400,
     headline4: 600,
     headline5: 500,
+    title: 500,
     title1: 400,
+    titleH3: 500,
     title2: 500,
+    body: 400,
     body1: 600,
     body2: 500,
     caption: 400,
@@ -38,8 +44,11 @@ export const Typography = ({
     headline3: "44px",
     headline4: "40px",
     headline5: "36px",
+    title: "32px",
+    titleH3: "32px",
     title1: "32px",
     title2: "28px",
+    body: "28px",
     body1: "24px",
     body2: "20px",
     caption: "16px",
diff --git a/govtool/frontend/src/components/atoms/types.ts b/govtool/frontend/src/components/atoms/types.ts
index 52bf82151..219d12d4e 100644
--- a/govtool/frontend/src/components/atoms/types.ts
+++ b/govtool/frontend/src/components/atoms/types.ts
@@ -32,8 +32,11 @@ export type TypographyProps = Pick<
     | "headline3"
     | "headline4"
     | "headline5"
+    | "title"
+    | "titleH3"
     | "title1"
     | "title2"
+    | "body"
     | "body1"
     | "body2"
     | "caption";
diff --git a/govtool/frontend/src/components/molecules/HomeCard.tsx b/govtool/frontend/src/components/molecules/HomeCard.tsx
index ef04545c9..b5a644075 100644
--- a/govtool/frontend/src/components/molecules/HomeCard.tsx
+++ b/govtool/frontend/src/components/molecules/HomeCard.tsx
@@ -19,6 +19,7 @@ export const HomeCard = ({ title, description, onCardClick }: Props) => (
       border: "none",
       cursor: onCardClick ? "pointer" : "default",
       outline: "none",
+      p: 3.75,
       "&:focus": {
         boxShadow: "0 0 0 3px rgba(47, 98, 220, 0.5)",
       },
@@ -29,7 +30,9 @@ export const HomeCard = ({ title, description, onCardClick }: Props) => (
     aria-label={`${title}. ${description}`}
     dataTestId={`home-card-${title.replace(/\s+/g, "-").toLowerCase()}`}
   >
-    <Typography component="h3">{title}</Typography>
-    <Typography variant="caption">{description}</Typography>
+    <Typography component="h3" variant="titleH3">
+      {title}
+    </Typography>
+    <Typography variant="body">{description}</Typography>
   </Card>
 );
diff --git a/govtool/frontend/src/components/organisms/Home/ConnectWalletTo.tsx b/govtool/frontend/src/components/organisms/Home/ConnectWalletTo.tsx
index 28dce86a2..1bf5f362f 100644
--- a/govtool/frontend/src/components/organisms/Home/ConnectWalletTo.tsx
+++ b/govtool/frontend/src/components/organisms/Home/ConnectWalletTo.tsx
@@ -106,7 +106,7 @@ export const ConnectWalletTo = () => {
   return (
     <Box my={4} component="section" data-testid="connect-wallet-to-section">
       <Box display="flex" justifyContent="space-between" alignItems="center">
-        <Typography variant="title2">
+        <Typography variant="title">
           {t("home.connectWalletTo.section.title")}
         </Typography>
         <Button
@@ -125,8 +125,8 @@ export const ConnectWalletTo = () => {
           sm: "repeat(2, 1fr)",
           lg: "repeat(3, 1fr)",
         }}
-        gap={4}
-        mt={4}
+        gap={3.75}
+        mt={3.75}
       >
         {CONNECT_WALLET_TO_CARDS.map(({ title, description, path }) => (
           <HomeCard
diff --git a/govtool/frontend/src/components/organisms/Home/HelpBuildGovTool.tsx b/govtool/frontend/src/components/organisms/Home/HelpBuildGovTool.tsx
index 2fb058c13..bd057d1d7 100644
--- a/govtool/frontend/src/components/organisms/Home/HelpBuildGovTool.tsx
+++ b/govtool/frontend/src/components/organisms/Home/HelpBuildGovTool.tsx
@@ -33,7 +33,7 @@ export const HelpBuildGovTool = ({ my = 4 }: { my?: number }) => {
 
   return (
     <Box my={my} component="section" data-testid="help-build-govtool-section">
-      <Typography variant="title2">
+      <Typography variant="title">
         {t("home.helpBuildGovTool.section.title")}
       </Typography>
       <Box
@@ -43,8 +43,8 @@ export const HelpBuildGovTool = ({ my = 4 }: { my?: number }) => {
           sm: "repeat(2, 1fr)",
           lg: "repeat(3, 1fr)",
         }}
-        gap={4}
-        mt={4}
+        gap={3.75}
+        mt={3.75}
       >
         {GOVTOOL_CARD_LINKS.map(({ title, description, url }) => (
           <HomeCard
diff --git a/govtool/frontend/src/components/organisms/Home/OpenToAny.tsx b/govtool/frontend/src/components/organisms/Home/OpenToAny.tsx
index 5d42a362c..ec05c8f40 100644
--- a/govtool/frontend/src/components/organisms/Home/OpenToAny.tsx
+++ b/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="title2">
+      <Typography variant="title">
         {t("home.openToAny.section.title")}
       </Typography>
       <Box
@@ -97,8 +97,8 @@ export const OpenToAny = () => {
           sm: "repeat(2, 1fr)",
           lg: "repeat(3, 1fr)",
         }}
-        gap={4}
-        mt={4}
+        gap={3.75}
+        mt={3.75}
       >
         {OPEN_TO_ANY_CARDS.map(({ title, description, path, url }) => (
           <HomeCard
diff --git a/govtool/frontend/src/components/organisms/Home/Socials.tsx b/govtool/frontend/src/components/organisms/Home/Socials.tsx
index 2420e8e8c..51132b219 100644
--- a/govtool/frontend/src/components/organisms/Home/Socials.tsx
+++ b/govtool/frontend/src/components/organisms/Home/Socials.tsx
@@ -26,7 +26,7 @@ export const Socials = ({ my = 4 }: { my?: number }) => {
 
   return (
     <Box my={my} component="section" data-testid="join-discussion-section">
-      <Typography variant="title2">
+      <Typography variant="title">
         {t("home.joinDiscussion.section.title")}
       </Typography>
       <Box
@@ -36,8 +36,8 @@ export const Socials = ({ my = 4 }: { my?: number }) => {
           sm: "repeat(2, 1fr)",
           lg: "repeat(3, 1fr)",
         }}
-        gap={4}
-        mt={4}
+        gap={3.75}
+        mt={3.75}
       >
         {SOCIAL_CARDS.map(({ title, description, url }) => (
           <HomeCard
diff --git a/govtool/frontend/src/components/organisms/Home/UsefulLinks.tsx b/govtool/frontend/src/components/organisms/Home/UsefulLinks.tsx
index 62fbebe9f..175246793 100644
--- a/govtool/frontend/src/components/organisms/Home/UsefulLinks.tsx
+++ b/govtool/frontend/src/components/organisms/Home/UsefulLinks.tsx
@@ -63,7 +63,7 @@ export const UsefulLinks = ({ align = "left" }: Props) => {
 
   return (
     <div>
-      <Typography variant="title2" sx={{ mb: 4, textAlign: align }}>
+      <Typography variant="title" sx={{ mb: 4, textAlign: align }}>
         {t("usefulLinks.title")}
       </Typography>
       <Box
@@ -73,8 +73,8 @@ export const UsefulLinks = ({ align = "left" }: Props) => {
           sm: "repeat(2, 1fr)",
           lg: "repeat(4, 1fr)",
         }}
-        gap={4}
-        mt={4}
+        gap={3.75}
+        mt={3.75}
       >
         {Object.entries(LINKS).map(([key, { url }]) => (
           <Card
@@ -89,10 +89,10 @@ export const UsefulLinks = ({ align = "left" }: Props) => {
               gap: 1,
             }}
           >
-            <Typography>
+            <Typography component="h3" variant="titleH3">
               {t(`usefulLinks.${key as keyof typeof LINKS}.title`)}
             </Typography>
-            <Typography variant="caption" sx={{ mb: 1 }}>
+            <Typography variant="body" sx={{ mb: 1 }}>
               {t(`usefulLinks.${key as keyof typeof LINKS}.description`)}
             </Typography>
             <Link
@@ -110,7 +110,11 @@ export const UsefulLinks = ({ align = "left" }: Props) => {
                 },
               }}
             >
-              <Typography color="primary" variant="body2">
+              <Typography
+                color="primary"
+                variant="body2"
+                sx={{ fontSize: "21px" }}
+              >
                 {t(`usefulLinks.${key as keyof typeof LINKS}.link`)}
               </Typography>
               <img
diff --git a/govtool/frontend/src/pages/Home.tsx b/govtool/frontend/src/pages/Home.tsx
index c89ac8ef3..a9a9b6021 100644
--- a/govtool/frontend/src/pages/Home.tsx
+++ b/govtool/frontend/src/pages/Home.tsx
@@ -47,7 +47,7 @@ export const Home = () => {
             sx={{
               whiteSpace: "pre-line",
             }}
-            variant="body1"
+            variant="title"
           >
             <Trans
               i18nKey="hero.description"
@@ -60,7 +60,7 @@ export const Home = () => {
                   rel="noopener noreferrer"
                   sx={{
                     cursor: "pointer",
-                    fontSize: 16,
+                    fontSize: 22,
                   }}
                 />,
               ]}

From a931f576d59d6695d37c73e2c89def5641cf450b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Sza=C5=82owski?= <michal.szalowski@gmail.com>
Date: Fri, 23 May 2025 14:03:19 +0200
Subject: [PATCH 2/2] feat(#3622): add hover on home cards

---
 .../frontend/src/components/molecules/HomeCard.tsx   | 12 ++++++++++--
 .../src/components/organisms/Home/OpenToAny.tsx      |  2 +-
 .../src/components/organisms/Home/UsefulLinks.tsx    |  1 +
 govtool/frontend/src/pages/Home.tsx                  |  1 +
 4 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/govtool/frontend/src/components/molecules/HomeCard.tsx b/govtool/frontend/src/components/molecules/HomeCard.tsx
index b5a644075..a5ab9b29b 100644
--- a/govtool/frontend/src/components/molecules/HomeCard.tsx
+++ b/govtool/frontend/src/components/molecules/HomeCard.tsx
@@ -23,6 +23,12 @@ 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"
@@ -30,9 +36,11 @@ export const HomeCard = ({ title, description, onCardClick }: Props) => (
     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>
 );
diff --git a/govtool/frontend/src/components/organisms/Home/OpenToAny.tsx b/govtool/frontend/src/components/organisms/Home/OpenToAny.tsx
index ec05c8f40..d43961969 100644
--- a/govtool/frontend/src/components/organisms/Home/OpenToAny.tsx
+++ b/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
diff --git a/govtool/frontend/src/components/organisms/Home/UsefulLinks.tsx b/govtool/frontend/src/components/organisms/Home/UsefulLinks.tsx
index 175246793..502d3864f 100644
--- a/govtool/frontend/src/components/organisms/Home/UsefulLinks.tsx
+++ b/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">
diff --git a/govtool/frontend/src/pages/Home.tsx b/govtool/frontend/src/pages/Home.tsx
index a9a9b6021..078c44773 100644
--- a/govtool/frontend/src/pages/Home.tsx
+++ b/govtool/frontend/src/pages/Home.tsx
@@ -48,6 +48,7 @@ export const Home = () => {
               whiteSpace: "pre-line",
             }}
             variant="title"
+            component="h1"
           >
             <Trans
               i18nKey="hero.description"