Issue #66: FIX responsive card login

public/avaliar.svg

+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 40 40">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: #000;
+        stroke-width: 0px;
+      }
+    </style>
+  </defs>
+  <path class="cls-1" d="M19.2,34.6l-10.1,4.5c-1,.4-2-.3-1.9-1.4l1.2-11c0-.6-.1-1.2-.5-1.6L.4,17c-.7-.8-.3-2,.7-2.3l10.8-2.3c.6-.1,1.1-.5,1.4-1L18.8,1.9c.5-.9,1.8-.9,2.4,0l5.5,9.6c.3.5.8.9,1.4,1l10.8,2.3c1,.2,1.4,1.5.7,2.3l-7.4,8.2c-.4.4-.6,1-.5,1.6l1.2,11c.1,1-1,1.8-1.9,1.4l-10.1-4.5c-.5-.2-1.2-.2-1.7,0Z"/>
+</svg>
\ No newline at end of file

public/colecionar.svg

+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 40 40">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: #000;
+        stroke-width: 0px;
+      }
+    </style>
+  </defs>
+  <path class="cls-1" d="M35.1,39.6l-14.3-10.4c-.6-.4-1.3-.4-1.9,0l-14.3,10.4c-1.1.8-2.6,0-2.6-1.3V1.6C1.9.7,2.7,0,3.6,0h32.5c.9,0,1.6.7,1.6,1.6v36.6c0,1.3-1.5,2.1-2.6,1.3Z"/>
+</svg>
\ No newline at end of file

public/comentar.svg

+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 40 40">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: #000;
+        stroke-width: 0px;
+      }
+    </style>
+  </defs>
+  <path class="cls-1" d="M19.9,37.6c-.9,0-1.8-.3-2.4-1l-3.2-3c-.3-.3-.7-.4-1.1-.4h-4.1C3.9,33.2-.2,29.3-.2,24.6v-12.6C-.2,7.3,3.9,3.4,9,3.4h21.8c5.1,0,9.2,3.9,9.2,8.6v12.6c0,4.8-4.1,8.6-9.2,8.6h-4.1c-.4,0-.8.2-1.1.4l-3.2,3c-.7.6-1.5,1-2.4,1Z"/>
+</svg>
\ No newline at end of file

public/compartilhar.svg

+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 40 40">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: #000;
+        stroke-width: 0px;
+      }
+    </style>
+  </defs>
+  <path class="cls-1" d="M39.8,18.6L25.4,3c-.3-.5-1-.2-1,.3v7.8h-3.9C12.6,11.1,0,19.5,0,36.3v.5h0s0,0,0,0c0,.2.2.4.4.4s.4-.2.4-.4c.2-1.7,1.8-7.5,8-9.4,8.2-2.5,15.5,0,15.5,0v7.8c0,.5.7.8,1,.3l14.4-15.5c.3-.4.3-1,0-1.4Z"/>
+</svg>
\ No newline at end of file

public/download.svg

+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 40 40">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: #000;
+        stroke-width: 0px;
+      }
+    </style>
+  </defs>
+  <path class="cls-1" d="M27.8,23.7V1.6c0-.7-.6-1.3-1.3-1.3h-13c-.7,0-1.3.6-1.3,1.3v22.2H3.7c-.5,0-.7.7-.3,1l15.9,14.8c.4.3.9.3,1.4,0l15.9-14.8c.4-.3.2-1-.3-1h-8.5Z"/>
+</svg>
\ No newline at end of file

public/govbr.svg

+<svg width="495" height="178" xmlns="http://www.w3.org/2000/svg">
+ <style type="text/css">.st0{fill:#2864AE;}
+	.st1{fill:#48AD45;}
+	.st2{fill:#FABD14;}</style>
+
+ <g>
+  <title>background</title>
+  <rect fill="none" id="canvas_background" height="180" width="497" y="-1" x="-1"/>
+ </g>
+ <g>
+  <title>Layer 1</title>
+  <g id="Grupo_17695">
+   <g id="Grupo_17695-2">
+    <path d="m53.424995,111.720003c11.77,0 21.15,-9.93 21.15,-24.63c0.91,-11.54 -7.7,-21.63 -19.24,-22.55c-0.63,-0.05 -1.27,-0.07 -1.91,-0.06c-12.3,0 -18.74,10.85 -18.74,23.9c-0.01,14.89 8.81,23.34 18.74,23.34zm53.12,14.15c0,39.33 -19.1,52.01 -57.71,52.01c-12.44,0.03 -24.81,-2.01 -36.58,-6.06l1.65,-26.11c9.93,5.37 21.07,8.09 32.36,7.91c19.12,0 29.41,-9 29.41,-27.75l0,-5.16l-0.37,0c-7.2,10.62 -19.35,16.8 -32.17,16.36c-26.29,0 -42.64,-19.84 -42.64,-48.17c0,-28.5 13.41,-49.81 43.19,-49.81c13.58,0.11 26.03,7.57 32.53,19.49l0.38,0l0,-17.26l29.95,0l0,84.54l0,0.01z" class="st0" id="Caminho_4108"/>
+    <path d="m239.934995,136.960003l36.81,0l34.61,-95.17l-32.15,0l-19.52,67.8l-0.36,0l-19.37,-67.8l-34.7,0l34.68,95.17z" class="st1" id="Caminho_4109"/>
+    <path d="m183.754995,89.400003c0,-14.24 -6.21,-26.84 -21.37,-26.84s-21.36,12.6 -21.36,26.84c0,14.06 6.21,26.66 21.36,26.66s21.37,-12.6 21.37,-26.66zm-76.69,0c0,-31.59 23.91,-49.83 55.32,-49.83s55.32,18.26 55.32,49.83c0,31.41 -23.91,49.66 -55.32,49.66s-55.32,-18.25 -55.32,-49.66z" class="st2" id="Caminho_4110"/>
+    <path d="m315.074995,123.510003c0,8.62 -6.99,15.6 -15.61,15.6c-8.62,0 -15.6,-6.99 -15.6,-15.61c0,-8.61 6.98,-15.59 15.6,-15.6c8.61,-0.01 15.6,6.97 15.61,15.58c0,0.01 0,0.02 0,0.03z" class="st0" id="Caminho_4111"/>
+    <path d="m371.014995,64.840003c-12.05,0 -20.09,10.58 -20.09,24.83c0,13.88 9.14,24.3 20.09,24.3c12.42,0 19.91,-10.42 19.91,-25.58c0,-12.59 -7.12,-23.55 -19.91,-23.55zm-52.96,-64.84l33.07,0l0,54.07l0.37,0c7.91,-9.84 20.1,-15.22 32.7,-14.42c26.3,0 40.71,25.01 40.71,48.03c0,28.12 -15.15,51.51 -43.47,51.51c-13.7,0.53 -26.47,-6.96 -32.69,-19.18l-0.37,0l0,17l-30.34,0l0,-137l0.02,0l0,-0.01z" class="st0" id="Caminho_4112"/>
+    <path d="m492.834995,68.130003c-3.64,-0.91 -7.39,-1.28 -11.14,-1.09c-15.34,0 -23.91,11.14 -23.91,29.77l0,40.19l-32.89,0l0,-95.21l29.98,0l0,17.54l0.37,0c4.15,-11.95 15.48,-19.89 28.12,-19.72c3.74,0.06 7.46,0.43 11.14,1.09l-1.67,27.43z" class="st2" id="Caminho_4113"/>
+   </g>
+  </g>
+ </g>
+</svg>
\ No newline at end of file

public/pesquisa.svg

+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 40 40">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: #000;
+        stroke-width: 0px;
+      }
+    </style>
+  </defs>
+  <path class="cls-1" d="M14.7,7.1c-2.1,0-4.2.8-5.7,2.3-.5.5-.5,1.3,0,1.8.5.5,1.3.5,1.8,0,1-1,2.4-1.6,3.9-1.6s2.8.6,3.9,1.6c.2.2.6.4.9.4s.7-.1.9-.4c.5-.5.5-1.3,0-1.8-1.5-1.5-3.5-2.3-5.7-2.3Z"/>
+  <path class="cls-1" d="M39.1,34.6l-7.9-7.9c-.7-.7-1.7-1-2.7-.9l-2.1-2.1c2-2.6,3-5.7,3-8.9s-1.5-7.6-4.3-10.4h0C22.3,1.5,18.6,0,14.7,0S7.1,1.5,4.3,4.3c-5.7,5.7-5.7,15,0,20.8,2.9,2.9,6.6,4.3,10.4,4.3,3.2,0,6.3-1,8.9-3l2.1,2.1c-.1,1,.2,2,.9,2.7l7.9,7.9c.6.6,1.4.9,2.3.9s1.6-.3,2.3-.9c1.2-1.2,1.2-3.3,0-4.5ZM7,22.4c-4.2-4.2-4.2-11.1,0-15.4,2.1-2.1,4.8-3.2,7.7-3.2s5.6,1.1,7.7,3.2h0c2.1,2.1,3.2,4.8,3.2,7.7s-1.1,5.6-3.2,7.7c-4.2,4.2-11.1,4.2-15.4,0Z"/>
+</svg>
\ No newline at end of file

public/salvar.svg

+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 40 40">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: #000;
+        stroke-width: 0px;
+      }
+    </style>
+  </defs>
+  <path class="cls-1" d="M29.9,2.3c-4.7,0-8.3,2.2-9.9,3.3-1.6-1.1-5.2-3.3-9.9-3.3-6.8,0-13,6.9-8.7,17.5,3.3,8.3,14.4,16.2,18.6,17.4h0c4.2-1.2,15.3-9.2,18.6-17.4,4.3-10.6-1.9-17.5-8.7-17.5Z"/>
+</svg>
\ No newline at end of file

public/seguir.svg

+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 40 40">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: #000;
+      }
+
+      .cls-1, .cls-2 {
+        stroke-width: 0px;
+      }
+
+      <!-- .cls-2 {
+        fill: #fff;
+      } -->
+    </style>
+  </defs>
+  <circle class="cls-1" cx="20" cy="10.3" r="10.3"/>
+  <path class="cls-1" d="M40,34.3c0,7.6-40,7.6-40,0s9-13.7,20-13.7,20,6.2,20,13.7Z"/>
+  <path class="cls-2" d="M24.5,29.1h-3v-3c0-.8-.7-1.5-1.5-1.5s-1.5.7-1.5,1.5v3h-3c-.8,0-1.5.7-1.5,1.5s.7,1.5,1.5,1.5h3v3c0,.8.7,1.5,1.5,1.5s1.5-.7,1.5-1.5v-3h3c.8,0,1.5-.7,1.5-1.5s-.7-1.5-1.5-1.5Z"/>
+</svg>
\ No newline at end of file

src/app/components/About.js

 import { useEffect, useState } from "react";
 import mecredApi from "@/axiosConfig";
 import Title from "./Title";
+import Image from "next/image";
+import SubjectOutlinedIcon from '@mui/icons-material/SubjectOutlined';
 
 export default function AboutComponent() {
   const [statistics, setStatistics] = useState({});
 
-  const StatisticInfo = ({ name, data, color }) => {
+  const StatisticInfo = ({ name, data, color, icon }) => {
     return (
       <div className="flex flex-col items-center text-center">
+
+
         <div
-          className={`h-24 w-24 my-5 mx-10 rounded-full ${color["bg"]}`}
-        ></div>
+          className={`h-24 w-24 my-5 mx-10 pt-4 flex justify-center rounded-full ${color["bg"]}`}
+        >
+          {name === "Recursos Disponíveis" ? 
+          <SubjectOutlinedIcon className="w-16 h-16 text-white"/> :
+          <Image className={`w-14 h-14 bg-${color}`} style={{ filter: 'invert(100%)' }} src={icon} width={10} height={10} />
+
+          }        
+        </div>
         <h1 className={`text-xl font-bold ${color["text"]}`}>{data}</h1>
         <h2 className={`text-sm font-bold ${color["text"]}`}>{name}</h2>
       </div>
@@ -29,11 +39,13 @@ export default function AboutComponent() {
           name="Recursos Baixados"
           data={statistics["month_downloads"]}
           color={{ text: "text-violet", bg: "bg-violet" }}
+          icon="/download.svg"
         />
         <StatisticInfo
           name="Usuários Cadastrados"
           data="13032"
           color={{ text: "text-pink", bg: "bg-pink" }}
+          icon="/seguir.svg"
         />
       </div>
     );
@@ -59,7 +71,7 @@ export default function AboutComponent() {
   const Actors = () => {
     return (
       <>
-        <h1 className="text-xl text-secondary font-bold mb-3 mt-5">
+        <h1 className="text-xl text-gray-500 font-bold mb-3 mt-5">
           A quem se destina?
         </h1>
         <h1 className="text-balance text-main-text xl:w-[50%] mb-5">
@@ -92,13 +104,20 @@ export default function AboutComponent() {
     );
   };
 
-  const FunctionalityInfo = ({ title, description, color }) => {
+  const FunctionalityInfo = ({ title, description, color, icon }) => {
     return (
       <div className="flex max-xl:flex-col max-xl:items-center my-5">
         <div>
+          
           <div
-            className={`flex h-24 w-24 my-5 mx-10 rounded-full ${color}`}
-          ></div>
+            className={`flex h-24 w-24 my-5 mx-10 rounded-full justify-center ${color}`}
+          >
+            <Image className={`w-14 h-14 mt-4 bg-${color} ${title === "Publicar o seu Recurso" && `rotate-180`}`}
+              style={{ filter: 'invert(100%)' }}
+              src={icon} width={10} height={10}
+            />
+
+          </div>
         </div>
         <div className="flex flex-col">
           <h1 className="pb-1 max-xl:mb-3 text-start max-xl:text-center text-lg font-bold text-main-text">
@@ -115,8 +134,8 @@ export default function AboutComponent() {
   const Functionalities = () => {
     return (
       <>
-        <h1 className="text-xl text-secondary font-bold mb-3 mt-5">
-          O que eu posso fazer aqui?
+        <h1 className="text-xl text-gray-500 font-bold mb-3 mt-5">
+          O que você pode fazer aqui?
         </h1>
         <h1 className="text-balance text-main-text xl:w-[50%] mb-5">
           A plataforma é aberta e destina-se a todos e todas que se interessam
@@ -127,21 +146,25 @@ export default function AboutComponent() {
             title="Buscar e Baixar Recursos"
             color="bg-secondary"
             description="São mais de 20 mil recursos educacionais à sua disposição. São recursos de portais parceiros do MEC e de professores que, como você, atuam na Educação Básica!"
+            icon="/pesquisa.svg"
           />
           <FunctionalityInfo
             title="Guardar Recursos em Coleções"
             color="bg-violet"
             description="Guarde e organize em coleções aqueles recursos que você considera serem interessantes para elaborar a sua aula. Aproveite e indique aos colegas pelas redes sociais ou e-mail."
+            icon="/colecionar.svg"
           />
           <FunctionalityInfo
             title="Compartilhar suas Experiências"
             color="bg-orange"
             description="Você pode relatar suas experiências sobre o uso de recursos no seu cotidiano escolar. Aproveite esse espaço para sugerir e conehcer novos usos para um mesmo recurso."
+            icon="/compartilhar.svg"
           />
           <FunctionalityInfo
             title="Publicar o seu Recurso"
             color="bg-pink"
             description="Colabore e ajude a fortalecer a plataforma publicando um recurso educacional desenvolvido por você ou pelo coletivo da escola do qual faz parte. COmpartilhe seu conhecimento e dê visibilidade ao seu recurso, torne-o público eriquecendo o conehcimento partilhado!"
+            icon="/download.svg"
           />
         </div>
       </>

src/app/components/Title.js

 export default function Title() {
   return (
     <div className="my-10 mx-10">
-      <h1 className="text-3xl max-lg:text-xl font-bold text-secondary my-10 text-center">
+      <h1 className="text-3xl max-lg:text-xl font-bold text-gray-500 my-10 text-center">
         Plataforma MEC de Recursos Educacionais Digitais
       </h1>
       <h1 className="text-lg max-lg:text-base text-main-text text-balance mb-5 text-center">
         Construa conosco a plataforma e amplie sua rede de conhecimento
-        interagindo com pessoas envolvidas com experiências que ocorrem em todo
+        interagindo com pessoas envolvidas com experiências educacionais que ocorrem em todo
         o Brasil!
       </h1>
     </div>

src/app/login/components/LoginForm.js

@@ -37,7 +37,7 @@ export default function LoginForm({
   return (
     <ThemeProvider theme={theme}>
       <div className="xl:fixed">
-        <div className="flex xl:ml-[75%] xl:my-[50%] flex-col items-center">
+        <div className="flex xl:ml-[35%] xl:my-[30%] flex-col items-center">
           <div className="xl:hidden">
             <Title />
           </div>
@@ -74,24 +74,13 @@ export default function LoginForm({
               <Button
                 fullWidth
                 disableElevation
-                className="bg-secondary text-white hover:bg-secondary-hover"
+                className="bg-secondary text-white hover:bg-secondary-hover normal-case font-bold"
                 type="submit"
               >
                 Entrar
               </Button>
-              <Divider flexItem className="mt-2">
-                <p className="text-gray-400 text-md">OU</p>
-              </Divider>
-              <Button
-                fullWidth
-                disableElevation
-                variant="outlined"
-                className="mt-2 border-main text-gray-500 normal-case flex gap-2"
-              >
-                <Image className="w-6 h-6" src="/google.svg" alt="google logo" width={10} height={10} />
-                <span>Entrar com o Google</span>
-              </Button>
-              <p className="mt-5 text-xs text-gray-500">
+
+              <p className="mt-5 text-xs text-gray-400">
                 Esqueceu a senha?{" "}
                 <a
                   onClick={handleOpenModalPasswd}
@@ -99,11 +88,7 @@ export default function LoginForm({
                   Clique aqui.
                 </a>
               </p>
-              <PasswdModal open={openModalPasswd} handleClose={handleCloseModalPasswd} />
-            </Paper>
-          </form>
-          <a onClick={() => router.push("/collections")} className="text-secondary lg:text-nowrap hover:font-bold cursor-pointer">Permanecer sem logar</a>
-          <p className="mt-5 text-xs text-gray-400 lg:text-nowrap">
+              <p className="mt-5 text-sm text-gray-400 lg:text-nowrap">
                 Não tem uma conta?{" "}
                 <a
                   onClick={handleOpenModalSignup}
@@ -112,6 +97,29 @@ export default function LoginForm({
                   Cadastre-se.
                 </a>
               </p>
+              <PasswdModal open={openModalPasswd} handleClose={handleCloseModalPasswd} />
+            </Paper>
+          </form>
+          <Button
+            fullWidth
+            disableElevation
+            variant="outlined"
+            className="my-2 bg-white border-white text-gray-500 normal-case flex gap-2 w-96 font-bold hover:bg-main-hover"
+          >
+            <span>Entrar com o</span>
+            <Image className="w-14 h-6" src="/govbr.svg" alt="govbr logo" width={10} height={10} />
+          </Button>
+          <button onClick={() => router.push("/collections")} className="text-secondary lg:text-nowrap bg-white py-1 w-96 hover:bg-main-hover rounded cursor-pointer">Entrar sem cadastrar</button>
+          <Button
+            fullWidth
+            disableElevation
+            variant="outlined"
+            className="mt-2 bg-white border-white text-gray-500 normal-case flex gap-2 w-96 hover:bg-main-hover"
+          >
+            <Image className="w-6 h-6" src="/google.svg" alt="google logo" width={10} height={10} />
+            <span>Entrar com o Google</span>
+          </Button>
+
           <SignupModal open={openModalSignup} handleClose={handleCloseModalSignup} />
         </div>
       </div>

src/app/login/components/LoginInfo.js

+import Title from "@/app/components/Title";
+import Image from "next/image";
+
+
+export default function LoginInfo() {
+    let cards = [
+        {
+            name: "Pesquise",
+            icon: "/pesquisa.svg",
+            color: "violet"
+        },
+        {
+            name: "Curta",
+            icon: "/salvar.svg",
+            color: "pink",
+        },
+        {
+            name: "Comente",
+            icon: "/comentar.svg",
+            color: "orange"
+        },
+        {
+            name: "Compartilhe",
+            icon: "/compartilhar.svg",
+            color: "secondary"
+        },
+        {
+            name: "Avalie",
+            icon: "/avaliar.svg",
+            color: "orange"
+        },
+        {
+            name: "Colecione",
+            icon: "/colecionar.svg",
+            color: "secondary"
+        },
+        {
+            name: "Contribua",
+            icon: "/download.svg",
+            color: "violet"
+        },
+        {
+            name: "Conecte-se!",
+            icon: "/seguir.svg",
+            color: "pink"
+        }
+    ]
+
+    return (
+        <div className="pt-20">
+
+            <div className="max-[1280px]:hidden">
+                <Title />
+            </div>
+            <div className="grid justify-items-center">
+
+                <div className="flex flex-wrap justify-center max-w-[600px]">
+
+                    {cards.map((card, i) => {
+                        return (
+                            <div key={i} className={`bg-${card["color"]} p-4 rounded-lg m-2 w-[120px] grid justify-items-center`}>
+                                <Image className={`w-14 h-14 ${card["name"] === "Contribua" && `rotate-180`}`} style={{ filter: 'invert(100%)' }} src={card["icon"]} width={10} height={10} />
+                                <p className="text-white pt-1">{card["name"]}</p>
+                            </div>
+                        )
+                    })}
+                </div>
+            </div>
+            <h1 className="max-xl:hidden mb-10 text-lg max-lg:text-base text-main-text text-balance mt-10 text-center">
+                Entre na plataforma através do painel ao lado para saber mais.
+            </h1>
+            <h1 className="xl:hidden mb-10 text-lg max-lg:text-base text-main-text text-balance mt-10 text-center">
+                Entre na plataforma através do painel acima para saber mais.
+            </h1>
+        </div>
+    )
+}
\ No newline at end of file

src/app/login/page.js

@@ -12,6 +12,7 @@ import { Suspense } from 'react';
 import About from "../components/About";
 import { ThemeProvider } from "@emotion/react";
 import theme from "../theme";
+import LoginInfo from "./components/LoginInfo";
 
 function Login() {
   const [userEmail, setUserEmail] = useState("");
@@ -65,7 +66,8 @@ function Login() {
     <ThemeProvider theme={theme}>
       <Grid container className="min-h-screen bg-[#f5f9f9]">
         <Grid xs={12} xl={7} order={{ xs: 2, xl: 1 }}>
-          <About />
+          {/* <About /> */}
+          <LoginInfo />
         </Grid>
         <Grid xs={12} xl={5} order={{ xs: 1, xl: 2 }}>
           <LoginForm

src/app/perfil/[id]/components/AboutCard.js

@@ -20,9 +20,9 @@ const AboutCard = ({ title, content }) => {
     };
     return (
 
-        <div className="mt-10 min-w-[200px] overflow-hidden transition-height shadow-md">
+        <div className="mt-10 min-w-[200px] overflow-hidden transition-height  bg-white">
 
-            <Card className='p-4 rounded-md min-w-[200px] min-h-[180px]  ' >
+            <div className='p-4 rounded-md min-w-[200px] min-h-[180px]  ' >
 
                 <h2 className="text-gray-500 text-2xl font-semibold	">{title}</h2>
                 <div id="content" className="content pt-2">
@@ -40,7 +40,7 @@ const AboutCard = ({ title, content }) => {
                         </button>
                     )}
                 </div>
-            </Card>
+            </div>
         </div>
     );
 };

src/app/perfil/[id]/components/ProfileCollections.js

@@ -58,7 +58,7 @@ export default function ProfileCollections({ id, idLogin }) {
         <div className='p-3 my-10 rounded-md min-w-[200px] min-h-[180px]  ' >
             <div className="flex justify-between">
 
-                <div className="text-gray-500 text-2xl font-semibold inline-block ">Minhas Coleções</div>
+                <div className="text-gray-500 text-2xl font-semibold inline-block ">{idLogin === id ? "Minhas Coleções" : "Coleções"}</div>
                 <CreateCollectionModal open={collectionOpen} onClose={() => setCollectionOpen(false)} id={idLogin} />
                 {idLogin === id && <button
                     className=" inline-block px-2 text-sm  text-main border-main rounded-lg normal-case h-9 font-bold bg-secondary hover:bg-secondary-hover"

src/app/perfil/[id]/components/ProfileResources.js

@@ -7,7 +7,7 @@ export default function ProfileResources({ resources, id, idLogin }) {
         <>
             <div className="flex justify-between pt-10">
 
-                <div className="text-gray-500 text-2xl font-semibold inline-block ">Meus Recursos</div>
+                <div className="text-gray-500 text-2xl font-semibold inline-block ">{idLogin === id ? "Meus Recursos" : "Recursos"}</div>
                 {idLogin === id &&
                     <Link href="/submit">
                         <button
@@ -32,6 +32,7 @@ export default function ProfileResources({ resources, id, idLogin }) {
                                 author={resource["publisher"]["name"]}
                                 avatar={resource["publisher"]["avatar"]}
                                 image={resource["thumbnail"]}
+                                updated_at={resource["updated_at"]}
                             />
                         );
                     })}

src/app/perfil/[id]/components/UserCard.js

@@ -138,7 +138,7 @@ export default function UserCard({ profileData, idLogin }) {
     return (
         <>
             <div className='flex  pt-[5%] flex-col mx-[5%] max-[940px]:mx-[5%]'>
-                <Card className='rounded-md min-w-[200px] min-h-[200px]' >
+                <div className='rounded-md min-w-[200px] min-h-[200px] bg-white' >
                     <Grid container>
 
 
@@ -151,7 +151,7 @@ export default function UserCard({ profileData, idLogin }) {
                                     sx={{ position: "inherit" }}
                                     className=" min-h-[200px] min-w-[200px] " />
                                 :
-                                <Avatar src={"https://api.portalmec.c3sl.ufpr.br/" + profileData["avatar"]} sx={{ position: "inherit" }} className=" min-h-[150px] min-w-[150px] " />
+                                <Avatar src={"https://api.portalmec.c3sl.ufpr.br/" + profileData["avatar"]} sx={{ position: "inherit" }} className=" min-h-[200px] min-w-[200px] " />
                             }
                             </div>
                         </Grid>
@@ -181,11 +181,11 @@ export default function UserCard({ profileData, idLogin }) {
                         </Grid>
                     </Grid>
 
-                </Card>
-                <Card className='rounded-md min-w-[200px] mt-10'>
+                </div>
+                <div className='rounded-md min-w-[200px] mt-10 bg-white'>
 
                     {<SelectionButtons setOptButton={setOptButton} verifyCurator={verifyCurator} idLogin={idLogin} idProfile={profileData["id"]} />}
-                </Card>
+                </div>
                 <ProfileOptions title="Sobre" content={profileData["description"]} optButton={optButton} id={profileData["id"]} idLogin={idLogin} />
             </div>
 

src/app/perfil/[id]/page.js

@@ -14,32 +14,6 @@ export default function Perfil({ params }) {
     const token = getStoredValue("access_token")
     const client = getStoredValue("client")
     const uid = getStoredValue("uid")
-    const loginBarrier = useLoginBarrier()
-    const minhaDivRef = useRef(null);
-    const [largura, setLargura] = useState(0);
-    const [altura, setAltura] = useState(0);
-
-    // useEffect(() => {
-    //   const handleResize = () => {
-    //     if (minhaDivRef.current) {
-    //       const novaLargura = minhaDivRef.current.offsetWidth;
-    //       const novaAltura = minhaDivRef.current.offsetHeight;
-    //       setLargura(novaLargura);
-    //       setAltura(novaAltura);
-    //     }
-    //   };
-
-    //   handleResize(); // Atualiza o tamanho inicial da div
-    //   window.addEventListener('resize', handleResize); // Adiciona o event listener
-
-    //   return () => {
-    //     window.removeEventListener('resize', handleResize); // Remove o event listener ao desmontar o componente
-    //   };
-    // }, [minhaDivRef]);
-    useEffect(() => {
-
-        const element = document.getElementById("div-main-profile")
-    }, [])
 
     useEffect(() => {
         if (isLoggedIn()) {

src/app/recurso/[id]/components/collectModal.js

@@ -121,7 +121,7 @@ export default function CollectModal({ open, onClose, idLogin, resourceId }) {
             onClose={onClose}
             className="grid place-items-center"
         >
-            <div className="flex flex-col w-[80%] bg-main p-5 md:w-[40%] h-[40%] -mt-[60%] sm:h-[60%] sm:-mt-[30%] md:-mt-[20%] xl:-mt-[10%] rounded-lg ">
+            <div className="flex flex-col w-[80%] bg-main p-5 md:w-[40%] h-[40%] -mt-[60%] sm:h-[60%] sm:-mt-[30%] md:-mt-[20%] xl:-mt-[10%] rounded-lg min-h-[250px] ">
                 <ModalRepeat open={repeatedOpen} onClose={() => { setRepeatedOpen(false) }} />
                 <ModalSucess open={sucessOpen} onClose={() => { setSucessOpen(false) }} />
                 <p className="text-2xl font-bold text-main-text">Guardar Recurso</p>