cta button

Author: carletex

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>
   );

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"