Implement CardButton component

dapp/src/pages/LandingPage/CardButton.tsx

@@ -0,0 +1,27 @@
+import React from "react"
+import { Link, Button, ButtonProps, LinkProps, Icon } from "@chakra-ui/react"
+import { IconArrowUpRight } from "@tabler/icons-react"
+
+type CardButtonProps = ButtonProps & Pick<LinkProps, "isExternal" | "href">
+
+export default function CardButton(props: CardButtonProps) {
+  const { children, isExternal, ...restProps } = props
+  return (
+    <Button
+      as={Link}
+      variant="card"
+      isExternal={isExternal}
+      {...restProps}
+      _hover={{ bg: "gold.100" }}
+      leftIcon={
+        isExternal ? (
+          <Icon as={IconArrowUpRight} color="brand.400" w={4} h={4} />
+        ) : undefined
+      }
+      iconSpacing={1}
+      fontWeight="semibold"
+    >
+      {children}
+    </Button>
+  )
+}

dapp/src/pages/LandingPage/index.tsx

@@ -12,6 +12,7 @@ import IconCard from "./IconCard"
 import ValueCard from "./ValueCard"
 import TVLCard from "./TVLCard"
 import ContentCard from "./ContentCard"
+import CardButton from "./CardButton"
 
 const MOCK_SEASON_DUE_TIMESTAMP = new Date(2024, 3, 20).getTime() / 1000
 const PARTNER_LOGOS = [baseLogo, thresholdLogo, ledgerLogo, wormholeLogo]
@@ -76,6 +77,12 @@ export default function LandingPage() {
             />
           ))}
         </ContentCard>
+        <CardButton href="#" isExternal>
+          Docs
+        </CardButton>
+        <CardButton href="#" isExternal>
+          FAQ
+        </CardButton>
       </VStack>
     </Flex>
   )