// components/cards/AdCard.js
export default function AdCard({ ad }) {
  return (
    <div className="col-lg-4 p-4 gx-4 gy-4">
      <div className="card hoverable shadow">
        <img
          src={ad?.photos?.[0]?.Location}
          alt={`${ad?.type}-${ad?.address}-${ad?.action}-${ad?.price}`}
          style={{ height: "250px", objectFit: "cover" }}
        />

        <div className="card-body">
          <div className="d-flex justify-content-between">
            <h3>{ad?.price}</h3>
          </div>

          <p>Ad features</p>
        </div>
      </div>
    </div>
  );
}

Now import in Home.js

// Home.js
  return (
    <div>
      <h2 className="display-1 bg-primary text-light p-5 h1">For Sell</h2>
      <div className="container">
        <div className="row">
          {adsForSell?.map((ad) => (
            <AdCard ad={ad} key={ad._id} />
          ))}
        </div>
      </div>

      <h2 className="display-1 bg-primary text-light p-5 h1 mt-2">For Rent</h2>
      <div className="container">
        <div className="row">
          {adsForRent?.map((ad) => (
            <AdCard ad={ad} key={ad._id} />
          ))}
        </div>
      </div>
    </div>
  );
}