return ( <div className="d-flex flex-column gap-4"> <h2 className="h5 fw-bold"> <span className="rounded-circle d-inline-flex align-items-center justify-content-center fw-bolder h5 me-2" style={{ width: "48px", height: "48px", border: "1px solid #82E299", }} > 1 </span> DAO Info & KYC </h2> <Widget src="nui.sking.near/widget/Input.Text" props={{ label: "DAO Name", placeholder: "Lorem Ipsum", size: "md", }} /> <Widget src="nui.sking.near/widget/Input.Text" props={{ label: ( <> DAO Address{" "} <span className="text-black-50 fw-light small">(auto-filled)</span> </> ), placeholder: "sample-dao-name.sputnik-dao.near", size: "md", disabled: true, }} /> <Widget src="nui.sking.near/widget/Input.Text" props={{ label: ( <> Soul Bound Token Issuer{" "} <span className="text-black-50 fw-light small">(optional)</span> </> ), placeholder: "The address of the token issuer", size: "md", }} /> <Widget src="nui.sking.near/widget/Input.Text" props={{ label: "Purpose", placeholder: "Please add the purpose of your DAO", size: "md", textarea: true, inputProps: { rows: 5, }, }} /> <h3 className="h5 fw-bold"> KYC <span className="text-black-50 fw-light small">(optional)</span> </h3> <Widget src="nui.sking.near/widget/Input.Text" props={{ label: ( <> Please explain your DAO's Legal Status and Jurisdiction{" "} <span className="text-black-50 fw-light small">(if known)</span> </> ), placeholder: "LLC", size: "md", }} /> <Widget src="nui.sking.near/widget/Input.Text" props={{ label: ( <> Please provide a link to your DAO's Legal Document{" "} <span className="text-black-50 fw-light small">(if any)</span> </> ), placeholder: "https://Legal_Document", size: "md", }} /> </div> );