Criação da seção de cards (Elementos e estilo)

Agora nós vamos criar uma seção que vai ter alguns cards apresentando tecnologias que teremos.

Nós vamos criar dentro da pasta “homeNoAuth” uma pasta chamada “cardsSection”.

import styles from "./styles.module.scss";

const CardsSection = function () {
  return <></>;
};

export default CardsSection;

Nós vamos colocar um título e um container, os cards vão fizer nesse container.

<>
	<p className={styles.sectionTitle}>O QUE VOCÊ VAI ACESSAR</p>
	<Container></Container>
</>

Agora vamos criar um card. Por enquanto será apenas 1, pois depois de pronto iremos copiar e colar, mudando apenas a classe para indentificar o card e colocar o background.

<>
	<p className={styles.sectionTitle}>O QUE VOCÊ VAI ACESSAR</p>
	<Container>
		<div className={styles.card1}>
			<p className={styles.cardTitle}>FRONT-END</p>
			<p className={styles.cardDescription}>
				O Onebitcode Black é o lugar para você evoluir. Para isso, você vai
				ter acesso às práticas avançadas de programação, atualizações de
				tecnologias e todo o suporte técnico necessário para ser um sênior na programação.
			</p>
		</div>
	</Container>
</>

Agora nós iremos importar isso no nosso index, para termos o retorno visual

<>
	<main>
		<div className={styles.sectionBackground}>
			<HeaderNoAuth />
			<PresentationSection />
		</div>
		<CardsSection />
	</main>
</>

Agora que temos retorno visual, nós iremos fazer a manipulação desse card que temos, para depois copiar e colar, alterando apenas título e número dos cards

Nós vamos criar uma classe única, que vai conter todas as alterações visuais dos cards, para depois darmos um extend nos cards individuais, altando o background.

@import "../../../../styles/colors.module.scss";
.sectionTitle {
  font-size: 20px;
  font-weight: bold;
  text-align: center;
  padding: 50px 0px 30px 0px;
}
.card {
  width: 340px;
  height: 280px;
  border-radius: 8px;
  padding: 14px;
  background-size: cover;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  transition: 0.3s;
  .cardTitle {
    transition: 0.3s;
    font-weight: bold;
    margin-bottom: 8px;
  }
  .cardDescription {
    font-size: 15px;
    color: $lightGray;
  }
}
.card1 {
  @extend .card;
  background-image: url("../../../../public/homeNoAuth/img-frontend.png");
}

Nós vamos agora colocar uma pequena animação nos cards, nós iremos fazer com que o card tenha um aumento no seu tamanho e também no seu título

.card {
  width: 340px;
  height: 280px;
  border-radius: 8px;
  padding: 14px;
  background-size: cover;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  transition: 0.3s;
  .cardTitle {
    transition: 0.3s;
    font-weight: bold;
    margin-bottom: 8px;
  }
  .cardDescription {
    font-size: 15px;
    color: $lightGray;
  }
	&:hover {
    transform: scale(1.03);
    .cardTitle {
      font-size: 18px;
      margin-left: 8px;
    }
  }
}

Agora nós podemos copiar e colar, mudando apenas o título do nosso card e o número do card que está no “className”

<Container>
	<div className={styles.card1}>
		<p className={styles.cardTitle}>FRONT-END</p>
		<p className={styles.cardDescription}>
			O Onebitcode Black é o lugar para você evoluir. Para isso, você vai
			ter acesso às práticas avançadas de programação, atualizações de
			tecnologias e todo o suporte técnico necessário para ser um sênior na programação.
		</p>
	</div>
	<div className={styles.card2}>
		<p className={styles.cardTitle}>BACK-END</p>
		<p className={styles.cardDescription}>
			O Onebitcode Black é o lugar para você evoluir. Para isso, você vai
			ter acesso às práticas avançadas de programação, atualizações de
			tecnologias e todo o suporte técnico necessário para ser um sênior na programação.
		</p>
	</div>
	<div className={styles.card3}>
		<p className={styles.cardTitle}>MOBILE</p>
		<p className={styles.cardDescription}>
			O Onebitcode Black é o lugar para você evoluir. Para isso, você vai
			ter acesso às práticas avançadas de programação, atualizações de
			tecnologias e todo o suporte técnico necessário para ser um sênior na programação.
		</p>
	</div>
	<div className={styles.card4}>
		<p className={styles.cardTitle}>GIT E GITHUB</p>
		<p className={styles.cardDescription}>
			O Onebitcode Black é o lugar para você evoluir. Para isso, você vai
			ter acesso às práticas avançadas de programação, atualizações de
			tecnologias e todo o suporte técnico necessário para ser um sênior na programação.
		</p>
	</div>
	<div className={styles.card5}>
		<p className={styles.cardTitle}>PROJETOS</p>
		<p className={styles.cardDescription}>
			O Onebitcode Black é o lugar para você evoluir. Para isso, você vai
			ter acesso às práticas avançadas de programação, atualizações de
			tecnologias e todo o suporte técnico necessário para ser um sênior na programação.
		</p>
	</div>
	<div className={styles.card6}>
		<p className={styles.cardTitle}>CARREIRA</p>
		<p className={styles.cardDescription}>
			O Onebitcode Black é o lugar para você evoluir. Para isso, você vai
			ter acesso às práticas avançadas de programação, atualizações de
			tecnologias e todo o suporte técnico necessário para ser um sênior na programação.
		</p>
	</div>

Agora precisamos apenas colocar todos os backgrounds nesses cards.

.card1 {
  @extend .card;
  background-image: url("../../../../public/homeNoAuth/img-frontend.png");
}
.card2 {
  @extend .card;
  background-image: url("../../../../public/homeNoAuth/img-backend.png");
}
.card3 {
  @extend .card;
  background-image: url("../../../../public/homeNoAuth/img-mobile.png");
}
.card4 {
  @extend .card;
  background-image: url("../../../../public/homeNoAuth/img-git.png");
}
.card5 {
  @extend .card;
  background-image: url("../../../../public/homeNoAuth/img-projetos.png");
}
.card6 {
  @extend .card;
  background-image: url("../../../../public/homeNoAuth/img-carreira.png");
}

Agora está tudo certo, só que eles estão todos na vertical, vamos então colocar um display flex no container, para que eles fiquem em linha e também fiquem centralizados. Vamos colocar um padding bottom também para termos espaço entre a seção de baixo.
```
<Container className="d-flex flex-wrap justify-content-center gap-4 pb-5">
```

Responsividade da seção

Bom, nesse caso nós não precisamos de uma responsividade, o próprio display flex fez isso para nós. Podemos ver que a medida que a tela diminui, os blocos vão sendo divididos em mais linhas. Então ele fica responsivo tranquilamente até os 280px que queremos.

Commit do git

Com a nossa seção de cards finalizada, 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 - Seção de cards, homeNoAuth"

Conclusão

O que foi feito/visto nessa aula:

Criação dos cards, com diferentes títulos
Colocação de imagens de background em cada um
Manipulação visual de toda a nossa seção e também de todos os cards