--------------------- App page -----------------------
  
  function App(){
    return (
    <div>
    <Header />
    <Note
    title = "The first note"
    detail = "note Detail"
    img = {NoteList[0].img}
     />
    <Note
    title = {NoteList[1].title}
    detail = {NoteList[1].detail}
    img = {NoteList[1].img}
     />
    <Note
    title = {NoteList[2].title}
    detail = {NoteList[2].detail}
    img = {NoteList[2].img}
     />
    <Footer />
    </div>
    )
}

 ----------------- Note page ----------------------
function Note(props){
    return (
    <div className="note">
        <Detail info={props.title}/>
        <Detail info={props.detail}/>
        <Avatar img={props.img} />
    </div>
    )
}

--------------------- Avatar Page ----------------
function Avatar(props) {
  return <img className="circle-img" src={props.img} alt="avatar_img" />;
}
--------------------Details page -------------------
function Detail(props) {
  return <p>{props.info}</p>;
}