diff --git a/package-lock.json b/package-lock.json
index 8966c047e184beb875625ece3e4010da442722d9..70cb5de948c51a8606e03d2859d1445b4065e1ee 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -5216,9 +5216,9 @@
       "integrity": "sha512-smevlzzMNz3vMz6OLeeCq5HRWEj2AcgccNPYnAx4Usx0IOciq9DU36RJcICcS09hXoY7t7deRfVYKD14IrGb9A=="
     },
     "elliptic": {
-      "version": "6.5.2",
-      "resolved": "https://registry.npmjs.org/elliptic/-/elliptic-6.5.2.tgz",
-      "integrity": "sha512-f4x70okzZbIQl/NSRLkI/+tteV/9WqL98zx+SQ69KbXxmVrmjwsNUPn/gYJJ0sHvEak24cZgHIPegRePAtA/xw==",
+      "version": "6.5.3",
+      "resolved": "https://registry.npmjs.org/elliptic/-/elliptic-6.5.3.tgz",
+      "integrity": "sha512-IMqzv5wNQf+E6aHeIqATs0tOLeOTwj1QKbRcS3jBbYkl5oLAserA8yJTT7/VyHUYG91PRmPyeQDObKLPpeS4dw==",
       "requires": {
         "bn.js": "^4.4.0",
         "brorand": "^1.0.1",
@@ -5259,14 +5259,6 @@
       "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz",
       "integrity": "sha1-rT/0yG7C0CkyL1oCw6mmBslbP1k="
     },
-    "encoding": {
-      "version": "0.1.12",
-      "resolved": "https://registry.npmjs.org/encoding/-/encoding-0.1.12.tgz",
-      "integrity": "sha1-U4tm8+5izRq1HsMjgp0flIDHS+s=",
-      "requires": {
-        "iconv-lite": "~0.4.13"
-      }
-    },
     "end-of-stream": {
       "version": "1.4.4",
       "resolved": "https://registry.npmjs.org/end-of-stream/-/end-of-stream-1.4.4.tgz",
@@ -8382,11 +8374,11 @@
       "integrity": "sha512-cyFDKrqc/YdcWFniJhzI42+AzS+gNwmUzOSFcRCQYwySuBBBy/KjuxWLZ/FHEH6Moq1NizMOBWyTcv8O4OZIMg=="
     },
     "image-to-base64": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/image-to-base64/-/image-to-base64-2.1.0.tgz",
-      "integrity": "sha512-Qlm5F5EJUkxMEY0uPVwbfEkirv4WowHGRj9LBPYU3bAuFucwhvIJiH9g3aJZ91A89jVq9GzmayiNvE2sEjQ9YQ==",
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/image-to-base64/-/image-to-base64-2.1.1.tgz",
+      "integrity": "sha512-G8EZaxl8dmYUXCmaC/1W4oqwj+yiY+qhF9A81TbdOtxdK9BAN3oV440Jofexp4J2oRsbHIUJtl3rlDqdjmiZOQ==",
       "requires": {
-        "node-fetch": "^1.7.3"
+        "node-fetch": "^2.6.0"
       }
     },
     "immer": {
@@ -8455,6 +8447,11 @@
       "resolved": "https://registry.npmjs.org/indexes-of/-/indexes-of-1.0.1.tgz",
       "integrity": "sha1-8w9xbI4r00bHtn0985FVZqfAVgc="
     },
+    "infer-owner": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/infer-owner/-/infer-owner-1.0.4.tgz",
+      "integrity": "sha512-IClj+Xz94+d7irH5qRyfJonOdfTzuDaifE6ZPWfx0N0+/ATZCbuTPq2prFl526urkQd90WyUKIh1DfBQ2hMz9A=="
+    },
     "inflight": {
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
@@ -9914,9 +9911,9 @@
       }
     },
     "lodash": {
-      "version": "4.17.15",
-      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.15.tgz",
-      "integrity": "sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A=="
+      "version": "4.17.20",
+      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.20.tgz",
+      "integrity": "sha512-PlhdFcillOINfeV7Ni6oF1TAEayyZBoZ8bcshTHqOYJYlrqzRK5hagpagky5o4HfCzzd1TRkXPMFq6cKk9rGmA=="
     },
     "lodash._reinterpolate": {
       "version": "3.0.0",
@@ -10498,18 +10495,9 @@
       }
     },
     "node-fetch": {
-      "version": "1.7.3",
-      "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-1.7.3.tgz",
-      "integrity": "sha512-NhZ4CsKx7cYm2vSrBAr2PvFOe6sWDf0UYLRqA6svUYg7+/TSfVAu49jYC4BvQ4Sms9SZgdqGBgroqfDhJdTyKQ==",
-      "requires": {
-        "encoding": "^0.1.11",
-        "is-stream": "^1.0.1"
-      }
-    },
-    "node-forge": {
-      "version": "0.9.0",
-      "resolved": "https://registry.npmjs.org/node-forge/-/node-forge-0.9.0.tgz",
-      "integrity": "sha512-7ASaDa3pD+lJ3WvXFsxekJQelBKRpne+GOVbLbtHYdd7pFspyeuJHnWfLplGf3SwKGbfs/aYl5V/JCIaHVUKKQ=="
+      "version": "2.6.1",
+      "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.1.tgz",
+      "integrity": "sha512-V4aYg89jEoVRxRb2fJdAg8FHvI7cEyYdVAh94HH0UIK8oJxUfkjlDQN9RbMx+bEjP7+ggMiFRprSti032Oipxw=="
     },
     "node-int64": {
       "version": "0.4.0",
@@ -14252,6 +14240,26 @@
           "requires": {
             "path-parse": "^1.0.6"
           }
+        },
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
+        },
+        "terser-webpack-plugin": {
+          "version": "1.2.2",
+          "resolved": "https://registry.npmjs.org/terser-webpack-plugin/-/terser-webpack-plugin-1.2.2.tgz",
+          "integrity": "sha512-1DMkTk286BzmfylAvLXwpJrI7dWa5BnFmscV/2dCr8+c56egFcbaeFAl7+sujAjdmpLam21XRdhA4oifLyiWWg==",
+          "requires": {
+            "cacache": "^11.0.2",
+            "find-cache-dir": "^2.0.0",
+            "schema-utils": "^1.0.0",
+            "serialize-javascript": "^1.4.0",
+            "source-map": "^0.6.1",
+            "terser": "^3.16.1",
+            "webpack-sources": "^1.1.0",
+            "worker-farm": "^1.5.2"
+          }
         }
       }
     },
@@ -15343,11 +15351,18 @@
       "integrity": "sha1-Yl2GWPhlr0Psliv8N2o3NZpJlMo="
     },
     "selfsigned": {
-      "version": "1.10.7",
-      "resolved": "https://registry.npmjs.org/selfsigned/-/selfsigned-1.10.7.tgz",
-      "integrity": "sha512-8M3wBCzeWIJnQfl43IKwOmC4H/RAp50S8DF60znzjW5GVqTcSe2vWclt7hmYVPkKPlHWOu5EaWOMZ2Y6W8ZXTA==",
+      "version": "1.10.8",
+      "resolved": "https://registry.npmjs.org/selfsigned/-/selfsigned-1.10.8.tgz",
+      "integrity": "sha512-2P4PtieJeEwVgTU9QEcwIRDQ/mXJLX8/+I3ur+Pg16nS8oNbrGxEso9NyYWy8NAmXiNl4dlAp5MwoNeCWzON4w==",
       "requires": {
-        "node-forge": "0.9.0"
+        "node-forge": "^0.10.0"
+      },
+      "dependencies": {
+        "node-forge": {
+          "version": "0.10.0",
+          "resolved": "https://registry.npmjs.org/node-forge/-/node-forge-0.10.0.tgz",
+          "integrity": "sha512-PPmu8eEeG9saEUvI97fm4OYxXVB6bFvyNTyiUOBichBpFG8A1Ljw3bY62+5oOjDEMHRnd0Y7HQ+x7uzxOzC6JA=="
+        }
       }
     },
     "semver": {
@@ -16386,24 +16401,79 @@
       }
     },
     "terser-webpack-plugin": {
-      "version": "1.2.2",
-      "resolved": "https://registry.npmjs.org/terser-webpack-plugin/-/terser-webpack-plugin-1.2.2.tgz",
-      "integrity": "sha512-1DMkTk286BzmfylAvLXwpJrI7dWa5BnFmscV/2dCr8+c56egFcbaeFAl7+sujAjdmpLam21XRdhA4oifLyiWWg==",
+      "version": "1.4.5",
+      "resolved": "https://registry.npmjs.org/terser-webpack-plugin/-/terser-webpack-plugin-1.4.5.tgz",
+      "integrity": "sha512-04Rfe496lN8EYruwi6oPQkG0vo8C+HT49X687FZnpPF0qMAIHONI6HEXYPKDOE8e5HjXTyKfqRd/agHtH0kOtw==",
       "requires": {
-        "cacache": "^11.0.2",
-        "find-cache-dir": "^2.0.0",
+        "cacache": "^12.0.2",
+        "find-cache-dir": "^2.1.0",
+        "is-wsl": "^1.1.0",
         "schema-utils": "^1.0.0",
-        "serialize-javascript": "^1.4.0",
+        "serialize-javascript": "^4.0.0",
         "source-map": "^0.6.1",
-        "terser": "^3.16.1",
-        "webpack-sources": "^1.1.0",
-        "worker-farm": "^1.5.2"
+        "terser": "^4.1.2",
+        "webpack-sources": "^1.4.0",
+        "worker-farm": "^1.7.0"
       },
       "dependencies": {
+        "cacache": {
+          "version": "12.0.4",
+          "resolved": "https://registry.npmjs.org/cacache/-/cacache-12.0.4.tgz",
+          "integrity": "sha512-a0tMB40oefvuInr4Cwb3GerbL9xTj1D5yg0T5xrjGCGyfvbxseIXX7BAO/u/hIXdafzOI5JC3wDwHyf24buOAQ==",
+          "requires": {
+            "bluebird": "^3.5.5",
+            "chownr": "^1.1.1",
+            "figgy-pudding": "^3.5.1",
+            "glob": "^7.1.4",
+            "graceful-fs": "^4.1.15",
+            "infer-owner": "^1.0.3",
+            "lru-cache": "^5.1.1",
+            "mississippi": "^3.0.0",
+            "mkdirp": "^0.5.1",
+            "move-concurrently": "^1.0.1",
+            "promise-inflight": "^1.0.1",
+            "rimraf": "^2.6.3",
+            "ssri": "^6.0.1",
+            "unique-filename": "^1.1.1",
+            "y18n": "^4.0.0"
+          }
+        },
+        "serialize-javascript": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-4.0.0.tgz",
+          "integrity": "sha512-GaNA54380uFefWghODBWEGisLZFj00nS5ACs6yHa9nLqlLpVLO8ChDGeKRjZnV4Nh4n0Qi7nhYZD/9fCPzEqkw==",
+          "requires": {
+            "randombytes": "^2.1.0"
+          }
+        },
         "source-map": {
           "version": "0.6.1",
           "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
           "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
+        },
+        "source-map-support": {
+          "version": "0.5.19",
+          "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.19.tgz",
+          "integrity": "sha512-Wonm7zOCIJzBGQdB+thsPar0kYuCIzYvxZwlBa87yi/Mdjv7Tip2cyVbLj5o0cFPN4EVkuTwb3GDDyUx2DGnGw==",
+          "requires": {
+            "buffer-from": "^1.0.0",
+            "source-map": "^0.6.0"
+          }
+        },
+        "terser": {
+          "version": "4.8.0",
+          "resolved": "https://registry.npmjs.org/terser/-/terser-4.8.0.tgz",
+          "integrity": "sha512-EAPipTNeWsb/3wLPeup1tVPaXfIaU68xMnVdPafIL1TV05OhASArYyIfFvnvJCNrR2NIOvDVNNTFRa+Re2MWyw==",
+          "requires": {
+            "commander": "^2.20.0",
+            "source-map": "~0.6.1",
+            "source-map-support": "~0.5.12"
+          }
+        },
+        "y18n": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/y18n/-/y18n-4.0.0.tgz",
+          "integrity": "sha512-r9S/ZyXu/Xu9q1tYlpsLIsa3EeLXXk0VwlxqTcFRfg9EhMW+17kbt9G0NrgCmhGb5vT2hyhJZLfDGx+7+5Uj/w=="
         }
       }
     },
diff --git a/package.json b/package.json
index 717525b3312961c92fe54772ca13bb3d873f9a20..b88c35ca1d0f99229771a5ecde020f763593b75a 100644
--- a/package.json
+++ b/package.json
@@ -13,7 +13,7 @@
     "binary-extensions": "^2.0.0",
     "build": "^0.1.4",
     "fine-uploader": "^5.16.2",
-    "image-to-base64": "^2.0.1",
+    "image-to-base64": "^2.1.1",
     "material-design-icons": "^3.0.1",
     "moment": "^2.24.0",
     "react": "^16.12.0",
diff --git a/src/Components/AreasSubPages.js b/src/Components/AreasSubPages.js
index f911ec1d0d1058885610be48f29f8b8387635106..b0ae3f7458acceb7d26e43f44948de9a9d5d965a 100644
--- a/src/Components/AreasSubPages.js
+++ b/src/Components/AreasSubPages.js
@@ -29,9 +29,9 @@ import { Carousel } from "react-responsive-carousel";
 import recursos from "../img/ilustra_recursos_digitais.png";
 import materiais from "../img/ilustra_materiais.png";
 import colecoes from "../img/ilustra_colecoes.png";
-import Grid from '@material-ui/core/Grid';
-import ResourceCardFunction from './ResourceCardFunction.js'
-import CollectionCardFunction from './CollectionCardFunction.js'
+import Grid from "@material-ui/core/Grid";
+import ResourceCardFunction from "./ResourceCardFunction.js";
+import CollectionCardFunction from "./CollectionCardFunction.js";
 
 const areaStyle = {
   paddingTop: "5px",
@@ -41,20 +41,20 @@ const areaStyle = {
   width: "1000px",
   margin: "auto",
   padding: "20px",
-  minHeight: "190px"
+  minHeight: "190px",
 };
 
 class ReqResources extends Component {
   constructor(props) {
     super(props);
     this.state = {
-      resources: []
+      resources: [],
     };
   }
   componentDidMount() {
     axios
       .get(`${apiUrl}/learning_objects?limit=12&sort=["published_at", "desc"]`)
-      .then(res => {
+      .then((res) => {
         this.setState({ resources: res.data });
         console.log(res.data);
       });
@@ -65,64 +65,71 @@ class ReqResources extends Component {
     var row3 = this.state.resources.slice(8, 13);
     return (
       <Carousel showThumbs={false} infiniteLoop={true} showStatus={false}>
-      <Row style={{paddingBottom: "5px"}}>
-      {row1.map(card => <Col md={3} sm={6} key={card.id}>
-        <ResourceCardFunction
-            avatar = {card.publisher.avatar}
-            id={card.id}
-            thumbnail = {card.thumbnail}
-            type = {card.object_type ? card.object_type : "Outros"}
-            title={card.name}
-            published={card.state === "published" ? true : false}
-            likeCount={card.likes_count}
-            liked={card.liked}
-            rating={card.review_average}
-            author={card.author}
-            tags={card.educational_stages}
-            href={'/recurso/' + card.id}
-            downloadableLink={card.default_attachment_location}
-                      /></Col>)}
-      </Row>
-      <Row>
-      {row2.map(card => <Col md={3} sm={6} key={card.id}>
-        <ResourceCardFunction
-            avatar = {card.publisher.avatar}
-            id={card.id}
-            thumbnail = {card.thumbnail}
-            type = {card.object_type ? card.object_type : "Outros"}
-            title={card.name}
-            published={card.state === "published" ? true : false}
-            likeCount={card.likes_count}
-            liked={card.liked}
-            rating={card.review_average}
-            author={card.author}
-            tags={card.educational_stages}
-            href={'/recurso/' + card.id}
-            downloadableLink={card.default_attachment_location}
-
-             /></Col>)}
-      </Row>
-      <Row>
-      {row3.map(card => <Col md={3} sm={6} key={card.id}>
-        <ResourceCardFunction
-            avatar = {card.publisher.avatar}
-            id={card.id}
-            thumbnail = {card.thumbnail}
-            type = {card.object_type ? card.object_type : "Outros"}
-            title={card.name}
-            published={card.state === "published" ? true : false}
-            likeCount={card.likes_count}
-            liked={card.liked}
-            rating={card.review_average}
-            author={card.author}
-            tags={card.educational_stages}
-            href={'/recurso/' + card.id}
-            downloadableLink={card.default_attachment_location}
-
-                      /></Col>)}
-      </Row>
-    </Carousel>
-    )
+        <Row style={{ paddingBottom: "5px" }}>
+          {row1.map((card) => (
+            <Col md={3} sm={6} key={card.id}>
+              <ResourceCardFunction
+                avatar={card.publisher.avatar}
+                id={card.id}
+                thumbnail={card.thumbnail}
+                type={card.object_type ? card.object_type : "Outros"}
+                title={card.name}
+                published={card.state === "published" ? true : false}
+                likeCount={card.likes_count}
+                liked={card.liked}
+                rating={card.review_average}
+                author={card.author}
+                tags={card.educational_stages}
+                href={"/recurso/" + card.id}
+                downloadableLink={card.default_attachment_location}
+              />
+            </Col>
+          ))}
+        </Row>
+        <Row>
+          {row2.map((card) => (
+            <Col md={3} sm={6} key={card.id}>
+              <ResourceCardFunction
+                avatar={card.publisher.avatar}
+                id={card.id}
+                thumbnail={card.thumbnail}
+                type={card.object_type ? card.object_type : "Outros"}
+                title={card.name}
+                published={card.state === "published" ? true : false}
+                likeCount={card.likes_count}
+                liked={card.liked}
+                rating={card.review_average}
+                author={card.author}
+                tags={card.educational_stages}
+                href={"/recurso/" + card.id}
+                downloadableLink={card.default_attachment_location}
+              />
+            </Col>
+          ))}
+        </Row>
+        <Row>
+          {row3.map((card) => (
+            <Col md={3} sm={6} key={card.id}>
+              <ResourceCardFunction
+                avatar={card.publisher.avatar}
+                id={card.id}
+                thumbnail={card.thumbnail}
+                type={card.object_type ? card.object_type : "Outros"}
+                title={card.name}
+                published={card.state === "published" ? true : false}
+                likeCount={card.likes_count}
+                liked={card.liked}
+                rating={card.review_average}
+                author={card.author}
+                tags={card.educational_stages}
+                href={"/recurso/" + card.id}
+                downloadableLink={card.default_attachment_location}
+              />
+            </Col>
+          ))}
+        </Row>
+      </Carousel>
+    );
   }
 }
 
@@ -130,13 +137,13 @@ class ReqCollections extends Component {
   constructor(props) {
     super(props);
     this.state = {
-      collections: []
+      collections: [],
     };
   }
   componentDidMount() {
     axios
       .get(`${apiUrl}/collections?limit=12&sort=["updated_at", "desc"]`)
-      .then(res => {
+      .then((res) => {
         this.setState({ collections: res.data });
         console.log(res.data);
       });
@@ -147,35 +154,50 @@ class ReqCollections extends Component {
     var row3 = this.state.collections.slice(8, 13);
     return (
       <Carousel showThumbs={false} infiniteLoop={true} showStatus={false}>
-      <Row style={{paddingBottom: "5px"}}>
-      {row1.map(card => <Col md={3} sm={6} key={card.id}>
-        <CollectionCardFunction name={card.name}
-                        rating={card.score}
-                        author={card.owner.name}
-                        description={card.description}
-                        thumbnails={card.items_thumbnails}
-                        avatar={card.owner.avatar}/></Col>)}
-      </Row>
-      <Row>
-      {row2.map(card => <Col md={3} sm={6} key={card.id}>
-        <CollectionCardFunction name={card.name}
-                        rating={card.score}
-                        author={card.owner.name}
-                        description={card.description}
-                        thumbnails={card.items_thumbnails}
-                        avatar={card.owner.avatar}/></Col>)}
-      </Row>
-      <Row>
-      {row3.map(card => <Col md={3} sm={6} key={card.id}>
-        <CollectionCardFunction name={card.name}
-                        rating={card.score}
-                        author={card.owner.name}
-                        description={card.description}
-                        thumbnails={card.items_thumbnails}
-                        avatar={card.owner.avatar}/></Col>)}
-      </Row>
-    </Carousel>
-    )
+        <Row style={{ paddingBottom: "5px" }}>
+          {row1.map((card) => (
+            <Col md={3} sm={6} key={card.id}>
+              <CollectionCardFunction
+                name={card.name}
+                rating={card.score}
+                author={card.owner.name}
+                description={card.description}
+                thumbnails={card.items_thumbnails}
+                avatar={card.owner.avatar}
+              />
+            </Col>
+          ))}
+        </Row>
+        <Row>
+          {row2.map((card) => (
+            <Col md={3} sm={6} key={card.id}>
+              <CollectionCardFunction
+                name={card.name}
+                rating={card.score}
+                author={card.owner.name}
+                description={card.description}
+                thumbnails={card.items_thumbnails}
+                avatar={card.owner.avatar}
+              />
+            </Col>
+          ))}
+        </Row>
+        <Row>
+          {row3.map((card) => (
+            <Col md={3} sm={6} key={card.id}>
+              <CollectionCardFunction
+                name={card.name}
+                rating={card.score}
+                author={card.owner.name}
+                description={card.description}
+                thumbnails={card.items_thumbnails}
+                avatar={card.owner.avatar}
+              />
+            </Col>
+          ))}
+        </Row>
+      </Carousel>
+    );
   }
 }
 
@@ -213,7 +235,7 @@ class SubPages extends Component {
                 style={{
                   paddingBottom: "5px",
                   borderBottom: "1px solid #ff7f00",
-                  color: "#ff7f00"
+                  color: "#ff7f00",
                 }}
               >
                 Recursos mais recentes{" "}
@@ -226,23 +248,43 @@ class SubPages extends Component {
               </Visible>
             </Container>
           </React.Fragment>
-      );
-    case "Materiais":
-      return (
-        <React.Fragment>
-            <div style={{backgroundColor: "#e81f4f"}}>
-                <Container style={areaStyle}>
-
-                  <img src={materiais} alt="aba materiais" height="165" style={{float: "right"}}/>
-                  <p>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>
-                </Container>
-              </div>
-              <Container style={{padding:"20px"}}>
-                <p style={{paddingBottom:"5px", borderBottom: "1px solid #e81f4f", color: "#e81f4f"}}>
-                  Materiais mais recentes </p>
+        );
+      case "Materiais":
+        return (
+          <React.Fragment>
+            <div style={{ backgroundColor: "#e81f4f" }}>
+              <Container style={areaStyle}>
+                <Grid container spacing={5}>
+                  <Grid item xs={3}>
+                    <img
+                      src={materiais}
+                      alt="aba materiais"
+                      height="165"
+                      style={{ float: "right" }}
+                    />
+                  </Grid>
+                  <Grid item xs={9}>
+                    <p style={{ textAlign: "justify", color: "#fff" }}>
+                      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>
+                  </Grid>
+                </Grid>
+              </Container>
+            </div>
+            <Container style={{ padding: "20px" }}>
+              <p
+                style={{
+                  paddingBottom: "5px",
+                  borderBottom: "1px solid #e81f4f",
+                  color: "#e81f4f",
+                }}
+              >
+                Materiais mais recentes{" "}
+              </p>
 
               <Carousel
                 style={{ padding: "20px" }}
@@ -298,7 +340,7 @@ class SubPages extends Component {
                 style={{
                   paddingBottom: "5px",
                   borderBottom: "1px solid #673ab7",
-                  color: "#673ab7"
+                  color: "#673ab7",
                 }}
               >
                 Coleções mais recentes{" "}