desafio 1 - ajustes nos links do footer

desafio_01/assets/scss/layout/_footer.scss

@@ -29,7 +29,7 @@
             }
 
             &:hover {
-                color: #674ee2;
+                color: #f56f54;
             }
         }
     }

desafio_04/src/App.css

@@ -28,9 +28,6 @@ html {
     margin: 0 auto;
 }
 
-.containerImageHero {
-    display: none;
-}
 
 @media (width >= 1450px) {
     body {
@@ -47,13 +44,4 @@ html {
         align-items: center;
         height: 100vh;
     }
-
-    .containerImageHero {
-        display: block;
-
-        img {
-            width: 50rem;
-
-        }
-    }
 }

desafio_04/src/App.jsx

@@ -1,16 +1,15 @@
 import './App.css';
+import ContainerImageHero from './Components/ContainerImageHero/ContainerImageHero';
 import Login from './Components/ContainerLogin/ContainerLogin';
-import imageHero from './assets/hero.svg';
+import Footer from './Components/Footer/Footer';
 
 function App() {
 
     return (
         <>
-            <div className='containerImageHero'>
-                <img src={imageHero} alt="" />
-            </div>
-
+            <ContainerImageHero />
             <Login />
+            <Footer />
         </>
     )
 }

desafio_04/src/Components/ContainerImageHero/ContainerImageHero.css

@@ -0,0 +1,14 @@
+.containerImageHero {
+    display: none;
+}
+
+@media (width >= 1450px) {
+    .containerImageHero {
+        display: block;
+
+        img {
+            width: 50rem;
+
+        }
+    }
+}

desafio_04/src/Components/ContainerImageHero/ContainerImageHero.jsx

@@ -0,0 +1,12 @@
+import './ContainerImageHero.css'
+import imageHero from '../../assets/hero.svg';
+
+const ContainerImageHero = () => {
+    return (
+        <div className='containerImageHero'>
+            <img src={imageHero} alt="" />
+        </div>
+    )
+}
+
+export default ContainerImageHero

desafio_04/src/Components/ContainerLogin/ContainerLogin.css

@@ -2,13 +2,13 @@
 
 .containerLogin {
     width: 90%;
-    margin: 10rem auto;
+    margin: 10rem auto 0;
     max-width: 40rem;
 }
 
 @media (width >= 768px) {
     .containerLogin {
-        margin: 7rem auto 4rem;
+        margin: 7rem auto 0;
     }
 }
 

desafio_04/src/Components/ContainerLogin/ContainerLogin.jsx

@@ -5,7 +5,6 @@ import Button from '../Button/Button';
 
 const Login = () => {
 
-
     return (
         <div className='containerLogin'>
             <span className='welcomeTitle'>Bem-vindo de volta</span>

desafio_04/src/Components/Footer/Footer.css

@@ -0,0 +1,19 @@
+@import '../../App.css';
+
+.footer {
+    margin-top: 10rem;
+    padding: 5rem 3rem;
+    text-align: center;
+    background-color: var(--gray-30);
+
+    .footer-paragraph {
+        font-size: 1.4rem;
+        line-height: 2.4rem;
+        font-weight: 600;
+    }
+
+    a {
+        color: var(--primary-color);
+        transition: all .3s;
+    }
+}

desafio_04/src/Components/Footer/Footer.jsx

@@ -0,0 +1,15 @@
+import './Footer.css'
+
+const Footer = () => {
+    return (
+        <footer className='footer'>
+            <p className="footer-paragraph">
+                Desafio da comunidade
+                <a href="https://github.com/iuricode/desafios-frontend"> CodeLab</a>. <br /> Desenvolvido por
+                <a href="https://github.com/gabrielalencs"> Gabriel de Alencar</a>.
+            </p>
+        </footer>
+    )
+}
+
+export default Footer