[Projeto] Posição das Imagens (Itens do Cardápio ) no navegador

Olá, tudo bem?

Poderia me enviar o código do arquivo index.tsx referente a página Inicio e do arquivo Inicio.module.scss?

Assim eu posso dar uma olhada nas classes e nos estilos do seu projeto.

segue o reposytorio https://github.com/JunioFigueiredo/REACT_AULA_CARDAPIO

Codigo do index do Inicio

import cardapio from 'data/cardapio.json';
import styles from '../Inicio/Inicio.module.scss';

export default function Inicio() {
  let pratosRecomendados = [...cardapio];
  pratosRecomendados = pratosRecomendados.sort(() => 0.5 - Math.random()).splice(0,3);

  return (
    <section>
        <h3 className={styles.titulo}>
            Recomendações da cozinha
        </h3>
        <div className={styles.recomenddos}>
            {pratosRecomendados.map(item => (
                <div key={item.id} className={styles.recomendado}>
                    <div className={styles.recomendado__imagem}>
                        <img src={item.photo} alt={item.title} />
                    </div>
                    <button className={styles.recomendado__botao}>
                        Ver mais
                    </button>
                </div>
            ))} 
        </div>
    </section>
);
}

Codigo do Inicio.module.scss

@import '../../styles/variaveis';

.titulo {
  color: $dark;
  font-size: 3rem;
  margin-bottom: 30px;
}

.recomendados {
  border-radius: 2px;
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  justify-content: space-between;
}

.recomendado {
  &__imagem {
    width: 300px;
    margin-bottom: 10px;
    img {
      border-radius: 8px;
      width: 100%;
    }
  }
  &__botao {
    background-color: $red;
    border: none;
    border-radius: 5px;
    color: white;
    cursor: pointer;
    font-size: 1.2rem;
    font-weight: bold;
    padding: 10px 0;
    transition: .2s ease;
    width: 100%;
    &:hover {
      background-color: $red-dark;
    }
  }
}

.nossaCasa {
  margin-bottom: 100px;
  position: relative;
  width: 100%;
  img {
    border-radius: 5px;
    width: 100%;
  }
  &__endereco {
    align-items: center;
    background-color: $dark;
    border-radius: 5px;
    bottom: -45px;
    color: white;
    display: flex;
    flex-direction: column;
    font-weight: bold;
    height: 100px;
    justify-content: center;
    position: absolute;
    margin: 0 auto;
    left: 0;
    right: 0;
    width: 200px;
  }
}

Muito Grato pela Ajuda

Oi, tudo bem?. Parece tem um erro de digitação na chamada da classe recomendados.

<div className={styles.recomenddos}>	

Corrigindo, o projeto deve ficar igual ao do instrutor, o código deve ficar dessa forma:

<div className={styles.recomendados}>

Se ainda houver problemas, me avise. Ficarei no aguardo :)

kkkkkk... por mais que vc olhe... não enxerga!!! Muito obrigado... por essa

É possivel tirar mais uma dúvida????

os meus importes tive que fazer dessa maneira, caso contrário não funcionária

import styles from '../Inicio/Inicio.module.scss';

@import '../../styles/variaveis';

O do curso esta assim:

import styles from './Inicio.module.scss';
@import 'styles/variaveis';

Sabe informar o porquê???

Oi, tudo bem?

Sobre as suas dúvidas, vamos por partes:

1. Importação @import 'styles/variaveis';: No projeto do curso, a configuração de baseUrl no tsconfig.json define que a pasta src é o ponto de partida para as importações. Assim, você pode importar arquivos diretamente a partir dessa pasta, sem precisar navegar pelos diretórios. Como a pasta styles está dentro de src, o instrutor consegue fazer a importação com @import 'styles/variaveis';, em vez de usar caminhos relativos mais longos como @import '../../styles/variaveis';. Isso deixa o código mais limpo e organizado.

2. Importação do arquivo Inicio.module.scss: No seu código, parece que o arquivo Inicio.module.scss está em uma pasta diferente do componente que está importando. Com base no caminho de importação que você enviou, o arquivo .scss está dentro da pasta Inicio, enquanto o componente que está fazendo a importação (AlgumComponente.tsx, no exemplo abaixo) está em uma outra pasta. Isso explicaria o caminho relativo que você usou: ../Inicio/Inicio.module.scss.

Imagino que estrutura de diretórios seja mais ou menos assim:

/src
│
├── /outrapasta
│   └── AlgumComponente.tsx  (arquivo onde a importação está sendo feita)
│
├── /Inicio
│   └── Inicio.module.scss (arquivo de estilos que está sendo importado)

Mas é curioso que não esteja funcionando com você, essa configuração já está no projeto inicial.

Mas imagino que isso não atrapalhe o andamento do curso.

Grato pela Ajuda!!!!