feat(main): Estiliza cards e CardsSelect

react-ts/src/assets/images/vtex-pci.svg

@@ -1,9 +0,0 @@
-<svg width="218,44" height="136" viewBox="0 0 56 34" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-<rect x="0.408936" width="54.6061" height="34" fill="url(#pattern0)"/>
-<defs>
-<pattern id="pattern0" patternContentUnits="objectBoundingBox" width="1" height="1">
-<use xlink:href="#image0_4374_621" transform="translate(0 -0.00590909) scale(0.005 0.0080303)"/>
-</pattern>
-<image id="image0_4374_621" width="200" height="126" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAAB+CAMAAABWFa7EAAACr1BMVEUAAAAiP3MiP3MiP3MiP3MiP3MiP3MiP3MiP3MiP3MiP3MiP3MiP3P///8iP3P2GWMNa3F6jKvi5ezEzNry9Pd9jq34Q4AObHL+4usAYWj9xdhdcpgAY2n2HmYddXr3NXYJaW8FZmwbrz/T2eP4UooOaHEHZ273J2z5b50xTHwLanAAYGb//v7w8/fX5uj2HGU/WYYgQ3MhQXP2I2r/+fv/8fb+2eURYnECZWv2IGinssf5Z5hOZY8eR3P3LHAYrT3+5O390uD9w9agxcd3rLD4TIYTX3IXVnIaUHIPZXH//P3/9vn+7fP+6PD+3+mawcNUlpr5ZJb5YJT5WY4Ub3UUXHIcSnIAV14mskkjsUbz/PP91OL9zd38sMmZpr/7l7l/sbSJmbR8r7L6jLH6ha36fadsf6JHX4sfsEP7/v34+/rx9vfn8PHc6evg9uP9ydrH7NC1v9Cpy82kyMr7krVtpqn6gKn5cJ5keZ2G1ZlQlJj3OXgnRHf3MHMVWXIbTXIeRXISUW8wtlEps0v0+fjp7fL+7PLj7e/m9+n+3OfS4+X8qMT7nr36daJbm59LkZVGjJP5XJH4RoL4QH1hyHobcnkYU3IQY3FTw24stU7u9fbq8vPf6+zW8ty61te30tX8u9GvztCvucyUvsCPur2h3rCa3Ktzhac9iI34VYsygob4SYP4SIMlen9Kv2YAXWP+5u7a8uDI1N/9z9+/x9b8vtP8vdL8t86ewMj8qsW15cGSorqDtLdxp6xkoaX6eKOM1p75aZo5goc1T4AuW333PHohUXZYxHIKXG0FW2REvWI8u1sOqjXc4enE29zC2tux0NG86MahrsSy5byr5LV/kK59kK36eqRkl6KN2Z1YdZdWbJRUa5N70JFRaJF0zooxb4M8VoMfY3gXX3QMY285bkN9AAAADXRSTlMAZvBppEc7YBbPzIqHXR2KhAAACBxJREFUeNrs2M9r2mAcx/H97hj77MtgE+kIOUyIB8GDURBBVPBStaAeVTy0nnuR9iBeBdEe2v4DZZdR2kOhtKOnUkb/hh0G+1v2jabJYxKMh5E+jrygJQQPz5vHPM8Tn4VCodW83Xi+jt44O97//P5xHf1+tZiy8ecT1tO3Vwsh775iXX15LYa8WNcJAT6/DEPkEobIJgyRTRhiydwfR5Y5vxvBg3QhUY38POhwky5kn/x14CZdSIP8deEmXcgO+duDm3QhtSz5KcODdCHokZ8SPMgXUkvRcjF4kS8EuxI8If8kpLp8SprwJFdIem+T1SkfESkkamMFtVarVdt6spCSuWKd6xBlSNDA3A1R8hIskSfqIy+uaaUIGZIlNIiUKwBFhT8UXEiT5nKOeUqSrSjcvAUrztYx+2ATwfbjFP5Ahi+Pt5AoE6mVYELEXV0pQNQn5mrkscXBukRZHWVVNSZlqKq52WpxEmNXmF1Pccv/TxFcyB6ZDiFIa2TLiEeAoTmNRzBsElEUrC6sCBWVKDXmxgaCChG/W8o2vA8tcVjaRDQG9BRRdzEkJn7ulO9qHFMINKRtDdh7NU4KgVs8vOl8FjOukHqUFWDOD+sGvI8ciSN2748HEOR4vOY3zBkifg8LKeOR0QMOKdoPtXhi8VwEJkRaAmUrzx3SAktc8FUv8J294Xyqe2S7g+jSWIwrClHHHTKIs4MRWIeYMg46JOOYkkKWLNkaFpwQda/5fhUeD7u4bLGzoEOQW9z5DsnWc78VN/nvGI6QMzFkh6fDePI6QYdkkuJZJKqQJTXCohKPUSPadYbkiCI65qI8o71qnmiYDjgEcXFK4mTbhYOeJcOmM6TPF0mNlWZRWhoTvvMr6JDtxylpCtdMq8LpgNhgyxkyyltnLePeFLOzVrIYcAgPz3SqH5FtBy7peyUZs3aclqoO5rHjumZ8FR/aiKtqzAhtDVT1MOiQgmLtG2TLp+EhocNbJZ148jdEe6XKkq2P5eR6Q1zcO9SOMCEVLCdjyONuPklcrP7jopQhtay5HF2Taeg7IVKGYJ/MvbhMc1P4kTPEeAc5Scw27xlVhx85Q3BzcZaBfSSfwJekIZa2QrPfQXzJHoJ2/Xw/DX/Sh6woDAlD1kUYIpswRDb/a8iH9RWG/G3nTF7aiMIA3kILLeV9jBOKDA4ymZCBxKYkuSSIIYeGLCdziFk8lJqDRlvFBUGluEVRPKgHrdqVLloRVFp6KN0obem+b7Slpesf0vdmxsYkkiIzDLGd32VeHh/k+8173/ceBFJs6CLFhi5SbOgixYYuUmzoIsXGfy7iJDj6PdFoXzB4LNBbU+N3uUIuB2iDchGSvEdOvrfG73fNzIRCZrOZwlg5rg80QKFIgLz0mZAZQ22I0U0JD0EDFIqEqMIYyy+c7piMgkI0WBFzQQ+OOo0QOv4NNECZiMdVyKOUXRpCGF8/aIAiEWegoIh7+QTCdA6AxFGLBdRAfRHwmMWM16Bk8MhqpUop96HDCJ2e/uUBTEPJOZPpvSoq6ouAn7RYpkKEcVvl2mArWDfLMBxVcWd8QjCWHsORF+lT81Pzw12gBuqLBHHakc4bhzC+8SWBxSocE+m5caC94/z4tLvH13mzM8LNOGHv4dtzT1dOnWsAEXulDdEleIAkyoBGGFubXZyS5xANeF6kHg/ywk11qok4QrjHnkQijUNnFllKEG7tb0SEoXCsHT8OlwvC/a6mL96nD0ZfH5U9sIbBhg6SzAyEKqDJgEY2C+CnDZE5SUQKIKlDTjgOM1lUEoFeLLIfp9t0HGFOLDLWakTYtw+h8dgBPDpSzlVMDt/mvQ9GD4IMjfBqWAzyS5enAFOJ5TAG8YMssi4gP9yglkifLHL2TucR/GiPJRHm5KFwOHkmLIswy81vUvzj0cqjIFGPKgFjKcvLzI5MmxEBEypTScThkkTOx2JkKV6IH0YWV3HtRyKMKBJhz7QM8nOtV7CHRFvm63MzQ/SmRErQQZVEICCJVD8qf05WZLKJWFUIuJkJnCgyItxsnPXyC/R3gHVZbCxShQybErEjg1oiUUmkuaMZYSZ6EMbHSI1YFGmetHXz3qnaLsjLPlO9FikzuwnV5YpkyjsnXA5RSwQeYhGZE77VnkayPAyXETmyvzXBD566DhuLSNjX2mwb5IpkGm5WuPoiA6LI8bGxl8klllk+STruBDkR3cIqEUG1Kzz/cfgewF+2lsGAyHpov7Vk+qeJSDtHCaybszIXEDG5EJ641XF1WmzF3d7Ek9rko36AvxV7HWrbpEi9asWO+UFEOhiB1EWpMXIWyewbHSF10xqP828v/xxwAiar/VbVWXIyo1EVaN1+M9wfIecIi8tCNCn1jUkHffdgdy3eWLMpfrbpE4hkH4im3AMRGxpA6wMxg+ODz5fswQsimzDl4WR19VhLwuudvYQW+ETq2hVYo8AVRX7DBUSUX1EKM8CyrJH6g9XIsu5YuHaKT3tXrj1OeaeGPkMOG10aAVNW8GTPvzRaQE2RqJnKgzNebXnCpxPxeCLeiu8mGqBcxOnK8zD7B+5dfpVOpONp/utwA2iBchEI5FjUBD1OgAZ6gU/FU4Mt10EblIt41u2tUE3QARJdTd2Dc3Pzz+6CNigXAb+8FK7ePgdkKKFbWi/RXaAVykWCFMYfiDogm4b6dxc1LBDlIo6Q65jHAUXHf/6zQhGiixQbukixoYsUG/+myG7YuuxcL7Idtiw7tmWxB7Yo+G9ys9m1fUuyc5uOjo6Ojo4K/AbFAa9esd0XkgAAAABJRU5ErkJggg=="/>
-</defs>
-</svg>

react-ts/src/assets/images/vtex-pciMobile.svg

@@ -1,9 +0,0 @@
-<svg width="45" height="28" viewBox="0 0 45 28" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-<rect x="0.00244141" width="44.9975" height="28" fill="url(#pattern0)"/>
-<defs>
-<pattern id="pattern0" patternContentUnits="objectBoundingBox" width="1" height="1">
-<use xlink:href="#image0_3715_7127" transform="translate(0 -0.00622215) scale(0.005 0.00803527)"/>
-</pattern>
-<image id="image0_3715_7127" width="200" height="126" xlink:href="data:image/png;base64,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"/>
-</defs>
-</svg>

react-ts/src/components/Cards/Entrega.module.scss

@@ -25,4 +25,28 @@
             color: $color-grey4;
         }
     }
+}
+
+@media only screen and (max-width: 1024px) {
+    .container {
+        &__h1 {
+            text-align: center;
+            margin-top: 30px;
+        }
+    }
+}
+
+@media only screen and (min-width: 2500px) {
+    .container {
+        &__h1 {
+            line-height: 56px;
+            font-size: 48px;
+        }
+        &__p {
+            p {               
+                font-size: 26px;
+                line-height: 30px;
+            }
+        }
+    }
 }

react-ts/src/components/Cards/FormaDePagamento.module.scss

@@ -25,4 +25,27 @@
             color: $color-grey4;
         }
     }
+}
+
+@media only screen and (max-width: 1024px) {
+    .container {
+        &__h1 {
+            text-align: center;
+            margin-top: 30px;
+        }
+    }
+}
+@media only screen and (min-width: 2500px) {
+    .container {
+        &__h1 {
+            line-height: 56px;
+            font-size: 48px;
+        }
+        &__p {
+            p {               
+                font-size: 26px;
+                line-height: 30px;
+            }
+        }
+    }
 }

react-ts/src/components/Cards/Seguranca.module.scss

@@ -25,4 +25,27 @@
             color: $color-grey4;
         }
     }
+}
+
+@media only screen and (max-width: 1024px) {
+    .container {
+        &__h1 {
+            text-align: center;
+            margin-top: 30px;
+        }
+    }
+}
+@media only screen and (min-width: 2500px) {
+    .container {
+        &__h1 {
+            line-height: 56px;
+            font-size: 48px;
+        }
+        &__p {
+            p {               
+                font-size: 26px;
+                line-height: 30px;
+            }
+        }
+    }
 }

react-ts/src/components/Cards/Sobre.module.scss

@@ -25,4 +25,27 @@
             color: $color-grey4;
         }
     }
+}
+
+@media only screen and (max-width: 1024px) {
+    .container {
+        &__h1 {
+            text-align: center;
+            margin-top: 30px;
+        }
+    }
+}
+@media only screen and (min-width: 2500px) {
+    .container {
+        &__h1 {
+            line-height: 56px;
+            font-size: 48px;
+        }
+        &__p {
+            p {               
+                font-size: 26px;
+                line-height: 30px;
+            }
+        }
+    }
 }

react-ts/src/components/Cards/Troca.module.scss

@@ -25,4 +25,27 @@
             color: $color-grey4;
         }
     }
+}
+
+@media only screen and (max-width: 1024px) {
+    .container {
+        &__h1 {
+            text-align: center;
+            margin-top: 30px;
+        }
+    }
+}
+@media only screen and (min-width: 2500px) {
+    .container {
+        &__h1 {
+            font-size: 48px;
+            line-height: 56px;
+        }
+        &__p {
+            p {               
+                font-size: 26px;
+                line-height: 30px;
+            }
+        }
+    }
 }

react-ts/src/components/CardsSelect/CardsSelect.module.scss

@@ -30,7 +30,8 @@
                 display: flex;
                 flex-direction: column;
                 width: 100%;
-                button {
+                &__component {
+                    background-color: transparent;
                     max-width: 302px;
                     height: 39px;
                     border: none;
@@ -62,4 +63,53 @@
             color: $color-white1;
         }
     }
-}
+}
+
+@media only screen and (max-width: 1024px) {
+    .container {
+        padding: 0 16px;
+        &__wrapper {
+            flex-direction: column;
+            &__button {
+                max-width: unset;
+                border-right: none;
+                height: 224px;
+                &__wrapper {
+                    flex-direction: column;
+                    width: 100%;
+                    button {
+                        max-width: unset;
+                        width: 100%;
+                    }
+                }
+            }
+            &__cards {
+                margin-left: unset;
+            }
+        }
+    }
+}
+
+@media only screen and (min-width: 2500px) {
+    
+    .container {
+        &__h1 {
+            font-size: 48px;
+            line-height: 56px;
+        }
+        &__wrapper {
+            &__button {
+                max-width: 590px;
+                height: 465px;
+                &__wrapper {
+                    &__component {
+                        max-width: 590px;
+                        height: 58px;
+                        font-size: 32px;
+                        line-height: 38px;
+                    }
+                }
+            }
+        }
+    }
+} 

react-ts/src/components/CardsSelect/CardsSelect.tsx

@@ -8,37 +8,64 @@ import Troca from '../Cards/Troca';
 import Seguranca from '../Cards/Seguranca';
 import ContactForm from '../ContactForm/ContactForm';
 
-const CardSelect = () => {
+const buttonToRender = [
+   {
+      label : 'Sobre',
+      id : 0,
+   },
+   {
+      label : 'Forma de Pagamento',
+      id : 1, 
+   },
+   {
+      label : 'Entrega',
+      id : 2,
+   },
+   {
+      label : 'Troca e Devolução',
+      id : 3,
+   },
+   {
+      label : 'Segurança e Privacidade',
+      id : 4,
+   },
+   {
+      label : 'Contato',
+      id : 5,
+   }
+]
 
-    const [render, setRender] = useState ("Sobre");
- 
+   const CardSelect = () => {
+
+   const [render, setRender] = useState ("Sobre");
+   
+   const button = () => {
+      return buttonToRender.map((
+         button
+      ) => (
+         <button key={button.id} onClick={()=>setRender(button.label)} className={`${styles['container__wrapper__button__wrapper__component']} ${render === button.label ? styles['active'] : null }`}>{button.label}</button>
+       ) )
+   }
     return (
-       <div className={styles['container']}>
+      <div className={styles['container']}>
             <h1 className={styles['container__h1']}>institucional</h1>
             <div className={styles['container__wrapper']}>
                <div className={styles['container__wrapper__button']} >
                   <div className={styles['container__wrapper__button__wrapper']}>
-                     <button onClick={()=> setRender("Sobre")}>Sobre</button>
-                     <button onClick={()=> setRender("Forma de Pagamento")}>Forma de Pagamento</button>
-                     <button onClick={()=> setRender("Entrega")} >Entrega</button>
-                     <button onClick={()=> setRender("Troca e Devolução")}>Troca e Devolução</button>
-                     <button onClick={()=> setRender("Segurança e Privacidade")}>Segurança e Privacidade</button>
-                     <button onClick={()=> setRender("Contato")}>Contato</button>
+                     {button()}
                   </div>
                </div>
    
-               <div className={styles['container__wrapper__cards']}>
-                  {render === "Sobre" && <Sobre/>}
-                  {render === "Forma de Pagamento" && <FormaDePagamento/>}
-                  {render === "Entrega" && <Entrega/>}
-                  {render === "Troca e Devolução" && <Troca/>}
-                  {render === "Segurança e Privacidade" && <Seguranca/>}
-                  {render === "Contato" && <ContactForm/>}
-               </div>
+            <div className={styles['container__wrapper__cards']}>
+               {render === "Sobre" && <Sobre/>}
+               {render === "Forma de Pagamento" && <FormaDePagamento/>}
+               {render === "Entrega" && <Entrega/>}
+               {render === "Troca e Devolução" && <Troca/>}
+               {render === "Segurança e Privacidade" && <Seguranca/>}
+               {render === "Contato" && <ContactForm/>}
             </div>
          </div>
- 
- 
+      </div>
  )}
  
  export default CardSelect;

react-ts/src/components/ContactForm/ContactForm.module.scss

@@ -129,11 +129,26 @@
         border-color: $color-red1;
     }
 }
+@media only screen and (min-width: 375px) {
+    .container {
+        &__checkbox {
+            max-width: 992px;
+            &__errorCheck {
+                right: 92px !important;
+                top: 17px
+            }
+        }
+    }
+}
+
 
 @media only screen and (max-width: 1024px)  {
     .container {
         max-width: 992px;
         &__form {
+            max-width: 992px;
+            width: 100%;
+            margin-top: 30px;
             &__title {
                 text-align: center;
             }
@@ -166,6 +181,7 @@
         max-width: 1680px;
         width: 100%;
         &__form {
+            max-width: 1680px;
             &__title {
                 font-size: 48px;
                 line-height: 56px;

react-ts/src/components/Footer/Footer.module.scss

@@ -21,10 +21,17 @@
         &__payments {
             display: flex;
             column-gap: 12px;
+            align-items: center;
+            &__row {
+                border-right: 1px solid $color-grey1;
+                height: 25px;
+            }
             img {
-                &:nth-child(8) {
-                    border-left: 1px solid $color-grey1;
-                    padding-left: 12px;
+                height: 20px;
+                width: 36px;
+                &:nth-child(9) {
+                   width: 54.61px;
+                   height: 34px;
                 }
             }
         }
@@ -48,6 +55,46 @@
     }
 }
 
+@media only screen and (max-width: 1024px) {
+    .footer {
+        &__container {
+            display: flex;
+            align-items: unset;
+            justify-content: unset;
+            flex-direction: column;
+            row-gap: 15px;
+            &__text {
+                display: flex;
+                order: 2;
+            }
+            
+            &__text2 {
+                order: 3;
+            }
+            &__payments {
+                column-gap: 11px;
+                img {
+                    width: 30px;
+                    height: 17px;
+                    &:nth-child(9) {
+                       width: 45px;
+                       height: 28px;
+                    }
+                }
+            }
+        }
+        &__contact {
+            display: flex;
+            flex-direction: column;
+            row-gap: 5px;
+            position: absolute;
+            right: 16px;
+            margin-top: 12px;
+        }
+    }
+}
+
+
 @media only screen and (max-width: 1024px) {
     .footer {
         padding: 15px 16px;
@@ -63,9 +110,6 @@
                 display: flex;
                 order: 2;
             }
-            &__payments{
-                display: none;
-            }
             &__text2 {
                 order: 3;
             }
@@ -94,9 +138,11 @@
                 display: flex;
                 column-gap: 12px;
                 img {
-                    &:nth-child(8) {
-                        border-left: 1px solid $color-grey1;
-                        padding-left: 12px;
+                    width: 70px;
+                    height: 39.27px;
+                    &:nth-child(9) {
+                        width: 106px;
+                        height: 66px;
                     }
                 }
             }

react-ts/src/components/Footer/Footer.tsx

@@ -2,16 +2,16 @@ import styles from './Footer.module.scss';
 
 import ScrollTop from '../ScrollTop/ScrollTop';
 import Whatsap from '../Whatsapp/WhatsApp';
-import FooterCardsMobile from './FooterCardsMobile';
 
-import MasterCard from '../../assets/images/MasterCard.svg';
-import VisaCard from '../../assets/images/VisaCard.svg';
-import AmericaCard from '../../assets/images/AmericaCard.svg';
-import EloCard from '../../assets/images/EloCard.svg';
-import HiperCard from '../../assets/images/HiperCard.svg';
-import PayPal from '../../assets/images/PayPal.svg';
-import Boleto from '../../assets/images/Boleto.svg';
-import VtexPci from '../../assets/images/vtex-pci.svg';
+
+import MasterCard from '../../assets/images/MasterCard.png';
+import VisaCard from '../../assets/images/VisaCard.png';
+import AmericaCard from '../../assets/images/AmericaEx.png';
+import EloCard from '../../assets/images/EloCard.png';
+import HiperCard from '../../assets/images/HiperCard.png';
+import PayPal from '../../assets/images/PayPal.png';
+import Boleto from '../../assets/images/Boleto.png';
+import VtexPci from '../../assets/images/vtex-pci.png';
 import Vtex from '../../assets/images/vtex.svg';
 import M3 from '../../assets/images/M3.svg';
 
@@ -19,20 +19,20 @@ const Footer = () => {
     return (
         <footer className={styles['footer']}>
             <div className={styles['footer__container']}>
-            <FooterCardsMobile/>
             <div className={styles['footer__container__text']}>
                 <p>Lorem ipsum dolor sit amet, consectetur adipiscing
                 elit, sed do eiusmod tempor</p>
             </div>
             <picture className={styles['footer__container__payments']}>
-                <img width={36} src={MasterCard} alt="Badeira Master" />
-                <img width={35} src={VisaCard} alt="Bandeira Visa"/>
-                <img width={35} src={AmericaCard} alt="Badeira America Express" />
-                <img width={37} src={EloCard} alt="Bandeira Elo" />
-                <img width={35} src={HiperCard} alt="Bandeira HiperCard" />
-                <img width={34} src={PayPal} alt="PayPal" />
-                <img width={36} className={styles['footer__container__payments__boleto']} src={Boleto} alt="Boleto" />
-                <img width={54} className={styles['footer__container__payments__vtex']} src={VtexPci} alt="Vtex" />
+                <img src={MasterCard} alt="Badeira Master" />
+                <img src={VisaCard} alt="Bandeira Visa"/>
+                <img src={AmericaCard} alt="Badeira America Express" />
+                <img src={EloCard} alt="Bandeira Elo" />
+                <img src={HiperCard} alt="Bandeira HiperCard" />
+                <img src={PayPal} alt="PayPal" />
+                <img className={styles['footer__container__payments__boleto']} src={Boleto} alt="Boleto" />
+                <div className={styles['footer__container__payments__row']}></div>
+                <img className={styles['footer__container__payments__div__vtex']} src={VtexPci} alt="Vtex" />
             </picture>
             <div className={styles['footer__container__text2']}>
                 <p>Powered by</p>

react-ts/src/components/FooterLinksMobile/FooterLinksAccordion.tsx

@@ -14,7 +14,7 @@ const FooterLinksAccordion = ({ title, content }: Title) => {
     <div className={styles['container']}>
       <div className={styles['container__title']} onClick={() => setIsActive(!isActive)}>
         <h1>{title}</h1>
-        {isActive ? <span>-</span> : <span>+</span>}
+        {isActive ? <span>_</span> : <span>+</span>}
       </div>
       {isActive && <>{content}</>}
     </div>

react-ts/src/components/MenuMobile/Component.module.scss

@@ -2,8 +2,8 @@
 
 .container-components {
     width: 100%;
-    height: 168.5%;
-    position: absolute;
+    height: 100%;
+    position: fixed;
     top: 0;
     left: 0;
     background: rgba(69, 69, 69, 0.7);
@@ -15,6 +15,7 @@
         position: absolute;
         width: 96.48%;
         height: 585px;
+        transition: all .5s ease-in-out;
         &__logon {
             width: 100%;
             display: flex;
@@ -28,7 +29,7 @@
         }
         &__ul {
             width: 100%;
-            height: 100%;
+            height: 548px;
             position: absolute;
             display: flex;
             flex-direction: column;
@@ -49,3 +50,11 @@
         }
     }
 }
+
+@media only screen and (min-width: 375px) {
+    .container-components {
+        &__wrapper {
+            width: 90.4%;
+        }
+    }
+}

react-ts/src/components/MenuMobile/ComponentMobile.tsx

@@ -1,18 +1,24 @@
 
+import { useRef } from 'react';
+
 import styles from './Component.module.scss';
 
 import UserAccount from '../UserAccount/UseAccount';
 import CloseMobile from '../../assets/images/CloseMobile.svg';
-
+import useOnClickOutside from './UseClickOutSide';
 interface MenuComponentProps {
     closeMenu: () => void;
 }
 
 const MenuComponent = ({closeMenu}: MenuComponentProps) => {
-        
+
+    const mobileRef = useRef<HTMLDivElement>(null)
+
+    useOnClickOutside(mobileRef, closeMenu)
+
     return (
         <div className={styles['container-components']}>
-            <div className={styles['container-components__wrapper']}>
+            <div ref={mobileRef} className={styles['container-components__wrapper']}>
                 <div className={styles['container-components__wrapper__logon']}>
                     <UserAccount/>
                     <button onClick={closeMenu} type='button'><img src={CloseMobile} alt="Fecha Menu"/></button>

react-ts/src/components/MenuMobile/MenuMobile.tsx

@@ -19,7 +19,7 @@ const MenuMobile = () => {
     return (
         <div className={styles['container-modal']}>
             <button onClick={openModal}></button>
-            {IsOpen ? <MenuComponent closeMenu={closeModal} /> : <img onClick={openModal} src={OpenMobile} alt="Abre Menu" /> }
+            {IsOpen ? <MenuComponent closeMenu={closeModal} />: <img onClick={openModal} src={OpenMobile} alt="Abre Menu" />}
         </div>
     )
 }

react-ts/src/components/MenuMobile/useClickOutSide.tsx

@@ -0,0 +1,32 @@
+import { useEffect } from 'react';
+import type { RefObject } from 'react';
+
+type AnyEvent = MouseEvent | TouchEvent;
+
+function useOnClickOutside<T extends HTMLElement = HTMLElement>(
+  ref: RefObject<T>,
+  handler: (event: AnyEvent) => void,
+): void {
+  useEffect(() => {
+    const listener = (event: AnyEvent) => {
+      const el = ref?.current;
+
+      // Do nothing if clicking ref's element or descendent elements
+      if (!el || el.contains(event.target as Node)) {
+        return;
+      }
+
+      handler(event);
+    };
+
+    document.addEventListener('mousedown', listener);
+    document.addEventListener('touchstart', listener);
+
+    return () => {
+      document.removeEventListener('mousedown', listener);
+      document.removeEventListener('touchstart', listener);
+    };
+  }, [ref, handler]);
+}
+
+export default useOnClickOutside;

react-ts/src/components/SocialMedia/SocialMedia.module.scss

@@ -19,14 +19,6 @@
     }
 }
 
-@media only screen and (max-width: 1025px ) {
-    .container {
-        a {
-            display: none;
-        }
-    }
-}
-
 @media only screen and (min-width: 2500px) {    
     .container {
         &__picture {

react-ts/src/main.tsx

@@ -5,6 +5,6 @@ import './index.scss'
 
 ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
   <React.StrictMode>
-    <Home />
+    <Home/>
   </React.StrictMode>,
 )