Criação da seção do curso em destaque (Elementos e estilo)

A nossa página home autenticada será que nem a nossa home não autenticada, dividida por seções. Então iremos começar por essa. Nós podemos excluir o “headerAuth” de “home.tsx”, pois nós iremos colocar o header na seção 1, pois teremos background, que nem tivemos na seção de apresentação da home não autenticada.
Agora nós iremos em “courseService.ts” para criar um método que vai buscar os cursos em destaque.

Nós iremos fazer basicamente a mesma coisa do método de busca dos cursos novos, só que, essa nossa categoria depende de um token sendo passado no header, então nós iremos passar esse token junto ao “get”.

getFeaturedCourses: async () => {
	const token = sessionStorage.getItem("onebitflix-token");

  const res = await api
  .get("/courses/featured", {
   headers: {
	   Authorization: `Bearer ${token}`,
   },
   })
   .catch((error) => {
   console.log(error.response.data.message);

   return error.response;
   });

   return res;
},

Agora, nós iremos em "homeAuth”, iremos criar uma pasta chamada “featuredSection”. E nós vamos agora fazer toda a configuração de arquivo.
```
import styles from "./styles.module.scss";

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

export default FeaturedSection;
```

Agora, nós iremos fazer algo semelhante ao que fizemos com a slideSection na homeNoAuth. Nós podemos copiar o que criamos no newest, importar tudo o que iremos usar e apenas modificar o método que será chamado do “courseService”

import useSWR from "swr";
import courseService from "../../../services/courseService";
import SwrSpinner from "../../common/swrSpinner";

const FeaturedSection = function () {
const { data, error } = useSWR("/featured", courseService.getFeaturedCourses);

if (error) return error;
if (!data) return <SwrSpinner />;

Agora, nós iremos montar a estrutura que queremos, nós iremos antes de mais nada buscar o retorno visual para vermos se estamos realmente puxando o curso que queremos. Então, nós iremos fazer um map do “data” que temos, que nem fizemos com o slide.
1. Nós não podemos esquecer de colocar parênteses depois do array, pois se colocarmos chaves, ele não vai renderizar.
2. Nós iremos colocar o “CourseType” como tipo do nosso curso. Iremos também retornar apenas 1 curso de todo o array, que será o primeiro.
```
<>
	{
   data.data.map((course: CourseType)=>(
	 <>
		<p>{course.name}</p>
	 </>
   ))[0]
	}
</>
```
Agora, nós iremos colocar isso que criamos dentro do index de “homeAuth” e irmos ver no navegador.
Podemos ver que está sendo retornado o título do nosso curso. Agora, podemos ver também que sempre que atualizados a página, o primeiro curso muda. Nós iremos deixar dessa forma, pois nós iremos passear no array que temos de destaque.

Agora, nós podemos fazer a estrutura de fato do que queremos ter para esses cursos.

Nós iremos fazer uma modificação relacionada ao header. Iremos tirar ele de index e colocar ele aqui, pois assim como nós temos na primeira seção de deslogado, teremos aqui, um background junto com as informações. Então precisamos que as informações estejam juntas do header, para termos um background limpo.

<>
	{
	  data.data?.map((course: CourseType) => (
		  <div>
	      <HeaderAuth />
        <Container>
	        <p className={styles.title}>{course.name}</p>
          <p className={styles.description}>{course.synopsis}</p>
          <Link href={`/courses/${course.id}`}>
	          <Button outline color="light" className={styles.button}>
	            ACESSE AGORA!
              <img src="/buttonPlay.svg" alt="buttonImg" className={styles.buttonImg}/>
            </Button>
          </Link>
        </Container>
      </div>
    ))[0]
	}
</>

Podemos agora ver que temos tudo pronto em relação a conexão e a puxar as informações. Podemos até ver que clicando no botão seremos mandados para uma página que ainda não criamos, mas iremos, que será a de cursos.

Agora, nós vamos fazer a manipulação dos elementos via scss para ficar como queremos.

Nós iremos colocar uma altura na descrição para limitar ela. Digamos que a descrição seja muito longa, vai acabar com a estética, então iremos fazer algo semelhante aos cards de slide.
Nós também iremos colocar um width para termos quebra de linha automática. No “homeNoAuth” fizemos isso com “br”, mas aqui não temos o texto em si para fazer, então iremos usar o width.

@import "../../../../styles/colors.module.scss";
.title {
  font-size: 50px;
  font-weight: bold;
  line-height: 50px;
  width: 660px;
}
.description {
  color: $lightGray;
  font-size: 21px;
  width: 660px;
  height: 120px;
  margin-top: 40px;
	margin-bottom: 10px;
  overflow: hidden;
  text-overflow: clip;
}
.button {
  display: flex;
  align-items: center;
  gap: 15px;
  font-weight: bold;
  font-size: 14px;
  padding: 10px 35px;
  &:hover {
    border-color: $lightRed;
    background-color: transparent;
    color: $lightGray;
  }
}
.buttonImg {
  width: 11px;
  margin: 0;
  padding: 0;
}

Nós iremos para finalizar, colocar o background do curso e também dar um padding no container, para não ficar colado no topo e na parte de baixo.

<div
	style={{
   backgroundImage: `linear-gradient(to bottom, #6666661a, #151515), url(${process.env.NEXT_PUBLIC_BASEURL}/${course.thumbnailUrl})`,
   backgroundSize: "cover",
   backgroundPosition: "center",
	 height: "480px",
   }}
>
	<HeaderAuth />
  <Container className="pt

Responsividade da seção

Agora, nós precisamos apenas setar a responsividade dessa nossa seção. Nós podemos ver que ele quebra em “767px”. Provavelmente o culpado é o width que botamos nos textos. Agora, nós podemos botar ele com % ao invés de px.
```
@media (max-width: 767px) {
  .title {
    width: 95%;
    font-size: 30px;
    line-height: 40px;
  }
  .description {
    width: 95%;
    font-size: 18px;
    margin-top: 25px;
    height: 110px;
  }
}
```

Agora, nós conseguimos ver que os textos estão grandes demais a partir dos 410px. Então vamos fazer a última modificação dessa seção, mexendo nos tamanhos.

@media (max-width: 410px) {
  .title {
    font-size: 18px;
    line-height: 25px;
  }
  .description {
    width: 95%;
    font-size: 14px;
    margin-top: 25px;
    height: 110px;
  }
  .button {
    font-size: 12px;
    padding: 10px 20px;
  }
  .buttonImg {
    width: 8px;
  }
}

Nós podemos ver então que a partir daqui nós temos responsividade tranquila até 280px também, completando a seção de destaque.

Commit do git

Com a nossa seção de destaque finalizada, podemos então dar o seu commit.

git add -A

git commit -m "Configuração finalizada da nossa seção de destaque, fazendo conexão com o backend, criando mais um método para o serviço de cursos, criando a sua responsividade - Seção destaque"