Agora, nós vamos fazer a manipulação visual dos nossos slides. Vamos começar pelo “slideCard” na pasta common.

Iremos primeiro manipular a div do slide e depois manipular a imagem, para termos algo mais agradável.

1. A nossa altura vai ser fixa, pois se nós tivermos uma descrição muito longa, nós iremos mostrar um pouco dela durante o hover, aumentando a altura.

@import "../../../../styles/colors.module.scss";
.slide {
  width: 280px;
  height: 300px;
  border: 1px solid $darkGray;
  transition: 0.4s;
  cursor: pointer;

  overflow: hidden;
  text-overflow: clip;

  &:hover {
    border-color: $lightRed;
    height: 320px;
  }
}
.slideImg {
  width: 100%;
  height: 170px;
}

Agora, nós podemos manipular os textos de dentro dos nossos cards

.slideTitle {
  color: white;
  font-weight: bold;
  padding: 8px 16px;
}
.slideDescription {
  font-size: 14px;
  padding: 0px 16px;
  color: #ccc8c8;
}

Agora nós temos os slides prontinhos. Nós podemos ver que o alinhamento não está tão bom, então vamos agora alterar o nosso “slideComponent”, diretamente no nosso tsx

1. Nós precisamos primeiro coloca um tamanho nas opções do slide, para depois aplicar o estilo flex na div.

		<div className="d-flex flex-column align-items-center py-4">
        <Splide
          options={{
            type: "loop",
            perPage: 4,
            perMove: 1,
            width: 1200,
            pagination: false,
          }}
        >
          {course?.map((course) => (
            <SplideSlide key={course.id}>
              <SlideCard courseContent={course} />
            </SplideSlide>
          ))}
        </Splide>
      </div>

Vamos agora no estilo do “slideCard” para adicionar uma pequena margin ao card.

.slide {
  width: 280px;
  height: 300px;
  border: 1px solid $darkGray;
  transition: 0.4s;
  cursor: pointer;
  /* LINHA ADICIONADA */margin-left: 12px;

  overflow: hidden;
  text-overflow: clip;

  &:hover {
    border-color: $lightRed;
    height: 320px;
  }
}

Agora nós iremos no estilo de “slideSection”, nele nós iremos manipular o título e o botão.

@import "../../../../styles/colors.module.scss";
.sectionTitle {
  font-size: 20px;
  font-weight: bold;
}
.slideSectionBtn {
  transition: 0.3s;

  &:hover {
    border-color: $lightRed;
    background-color: transparent;
    color: $lightGray;
  }
}

Agora, para centralizar tudo em tela, usaremos o bootstrap no container que temos.

<>
	<Container fluid className="d-flex flex-column align-items-center py-5">
	  <p className={styles.sectionTitle}>AULAS JÁ DISPONÍVEIS</p>
    <SlideComponent course={newestCourses} />
    <Link href="/register">
	    <Button outline color="light" className={styles.slideSectionBtn}>
	      Se cadastre para acessar!
			</Button>
		</Link>
	</Container>
</>