Add docs points button

dapp/src/pages/DashboardPage/AcrePointsCard.tsx

@@ -1,17 +1,24 @@
 import React from "react"
 import { TextLg, TextMd, TextSm } from "#/components/shared/Typography"
 import {
+  Button,
   Card,
   CardBody,
   CardHeader,
   CardProps,
+  Icon,
+  Link,
   Tag,
   TagLeftIcon,
   VStack,
 } from "@chakra-ui/react"
 import acrePointsCardPlaceholderSrc from "#/assets/images/acre-points-card-placeholder.png"
 import UserDataSkeleton from "#/components/shared/UserDataSkeleton"
-import { IconPlayerTrackNextFilled } from "@tabler/icons-react"
+import {
+  IconArrowUpRight,
+  IconPlayerTrackNextFilled,
+} from "@tabler/icons-react"
+import { EXTERNAL_HREF } from "#/constants"
 
 export default function AcrePointsCard(props: CardProps) {
   return (
@@ -51,6 +58,21 @@ export default function AcrePointsCard(props: CardProps) {
             <TextMd color="grey.500" fontWeight="medium">
               Stake now to secure your spot
             </TextMd>
+            {/* TODO: Update `ButtonLink` component and 'link' Button theme variant */}
+            <Button
+              as={Link}
+              href={`${EXTERNAL_HREF.DOCS}/acre-points-program`}
+              isExternal
+              variant="ghost"
+              color="brand.400"
+              iconSpacing={1}
+              rightIcon={
+                <Icon as={IconArrowUpRight} boxSize={4} color="brand.400" />
+              }
+              mt={4}
+            >
+              Read documentation
+            </Button>
           </VStack>
         </UserDataSkeleton>
       </CardBody>