// pages/user/ad/AdCreate.js
<div className="container-fluid mt-2">
  <Sidebar />
  <div
    className="d-flex justify-content-center align-items-center vh-100"
    style={{ marginTop: "-7%" }}
  >
    <div className="col-lg-6">
      <button onClick={handleSell} className="btn btn-secondary p-5 col-12">
        <span className="h2">Sell</span>
      </button>
      {/* on Sell click show options */}
      {sell && (
        <div className="my-1">
          <button
            onClick={() => navigate(`/ad/create/sell/House`)}
            className="btn btn-secondary p-5 col-6"
          >
            House
          </button>
          <button
            onClick={() => navigate(`/ad/create/sell/Land`)}
            className="btn btn-secondary p-5 col-6"
          >
            Land
          </button>
        </div>
      )}
    </div>

    <div className="col-lg-6">
      <button onClick={handleRent} className="btn btn-secondary p-5 col-12">
        <span className="h2">Rent</span>
      </button>
      {/* on Rent click show options */}
      {rent && (
        <div className="my-1">
          <button
            onClick={() => navigate(`/ad/create/rent/House`)}
            className="btn btn-secondary p-5 col-6"
          >
            House
          </button>
          <button
            onClick={() => navigate(`/ad/create/rent/Land`)}
            className="btn btn-secondary p-5 col-6"
          >
            Land
          </button>
        </div>
      )}
    </div>
  </div>
</div>