---

🐾 Pet Amigo

Uma plataforma social para conectar amantes de animais de estimação, construída com React. O projeto conta com uma interface moderna, responsiva e com temas claro e escuro.

---

✨ Funcionalidades

• Interface Responsiva: Layout adaptável que funciona bem em desktops e se transforma em uma barra de navegação inferior em dispositivos móveis.
• Tema Claro e Escuro: Sistema de temas dinâmico com um switch para alternar entre os modos.
• Persistência de Tema: A preferência de tema do usuário é salva no localStorage do navegador, mantendo a escolha entre sessões e recarregamentos da página.
• Navegação com Rotas: Estrutura de navegação single-page com react-router-dom, incluindo indicador visual para a página ativa.
• Componentização: Código organizado em componentes reutilizáveis, como a barra de navegação.
• Estilização com Variáveis CSS: Arquitetura de estilos flexível que facilita a manutenção e a implementação de temas.

---

🚀 Tecnologias Utilizadas

Este projeto foi construído utilizando as seguintes tecnologias:

• React.js - Biblioteca para construção de interfaces de usuário.
• React Router DOM - Para gerenciamento de rotas do lado do cliente.
• React Icons - Para a utilização de ícones populares como componentes.
• CSS Moderno - Estilização com Flexbox, Grid e Variáveis CSS para um design robusto e manutenível.
• JavaScript (ES6+) - Lógica da aplicação e interatividade.

---

🏁 Como Começar

Para rodar este projeto localmente na sua máquina, siga os passos abaixo.

Pré-requisitos

Você precisa ter o Node.js (que inclui o npm) instalado no seu computador.

Instalação

1. Clone o repositório:

   git clone https://docs.github.com/articles/referencing-and-citing-content

2. Navegue até a pasta do projeto:

   cd pet-amigo 

3. Instale as dependências:

   npm install

   ou, se você usa Yarn:

   yarn install

4. Inicie a aplicação:

   npm run dev

   ou, com Yarn:

   yarn run dev

A aplicação será aberta automaticamente no seu navegador no endereço http://localhost:5173.

---

📁 Estrutura de Pastas

O projeto está organizado da seguinte forma para facilitar a manutenção e escalabilidade:

pet-amigo/
├── public/                     # Arquivos públicos
├── src/
│    ├── assets/                # Imagens, logos e outros arquivos estáticos
│    ├── Components/            # Componentes principais React reutilizáveis
│    │   └── NavBar/
│    │       ├── navbar.jsx
│    │       └── navbar.css
│    ├── context/               # Arquivos de contexto (ex: variables.css)
│    ├── Pages/                 # Componentes que representam as páginas da aplicação
│    │   ├── Home/
│    │   │   ├── components     # Componentes específicos de cada página (Ex: componentes que so irão ser usados na home) 
│    │   │   ├── home.jsx
│    │   │   └── home.css
│    │   └── ... (outras páginas)
│    ├── routes/                # Componente que define as rotas
│    ├── App.js                 # Componente principal que define a estrutura geral da aplicação
│    └── main.js                # Arquivo de entrada que inicializa o React e renderiza o App
└── index.html                  # Ponto de entrada da aplicação

---

📜 Scripts Disponíveis

No diretório do projeto, você pode rodar:

- `npm run dev`: Inicia a aplicação em modo de desenvolvimento.
- `npm test`: Executa os testes em modo interativo.
- `npm run build`: Gera a versão de produção da aplicação na pasta `dist`.

---

✍️ Autores

• [Antonio Enzo Sousa Bezerra] - Desenvolvedor - Link para seu GitHub/LinkedIn
• [Antonio Enzo Sousa Bezerra] - Desenvolvedor - Link para seu GitHub/LinkedIn
• [Antonio Enzo Sousa Bezerra] - Desenvolvedor - Link para seu GitHub/LinkedIn
• [Antonio Enzo Sousa Bezerra] - Desenvolvedor - Link para seu GitHub/LinkedIn
• [Antonio Enzo Sousa Bezerra] - Desenvolvedor - Link para seu GitHub/LinkedIn

---