feat(#3467, #3494): change Hero card CTA behaviour and docs

CHANGELOG.md

@@ -16,6 +16,9 @@ changes.
 
 ### Changed
 
+- Update first CTA on GovTool home page [Issue 3467](https://github.com/IntersectMBO/govtool/issues/3467)
+- Change link to docs in learn more about governance [Issue 3494](https://github.com/IntersectMBO/govtool/issues/3494)
+
 ### Removed
 
 - Remove additional canonicalization of the metadata [Issue 3591](https://github.com/IntersectMBO/govtool/issues/3591)

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

@@ -1,18 +1,14 @@
 import { useMemo } from "react";
-import { useNavigate } from "react-router-dom";
 import { Trans } from "react-i18next";
 import { Box, Link } from "@mui/material";
+import { ArrowDownward } from "@mui/icons-material";
 
 import { Button, Typography } from "@atoms";
-import { IMAGES, PATHS } from "@consts";
-import { useCardano, useModal } from "@context";
+import { IMAGES } from "@consts";
 import { useScreenDimension, useTranslation } from "@hooks";
 import { openInNewTab } from "@utils";
 
 export const Hero = () => {
-  const { isEnabled } = useCardano();
-  const { openModal } = useModal();
-  const navigate = useNavigate();
   const { isMobile, screenWidth } = useScreenDimension();
   const { t } = useTranslation();
   const IMAGE_SIZE = screenWidth < 640 ? 300 : screenWidth < 860 ? 400 : 600;
@@ -33,7 +29,8 @@ export const Hero = () => {
     return screenWidth / 11;
   }, [screenWidth]);
 
-  const onClickVotingPower = () => openInNewTab("https://docs.gov.tools");
+  const onClickVotingPower = () =>
+    openInNewTab("https://docs.cardano.org/about-cardano/governance-overview");
 
   return (
     <Box
@@ -79,12 +76,15 @@ export const Hero = () => {
         <Button
           data-testid="hero-connect-wallet-button"
           onClick={() => {
-            if (isEnabled) {
-              navigate(PATHS.dashboard);
-            } else {
-              openModal({ type: "chooseWallet" });
-            }
+            const homeCards =
+              window.document.getElementsByClassName("home-cards")[0];
+
+            homeCards.scrollIntoView({
+              behavior: "smooth",
+              block: "nearest",
+            });
           }}
+          endIcon={<ArrowDownward />}
           size={isMobile ? "medium" : "extraLarge"}
         >
           {t("hero.connectWallet")}

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

@@ -60,6 +60,7 @@ export const HomeCards = () => {
       gridTemplateColumns="repeat(auto-fill, minmax(300px, 866px))"
       justifyContent="center"
       rowGap={4.625}
+      className="home-cards"
     >
       {/* DELEGATE CARD */}
       <ActionCard

govtool/frontend/src/i18n/locales/en.json

@@ -539,7 +539,7 @@
     }
   },
   "hero": {
-    "connectWallet": "Connect your wallet to start",
+    "connectWallet": "Participate now",
     "description": "Cardano Governance lets Ada holders have a say in the network's future.\n\nYou can vote directly, find someone to represent you, or become a representative for others.\n\nYou can also propose changes in the network yourself, put these up for discussion and eventually, a vote.\n\n<0>Learn more about governance</0> in the guide, or have a look around the app and see Cardano Governance in action.",
     "headline": "Cardano \n Governance Tool"
   },