index.js

export default function Home() {
  return (
    <div className="container p-3">
      <h3 className="text-center display-4">Welcome to Donator</h3>
      <div className="my-3 row">
        <img
          className="img-thumbnail col-md-5"
          alt="sasuke"
          src="/sasuke.jpg"
        />
        <div className="col-md-7">
          <h3 className="display-6">Help Sasuke Avenge His Family</h3>
          <p className="h3 text-center">Donation form</p>
          <div className="py-3 px-5">
            <div className="input-group mb-3">
              <span className="input-group-text" id="basic-addon1">
                Name
              </span>
              <input
                type="text"
                className="form-control"
                placeholder="Name"
                aria-label="Name"
                aria-describedby="basic-addon1"
              />
            </div>
            <div className="input-group mb-3">
              <span className="input-group-text" id="basic-addon1">
                Email
              </span>
              <input
                type="email"
                className="form-control"
                placeholder="Email"
                aria-label="Email"
                aria-describedby="basic-addon1"
              />
            </div>
            <div className="input-group mb-3">
              <span className="input-group-text" id="basic-addon1">
                Amount (Naira)
              </span>
              <input
                type="number"
                className="form-control"
                placeholder="Amount"
                aria-label="amount"
                aria-describedby="basic-addon1"
              />
            </div>
            <button type="button" className="btn btn-warning">
              Make Donation
            </button>
          </div>
          <div className="col d-flex justify-content-center">
            <div className="card col-md-4">
              <div className="card-body">
                <h5 className="card-title text-center">#500</h5>
                <p className="card-text text-center">
                  Subscribe to a Montly donation of #500
                </p>
                <button
                  type="button"
                  className="btn btn-outline-success btn-block"
                >
                  Subscribe
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}