Implement IconCard component

Image assets will be replaced with SVGs

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

@@ -0,0 +1,47 @@
+import React, { useMemo } from "react"
+import { Box, Flex, VStack, HStack } from "@chakra-ui/react"
+import boostCardIcon from "#/assets/images/card-icon-boost-arrow.png"
+import misteryCardIcon from "#/assets/images/card-icon-question-mark.png"
+import { useCountdown } from "#/hooks"
+import IconCard from "./IconCard"
+
+const MOCK_SEASON_DUE_TIMESTAMP = new Date(2024, 3, 20).getTime() / 1000
+
+export default function LandingPage() {
+  const countdown = useCountdown(MOCK_SEASON_DUE_TIMESTAMP)
+  const unlockableDuePeriod = useMemo(
+    () =>
+      Object.entries(countdown)
+        .filter(([label]) => label !== "seconds")
+        .reduce(
+          (acc, [label, value]) =>
+            `${acc} ${value}${label.charAt(0).toLowerCase()}`,
+          "",
+        )
+        .trim(),
+    [countdown],
+  )
+
+  return (
+    // TODO: To be removed, changes for testing purposes only
+    <Flex w="full" flexFlow="column" px={10} h="400vh">
+      <Box h="336px" />
+      <VStack spacing={4} mx={32}>
+        <HStack spacing={5} align="stretch" mb={1} w="full">
+          <IconCard
+            flex={1}
+            header="Rewards Boost"
+            body="Platinum Boost"
+            icon={{ src: boostCardIcon, maxH: 239 }}
+          />
+          <IconCard
+            flex={1}
+            header="Mystery Box"
+            body={`Unlockable in ${unlockableDuePeriod}`}
+            icon={{ src: misteryCardIcon, maxH: 177 }}
+          />
+        </HStack>
+      </VStack>
+    </Flex>
+  )
+}

dapp/src/router/index.tsx

@@ -1,13 +1,13 @@
 import React from "react"
 import { createBrowserRouter } from "react-router-dom"
-import OverviewPage from "#/pages/OverviewPage"
+import LandingPage from "#/pages/LandingPage"
 import ActivityPage from "#/pages/ActivityPage"
 import { routerPath } from "./path"
 
 export const router = createBrowserRouter([
   {
     path: routerPath.home,
-    element: <OverviewPage />,
+    element: <LandingPage />,
   },
   {
     path: `${routerPath.activity}/:activityId`,

dapp/src/theme/Card.ts

@@ -22,6 +22,46 @@ export const cardTheme: ComponentSingleStyleConfig = {
         },
       }
     },
+    icon: {
+      // @ts-expect-error To override false positive types error
+      container: {
+        px: 6,
+        py: 5,
+        bg: "gold.300",
+        display: "grid",
+        gridAutoFlow: "row",
+        gridAutoColumns: "1fr auto",
+        gridTemplateRows: "auto 1fr",
+        maxH: { base: "auto", xl: 40 },
+        gap: { base: 2, xl: 0 },
+      },
+      header: {
+        p: 0,
+        fontSize: "2xl",
+        lineHeight: 8,
+        fontWeight: "bold",
+        color: "grey.700",
+      },
+      body: {
+        p: 0,
+        fontSize: "md",
+        mt: { base: "0", xl: "auto" },
+        lineHeight: 6,
+        fontWeight: "medium",
+        color: "grey.500",
+        flex: 0,
+      },
+      footer: {
+        px: { base: 4, xl: 20 },
+        py: 0,
+        gridArea: { base: "unset", xl: "1 / 2 / 3 / 3" },
+        alignSelf: "end",
+        ml: { base: "auto", xl: -6 },
+        mr: -6,
+        mt: { base: "auto", xl: -5 },
+        mb: -5,
+      },
+    },
   },
   sizes: {
     md: {