diff --git a/govtool/frontend/src/components/molecules/Card.tsx b/govtool/frontend/src/components/molecules/Card.tsx index 6e18617b1..dd2912d68 100644 --- a/govtool/frontend/src/components/molecules/Card.tsx +++ b/govtool/frontend/src/components/molecules/Card.tsx @@ -1,19 +1,20 @@ -import { Chip, Paper, SxProps } from "@mui/material"; +import { Chip, Paper, SxProps, PaperProps } from "@mui/material"; import { Theme } from "@mui/material/styles"; import { PropsWithChildren } from "react"; import { errorRed, orange, primaryBlue, successGreen } from "@/consts"; -type CardProps = PropsWithChildren & { - border?: boolean; - elevation?: number; - dataTestId?: string; - label?: string; - labelDataTestId?: string; - sx?: SxProps; - variant?: "default" | "error" | "primary" | "success" | "warning"; - onCardClick?: () => void; -}; +type CardProps = Omit & + PropsWithChildren & { + border?: boolean; + elevation?: number; + dataTestId?: string; + label?: string; + labelDataTestId?: string; + sx?: SxProps; + variant?: "default" | "error" | "primary" | "success" | "warning"; + onCardClick?: () => void; + }; const COLORS = { default: { @@ -48,14 +49,22 @@ export const Card = ({ labelDataTestId = "card-label", sx, onCardClick, + ...props }: CardProps) => { const colors = COLORS[variant]; return ( { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + onCardClick?.(); + } + }} sx={{ backgroundColor: (theme) => colors.backgroundColor ?? `${theme.palette.neutralWhite}4D`, diff --git a/govtool/frontend/src/components/molecules/HomeCard.tsx b/govtool/frontend/src/components/molecules/HomeCard.tsx new file mode 100644 index 000000000..ef896e4eb --- /dev/null +++ b/govtool/frontend/src/components/molecules/HomeCard.tsx @@ -0,0 +1,34 @@ +import { Card } from "./Card"; +import { Typography } from "../atoms"; + +type Props = { + title: string; + description: string; + onCardClick?: () => void; +}; + +export const HomeCard = ({ title, description, onCardClick }: Props) => ( + + {title} + {description} + +); diff --git a/govtool/frontend/src/components/organisms/Hero.tsx b/govtool/frontend/src/components/organisms/Hero.tsx deleted file mode 100644 index a69726264..000000000 --- a/govtool/frontend/src/components/organisms/Hero.tsx +++ /dev/null @@ -1,109 +0,0 @@ -import { useMemo } from "react"; -import { Trans } from "react-i18next"; -import { Box, Link } from "@mui/material"; -import { ArrowDownward } from "@mui/icons-material"; - -import { Button, Typography } from "@atoms"; -import { IMAGES } from "@consts"; -import { useScreenDimension, useTranslation } from "@hooks"; -import { openInNewTab } from "@utils"; - -export const Hero = () => { - const { isMobile, screenWidth } = useScreenDimension(); - const { t } = useTranslation(); - const IMAGE_SIZE = screenWidth < 640 ? 300 : screenWidth < 860 ? 400 : 600; - - const paddingHorizontal = useMemo(() => { - if (screenWidth < 640) return 3; - if (screenWidth < 1512) return 9.375; - if (screenWidth < 1728) return 14; - if (screenWidth < 1920) return 27.375; - if (screenWidth < 2560) return 39.375; - return 49.25; - }, [screenWidth]); - - const imageRightMargin = useMemo(() => { - if (screenWidth <= 860) return -(IMAGE_SIZE / 4); - if (screenWidth <= 1440) return -(IMAGE_SIZE / 15); - if (screenWidth <= 1728) return screenWidth / 20; - return screenWidth / 11; - }, [screenWidth]); - - const onClickVotingPower = () => - openInNewTab("https://docs.cardano.org/about-cardano/governance-overview"); - - return ( - - - - {t("hero.headline")} - - - , - ]} - /> - - - - - hero - - - ); -}; diff --git a/govtool/frontend/src/components/organisms/Home/ConnectWalletTo.tsx b/govtool/frontend/src/components/organisms/Home/ConnectWalletTo.tsx new file mode 100644 index 000000000..28dce86a2 --- /dev/null +++ b/govtool/frontend/src/components/organisms/Home/ConnectWalletTo.tsx @@ -0,0 +1,142 @@ +import { Box } from "@mui/material"; +import { useTranslation } from "react-i18next"; +import { useNavigate } from "react-router-dom"; + +import I18n from "@/i18n"; +import { BUDGET_DISCUSSION_PATHS, PATHS, PDF_PATHS } from "@/consts"; +import { useCardano, useModal } from "@/context"; + +import { Typography, Button } from "../../atoms"; +import { HomeCard } from "../../molecules/HomeCard"; + +const isProposalDiscussionForumEnabled = JSON.parse( + import.meta.env.VITE_IS_PROPOSAL_DISCUSSION_FORUM_ENABLED || false, +); + +const CONNECT_WALLET_TO_CARDS = [ + ...(isProposalDiscussionForumEnabled + ? [ + { + 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 { isEnabled, stakeKey } = useCardano(); + const navigate = useNavigate(); + + const handleCardClick = ({ path }: { path?: string }) => { + if (!path) return; + openModal({ + type: "chooseWallet", + state: { + pathToNavigate: path, + }, + }); + }; + + const onClickConnectButton = () => { + if (isEnabled && stakeKey) { + navigate(PATHS.dashboard); + } + openModal({ type: "chooseWallet" }); + }; + + return ( + + + + {t("home.connectWalletTo.section.title")} + + + + + {CONNECT_WALLET_TO_CARDS.map(({ title, description, path }) => ( + handleCardClick({ path }) : undefined} + /> + ))} + + + ); +}; diff --git a/govtool/frontend/src/components/organisms/Home/HelpBuildGovTool.tsx b/govtool/frontend/src/components/organisms/Home/HelpBuildGovTool.tsx new file mode 100644 index 000000000..2fb058c13 --- /dev/null +++ b/govtool/frontend/src/components/organisms/Home/HelpBuildGovTool.tsx @@ -0,0 +1,60 @@ +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, + }, +]; + +export const HelpBuildGovTool = ({ my = 4 }: { my?: number }) => { + const { t } = useTranslation(); + + const handleCardClick = ({ url }: { url?: string }) => { + if (!url) return; + openInNewTab(url); + }; + + return ( + + + {t("home.helpBuildGovTool.section.title")} + + + {GOVTOOL_CARD_LINKS.map(({ title, description, url }) => ( + handleCardClick({ url }) : undefined} + /> + ))} + + + ); +}; diff --git a/govtool/frontend/src/components/organisms/Home/OpenToAny.tsx b/govtool/frontend/src/components/organisms/Home/OpenToAny.tsx new file mode 100644 index 000000000..5d42a362c --- /dev/null +++ b/govtool/frontend/src/components/organisms/Home/OpenToAny.tsx @@ -0,0 +1,116 @@ +import { Box } from "@mui/material"; +import { useNavigate } from "react-router-dom"; +import { useTranslation } from "react-i18next"; + +import I18n from "@/i18n"; +import { + BUDGET_DISCUSSION_PATHS, + OUTCOMES_PATHS, + PATHS, + PDF_PATHS, +} from "@/consts"; +import { openInNewTab } from "@/utils"; + +import { Typography } from "../../atoms"; +import { HomeCard } from "../../molecules/HomeCard"; + +const isProposalDiscussionForumEnabled = JSON.parse( + import.meta.env.VITE_IS_PROPOSAL_DISCUSSION_FORUM_ENABLED || false, +); + +const isOutcomesEnabled = JSON.parse( + import.meta.env.VITE_IS_GOVERNANCE_OUTCOMES_PILLAR_ENABLED || false, +); + +const OPEN_TO_ANY_CARDS = [ + { + title: I18n.t("home.openToAny.cards.drepDirectory.title"), + description: I18n.t("home.openToAny.cards.drepDirectory.description"), + path: PATHS.dRepDirectory, + }, + ...(isProposalDiscussionForumEnabled + ? [ + { + title: I18n.t("home.openToAny.cards.budgetProposal.title"), + description: I18n.t( + "home.openToAny.cards.budgetProposal.description", + ), + path: BUDGET_DISCUSSION_PATHS.budgetDiscussion, + }, + { + title: I18n.t("home.openToAny.cards.proposalDiscussion.title"), + description: I18n.t( + "home.openToAny.cards.proposalDiscussion.description", + ), + path: PDF_PATHS.proposalDiscussion, + }, + ] + : []), + { + title: I18n.t("home.openToAny.cards.governanceActions.title"), + description: I18n.t("home.openToAny.cards.governanceActions.description"), + path: PATHS.governanceActions, + }, + ...(isOutcomesEnabled + ? [ + { + title: I18n.t("home.openToAny.cards.governanceOutcomes.title"), + description: I18n.t( + "home.openToAny.cards.governanceOutcomes.description", + ), + path: OUTCOMES_PATHS.governanceActionsOutcomes, + }, + ] + : []), + { + title: I18n.t("home.openToAny.cards.guides.title"), + description: I18n.t("home.openToAny.cards.guides.description"), + url: "https://docs.gov.tools/cardano-govtool/using-govtool", + }, +]; + +export const OpenToAny = () => { + const navigate = useNavigate(); + const { t } = useTranslation(); + + const handleCardClick = ({ path, url }: { path?: string; url?: string }) => { + if (path) { + navigate(path); + } else if (url) { + openInNewTab(url); + } + }; + + return ( + + + {t("home.openToAny.section.title")} + + + {OPEN_TO_ANY_CARDS.map(({ title, description, path, url }) => ( + handleCardClick({ path, url }) : undefined + } + /> + ))} + + + ); +}; diff --git a/govtool/frontend/src/components/organisms/Home/Socials.tsx b/govtool/frontend/src/components/organisms/Home/Socials.tsx new file mode 100644 index 000000000..2420e8e8c --- /dev/null +++ b/govtool/frontend/src/components/organisms/Home/Socials.tsx @@ -0,0 +1,53 @@ +import { Box } from "@mui/material"; +import { useTranslation } from "react-i18next"; + +import I18n from "@/i18n"; +import { SOCIAL_MEDIA_URLS } from "@/consts"; + +import { Typography } from "../../atoms"; +import { HomeCard } from "../../molecules/HomeCard"; +import { openInNewTab } from "@/utils"; + +const SOCIAL_CARDS = [ + { + title: I18n.t("home.joinDiscussion.cards.discord.title"), + description: I18n.t("home.joinDiscussion.cards.discord.description"), + url: SOCIAL_MEDIA_URLS.discord, + }, +]; + +export const Socials = ({ my = 4 }: { my?: number }) => { + const { t } = useTranslation(); + + const handleCardClick = ({ url }: { url?: string }) => { + if (!url) return; + openInNewTab(url); + }; + + return ( + + + {t("home.joinDiscussion.section.title")} + + + {SOCIAL_CARDS.map(({ title, description, url }) => ( + handleCardClick({ url }) : undefined} + /> + ))} + + + ); +}; diff --git a/govtool/frontend/src/components/organisms/UsefulLinks.tsx b/govtool/frontend/src/components/organisms/Home/UsefulLinks.tsx similarity index 64% rename from govtool/frontend/src/components/organisms/UsefulLinks.tsx rename to govtool/frontend/src/components/organisms/Home/UsefulLinks.tsx index 90bc1a740..62fbebe9f 100644 --- a/govtool/frontend/src/components/organisms/UsefulLinks.tsx +++ b/govtool/frontend/src/components/organisms/Home/UsefulLinks.tsx @@ -1,9 +1,10 @@ import { Box, Link } from "@mui/material"; import { useTranslation } from "@hooks"; -import { Typography } from "../atoms"; import { ICONS } from "@/consts"; -import { Card } from "../molecules"; + +import { Typography } from "../../atoms"; +import { Card } from "../../molecules"; const LINKS = { ccPortal: { @@ -12,6 +13,45 @@ const LINKS = { intersectWebsite: { url: "https://www.intersectmbo.org/", }, + tempo: { + url: "https://tempo.vote/", + }, + "1694io": { + url: "https://www.1694.io/", + }, + governanceSpace: { + url: "https://governancespace.com/", + }, + syncAi: { + url: "https://www.syncgovhub.com/app", + }, + ekklesia: { + url: "https://2025budget.intersectmbo.org/", + }, + adaStat: { + url: "https://adastat.net/", + }, + cexplorer: { + url: "https://cexplorer.io/", + }, + cardanoScan: { + url: "https://cardanoscan.io/", + }, + cardanoBudget: { + url: "https://cardanobudget.com/", + }, + budgetCardanoAfrica: { + url: "https://budget.cardano.africa/", + }, + reachYourPeople: { + url: "https://www.ryp.io/", + }, + "1694Tools": { + url: "https://1694-tools.vercel.app/", + }, + sanchonetGovernanceExplorer: { + url: "https://sancho.cardanoconnect.io/", + }, } as const; type Props = { @@ -23,19 +63,18 @@ export const UsefulLinks = ({ align = "left" }: Props) => { return (
- + {t("usefulLinks.title")} {Object.entries(LINKS).map(([key, { url }]) => ( { sx={{ flexBasis: 0, boxShadow: "2px 2px 20px 0px rgba(47, 98, 220, 0.20)", - maxWidth: 464, - minWidth: 264, minHeight: 196, boxSizing: "border-box", display: "flex", diff --git a/govtool/frontend/src/components/organisms/Home/index.ts b/govtool/frontend/src/components/organisms/Home/index.ts new file mode 100644 index 000000000..e514c04dc --- /dev/null +++ b/govtool/frontend/src/components/organisms/Home/index.ts @@ -0,0 +1,5 @@ +export * from "./ConnectWalletTo"; +export * from "./HelpBuildGovTool"; +export * from "./OpenToAny"; +export * from "./Socials"; +export * from "./UsefulLinks"; diff --git a/govtool/frontend/src/components/organisms/HomeCards.tsx b/govtool/frontend/src/components/organisms/HomeCards.tsx deleted file mode 100644 index d456cb2d3..000000000 --- a/govtool/frontend/src/components/organisms/HomeCards.tsx +++ /dev/null @@ -1,151 +0,0 @@ -import { useCallback } from "react"; -import { useNavigate } from "react-router-dom"; -import { Box } from "@mui/material"; - -import { IMAGES, PATHS, PDF_PATHS } from "@consts"; -import { useFeatureFlag, useModal } from "@context"; -import { ActionCard } from "@molecules"; -import { useTranslation } from "@hooks"; -import { openInNewTab } from "@utils"; -import { LINKS } from "@/consts/links"; - -export const HomeCards = () => { - const { isProposalDiscussionForumEnabled } = useFeatureFlag(); - const navigate = useNavigate(); - const { openModal } = useModal(); - const { t } = useTranslation(); - - const openWalletModal = useCallback( - (pathToNavigate: string) => { - openModal({ - type: "chooseWallet", - state: { - pathToNavigate, - }, - }); - }, - [openModal], - ); - - const onClickLearnMoreAboutDelegation = () => openInNewTab(LINKS.DELEGATING); - - const onClickLearnMoreAboutDRepRegistration = () => - openInNewTab(LINKS.REGISTER_AS_A_DREP); - - const onClickLearnMoreAboutDirectVoterRegistration = () => - openInNewTab(LINKS.DIRECT_VOTING); - - const onClickLearnMoreAboutProposingGovAction = () => - openInNewTab(LINKS.PROPOSE_A_GOVERNANCE_ACTION); - - const navigateToGovActions = useCallback( - () => navigate(PATHS.governanceActions), - [navigate], - ); - - const navigateToDRepDirecotry = useCallback( - () => navigate(PATHS.dRepDirectory), - [navigate], - ); - - const navigateToProposalDiscussionPillar = useCallback( - () => navigate(PDF_PATHS.proposalDiscussion), - [navigate], - ); - - return ( - - {/* DELEGATE CARD */} - - {/* DELEGATE CARD END */} - {/* REGISTER AS DREP CARD */} - openWalletModal(PATHS.registerAsdRep)} - firstButtonLabel={t("home.cards.registerAsDRep.firstButtonLabel")} - imageHeight={80} - imageURL={IMAGES.govActionRegisterImage} - imageWidth={70} - secondButtonAction={onClickLearnMoreAboutDRepRegistration} - secondButtonLabel={t("learnMore")} - title={t("home.cards.registerAsDRep.title")} - /> - {/* REGISTER AS DREP CARD END */} - {/* REGISTER AS DIRECT VOTER CARD */} - openWalletModal(PATHS.registerAsDirectVoter)} - firstButtonLabel={t( - "home.cards.registerAsDirectVoter.firstButtonLabel", - )} - imageHeight={84} - imageURL={IMAGES.directVoterImage} - imageWidth={84} - secondButtonAction={onClickLearnMoreAboutDirectVoterRegistration} - secondButtonLabel={t("learnMore")} - title={t("home.cards.registerAsDirectVoter.title")} - /> - {/* REGISTER AS DIRECT VOTER CARD END */} - {/* GOV ACTIONS CARD */} - - {/* GOV ACTIONS CARD END */} - {/* PROPOSE GOV ACTION CARD */} - openWalletModal(PATHS.createGovernanceAction)} - firstButtonLabel={t( - "home.cards.proposeAGovernanceAction.firstButtonLabel", - )} - imageHeight={84} - imageURL={IMAGES.proposeGovActionImage} - imageWidth={84} - secondButtonAction={ - isProposalDiscussionForumEnabled - ? navigateToProposalDiscussionPillar - : onClickLearnMoreAboutProposingGovAction - } - secondButtonLabel={t( - isProposalDiscussionForumEnabled - ? "home.cards.proposeAGovernanceAction.secondButtonLabel" - : "learnMore", - )} - title={t("home.cards.proposeAGovernanceAction.title")} - /> - {/* PROPOSE GOV ACTION CARD END */} - - ); -}; diff --git a/govtool/frontend/src/components/organisms/index.ts b/govtool/frontend/src/components/organisms/index.ts index f1c136904..c3ade3106 100644 --- a/govtool/frontend/src/components/organisms/index.ts +++ b/govtool/frontend/src/components/organisms/index.ts @@ -18,8 +18,6 @@ export * from "./Footer"; export * from "./GovernanceActionDetailsCard"; export * from "./GovernanceActionDetailsCardData"; export * from "./GovernanceActionsToVote"; -export * from "./Hero"; -export * from "./HomeCards"; export * from "./Modal"; export * from "./RegisterAsDRepSteps"; export * from "./Slider"; @@ -29,3 +27,4 @@ export * from "./ValidatedGovernanceActionCard"; export * from "./ValidatedGovernanceVotedOnCard"; export * from "./VoteContext"; export * from "./WrongRouteInfo"; +export * from "./Home"; diff --git a/govtool/frontend/src/consts/index.ts b/govtool/frontend/src/consts/index.ts index f07ea2941..a11ef438c 100644 --- a/govtool/frontend/src/consts/index.ts +++ b/govtool/frontend/src/consts/index.ts @@ -92,3 +92,13 @@ export const PPU_GOVERNANCE_GROUP_PARAMS_KEYS = [ "committeeMinSize", "committeeMaxTermLength", ]; + +export const SOCIAL_MEDIA_URLS = { + discord: + "https://discord.com/channels/1136727663583698984/1212344688523214869", +}; + +export const GOVTOOL_URLS = { + githubRepo: "https://github.com/IntersectMBO/govtool", + documentation: "https://docs.gov.tools", +}; diff --git a/govtool/frontend/src/i18n/locales/en.json b/govtool/frontend/src/i18n/locales/en.json index 9e259798d..3740ee0da 100644 --- a/govtool/frontend/src/i18n/locales/en.json +++ b/govtool/frontend/src/i18n/locales/en.json @@ -556,36 +556,95 @@ }, "hero": { "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 in the guide, or have a look around the app and see Cardano Governance in action.", - "headline": "Cardano \n Governance Tool" + "description": "An Open Source Governance Application for the Cardano Blockchain\n<0>Learn more about Cardano Governance" }, "home": { - "cards": { - "delegate": { - "description": "Find a DRep to vote on your behalf.", - "firstButtonLabel": "View DRep Directory", - "title": "Delegate your Voting Power" - }, - "governanceActions": { - "description": "See all the Governance Actions submitted on chain. ", - "firstButtonLabel": "View Governance Actions", - "title": "View Governance Actions" - }, - "proposeAGovernanceAction": { - "description": "Submit your proposal for a Governance Action.", - "secondButtonLabel": "View Proposals", - "firstButtonLabel": "Connect to Propose", - "title": "Propose a Governance Action" - }, - "registerAsDRep": { - "description": "Accept delegated voting power from other Ada holders, and combine it with your own voting power. Vote with the accumulated Power on Governance Actions.", - "firstButtonLabel": "Connect to Register", - "title": "Become a DRep" - }, - "registerAsDirectVoter": { - "description": "Vote on Governance Actions using your own voting power", - "firstButtonLabel": "Connect to Register", - "title": "Become a Direct Voter" + "openToAny": { + "section": { "title": "Open to any and all users:" }, + "cards": { + "drepDirectory": { + "description": "DReps are representatives that vote for others.", + "title": "Browse the DRep Directory" + }, + "budgetProposal": { + "description": "Budget proposal and comments are open to public inspection.", + "title": "View Budget Proposals" + }, + "proposalDiscussion": { + "description": "Any user can read the proposals and view comments on future Actions.", + "title": "See Proposed Governance Actions" + }, + "governanceActions": { + "description": "See how the voting is progressing on any Governance Action.", + "title": "View Live Voting" + }, + "governanceOutcomes": { + "description": "See the outcomes and final votes on any Governance Action.", + "title": "View Voting Outcomes" + }, + "guides": { + "description": "The roadmap to this tool, to get you started in Cardano Governance.", + "title": "Read our Guides" + } + } + }, + "connectWalletTo": { + "section": { "title": "Connect a Cardano Wallet to:" }, + "cards": { + "discussBudgetProposals": { + "description": "Read comments and participate in discussions for Budget requests.", + "title": "Discuss Budget Proposals" + }, + "createBudgetProposal": { + "description": "Create a proposal to fund your project from the Cardano treasury.", + "title": "Create a Budget Proposal" + }, + "discussGovernanceActions": { + "description": "Read comments and participate in discussions for Governance Actions.", + "title": "Discuss Governance Actions" + }, + "proposeGovernanceAction": { + "description": "Create a discussion for an Action, and submit it on-chain.", + "title": "Propose a Governace Action" + }, + "registerToVote": { + "description": "Register yourself to vote on all Governace Actions", + "title": "Register to Vote" + }, + "delegateVote": { + "description": "Delegate your voting power to a representative (they vote for you).", + "title": "Delegate your vote to a DRep" + }, + "becomeDRep": { + "description": "DReps are representatives that vote for others.", + "title": "Become a DRep" + }, + "voteOnGovernanceActions": { + "description": "Cast your vote on Governance Actions as yourself or as a DRep.", + "title": "Vote on Governace Actions" + } + } + }, + "joinDiscussion": { + "section": { "title": "Join the discussion on social media" }, + "cards": { + "discord": { + "title": "Discord", + "description": "Governance Tools working group" + } + } + }, + "helpBuildGovTool": { + "section": { "title": "Help build GovTool" }, + "cards": { + "githubRepo": { + "title": "GitHub Repo", + "description": "View the GovTool source code and contribute on GitHub." + }, + "documentation": { + "title": "Documentation", + "description": "GovTool documentation and guides." + } } } }, @@ -825,7 +884,7 @@ "notVoted": "Not voted" }, "usefulLinks": { - "title": "Useful links", + "title": "Links to other Cardano Governance resources:", "ccPortal": { "title": "Check the Constitutional Committee Portal", "description": "See Interim Cardano Constitution and Constitutional committee votes rationales", @@ -835,6 +894,71 @@ "title": "Intersect website", "description": "Intersect is a member-based organization for the Cardano ecosystem — putting the community at the center of Cardano’s development", "link": "Intersect website" + }, + "tempo": { + "title": "Tempo", + "description": "Tempo, a tool for DReps Community Engagement", + "link": "Tempo" + }, + "1694io": { + "title": "1694.io", + "description": "CIP-1694 explained plus DRep list, DRep campaign, proposal discussion", + "link": "1694.io" + }, + "governanceSpace": { + "title": "Governance Space", + "description": "Decentralized Governance for Everyone", + "link": "Governance Space" + }, + "syncAi": { + "title": "SyncAI Governance Hub", + "description": "One collaborative space to explore proposals, chat, vote, and track alignment", + "link": "SyncAI" + }, + "ekklesia": { + "title": "Ekklesia", + "description": "Where DReps indicate which proposals they support for funding consideration", + "link": "Ekklesia" + }, + "adaStat": { + "title": "AdaStat", + "description": "AdaStat Cardano Explorer will show you full details about Cardano (ADA) blockchain", + "link": "AdaStat" + }, + "cexplorer": { + "title": "CExplorer", + "description": "Independent tool for your better staking /decision-making", + "link": "CExplorer" + }, + "cardanoScan": { + "title": "Cardanoscan", + "description": "The Cardano (ADA) Explorer, explore blocks, transactions, metadata, certificates, pools, assets and more", + "link": "Cardanoscan" + }, + "cardanoBudget": { + "title": "Cardano Budget Proposals 2025", + "description": "A tool to track the Cardano treasury and its budget proposals", + "link": "Cardano Budget" + }, + "budgetCardanoAfrica": { + "title": "Budget Cardano Africa", + "description": "In-depth analysis of Cardano's budget proposals and insights", + "link": "Budget Cardano Africa" + }, + "reachYourPeople": { + "title": "Reach Your People", + "description": "RYP is a communication and announcement hub for Cardano and other blockchains", + "link": "Reach Your People" + }, + "1694Tools": { + "title": "1694.Tools", + "description": "Cardano proposal explorer", + "link": "1694.Tools" + }, + "sanchonetGovernanceExplorer": { + "title": "SanchoNet Governance Explorer", + "description": "This explorer allows you to view governance activities and other data from the Cardano SanchoNet testnet", + "link": "SanchoNet Governance Explorer" } }, "about": "About", diff --git a/govtool/frontend/src/pages/DashboardHome.tsx b/govtool/frontend/src/pages/DashboardHome.tsx index c2ef40f71..6430083f5 100644 --- a/govtool/frontend/src/pages/DashboardHome.tsx +++ b/govtool/frontend/src/pages/DashboardHome.tsx @@ -1,7 +1,7 @@ import { Box } from "@mui/material"; -import { DashboardCards } from "@organisms"; -import { UsefulLinks } from "@/components/organisms/UsefulLinks"; +import { DashboardCards, HelpBuildGovTool, Socials } from "@organisms"; +import { UsefulLinks } from "@/components/organisms/Home/UsefulLinks"; import { useScreenDimension } from "@/hooks"; export const DashboardHome = () => { @@ -20,6 +20,8 @@ export const DashboardHome = () => { > + + ); }; diff --git a/govtool/frontend/src/pages/Home.tsx b/govtool/frontend/src/pages/Home.tsx index 8af4eefdf..c89ac8ef3 100644 --- a/govtool/frontend/src/pages/Home.tsx +++ b/govtool/frontend/src/pages/Home.tsx @@ -1,17 +1,26 @@ import { useEffect } from "react"; import { useNavigate } from "react-router-dom"; -import { Box } from "@mui/material"; +import { Box, Link } from "@mui/material"; +import { Trans } from "react-i18next"; -import { Background } from "@atoms"; +import { Background, Typography } from "@atoms"; import { PATHS } from "@consts"; import { useCardano } from "@context"; -import { TopNav, Hero, Footer, HomeCards } from "@organisms"; +import { + TopNav, + Footer, + UsefulLinks, + OpenToAny, + ConnectWalletTo, + Socials, + HelpBuildGovTool, +} from "@organisms"; import { WALLET_LS_KEY, getItemFromLocalStorage } from "@utils"; -import { UsefulLinks } from "@/components/organisms/UsefulLinks"; import { useScreenDimension } from "@/hooks"; export const Home = () => { const { isEnabled } = useCardano(); + const navigate = useNavigate(); const { screenWidth } = useScreenDimension(); @@ -25,19 +34,43 @@ export const Home = () => { - - - + + , + ]} + /> + + + + + + {/* FIXME: Footer should be on top of the layout. Should not be rerendered across the pages */}