🚀 Landing Page Angular 20

Este projeto é uma Landing Page desenvolvida com Angular 20 e TypeScript, utilizando arquitetura modular, componentes reutilizáveis e estilização global com Sass.
O objetivo é fornecer uma estrutura limpa, escalável e de fácil manutenção para páginas de captura de leads, formulários de newsletter e componentes customizados.

---

📂 Estrutura de Pastas

Abaixo está a organização principal do projeto:

src/
 └── app/
     ├── components/         # Componentes reutilizáveis
     │   └── btn-primary/    # Botão customizado principal
     │
     ├── header/             # Componente de cabeçalho
     ├── home/               # Componente da página inicial
     ├── news-form/          # Formulário de newsletter
     │   ├── news-form.html
     │   ├── news-form.scss
     │   ├── news-form.spec.ts
     │   └── news-form.ts
     │
     ├── interfaces/         # Interfaces TypeScript (tipagens)
     │   └── NewsletterResponse.ts
     │
     ├── services/           # Serviços e lógica de negócio
     │   ├── newsletter.service.ts
     │   └── newsletter.spec.ts
     │
     ├── app.config.ts       # Configurações globais
     ├── app.routes.ts       # Rotas da aplicação
     ├── app.html            # Template principal
     ├── app.scss            # Estilos globais (Sass)
     └── app.ts              # Módulo principal

---

🎨 Estilização Global

• O projeto utiliza Sass (app.scss) para facilitar a manutenção e reaproveitamento de variáveis, mixins e temas.
• Cores globais foram definidas para manter consistência visual entre os componentes.
• Componentes como btn-primary herdam diretamente das variáveis globais.

---

🧩 Componentes

• BtnPrimary → Botão customizado reutilizável.
• Header → Cabeçalho da landing page.
• Home → Seção inicial da página.
• NewsForm → Formulário de newsletter com integração a um serviço.

---

🔗 Serviços

• newsletter.service.ts → Responsável por enviar e processar os dados do formulário de newsletter.
• Testes unitários (.spec.ts) garantem qualidade e confiabilidade das funcionalidades.

---

⚙️ Tecnologias Utilizadas

• Angular 20
• TypeScript
• Sass (SCSS)
• RxJS para reatividade
• Testes unitários com Jasmine/Karma

---

🚀 Como Rodar o Projeto

1. Instale as dependências:

   npm install

2. Rode o servidor de desenvolvimento:

   npm start

3. Acesse no navegador:

   http://localhost:4200/home
   

---

🧪 Rodando Testes

npm test

---

✨ Autor

Projeto desenvolvido por Shigeru 🖥️