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: 500px)": {
            width: "320px",
            fontWeight: "400",
            minHeight: "290px",
          },
        }}
      >
        <Box
          padding={"1rem"}
          sx={{
            "@media (max-width: 600px)": {
              padding: "0rem",
            },
          }}
        >
          <Image
            height={"60px"}
            src={src}
            alt={alt}
            sx={{
              "@media (max-width: 600px)": {
                height: "40px",
              },
            }}
          />
        </Box>

        <Box padding={"1rem"} 
          sx={{
            "@media (max-width: 500px)": {
              padding: "1rem 0px",
            },
          }}
        >
          <Text
            color={"#E8E8E8"}
            fontSize={"18px"}
            fontFamily={"Poppins"}
            marginBottom={"20px"}
            // fontWeight={"100"}
            minHeight={"100px"}
            sx={{
              "@media (max-width: 500px)": {
                fontSize: "14px",
              },
            }}
          >
            {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",
                }}
                sx={{
                  "@media (max-width: 500px)": {
                    fontSize: "14px",
                  },
                }}
              >
                Visit Website
              </Button>
            </Link>
          </Box>
        </Box>
      </Box>
    </Box>
  );
};

export default LearnCard;