From 60223a23c81fbfed5ecd28089c0253aaf7f0758e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Sza=C5=82owski?= <michal.szalowski@gmail.com>
Date: Fri, 9 May 2025 11:40:46 +0200
Subject: [PATCH] feat(#3467, #3494): change Hero card CTA behaviour and docs

---
 CHANGELOG.md                                  |  3 +++
 .../src/components/organisms/Hero.tsx         | 24 +++++++++----------
 .../src/components/organisms/HomeCards.tsx    |  1 +
 govtool/frontend/src/i18n/locales/en.json     |  2 +-
 4 files changed, 17 insertions(+), 13 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 109302a79..5a015889f 100644
--- a/CHANGELOG.md
+++ b/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)
diff --git a/govtool/frontend/src/components/organisms/Hero.tsx b/govtool/frontend/src/components/organisms/Hero.tsx
index e28c0d40a..a69726264 100644
--- a/govtool/frontend/src/components/organisms/Hero.tsx
+++ b/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")}
diff --git a/govtool/frontend/src/components/organisms/HomeCards.tsx b/govtool/frontend/src/components/organisms/HomeCards.tsx
index 8cc1e63f2..d456cb2d3 100644
--- a/govtool/frontend/src/components/organisms/HomeCards.tsx
+++ b/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
diff --git a/govtool/frontend/src/i18n/locales/en.json b/govtool/frontend/src/i18n/locales/en.json
index 7f25ca853..8e13dff3a 100644
--- a/govtool/frontend/src/i18n/locales/en.json
+++ b/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"
   },