Feature/home component
Mudanças
-
Home finalizada (
/src/routes/(index)/index.tsx
) com títulos, subtítulo, lista com bullets e CTAs. -
Carousel finalizado (
/src/components/carousel.tsx
). -
SVGs organizados: criada a pasta
components/ui/svgs/
com:-
svgs/arrow.tsx
(setas do carousel) -
svgs/line.tsx
(underline do título)
-
-
Imagem da home adicionada:
public/home-page-image.png
. -
Botões:
- Ajuste no DefaultButton: troquei largura fixa
w-22
porw-fit
para o botão acomodar o conteúdo corretamente. - Criado GreyButton para o CTA “Fazer reserva” quando necessário:
components/buttons/greyButton.tsx
.
- Ajuste no DefaultButton: troquei largura fixa
-
Estilos globais (
globals.css
):- Corrigida vírgula faltando na
font-family
(Montserrat passou a ser reconhecida). - Ajuste de cores dos cards da Home conforme layout.
- Corrigida vírgula faltando na
Observação de fluxo: a branch
feature/home-component
foi criada a partir defeature/carousel-component
para viabilizar a implementação da Home dependendo do Carousel.
Como testar
Passos
-
npm start
-
Acessar a rota
/
(Home). -
Verificar:
- Títulos com text-shadow e
leading
ajustado. - Lista com bullets (Acomodações, Laboratórios, Trilhas, Eventos).
- CTAs “Reservar” (primário) e “Venha nos conhecer!” (secundário) renderizando com largura fit ao conteúdo.
- Carousel mostrando apenas 2 imagens por vez e trocando o destaque corretamente.
- Fonte Montserrat aplicada no
body
(conferir no DevTools → Computed →font-family
).
- Títulos com text-shadow e
Acceptance Criteria
Task #43 – Componente Carousel
- Exibir apenas 2 fotos por vez no carousel.
- Foto selecionada em destaque.
- Navegação pelas setas atualiza corretamente o destaque.
Task #42 – Página Início
- Layout igual ao Figma (hierarquia de títulos, cores, espaçamentos).
-
Títulos com sombra e
line-height
ajustado para “fit” visual. - CTAs posicionados e estilizados (primário/verde; secundário/bege).
- Lista de tópicos com bullets conforme design.
Screenshots da tela/componente desenvolvido
Observações
- Troca de
w-22
→w-fit
no DefaultButton evita overflow do texto em badges e deixa o componente responsivo ao conteúdo - GreyButton foi criado porque não havia um botão pronto exatamente para o CTA “Fazer reserva”.
- Ajuste em
globals.css
corrigiu afont-family
e garantiu a aplicação de Montserrat no projeto.
🔄 Sincronizado do GitHub
-
🔗 PR original: https://github.com/AGES-Pro-Mata/frontend/pull/65 -
👤 Autor: @Henrique-Schultz -
📅 Criado: 2025-09-07T20:10:33Z -
🔢 ID GitHub: #65 -
🌿 Branches:feature/home-component
→dev
-
📊 Estado: open -
🔀 Mergeable: unknown
Sincronizado automaticamente do GitHub para GitLab AGES