diff --git a/src/App.js b/src/App.js
index 54abafe97f1b001e95e36fddbdc78fc4b018f3cb..07386a15b5cee65fe64c5f8c33e32ee477299071 100644
--- a/src/App.js
+++ b/src/App.js
@@ -27,12 +27,17 @@ import UserTerms from './Pages/UserTerms';
import Contact from './Pages/Contact';
import Teste from './Pages/Teste';
import AboutPage from './Pages/AboutPage';
-
+import HelpCenter from './Pages/HelpCenter';
+import TabResoursePub from './Pages/TabsHelp/TabResoursePub';
+import TabResourseFind from './Pages/TabsHelp/TabResourseFind';
+import TabNetPart from './Pages/TabsHelp/TabNetPart';
+import TabManageAc from './Pages/TabsHelp/TabManageAc';
import ResourcePage from './Pages/ResourcePage';
import {BrowserRouter, Switch, Route} from 'react-router-dom';
import { Store } from './Store'
import TermsPage from './Pages/TermsPage.js'
import PublicationPermissionsPage from './Pages/PublicationPermissionsPage.js'
+import TabPlataformaMEC from './Pages/TabsHelp/TabPlataformaMEC';
export default function App(){
@@ -78,12 +83,16 @@ export default function App(){
<Route path="/termos-publicar-recurso" component={TermsPage}/>
<Route path="/permission" component={PublicationPermissionsPage}/>
{/*<Route path="termos-de-uso#publicacoes-de-usuario" component={}*/}
-
+ <Route path="/ajuda" component={HelpCenter}/>
<Route path="/contato" component={Contact}/>
<Route path="/termos" component={UserTerms}/>
<Route path="/teste" component={Teste}/>
<Route path="/sobre" component={AboutPage}/>
-
+ <Route path="/publicando-recurso" component={TabResoursePub}/>
+ <Route path="/encontrando-recurso" component={TabResourseFind}/>
+ <Route path="/participando-da-rede" component={TabNetPart}/>
+ <Route path="/gerenciando-conta" component={TabManageAc}/>
+ <Route path="/plataforma-mec" component={TabPlataformaMEC}/>
</Switch>
<EcFooter/>
diff --git a/src/Components/AboutCarousel.js b/src/Components/AboutCarousel.js
index acf532d9e4f1ccefe8e6f4b21e96bd8295fa4e22..9bbe6db737ecc07c76646e603bcceb42694ec6ec 100644
--- a/src/Components/AboutCarousel.js
+++ b/src/Components/AboutCarousel.js
@@ -84,8 +84,9 @@ function AboutCarousel(props) {
<CarouselAbout showThumbs= {true}
showStatus= {false}
showIndicators = {false}
+ interval={8000}
transitionTime={1000}
-
+ autoPlay
infiniteLoop
>
diff --git a/src/Components/ContactForm.js b/src/Components/ContactForm.js
index 4187063725bad1b68ee8a633f54c31fc504a3b40..9bd68cf418050c0bb5641150a21278da22c45a56 100644
--- a/src/Components/ContactForm.js
+++ b/src/Components/ContactForm.js
@@ -94,7 +94,7 @@ const Button = styled.button`
function validateEmail (email) {
let flag = false
- if (email.split("").filter(x => x === "@").length !== 1) {
+ if (email.split("").filter(x => x === "@").length !== 1 || email.length < 7) {
flag = true
}
return flag
@@ -188,7 +188,7 @@ const Button = styled.button`
e.preventDefault(); //though this is arguable
console.log(!(nome.dict.key && email.dict.key && mensagem.dict.key ))
// Se não houver erro em nunhum dos campos E nenhum dos campos for vazio: a página faz o contato com o backend e os campos ficam em branco no formulário
- if (!(nome.dict.key && email.dict.key && mensagem.dict.key ) && ((nome.dict.value.length > 0) && (email.dict.value.length > 0) && (mensagem.dict.value.length > 0))) {
+ if (!(nome.dict.key || email.dict.key || mensagem.dict.key )) {
axios.post(`${apiUrl}/contacts`,
{
diff --git a/src/Components/HelpCenter/Cards/CardEncontrando.js b/src/Components/HelpCenter/Cards/CardEncontrando.js
new file mode 100644
index 0000000000000000000000000000000000000000..1de399ab8bea5e76bb6a48622bff0a7f9954b1d1
--- /dev/null
+++ b/src/Components/HelpCenter/Cards/CardEncontrando.js
@@ -0,0 +1,141 @@
+/*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, { Component, useState, useEffect } from 'react';
+import styled from 'styled-components';
+import EncontrandoRecurso from '../../../img/ajuda/Encontrando_recursos.png';
+
+import { Link } from 'react-router-dom';
+
+
+export default function CardEncontrando(props) {
+ return(
+ <CardAjuda>
+ <div className="card">
+ <img src={EncontrandoRecurso} alt="" />
+ <h3>Encontrando Recursos</h3>
+ <hr/>
+ <Link to={{
+ pathname : 'encontrando-recurso',
+ state : {value : '0'}
+ }}>Como fazer uma busca?</Link>
+ <br/>
+ <Link to={{
+ pathname : 'encontrando-recurso',
+ state : {value : '1'}
+ }}>Como filtrar os resultados?</Link>
+ <a></a>
+ <br/>
+ <Link to={{
+ pathname : 'encontrando-recurso',
+ state : {value : '2'}
+ }}>Como os recursos são ranqueados?</Link>
+ <br/>
+ </div>
+ <div className="card-rodape">
+ <Link to={{
+ pathname : 'encontrando-recurso',
+ state : {value : '0'}
+ }}>VER MAIS</Link>
+ </div>
+ </CardAjuda>
+ );
+}
+
+const CardAjuda = styled.div`
+
+ height: 360px;
+ margin-bottom: 20px
+
+
+ .card {
+ height: 280px;
+ padding: 40px 15px;
+ text-align: center;
+ font-size: 14px;
+ background-color:#fff;
+ box-shadow: 0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);
+
+ h3 {
+ font-size: 24px;
+ font-weight: 400;
+ color: #666;
+ margin-top: 20px;
+ margin-bottom: 10px;
+ line-height: 1.1;
+ }
+
+ hr {
+ margin-top: 20px;
+ margin-bottom: 20px;
+ border: 0;
+ border-top: 1px solid #eee;
+ color: #a5a5a5;
+ }
+
+ a {
+ font-size: 15px;
+ color: #666;
+ text-decoration: none;
+ text-align: center;
+ :hover {
+ color: #000;
+ }
+
+ }
+
+ img {
+ height: 62px ;
+ width: 62px ;
+ }
+
+ }
+
+ .card-rodape {
+ box-sizing: border-box;
+
+ a {
+ border-radius: 0;
+ width: 100%;
+ font-size: 13px;
+ font-weight: 700;
+ color: #fff;
+ transition: .2s ease;
+ border: none;
+ height: 40px;
+ line-height: 40px;
+ background-color: #00bcd4;
+ touch-action: manipulation;
+ cursor: pointer;
+ text-decoration: none;
+ display: inline-block;
+ margin-bottom: 0;
+ text-align: center;
+ white-space: nowrap;
+ vertical-align: middle;
+ touch-action: manipulation;
+ cursor: pointer;
+ user-select: none;
+ box-shadow: 0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);
+
+ }
+ }
+
+}
+
+`
\ No newline at end of file
diff --git a/src/Components/HelpCenter/Cards/CardGerenciando.js b/src/Components/HelpCenter/Cards/CardGerenciando.js
new file mode 100644
index 0000000000000000000000000000000000000000..8cf2a1882e2075073869b2dfa27b58ec380136d9
--- /dev/null
+++ b/src/Components/HelpCenter/Cards/CardGerenciando.js
@@ -0,0 +1,150 @@
+/*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, { Component, useState, useEffect } from 'react';
+import styled from 'styled-components';
+import GerenciandoConta from '../../../img/ajuda/Gerenciando_a_conta.png';
+
+import { Link } from 'react-router-dom';
+
+
+export default function CardGerenciando(props) {
+ return(
+ <CardAjuda>
+ <div className="card">
+ <img src={GerenciandoConta} alt="" />
+ <h3>Gerenciando Conta</h3>
+ <hr/>
+ <Link to={{
+ pathname : 'gerenciando-conta',
+ state : {value : '0'}
+ }}>Por que me cadastrar?</Link>
+ <br/>
+ <Link to={{
+ pathname : 'gerenciando-conta',
+ state : {value : '1'}
+ }}>Como fazer meu cadastro?</Link>
+ <br/>
+ <Link to={{
+ pathname : 'gerenciando-conta',
+ state : {value : '2'}
+ }}>Como alterar minha senha?</Link>
+ <br/>
+ <Link to={{
+ pathname : 'gerenciando-conta',
+ state : {value : '3'}
+ }}>Como acessar a conta?</Link>
+ <br/>
+ <Link to={{
+ pathname : 'gerenciando-conta',
+ state : {value : '4'}
+ }}>Esqueci minha senha. O que fazer?</Link>
+ <br/>
+ </div>
+ <div className="card-rodape">
+ <Link to={{
+ pathname : 'gerenciando-conta',
+ state : {value : '0'}
+ }}>VER MAIS</Link>
+ </div>
+ </CardAjuda>
+ );
+}
+
+const CardAjuda = styled.div`
+
+ height: 360px;
+ margin-bottom: 20px
+
+
+ .card {
+ height: 280px;
+ padding: 40px 15px;
+ text-align: center;
+ font-size: 14px;
+ background-color:#fff;
+ box-shadow: 0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);
+
+ h3 {
+ font-size: 24px;
+ font-weight: 400;
+ color: #666;
+ margin-top: 20px;
+ margin-bottom: 10px;
+ line-height: 1.1;
+ }
+
+ hr {
+ margin-top: 20px;
+ margin-bottom: 20px;
+ border: 0;
+ border-top: 1px solid #eee;
+ color: #a5a5a5;
+ }
+
+ a {
+ font-size: 15px;
+ color: #666;
+ text-decoration: none;
+ text-align: center;
+ :hover {
+ color: #000;
+ }
+
+ }
+
+ img {
+ height: 62px ;
+ width: 62px ;
+ }
+
+ }
+
+ .card-rodape {
+ box-sizing: border-box;
+
+ a {
+ border-radius: 0;
+ width: 100%;
+ font-size: 13px;
+ font-weight: 700;
+ color: #fff;
+ transition: .2s ease;
+ border: none;
+ height: 40px;
+ line-height: 40px;
+ background-color: #00bcd4;
+ touch-action: manipulation;
+ cursor: pointer;
+ text-decoration: none;
+ display: inline-block;
+ margin-bottom: 0;
+ text-align: center;
+ white-space: nowrap;
+ vertical-align: middle;
+ touch-action: manipulation;
+ cursor: pointer;
+ user-select: none;
+ box-shadow: 0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);
+
+ }
+ }
+
+}
+
+`
\ No newline at end of file
diff --git a/src/Components/HelpCenter/Cards/CardParticipando.js b/src/Components/HelpCenter/Cards/CardParticipando.js
new file mode 100644
index 0000000000000000000000000000000000000000..955fb287e9605ce736a831622dacfc1bd10da204
--- /dev/null
+++ b/src/Components/HelpCenter/Cards/CardParticipando.js
@@ -0,0 +1,135 @@
+/*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, { Component, useState, useEffect } from 'react';
+import styled from 'styled-components';
+import ParticipandoRede from '../../../img/ajuda/Participando_da_rede.png';
+
+import { Link } from 'react-router-dom';
+
+
+export default function CardParticipando(props) {
+ return(
+ <CardAjuda>
+ <div className="card">
+ <img src={ParticipandoRede} alt="" />
+ <h3>Participando da Rede</h3>
+ <hr/>
+ <Link to={{
+ pathname : 'participando-da-rede',
+ state : {value : '0'}
+ }}>Comentanto os recursos</Link>
+ <br/>
+ <Link to={{
+ pathname : 'participando-da-rede',
+ state : {value : '1'}
+ }}>Como relatar uma experiência ou avaliar um recurso?</Link>
+ <br/>
+ </div>
+ <div className="card-rodape">
+ <Link to={{
+ pathname : 'participando-da-rede',
+ state : {value : '0'}
+ }}>VER MAIS</Link>
+ </div>
+ </CardAjuda>
+ );
+}
+
+const CardAjuda = styled.div`
+
+ height: 360px;
+ margin-bottom: 20px
+
+
+ .card {
+ height: 280px;
+ padding: 40px 15px;
+ text-align: center;
+ font-size: 14px;
+ background-color:#fff;
+ box-shadow: 0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);
+
+ h3 {
+ font-size: 24px;
+ font-weight: 400;
+ color: #666;
+ margin-top: 20px;
+ margin-bottom: 10px;
+ line-height: 1.1;
+ }
+
+ hr {
+ margin-top: 20px;
+ margin-bottom: 20px;
+ border: 0;
+ border-top: 1px solid #eee;
+ color: #a5a5a5;
+ }
+
+ a {
+ font-size: 15px;
+ color: #666;
+ text-decoration: none;
+ text-align: center;
+ :hover {
+ color: #000;
+ }
+
+ }
+
+ img {
+ height: 62px ;
+ width: 62px ;
+ }
+
+ }
+
+ .card-rodape {
+ box-sizing: border-box;
+
+ a {
+ border-radius: 0;
+ width: 100%;
+ font-size: 13px;
+ font-weight: 700;
+ color: #fff;
+ transition: .2s ease;
+ border: none;
+ height: 40px;
+ line-height: 40px;
+ background-color: #00bcd4;
+ touch-action: manipulation;
+ cursor: pointer;
+ text-decoration: none;
+ display: inline-block;
+ margin-bottom: 0;
+ text-align: center;
+ white-space: nowrap;
+ vertical-align: middle;
+ touch-action: manipulation;
+ cursor: pointer;
+ user-select: none;
+ box-shadow: 0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);
+
+ }
+ }
+
+}
+
+`
\ No newline at end of file
diff --git a/src/Components/HelpCenter/Cards/CardPublicando.js b/src/Components/HelpCenter/Cards/CardPublicando.js
new file mode 100644
index 0000000000000000000000000000000000000000..81b4086ca87c9916ff54f87283ed8b11d8337ea6
--- /dev/null
+++ b/src/Components/HelpCenter/Cards/CardPublicando.js
@@ -0,0 +1,139 @@
+/*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, { Component, useState, useEffect } from 'react';
+import styled from 'styled-components';
+import PublicandoRecursos from '../../../img/ajuda/Publicando_recursos.png';
+import { Link } from 'react-router-dom';
+
+
+export default function CardPublicando(props) {
+return(
+ <CardAjuda>
+ <div className="card">
+ <img src={PublicandoRecursos} alt="" />
+ <h3>Publicando Recursos</h3>
+ <hr/>
+ <Link to={{
+ pathname : 'publicando-recurso',
+ state : {value : '0'}
+ }}>Por que enviar um recurso?</Link>
+ <br/>
+ <Link to={{
+ pathname : 'publicando-recurso',
+ state : {value : '1'}
+ }}>Como publicar um recurso?</Link>
+ <br/>
+ <Link to={{
+ pathname : 'publicando-recurso',
+ state : {value : '2'}
+ }}>Quais tipos de recurso e formatos a plataforma aceita?</Link>
+ <br/>
+ </div>
+ <div className="card-rodape">
+ <Link to={{
+ pathname : 'publicando-recurso',
+ state : {value : '0'}
+ }}>VER MAIS</Link>
+ </div>
+ </CardAjuda>
+);
+}
+
+const CardAjuda = styled.div`
+
+height: 360px;
+margin-bottom: 20px
+
+
+.card {
+ height: 280px;
+ padding: 40px 15px;
+ text-align: center;
+ font-size: 14px;
+ background-color:#fff;
+ box-shadow: 0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);
+
+ h3 {
+ font-size: 24px;
+ font-weight: 400;
+ color: #666;
+ margin-top: 20px;
+ margin-bottom: 10px;
+ line-height: 1.1;
+ }
+
+ hr {
+ margin-top: 20px;
+ margin-bottom: 20px;
+ border: 0;
+ border-top: 1px solid #eee;
+ color: #a5a5a5;
+ }
+
+ a {
+ font-size: 15px;
+ color: #666;
+ text-decoration: none;
+ text-align: center;
+ :hover {
+ color: #000;
+ }
+
+ }
+
+ img {
+ height: 62px ;
+ width: 62px ;
+ }
+
+}
+
+.card-rodape {
+ box-sizing: border-box;
+
+ a {
+ border-radius: 0;
+ width: 100%;
+ font-size: 13px;
+ font-weight: 700;
+ color: #fff;
+ transition: .2s ease;
+ border: none;
+ height: 40px;
+ line-height: 40px;
+ background-color: #00bcd4;
+ touch-action: manipulation;
+ cursor: pointer;
+ text-decoration: none;
+ display: inline-block;
+ margin-bottom: 0;
+ text-align: center;
+ white-space: nowrap;
+ vertical-align: middle;
+ touch-action: manipulation;
+ cursor: pointer;
+ user-select: none;
+ box-shadow: 0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);
+
+ }
+}
+
+}
+
+`
\ No newline at end of file
diff --git a/src/Components/HelpCenter/TabsManageAc/Forget.js b/src/Components/HelpCenter/TabsManageAc/Forget.js
new file mode 100644
index 0000000000000000000000000000000000000000..a96de5c6059f10c439737d49474bba54de34a043
--- /dev/null
+++ b/src/Components/HelpCenter/TabsManageAc/Forget.js
@@ -0,0 +1,101 @@
+/*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, { Component, useState, useEffect } from 'react';
+import styled from 'styled-components';
+
+import LoginImg from '../../../img/ajuda/login_img.jpg'
+import RecuperarSenhaImg from '../../../img/ajuda/recuperarsenha_img.jpg'
+
+
+
+
+export default function Forget(props) {
+ return(
+ <Card>
+ <link href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap" rel="stylesheet"/>
+ <div style={{marginBottom: "9px"}}>
+ <span>{props.title}</span>
+ </div>
+ <p>Para redefinir a senha da sua conta, siga essas instruções:</p>
+
+ <ol>
+ <li>
+ Acesse a <a href="/" target="_blank">Página Inicial</a> e clique em
+ “Entrar†no canto superior direito da página.
+ </li>
+ <li>Clique em “Esqueceu a senha? Clique Aqui!â€.</li>
+ <img className="primeira" src={LoginImg} alt="primeira imagem"/>
+ <li>Preencha com o seu endereço de e-mail e clique em “Buscarâ€.</li>
+ <img className="segunda" src={RecuperarSenhaImg} alt="segunda imagem"/>
+ <li>Você receberá um e-mail no endereço informado, contendo as instruções para redefinir sua senha.</li>
+ </ol>
+
+ </Card>
+ );
+}
+
+const Card = styled.div`
+ margin-bottom: 5px;
+ background-color: #fff;
+ box-shadow: 0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);
+ padding: 30px;
+ color: #666;
+ span {
+ font-size: 14px;
+ font-weight: bold;
+ }
+
+ a {
+ color: #00bcd4;
+ text-decoration: none;
+ :hover {
+ text-decoration: underline;
+ }
+ }
+
+ ol {
+ margin-top: 0;
+ margin-bottom: 10px;
+ line-height: 1.42857143;
+ .primeira {
+
+ height: 300px;
+ margin-right: 40px;
+ vertical-align: middle;
+ }
+ .segunda {
+ height: 150px;
+ margin-right: 40px;
+ vertical-align: middle;
+
+ }
+ }
+ li {
+ font-size: 14px;
+ }
+
+
+ p {
+ margin: 0 0 10px;
+ font-size: 15px;
+ }
+
+
+
+`
\ No newline at end of file
diff --git a/src/Components/HelpCenter/TabsManageAc/HowToAccess.js b/src/Components/HelpCenter/TabsManageAc/HowToAccess.js
new file mode 100644
index 0000000000000000000000000000000000000000..f367cd4228e377798c981272934f44c90a36f470
--- /dev/null
+++ b/src/Components/HelpCenter/TabsManageAc/HowToAccess.js
@@ -0,0 +1,84 @@
+/*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, { Component, useState, useEffect } from 'react';
+import styled from 'styled-components';
+
+
+
+
+export default function HowtoAccess(props) {
+ return(
+ <Card>
+ <link href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap" rel="stylesheet"/>
+ <div style={{marginBottom: "9px"}}>
+ <span>{props.title}</span>
+ </div>
+ <p>Para acessar a sua conta:</p>
+ <ol>
+ <li>Acesse a <a href="/" target="_blank">Página Inicial</a>.</li>
+
+ <li>Clique em “Entrar†no canto superior direito.</li>
+
+ <li>Preencha os campos solicitados.</li>
+
+ <li>Clique em “Entrarâ€.</li>
+ </ol>
+
+
+
+ </Card>
+ );
+}
+
+const Card = styled.div`
+ margin-bottom: 5px;
+ background-color: #fff;
+ box-shadow: 0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);
+ padding: 30px;
+ color: #666;
+ span {
+ font-size: 14px;
+ font-weight: bold;
+ }
+ a {
+ color: #00bcd4;
+ text-decoration: none;
+ :hover {
+ text-decoration: underline;
+ }
+ }
+
+ ol {
+ margin-top: 0;
+ margin-bottom: 10px;
+ line-height: 1.42857143;
+ }
+
+ li {
+ font-size: 14px;
+ }
+
+ p {
+ margin: 0 0 10px;
+ font-size: 15px;
+ }
+
+
+
+`
\ No newline at end of file
diff --git a/src/Components/HelpCenter/TabsManageAc/HowToChange.js b/src/Components/HelpCenter/TabsManageAc/HowToChange.js
new file mode 100644
index 0000000000000000000000000000000000000000..456d434ee41d3cfa05da84ce94c6473a91dff7ae
--- /dev/null
+++ b/src/Components/HelpCenter/TabsManageAc/HowToChange.js
@@ -0,0 +1,85 @@
+/*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, { Component, useState, useEffect } from 'react';
+import styled from 'styled-components';
+
+
+
+
+export default function HowToDo(props) {
+ return(
+ <Card>
+ <link href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap" rel="stylesheet"/>
+ <div style={{marginBottom: "9px"}}>
+ <span>{props.title}</span>
+ </div>
+ <p> Para alterar sua senha você precisa estar conectado na Plataforma e então, seguir esses passos: </p>
+ <ol>
+ <li>Na <a href="/" target="_blank">Página Inicial</a>, clique no menu “Minha área†localizado no canto superior direito da página.</li>
+
+ <li>Clique na opção “Configurações†que aparecerá no submenu.</li>
+
+ <li>Clique no link “Gerenciar contaâ€, no menu lateral, localizado no canto superior esquerdo</li>
+
+ <li>Na opção “Alterar senhaâ€, preencha os campos com sua senha atual e depois com a nova senha que deseja.</li>
+ <li>Clique na opção "Alterar senha" logo abaixo.</li>
+ </ol>
+
+ <p>Pronto! No próximo acesso, você já pode usar sua nova senha!</p>
+
+ </Card>
+ );
+}
+
+const Card = styled.div`
+ margin-bottom: 5px;
+ background-color: #fff;
+ box-shadow: 0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);
+ padding: 30px;
+ color: #666;
+ span {
+ font-size: 14px;
+ font-weight: bold;
+ }
+ a {
+ color: #00bcd4;
+ text-decoration: none;
+ :hover {
+ text-decoration: underline;
+ }
+ }
+
+ ol {
+ margin-top: 0;
+ margin-bottom: 10px;
+ line-height: 1.42857143;
+ }
+
+ li {
+ font-size: 14px;
+ }
+
+ p {
+ margin: 0 0 10px;
+ font-size: 15px;
+ }
+
+
+
+`
\ No newline at end of file
diff --git a/src/Components/HelpCenter/TabsManageAc/HowToDo.js b/src/Components/HelpCenter/TabsManageAc/HowToDo.js
new file mode 100644
index 0000000000000000000000000000000000000000..084e78f39c2813df5ad1ff970a268c18e868856f
--- /dev/null
+++ b/src/Components/HelpCenter/TabsManageAc/HowToDo.js
@@ -0,0 +1,85 @@
+/*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, { Component, useState, useEffect } from 'react';
+import styled from 'styled-components';
+
+
+
+
+export default function HowTodo(props) {
+ return(
+ <Card>
+ <link href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap" rel="stylesheet"/>
+ <div style={{marginBottom: "9px"}}>
+ <span>{props.title}</span>
+ </div>
+ <p> Para fazer o cadastro é rapidinho: </p>
+ <ol>
+ <li>Acesse a <a href="/" target="_blank">Página Inicial</a> da Plataforma.</li>
+
+ <li>Clique em “Cadastre-se†no canto superior direito da página.</li>
+
+ <li> Preencha os campos solicitados.</li>
+
+ <li>Clique em “Cadastrarâ€.</li>
+ </ol>
+
+ <p>Pronto! Você será conectado automaticamente.</p>
+ <p>Nas próximas vezes que acessar a Plataforma, clique em “Entrar†e faça o login com seus dados de cadastro.</p>
+
+ </Card>
+ );
+}
+
+const Card = styled.div`
+ margin-bottom: 5px;
+ background-color: #fff;
+ box-shadow: 0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);
+ padding: 30px;
+ color: #666;
+ span {
+ font-size: 14px;
+ font-weight: bold;
+ }
+ a {
+ color: #00bcd4;
+ text-decoration: none;
+ :hover {
+ text-decoration: underline;
+ }
+ }
+
+ ol {
+ margin-top: 0;
+ margin-bottom: 10px;
+ line-height: 1.42857143;
+ }
+
+ li {
+ font-size: 14px;
+ }
+
+ p {
+ margin: 0 0 10px;
+ font-size: 15px;
+ }
+
+
+
+`
\ No newline at end of file
diff --git a/src/Components/HelpCenter/TabsManageAc/Why.js b/src/Components/HelpCenter/TabsManageAc/Why.js
new file mode 100644
index 0000000000000000000000000000000000000000..a18088dc0a76b4e072037c50abca8d249f182340
--- /dev/null
+++ b/src/Components/HelpCenter/TabsManageAc/Why.js
@@ -0,0 +1,70 @@
+/*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, { Component, useState, useEffect } from 'react';
+import styled from 'styled-components';
+
+
+
+
+
+export default function Why(props) {
+ return(
+ <Card>
+ <link href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap" rel="stylesheet"/>
+ <div style={{marginBottom: "9px"}}>
+ <span>{props.title}</span>
+ </div>
+ <p>
+ Quais vantagens eu terei após criar um perfil na Plataforma?
+ </p>
+ <p>
+ Ao se cadastrar, você terá mais opções de interação na plataforma, como
+ criar suas próprias coleções de recursos, seguir usuários e coleções de
+ outros usuários. Além disso, poderá contribuir com a rede de usuários
+ fazendo relatos de experiências sobre o uso dos recursos, avaliando com
+ estrelas, favoritando e reportando violações de recursos (quando necessário).
+ </p>
+
+
+ </Card>
+ );
+}
+
+const Card = styled.div`
+ margin-bottom: 5px;
+ background-color: #fff;
+ box-shadow: 0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);
+ padding: 30px;
+ color: #666;
+ span {
+ font-size: 14px;
+ font-weight: bold;
+ }
+
+
+
+
+ p {
+ margin: 0 0 10px;
+ font-size: 15px;
+ }
+
+
+
+`
\ No newline at end of file
diff --git a/src/Components/HelpCenter/TabsNetPart/How.js b/src/Components/HelpCenter/TabsNetPart/How.js
new file mode 100644
index 0000000000000000000000000000000000000000..8317ce5f7997c4096b520ab8eafb4ca573077851
--- /dev/null
+++ b/src/Components/HelpCenter/TabsNetPart/How.js
@@ -0,0 +1,82 @@
+/*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, { Component, useState, useEffect } from 'react';
+import styled from 'styled-components';
+
+
+
+
+
+export default function How(props) {
+ return(
+ <Card>
+ <link href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap" rel="stylesheet"/>
+ <div style={{marginBottom: "9px"}}>
+ <span>{props.title}</span>
+ </div>
+ <p>
+ Ao abrir um recurso, você pode avaliá-lo e descrever como foi sua experiência:
+ </p>
+ <ol>
+ <li>Abra o recurso desejado.</li>
+ <li>No fim da página haverá uma área de Relatos de Experiência.</li>
+ <li>Preencha as informações no quadro “Conte sua experiênciaâ€.</li>
+ <li>Clique em “Enviarâ€.</li>
+
+ </ol>
+ <p>
+ Obs: as estrelinhas indicam se o recurso foi útil para você. Então quanto
+ mais estrelinhas, melhor será a avaliação do recurso.
+ </p>
+
+ </Card>
+ );
+}
+
+const Card = styled.div`
+ margin-bottom: 5px;
+ background-color: #fff;
+ box-shadow: 0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);
+ padding: 30px;
+ color: #666;
+ span {
+ font-size: 14px;
+ font-weight: bold;
+ }
+
+
+
+ ol {
+ margin-top: 0;
+ margin-bottom: 10px;
+ line-height: 1.42857143;
+ }
+
+ li {
+ font-size: 14px;
+ }
+
+ p {
+ margin: 0 0 10px;
+ font-size: 15px;
+ }
+
+
+
+`
\ No newline at end of file
diff --git a/src/Components/HelpCenter/TabsNetPart/What.js b/src/Components/HelpCenter/TabsNetPart/What.js
new file mode 100644
index 0000000000000000000000000000000000000000..5970321c16779868a1a1a2f37344b2826d941e72
--- /dev/null
+++ b/src/Components/HelpCenter/TabsNetPart/What.js
@@ -0,0 +1,83 @@
+/*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, { Component, useState, useEffect } from 'react';
+import styled from 'styled-components';
+
+
+
+
+
+export default function What(props) {
+ return(
+ <Card>
+ <link href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap" rel="stylesheet"/>
+ <div style={{marginBottom: "9px"}}>
+ <span>{props.title}</span>
+ </div>
+ <p>
+ Aqui na Plataforma, incentivamos os usuários a comentarem os recursos
+ contando como foi sua experiência de uso. Veja sugestões de pontos a serem abordados no seu comentário:
+ </p>
+ <ul>
+ <li>
+ Relatar como utilizou o recurso durante a aula, para que outros
+ professores possam se basear e adaptar para o seu próprio objetivo pedagógico.
+ </li>
+ <li>Relatar a recepção dos alunos em relação ao recurso.</li>
+ <li>Apontar os pontos a serem melhorados no recurso para que o autor tenha a oportunidade de ajustar.</li>
+ <li>Apontar os pontos positivos do recurso para que o autor ganhe o devido reconhecimento e prestÃgio!</li>
+
+ </ul>
+
+
+ </Card>
+ );
+}
+
+const Card = styled.div`
+ margin-bottom: 5px;
+ background-color: #fff;
+ box-shadow: 0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);
+ padding: 30px;
+ color: #666;
+ span {
+ font-size: 14px;
+ font-weight: bold;
+ }
+
+
+
+ ul {
+ margin-top: 0;
+ margin-bottom: 10px;
+ line-height: 1.42857143;
+ }
+
+ li {
+ font-size: 14px;
+ }
+
+ p {
+ margin: 0 0 10px;
+ font-size: 15px;
+ }
+
+
+
+`
\ No newline at end of file
diff --git a/src/Components/HelpCenter/TabsPlataformaMEC/How.js b/src/Components/HelpCenter/TabsPlataformaMEC/How.js
new file mode 100644
index 0000000000000000000000000000000000000000..f98d20b989d6695dd10466da16adcf1320cfe8df
--- /dev/null
+++ b/src/Components/HelpCenter/TabsPlataformaMEC/How.js
@@ -0,0 +1,88 @@
+/*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, { Component, useState, useEffect } from 'react';
+import styled from 'styled-components';
+
+
+
+
+
+export default function How(props) {
+ return(
+ <Card>
+ <link href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap" rel="stylesheet"/>
+ <div style={{marginBottom: "9px"}}>
+ <span>{props.title}</span>
+ </div>
+ <div style ={{width:"640px", height: "360px" }}>
+ <iframe width="640"
+ height="360"
+ src="https://www.youtube.com/embed/CRW5h2pHugM"
+ frameborder="0"
+ allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
+ allowfullscreen
+ >
+
+ </iframe>
+ </div>
+ </Card>
+ );
+}
+
+const Card = styled.div`
+ margin-bottom: 5px;
+ background-color: #fff;
+ box-shadow: 0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);
+ padding: 30px;
+ color: #666;
+ span {
+ font-size: 14px;
+ font-weight: bold;
+ }
+
+ a {
+ color: #00bcd4;
+ text-decoration: none;
+ :hover {
+ text-decoration: underline;
+ }
+ }
+
+
+
+ ul {
+ padding-left: 0 !important;
+ margin-top: 0;
+ margin-bottom: 10px;
+ line-height: 1.42857143;
+ }
+
+ li {
+ list-style-type: none;
+ font-size: 14px;
+ }
+
+ p {
+ margin: 0 0 10px;
+ font-size: 15px;
+ }
+
+
+
+`
\ No newline at end of file
diff --git a/src/Components/HelpCenter/TabsPlataformaMEC/Software.js b/src/Components/HelpCenter/TabsPlataformaMEC/Software.js
new file mode 100644
index 0000000000000000000000000000000000000000..e805416f047205c4443861420310c045530df224
--- /dev/null
+++ b/src/Components/HelpCenter/TabsPlataformaMEC/Software.js
@@ -0,0 +1,118 @@
+/*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, { Component, useState, useEffect } from 'react';
+import styled from 'styled-components';
+
+
+
+const softwares = [
+ { recursos : "Google Chrome" , texto : "Navegador web." , link : "https://ninite.com/chrome/" },
+ { recursos : "Java" , texto : "Necessário para a execução de sites que utilizem sua linguagem de programação java." , link : "http://javadl.oracle.com/webapps/download/AutoDL?BundleId=225355_090f390dda5b47b9b721c7dfaa008135NINITE: https://ninite.com/java8/" },
+ { recursos : "Adobe Flash Player" , texto : "plugin que reproduz multimÃdia na internet de forma mais eficiente." , link : "https://get.adobe.com/br/flashplayer/download/?installer=FP_27_for_Opera_and_Chromium_-_PPAPI&os=Windows%207&browser_type=KHTML&browser_dist=Chrome&dualoffer=false&mdualoffer=true&stype=6703&d=McAfee_Security_Scan_Plus&d=McAfee_Safe_Connect" },
+ { recursos : "Adobe Air" , texto : "Plugin para execução de códigos para aplicações nativas e jogos para computadores desktop com Windows e Mac OS bem como dispositivos iOS e Android." , link : "https://ninite.com/air/" },
+ { recursos : "Net Framework" , texto : "O .NET Framework é um ambiente de execução de tempo de execução que gerencia os aplicativos destinados ao .NET Framework." , link : "https://ninite.com/.net4.7/" },
+ { recursos : "Acrobat Reader DC" , texto : "Abrir documento no formato PDF" , link : "https://ninite.com/foxit/" },
+ { recursos : "Video LAN" , texto : "REPRODUTOR DE VÃDEO." , link : "http://download.winzip.com/gl/nkln/winzip21_downwz.exe" },
+ { recursos : "Winzip" , texto : "WinZip: abrir arquivos compactados." , link : "http://download.winzip.com/gl/nkln/winzip21_downwz.exe" },
+ { recursos : "K-Lite Codec" , texto : "Software que ajuda na reprodução de arquivos multimÃdia no computador." , link : "https://ninite.com/libreoffice/" },
+ { recursos : "Libre Office" , texto : "Software gratuito para visualização e edição de documentos, planilhas e apresentações." , link : "https://ninite.com/libreoffice/" },
+ { recursos : "Swiff Player" , texto : "reprodutor de mÃdia do formato swf" , link : "https://www.w3schools.com/html/" }
+
+]
+
+export default function Software(props) {
+ return(
+ <Card>
+ <link href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap" rel="stylesheet"/>
+ <div style={{marginBottom: "9px"}}>
+ <span>{props.title}</span>
+ </div>
+ <p>
+ Todo e qualquer recurso digital precisa de um programa ou aplicativo para
+ ser visualizado. Por exemplo, grande parte dos recursos são arquivos
+ compactados que servem para ocupar menos espaço de armazenamento, recebendo
+ a extensão .zip ou .rar, para utilizá-lo, você precisa ter instalado um
+ descompactador de arquivos, como o <a href="http://download.winzip.com/gl/nkln/winzip21_downwz.exe">Winzip</a> ou <a href="https://ninite.com/winrar/">Winrar</a>.
+ </p>
+ <p>
+ Alguns destes programas são bem comuns, e provavelmente, você já deve ter
+ instalado em seu computador, como processador de texto para formato .docx,
+ o Microsoft Word (para Sistema Operacional Windows) ou LibreOffice
+ (nas distribuições Linux). Porém, existem outros programas que não são tão
+ comuns assim, mas que são fáceis de instalar em seu computador. A seguir,
+ vamos apresentar umas informações que podem guiar a utilização dos recursos
+ em suas aulas.
+ </p>
+ <p>
+ Você precisa ficar atento as siglas que terminação do recurso que dizem
+ de qual formato ele é. DaÃ, qual programa pode ser utilizado para abrir
+ o Recursos Educacionais Digitais em seu computador? Fizemos uma lista de
+ softwares que você poderá precisar de acordo com o tipo de recurso:
+ </p>
+ <ul>
+ {softwares.map((item)=>
+ <li><a href={item.link} >{item.recursos}</a> - {item.texto} <br/><br/> </li>
+ )}
+
+ </ul>
+ </Card>
+ );
+}
+
+const Card = styled.div`
+ margin-bottom: 5px;
+ background-color: #fff;
+ box-shadow: 0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);
+ padding: 30px;
+ color: #666;
+ span {
+ font-size: 14px;
+ font-weight: bold;
+ }
+
+ a {
+ color: #00bcd4;
+ text-decoration: none;
+ :hover {
+ text-decoration: underline;
+ }
+ }
+
+
+
+ ul {
+ padding-left: 0 !important;
+ margin-top: 0;
+ margin-bottom: 10px;
+ line-height: 1.42857143;
+ }
+
+ li {
+ list-style-type: none;
+ font-size: 14px;
+ }
+
+ p {
+ margin: 0 0 10px;
+ font-size: 15px;
+ }
+
+
+
+`
\ No newline at end of file
diff --git a/src/Components/HelpCenter/TabsPlataformaMEC/Types.js b/src/Components/HelpCenter/TabsPlataformaMEC/Types.js
new file mode 100644
index 0000000000000000000000000000000000000000..579536965240c02c7a73d7bd1343795770d91162
--- /dev/null
+++ b/src/Components/HelpCenter/TabsPlataformaMEC/Types.js
@@ -0,0 +1,91 @@
+/*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, { Component, useState, useEffect } from 'react';
+import styled from 'styled-components';
+
+
+
+const tipos = [
+ {recursos:"- áudios;"},
+ {recursos:"- imagens;"},
+ {recursos:"- mapas;"},
+ {recursos:"- softwares educacionais"},
+ {recursos:"- textos;"},
+ {recursos:"- vÃdeos"}
+]
+
+export default function Types(props) {
+ return(
+ <Card>
+ <link href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap" rel="stylesheet"/>
+ <div style={{marginBottom: "9px"}}>
+ <span>{props.title}</span>
+ </div>
+ <p>
+ A plataforma integra os Recursos Educacionais Digitais dos principais portais abertos. Conheça alguns deles:
+ </p>
+ <ul>
+ {tipos.map((item)=>
+ <li>{item.recursos}</li>
+
+ )}
+
+ </ul>
+ <p>
+ E ainda, nesta plataforma são organizados pelos diferentes componentes curriculares (matemática, artes, etc.) e
+ etapas de ensino (Ensino Médio, Fundamental, Anos Iniciais, etc.) onde podem ser aplicados.
+ </p>
+
+ </Card>
+ );
+}
+
+const Card = styled.div`
+ margin-bottom: 5px;
+ background-color: #fff;
+ box-shadow: 0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);
+ padding: 30px;
+ color: #666;
+ span {
+ font-size: 14px;
+ font-weight: bold;
+ }
+
+
+
+ ul {
+ padding-left: 0 !important;
+ margin-top: 0;
+ margin-bottom: 10px;
+ line-height: 1.42857143;
+ }
+
+ li {
+ list-style-type: none;
+ font-size: 14px;
+ }
+
+ p {
+ margin: 0 0 10px;
+ font-size: 15px;
+ }
+
+
+
+`
\ No newline at end of file
diff --git a/src/Components/HelpCenter/TabsPlataformaMEC/Understand.js b/src/Components/HelpCenter/TabsPlataformaMEC/Understand.js
new file mode 100644
index 0000000000000000000000000000000000000000..644afb9807b8519ad91f35bab7397a923ce77392
--- /dev/null
+++ b/src/Components/HelpCenter/TabsPlataformaMEC/Understand.js
@@ -0,0 +1,80 @@
+/*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, { Component, useState, useEffect } from 'react';
+import styled from 'styled-components';
+
+
+
+
+export default function Understand(props) {
+ return(
+ <Card>
+ <link href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap" rel="stylesheet"/>
+ <div style={{marginBottom: "9px"}}>
+ <span>{props.title}</span>
+ </div>
+ <p>
+ <strong>Ãrea de Recursos Educacionais Digitais</strong>
+ <br/>
+ Recursos que, no mÃnimo, têm uma licença de uso mais flexÃvel. Uma licença
+ que permite que o recurso possa ser utilizado, alterado e manipulado sem
+ restrições. Adicionalmente, um recurso aberto pode utilizar um formato
+ aberto, um formato de arquivo que permite a fácil edição por terceiros.
+ Nenhum controle (como cadastro e senha) deve existir para acesso a recursos abertos.
+ </p>
+ <p>
+ <strong>Ãrea de Materiais de Formação</strong>
+ <br/>
+ Nesta área, você acessa livremente materiais completos de formação, como
+ cursos já oferecidos pelo MEC e seus parceiros. São conteúdos elaborados
+ por equipes multidisciplinares e de autoria de pesquisadores e educadores
+ renomados nas áreas.
+ </p>
+ <p>
+ <strong>Ãrea de Coleções de Usuários</strong>
+ <br/>
+ Nesta área, você tem acesso às coleções criadas e organizadas pelos
+ usuários da plataforma. É mais uma possibilidade de buscar recursos
+ educacionais para sua aula!
+ </p>
+
+
+ </Card>
+ );
+}
+
+const Card = styled.div`
+ margin-bottom: 5px;
+ background-color: #fff;
+ box-shadow: 0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);
+ padding: 30px;
+ color: #666;
+ span {
+ font-size: 14px;
+ font-weight: bold;
+ }
+
+ p {
+ margin: 0 0 10px;
+ font-size: 15px;
+ }
+
+
+
+`
\ No newline at end of file
diff --git a/src/Components/HelpCenter/TabsPlataformaMEC/What.js b/src/Components/HelpCenter/TabsPlataformaMEC/What.js
new file mode 100644
index 0000000000000000000000000000000000000000..b9d143c7b8ea0aea81d8d174025410213a88cf39
--- /dev/null
+++ b/src/Components/HelpCenter/TabsPlataformaMEC/What.js
@@ -0,0 +1,111 @@
+/*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, { Component, useState, useEffect } from 'react';
+import styled from 'styled-components';
+
+
+
+
+export default function What(props) {
+ return(
+ <Card>
+ <link href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap" rel="stylesheet"/>
+ <div style={{marginBottom: "9px"}}>
+ <span>{props.title}</span>
+ </div>
+ <p>Bem-vindo(a) à Plataforma MEC, uma iniciativa do Ministério da Educação!</p>
+ <p>
+ A Plataforma MEC é parte do processo de implementação do Compromisso 6
+ do 3º Plano de Ação da Parceria Governo Aberto (OGP-Brasil), que tem por
+ objetivo “incorporar na polÃtica educacional o potencial da cultura digital,
+ de modo a fomentar a autonomia para uso, reuso e adaptação de recursos
+ educacionais digitais, valorizando a pluralidade e a diversidade da educação
+ brasileiraâ€. O documento completo pode ser consultado <a href="http://www.governoaberto.cgu.gov.br/noticias/2017/3o-plano-de-acao-nacional-na-parceria-para-governo-aberto" >aqui</a>.
+ </p>
+ <p>
+ <strong>Abertos</strong>
+ <br/>
+ Recursos que, no mÃnimo, têm uma licença de uso mais flexÃvel. Uma licença
+ que permite que o recurso possa ser utilizado, alterado e manipulado sem
+ restrições. Adicionalmente, um recurso aberto pode utilizar um formato
+ aberto, um formato de arquivo que permite a fácil edição por terceiros.
+ Nenhum controle (como cadastro e senha) deve existir para acesso a recursos abertos.
+ </p>
+ <p>
+ <strong>Grátis</strong>
+ <br/>
+ Recursos para os quais os usuários não têm que fazer qualquer desembolso
+ monetário, mas que exibem certas restrições: usualmente não podem ser
+ baixados ou alterados. E, muitas vezes, como os recursos fechados, é
+ necessário cadastro ou troca de informações pessoais para seu uso.
+ </p>
+ <p>
+ <strong>Fechados</strong>
+ <br/>
+ Recursos que criam restrições ao seu acesso, uso ou reuso. Como exemplo,
+ podemos mencionar recursos que só são acessÃveis mediante cadastro, que
+ são pagos, ou que têm licenças restritivas (como “todos os direitos
+ reservadosâ€, o sÃmbolo ©).
+ </p>
+
+ <p>
+ O Plano Nacional de Educação (2014-2024) enfatiza, nas metas 5 e 7, a
+ importância dos recursos educacionais abertos para fomentar a qualidade da
+ educação básica.
+ </p>
+ <p>
+ A Resolução CNE/CES nº 1, de 11 de março de 2016, também enfatiza a importância
+ dos recursos educacionais abertos para as instituições de educação superior
+ e para as atividades de educação a distância, promovendo “a criação,
+ disponibilização, uso e gestão de tecnologias e recursos educacionais abertos,
+ por meio de licenças livres, que facilitem o uso, a revisão, a tradução, a
+ adaptação, a recombinação, a distribuição e o compartilhamento gratuito pelo
+ cidadão, resguardados os direitos autorais pertinentes.â€
+ </p>
+ </Card>
+ );
+}
+
+const Card = styled.div`
+ margin-bottom: 5px;
+ background-color: #fff;
+ box-shadow: 0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);
+ padding: 30px;
+ color: #666;
+ span {
+ font-size: 14px;
+ font-weight: bold;
+ }
+
+ a {
+ color: #00bcd4;
+ text-decoration: none;
+ :hover {
+ text-decoration: underline;
+ }
+ }
+
+ p {
+ margin: 0 0 10px;
+ font-size: 15px;
+ }
+
+
+
+`
\ No newline at end of file
diff --git a/src/Components/HelpCenter/TabsPlataformaMEC/Which.js b/src/Components/HelpCenter/TabsPlataformaMEC/Which.js
new file mode 100644
index 0000000000000000000000000000000000000000..5c29e884bca59f0998009f46bf7db48020b82f5f
--- /dev/null
+++ b/src/Components/HelpCenter/TabsPlataformaMEC/Which.js
@@ -0,0 +1,85 @@
+/*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, { Component, useState, useEffect } from 'react';
+import styled from 'styled-components';
+
+
+
+const parcas = [
+ {parceiro: "- Portal do Profesor"},
+ {parceiro:"- DomÃnio Público;"},
+ {parceiro: "- Banco internacional de objetos educacionais;"},
+ {parceiro:"- TV Escola;"}
+]
+
+export default function Which(props) {
+ return(
+ <Card>
+ <link href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap" rel="stylesheet"/>
+ <div style={{marginBottom: "9px"}}>
+ <span>{props.title}</span>
+ </div>
+ <p>
+ A plataforma integra os Recursos Educacionais Digitais dos principais portais abertos. Conheça alguns deles:
+ </p>
+ <ul>
+ {parcas.map((item)=>
+ <li>{item.parceiro}</li>
+
+ )}
+
+ </ul>
+
+ </Card>
+ );
+}
+
+const Card = styled.div`
+ margin-bottom: 5px;
+ background-color: #fff;
+ box-shadow: 0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);
+ padding: 30px;
+ color: #666;
+ span {
+ font-size: 14px;
+ font-weight: bold;
+ }
+
+
+
+ ul {
+ padding-left: 0 !important;
+ margin-top: 0;
+ margin-bottom: 10px;
+ line-height: 1.42857143;
+ }
+
+ li {
+ list-style-type: none;
+ font-size: 14px;
+ }
+
+ p {
+ margin: 0 0 10px;
+ font-size: 15px;
+ }
+
+
+
+`
\ No newline at end of file
diff --git a/src/Components/HelpCenter/TabsResourseFind/HowToDo.js b/src/Components/HelpCenter/TabsResourseFind/HowToDo.js
new file mode 100644
index 0000000000000000000000000000000000000000..087f162553f7f9a559d5c04dc2b9ec801e8cee40
--- /dev/null
+++ b/src/Components/HelpCenter/TabsResourseFind/HowToDo.js
@@ -0,0 +1,94 @@
+/*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, { Component, useState, useEffect } from 'react';
+import styled from 'styled-components';
+
+import Busca from '../../../img/ajuda/busca_img.jpg'
+
+
+
+
+export default function HowToDo(props) {
+ return(
+ <Card>
+ <link href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap" rel="stylesheet"/>
+ <div style={{marginBottom: "9px"}}>
+ <span>{props.title}</span>
+ </div>
+ <p>
+ Siga os passos a seguir:
+ </p>
+ <ol>
+ <li>Acesse a <a href="/" target="_blank">Página Inicial</a>.</li>
+
+ <li>
+ Digite o que você procura na caixa de busca localizada no centro da
+ página. Por exemplo: “vÃdeo aquecimento global†ou “aritméticaâ€.
+ </li>
+
+ </ol>
+ <img src={Busca} alt="Busca imagem"/>
+ <p>
+ No resultado serão apresentados os cartões de recursos relacionados à sua busca.
+ </p>
+
+ </Card>
+ );
+}
+
+const Card = styled.div`
+ margin-bottom: 5px;
+ background-color: #fff;
+ box-shadow: 0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);
+ padding: 30px;
+ color: #666;
+ span {
+ font-size: 14px;
+ font-weight: bold;
+ }
+
+ img {
+ height: auto;
+ width: 100%;
+ }
+ a {
+ color: #00bcd4;
+ text-decoration: none;
+ :hover {
+ text-decoration: underline;
+ }
+ }
+ ol {
+ margin-top: 0;
+ margin-bottom: 10px;
+ line-height: 1.42857143;
+ }
+
+ li {
+ font-size: 14px;
+ }
+
+ p {
+ margin: 0 0 10px;
+ font-size: 15px;
+ }
+
+
+
+`
\ No newline at end of file
diff --git a/src/Components/HelpCenter/TabsResourseFind/HowToFilter.js b/src/Components/HelpCenter/TabsResourseFind/HowToFilter.js
new file mode 100644
index 0000000000000000000000000000000000000000..78e362ff725494ad3209f4d6d2ffece03add983c
--- /dev/null
+++ b/src/Components/HelpCenter/TabsResourseFind/HowToFilter.js
@@ -0,0 +1,73 @@
+/*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, { Component, useState, useEffect } from 'react';
+import styled from 'styled-components';
+
+import Filtros from '../../../img/ajuda/filtros_img.jpg'
+
+
+
+
+export default function HowToFilter(props) {
+ return(
+ <Card>
+ <link href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap" rel="stylesheet"/>
+ <div style={{marginBottom: "9px"}}>
+ <span>{props.title}</span>
+ </div>
+ <p>
+ Após efetuar sua busca, você pode filtrar os resultados de acordo com o
+ que procura, com a opção “Filtros†localizada no lado esquerdo da página.
+ </p>
+
+ <img src={Filtros} alt="Busca imagem"/>
+ <p>
+ Você pode filtrar pelos componentes curriculares, tipos de recurso, etapas de ensino e palavra-chave.
+ </p>
+
+ </Card>
+ );
+}
+
+const Card = styled.div`
+ margin-bottom: 5px;
+ background-color: #fff;
+ box-shadow: 0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);
+ padding: 30px;
+ color: #666;
+ span {
+ font-size: 14px;
+ font-weight: bold;
+ }
+
+ img {
+ height: 200px;
+ margin-right: 40px;
+ vertical-align: middle;
+ }
+
+
+ p {
+ margin: 0 0 10px;
+ font-size: 15px;
+ }
+
+
+
+`
\ No newline at end of file
diff --git a/src/Components/HelpCenter/TabsResourseFind/HowToRank.js b/src/Components/HelpCenter/TabsResourseFind/HowToRank.js
new file mode 100644
index 0000000000000000000000000000000000000000..0891ec5324efe7565f4460770b41bc7c9a0fc991
--- /dev/null
+++ b/src/Components/HelpCenter/TabsResourseFind/HowToRank.js
@@ -0,0 +1,65 @@
+/*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, { Component, useState, useEffect } from 'react';
+import styled from 'styled-components';
+
+
+
+
+
+export default function HowToRank(props) {
+ return(
+ <Card>
+ <link href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap" rel="stylesheet"/>
+ <div style={{marginBottom: "9px"}}>
+ <span>{props.title}</span>
+ </div>
+ <p>
+ O ranqueamento dos recursos está relacionado com as avaliações, estrelas,
+ comentários, curtidas e até mesmo com as informações sobre o seu recurso.
+ Ou seja, quanto mais interações positivas um recurso tiver, mais significativo
+ ele será para a plataforma e seus usuários. Isso quer dizer que os recursos
+ melhores ranqueados ganham mais destaque nos resultados de busca!
+ </p>
+
+
+
+ </Card>
+ );
+}
+
+const Card = styled.div`
+ margin-bottom: 5px;
+ background-color: #fff;
+ box-shadow: 0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);
+ padding: 30px;
+ color: #666;
+ span {
+ font-size: 14px;
+ font-weight: bold;
+ }
+
+ p {
+ margin: 0 0 10px;
+ font-size: 15px;
+ }
+
+
+
+`
\ No newline at end of file
diff --git a/src/Components/HelpCenter/TabsResoursePub/How.js b/src/Components/HelpCenter/TabsResoursePub/How.js
new file mode 100644
index 0000000000000000000000000000000000000000..fbf097e1a37e4d83d797e789c2edf682b03abf70
--- /dev/null
+++ b/src/Components/HelpCenter/TabsResoursePub/How.js
@@ -0,0 +1,98 @@
+/*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, { Component, useState, useEffect } from 'react';
+import styled from 'styled-components';
+
+
+
+
+export default function How(props) {
+ return(
+ <Card>
+ <link href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap" rel="stylesheet"/>
+ <div style={{marginBottom: "9px"}}>
+ <span>{props.title}</span>
+ </div>
+ <p>
+ Você possui um material pedagógico interessante e gostaria de compartilhar
+ com outros professores? Aproveite o espaço da Plataforma MEC para publicar
+ esse Recurso! Para isso, siga os passos a seguir:
+ </p>
+ <ol>
+ <li>Acesse a <a href="/" target="_blank">Página Inicial</a> da Plataforma.</li>
+
+ <li>Clique no botão “Publicar Recurso†localizado no topo da página.</li>
+
+ <li>
+ No quadro pontilhado em azul (enviar recurso), no canto esquerdo da
+ página, você pode escolher o arquivo do seu computador, arrastá-lo ao
+ quadro ou até mesmo enviar o link de um recurso no botão “enviar linkâ€
+ logo abaixo.
+ </li>
+
+ <li>Em seguida, preencha as informações sobre o recurso no formulário ao lado.</li>
+ </ol>
+
+ <p>
+ Dica: para que outros usuários encontre o seu recurso é muito importante
+ que você preencha o formulário com a maior quantidade de detalhes possÃvel!
+ </p>
+ <li>No final do formulário é só clicar no botão “Salvar e Avançar†para prosseguir ao próximo passo.</li>
+ <li>Ao concluir todas as etapas, você receberá uma mensagem de confirmação do envio do seu Recurso!</li>
+
+ </Card>
+ );
+}
+
+const Card = styled.div`
+ margin-bottom: 5px;
+ background-color: #fff;
+ box-shadow: 0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);
+ padding: 30px;
+ color: #666;
+ span {
+ font-size: 14px;
+ font-weight: bold;
+ }
+ a {
+ color: #00bcd4;
+ text-decoration: none;
+ :hover {
+ text-decoration: underline;
+ }
+ }
+
+ ol {
+ margin-top: 0;
+ margin-bottom: 10px;
+ line-height: 1.42857143;
+ }
+
+ li {
+ font-size: 14px;
+ }
+
+ p {
+ margin: 0 0 10px;
+ font-size: 15px;
+ }
+
+
+
+`
\ No newline at end of file
diff --git a/src/Components/HelpCenter/TabsResoursePub/Which.js b/src/Components/HelpCenter/TabsResoursePub/Which.js
new file mode 100644
index 0000000000000000000000000000000000000000..514e5211564eca79b8289a192c5c6098c470eabd
--- /dev/null
+++ b/src/Components/HelpCenter/TabsResoursePub/Which.js
@@ -0,0 +1,91 @@
+/*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, { Component, useState, useEffect } from 'react';
+import styled from 'styled-components';
+
+
+
+
+export default function Which(props) {
+ return(
+ <Card>
+ <link href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap" rel="stylesheet"/>
+ <div style={{marginBottom: "9px"}}>
+ <span>{props.title}</span>
+ </div>
+ <p>
+ Veja abaixo a lista dos Tipos de Recursos e alguns exemplos de Formatos de
+ Arquivos que são aceitos para publicação na Plataforma MEC:
+ </p>
+ <ul>
+ <li>Imagem - JPG, GIF e PNG</li>
+ <li>Mapa - JPG, GIF e PNG</li>
+ <li>Animação/Simulador - SWF</li>
+ <li>Texto - PDF, TXT, DOC e DOCX (Word)</li>
+ <li>Ãudio - MP3 e WAV</li>
+ <li>VÃdeo - WMV</li>
+ <li>Apresentação - PPT e PPTX (PowerPoint)</li>
+ <li>Infográfico - JPG, GIF e PNG</li>
+ <li>Software Educacional - EXE</li>
+ <li>Outros - ZIP e RAR (Compactadores) XLS e XLSX (Excel)</li>
+
+ </ul>
+
+
+
+ </Card>
+ );
+}
+
+const Card = styled.div`
+ margin-bottom: 5px;
+ background-color: #fff;
+ box-shadow: 0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);
+ padding: 30px;
+ color: #666;
+ span {
+ font-size: 14px;
+ font-weight: bold;
+ }
+ a {
+ color: #00bcd4;
+ text-decoration: none;
+ :hover {
+ text-decoration: underline;
+ }
+ }
+
+ ul {
+ margin-top: 0;
+ margin-bottom: 10px;
+ line-height: 1.42857143;
+ }
+
+ li {
+ font-size: 14px;
+ }
+
+ p {
+ margin: 0 0 10px;
+ font-size: 15px;
+ }
+
+
+
+`
\ No newline at end of file
diff --git a/src/Components/HelpCenter/TabsResoursePub/Why.js b/src/Components/HelpCenter/TabsResoursePub/Why.js
new file mode 100644
index 0000000000000000000000000000000000000000..c0e703c02e30124913f408254fd112162f90ff23
--- /dev/null
+++ b/src/Components/HelpCenter/TabsResoursePub/Why.js
@@ -0,0 +1,76 @@
+/*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, { Component, useState, useEffect } from 'react';
+import styled from 'styled-components';
+
+
+
+
+export default function Why(props) {
+ return(
+ <Card>
+ <link href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap" rel="stylesheet"/>
+ <div style={{marginBottom: "9px"}}>
+ <span>{props.title}</span>
+ </div>
+ <p>
+ Ao enviar um recurso você estará ajudando a fortalecer a distribuição
+ de recursos educacionais digitais para o ensino básico brasileiro e
+ contribuindo na valorização da pluralidade e da diversidade da educação
+ brasileira.
+ </p>
+
+ <p>
+ A Plataforma MEC é um meio seguro e um site de referência para a
+ publicação e disseminação de Recursos Educacionais Digitais. Aproveite
+ esse espaço para compartilhar com professores de todo o Brasil recursos
+ criados por você ou aquele recurso de outro autor que você usou em aula
+ e seus alunos gostaram!
+ </p>
+ <p>
+ A partir do momento que seu recurso estiver publicado na Plataforma, os
+ usuários poderão interagir com seu recurso e você receberá as
+ notificações dos comentários, avaliações e curtidas. Cada uma dessas
+ interações contam para que seu recurso ganhe uma posição de destaque
+ na Plataforma.
+ </p>
+ <p>Participe dessa rede de colaboração de fomento da qualidade da educação básica!</p>
+ </Card>
+ );
+}
+
+const Card = styled.div`
+ margin-bottom: 5px;
+ background-color: #fff;
+ box-shadow: 0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);
+ padding: 30px;
+ color: #666;
+ span {
+ font-size: 14px;
+ font-weight: bold;
+ }
+
+ p {
+ margin: 0 0 10px;
+ font-size: 15px;
+ }
+
+
+
+`
\ No newline at end of file
diff --git a/src/Components/MenuBar.js b/src/Components/MenuBar.js
index 165b1b39bab58419d6fa13c172ffe8c275d70020..fdece9ab7ffd114385dde14e0e26769c9aa89f18 100644
--- a/src/Components/MenuBar.js
+++ b/src/Components/MenuBar.js
@@ -99,11 +99,11 @@ export default function MenuBar(props){
]
const menuAjuda = [
- { name: "Central de Ajuda", href: ""},
- { name: "Publicando Recursos", href: ""},
- { name: "Encontrando Recursos", href: ""},
- { name: "Participando da Rede", href: ""},
- { name: "Gerenciando a Conta", href: ""}
+ { name: "Central de Ajuda", href: "ajuda"},
+ { name: "Publicando Recursos", href: "publicando-recurso"},
+ { name: "Encontrando Recursos", href: "encontrando-recurso"},
+ { name: "Participando da Rede", href: "participando-da-rede"},
+ { name: "Gerenciando a Conta", href: "gerenciando-conta"}
]
const minhaArea = [
diff --git a/src/Pages/HelpCenter.js b/src/Pages/HelpCenter.js
new file mode 100644
index 0000000000000000000000000000000000000000..4151f5d7e5ff0d6921deed2be52f1b519343c055
--- /dev/null
+++ b/src/Pages/HelpCenter.js
@@ -0,0 +1,444 @@
+/*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, { Component, useState, useEffect } from 'react';
+import styled from 'styled-components';
+import Grid from '@material-ui/core/Grid';
+import { Link } from 'react-router-dom';
+
+
+
+
+import Banner3 from '../img/ajuda/Banner3.png';
+import CardPublicando from '../Components/HelpCenter/Cards/CardPublicando';
+import CardEncontrando from '../Components/HelpCenter/Cards/CardEncontrando';
+import CardParticipando from '../Components/HelpCenter/Cards/CardParticipando';
+import CardGerenciando from '../Components/HelpCenter/Cards/CardGerenciando';
+
+
+
+
+function HelpCenter(props) {
+ return(
+ <div style={{backgroundColor: "#f4f4f4"}}>
+ <link href="https://fonts.googleapis.com/css?family=Pompiere|Roboto:300,400&display=swap" rel="stylesheet"/>
+
+ <Secao1>
+ <div className= "container">
+ <img src={Banner3} alt="banner3"/>
+ <div className= "conteudo">
+ <div className= "title">
+ <h2>OLÃ! COMO PODEMOS AJUDAR?</h2>
+ </div>
+ </div>
+ </div>
+ </Secao1>
+
+ <Secao2>
+ <div className="container">
+ <div className="container-secao">
+ <div className="conteudo">
+ <div className="cabecalho">
+ <h2>Tópicos de Ajuda</h2>
+ </div>
+ <div>
+ <Grid container spacing={2}>
+ <Grid item xs={3}>
+ <CardPublicando/>
+ </Grid>
+ <Grid item xs={3}>
+ <CardEncontrando/>
+ </Grid>
+ <Grid item xs={3}>
+ <CardParticipando/>
+ </Grid>
+ <Grid item xs={3}>
+ <CardGerenciando/>
+ </Grid>
+ </Grid>
+ </div>
+ </div>
+ </div>
+ </div>
+
+ </Secao2>
+
+ <Secao3>
+ <Grid style={{height:"100%"}} container spacing={2}>
+ <Grid style={{backgroundColor: "#333",paddingInline:"0" }} item xs={6}>
+ <iframe src="https://player.vimeo.com/video/231609051" width="100%" height="100%" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe>
+ </Grid>
+ <Grid item xs={6}>
+ <p className="titulo-sobre-ajuda">Plataforma MEC de Recursos Educacionais Digitais</p>
+ <p className="conteudo-sobre-ajuda">
+ Construa conosco a plataforma e amplie sua rede de conhecimento<br/>
+ interagindo com pessoas envolvidas com experiências que ocorrem<br/>
+ em todo o Brasil!
+ </p>
+ <hr/>
+ <Grid container spacing={1}>
+ <Grid item xs={6}>
+ <p className="links">
+ <br/>
+ <Link to={{
+ pathname : 'plataforma-mec',
+ state : {value : '0'}
+ }}>O que é a Plataforma MEC</Link>
+ <br/>
+ <Link to={{
+ pathname : 'plataforma-mec',
+ state : {value : '1'}
+ }}>Como foi construida a Plataforma<br/>MEC?</Link>
+ <br/>
+ <Link to={{
+ pathname : 'plataforma-mec',
+ state : {value : '3'}
+ }}>Quais são os Portais Parceiros?</Link>
+ </p>
+ </Grid>
+ <Grid item xs={6}>
+ <p className="links">
+ <br/>
+ <Link to={{
+ pathname : 'plataforma-mec',
+ state : {value : '2'}
+ }}>Entendendo as 3 áreas</Link>
+ <br/>
+ <Link to={{
+ pathname : 'plataforma-mec',
+ state : {value : '4'}
+ }}>Tipos de recursos</Link>
+ <br/>
+ <Link to={{
+ pathname : 'plataforma-mec',
+ state : {value : '5'}
+ }}>Softwares especÃficos</Link>
+ </p>
+ </Grid>
+ </Grid>
+
+ </Grid>
+ </Grid>
+ </Secao3>
+
+ <Secao4>
+ <div className="container">
+ <div className="conteudo">
+ <h2>Não encontrou o que você precisa?</h2>
+ <span>Entre em contato com a nossa Central de Ajuda</span>
+ <br/>
+ <button><a href="contato">ENTRAR EM CONTATO</a></button>
+
+ </div>
+ </div>
+ </Secao4>
+
+ </div>
+ );
+}
+
+export default HelpCenter;
+
+
+const Secao1 = styled.div`
+ height: 374px;
+ background-color:#00bcd4;
+ text-align: center;
+ .container {
+ height: 100%;
+ width: 1170px;
+ display: flex;
+ -webkit-box-pack: center;
+ justify-content: center;
+ -webkit-box-align: center;
+ align-items: center;
+ padding-right: 15px;
+ padding-left: 15px;
+ margin-right: auto;
+ margin-left: auto;
+
+ img {
+ position: relative;
+ left: 82px;
+ top: 41.6%;
+ width: 230px;
+ float: left;
+ min-height: 1px;
+ padding-right: 15px;
+ padding-left: 15px;
+
+ }
+
+
+ .conteudo {
+ display: flex;
+ justify-content: center;
+
+ .title {
+
+ }
+ }
+
+ h2 {
+ font-family: Pompiere,cursive;
+ font-size: 35px;
+ margin: 0;
+ margin-top: 45px;
+ color:#fff;
+ font-weight: 500;
+ line-height: 1.1;
+ }
+
+ }
+`
+
+const Secao2 = styled.div`
+ height: 536px;
+ background-color:#f4f4f4;
+ text-align: center;
+ margin-bottom: 20px;
+
+ .container {
+ height: 100%;
+ width: 1170px;
+ margin-right: auto;
+ margin-left: auto;
+
+ .container-secao {
+ height: 100%;
+ padding-top: 50px;
+ .conteudo {
+ width: 100%;
+ text-align: center;
+ .cabecalho {
+ margin-bottom: 50px;
+ text-align: center;
+ h2 {
+ font-size: 30px;
+ font-weight: lighter;
+ color:#666;
+ margin: 0;
+ }
+ }
+ .card-ajuda {
+
+ height: 360px;
+ margin-bottom: 20px
+
+
+ .card {
+ height: 280px;
+ padding: 40px 15px;
+ text-align: center;
+ font-size: 14px;
+ background-color:#fff;
+ box-shadow: 0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);
+
+ h3 {
+ font-size: 24px;
+ font-weight: 400;
+ color: #666;
+ margin-top: 20px;
+ margin-bottom: 10px;
+ line-height: 1.1;
+ }
+
+ hr {
+ margin-top: 20px;
+ margin-bottom: 20px;
+ border: 0;
+ border-top: 1px solid #eee;
+ color: #a5a5a5;
+ }
+
+ a {
+ font-size: 15px;
+ color: #666;
+ text-decoration: none;
+ text-align: center;
+
+ }
+
+ img {
+ height: 62px ;
+ width: 62px ;
+ }
+
+ }
+
+ .card-rodape {
+ box-sizing: border-box;
+
+ a {
+ border-radius: 0;
+ width: 240.5px;
+ font-size: 13px;
+ font-weight: 700;
+ color: #fff;
+ transition: .2s ease;
+ border: none;
+ height: 40px;
+ padding: 0 20px;
+ line-height: 40px;
+ background-color: #00bcd4;
+ touch-action: manipulation;
+ cursor: pointer;
+ text-decoration: none;
+ display: inline-block;
+ margin-bottom: 0;
+ text-align: center;
+ white-space: nowrap;
+ vertical-align: middle;
+ touch-action: manipulation;
+ cursor: pointer;
+ user-select: none;
+ box-shadow: 0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);
+
+ }
+ }
+
+ }
+ }
+ }
+ }
+
+
+`
+
+const Secao3 = styled.div`
+ height: 375px;
+ padding: 0;
+ text-align: center;
+ background-color: #fff;
+ width: 1170px;
+ margin-inline: auto;
+ color: rgba(0,0,0,0.87);
+
+ .links {
+ font-size: 15px;
+ font-weight: lighter;
+ text-align: center;
+ margin: 0 0 10px;
+ line-height: 1.42857143;
+ a {
+ color: #666;
+ text-decoration: none;
+ :hover {
+ color: #000;
+ }
+ }
+ }
+
+ .titulo-sobre-ajuda {
+ font-family: Pompiere;
+ font-size: 30px;
+ margin-block: 40px
+ }
+
+ .conteudo-sobre-ajuda {
+ font-size: 15px;
+ margin-bottom: 30px;
+ margin: 0 0 10px;
+ }
+
+ hr {
+ width: 350px;
+ border: 0;
+ border-top: 1px solid #ccc;
+ margin-top: 20px;
+ margin-bottom: 20px;
+
+ }
+
+
+
+`
+
+const Secao4 = styled.div`
+ height: 290px;
+
+ .container {
+ height: 100%;
+ color: #a5a5a5;
+ width: 1170px;
+ margin-inline: auto;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ .conteudo {
+ width: 100%;
+ text-align: center;
+
+ h2 {
+ font-size: 24px;
+ font-weight: lighter;
+ color:#666;
+ margin-top: 20px;
+ margin-bottom: 10px;
+ text-align: center;
+ }
+
+ span {
+ font-size: 15px;
+ color:#777;
+ text-align: center;
+
+ }
+
+ button {
+ margin-top: 25px;
+ color: rgba(255,255,255,0.87);
+ background-color: rgb(255,127,0);
+ box-shadow: 0 2px 5px 0 rgba(0,0,0,.26);
+ outline: none;display: inline-block;
+ position: relative;
+ cursor: pointer;
+ min-height: 36px;
+ min-width: 88px;
+ line-height: 36px;
+ vertical-align: middle;
+ -webkit-box-align: center;
+ align-items: center;
+ text-align: center;
+ border-radius: 3px;
+ box-sizing: border-box;
+ user-select: none;
+ border: 0;
+ padding: 0 6px;
+ margin: 6px 8px;
+ white-space: nowrap;
+ text-transform: uppercase;
+ font-weight: 500;
+ font-size: 14px;
+ font-style: inherit;
+ font-variant: inherit;
+ font-family: inherit;
+ text-decoration: none;
+ overflow: hidden;
+ transition: box-shadow .4s cubic-bezier(.25,.8,.25,1),background-color .4s cubic-bezier(.25,.8,.25,1);
+ letter-spacing: .01em;
+ a {
+ text-decoration: none;
+ color: #fff;
+ }
+ }
+ }
+ }
+
+
+`
diff --git a/src/Pages/TabsHelp/TabManageAc.js b/src/Pages/TabsHelp/TabManageAc.js
new file mode 100644
index 0000000000000000000000000000000000000000..d8e749881d7e33c2b07668333a321bdc8de617d5
--- /dev/null
+++ b/src/Pages/TabsHelp/TabManageAc.js
@@ -0,0 +1,270 @@
+/*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, { Component, useState, useEffect } from 'react';
+import styled from 'styled-components';
+import Tabs from '@material-ui/core/Tabs'
+import Tab from '@material-ui/core/Tab';
+import Breadcrumbs from '@material-ui/core/Breadcrumbs';
+import Grid from '@material-ui/core/Grid';
+import GerenciandoConta from '../../img/ajuda/Gerenciando_a_conta.png';
+import Why from '../../Components/HelpCenter/TabsManageAc/Why'
+import HowToDo from '../../Components/HelpCenter/TabsManageAc/HowToDo';
+import HowToChange from '../../Components/HelpCenter/TabsManageAc/HowToChange';
+import HowToAccess from '../../Components/HelpCenter/TabsManageAc/HowToAccess';
+import Forget from '../../Components/HelpCenter/TabsManageAc/Forget';
+import CardParticipando from '../../Components/HelpCenter/Cards/CardParticipando';
+import CardEncontrando from '../../Components/HelpCenter/Cards/CardEncontrando';
+import CardPublicando from '../../Components/HelpCenter/Cards/CardPublicando';
+
+
+
+
+
+
+
+export default function TabManageAc (props) {
+ const tabs= [
+ 'Por que me cadastrar?',
+ 'Como fazer meu cadastro?',
+ 'Como alterar minha senha?',
+ 'Como acessar a conta?',
+ 'Esqueci minha senha. O que fazer?'
+ ]
+
+ const [tabValue, setTabValue] = useState(
+ Number(props.location.state.value) || 0);
+
+ const handleChangeTab = (e, newValue) => {
+ setTabValue(newValue)
+}
+
+
+
+ return(
+ <div style={{backgroundColor:"#f4f4f4"}}>
+ <link href="https://fonts.googleapis.com/css?family=Pompiere|Roboto:500,400&display=swap" rel="stylesheet"/>
+
+ <Secao>
+ <Grid container spacing={4}>
+ <Grid item xs={3}>
+ <Menu>
+ <h4>Gerenciando a conta</h4>
+ <TabsStyled orientation = "vertical"
+ variant = "scrollable"
+ value = {tabValue}
+ onChange = {handleChangeTab}
+ TabIndicatorProps = {{style:{display: "none"}}}
+ >
+ <TabStyled label={tabs[0]}></TabStyled>
+ <TabStyled label={tabs[1]}></TabStyled>
+ <TabStyled label={tabs[2]}></TabStyled>
+ <TabStyled label={tabs[3]}></TabStyled>
+ <TabStyled label={tabs[4]}></TabStyled>
+ </TabsStyled>
+ <br/>
+ <div className="voltarInicio">
+ <a href="ajuda">VOLTAR AO ÃNICIO</a>
+ </div>
+ <hr/>
+ <div className="procurava">
+ Não encontrou o que procurava? Entre em
+ <a href="contato"> contato</a>
+ </div>
+ </Menu>
+ </Grid>
+
+ <Grid item xs={9}>
+ <Principal>
+ <div className="fixo">
+ <img src={GerenciandoConta} alt="Gerenciando a conta"/>
+ <span>Gerenciando a conta</span>
+ </div>
+ {tabValue === 0 && <Why title={tabs[0]}/>}
+ {tabValue === 1 && <HowToDo title={tabs[1]}/>}
+ {tabValue === 2 && <HowToChange title={tabs[2]}/>}
+ {tabValue === 3 && <HowToAccess title={tabs[3]}/>}
+ {tabValue === 4 && <Forget title={tabs[4]}/>}
+ <div className="resultadosProcura">
+ <span>Não era bem o que você procurava?</span>
+ <div className="subtitulo">
+ <span>Você pode navegar pelos tópicos de ajuda ou entrar em <a href="contato">Contato</a>.</span>
+ </div>
+ </div>
+ <Grid style={{marginBottom:"50px"}} container spacing={2}>
+ <Grid item xs={4}>
+ <CardPublicando/>
+ </Grid>
+ <Grid item xs={4}>
+ <CardEncontrando/>
+ </Grid>
+ <Grid item xs={4}>
+ <CardParticipando/>
+ </Grid>
+ </Grid>
+
+
+ </Principal>
+ </Grid>
+ </Grid>
+
+
+ </Secao>
+ </div>
+ );
+}
+
+const Principal = styled.div`
+ .fixo {
+
+ height: 40px;
+ text-align: center;
+ background-color: #fff;
+ box-shadow: 0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);
+ padding: 30px;
+ margin-bottom: 30px;
+ color: #666;
+
+
+ img {
+ height: 50px;
+ width: 50px;
+ margin-right: 40px;
+ vertical-align: middle;
+
+ }
+
+ span {
+ font-size: 20px;
+ vertical-align: ;
+ }
+
+
+
+ }
+ .resultadosProcura {
+ text-align: center;
+ margin-block: 30px;
+ padding-inline: 15px;
+ color: #666;
+ span {
+ font-size: 24px;
+ }
+ .subtitulo {
+ margin-top: 10px;
+
+ span {
+ font-size: 15px
+ }
+
+ a {
+ font-size: 15px;
+ padding: 0;
+ color:#00bcd4;
+ text-decoration: none;
+ }
+
+ }
+ }
+
+`
+
+const TabsStyled = styled(Tabs)`
+
+ .Mui-selected {
+ background-color: #e7e4e4;
+ }
+
+ .MuiTab-root{
+ text-transform: none !important;
+ }
+
+`
+
+const TabStyled = styled(Tab)`
+
+ padding: 4px 15px !important;
+ font-weight: 500;
+ font-size: 14px !important;
+ border-radius: 4px !important;
+
+
+
+
+
+ &:hover {
+ background-color: #e7e4e4;
+ }
+`
+
+
+const Menu = styled.div`
+ width: auto;
+ background-color: #fff;
+ color: #666;
+ padding-block: 10px;
+ box-shadow: 0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);
+
+ h4 {
+ padding-inline: 15px;
+ font-size: 18px;
+ margin-block: 10px;
+ font-weight: 500;
+ line-height: 1.1;
+ }
+
+ .voltarInicio {
+ padding: 4px 15px;
+ font-size: 15px;
+ text-align: center;
+ a {
+ font-size: 15px;
+ padding: 0;
+ color:#00bcd4;
+ text-decoration: none;
+ }
+ }
+
+ hr {
+ border: 0;
+ border-top: 1px solid #ccc;
+ margin-top: 20px;
+ margin-bottom: 20px;
+ }
+
+ .procurava {
+ padding: 4px 15px;
+ font-size: 15px;
+ text-align: center;
+
+ a {
+ font-size: 15px;
+ padding: 0;
+ color:#00bcd4;
+ text-decoration: none;
+ }
+
+ }
+
+`
+
+const Secao = styled.div`
+ width: 1138px;
+ margin-inline: auto;
+
+`
diff --git a/src/Pages/TabsHelp/TabNetPart.js b/src/Pages/TabsHelp/TabNetPart.js
new file mode 100644
index 0000000000000000000000000000000000000000..3e8a6201aa2817d56d1a608428bf12f481380224
--- /dev/null
+++ b/src/Pages/TabsHelp/TabNetPart.js
@@ -0,0 +1,258 @@
+/*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, { Component, useState, useEffect } from 'react';
+import styled from 'styled-components';
+import Tabs from '@material-ui/core/Tabs'
+import Tab from '@material-ui/core/Tab';
+import Breadcrumbs from '@material-ui/core/Breadcrumbs';
+import Grid from '@material-ui/core/Grid';
+import ParticipandoRede from '../../img/ajuda/Participando_da_rede.png';
+import How from '../../Components/HelpCenter/TabsNetPart/How'
+import What from '../../Components/HelpCenter/TabsNetPart/What'
+import CardEncontrando from '../../Components/HelpCenter/Cards/CardEncontrando';
+import CardPublicando from '../../Components/HelpCenter/Cards/CardPublicando';
+import CardGerenciando from '../../Components/HelpCenter/Cards/CardGerenciando';
+
+
+
+
+
+
+
+export default function TabNetPart (props) {
+ const tabs= [
+ 'Como comentar ou avaliar um recurso?',
+ 'Que tipo de comentário posso fazer sobre o recurso?',
+ ]
+
+ const [tabValue, setTabValue] = useState(
+ Number(props.location.state.value) || 0);
+
+ const handleChangeTab = (e, newValue) => {
+ setTabValue(newValue)
+}
+
+
+
+ return(
+ <div style={{backgroundColor:"#f4f4f4"}}>
+ <link href="https://fonts.googleapis.com/css?family=Pompiere|Roboto:500,400&display=swap" rel="stylesheet"/>
+
+ <Secao>
+ <Grid container spacing={4}>
+ <Grid item xs={3}>
+ <Menu>
+ <h4>Participando da rede</h4>
+ <TabsStyled orientation = "vertical"
+ variant = "scrollable"
+ value = {tabValue}
+ onChange = {handleChangeTab}
+ TabIndicatorProps = {{style:{display: "none"}}}
+ >
+ <TabStyled label={tabs[0]}></TabStyled>
+ <TabStyled label={tabs[1]}></TabStyled>
+ </TabsStyled>
+ <br/>
+ <div className="voltarInicio">
+ <a href="ajuda">VOLTAR AO ÃNICIO</a>
+ </div>
+ <hr/>
+ <div className="procurava">
+ Não encontrou o que procurava? Entre em
+ <a href="contato"> contato</a>
+ </div>
+ </Menu>
+ </Grid>
+
+ <Grid item xs={9}>
+ <Principal>
+ <div className="fixo">
+ <img src={ParticipandoRede} alt="Participando da Rede"/>
+ <span>Participando da rede</span>
+ </div>
+ {tabValue === 0 && <How title={tabs[0]}/>}
+ {tabValue === 1 && <What title={tabs[1]}/>}
+ <div className="resultadosProcura">
+ <span>Não era bem o que você procurava?</span>
+ <div className="subtitulo">
+ <span>Você pode navegar pelos tópicos de ajuda ou entrar em <a href="contato">Contato</a>.</span>
+ </div>
+ </div>
+ <Grid style={{marginBottom:"50px"}} container spacing={2}>
+ <Grid item xs={4}>
+ <CardPublicando/>
+ </Grid>
+ <Grid item xs={4}>
+ <CardEncontrando/>
+ </Grid>
+ <Grid item xs={4}>
+ <CardGerenciando/>
+ </Grid>
+ </Grid>
+
+
+ </Principal>
+ </Grid>
+ </Grid>
+
+
+ </Secao>
+ </div>
+ );
+}
+
+const Principal = styled.div`
+ .fixo {
+
+ height: 40px;
+ text-align: center;
+ background-color: #fff;
+ box-shadow: 0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);
+ padding: 30px;
+ margin-bottom: 30px;
+ color: #666;
+
+
+ img {
+ height: 50px;
+ width: 50px;
+ margin-right: 40px;
+ vertical-align: middle;
+
+ }
+
+ span {
+ font-size: 20px;
+ vertical-align: ;
+ }
+
+
+
+ }
+ .resultadosProcura {
+ text-align: center;
+ margin-block: 30px;
+ padding-inline: 15px;
+ color: #666;
+ span {
+ font-size: 24px;
+ }
+ .subtitulo {
+ margin-top: 10px;
+
+ span {
+ font-size: 15px
+ }
+
+ a {
+ font-size: 15px;
+ padding: 0;
+ color:#00bcd4;
+ text-decoration: none;
+ }
+
+ }
+ }
+
+`
+
+const TabsStyled = styled(Tabs)`
+
+ .Mui-selected {
+ background-color: #e7e4e4;
+ }
+
+ .MuiTab-root{
+ text-transform: none !important;
+ }
+
+`
+
+const TabStyled = styled(Tab)`
+
+ padding: 4px 15px !important;
+ font-weight: 500;
+ font-size: 14px !important;
+ border-radius: 4px !important;
+
+
+
+
+
+ &:hover {
+ background-color: #e7e4e4;
+ }
+`
+
+
+const Menu = styled.div`
+ width: auto;
+ background-color: #fff;
+ color: #666;
+ padding-block: 10px;
+ box-shadow: 0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);
+
+ h4 {
+ padding-inline: 15px;
+ font-size: 18px;
+ margin-block: 10px;
+ font-weight: 500;
+ line-height: 1.1;
+ }
+
+ .voltarInicio {
+ padding: 4px 15px;
+ font-size: 15px;
+ text-align: center;
+ a {
+ font-size: 15px;
+ padding: 0;
+ color:#00bcd4;
+ text-decoration: none;
+ }
+ }
+
+ hr {
+ border: 0;
+ border-top: 1px solid #ccc;
+ margin-top: 20px;
+ margin-bottom: 20px;
+ }
+
+ .procurava {
+ padding: 4px 15px;
+ font-size: 15px;
+ text-align: center;
+
+ a {
+ font-size: 15px;
+ padding: 0;
+ color:#00bcd4;
+ text-decoration: none;
+ }
+
+ }
+
+`
+
+const Secao = styled.div`
+ width: 1138px;
+ margin-inline: auto;
+
+`
diff --git a/src/Pages/TabsHelp/TabPlataformaMEC.js b/src/Pages/TabsHelp/TabPlataformaMEC.js
new file mode 100644
index 0000000000000000000000000000000000000000..894d3a9ecc9d47c2be3e5b16b682eecc4b59212a
--- /dev/null
+++ b/src/Pages/TabsHelp/TabPlataformaMEC.js
@@ -0,0 +1,240 @@
+/*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, { Component, useState, useEffect } from 'react';
+import styled from 'styled-components';
+import Tabs from '@material-ui/core/Tabs'
+import Tab from '@material-ui/core/Tab';
+import Breadcrumbs from '@material-ui/core/Breadcrumbs';
+import Grid from '@material-ui/core/Grid';
+import CardEncontrando from '../../Components/HelpCenter/Cards/CardEncontrando';
+import CardParticipando from '../../Components/HelpCenter/Cards/CardParticipando';
+import CardGerenciando from '../../Components/HelpCenter/Cards/CardGerenciando';
+import What from '../../Components/HelpCenter/TabsPlataformaMEC/What';
+import Understand from '../../Components/HelpCenter/TabsPlataformaMEC/Understand';
+import Which from '../../Components/HelpCenter/TabsPlataformaMEC/Which';
+import Types from '../../Components/HelpCenter/TabsPlataformaMEC/Types';
+import Software from '../../Components/HelpCenter/TabsPlataformaMEC/Software';
+import How from '../../Components/HelpCenter/TabsPlataformaMEC/How';
+
+
+
+
+
+
+
+export default function TabPlataformaMEC (props) {
+ const tabs= [
+ 'O que é a plataforma MEC?',
+ 'Como foi construÃda a Plataforma MEC?',
+ 'Entendendo as 3 áreas da Plataforma',
+ 'Quais são os Portais Parceiros?',
+ 'Tipos de recursos',
+ 'Softwares especÃficos'
+ ]
+
+ const [tabValue, setTabValue] = useState(
+ Number(props.location.state.value) || 0);
+
+ const handleChangeTab = (e, newValue) => {
+ setTabValue(newValue)
+}
+
+
+
+ return(
+ <div style={{backgroundColor:"#f4f4f4"}}>
+ <link href="https://fonts.googleapis.com/css?family=Pompiere|Roboto:500,400&display=swap" rel="stylesheet"/>
+
+ <Secao>
+ <Grid container spacing={4}>
+ <Grid item xs={3}>
+ <Menu>
+ <h4>Plataforma MEC</h4>
+ <TabsStyled orientation = "vertical"
+ variant = "scrollable"
+ value = {tabValue}
+ onChange = {handleChangeTab}
+ TabIndicatorProps = {{style:{display: "none"}}}
+ >
+ <TabStyled label={tabs[0]}></TabStyled>
+ <TabStyled label={tabs[1]}></TabStyled>
+ <TabStyled label={tabs[2]}></TabStyled>
+ <TabStyled label={tabs[3]}></TabStyled>
+ <TabStyled label={tabs[4]}></TabStyled>
+ <TabStyled label={tabs[5]}></TabStyled>
+ </TabsStyled>
+ <br/>
+ <div className="voltarInicio">
+ <a href="ajuda">VOLTAR AO ÃNICIO</a>
+ </div>
+ <hr/>
+ <div className="procurava">
+ Não encontrou o que procurava? Entre em
+ <a href="contato"> contato</a>
+ </div>
+ </Menu>
+ </Grid>
+
+ <Grid item xs={9}>
+ <Principal>
+ {tabValue === 0 && <What title={tabs[0]}/>}
+ {tabValue === 1 && <How title={tabs[1]}/>}
+ {tabValue === 2 && <Understand title={tabs[2]}/>}
+ {tabValue === 3 && <Which title={tabs[3]}/>}
+ {tabValue === 4 && <Types title={tabs[4]}/>}
+ {tabValue === 5 && <Software title={tabs[5]}/>}
+
+ <Grid style={{marginBlock:"50px"}} container spacing={2}>
+ <Grid item xs={4}>
+ <CardEncontrando/>
+ </Grid>
+ <Grid item xs={4}>
+ <CardParticipando/>
+ </Grid>
+ <Grid item xs={4}>
+ <CardGerenciando/>
+ </Grid>
+
+ </Grid>
+
+ </Principal>
+ </Grid>
+ </Grid>
+
+
+ </Secao>
+ </div>
+ );
+}
+
+const Principal = styled.div`
+ .fixo {
+
+ height: 40px;
+ text-align: center;
+ background-color: #fff;
+ box-shadow: 0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);
+ padding: 30px;
+ margin-bottom: 30px;
+ color: #666;
+
+
+ img {
+ height: 50px;
+ width: 50px;
+ margin-right: 40px;
+ vertical-align: middle;
+
+ }
+
+ span {
+ font-size: 20px;
+ vertical-align: ;
+ }
+
+
+
+ }
+
+`
+
+const TabsStyled = styled(Tabs)`
+
+ .Mui-selected {
+ background-color: #e7e4e4;
+ }
+
+ .MuiTab-root{
+ text-transform: none !important;
+ }
+
+`
+
+const TabStyled = styled(Tab)`
+
+ padding: 4px 15px !important;
+ font-weight: 500;
+ font-size: 14px !important;
+ border-radius: 4px !important;
+
+
+
+
+
+ &:hover {
+ background-color: #e7e4e4;
+ }
+`
+
+
+const Menu = styled.div`
+ width: auto;
+ background-color: #fff;
+ color: #666;
+ padding-block: 10px;
+ box-shadow: 0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);
+
+ h4 {
+ padding-inline: 15px;
+ font-size: 18px;
+ margin-block: 10px;
+ font-weight: 500;
+ line-height: 1.1;
+ }
+
+ .voltarInicio {
+ padding: 4px 15px;
+ font-size: 15px;
+ text-align: center;
+ a {
+ font-size: 15px;
+ padding: 0;
+ color:#00bcd4;
+ text-decoration: none;
+ }
+ }
+
+ hr {
+ border: 0;
+ border-top: 1px solid #ccc;
+ margin-top: 20px;
+ margin-bottom: 20px;
+ }
+
+ .procurava {
+ padding: 4px 15px;
+ font-size: 15px;
+ text-align: center;
+
+ a {
+ font-size: 15px;
+ padding: 0;
+ color:#00bcd4;
+ text-decoration: none;
+ }
+
+ }
+
+`
+
+const Secao = styled.div`
+ width: 1138px;
+ margin-inline: auto;
+
+`
diff --git a/src/Pages/TabsHelp/TabResourseFind.js b/src/Pages/TabsHelp/TabResourseFind.js
new file mode 100644
index 0000000000000000000000000000000000000000..a9d407dde1d0498409a736e0bf4efd225da9e77b
--- /dev/null
+++ b/src/Pages/TabsHelp/TabResourseFind.js
@@ -0,0 +1,260 @@
+/*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, { Component, useState, useEffect } from 'react';
+import styled from 'styled-components';
+import Tabs from '@material-ui/core/Tabs'
+import Tab from '@material-ui/core/Tab';
+import Breadcrumbs from '@material-ui/core/Breadcrumbs';
+import Grid from '@material-ui/core/Grid';
+import EncontrandoRecurso from '../../img/ajuda/Encontrando_recursos.png';
+import HowToDo from '../../Components/HelpCenter/TabsResourseFind/HowToDo'
+import HowToRank from '../../Components/HelpCenter/TabsResourseFind/HowToRank'
+import HowToFilter from '../../Components/HelpCenter/TabsResourseFind/HowToFilter';
+import CardPublicando from '../../Components/HelpCenter/Cards/CardPublicando';
+import CardParticipando from '../../Components/HelpCenter/Cards/CardParticipando';
+import CardGerenciando from '../../Components/HelpCenter/Cards/CardGerenciando';
+
+
+
+
+
+
+
+export default function TabResourseFind (props) {
+ const tabs= [
+ 'Como fazer uma busca?',
+ 'Como filtrar os resultados?',
+ 'Como os recursos são ranqueados?'
+ ]
+
+ const [tabValue, setTabValue] = useState(
+ Number(props.location.state.value) || 0);
+
+ const handleChangeTab = (e, newValue) => {
+ setTabValue(newValue)
+}
+
+
+ return(
+ <div style={{backgroundColor:"#f4f4f4"}}>
+ <link href="https://fonts.googleapis.com/css?family=Pompiere|Roboto:500,400&display=swap" rel="stylesheet"/>
+
+ <Secao>
+ <Grid container spacing={4}>
+ <Grid item xs={3}>
+ <Menu>
+ <h4>Encontrando Recursos</h4>
+ <TabsStyled orientation = "vertical"
+ variant = "scrollable"
+ value = {tabValue}
+ onChange = {handleChangeTab}
+ TabIndicatorProps = {{style:{display: "none"}}}
+ >
+ <TabStyled label={tabs[0]}></TabStyled>
+ <TabStyled label={tabs[1]}></TabStyled>
+ <TabStyled label={tabs[2]}></TabStyled>
+ </TabsStyled>
+ <br/>
+ <div className="voltarInicio">
+ <a href="ajuda">VOLTAR AO ÃNICIO</a>
+ </div>
+ <hr/>
+ <div className="procurava">
+ Não encontrou o que procurava? Entre em
+ <a href="contato"> contato</a>
+ </div>
+ </Menu>
+ </Grid>
+
+ <Grid item xs={9}>
+ <Principal>
+ <div className="fixo">
+ <img src={EncontrandoRecurso} alt="Encontrando Recursos"/>
+ <span>Encontrando recursos</span>
+ </div>
+ {tabValue === 0 && <HowToDo title={tabs[0]}/>}
+ {tabValue === 1 && <HowToFilter title={tabs[1]}/>}
+ {tabValue === 2 && <HowToRank title={tabs[2]}/>}
+ <div className="resultadosProcura">
+ <span>Não era bem o que você procurava?</span>
+ <div className="subtitulo">
+ <span>Você pode navegar pelos tópicos de ajuda ou entrar em <a href="contato">Contato</a>.</span>
+ </div>
+ </div>
+ <Grid style={{marginBottom:"50px"}} container spacing={2}>
+ <Grid item xs={4}>
+ <CardPublicando/>
+ </Grid>
+ <Grid item xs={4}>
+ <CardParticipando/>
+ </Grid>
+ <Grid item xs={4}>
+ <CardGerenciando/>
+ </Grid>
+ </Grid>
+
+ </Principal>
+ </Grid>
+ </Grid>
+
+
+ </Secao>
+ </div>
+ );
+}
+
+const Principal = styled.div`
+ .fixo {
+
+ height: 40px;
+ text-align: center;
+ background-color: #fff;
+ box-shadow: 0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);
+ padding: 30px;
+ margin-bottom: 30px;
+ color: #666;
+
+
+ img {
+ height: 50px;
+ width: 50px;
+ margin-right: 40px;
+ vertical-align: middle;
+
+ }
+
+ span {
+ font-size: 20px;
+ vertical-align: ;
+ }
+
+
+
+ }
+ .resultadosProcura {
+ text-align: center;
+ margin-block: 30px;
+ padding-inline: 15px;
+ color: #666;
+ span {
+ font-size: 24px;
+ }
+ .subtitulo {
+ margin-top: 10px;
+
+ span {
+ font-size: 15px
+ }
+
+ a {
+ font-size: 15px;
+ padding: 0;
+ color:#00bcd4;
+ text-decoration: none;
+ }
+
+ }
+ }
+
+`
+
+const TabsStyled = styled(Tabs)`
+
+ .Mui-selected {
+ background-color: #e7e4e4;
+ }
+
+ .MuiTab-root{
+ text-transform: none !important;
+ }
+
+`
+
+const TabStyled = styled(Tab)`
+
+ padding: 4px 15px !important;
+ font-weight: 500;
+ font-size: 14px !important;
+ border-radius: 4px !important;
+
+
+
+
+
+ &:hover {
+ background-color: #e7e4e4;
+ }
+`
+
+
+const Menu = styled.div`
+ width: auto;
+ background-color: #fff;
+ color: #666;
+ padding-block: 10px;
+ box-shadow: 0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);
+
+ h4 {
+ padding-inline: 15px;
+ font-size: 18px;
+ margin-block: 10px;
+ font-weight: 500;
+ line-height: 1.1;
+ }
+
+ .voltarInicio {
+ padding: 4px 15px;
+ font-size: 15px;
+ text-align: center;
+ a {
+ font-size: 15px;
+ padding: 0;
+ color:#00bcd4;
+ text-decoration: none;
+ }
+ }
+
+ hr {
+ border: 0;
+ border-top: 1px solid #ccc;
+ margin-top: 20px;
+ margin-bottom: 20px;
+ }
+
+ .procurava {
+ padding: 4px 15px;
+ font-size: 15px;
+ text-align: center;
+
+ a {
+ font-size: 15px;
+ padding: 0;
+ color:#00bcd4;
+ text-decoration: none;
+ }
+
+ }
+
+`
+
+const Secao = styled.div`
+ width: 1138px;
+ margin-inline: auto;
+
+`
diff --git a/src/Pages/TabsHelp/TabResoursePub.js b/src/Pages/TabsHelp/TabResoursePub.js
new file mode 100644
index 0000000000000000000000000000000000000000..edd5f90367b71453d74a87c2a3349827413465ad
--- /dev/null
+++ b/src/Pages/TabsHelp/TabResoursePub.js
@@ -0,0 +1,262 @@
+/*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, { Component, useState, useEffect } from 'react';
+import styled from 'styled-components';
+import Tabs from '@material-ui/core/Tabs'
+import Tab from '@material-ui/core/Tab';
+import Breadcrumbs from '@material-ui/core/Breadcrumbs';
+import Grid from '@material-ui/core/Grid';
+import PublicandoRecursos from '../../img/ajuda/Publicando_recursos.png';
+import Why from '../../Components/HelpCenter/TabsResoursePub/Why'
+import How from '../../Components/HelpCenter/TabsResoursePub/How'
+import Which from '../../Components/HelpCenter/TabsResoursePub/Which'
+import CardEncontrando from '../../Components/HelpCenter/Cards/CardEncontrando';
+import CardParticipando from '../../Components/HelpCenter/Cards/CardParticipando';
+import CardGerenciando from '../../Components/HelpCenter/Cards/CardGerenciando';
+
+
+
+
+
+
+
+export default function TabResoursePub (props) {
+ const tabs= [
+ 'Por que enviar um recurso?',
+ 'Como publicar um recurso?',
+ 'Quais tipos de recursos e formatos de arquivo a plataforma aceita?'
+ ]
+
+ const [tabValue, setTabValue] = useState(
+ Number(props.location.state.value) || 0);
+
+ const handleChangeTab = (e, newValue) => {
+ setTabValue(newValue)
+}
+
+
+
+ return(
+ <div style={{backgroundColor:"#f4f4f4"}}>
+ <link href="https://fonts.googleapis.com/css?family=Pompiere|Roboto:500,400&display=swap" rel="stylesheet"/>
+
+ <Secao>
+ <Grid container spacing={4}>
+ <Grid item xs={3}>
+ <Menu>
+ <h4>Publicando Recursos</h4>
+ <TabsStyled orientation = "vertical"
+ variant = "scrollable"
+ value = {tabValue}
+ onChange = {handleChangeTab}
+ TabIndicatorProps = {{style:{display: "none"}}}
+ >
+ <TabStyled label={tabs[0]}></TabStyled>
+ <TabStyled label={tabs[1]}></TabStyled>
+ <TabStyled label={tabs[2]}></TabStyled>
+ </TabsStyled>
+ <br/>
+ <div className="voltarInicio">
+ <a href="ajuda">VOLTAR AO ÃNICIO</a>
+ </div>
+ <hr/>
+ <div className="procurava">
+ Não encontrou o que procurava? Entre em
+ <a href="contato"> contato</a>
+ </div>
+ </Menu>
+ </Grid>
+
+ <Grid item xs={9}>
+ <Principal>
+ <div className="fixo">
+ <img src={PublicandoRecursos} alt="Publicando Recursos"/>
+ <span>Publicando Recursos</span>
+ </div>
+ {tabValue === 0 && <Why title={tabs[0]}/>}
+ {tabValue === 1 && <How title={tabs[1]}/>}
+ {tabValue === 2 && <Which title={tabs[2]}/>}
+ <div className="resultadosProcura">
+ <span>Não era bem o que você procurava?</span>
+ <div className="subtitulo">
+ <span>Você pode navegar pelos tópicos de ajuda ou entrar em <a href="contato">Contato</a>.</span>
+ </div>
+ </div>
+ <Grid style={{marginBottom:"50px"}} container spacing={2}>
+ <Grid item xs={4}>
+ <CardEncontrando/>
+ </Grid>
+ <Grid item xs={4}>
+ <CardParticipando/>
+ </Grid>
+ <Grid item xs={4}>
+ <CardGerenciando/>
+ </Grid>
+
+ </Grid>
+
+ </Principal>
+ </Grid>
+ </Grid>
+
+
+ </Secao>
+ </div>
+ );
+}
+
+const Principal = styled.div`
+ .fixo {
+
+ height: 40px;
+ text-align: center;
+ background-color: #fff;
+ box-shadow: 0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);
+ padding: 30px;
+ margin-bottom: 30px;
+ color: #666;
+
+
+ img {
+ height: 50px;
+ width: 50px;
+ margin-right: 40px;
+ vertical-align: middle;
+
+ }
+
+ span {
+ font-size: 20px;
+ vertical-align: ;
+ }
+
+
+
+ }
+ .resultadosProcura {
+ text-align: center;
+ margin-block: 30px;
+ padding-inline: 15px;
+ color: #666;
+ span {
+ font-size: 24px;
+ }
+ .subtitulo {
+ margin-top: 10px;
+
+ span {
+ font-size: 15px
+ }
+
+ a {
+ font-size: 15px;
+ padding: 0;
+ color:#00bcd4;
+ text-decoration: none;
+ }
+
+ }
+ }
+
+`
+
+const TabsStyled = styled(Tabs)`
+
+ .Mui-selected {
+ background-color: #e7e4e4;
+ }
+
+ .MuiTab-root{
+ text-transform: none !important;
+ }
+
+`
+
+const TabStyled = styled(Tab)`
+
+ padding: 4px 15px !important;
+ font-weight: 500;
+ font-size: 14px !important;
+ border-radius: 4px !important;
+
+
+
+
+
+ &:hover {
+ background-color: #e7e4e4;
+ }
+`
+
+
+const Menu = styled.div`
+ width: auto;
+ background-color: #fff;
+ color: #666;
+ padding-block: 10px;
+ box-shadow: 0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);
+
+ h4 {
+ padding-inline: 15px;
+ font-size: 18px;
+ margin-block: 10px;
+ font-weight: 500;
+ line-height: 1.1;
+ }
+
+ .voltarInicio {
+ padding: 4px 15px;
+ font-size: 15px;
+ text-align: center;
+ a {
+ font-size: 15px;
+ padding: 0;
+ color:#00bcd4;
+ text-decoration: none;
+ }
+ }
+
+ hr {
+ border: 0;
+ border-top: 1px solid #ccc;
+ margin-top: 20px;
+ margin-bottom: 20px;
+ }
+
+ .procurava {
+ padding: 4px 15px;
+ font-size: 15px;
+ text-align: center;
+
+ a {
+ font-size: 15px;
+ padding: 0;
+ color:#00bcd4;
+ text-decoration: none;
+ }
+
+ }
+
+`
+
+const Secao = styled.div`
+ width: 1138px;
+ margin-inline: auto;
+
+`
diff --git a/src/img/ajuda/Banner3.png b/src/img/ajuda/Banner3.png
new file mode 100644
index 0000000000000000000000000000000000000000..f8ef4e07a32fb559bc56fa6fb708c996136d0277
Binary files /dev/null and b/src/img/ajuda/Banner3.png differ
diff --git a/src/img/ajuda/Encontrando_recursos.png b/src/img/ajuda/Encontrando_recursos.png
new file mode 100644
index 0000000000000000000000000000000000000000..29945370b3a73a2443a72a83933bf7c07507652f
Binary files /dev/null and b/src/img/ajuda/Encontrando_recursos.png differ
diff --git a/src/img/ajuda/Gerenciando_a_conta.png b/src/img/ajuda/Gerenciando_a_conta.png
new file mode 100644
index 0000000000000000000000000000000000000000..c3b1f2ea797f367a58d3f7bf86d9ff949303aef2
Binary files /dev/null and b/src/img/ajuda/Gerenciando_a_conta.png differ
diff --git a/src/img/ajuda/Participando_da_rede.png b/src/img/ajuda/Participando_da_rede.png
new file mode 100644
index 0000000000000000000000000000000000000000..747d8e7b8d0363044694dbe1a074a2edaa79a85e
Binary files /dev/null and b/src/img/ajuda/Participando_da_rede.png differ
diff --git a/src/img/ajuda/Publicando_recursos.png b/src/img/ajuda/Publicando_recursos.png
new file mode 100644
index 0000000000000000000000000000000000000000..ea861e1461d148656d459e6421e782b032ab94aa
Binary files /dev/null and b/src/img/ajuda/Publicando_recursos.png differ
diff --git a/src/img/ajuda/busca_img.jpg b/src/img/ajuda/busca_img.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..14b104c1d681312d31aadfa88e1b137392379715
Binary files /dev/null and b/src/img/ajuda/busca_img.jpg differ
diff --git a/src/img/ajuda/filtros_img.jpg b/src/img/ajuda/filtros_img.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..c729375e0e3047e589821308c7c9952f7df83737
Binary files /dev/null and b/src/img/ajuda/filtros_img.jpg differ
diff --git a/src/img/ajuda/login_img.jpg b/src/img/ajuda/login_img.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..700149684a857b2069cb2f10a7d7cf162412cbe1
Binary files /dev/null and b/src/img/ajuda/login_img.jpg differ
diff --git a/src/img/ajuda/recuperarsenha_img.jpg b/src/img/ajuda/recuperarsenha_img.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..b0dce269aa9827be92471994f0f76cba73de1fca
Binary files /dev/null and b/src/img/ajuda/recuperarsenha_img.jpg differ