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";
import { Link } from "react-router-dom";

const LearnCard = ({ id, src, alt, text, href }) => {
  return (
    <Box padding={"1px"} borderRadius={"10px"}>
      {/* {images.map((img) => (
        <></>
      ))} */}

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

        <Box padding={"1rem"}>
          <Text
            color={"#E8E8E8"}
            fontSize={"18px"}
            fontFamily={"Poppins"}
            marginBottom={"20px"}
            // fontWeight={"100"}
            minHeight={"100px"}
          >
            {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={href} target="_blank" rel="noopener noreferrer">
              <Button
                position={"relative"}
                backgroundColor={"transparent"}
                color={"#fff"}
                fontFamily={"Poppins"}
                fontWeight={"400"}
                _hover={{
                  backgroundColor: "transparent",
                }}
              >
                Visit Website
              </Button>
            </Link>
          </Box>
        </Box>
      </Box>
    </Box>
  );
};

export default LearnCard;