rubix/src/components/Card/HomeCard.jsx

/* eslint-disable react/prop-types */
/* eslint-disable no-unused-vars */
import { Box, Container, Text, Image, Button } from "@chakra-ui/react";
import cardimg from "../../assets/images/CardImg.png";
import { Badge } from "@chakra-ui/react";
import { Link } from "react-router-dom";

const HomeCard = ({ key, date, text, link }) => {
  return (
    <Box
      backgroundImage={
        "-webkit-gradient(linear, left bottom, left top, color-stop(0.33, #8d54f85c), color-stop(0.67, #f8697a75))"
      }
      padding={"1px"}
      borderRadius={"8px"}
      sx={{
        "@media (max-width: 600px)": {
          width: "90%",
          margin: "0 auto",
        },
      }}
    >
      <Box
        width={"420px"}
        background={"#151419"}
        borderRadius={"10px"}
        minHeight={"420px"}
        key={key}
        sx={{
          "@media (max-width: 600px)": {
            width: "100%",
            minHeight: "0",
          },
        }}
      >
        <Image src={cardimg} />
        <Box padding={"1rem"}>
          <Badge
            backgroundColor={"#565263"}
            color={"#fff"}
            fontWeight={"400"}
            borderRadius={"20px"}
            padding={"3px 16px"}
          >
            INSIGHT
          </Badge>

          <Text fontSize={"12px"} color={"#979797"} margin={"20px 0px"}>
            {date}
          </Text>
          <Text
            color={"#fff"}
            fontSize={"20px"}
            marginBottom={"20px"}
            minHeight={"70px"}
            maxWidth={"460px"}
          >
            {text}
          </Text>
          <Box
            display={"flex"}
            alignItems={"center"}
            _hover={
              {
                //   flexDirection: "column-reverse",
              }
            }
          >
            <Box
              position={"relative"}
              width={"10%"}
              _before={{
                content: '""',
                width: "100%",
                position: "absolute",
                left: "0",
                borderBottom: "1px solid #DE858E",
                zIndex: "2",
              }}
            ></Box>
            <Link to={link}>
              <Button
                position={"relative"}
                backgroundColor={"transparent"}
                color={"#fff"}
                fontFamily={"Poppins"}
                fontWeight={"400"}
                _hover={{
                  backgroundColor: "transparent",
                }}
              >
                Read More
              </Button>
            </Link>
          </Box>
        </Box>
      </Box>
    </Box>
  );
};

export default HomeCard;