O que é
Quebre o Ciclo é um projeto web desenvolvido com React e Vite com foco em conscientização e orientação sobre violência doméstica e familiar contra a mulher.
A proposta do projeto é transformar informações importantes sobre violência, direitos e formas de buscar ajuda em uma experiência web simples, organizada e acessível.
Em vez de funcionar apenas como uma página institucional, o projeto foi estruturado em diferentes áreas de conteúdo, permitindo abordar o tema de maneira progressiva: identificação da violência, direitos, canais de denúncia, apoio e orientações após uma denúncia.
Objetivo
O principal objetivo do projeto é utilizar a tecnologia como ferramenta de informação e conscientização.
A aplicação apresenta conteúdos relacionados à violência doméstica, incluindo:
- definição e contextualização da violência doméstica;
- principais tipos de violência;
- informações sobre a Lei Maria da Penha;
- canais de apoio e denúncia;
- orientações relacionadas ao período após uma denúncia;
- informações sobre direitos e formas de buscar ajuda.
A página inicial reforça a mensagem de que a violência nunca é culpa da vítima e apresenta caminhos para que a pessoa procure apoio quando estiver preparada.
Estrutura de conteúdo
O projeto possui páginas organizadas por temas específicos, incluindo:
- início;
- apoio e direitos;
- canais de denúncia;
- orientações após a denúncia.
Essa divisão permite que cada assunto tenha seu próprio espaço, evitando concentrar todas as informações em uma única página.
Página inicial
A página inicial foi construída como uma sequência de seções informativas.
Entre os elementos implementados estão:
- apresentação principal do projeto;
- introdução sobre violência doméstica;
- representação visual do ciclo da violência;
- seção de estatísticas;
- apresentação dos principais tipos de violência;
- canais de apoio;
- destaque para a Lei Maria da Penha;
- mensagem final de acolhimento e orientação.
A estrutura utiliza componentes React e organização de dados separada da apresentação.
Tipos de violência
Uma das partes centrais da aplicação é a apresentação dos diferentes tipos de violência.
O projeto aborda:
- violência física;
- violência psicológica;
- violência sexual;
- violência patrimonial;
- violência moral.
Cada categoria apresenta exemplos para ajudar o visitante a reconhecer diferentes formas de violência que podem ocorrer dentro de relacionamentos e ambientes familiares.
A apresentação utiliza um slider responsivo, permitindo adaptar a quantidade de cards exibidos conforme o tamanho da tela.
Canais de apoio
O projeto também apresenta uma área específica para facilitar o acesso a serviços de apoio.
Entre os canais apresentados na aplicação estão:
- 190, para situações de emergência;
- 180, relacionado à Central da Mulher;
- informações sobre apoio psicológico;
- informações relacionadas aos direitos da mulher.
Os números de emergência e atendimento são apresentados como links de telefone, facilitando o acesso principalmente em dispositivos móveis.
Lei Maria da Penha
A aplicação possui uma seção dedicada à Lei nº 11.340/2006 — Lei Maria da Penha.
O objetivo dessa seção é contextualizar a legislação e destacar que existem mecanismos legais destinados à prevenção e ao combate da violência doméstica e familiar contra a mulher.
A aplicação direciona o visitante para informações adicionais por meio da própria estrutura de navegação do projeto.
Componentes e organização
O projeto utiliza React para estruturar a interface em componentes reutilizáveis.
A organização do código separa páginas, componentes, estilos e dados.
A página inicial, por exemplo, mantém os conteúdos utilizados nas seções em um arquivo de dados separado, enquanto o componente fica responsável pela apresentação dessas informações.
Essa abordagem facilita a manutenção e permite alterar conteúdos sem precisar concentrar todas as informações diretamente na estrutura visual do componente.
Interface
A interface utiliza:
- Bootstrap;
- React Bootstrap;
- CSS próprio;
- componentes responsivos;
- cards para organização de conteúdo;
- slider com Swiper.
O projeto também utiliza breakpoints diferentes para adaptar a quantidade de elementos apresentados no slider conforme o dispositivo.
Em telas menores, por exemplo, o conteúdo passa a ser apresentado em uma quantidade reduzida de cards por vez, melhorando a experiência de navegação.
Tecnologias
As principais tecnologias utilizadas no projeto são:
- React;
- Vite;
- JavaScript;
- React Router;
- Bootstrap;
- React Bootstrap;
- Swiper;
- Chart.js;
- Recharts;
- HTML;
- CSS.
O projeto também possui configuração de ESLint para auxiliar na qualidade e padronização do código.
O que estou estudando
O Quebre o Ciclo representa principalmente um estudo de:
- React;
- componentização;
- organização de páginas;
- roteamento;
- gerenciamento de conteúdo;
- interfaces responsivas;
- Bootstrap;
- componentes reutilizáveis;
- sliders e componentes interativos;
- organização de aplicações front-end.
Além da parte técnica, o projeto também explora como estruturar uma interface para apresentar informação sensível e importante de maneira clara e acolhedora.
Aprendizados
Um dos principais aprendizados do projeto foi perceber que uma aplicação informativa precisa considerar não apenas a implementação técnica, mas também a forma como o conteúdo é apresentado.
Nesse caso, a organização das informações é parte importante da própria experiência do usuário.
A separação entre páginas, componentes, dados e estilos também ajudou a experimentar uma estrutura mais organizada para aplicações React.
Evolução futura
O projeto pode continuar evoluindo principalmente em três áreas:
Conteúdo
- revisão contínua das informações;
- melhoria das referências utilizadas;
- expansão das orientações;
- atualização dos canais oficiais de atendimento.
Experiência do usuário
- melhoria da acessibilidade;
- revisão da navegação;
- aprimoramento da experiência mobile;
- melhoria dos estados de interação;
- otimização da hierarquia visual.
Arquitetura
- maior componentização;
- organização mais modular;
- melhoria do gerenciamento de dados;
- testes automatizados;
- revisão da estrutura de roteamento.
Esses pontos representam possibilidades futuras e não devem ser considerados funcionalidades já implementadas.
Código
O código-fonte do projeto está disponível no GitHub: