Fix links na página plataforma MEC

src/Components/HelpCenter/TabsPlataformaMEC/Software.js

+/*Copyright (C) 2019 Centro de Computacao Cientifica e Software Livre
+Departamento de Informatica - Universidade Federal do Parana
+
+This file is part of Plataforma Integrada MEC.
+
+Plataforma Integrada MEC is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+Plataforma Integrada MEC is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU Affero General Public License for more details.
+
+You should have received a copy of the GNU Affero General Public License
+along with Plataforma Integrada MEC.  If not, see <http://www.gnu.org/licenses/>.*/
+
+import React, { 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

src/Components/HelpCenter/TabsPlataformaMEC/Type.js → src/Components/HelpCenter/TabsPlataformaMEC/Types.js

@@ -30,7 +30,7 @@ const tipos = [
   {recursos:"- vídeos"}
 ]
 
-export default function Type(props) {
+export default function Types(props) {
   return(
     <Card>
       <link href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap" rel="stylesheet"/>

src/Pages/HelpCenter.js

@@ -100,9 +100,15 @@ function HelpCenter(props) {
                     state : {value : '0'}
                   }}>O que é a Plataforma MEC</Link>
                   <br/>
-                  <a>Como foi construida a Plataforma<br/>MEC?</a>
+                  <Link to={{
+                    pathname : 'plataforma-mec',
+                    state : {value : '1'}
+                  }}>Como foi construida a Plataforma<br/>MEC?</Link>
                   <br/>
-                  <a>Quais são os Portais Parceiros?</a>
+                  <Link to={{
+                    pathname : 'plataforma-mec',
+                    state : {value : '3'}
+                  }}>Quais são os Portais Parceiros?</Link>
                 </p>
               </Grid>
               <Grid item xs={6}>
@@ -113,9 +119,15 @@ function HelpCenter(props) {
                     state : {value : '2'}
                   }}>Entendendo as 3 áreas</Link>
                   <br/>
-                  <a>Tipos de recursos</a>
+                  <Link to={{
+                    pathname : 'plataforma-mec',
+                    state : {value : '4'}
+                  }}>Tipos de recursos</Link>
                   <br/>
-                  <a>Softwares específicos</a>
+                  <Link to={{
+                    pathname : 'plataforma-mec',
+                    state : {value : '5'}
+                  }}>Softwares específicos</Link>
                 </p>
               </Grid>
             </Grid>

src/Pages/TabsHelp/TabPlataformaMEC.js

@@ -30,7 +30,8 @@ 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 Type from '../../Components/HelpCenter/TabsPlataformaMEC/Type';
+import Types from '../../Components/HelpCenter/TabsPlataformaMEC/Types';
+import Software from '../../Components/HelpCenter/TabsPlataformaMEC/Software';
 
 
 
@@ -97,8 +98,8 @@ export default function TabPlataformaMEC (props) {
               {tabValue === 1 && <How title={tabs[1]}/>}
               {tabValue === 2 && <Understand title={tabs[2]}/>}
               {tabValue === 3 && <Which title={tabs[2]}/>}
-              {tabValue === 4 && <Type title={tabs[2]}/>}
-              {tabValue === 5 && <Which title={tabs[2]}/>}
+              {tabValue === 4 && <Types title={tabs[2]}/>}
+              {tabValue === 5 && <Software title={tabs[2]}/>}
               
               <Grid style={{marginBlock:"50px"}} container spacing={2}>
                 <Grid item xs={4}>