From 53ec17cbaa16ac8085b59c628e212e9c414215ea Mon Sep 17 00:00:00 2001
From: Rafael-Mori-2022 <rafaelmp2018@icloud.com>
Date: Wed, 25 Sep 2024 19:52:15 -0300
Subject: [PATCH] feat: responsive 'equipes' by Wilson

---
 assets/css/app.scss                       |   1 +
 assets/css/equipes.scss                   | 268 +++++++++++++
 assets/css/landing.scss                   | 446 ----------------------
 priv/static/equipes/linhas_pesquisas.json |  10 +-
 4 files changed, 274 insertions(+), 451 deletions(-)
 create mode 100644 assets/css/equipes.scss

diff --git a/assets/css/app.scss b/assets/css/app.scss
index 5ed5c542..9f9ca17d 100644
--- a/assets/css/app.scss
+++ b/assets/css/app.scss
@@ -176,6 +176,7 @@ footer {
 @import "./pages/login.scss";
 @import "./aboutus.scss";
 @import "./noticias.scss";
+@import "./equipes.scss";
 @import "./cooperativas.scss";
 @import "./sedes.scss";
 @import "./pgtr.scss";
diff --git a/assets/css/equipes.scss b/assets/css/equipes.scss
new file mode 100644
index 00000000..6f8a3afc
--- /dev/null
+++ b/assets/css/equipes.scss
@@ -0,0 +1,268 @@
+.equipes-wrapper {
+  @apply flex;
+  flex-direction: column;
+  margin-top: 5rem;
+
+  .nossas-equipes-wrapper {
+    @apply flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 3.5rem;
+
+    .nossas-equipes-container {
+      @apply flex relative;
+      flex-direction: column;
+      gap: 2rem;
+      padding: 0 2.5rem 0 2.5rem;
+      margin-bottom: 5rem;
+      border-radius: 1.5rem;
+
+      .nossas-equipes-card {
+        @apply relative;
+
+        img {
+          @apply absolute;
+          top: 0;
+          left: 0;
+          width: 100%;
+          height: 100%;
+          object-fit: cover;
+          border-radius: 1rem;
+          z-index: 1;
+
+          @media (max-width: 768px) {
+            height: 100%;
+            padding: 0;
+            border-radius: 1rem;
+            object-fit: cover;
+          }
+        }
+
+        // Conteúdo sobreposto à imagem
+        .nossas-equipes-content {
+          height: 12.84rem;
+          @apply flex relative;
+          flex-direction: column;
+          justify-content: center;
+          align-items: center;
+          gap: 1.5rem;
+          text-align: center;
+          z-index: 2; // Colocado acima da imagem
+          width: 100%; // Para ocupar toda a largura do pai
+
+          a,
+          div {
+            @apply flex text-white-100;
+            justify-content: center;
+            align-items: center;
+            width: 10.938rem;
+            height: 2.563rem;
+            font-size: 0.875rem;
+            background-color: rgba(255, 255, 255, 0.1);
+            backdrop-filter: blur(10px);
+            border-radius: 4px;
+            cursor: pointer;
+
+            @media (max-width: 768px) {
+              font-size: 0.75rem;
+            }
+          }
+
+          //nossas-equipes-content
+          @media (max-width: 768px) {
+            height: auto;
+            @apply flex;
+            width: fit-content;
+            justify-content: center;
+            align-items: center;
+            margin: 0 auto;
+          }
+        }
+
+        //nossas-equipes-card
+        @media (max-width: 768px) {
+          @apply flex relative;
+          align-items: center;
+          justify-content: center;
+          padding: 0;
+          margin-bottom: 0;
+
+          h2 {
+            font-size: 1.2rem;
+            padding: 0;
+          }
+        }
+      }
+
+      .nossas-equipes-content-collapsed {
+        @apply flex;
+        flex-direction: column;
+        justify-content: center;
+        margin: 2.5rem 2.5rem;
+        gap: 3rem;
+
+        .margin {
+          margin: 1rem;
+        }
+
+        .bold {
+          font-weight: 700;
+        }
+
+        h4 {
+          font-size: 16px;
+          line-height: 18px;
+        }
+
+        .collapsed-menu-wrapper {
+          @apply flex bg-blue-100;
+          justify-content: space-between;
+          align-items: center;
+          padding: 1.5rem;
+          border-radius: 8px;
+
+          svg {
+            @apply text-white-100;
+          }
+        }
+
+        .collapsed-menu-content {
+          padding: 0 1.5rem 0 1.5rem;
+
+          h4:nth-child(1) {
+            margin-bottom: 2.5rem;
+          }
+
+          .linha-pesquisa {
+            @apply flex;
+            flex-direction: column;
+            gap: 2.5rem;
+            margin-bottom: 2.5rem;
+
+            .linha-pesquisa-header {
+              @apply flex;
+              flex-direction: column;
+              gap: 1.5rem;
+
+              //linha-pesquisa-header
+              @media(max-width: 768px) {
+                h3 {
+                  font-size: 1.2rem;
+                }
+              }
+            }
+
+            //linha-pesquisa
+            @media(max-width: 768px) {
+              h3 {
+                font-size: 1.2rem;
+              }
+            }
+
+            .membros {
+              @apply flex;
+              flex-direction: column;
+              gap: 2.5rem;
+
+              .membro-equipe {
+                @apply flex;
+                align-items: center;
+                gap: 1rem;
+
+                .membro-circle {
+                  @apply flex bg-blue-100;
+                  justify-content: center;
+                  border-radius: 50%;
+                  overflow: hidden;
+                  width: 3.75rem;
+                  height: 3.75rem;
+
+                  img {
+                    width: 100%;
+                    height: 100%;
+                    object-fit: cover;
+
+                    @media (max-width: 768px) {
+                      width: 100%;
+                      height: 100%;
+                      object-fit: cover;
+                      border-radius: 50%;
+                    }
+                  }
+
+                  //membro-circle
+                  @media (max-width: 768px) {
+                    width: 4rem;
+                    height: 4rem;
+                    border-radius: 50%;
+                    overflow: hidden;
+                    display: flex;
+                    justify-content: center;
+                    align-items: center;
+                  }
+                }
+
+                .membro-circle-transparent {
+                  @apply flex;
+                  justify-content: center;
+                  width: 3rem;
+                  height: auto;
+
+                  img {
+                    width: 100%;
+                  }
+                }
+
+                .membro-description {
+                  @apply flex;
+                  flex-direction: column;
+                  justify-content: center;
+                  gap: 0.5rem;
+
+                  .membro-name {
+                    @apply flex;
+                    align-items: center;
+                    gap: 0.75rem;
+
+                    & h5:nth-child(1) {
+                      font-weight: 600;
+                    }
+
+                    .lider {
+                      @apply bg-blue-10;
+                      border-radius: 2px;
+                      padding: 0.5rem;
+                    }
+                  }
+                }
+
+                //membro-equipe
+                @media (max-width: 768px) {
+                  display: flex;
+                  flex-direction: column;
+                  align-items: center;
+                  gap: 1rem;
+                }
+              }
+            }
+          }
+        }
+
+        //nossas-equipes-content-collapsed
+        @media (max-width: 768px) {
+          margin: 0.5rem 0.5rem;
+          h2 {
+            font-size: 1.2rem;
+            line-height: 1.2rem;
+          }
+        }
+      }
+    }
+  }
+}
+
+@media screen and (min-width: 1264px) {
+  .nossas-equipes-container {
+    width: 1360px;
+  }
+}
diff --git a/assets/css/landing.scss b/assets/css/landing.scss
index 8cd55f50..5507cfe5 100644
--- a/assets/css/landing.scss
+++ b/assets/css/landing.scss
@@ -466,449 +466,3 @@
     height: auto !important;
   }
 }
-
-.equipes-wrapper {
-  @apply flex;
-  flex-direction: column;
-  margin-top: 5rem;
-
-  .mapa-wrapper {
-    @apply flex;
-    padding: 0 2.5rem;
-
-    img {
-      border-radius: 1.5rem;
-      max-width: 100%;
-      height: auto;
-    }
-  }
-
-  .nossas-sedes-wrapper {
-    @apply flex;
-    flex-direction: column;
-    align-items: center;
-    gap: 4.5rem;
-    margin-top: 5rem;
-
-    .nossas-sedes-container {
-      display: grid;
-      grid-template-columns: repeat(2, 1fr);
-      gap: 2.5rem;
-      padding: 0 7.188rem;
-      margin-bottom: 5rem;
-
-      .sede-detail {
-        @apply flex items-start gap-2.5;
-        gap: 0.625rem;
-
-        svg {
-          @apply text-black-80;
-          margin-top: 0.3rem;
-          width: 14px;
-          height: 14px;
-        }
-
-        .sede-text {
-          @apply flex;
-          flex-direction: column;
-
-          >h5 {
-            line-height: 1.5rem;
-          }
-
-          >h5:nth-child(1) {
-            font-weight: 700;
-          }
-        }
-      }
-    }
-  }
-
-  .nossas-equipes-wrapper {
-    @apply flex;
-    flex-direction: column;
-    align-items: center;
-    gap: 3.5rem;
-
-    .nossas-equipes-container {
-      @apply flex relative;
-      flex-direction: column;
-      gap: 2rem;
-      padding: 0 2.5rem 0 2.5rem;
-      margin-bottom: 5rem;
-
-      .nossas-equipes-card {
-        @apply relative;
-
-        .nossas-equipes-content {
-          @apply flex absolute;
-          flex-direction: column;
-          justify-content: center;
-          align-items: center;
-          gap: 1.5rem;
-          top: 50%;
-          left: 50%;
-          transform: translate(-50%, -50%);
-          text-align: center;
-
-          a,
-          div {
-            @apply flex text-white-100;
-            justify-content: center;
-            align-items: center;
-            width: 10.938rem;
-            height: 2.563rem;
-            font-size: 0.875rem;
-            background-color: rgba(255, 255, 255, 0.1);
-            backdrop-filter: blur(10px);
-            border-radius: 4px;
-            cursor: pointer;
-          }
-        }
-      }
-
-      .nossas-equipes-content-collapsed {
-        @apply flex;
-        flex-direction: column;
-        justify-content: center;
-        margin: 2.5rem 2.5rem;
-        gap: 3rem;
-
-        .margin {
-          margin: 1rem;
-        }
-
-        .bold {
-          font-weight: 700;
-        }
-
-        h4 {
-          font-size: 16px;
-          line-height: 18px;
-        }
-
-        .collapsed-menu-wrapper {
-          @apply flex bg-blue-100;
-          justify-content: space-between;
-          align-items: center;
-          padding: 1.5rem;
-          border-radius: 8px;
-
-          svg {
-            @apply text-white-100;
-          }
-        }
-
-        .collapsed-menu-content {
-          padding: 0 1.5rem 0 1.5rem;
-
-          h4:nth-child(1) {
-            margin-bottom: 2.5rem;
-          }
-
-          .linha-pesquisa {
-            @apply flex;
-            flex-direction: column;
-            gap: 2.5rem;
-            margin-bottom: 2.5rem;
-
-            .linha-pesquisa-header {
-              @apply flex;
-              flex-direction: column;
-              gap: 1.5rem;
-            }
-
-            .membros {
-              @apply flex;
-              flex-direction: column;
-              gap: 2.5rem;
-
-              .membro-equipe {
-                @apply flex;
-                align-items: center;
-                gap: 1rem;
-
-                .membro-circle {
-                  @apply flex bg-blue-100;
-                  justify-content: center;
-                  border-radius: 50%;
-                  overflow: hidden;
-                  overflow: hidden;
-                  width: 3.75rem;
-                  height: 3.75rem;
-
-                  img {
-                    width: 100%;
-                    object-fit: cover;
-                    width: 100%;
-                    object-fit: cover;
-                  }
-                }
-
-                .membro-circle-transparent {
-                  @apply flex;
-                  justify-content: center;
-                  width: 3.75rem;
-                  height: auto;
-
-                  img {
-                    width: 100%;
-                  }
-                }
-
-                .membro-description {
-                  @apply flex;
-                  flex-direction: column;
-                  justify-content: center;
-                  gap: 0.5rem;
-
-                  .membro-name {
-                    @apply flex;
-                    align-items: center;
-                    gap: 0.75rem;
-
-                    & h5:nth-child(1) {
-                      font-weight: 600;
-                    }
-
-                    .lider {
-                      @apply bg-blue-10;
-                      border-radius: 2px;
-                      padding: 0.5rem;
-                    }
-                  }
-                }
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-}
-
-@media screen and (min-width: 1264px) {
-  .nossas-equipes-container {
-    width: 1360px;
-  }
-}
-
-@media (min-width: 530px) and (max-width: 770px){
-  .links-landing {
-    @apply flex flex-col justify-center items-center ;
-    width: 100%;
-
-    .links-item {
-      @apply flex flex-col justify-start items-start m-8;
-      width: 60%;
-      height: 16rem;
-      border-radius: 8px;
-      box-sizing: border-box;
-      background: linear-gradient(180deg, rgba(16, 16, 16, 0) 0%, #101010 100%);
-
-      a {
-        @apply flex flex-col mt-auto;
-      }
-
-      img {
-        border-radius: 8px;
-        width: inherit;
-        height: inherit;
-        @apply absolute;
-        z-index: -10;
-      }
-
-      h3 {
-        padding-left: 1rem;
-      }
-
-      p {
-        text-wrap: wrap;
-        margin-top: 0.5rem;
-        padding: 0 1rem 1.5rem 1rem;
-      }
-
-      button {
-        width: 100%;
-        padding: 0 1rem 1.5rem 0;
-        background-color: transparent;
-
-        p {
-          display: inline-flex;
-          width: inherit;
-
-          &:hover {
-            text-decoration: underline;
-          }
-        }
-      }
-    }
-  }
-
-}
-
-@media (min-width: 350px) and (max-width: 529px){
-
-
-
-  .links-landing {
-    @apply flex flex-col justify-center items-center;
-    width: 100%;
-
-    .links-item {
-      @apply flex flex-col justify-start items-start m-8;
-      width: 70%;
-      height: 13rem;
-      border-radius: 8px;
-      box-sizing: border-box;
-      background: linear-gradient(180deg, rgba(16, 16, 16, 0) 0%, #101010 100%);
-
-      a {
-        @apply flex flex-col mt-auto;
-      }
-
-      img {
-        border-radius: 8px;
-        width: inherit;
-        height: inherit;
-        @apply absolute;
-        z-index: -10;
-      }
-
-      h3 {
-        padding-left: 1rem;
-      }
-
-      p {
-        text-wrap: wrap;
-        margin-top: 0.5rem;
-        padding: 0 1rem 1.5rem 1rem;
-      }
-
-      button {
-        width: 100%;
-        padding: 0 1rem 1.5rem 0;
-        background-color: transparent;
-
-        p {
-          display: inline-flex;
-          width: inherit;
-
-          &:hover {
-            text-decoration: underline;
-          }
-        }
-      }
-    }
-  }
-}
-
-@media (min-width: 530px) and (max-width: 770px){
-  .links-landing {
-    @apply flex flex-col justify-center items-center ;
-    width: 100%;
-
-    .links-item {
-      @apply flex flex-col justify-start items-start m-8;
-      width: 60%;
-      height: 16rem;
-      border-radius: 8px;
-      box-sizing: border-box;
-      background: linear-gradient(180deg, rgba(16, 16, 16, 0) 0%, #101010 100%);
-
-      a {
-        @apply flex flex-col mt-auto;
-      }
-
-      img {
-        border-radius: 8px;
-        width: inherit;
-        height: inherit;
-        @apply absolute;
-        z-index: -10;
-      }
-
-      h3 {
-        padding-left: 1rem;
-      }
-
-      p {
-        text-wrap: wrap;
-        margin-top: 0.5rem;
-        padding: 0 1rem 1.5rem 1rem;
-      }
-
-      button {
-        width: 100%;
-        padding: 0 1rem 1.5rem 0;
-        background-color: transparent;
-
-        p {
-          display: inline-flex;
-          width: inherit;
-
-          &:hover {
-            text-decoration: underline;
-          }
-        }
-      }
-    }
-  }
-
-}
-
-@media (min-width: 350px) and (max-width: 529px){
-
-
-
-  .links-landing {
-    @apply flex flex-col justify-center items-center;
-    width: 100%;
-
-    .links-item {
-      @apply flex flex-col justify-start items-start m-8;
-      width: 70%;
-      height: 13rem;
-      border-radius: 8px;
-      box-sizing: border-box;
-      background: linear-gradient(180deg, rgba(16, 16, 16, 0) 0%, #101010 100%);
-
-      a {
-        @apply flex flex-col mt-auto;
-      }
-
-      img {
-        border-radius: 8px;
-        width: inherit;
-        height: inherit;
-        @apply absolute;
-        z-index: -10;
-      }
-
-      h3 {
-        padding-left: 1rem;
-      }
-
-      p {
-        text-wrap: wrap;
-        margin-top: 0.5rem;
-        padding: 0 1rem 1.5rem 1rem;
-      }
-
-      button {
-        width: 100%;
-        padding: 0 1rem 1.5rem 0;
-        background-color: transparent;
-
-        p {
-          display: inline-flex;
-          width: inherit;
-
-          &:hover {
-            text-decoration: underline;
-          }
-        }
-      }
-    }
-  }
-}
diff --git a/priv/static/equipes/linhas_pesquisas.json b/priv/static/equipes/linhas_pesquisas.json
index 922f822e..558543bf 100644
--- a/priv/static/equipes/linhas_pesquisas.json
+++ b/priv/static/equipes/linhas_pesquisas.json
@@ -196,9 +196,9 @@
             "lider": false
           },
           {
-            "nome": "João Pedro Rabelo de Carvalho",
-            "equipe": "Graduando, UFV - Viçosa",
-            "imagem": "",
+            "nome": "Fernanda Gomes de Oliveira",
+            "equipe": "Graduanda, IFF - Guarus",
+            "imagem": "https://rrosgcmviafnxjshljoq.supabase.co/storage/v1/object/sign/static/images/equipes/membros/nucleo_de_pesquisas/pesquisadores/Fernanda%20Gomes.gif?token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1cmwiOiJzdGF0aWMvaW1hZ2VzL2VxdWlwZXMvbWVtYnJvcy9udWNsZW9fZGVfcGVzcXVpc2FzL3Blc3F1aXNhZG9yZXMvRmVybmFuZGEgR29tZXMuZ2lmIiwiaWF0IjoxNzI3MTUxNzg1LCJleHAiOjIwNDI1MTE3ODV9.fZJtVf_1eOxRHIZDPBy8YcJ5btc6dCSNuTBXvMYxQPs&t=2024-09-24T04%3A23%3A07.016Z",
             "lider": false
           },
           {
@@ -383,9 +383,9 @@
             "lider": false
           },
           {
-            "nome": "Vínicius  Pedrosa Carvalho",
+            "nome": "Júlio César Tuller Campista",
             "equipe": "Graduando, IFF - Campos dos Goytacazes",
-            "imagem": "",
+            "imagem": "https://rrosgcmviafnxjshljoq.supabase.co/storage/v1/object/sign/static/images/equipes/membros/nucleo_de_pesquisas/pesquisadores/Julio%20Cesar%20Tuller.gif?token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1cmwiOiJzdGF0aWMvaW1hZ2VzL2VxdWlwZXMvbWVtYnJvcy9udWNsZW9fZGVfcGVzcXVpc2FzL3Blc3F1aXNhZG9yZXMvSnVsaW8gQ2VzYXIgVHVsbGVyLmdpZiIsImlhdCI6MTcyNzE1MTc0NywiZXhwIjoyMDQyNTExNzQ3fQ.L2n_DWCC6KvlBBjIh6svTOY3Jrp2vI5t-kSWTvJPfi8&t=2024-09-24T04%3A22%3A29.158Z",
             "lider": false
           }
         ]