Fundamentos da Fé - Comunidade

Um site educacional moderno e interativo desenvolvido com React e TypeScript para estudos bíblicos e fundamentos da fé cristã. O projeto oferece uma experiência completa de aprendizado com módulos estruturados, material de apoio em PDF e acompanhamento de progresso.

🎯 Sobre o Projeto

O Fundamentos da Fé - Comunidade é uma plataforma educacional que visa facilitar o ensino e aprendizado dos fundamentos da fé cristã através de uma interface moderna e intuitiva. O site oferece uma experiência de estudo estruturada com módulos didáticos que abordam temas essenciais da doutrina cristã.

✨ Funcionalidades

• 📚 Módulos Educacionais: Lições estruturadas sobre fundamentos da fé cristã
• 📄 Geração de PDF: Download de material de apoio em formato PDF profissional
• 🎯 Acompanhamento de Progresso: Sistema de marcação de módulos concluídos
• 📱 Design Responsivo: Interface adaptável para desktop e dispositivos móveis
• 🎨 Interface Moderna: Design limpo e profissional com Tailwind CSS
• ⚡ Performance Otimizada: Carregamento rápido com Vite e componentes otimizados
• 🔄 Navegação Intuitiva: Sistema de navegação entre páginas e módulos
• 💾 Persistência Local: Progresso salvo automaticamente no localStorage

🛠 Tecnologias Utilizadas

Frontend

• React 18 - Biblioteca principal para interface de usuário
• TypeScript - Tipagem estática para JavaScript
• Vite - Build tool moderna e rápida
• Tailwind CSS - Framework CSS utilitário

UI Components

• Radix UI - Componentes acessíveis e customizáveis
• Lucide React - Ícones modernos e consistentes
• shadcn/ui - Sistema de componentes baseado em Radix UI

Bibliotecas Adicionais

• jsPDF - Geração de documentos PDF
• clsx - Utilitário para classes CSS condicionais
• react-hook-form - Gerenciamento de formulários
• next-themes - Suporte a temas

📁 Estrutura do Projeto

src/
├── components/           # Componentes React
│   ├── ui/              # Componentes de interface base
│   ├── AboutPage.tsx    # Página sobre o projeto
│   ├── HomePage.tsx     # Página inicial
│   ├── LessonPage.tsx   # Página de lições
│   ├── ModulesPage.tsx  # Página de módulos
│   └── ...
├── types/               # Definições de tipos TypeScript
├── styles/             # Arquivos de estilo globais
└── guidelines/         # Diretrizes do projeto

🚀 Como Executar

Pré-requisitos

• Node.js (versão 16 ou superior)
• npm ou yarn

Instalação e Execução

1. Clone o repositório

   git clone https://github.com/pedroallas/fundamentosdafe-comunidade.git
   cd fundamentosdafe-comunidade

2. Instale as dependências

   npm install

3. Execute o projeto em modo de desenvolvimento

   npm run dev

4. Acesse no navegador

   http://localhost:5173
   

Build para Produção

npm run build

� Deploy na Netlify

Deploy Automático via Git

1. Conecte seu repositório

   • Acesse Netlify e faça login
   • Clique em "New site from Git"
   • Conecte sua conta do GitHub/GitLab
   • Selecione o repositório fundamentosdafe-comunidade

2. Configurações de Build

   • Build command: npm run build
   • Publish directory: build
   • Node version: 18 (recomendado)

3. Deploy Manual

   # Build local
   npm run build
   
   # Instalar Netlify CLI (opcional)
   npm install -g netlify-cli
   
   # Deploy manual
   netlify deploy --prod --dir=build

Variáveis de Ambiente (se necessário)

No painel da Netlify, adicione as variáveis em Site settings > Environment variables:

NODE_VERSION=18
NPM_VERSION=8

Configurações Importantes

O projeto já inclui:

• ✅ netlify.toml - Configurações de build e headers
• ✅ public/_redirects - Redirecionamentos para SPA
• ✅ Meta tags SEO otimizadas
• ✅ Headers de segurança e cache

URL de exemplo: https://fundamentosdafe.netlify.app

�📖 Módulos Disponíveis

O projeto inclui diversos módulos educacionais, incluindo:

1. A Inspiração da Bíblia - Compreenda a autoridade e inspiração das Escrituras
2. O Deus Trino - Explore o mistério da Trindade
3. Jesus Cristo, o Salvador - Descubra a pessoa e obra de Cristo
4. E muitos outros...

Cada módulo inclui:

• Conteúdo didático estruturado
• Versículos-chave relacionados
• Material de apoio para download em PDF
• Exercícios e reflexões

🎨 Design System

O projeto utiliza um design system consistente baseado em:

• Cores: Paleta harmoniosa com tons de azul (#2C5282) como cor principal
• Tipografia: Hierarquia clara com diferentes tamanhos de fonte
• Componentes: Biblioteca reutilizável de componentes UI
• Responsividade: Layout adaptativo para diferentes tamanhos de tela

🤝 Contribuindo

Contribuições são bem-vindas! Para contribuir:

1. Faça um fork do projeto
2. Crie uma branch para sua feature (git checkout -b feature/AmazingFeature)
3. Commit suas mudanças (git commit -m 'Add some AmazingFeature')
4. Push para a branch (git push origin feature/AmazingFeature)
5. Abra um Pull Request

📄 Licença

Este projeto está sob licença MIT. Veja o arquivo LICENSE para mais detalhes.

👨‍💻 Desenvolvedor

Pedro Allas dos Santos Borges

• GitHub: @pedroallas
• Email: [pedroallas@professor.to.gov.br]

🙏 Agradecimentos

• shadcn/ui pelos componentes UI
• Unsplash pelas imagens utilizadas
• Radix UI pelos componentes acessíveis
• Lucide pelos ícones