Aplicando o carousel na seção 1 do site

src/Components/Carrossel.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} from 'react';
+import { Carousel } from 'react-responsive-carousel';
+
+const areaStyle={
+  paddingTop: "5px",
+  fontSize: "16px",
+  textAlign:"left",
+  backgroundColor: "inherit",
+  width: "700px",
+  padding: "20px",
+  minHeight: "150px"
+}
+export default class CarouselTermosResumidos extends Component {
+
+  constructor(props){
+    super(props);
+
+  };
+  render(){
+    return(
+      <Carousel showThumbs={false} infiniteLoop={true} showStatus={false}>
+        <div>TESTE</div>
+        <div>DO</div>
+        <div>CAROUSEL</div>
+        <div>AGORA</div>
+        <div>VAI</div>
+        <div>POR</div>
+        <div>FAVOR</div>
+      </Carousel>
+    );
+
+
+  }
+}

src/Components/Modal.js

-import React from 'react';
-import { makeStyles } from '@material-ui/core/styles';
-import Modal from '@material-ui/core/Modal';
+/*Copyright (C) 2019 Centro de Computacao Cientifica e Software Livre
+Departamento de Informatica - Universidade Federal do Parana
 
-function rand() {
-  return Math.round(Math.random() * 20) - 10;
-}
+This file is part of Plataforma Integrada MEC.
 
-function getModalStyle() {
-  const top = 50 + rand();
-  const left = 50 + rand();
+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.
 
-  return {
-    top: `${top}%`,
-    left: `${left}%`,
-    transform: `translate(-${top}%, -${left}%)`,
-  };
-}
+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 from 'react';
+import { makeStyles } from '@material-ui/styles';
+import Modal from '@material-ui/core/Modal';
+import { Carousel } from 'react-responsive-carousel';
+import Backdrop from '@material-ui/core/Backdrop';
+import Fade from '@material-ui/core/Fade';
 
 const useStyles = makeStyles(theme => ({
+  modal: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center"
+  },
   paper: {
-    position: 'absolute',
-    width: 400,
-    backgroundColor: theme.palette.background.paper,
+    backgroundColor:"blue",
     border: '2px solid #000',
-    boxShadow: theme.shadows[5],
-    padding: theme.spacing(2, 4, 3),
+    boxShadow: " 0px 3px 5px -1px rgba(0,0,0,0.2),0px 5px 8px 0px rgba(0,0,0,0.14),0px 1px 14px 0px rgba(0,0,0,0.12)"
   },
+  carousel: {
+    background:"blue",
+    width: "750px",
+    height:"370px"
+  }
 }));
 
-export default function SimpleModal() {
+export default function TransitionsModal() {
   const classes = useStyles();
-  // getModalStyle is not a pure function, we roll the style only on the first render
-  const [modalStyle] = React.useState(getModalStyle);
   const [open, setOpen] = React.useState(false);
 
   const handleOpen = () => {
@@ -44,23 +55,32 @@ export default function SimpleModal() {
 
   return (
     <div>
-      <p>Click to get the full Modal experience!</p>
       <button type="button" onClick={handleOpen}>
-        Open Modal
+        react-transition-group
       </button>
       <Modal
-        aria-labelledby="simple-modal-title"
-        aria-describedby="simple-modal-description"
+        aria-labelledby="transition-modal-title"
+        aria-describedby="transition-modal-description"
+        className={classes.modal}
         open={open}
         onClose={handleClose}
+        closeAfterTransition
+        BackdropComponent={Backdrop}
+        BackdropProps={{
+          timeout: 500,
+        }}
       >
-        <div style={modalStyle} className={classes.paper}>
-          <h2 id="simple-modal-title">Text in a modal</h2>
-          <p id="simple-modal-description">
-            Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
-          </p>
-          <SimpleModal />
-        </div>
+        <Fade in={open}>
+          <Carousel className={classes.carousel} showThumbs={false} infiniteLoop={true} showStatus={false}>
+            <div>TESTE</div>
+            <div>DO</div>
+            <div>CAROUSEL</div>
+            <div>AGORA</div>
+            <div>VAI</div>
+            <div>POR</div>
+            <div>FAVOR</div>
+          </Carousel>
+        </Fade>
       </Modal>
     </div>
   );

src/Pages/UserTerms.js

@@ -20,7 +20,6 @@ import React, {Component} from 'react';
 import ExpansionPanels from '../Components/ExpansionPanels'
 import Grid from '@material-ui/core/Grid';
 import Banner1 from "../img/termos/banner.jpg";
-import { AutoRotatingCarousel } from 'material-auto-rotating-carousel'
 import Modal from '../Components/Modal'
 
 
@@ -63,8 +62,8 @@ class UserTerms extends Component {
         <div>
 
           <div style = {bannerStyle}>
-            <h2 style={{width: "100%", height:"370px",textAlign: "center",marginTop:"0px", paddingTop:"9rem",fontSize:"52px"}}>TERMOS DE USO</h2>
-            <div><Modal/></div>
+            <h2 style={{width: "100%",textAlign: "center",marginTop:"0px", paddingTop:"9rem",fontSize:"52px"}}>TERMOS DE USO</h2>
+            <Modal/>
           </div>
 
           <div style= {secao2}>