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

import { Box, Button, Card, CardBody, CardHeader, Heading, Image, 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"}
      boxShadow='md'
      overflow={'hidden'}
      position={'relative'}
      rounded={"lg"}
    >
      <CardBody 
      position={'absolute'}
      h={"100%"}
      w={'100%'}
      bottom={0}
      backgroundColor={'#ffffff'}
      backdropFilter='blur(1px)'
      >
        

        
        <Box mb={0}   display={'flex'}  justifyContent={'space-between'} h={"100%"}  w={"100%"}>

          <Box display={"flex"} flexDirection={'column'} alignItems={"start"}>
        <Heading className="web-text-large " mb={0} size="md">{heading}</Heading>
          
            <Text className="web-text-medium" as={"span"} isTruncated={true}>
              {subHeading}
            </Text>
            <Button fontWeight={"normal"} className="web-text-xsmall" ps={3} pe={3} color={'white'} bgGradient='linear(to-r, #1E114B, #1E114B)' variant={'solid'} rounded={'sm'} size={'xs'}>{ctoBtnTitle}</Button>
        </Box>
        
        <Box  display={'flex'} alignItems={'center'}>
        <Image boxShadow={'inner'} rounded={'sm'} w={140} h={"80px"} src={`https://rubix.betadelivery.com/${bgImage}`} />
        </Box>
          </Box>
        
       


      </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;