Landing page's card components

dapp/src/constants/externalHref.ts

@@ -1,4 +1,6 @@
 export const EXTERNAL_HREF = {
   // TODO: Add a correct link
   DISCORD: "https://discord.com/",
+  DOCS: "",
+  FAQ: "",
 }

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/ContentCard.tsx

@@ -0,0 +1,18 @@
+import React from "react"
+import { Card, CardBody, CardHeader, CardProps } from "@chakra-ui/react"
+
+export type ContentCardProps = CardProps & {
+  header: React.ReactNode
+  withBackground?: boolean
+}
+
+export default function ContentCard(props: ContentCardProps) {
+  const { header, children, ...restProps } = props
+
+  return (
+    <Card variant="content" {...restProps}>
+      <CardHeader>{header}</CardHeader>
+      <CardBody>{children}</CardBody>
+    </Card>
+  )
+}

dapp/src/pages/LandingPage/IconCard.tsx

@@ -0,0 +1,30 @@
+import React from "react"
+import {
+  Card,
+  CardBody,
+  CardFooter,
+  CardHeader,
+  CardProps,
+  Image,
+  ImageProps,
+} from "@chakra-ui/react"
+
+type IconCardProps = CardProps & {
+  header: React.ReactNode
+  body: React.ReactNode
+  icon: ImageProps
+}
+
+export default function IconCard(props: IconCardProps) {
+  const { header, body, icon, ...restProps } = props
+
+  return (
+    <Card variant="icon" {...restProps}>
+      <CardHeader>{header}</CardHeader>
+      <CardBody>{body}</CardBody>
+      <CardFooter>
+        <Image pointerEvents="none" {...icon} />
+      </CardFooter>
+    </Card>
+  )
+}

dapp/src/pages/LandingPage/TVLCard.tsx

@@ -0,0 +1,22 @@
+import React from "react"
+import { Text } from "@chakra-ui/react"
+import ValueCard from "./ValueCard"
+
+export default function TVLCard() {
+  return (
+    <ValueCard
+      header="Total value locked"
+      value="2,202.92 BTC"
+      color="brand.400"
+      footer={[
+        <ValueCard.FooterItem>
+          <Text as="span" color="green.400" mr={2}>
+            +2%
+          </Text>
+          +24h
+        </ValueCard.FooterItem>,
+        <ValueCard.FooterItem>USD 27,202,964.47</ValueCard.FooterItem>,
+      ]}
+    />
+  )
+}