Fix aba mapa do site e acessibilidade

src/App.js

@@ -45,6 +45,8 @@ import EditProfilePage from './Pages/EditProfilePage.js'
 import PublicUserPage from './Pages/PublicUserPage.js'
 import UploadPage from './Pages/UploadPage.js'
 import EditLearningObjectPage from './Pages/EditLearningObjectPage.js'
+import SiteMap from './Pages/SiteMap'
+import Accessibility from './Pages/Accessibility'
 
 export default function App(){
   // eslint-disable-next-line
@@ -95,6 +97,8 @@ export default function App(){
       	<Route path="/termos" component={UserTerms}/>
         <Route path="/teste" component={Teste}/>
         <Route path="/sobre" component={AboutPage}/>
+        <Route path="/mapa-site" component={SiteMap}/>
+      	<Route path="/acessibilidade" component={Accessibility}/>
         <Route path="/publicando-recurso" component={TabResoursePub}/>
         <Route path="/encontrando-recurso" component={TabResourseFind}/>
         <Route path="/participando-da-rede" component={TabNetPart}/>

src/Pages/Accessibility.js

+/*Copyright (C) 2019 Centro de Computacao Cientifica e Software Livre
+Departamento de Informatica - Universidade Federal do Parana
+
+This file is part of Plataforma Integrada MEC.
+
+Plataforma Integrada MEC is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+Plataforma Integrada MEC is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU Affero General Public License for more details.
+
+You should have received a copy of the GNU Affero General Public License
+along with Plataforma Integrada MEC.  If not, see <http://www.gnu.org/licenses/>.*/
+import React, {useState, useContext}  from 'react';
+import styled from 'styled-components'
+import { Link } from "react-router-dom";
+import Breadcrumbs from "@material-ui/core/Breadcrumbs";
+
+
+const titulo ={
+  fontFamily: "Roboto, sans-serif",
+  marginTop: "0",
+  fontSize: "26px",
+  fontWeight: "300",
+  marginBottom: "10px",
+  color: "#666"
+}
+const subtitulo ={
+  fontFamily: "Roboto, sans-serif",
+  marginBottom: "20px",
+  marginTop: "0",
+  fontWeight: "500",
+  fontSize: "16px",
+  color: "#00bcd4"
+
+}
+
+const paper ={
+  padding: "30px 30px 100px 30px",
+  backgroundColor: "#fff",
+  boxShadow: "0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24)",
+  width:"1170px",
+  margin: "30px auto",
+  marginBottom:"0",
+  display: "flex",
+  flexDirection:"column",
+  boxSizing: "border-box"
+}
+
+const paragrafo={
+  textAlign: "left",
+  padding: "30px 0",
+  margin: "0",
+  fontFamily: "'Roboto Light','Roboto Regular',Roboto",
+  fontWeight: "300",
+  fontSize: "18px",
+  color: "#666",
+  display:"block"
+}
+
+const azulzinho={
+  textAlign: "right",
+  display:"block",
+  color: "#00bcd4",
+  fontSize: "16px"
+}
+
+const atalhos = {
+  fontWeight: "400",
+  color: "#00bcd4"
+
+}
+
+const breadCrumbs={
+  padding: "10px",
+  display: "flex",
+  margin: "0 auto",
+  width:"1170px"
+}
+const StyledBreadCrumbs = styled(Breadcrumbs)`
+  display: flex;
+  justify-content: flex-start;
+  max-width: 1170px;
+  span {
+    color: #a5a5a5;
+    font-size: 14px;
+  }
+  a {
+    color: #00bcd4;
+    text-decoration: none;
+    font-size: 14px;
+  }
+`;
+
+export default function Acessibility (props) {
+  return (
+    <div style={{padding:"0 0 30px 0",backgroundColor :"#f4f4f4"}}>
+
+      <div style={breadCrumbs}>
+        <StyledBreadCrumbs>
+          <Link to="/">Página Inicial</Link>
+          <span>Acessibilidade</span>
+
+        </StyledBreadCrumbs>
+      </div>
+      <link href="https://fonts.googleapis.com/css?family=Roboto:300;400;500&display=swap" rel="stylesheet"/>
+      <div style={paper}>
+        <h3 style={titulo}>Acessibilidade</h3>
+        <div style={{maxWidth:"660px",margin:"0 auto"}}>
+          <p style={paragrafo}>
+            Acessibilidade na web é possibilitar qualquer indivíduo de usufruir de quaisquer
+            atividades ou conteúdos em sítios  e serviços disponíveis na web, com igualdade e
+            autonomia, independentemente de sua capacidade motora, visual, auditiva,
+            intelectual, cultural ou social
+          </p>
+          <span style={azulzinho}>
+            Cartilha Acessibilidade na Web - W3C Brasil, 2013
+          </span>
+          <p style={paragrafo}>
+            Na Plataforma a acessibilidade foi baseada principalmente no Modelo de
+            Acessibilidade em Governo Eletrônico (e-MAG), o modelo pode ser acessado
+            <a
+              style={{textDecoration:"none", color:"#222"}}
+              target="_blank"
+              href="https://www.governoeletronico.gov.br/documentos-e-arquivos/e-MAG%20V3.pdf"> aqui</a>.
+          </p>
+        </div>
+        <div style={{color:"#666", fontSize:"14px"}}>
+          <h3 style={subtitulo}>Atalhos padrões da Plataforma</h3>
+            Teclando-se <strong style={atalhos}>Alt + 1</strong> em qualquer página da Plataforma, chega-se diretamente ao começo do conteúdo principal da página.
+            <br/><br/>
+            Teclando-se <strong style={atalhos}>Alt + 2</strong> em qualquer página da Plataforma, chega-se diretamente ao início do menu principal.
+            <br/><br/>
+            Teclando-se <strong style={atalhos}>Alt + 3</strong> em qualquer página da Plataforma, chega-se diretamente no campo de busca.
+            <br/><br/>
+            Teclando-se <strong style={atalhos}>Alt + 4</strong> em qualquer página da Plataforma, chega-se diretamente ao rodapé.
+            <br/><br/>
+            No caso do <strong style={atalhos}>Firefox</strong>, em vez de Alt + número, tecle simultaneamente <strong style={atalhos}>Alt + Shift + número</strong>.
+            <br/><br/>
+            Sendo <strong style={atalhos}>Firefox</strong> no <strong style={atalhos}>Mac OS</strong>, em vez de Alt + Shift + número, tecle simultaneamente <strong style={atalhos}>Ctrl + Alt + número</strong>.
+            <br/><br/>
+            No <strong style={atalhos}>Opera</strong>, as teclas são <strong style={atalhos}>Shift + Escape + número</strong>. Ao teclar apenas <strong style={atalhos}>Shift + Escape</strong>, o usuário encontrará uma janela com todas as alternativas de ACCESSKEY da página.
+        </div>
+      </div>
+    </div>
+  );
+}

src/Pages/SiteMap.js

+/*Copyright (C) 2019 Centro de Computacao Cientifica e Software Livre
+Departamento de Informatica - Universidade Federal do Parana
+
+This file is part of Plataforma Integrada MEC.
+
+Plataforma Integrada MEC is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+Plataforma Integrada MEC is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU Affero General Public License for more details.
+
+You should have received a copy of the GNU Affero General Public License
+along with Plataforma Integrada MEC.  If not, see <http://www.gnu.org/licenses/>.*/
+import React, {useState, useContext}  from 'react';
+import styled from 'styled-components'
+import { Link } from "react-router-dom";
+import Breadcrumbs from "@material-ui/core/Breadcrumbs";
+
+
+const titulo ={
+  fontFamily: "Roboto, sans-serif",
+  marginTop: "0",
+  fontSize: "26px",
+  fontWeight: "300",
+  marginBottom: "10px",
+  color: "#666"
+}
+const subtitulo ={
+  fontFamily: "Roboto, sans-serif",
+  marginTop: "40px",
+  fontWeight:"500",
+  fontSize:"16px",
+  color: "#00bcd4"
+
+}
+const item={
+  fontFamily: "Roboto, sans-serif",
+  textDecoration: "none",
+  display:"block",
+  fontSize:"15px",
+  color: "#333",
+  fontWeight:"300",
+  paddingBottom: "5px"
+}
+const linha={
+  margin: "15px 0",
+  borderTop: "2px solid #00bcd4",
+  borderBottom:"none"
+}
+
+const paper ={
+  padding: "30px 30px 100px 30px",
+  backgroundColor: "#fff",
+  boxShadow: "0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24)",
+  maxWidth:"1170px",
+  margin: "30px auto",
+  marginBottom:"0",
+  display: "flex",
+  flexDirection:"column",
+  boxSizing: "border-box"
+}
+
+const cards={
+  display:"flex",
+  flexDirection:"row"
+}
+
+const card = {
+  padding:"0 15px",
+  width:"25%"
+}
+
+const breadCrumbs={
+  padding: "10px",
+  display: "flex",
+  margin: "0 auto",
+  width:"1170px"
+}
+const StyledBreadCrumbs = styled(Breadcrumbs)`
+  display: flex;
+  justify-content: flex-start;
+  max-width: 1170px;
+  span {
+    color: #a5a5a5;
+    font-size: 14px;
+  }
+  a {
+    color: #00bcd4;
+    text-decoration: none;
+    font-size: 14px;
+  }
+`;
+
+export default function SiteMap (props) {
+  return (
+    <div style={{ padding:"0 0 30px 0",backgroundColor :"#f4f4f4"}}>
+      
+      <div style={breadCrumbs}>
+        <StyledBreadCrumbs>
+          <Link to="/">Página Inicial</Link>
+          <span>Mapa do site</span>
+
+        </StyledBreadCrumbs>
+      </div>
+      <link href="https://fonts.googleapis.com/css?family=Roboto:300;500&display=swap" rel="stylesheet"/>
+      <div style={paper}>
+        <h3 style={titulo}>Mapa do site</h3>
+        <div style={cards}>
+          <div style={card}>
+            <h3 style={subtitulo}>Sobre</h3>
+            <hr style={linha} />
+            <a style={item} href="sobre">Sobre a Plataforma</a>
+            <a style={item} href="sobre#portaisparceiros">Portais Parceiros</a>
+            <a style={item} href="termos">Termos de Uso</a>
+            <a style={item} href="contato">Contato</a>
+          </div>
+          <div style={card}>
+            <h3 style={subtitulo}>Ajuda</h3>
+            <hr style={linha} />
+            <a style={item} href="ajuda">Central de Ajuda</a>
+            <Link
+                  style={item}
+                  to={{
+                  pathname: "plataforma-mec",
+                  
+                  state: { value: "0" }
+                  }}
+                > O que é a Plataforma MEC</Link>
+            <Link
+                  style={item}
+                  to={{
+                  pathname: "publicando-recurso",
+                  state: { value: "0" }
+                  }}
+            > Publicando Recurso
+            </Link>
+                              
+            <Link
+                  style={item}
+                  to={{
+                  pathname: "encontrando-recurso",
+                  state: { value: "0" }
+                  }}
+            > Encontrando Recurso
+            </Link>
+            <Link
+                  style={item}
+                  to={{
+                  pathname: "/participando-da-rede",
+                  
+                  state: { value: "0" }
+                  }}
+            > Participando da Rede
+            </Link>
+            <Link
+                  style={item}
+                  to={{
+                  pathname: "gerenciando-conta",
+                  
+                  state: { value: "0" }
+                  }}
+            > Gerenciando a conta
+            </Link>
+          </div>
+
+          <div style={card}>
+            <h3 style={subtitulo}>Acessibilidade</h3>
+            <hr style={linha} />
+            <a style={item} href="acessibilidade">Acessibilidade</a>
+          </div>
+          <div style={card}>
+            <h3 style={subtitulo}>Área do Usuário</h3>
+            <hr style={linha} />
+            <a style={item} href="/perfil">Perfil e Atividades</a>
+            <a style={item} href="perfil">Recursos Publicados</a>
+            <a style={item} href="/perfil">Favoritos</a>
+            <a style={item} href="perfil">Coleções</a>
+            <a style={item} href="/perfil">Rede</a>
+          </div>
+        </div>
+      </div>
+    </div>  
+  );
+}