From bf2ec8eba602ac09762f86420c5f45e5e3bc0ab9 Mon Sep 17 00:00:00 2001
From: Joe Chen <jiajuncjoe@gmail.com>
Date: Sun, 2 Feb 2025 16:13:12 +0800
Subject: [PATCH 1/2] Migrate Roadmap/RoadmapActionCard/index.tsx to Shadcn

---
 .../Roadmap/RoadmapActionCard/index.tsx       | 37 ++++++-------------
 1 file changed, 12 insertions(+), 25 deletions(-)

diff --git a/src/components/Roadmap/RoadmapActionCard/index.tsx b/src/components/Roadmap/RoadmapActionCard/index.tsx
index 60275f9b4eb..a60f7f2f84a 100644
--- a/src/components/Roadmap/RoadmapActionCard/index.tsx
+++ b/src/components/Roadmap/RoadmapActionCard/index.tsx
@@ -1,14 +1,8 @@
-import {
-  Center,
-  Flex,
-  Heading,
-  LinkBox,
-  LinkOverlay,
-  Text,
-} from "@chakra-ui/react"
-
 import { ButtonLink } from "@/components/Buttons"
-import { Image } from "@/components/Image"
+import { TwImage } from "@/components/Image"
+import { Center, Flex } from "@/components/ui/flex"
+import { LinkBox } from "@/components/ui/link-box"
+import { LinkOverlay } from "@/components/ui/link-box"
 
 import futureProofing from "@/public/images/roadmap/roadmap-future.png"
 import security from "@/public/images/roadmap/roadmap-security.png"
@@ -41,22 +35,15 @@ const RoadmapActionCard = ({
   const imgSrc = images[image] ?? images.futureProofing
 
   return (
-    <LinkBox
-      as={Flex}
-      direction="column"
-      border="1px solid"
-      borderColor="lightBorder"
-    >
-      <Center background="cardGradient" h="260px">
-        <Image src={imgSrc} alt={alt} style={{ objectFit: "contain" }} />
+    <LinkBox className="flex flex-col border border-border">
+      <Center className="h-[260px] bg-main-gradient">
+        <TwImage src={imgSrc} alt={alt} style={{ objectFit: "contain" }} />
       </Center>
-      <Flex p={6} flex="1" flexDir="column" justify="space-between" gap={4}>
-        <Heading as="h3" size="md">
-          {title}
-        </Heading>
-        <Text flex="1">{description}</Text>
-        <LinkOverlay as={ButtonLink} href={href}>
-          {buttonText}
+      <Flex className="flex-1 flex-col justify-between gap-4 p-6">
+        <h3 className="text-2xl">{title}</h3>
+        <p className="flex-1">{description}</p>
+        <LinkOverlay asChild>
+          <ButtonLink href={href}>{buttonText}</ButtonLink>
         </LinkOverlay>
       </Flex>
     </LinkBox>

From 7ad651999b420eca03e41b123f1410804defbdf7 Mon Sep 17 00:00:00 2001
From: Pablo Pettinari <pettinarip@gmail.com>
Date: Mon, 3 Feb 2025 20:03:16 +0100
Subject: [PATCH 2/2] Apply suggestions from code review

---
 src/components/Roadmap/RoadmapActionCard/index.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/Roadmap/RoadmapActionCard/index.tsx b/src/components/Roadmap/RoadmapActionCard/index.tsx
index a60f7f2f84a..dedba08c862 100644
--- a/src/components/Roadmap/RoadmapActionCard/index.tsx
+++ b/src/components/Roadmap/RoadmapActionCard/index.tsx
@@ -35,8 +35,8 @@ const RoadmapActionCard = ({
   const imgSrc = images[image] ?? images.futureProofing
 
   return (
-    <LinkBox className="flex flex-col border border-border">
-      <Center className="h-[260px] bg-main-gradient">
+    <LinkBox className="flex flex-col border">
+      <Center className="h-[260px] bg-gradient-main">
         <TwImage src={imgSrc} alt={alt} style={{ objectFit: "contain" }} />
       </Center>
       <Flex className="flex-1 flex-col justify-between gap-4 p-6">