react-project/src/components/MainInstitucional/Contato.tsx

@@ -64,8 +64,6 @@ const phoneNumberMask = [
   /\d/,
 ];
 
-const insta = ["@"];
-
 const Contato = () => {
   return (
     <div className={contato["forms"]}>
@@ -136,7 +134,7 @@ const Contato = () => {
               />
             </div>
             <div className={contato["forms__form-col"]}>
-              <label htmlFor="date">Data de Nascimento</label>
+              <label htmlFor="date">Data de Nascimento:</label>
               <Field
                 name="date"
                 render={({ field }: any) => (
@@ -158,7 +156,7 @@ const Contato = () => {
               />
             </div>
             <div className={contato["forms__form-col"]}>
-              <label htmlFor="telefone">Telefone</label>
+              <label htmlFor="telefone">Telefone:</label>
               <Field
                 name="telefone"
                 render={({ field }: any) => (

react-project/src/components/MainInstitucional/Navigation.tsx

@@ -3,8 +3,6 @@ import { NavLink } from "react-router-dom";
 import navigation from "./assets/modules/Navigation.module.scss";
 
 const Navigation = () => {
-  /*let activeClassName = "ativo";*/
-
   return (
     <ul className={navigation["items"]}>
       <li>

react-project/src/components/MainInstitucional/assets/modules/Contato.module.scss

@@ -8,6 +8,11 @@
     line-height: 28px;
     color: var(--black);
     margin-bottom: 12px;
+
+    @media screen and (min-width: 2500px) {
+      font-size: 48px;
+      line-height: 56px;
+    }
   }
 
   &__form-col {
@@ -22,6 +27,11 @@
       font-size: 14px;
       line-height: 16px;
       color: var(--black-300);
+
+      @media screen and (min-width: 2500px) {
+        font-size: 28px;
+        line-height: 33px;
+      }
     }
 
     input {
@@ -35,11 +45,21 @@
       color: var(--gray-400);
       padding: 15px 20px;
 
+      @media screen and (min-width: 2500px) {
+        font-size: 28px;
+        line-height: 33px;
+      }
+
       &::placeholder {
         font-weight: 400;
         font-size: 14px;
         line-height: 16px;
         color: var(--gray-400);
+
+        @media screen and (min-width: 2500px) {
+          font-size: 28px;
+          line-height: 33px;
+        }
       }
     }
   }
@@ -53,6 +73,13 @@
     span {
       color: var(--red-100);
       margin-right: 2px;
+      font-weight: 400;
+      font-size: 14px;
+      line-height: 16px;
+      @media screen and (min-width: 2500px) {
+        font-size: 28px;
+        line-height: 33px;
+      }
     }
 
     label {
@@ -62,6 +89,10 @@
       margin-right: 4.28px;
       position: relative;
       text-decoration: underline;
+      @media screen and (min-width: 2500px) {
+        font-size: 28px;
+        line-height: 33px;
+      }
 
       label {
         position: absolute;
@@ -70,6 +101,12 @@
         border: 1px solid #000000;
         border-radius: 3px;
         right: -26px;
+
+        @media screen and (min-width: 2500px) {
+          width: 36.4px;
+          height: 35.15px;
+          right: -50px;
+        }
       }
     }
     input {
@@ -79,6 +116,12 @@
       margin-left: 1px;
       margin-top: 1.5px;
 
+      @media screen and (min-width: 2500px) {
+        width: 30px;
+        height: 28.5px;
+        margin-left: 8px;
+      }
+
       &:checked {
         opacity: 1;
       }
@@ -93,6 +136,11 @@
     font-size: 12px;
     line-height: 14px;
     color: var(--red-100);
+
+    @media screen and (min-width: 2500px) {
+      font-size: 24px;
+      line-height: 28px;
+    }
   }
 
   button {
@@ -106,6 +154,12 @@
     letter-spacing: 0.05em;
     color: var(--white);
     cursor: pointer;
+
+    @media screen and (min-width: 2500px) {
+      font-size: 32px;
+      line-height: 38px;
+      height: 71px;
+    }
   }
 
   &__success {
@@ -117,5 +171,10 @@
     font-size: 12px;
     line-height: 14px;
     color: var(--green-100);
+
+    @media screen and (min-width: 2500px) {
+      font-size: 24px;
+      line-height: 28px;
+    }
   }
 }

react-project/src/components/MainInstitucional/assets/modules/Main.module.scss

@@ -13,6 +13,11 @@
     letter-spacing: 0.1em;
     text-align: center;
     margin-bottom: 80px;
+
+    @media screen and (min-width: 2500px) {
+      font-size: 48px;
+      line-height: 56px;
+    }
   }
 
   &__wrapperNav {
@@ -27,6 +32,11 @@
         font-size: 24px;
         line-height: 28px;
         margin-bottom: 12px;
+
+        @media screen and (min-width: 2500px) {
+          font-size: 48px;
+          line-height: 56px;
+        }
       }
 
       p {
@@ -35,6 +45,11 @@
         font-size: 13px;
         line-height: 15px;
         margin-bottom: 13px;
+
+        @media screen and (min-width: 2500px) {
+          font-size: 26px;
+          line-height: 30px;
+        }
       }
     }
   }

react-project/src/components/MainInstitucional/assets/modules/Navigation.module.scss

@@ -5,6 +5,11 @@
   height: 285px;
   margin-right: 30px;
 
+  @media screen and (min-width: 2500px) {
+    width: 590px;
+    height: 465px;
+  }
+
   li {
     width: inherit;
 
@@ -17,7 +22,13 @@
       font-size: 16px;
       line-height: 19px;
 
+      @media screen and (min-width: 2500px) {
+        font-size: 32px;
+        line-height: 38px;
+      }
+
       &.ativo {
+        font-weight: 700;
         color: var(--white);
         background-color: var(--black);
       }