can we map the website using arrays of objects and display components?

Simply pass the arrays as a prop to CardComponent, such as a data prop.

<CardComponent data={data1} />
...
<CardComponent data={dataTwo} />

And map the passed data prop in CardComponent. Remember that the mapping needs to return everything wrapped in a single node (i.e. div, Fragment, etc..) and should have an attached react key.

Example

const CardComponent = ({ data }) => {
  return (
    <>
      {data.map((data, index) => {
        return (
          <Fragment key={index}>
            <Title>{data.title}</Title>
            <Desc>{data.desc}</Desc>
            <Img src={data.img} />
          </Fragment>
        );
     })}
    </>
  );
};