{/* FORM CONTAINER */}
        <form
           
          ref={form}
          className="h-2/3 overflow-scroll lg:h-full lg:w-1/2 bg-red-50 rounded-xl text-xl flex flex-col gap-8 justify-center p-12"
        >
          <span>Dear Nomrota,</span>
          <textarea
            rows={5}
            className="bg-red-500 h-[64px] border-b-2 border-b-black outline-none resize-none  lg:min-h-64px"
            name="user_message"
          />

          <span>My mail address is:</span>
          <input
            name="user_email"
            type="text"
            className="bg-transparent border-b-2 border-b-black outline-none"
          />
          <span>Regards</span>
          <button className="bg-purple-200 rounded font-semibold text-gray-600 p-4">
            Send
          </button>
          {success && (
            <span className="text-green-600 font-semibold">
              Your message has been sent successfully!
            </span>
          )}
          {error && (
            <span className="text-red-600 font-semibold">
              Something went wrong!
            </span>
          )}
        </form>