rubix-admin-panel/src/Pages/Community/CommunityBannerCard.jsx

import { Box, Button, Card, CardBody, CardHeader, Heading, Text } from "@chakra-ui/react";
import React from "react";
import WebButton from "../../Components/WebButton";
import { formatDate } from "../../Components/Functions/UTCConvertor";

const CommunityBannerCard = ({ bgImage, subHeading, heading, ctoBtnTitle, createdAt }) => {
  return (
    <Card
      bgImage={`https://rubix.betadelivery.com/${bgImage}`}
      color={'teal.900'}
      bgSize="cover"
      bgPosition="center"
      w={"100%"}
      h={"100%"}
      size={"md"}
      shadow={'md'}
      overflow={'hidden'}
      position={'relative'}
      rounded={"lg"}
    >
      <CardBody 
      position={'absolute'}
      h={"60%"}
      w={'100%'}
      bottom={0}
      backgroundColor={'#ffffffb4'}
      backdropFilter='blur(1px)'
      >
        <Heading className="web-text-large " mb={0} size="md">{heading}</Heading>

        
        <Box mb={0} display={"flex"} alignItems={"center"} w={250}>
            <Text className="web-text-medium" as={"span"} isTruncated={true}>
              {subHeading}
            </Text>
          </Box>
        
        <Button colorScheme="teal" rounded={'sm'} size={'xs'}>{ctoBtnTitle}</Button>

      </CardBody>
      <span 
      className="web-text-xsmall fw-bold"
      style={{
        position:"absolute",
        bottom:4,
        right:10,
        opacity:0.5
      }}>{formatDate(createdAt)}</span>
    </Card>
  );
};

export default CommunityBannerCard;