https://github.com/fvandrad/maria
"Eis aqui a serva do Senhor; faça-se em mim segundo a tua palavra." (Lucas 1:38)
https://github.com/fvandrad/maria
biblia biblia-sagrada css deus html javascript js maria oracao
Last synced: 13 days ago
JSON representation
"Eis aqui a serva do Senhor; faça-se em mim segundo a tua palavra." (Lucas 1:38)
- Host: GitHub
- URL: https://github.com/fvandrad/maria
- Owner: fvandrad
- License: mit
- Created: 2025-06-01T18:38:13.000Z (5 months ago)
- Default Branch: main
- Last Pushed: 2025-06-10T15:58:39.000Z (4 months ago)
- Last Synced: 2025-07-01T20:01:43.553Z (4 months ago)
- Topics: biblia, biblia-sagrada, css, deus, html, javascript, js, maria, oracao
- Language: HTML
- Homepage: https://fvandrad.github.io/maria/
- Size: 1.56 MB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 🙏 Maria, Mãe de Deus - Landing Page
Uma landing page dedicada à devoção mariana, oferecendo orações, reflexões e contato direto via WhatsApp com integração inteligente para pesquisas sobre orações católicas.
[Demo ao Vivo](https://fvandrad.github.io/maria) • [Reportar Bug](../../issues) • [Solicitar Feature](../../issues)
## 🙏 Sobre o Projeto
Esta é uma landing page moderna e responsiva criada para promover a devoção à Nossa Senhora, desenvolvida com foco na experiência do usuário e acessibilidade. O projeto combina design elegante com funcionalidades práticas para facilitar a vida espiritual dos fiéis.
### 🎯 Objetivo
Oferecer uma plataforma digital acessível e inspiradora que conecte os devotos com:
- **Orações Tradicionais**: Ave Maria, Salve Rainha e Memorare
- **Reflexões Espirituais**: Meditações sobre a vida e virtudes de Maria
- **Comunicação Direta**: Contato via WhatsApp para intenções e testemunhos
- **Tecnologia Inteligente**: Integração com IA para pesquisas sobre orações católicas
---
### 📱 Seções da Página
1. **🏠 Header/Navegação**: Menu fixo com scroll suave e logo personalizado
2. **🌟 Hero Section**: Apresentação principal com call-to-actions destacados
3. **📋 Sobre**: Informações sobre Maria e sua importância na fé católica
4. **🙏 Orações**: Cards interativos com as principais orações marianas
5. **🌅 Mistérios do Rosário**: Contemple a vida de Jesus e Maria através dos santos mistérios
6. **💭 Reflexões**: Sistema rotativo de meditações espirituais
7. **📞 Contato**: Integração WhatsApp e informações de contato
8. **📚 Footer**: Links úteis e orações populares com IA
---
## 🚀 Tecnologias Utilizadas
### Frontend Core
- **HTML5**: Estrutura semântica e acessível com meta tags otimizadas
- **CSS3**: Design moderno com recursos avançados
- Variáveis CSS customizadas (`:root`)
- CSS Grid e Flexbox layouts
- Animações e transições suaves
- Design responsivo (mobile-first)
- Media queries otimizadas
- **JavaScript ES6+**: Funcionalidades interativas
- Manipulação moderna do DOM
- Event listeners eficientes
- Intersection Observer API
- Módulos ES6 (futuro)
### Bibliotecas e Recursos
- **[Font Awesome 6.0](https://fontawesome.com/)**: Ícones vetoriais modernos
- **[Google Fonts](https://fonts.google.com/)**: Tipografia premium
- `Crimson Text`: Fonte serifada para títulos
- `Open Sans`: Fonte sans-serif para textos
### Integrações
- **WhatsApp Business API**: Comunicação direta
- **ChatGPT Integration**: Pesquisas inteligentes sobre orações
---
## 🛠️ Instalação
### Pré-requisitos
- Navegador web moderno (Chrome, Firefox, Safari, Edge)
- Servidor web local (opcional, para desenvolvimento)
### 📥 Clone o Repositório
```bash
# Clone este repositório
git clone https://github.com/seu-usuario/maria.git
# Entre no diretório do projeto
cd maria
```
#### Opção 3: Live Server (VS Code)
1. Instale a extensão "Live Server" no VS Code
2. Clique com botão direito em `index.html`
3. Selecione "Open with Live Server"
### 🔗 Acessar a Aplicação
Abra seu navegador e acesse: `http://localhost:8000`
---
## 📚 Como Usar
### 🧭 Navegação
- Use o menu superior para navegar entre as seções
- No mobile, clique no ícone hamburger (☰) para abrir o menu
### 🙏 Visualizar Orações
1. Vá até a seção "Orações"
2. Clique em qualquer card de oração
3. O modal será aberto com o texto completo
4. Clique no "X" ou fora do modal para fechar
### 💭 Reflexões Automáticas
- As reflexões mudam automaticamente a cada 10 segundos
- Use os botões "←" e "→" para navegar manualmente
- Pause o auto-play clicando em qualquer botão de navegação
### 📱 Contato via WhatsApp
1. Role até a seção "Contato"
2. Clique no botão "Enviar Intenção de Oração" ou "Compartilhar Testemunho"
3. Será redirecionado para o WhatsApp com mensagem pré-definida
### 🤖 Pesquisa com IA
- No footer, clique em qualquer oração listada
- Será redirecionado para o ChatGPT com prompt personalizado
---
## 📁 Estrutura do Projeto
```
maria/
│
├── 📄 index.html # Página principal
├── 🎨 styles.css # Estilos CSS
├── ⚙️ script.js # Lógica JavaScript
└── 📖 README.md # Documentação
```
---
## 🎨 Customização
### 🎨 Cores (CSS Variables)
```css
:root {
--primary-color: #1B4B7A; /* Azul principal */
--secondary-color: #E8B86B; /* Dourado */
--accent-color: #8B5D8B; /* Roxo suave */
--gold: #D4AF37; /* Dourado destacado */
}
```
### 🔤 Tipografia
```css
:root {
--font-primary: 'Crimson Text', serif; /* Títulos */
--font-secondary: 'Open Sans', sans-serif; /* Textos */
}
```
### 📱 Responsividade
O projeto utiliza breakpoints otimizados:
- **Mobile**: < 768px
- **Tablet**: 768px - 1024px
- **Desktop**: > 1024px
---
## 🤝 Contribuição
Contribuições são sempre bem-vindas! Veja como você pode ajudar:
### 🐛 Reportar Bugs
1. Verifique se o bug já foi reportado nas [Issues](../../issues)
2. Crie uma nova issue com template de bug report
3. Inclua screenshots e informações do ambiente
### 💡 Sugerir Features
1. Verifique se a feature já foi sugerida
2. Crie uma nova issue com template de feature request
3. Descreva detalhadamente o caso de uso
### 🔧 Contribuir com Código
```bash
# 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 a licença MIT. Veja o arquivo [LICENSE](LICENSE) para mais detalhes.
---
**Feito com 💙 e muita ✨ fé**
*"Eis aqui a serva do Senhor; faça-se em mim segundo a tua palavra."* - Lucas 1:38
⭐ Se este projeto te ajudou, considere dar uma estrela!