Tours-SA

Landing page moderna para empresa de transfers, tours e passeios turísticos, construída com Angular 21 seguindo as melhores práticas modernas do framework.

Preview

Desktop

Mobile

Funcionalidades

• Hero Section com imagem de fundo e call-to-action "Solicitar Cotação"
• Atrações com cards descritivos dos serviços (Transfers e Passeios)
• Sobre Nós com informações da empresa e imagem complementar
• Depoimentos com carrossel automático (Swiper) e navegação por dots
• Formulário de Contato reativo com validação e máscara de telefone
• Dialog de Feedback com alertas visuais de sucesso/erro
• Scroll Suave entre seções com animação customizada (easeInOutQuart)
• Botão "Voltar ao Topo" visível no mobile ao rolar a página
• Layout Responsivo adaptado para desktop e mobile
• Lazy Loading com carregamento sob demanda das rotas

Padrões Angular 21

• Standalone components (sem NgModules)
• Signals (signal, input, output)
• inject() em vez de constructor injection
• @if control flow nativo
• Lazy loading em todas as rotas via loadComponent
• Reactive Forms tipados com nonNullable: true
• afterNextRender() para lógica pós-renderização
• Separação Core / Features / Shared

Estrutura do Projeto

database/
└── database.json                  # Banco de dados mock (JSON Server)
src/
├── assets/
│   ├── icon/                      # Ícones estáticos
│   └── img/                       # Imagens (logo, faces, previews)
└── environments/
    ├── environment.ts             # Config de desenvolvimento
    └── environment.prod.ts        # Config de produção
    app/
    ├── core/                      # Módulos estruturais da aplicação
    │   ├── components/
    │   │   ├── navbar/            # Barra de navegação fixa
    │   │   └── footer/            # Rodapé com links e redes sociais
    │   └── models/
    │       └── contact.model.ts   # Interface do contato
    ├── features/                  # Funcionalidades/páginas
    │   ├── home/                  # Página principal (hero, atrações, sobre, depoimentos)
    │   ├── contact/               # Formulário de contato
    │   └── content-navigation/    # Wrapper com router-outlet
    └── shared/                    # Componentes e serviços reutilizáveis
        ├── components/
        │   ├── avatar/            # Componente de imagem/avatar
        │   ├── card/              # Card de serviço
        │   ├── dialog-alert/      # Dialog de feedback (sucesso/erro)
        │   └── swiper/            # Slide de depoimento
        └── services/
            ├── contact.service.ts       # Envio de contatos (HTTP)
            ├── dialog-alert.service.ts  # Gerenciamento de dialogs
            └── scroll-to.service.ts     # Scroll suave entre seções

Como rodar o projeto

Pré-requisitos

• Node.js 18+
• npm 9+

Instalação

npm install

Rodar o servidor mock (API local)

npm run database

Inicia o servidor em http://localhost:3000

Rodar a aplicação Angular

npm start

Abre em http://localhost:4200

Build de produção

npm run build