rubix/src/components/Card/LearnCard.jsx

/* eslint-disable react/prop-types */
/* eslint-disable no-unused-vars */
import { Box, Container, Text, Image, Button } from "@chakra-ui/react";

const LearnCard = ({ id, src, alt, text }) => {
  return (
    <Box
      backgroundImage={
        "-webkit-gradient(linear, left bottom, left top, color-stop(0.33, #8D54F8), color-stop(0.67, #F8697A));"
      }
      padding={"1px"}
      borderRadius={"10px"}
    >
      {/* {images.map((img) => (
        <></>
      ))} */}

      <Box
        display="inline-block"
        width={"650px"}
        height={"300px"}
        background={"#151419"}
        borderRadius={"10px"}
        key={id}
        sx={{
          "@media (max-width: 435px)": {
            width: "390px",
          },
        }}
      >
        <Box padding={"1rem"}>
          <Image src={src} alt={alt} />
        </Box>

        <Box padding={"1rem"} height={"110px"}>
          <Text
            color={"#fff"}
            fontSize={"18px"}
            fontFamily={"Poppins"}
            marginBottom={"20px"}
            fontWeight={"300"}
          >
            {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>
            <Button
              position={"relative"}
              backgroundColor={"transparent"}
              color={"#fff"}
              fontFamily={"Poppins"}
              fontWeight={"400"}
              _hover={{
                backgroundColor: "transparent",
              }}
            >
              Visit Website
            </Button>
          </Box>
        </Box>
      </Box>
    </Box>
  );
};

export default LearnCard;