Textos melhorados e animações adicionado

src/css/cards.css

@@ -20,6 +20,10 @@
   transition: opacity 0.5s ease, transform 0.5s ease;
 }
 
+.activity-card:nth-child(1), .activity-card:nth-child(2) {
+  padding-inline: 2rem;
+}
+
 /* Classe que será adicionada para a animação */
 .activity-card.show {
   opacity: 1;
@@ -34,7 +38,7 @@
 @keyframes cardFadeIn {
   0% {
     opacity: 0;
-    transform: translateY(20px);
+    transform: translateY(100px);
   }
   100% {
     opacity: 1;
@@ -100,6 +104,9 @@
 
 .overlay.active {
   display: flex; /* Altera para visível quando ativo */
+  opacity: 0;
+  display: flex;
+  animation: cardFadeIn 0.7s forwards;
 }
 
 .overlay-content {
@@ -111,13 +118,18 @@
   border-radius: 10px;
   position: relative;
   transform: scale(0.9);
-  transition: all 0.5s ease;
+  transition: all 0.6s ease;
+}
+
+.overlay.active .overlay-content {
+  transform: scale(1);
+  transition: all 0.6s ease;
 }
 
 #overlayImg {
-  width: 90%;
+  width: 85%;
   border-radius: 8px;
-  margin: 3vh 0vh;
+  margin: 1vh 0vh;
 }
 
 .close-btn {

src/js/index.js

@@ -24,7 +24,7 @@ function renderActivities() {
     link.setAttribute("data-img", activity.image);
     link.setAttribute("data-name", activity.title);
     link.setAttribute("data-role", activity.role);
-    link.setAttribute("data-description", activity.description);
+    link.setAttribute("data-description", activity.descriptionTwo);
     link.setAttribute("data-link", activity.link);
 
     const image = document.createElement("img");
@@ -57,6 +57,7 @@ function initModal() {
   const overlayDescription = document.getElementById("overlayDescription");
   const closeBtn = document.getElementById("closeBtn");
   const techContainer = document.getElementById("modal-tech-badges");
+  const overlayContent = document.querySelector(".overlay-content");
 
   const link = document.querySelector(".overlay-content > a");
   link.classList.add("activity-link");
@@ -100,18 +101,35 @@ function initModal() {
       link.target = "_blank"; // Abre em nova aba
 
       overlay.classList.add("active"); // Exibe o modal
+
+      // Adiciona uma pequena animação de crescimento suave ao conteúdo do modal
+      setTimeout(() => {
+        overlayContent.style.transform = "scale(1)";
+        overlayContent.style.opacity = "1";
+      }, 100); // Um pequeno delay para suavizar a transição
     });
   });
 
   // Fecha o modal ao clicar no botão de fechar
   closeBtn.addEventListener("click", () => {
-    overlay.classList.remove("active");
+    overlayContent.style.transform = "translateY(100px)";
+    overlayContent.style.opacity = "0";
+
+    // Depois de um pequeno atraso, fecha o overlay completamente
+    setTimeout(() => {
+      overlay.classList.remove("active");
+    }, 300); // Tempo suficiente para a animação ser concluída
   });
 
   // Fecha o modal ao clicar fora do conteúdo do modal
   overlay.addEventListener("click", (e) => {
     if (e.target === overlay) {
-      overlay.classList.remove("active");
+      overlayContent.style.transform = "translateY(100px)";
+      overlayContent.style.opacity = "0";
+
+      setTimeout(() => {
+        overlay.classList.remove("active");
+      }, 300);
     }
   });
 }

src/js/info-atividades.js

@@ -4,7 +4,9 @@ const description = "Imagem referente ao site dessa atividade"
 export const activities = [
   {
     title: "Atividade 01: Projeto Get Coffe",
-    description: "Desenvolvimento de um site sobre café para atrair clientes",
+    description:
+      "Recriando um layout no Figma de um site sobre café para os usuários fazerem pedidos sem sair de casa",
+    descriptionTwo: `O objetivo principal era desenvolver uma interface intuitiva e fácil de usar para que os usuários possam fazer seus pedidos de café de forma rápida e prática, sem sair de casa.`,
     link: "./src/activities/atv01_projeto-coffe",
     image: "./src/assets/screenshots/get-coffe.png",
     alt: `${description}`,
@@ -21,7 +23,8 @@ export const activities = [
   },
   {
     title: "Atividade 02: Padrinhos Mágicos",
-    description: "Criação de um site falando sobre os padrinhos mágicos",
+    description: `Recriando um layout no Figma de um site falando sobre alguns episódios do desenho os "Padrinhos Mágicos"`,
+    descriptionTwo: `Esta atividade visa reproduzir uma interface para exibir alguns episódios da série "Os Padrinhos Mágicos", cada card exibe uma imagem e um resumo breve do episódio, além dos botões na parte superior que simulam a ação de login`,
     link: "./src/activities/atv02_padrinhos-magicos",
     image: "./src/assets/screenshots/padrinhos-magicos.png",
     alt: `${description}`,
@@ -40,6 +43,7 @@ export const activities = [
     title: "Atividade 03: Lógica de Programação",
     description:
       "Conjunto de 4 atividades de Javascript envolvendo lógica de programação",
+    descriptionTwo: `Cada card contém uma atividade de Lógica de Programação, essas atividades foram convertidas em um site para exibir todas em um único lugar e então testar`,
     link: "./src/activities/atv03_logica-js",
     image: "./src/assets/screenshots/logica-js.png",
     alt: `${description}`,