feat: migrate Layer2ProductCard to tailwind and shadcn

src/components/Layer2ProductCard.tsx

@@ -1,12 +1,12 @@
-// Libraries
 import { StaticImageData } from "next/image"
+import Image from "next/image"
+import Link from "next/link"
 import { useTranslation } from "next-i18next"
-import { Box, Center, Flex, Heading } from "@chakra-ui/react"
+import { RiExternalLinkLine } from "react-icons/ri"
 
-import { ButtonLink } from "@/components/Buttons"
-import { Image } from "@/components/Image"
-import InlineLink from "@/components/Link"
-import Text from "@/components/OldText"
+import { Card, CardContent, CardFooter, CardHeader } from "@/components/ui/card"
+
+import { Button } from "./ui/button"
 
 export type Layer2ProductCardProps = {
   children?: React.ReactNode
@@ -38,72 +38,85 @@ const Layer2ProductCard = ({
   const { t } = useTranslation("page-layer-2")
 
   return (
-    <Flex
-      color="text"
-      boxShadow={"0px 14px 66px rgba(0, 0, 0, 0.07)"}
-      direction="column"
-      justify="space-between"
-      bg="searchBackground"
-      borderRadius="base"
-      border={"1px solid lightBorder"}
-      textDecoration="none"
-      padding={2}
-      _hover={{ transition: "transform 0.1s", transform: "scale(1.02)" }}
-    >
-      <Center
-        bg={background}
-        boxShadow="inset 0px -1px 0px rgba(0, 0, 0, 0.1)"
-        minH="200px"
+    <Card className="text-foreground flex flex-col justify-between rounded-md border-0 p-2 shadow-lg transition-transform duration-100 hover:scale-[1.02] dark:bg-background-medium">
+      <div
+        className="mb-4 flex min-h-[200px] items-center justify-center border-b"
+        style={{ backgroundColor: background }}
       >
         <Image
           src={image}
           alt={alt}
           width={100}
-          maxH={"257px"}
-          style={{ objectFit: "contain" }}
+          height={100}
+          className="max-h-[257px] object-contain"
         />
-      </Center>
-      <Flex p={6} h="100%" direction="column">
-        <Box>
-          <Heading as="h3" fontSize={{ base: "xl", md: "2xl" }} mb={3}>
-            {name}
-          </Heading>
-          {children && (
-            <Box mt={4} mb={4}>
-              {children}
-            </Box>
-          )}
-          <Text fontSize="sm" mb={2} lineHeight="140%">
-            {description}
-          </Text>
-          {note.length > 0 && (
-            <Text fontSize="sm" mb={2} lineHeight="140%">
+      </div>
+
+      <CardHeader className="py-0">
+        <div className="space-y-4">
+          <h3 className="mb-3 text-xl font-semibold md:text-2xl">{name}</h3>
+          {children && <div>{children}</div>}
+        </div>
+      </CardHeader>
+
+      <CardContent className="flex flex-grow flex-col gap-0 space-y-1 px-6 py-4">
+        <div className="space-y-2">
+          <p className="text-sm leading-snug">{description}</p>
+
+          {note && (
+            <p className="text-sm leading-snug">
               {t("layer-2-note")} {note}
-            </Text>
+            </p>
           )}
-        </Box>
-        {bridge && (
-          <InlineLink href={bridge}>
-            {name} {t("layer-2-bridge")}
-          </InlineLink>
-        )}
-        {ecosystemPortal && (
-          <InlineLink href={ecosystemPortal}>
-            {name} {t("layer-2-ecosystem-portal")}
-          </InlineLink>
-        )}
-        {tokenLists && (
-          <InlineLink href={tokenLists}>
-            {name} {t("layer-2-token-lists")}
-          </InlineLink>
+        </div>
+
+        <div className="space-y-1">
+          {bridge && (
+            <Link
+              href={bridge}
+              className="block text-primary underline hover:text-primary/80"
+            >
+              {name} {t("layer-2-bridge")}
+            </Link>
+          )}
+
+          {ecosystemPortal && (
+            <Link
+              href={ecosystemPortal}
+              className="block text-primary underline hover:text-primary/80"
+            >
+              {name} {t("layer-2-ecosystem-portal")}
+            </Link>
+          )}
+
+          {tokenLists && (
+            <Link
+              href={tokenLists}
+              className="block text-primary underline hover:text-primary/80"
+            >
+              {name} {t("layer-2-token-lists")}
+            </Link>
+          )}
+        </div>
+      </CardContent>
+
+      <CardFooter className="mt-2 p-2">
+        {url && (
+          <Button
+            variant={"default"}
+            asChild
+            className="w-full rounded-sm hover:text-white hover:shadow-[4px_4px_4px_rgba(147,51,234,0.25)] dark:bg-primary-action dark:hover:bg-primary/90 dark:hover:shadow-[4px_4px_4px_rgba(0,0,0,0.9)]"
+          >
+            <Link
+              href={url}
+              className="flex items-center gap-0 text-lg text-white no-underline"
+            >
+              {t("layer-2-explore")} {name} <RiExternalLinkLine />
+            </Link>
+          </Button>
         )}
-      </Flex>
-      <Box>
-        <ButtonLink m={2} href={url} display="flex">
-          {t("layer-2-explore")} {name}
-        </ButtonLink>
-      </Box>
-    </Flex>
+      </CardFooter>
+    </Card>
   )
 }
 

src/components/ui/button.tsx

@@ -0,0 +1,56 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { Slot } from "@radix-ui/react-slot"
+
+import { cn } from "@/lib/utils/cn"
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+        outline:
+          "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
+        secondary:
+          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-10 px-4 py-2",
+        sm: "h-9 rounded-md px-3",
+        lg: "h-11 rounded-md px-8",
+        icon: "h-10 w-10",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button"
+    return (
+      <Comp
+        className={cn(buttonVariants({ variant, size, className }))}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
+Button.displayName = "Button"
+
+export { Button, buttonVariants }