WIP: feat(#3622): home page redesign

Author: MSzalowski

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

@@ -0,0 +1,25 @@
+import { Card } from "./Card";
+import { Typography } from "../atoms";
+
+type Props = {
+  title: string;
+  description: string;
+  onCardClick?: () => void;
+};
+
+export const HomeCard = ({ title, description, onCardClick }: Props) => (
+  <Card
+    sx={{
+      flexBasis: 0,
+      boxShadow: "2px 2px 20px 0px rgba(47, 98, 220, 0.20)",
+      boxSizing: "border-box",
+      display: "flex",
+      flexDirection: "column",
+      gap: 1,
+    }}
+    onCardClick={onCardClick}
+  >
+    <Typography>{title}</Typography>
+    <Typography variant="caption">{description}</Typography>
+  </Card>
+);

govtool/frontend/src/components/organisms/Hero.tsx

@@ -0,0 +1,106 @@
+import { Box } from "@mui/material";
+import { useTranslation } from "react-i18next";
+
+import I18n from "@/i18n";
+import { BUDGET_DISCUSSION_PATHS, PATHS, PDF_PATHS } from "@/consts";
+
+import { Typography } from "../../atoms";
+import { HomeCard } from "../../molecules/HomeCard";
+import { useModal } from "@/context";
+
+const CONNECT_WALLET_TO_CARDS = [
+  {
+    title: I18n.t("home.connectWalletTo.cards.discussBudgetProposals.title"),
+    description: I18n.t(
+      "home.connectWalletTo.cards.discussBudgetProposals.description",
+    ),
+    path: BUDGET_DISCUSSION_PATHS.budgetDiscussion,
+  },
+  {
+    title: I18n.t("home.connectWalletTo.cards.createBudgetProposal.title"),
+    description: I18n.t(
+      "home.connectWalletTo.cards.createBudgetProposal.description",
+    ),
+    path: BUDGET_DISCUSSION_PATHS.budgetDiscussion,
+  },
+  {
+    title: I18n.t("home.connectWalletTo.cards.discussGovernanceActions.title"),
+    description: I18n.t(
+      "home.connectWalletTo.cards.discussGovernanceActions.description",
+    ),
+    path: PDF_PATHS.proposalDiscussion,
+  },
+  {
+    title: I18n.t("home.connectWalletTo.cards.proposeGovernanceAction.title"),
+    description: I18n.t(
+      "home.connectWalletTo.cards.proposeGovernanceAction.description",
+    ),
+    path: PDF_PATHS.proposalDiscussionPropose,
+  },
+  {
+    title: I18n.t("home.connectWalletTo.cards.registerToVote.title"),
+    description: I18n.t(
+      "home.connectWalletTo.cards.registerToVote.description",
+    ),
+    path: PATHS.registerAsDirectVoter,
+  },
+  {
+    title: I18n.t("home.connectWalletTo.cards.delegateVote.title"),
+    description: I18n.t("home.connectWalletTo.cards.delegateVote.description"),
+    path: PATHS.dRepDirectory,
+  },
+  {
+    title: I18n.t("home.connectWalletTo.cards.becomeDRep.title"),
+    description: I18n.t("home.connectWalletTo.cards.becomeDRep.description"),
+    path: PATHS.registerAsdRep,
+  },
+  {
+    title: I18n.t("home.connectWalletTo.cards.voteOnGovernanceActions.title"),
+    description: I18n.t(
+      "home.connectWalletTo.cards.voteOnGovernanceActions.description",
+    ),
+    path: PATHS.dashboardGovernanceActions,
+  },
+];
+
+export const ConnectWalletTo = () => {
+  const { t } = useTranslation();
+  const { openModal } = useModal();
+
+  const handleCardClick = ({ path }: { path?: string }) => {
+    if (!path) return;
+    openModal({
+      type: "chooseWallet",
+      state: {
+        pathToNavigate: path,
+      },
+    });
+  };
+
+  return (
+    <Box my={4} component="section" data-testid="connect-wallet-to-section">
+      <Typography variant="title2">
+        {t("home.connectWalletTo.section.title")}
+      </Typography>
+      <Box
+        display="grid"
+        gridTemplateColumns={{
+          xxs: "repeat(1, 1fr)",
+          sm: "repeat(2, 1fr)",
+          lg: "repeat(3, 1fr)",
+        }}
+        gap={4}
+        mt={4}
+      >
+        {CONNECT_WALLET_TO_CARDS.map(({ title, description, path }) => (
+          <HomeCard
+            key={title}
+            title={title}
+            description={description}
+            onCardClick={() => handleCardClick({ path })}
+          />
+        ))}
+      </Box>
+    </Box>
+  );
+};

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

@@ -0,0 +1,65 @@
+import { Box } from "@mui/material";
+import { useTranslation } from "react-i18next";
+
+import I18n from "@/i18n";
+import { GOVTOOL_URLS } from "@/consts";
+
+import { Typography } from "../../atoms";
+import { HomeCard } from "../../molecules/HomeCard";
+import { openInNewTab } from "@/utils";
+
+const GOVTOOL_CARD_LINKS = [
+  {
+    title: I18n.t("home.helpBuildGovTool.cards.githubRepo.title"),
+    description: I18n.t("home.helpBuildGovTool.cards.githubRepo.description"),
+    url: GOVTOOL_URLS.githubRepo,
+  },
+  {
+    title: I18n.t("home.helpBuildGovTool.cards.documentation.title"),
+    description: I18n.t(
+      "home.helpBuildGovTool.cards.documentation.description",
+    ),
+    url: GOVTOOL_URLS.documentation,
+  },
+  {
+    title: I18n.t("home.helpBuildGovTool.cards.telegram.title"),
+    description: I18n.t("home.helpBuildGovTool.cards.telegram.description"),
+    url: GOVTOOL_URLS.telegram,
+  },
+];
+
+export const HelpBuildGovTool = () => {
+  const { t } = useTranslation();
+
+  const handleCardClick = ({ url }: { url?: string }) => {
+    if (!url) return;
+    openInNewTab(url);
+  };
+
+  return (
+    <Box my={4} component="section" data-testid="help-build-govtool-section">
+      <Typography variant="title2">
+        {t("home.helpBuildGovTool.section.title")}
+      </Typography>
+      <Box
+        display="grid"
+        gridTemplateColumns={{
+          xxs: "repeat(1, 1fr)",
+          sm: "repeat(2, 1fr)",
+          lg: "repeat(3, 1fr)",
+        }}
+        gap={4}
+        mt={4}
+      >
+        {GOVTOOL_CARD_LINKS.map(({ title, description, url }) => (
+          <HomeCard
+            key={title}
+            title={title}
+            description={description}
+            onCardClick={() => handleCardClick({ url })}
+          />
+        ))}
+      </Box>
+    </Box>
+  );
+};