From 50125a62deeac5ac02845b9e17f91e96408994f9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Carlos=20S=C3=A1nchez?= <oceanrdn@gmail.com>
Date: Thu, 22 Aug 2024 14:18:47 +0200
Subject: [PATCH] cta button

---
 packages/react-app/src/components/Account.jsx |  2 +-
 packages/react-app/src/views/HomeView.jsx     | 17 ++++++++++++++++-
 2 files changed, 17 insertions(+), 2 deletions(-)

diff --git a/packages/react-app/src/components/Account.jsx b/packages/react-app/src/components/Account.jsx
index 3fa96300..27f01a35 100644
--- a/packages/react-app/src/components/Account.jsx
+++ b/packages/react-app/src/components/Account.jsx
@@ -91,7 +91,7 @@ export default function Account({
   const isAnonymous = userRole === USER_ROLES.anonymous;
 
   const connectWallet = (
-    <Button colorScheme="green" key="loginbutton" onClick={loadWeb3Modal}>
+    <Button colorScheme="green" key="loginbutton" onClick={loadWeb3Modal} variant="outline">
       {connectText || "connect"}
     </Button>
   );
diff --git a/packages/react-app/src/views/HomeView.jsx b/packages/react-app/src/views/HomeView.jsx
index fde433bf..e1456c9c 100644
--- a/packages/react-app/src/views/HomeView.jsx
+++ b/packages/react-app/src/views/HomeView.jsx
@@ -1,12 +1,14 @@
 import React, { useMemo } from "react";
-import { Container, Box, Text, Center, useColorModeValue } from "@chakra-ui/react";
+import { Container, Box, Text, Center, useColorModeValue, Button } from "@chakra-ui/react";
 import ChallengeExpandedCard from "../components/ChallengeExpandedCard";
 import { challengeInfo } from "../data/challenges";
 import useCustomColorModes from "../hooks/useCustomColorModes";
 import HeroLogo from "../components/icons/HeroLogo";
 import HeroDiamond from "../components/icons/HeroDiamond";
+import { useHistory } from "react-router-dom";
 
 export default function HomeView({ connectedBuilder, userProvider }) {
+  const history = useHistory();
   const { primaryFontColor, bgColor } = useCustomColorModes();
   const cardBgColor = useColorModeValue("sre.cardBackground", "sreDark.cardBackground");
 
@@ -20,6 +22,16 @@ export default function HomeView({ connectedBuilder, userProvider }) {
     );
   }, [connectedBuilder]);
 
+  const handleCtaClick = () => {
+    if (window.plausible) {
+      window.plausible("cta");
+    }
+
+    setTimeout(() => {
+      history.push(`/challenge/${Object.keys(challengeInfo)[0]}`);
+    }, 100);
+  };
+
   return (
     <Box>
       <Box
@@ -56,6 +68,9 @@ export default function HomeView({ connectedBuilder, userProvider }) {
           >
             <HeroLogo maxW="600px" height="auto" />
           </Center>
+          <Button onClick={handleCtaClick} colorScheme="green" mt={4} size="lg">
+            Start Building on Ethereum
+          </Button>
         </Container>
         <Box
           bgImg="/assets/header_platform.svg"