return ( <div className="container"> <div className="row mb-3"> <div> <h1>Widget Factory</h1> <h3> <b>Guide:</b> Using Open Web Components </h3> <p> The <i>composability</i> of blockchain-based frontend solutions changes the game for web developers! Below are useful resources for anyone building on Near Social. </p> </div> </div> <div className="row mb-3"> <div> <Widget src="mob.near/widget/Applications" /> </div> </div> <div className="row mb-3"> <div> <h3>Reusable Components</h3> <div className="mb-3"></div> <a className="btn btn-outline-primary" href="https://near.social/#/hack.near/widget/Tutorial" > Tutorial </a> <a className="btn btn-outline-primary" href="https://near.social/#/mob.near/widget/AllWidgets" > All Widgets </a> <a className="btn btn-outline-primary" href="https://near.social/#/mob.near/widget/LastWidgets" > Latest </a> </div> </div> <ul> <li>react-bootstrap</li> <li>Widget src=""</li> <li>Commit Button</li> <li>Markdown Editor</li> <li>Styled Components</li> </ul> <div className="row mb-3"></div> <h4>Example Buttons</h4> <div> <a className="btn btn-primary" href=""> Primary </a> <a className="btn btn-secondary" href=""> Secondary </a> <a className="btn btn-success" href=""> Success </a> <a className="btn btn-warning" href=""> Warning </a> <a className="btn btn-danger" href=""> Danger </a> <a className="btn btn-info" href=""> Info </a> <a className="btn btn-light" href=""> Light </a> <a className="btn btn-dark" href=""> Dark </a> </div> <div className="row mb-3"></div> <div> <a className="btn btn-outline-primary" href=""> Primary </a> <a className="btn btn-outline-secondary" href=""> Secondary </a> <a className="btn btn-outline-success" href=""> Success </a> <a className="btn btn-outline-warning" href=""> Warning </a> <a className="btn btn-outline-danger" href=""> Danger </a> <a className="btn btn-outline-info" href=""> Info </a> <a className="btn btn-outline-light" href=""> Light </a> <a className="btn btn-outline-dark" href=""> Dark </a> </div> </div> );