diff --git a/src/App.js b/src/App.js
index 96fcaca9a3e0c03ec95e1414350360d6a649f3ea..2219481cb009ea944b82a9b5972ef83100e351e8 100644
--- a/src/App.js
+++ b/src/App.js
@@ -24,7 +24,7 @@ import EcFooter from './Components/EcFooter';
import GNUAGPLfooter from './Components/AGPLFooter';
import UserPage from './Pages/UserPage';
import UserTerms from './Pages/UserTerms';
-
+import Contact from './Pages/Contact';
import Teste from './Pages/Teste';
import ResourcePage from './Pages/ResourcePage';
@@ -78,7 +78,7 @@ export default function App(){
<Route path="/permission" component={PublicationPermissionsPage}/>
{/*<Route path="termos-de-uso#publicacoes-de-usuario" component={}*/}
-
+ <Route path="/contato" component={Contact}/>
<Route path="/termos" component={UserTerms}/>
<Route path="/teste" component={Teste}/>
diff --git a/src/Components/Carousel.js b/src/Components/Carousel.js
index 27c394f4ce6a8deb60f90fdc37cd594560659c7a..97a81eac88942cdaed8bd05474d7d38e806e2d8d 100644
--- a/src/Components/Carousel.js
+++ b/src/Components/Carousel.js
@@ -426,7 +426,13 @@ const CarouselStyled = styled(Carousel)`
display: inline-block;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
- content: '';
+ content: ' ';
+ }
+ .carousel .control-arrow {
+ background: transparent !important;
+ }
+ .m4d-icons {
+ size: 50px
}
diff --git a/src/Pages/Contact.js b/src/Pages/Contact.js
new file mode 100644
index 0000000000000000000000000000000000000000..a82c809c9e92d067e300bdaaf21bc1c558ab39b0
--- /dev/null
+++ b/src/Pages/Contact.js
@@ -0,0 +1,208 @@
+/*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 Banner1 from '../img/banner-sobre.jpg';
+
+const Seção1 = styled.div `
+ width: 100%;
+ background-image: url(${Banner1});
+ background-size: cover;
+ background-position: bottom center;
+ height: 250px;
+ color:#fff;
+ line-height: 1.1;
+ text-align: center;
+ padding-top: 120px;
+
+ h2 {
+ font-family: Pompiere,cursive;
+ font-size: 52px;
+ color:#fff;
+ margin: 0;
+ padding-left: 0;
+ padding-right: 0;
+ font-weight: 500;
+ }
+
+ h3 {
+ margin-top: 20px;
+ margin-bottom: 10px;
+ font-family: Roboto,sans-serif;
+ font-size: 30px;
+ font-weight: lighter;
+
+ }
+`
+
+const Seção2 = styled.div `
+ height: 708px;
+ background-color: #f4f4f4;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+`
+
+const Formulário = styled.div `
+ background-color: #fff;
+ box-shadow: 0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);
+ padding: 40px;
+ height: 520px;
+ width: 420px;
+ color: #666;
+
+ form .inputBlock {
+ margin-block: 22px;
+
+ }
+
+ form .inputBlock label {
+ font-size: 14px;
+ font-weight: bold;
+ display: block;
+
+ }
+
+ form .inputBlock input {
+ width: 100%;
+ height: 32px;
+ font-size: 14px;
+ border: 0;
+ border-bottom: 1px solid #eee;
+
+ }
+
+ form .inputBlock.Message input {
+ height: 131px;
+ }
+
+ form buttom[type=submit] {
+ width: 100%;
+ border: 0;
+ margin-top: 30px;
+ background: #7d40e7
+ border-radius: 2px;
+ padding: 15px 20px;
+ font-size: 16px;
+ font-weight: bold;
+ color: #fff;
+ cursor: pointer;
+ transition: background 0.5s;
+
+ }
+
+ form buttom[type=submit]:hover {
+ background: #6931ac
+ }
+
+
+ h2 {
+ font-size: 24px;
+ font-weight: lighter;
+ margin-bottom: 50px;
+ margin-top: 20px;
+ text-align: center;
+
+ }
+`
+
+
+
+const Seção3 = styled.div `
+ height: 127px;
+ background-color: #f4f4f4;
+ color:#666;
+ line-height: 1.42857143;
+ font-size:18px;
+ text-align: center;
+ padding-top: 70px;
+
+
+ p {
+ margin: 0 0 10px 0;
+ }
+
+
+`
+
+
+
+
+
+
+class Contact extends Component {
+ render() {
+ return(
+ <>
+ <link href="https://fonts.googleapis.com/css?family=Kalam|Pompiere|Roboto:300,400&display=swap" rel="stylesheet"/>
+ <Seção1>
+ <h2>CONTATO</h2>
+ <h3>Quer enviar uma mensagem?</h3>
+ </Seção1>
+
+ <Seção2>
+
+ <Formulário>
+ <h2>Entre em contato para enviar dúvidas,<br/>sugestões ou crÃticas</h2>
+ <form>
+ <div className="inputBlock">
+ <label htmlFor="nome">Nome *</label>
+ <input
+ required
+ name="nome"
+ id="nome"
+
+ />
+ </div>
+ <div className="inputBlock">
+ <label htmlFor="email">E-mail *</label>
+ <input
+ required
+ name="email"
+ id="email"
+
+ />
+ </div>
+ <div className="inputBlock Message">
+ <label htmlFor="mensagem">Mensagem *</label>
+ <input
+ required
+ nome="mensagem"
+ id="mensagem"
+
+ />
+ </div>
+ <button type="submit">Enviar Mensagem</button>
+ </form>
+
+ </Formulário>
+ </Seção2>
+
+ <Seção3>
+
+ <span>MEC - Ministério da Educação </span>
+ <p>Endereço: Esplanada dos Ministérios Bloco L - Ed.Sede e Anexos. CEP: 70.047-900 - BrasÃlia/DF. Telefone: 0800 616161</p>
+
+ </Seção3>
+ </>
+ );
+ }
+}
+
+export default Contact;
diff --git a/src/Pages/UserTerms.js b/src/Pages/UserTerms.js
index 411fdd623c1f375c51d1107ec011ccf5f92211d0..9e29e2b2400e9dac71121efa66b3b2cb20007446 100644
--- a/src/Pages/UserTerms.js
+++ b/src/Pages/UserTerms.js
@@ -46,6 +46,7 @@ const center={
width: "100%",
textAlign: "center"
}
+
const container={
paddingInline: "15px",
paddingBlock: "20px",
@@ -54,6 +55,7 @@ const container={
width:"750px"
}
+
const secao2={
height: "100%",
alignItems: "center",
@@ -67,6 +69,7 @@ const AColorido = styled.a`
text-decoration:none;
`
+
const ImagemSeçao2 = styled.div`
font-family: Roboto, sans-serif;
@@ -107,6 +110,7 @@ const ImagemSeçao2 = styled.div`
}
}
`
+
const Secao3 = styled.div`
background-color: #FF7F00;
@media (min-width: 1000px) {
diff --git a/src/img/banner-sobre.jpg b/src/img/banner-sobre.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..fa5d39fcdde21ae4740e41723f6be0322ef9add0
Binary files /dev/null and b/src/img/banner-sobre.jpg differ