Criação do footer (Elementos e estilo)

1. Vamos na pasta “common”, nela criaremos uma pasta chamada “footer”, onde teremos “.scss”.

   import styles from "./styles.module.scss";
   
   const Footer = function () {
     return <></>;
   };
   
   export default Footer
   

2. Nós iremos fazer o footer dentro de um container, onde teremos uma imagem e um link. Nós não iremos usar o link do next, pois nós iremos usar ele apenas para navegação dentro do projeto, para fora do projeto usamos o link normal.

   <>
   	<Container className={styles.footer}>
   	  <img src="/logoOnebitcode.svg" alt="logoFooter" className={styles.footerLogo} />
       <a href="<https://onebitcode.com>" target={"blank"} className={styles.footerLink}>ONEBITCODE.COM</a>
     </Container>
   </>
   

3. Agora nós vamos colocar o footer lá no nosso “homeNoAuth”

   
   return (
   	<>
   	  <main>
   	    <div className={styles.sectionBackground}>
   	      <HeaderNoAuth />
           <PresentationSection />
   			</div>
         <CardsSection />
         <SlideSection />
         <Footer />
   		</main>
   	</>
   );
   

4. Agora vemos que a imagem está estranha, vamos então fazer a manipulação visual.

   @import "../../../../styles/colors.module.scss";
   .footer {
     display: flex;
     justify-content: space-between;
     align-items: center;
     flex-wrap: wrap;
     padding: 26px 0px;
   }
   .footerLogo {
     width: 220px;
   }
   

5. Agora já está organizado, vamos agora fazer a mudança do link.

   .footerLink {
     text-decoration: none;
     color: $mediumGray;
     transition: 0.3s;
   
     &:hover {
       color: $lightGray;
     }
   }
   

Responsividade da seção

1. O nosso footer é muito similar ao nosso header, ele não quebra de fato, ele vai ficar um pouco estranho quando ficar um abaixo do outro.

2. Podemos ver no inspecionar que isso acontece em “353px”, só que em “575px” ele fica colado nas paredes. Então vamos modificar primeiro isso, depois modificar quando ele quebra. Lembrando que por nós darmos padding, o ponto de “353px” vai aumentar.

   @media (max-width: 575px) {
     .footer {
       padding: 26px 20px;
       gap: 20px;
     }
   }
   

3. Agora, nós podemos ver que ele tem uma segunda quebra em “413px”.

   @media (max-width: 413px) {
     .footer {
       justify-content: center;
     }
   }
   

4. E com isso podemos ver que até 280px ele vai perfeitamente, ficando 100% responsivo.

Commit do git

1. Com o nosso footer finalizado, podemos então dar o seu commit.

   git add -A
   

   git commit -m "Criação dos elementos, do visual e também da sua responsividade - Footer, comum"
   

Conclusão

O que foi feito/visto nessa aula:

1. Criação dos elementos
2. Criação do visual
3. Responsividade do footer