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

Nossos conteúdos vão ser divididos em seções, então cada seção vai ter um tipo de conteúdo específico. Esse incial será a seção para apresentação o projeto para o usuário.
Vamos começar criando uma pasta dentro de “homeNoAuth”, chamada “presentationSection”. Será aqui onde iremos criar essa nossa seção. Vamos também já criar os arquivos.
```
import styles from "./styles.module.scss";

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

export default PresentationSection;
```
Nessa seção, nós iremos fazer o uso do bootstrap grid, então nós iremos importar o “Row” e o “Col”, junto com o “Container” e “Button” que iremos utilizar novamente
```
import { Container, Row, Col, Button } from "reactstrap";
```
Nós vamos envolver a linha e as colunas com o container. A de cima (que vai ficar na esquerda), vai ficar com os textos dentro, e da debaixo (que vai ficar na direita), vai ficar com a imagem.
1. Vamos colocar também nas colunas breakpoints “md”. Esses breakpoints são os que vimos em bootstrap. Em determinado tamanho de tela, as colunas vão ficar uma abaixo da outra.
```
return (
	<>
		<Container>
			<Row>
				<Col md></Col>
				<Col md></Col>
			</Row>
     </Container>
   </>
);
```

Vamos colocar então todos os textos que vamos usar na coluna da esquerda, já vamos colocar também todas as classes.

return (
	<>
		<Container>
			<Row>
				<Col md>
					<p className={styles.subTitle}>ACESSO ILIMITADO</p>
           <p className={styles.title}>Tenha acesso aos melhores <br /> tutoriais de Programação.</p>
           <p className={styles.description}>Estude de onde estiver a qualquer momento e continue <br />evoluindo como programador.</p>
           <Link href="/register">
							<Button outline className={styles.btnCta}>ACESSE AGORA <img src="/buttonPlay.svg" alt="buttonImg" className={styles.btnImg}/></Button>
            </Link>
					</Col>
					<Col md></Col>
			</Row>
     </Container>
   </>
);

E vamos em seguida colocar a imagem na coluna da direita.

return (
	<>
		<Container>
			<Row>
				<Col md>
					<p className={styles.subTitle}>ACESSO ILIMITADO</p>
           <p className={styles.title}>Tenha acesso aos melhores <br /> tutoriais de Programação.</p>
           <p className={styles.description}>Estude de onde estiver a qualquer momento e continue <br />evoluindo como programador.</p>
           <Link href="/register">
							<Button outline className={styles.btnCta}>ACESSE AGORA <img src="/buttonPlay.svg" alt="buttonImg" className={styles.btnImg}/></Button>
            </Link>
					</Col>
					<Col md>
						<img src="/homeNotAuth/imgPresentation.png" alt="imgIndex" className={styles.img}/>
					</Col>
			</Row>
     </Container>
   </>
);

Agora nós vamos em “index.tsx” de “pages” para importar essa seção para termos o retorno visual.
```
<>
	<main>
		<HeaderNoAuth />
		<PresentationSection />
	</main>
</>
```
Podemos ver que temos retorno visual dos textos e imagem, só que, esta desorganizado. Nós vamos começar a organizar visualmente, começando pela imagem.
1. Nós iremos primeiro colocar a imagem com o tamanho, pois é simples.
```
@import "../../../../styles/colors.module.scss";
.imgSection {
  width: 550px;
}
```

Em seguida, nós iremos manipular todos os textos e também o botão.

.subTitle{
  font-size: 18px;
  font-weight: bold;
  color: $lightRed;
}
.title {
  font-size: 40px;
  font-weight: bold;
  line-height: 50px;
}
.description {
  font-size: 20px;
  color: $lightGray;
  margin: 20px 0px 40px 0px;
}
.btnCta {
  font-weight: bold;
  color: white;

  display: flex;
  align-items: center;
  gap: 25px;

  padding: 14px 30px;
  border: 2px solid $lightRed;

  .btnImg {
    width: 11px;
  }
  &:hover {
    border-color: $darkRed;
    color: $lightGray;
    background-color: transparent;
  }
}

Voltando para o navegador, vemos que está 100% o visual, só que, o container está colado no header, nós vamos então colocar um padding top e bottom no container.
```
<Container className="py-4">
```

Nós vamos por último, criar uma linha para uma seta que teremos. Ela vai ficar centralizada em relação a página e daremos também um padding para o topo.

<Row>
	<Col className="d-flex justify-content-center pt-5">
		<img src="/homeNotAuth/iconArrowDown.svg" alt="arrowDown" className={styles.arrowImg}/>
	</Col>
</Row>

Podemos ver no navegador que ela está sendo retornada, só que falta o tamanho, vamos modificar agora.
```
.arrowImg {
  width: 30px;
}
```
Agora, nós vamos centralizar verticalmente os nossos textos, vamos colocar uma manipulação na coluna dos textos. Nós vamos centralizar usando o “justify-content-center” e vamos colocar um “align-items-start”, pois com isso o nosso conteúdo vai ficar colado no começo da coluna.
```
<Col md className="d-flex flex-column justify-content-center align-items-start">
```

Colocando background

Nós iremos colocar o nosso header e a nossa seção de apresentação com um background de fundo. Para isso, nós iremos envolver o header e a seção com uma div, e essa div terá o background.
```
<>
	<main>
	  <div className={styles.sectionBackground}>
	    <HeaderNoAuth />
      <PresentationSection />
		</div>
	</main>
</>
```

Agora nós vamos em “homeNoAuth.module.scss” na pasta “styles”. Nós vamos colocar um gradiente junto com uma imagem atrás.

.sectionBackground {
  background-image: linear-gradient(to bottom, #8b8b8b1a, #151515),
    url("../public/homeNoAuth/imgBackgroundPresentation.png");
	background-position: center;  
	background-size: cover;
  background-repeat: no-repeat;
}

Responsividade da seção

Nós podemos ver que o nosso texto quebra em “1199px”. Mas acaba voltando ao normal em “991px”, então faremos uma manipulação para o texto ficar organizado nesses px.
```
@media (max-width: 1199px) and (min-width: 991px) {
  .title {
    font-size: 20px;
    line-height: 30px;
  }
  .description {
    font-size: 14px;
  }
}
```
O texto acaba ficando um pouco pequeno, mas é só para essa área específica de tela.