rubix/src/components/Card/MobileHomeCard.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 "swiper/css";
import "swiper/css/pagination";
import "swiper/css/navigation";

import { Navigation, Pagination } from "swiper/modules";
import { Swiper, SwiperSlide } from "swiper/react";

const MobileHomeCard = ({ key, date, 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"}
      sx={{
        "@media (max-width: 600px)": {
          width: "90%",
          margin: "0 auto",
        },
      }}
    >
      <Box
        width={"502px"}
        background={"#151419"}
        borderRadius={"10px"}
        minHeight={"415px !important"}
        key={key}
        sx={{
          "@media (max-width: 600px)": {
            width: "100%",
            minHeight: "0",
          },
        }}
      >
        <Image src={cardimg} borderRadius={"10px"} />
        <Box padding={"1rem"}>
          <Badge
            backgroundColor={"#565263"}
            color={"#fff"}
            fontWeight={"400"}
            borderRadius={"20px"}
            padding={"3px 16px"}
          >
            INSIGHT
          </Badge>

          <Text fontSize={"12px"} color={"#979797"} margin={"25px 0px"}>
            {date}
          </Text>
          <Text
            color={"#fff"}
            fontSize={"16px"}
            marginBottom={"20px"}
            minHeight={"73px"}
            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>
            <Button
              position={"relative"}
              backgroundColor={"transparent"}
              color={"#fff"}
              fontFamily={"Poppins"}
              fontWeight={"400"}
              _hover={{
                backgroundColor: "transparent",
              }}
            >
              Read More
            </Button>
          </Box>
        </Box>
      </Box>
    </Box>
  );
};

export default MobileHomeCard;