# Contributing to Miracles In Motion Website

Thank you for your interest in contributing to the Miracles In Motion website! This document provides guidelines for contributing to our project.

## Code of Conduct

We are committed to providing a welcoming and inspiring community for all. Please read and follow our Code of Conduct:

- Be respectful and inclusive
- Focus on what is best for the community
- Show empathy towards other community members
- Be collaborative
- Gracefully accept constructive feedback

## How to Contribute

### Reporting Issues

If you find a bug or have a suggestion for improvement:

1. Check if the issue already exists in our [GitHub Issues](https://github.com/Miracles-In-Motion/public-web/issues)
2. If not, create a new issue with:
   - Clear, descriptive title
   - Detailed description of the issue or suggestion
   - Steps to reproduce (for bugs)
   - Expected vs actual behavior
   - Screenshots if applicable
   - Browser and device information

### Contributing Code

1. **Fork the repository**
   ```bash
   git clone https://github.com/Miracles-In-Motion/public-web.git
   cd public-web
   ```

2. **Create a feature branch**
   ```bash
   git checkout -b feature/your-feature-name
   ```

3. **Make your changes**
   - Follow our coding standards (see below)
   - Test your changes thoroughly
   - Update documentation if needed

4. **Commit your changes**
   ```bash
   git add .
   git commit -m "feat: add new donation tracking feature"
   ```

5. **Push and create a Pull Request**
   ```bash
   git push origin feature/your-feature-name
   ```

## Coding Standards

### HTML/CSS
- Use semantic HTML5 elements
- Follow accessibility guidelines (WCAG 2.1 AA)
- Use consistent indentation (2 spaces)
- Write meaningful class names
- Optimize for mobile-first responsive design

### JavaScript/React
- Use ES6+ features consistently
- Follow React best practices and hooks patterns
- Write descriptive variable and function names
- Add comments for complex logic
- Use consistent formatting (Prettier recommended)

### Content Guidelines
- Use inclusive, accessible language
- Maintain a compassionate, professional tone
- Ensure all content is factually accurate
- Include alt text for all images
- Keep content concise and scannable

## Testing

Before submitting a PR, please ensure:

- [ ] Website loads correctly on desktop and mobile
- [ ] All forms work properly
- [ ] Navigation functions correctly
- [ ] No console errors
- [ ] Content is accessible via screen readers
- [ ] Images have appropriate alt text
- [ ] Links work correctly

### Browser Testing

Please test your changes in:
- Chrome (latest)
- Firefox (latest)
- Safari (latest)
- Edge (latest)
- Mobile browsers (iOS Safari, Chrome Mobile)

## Accessibility

We strive to make our website accessible to everyone:

- Use semantic HTML
- Provide alt text for images
- Ensure proper color contrast
- Support keyboard navigation
- Test with screen readers
- Use ARIA labels when appropriate

## Performance

Optimize for fast loading:
- Compress images
- Minimize CSS/JS
- Use appropriate image formats (WebP when possible)
- Lazy load images below the fold
- Minimize HTTP requests

## Content Updates

For content changes:

### Donation Information
- Verify all donation links and amounts
- Test payment processing in sandbox mode
- Update impact statistics with current data
- Ensure EIN and legal information is current

### Program Information
- Work with program staff to verify accuracy
- Update statistics and beneficiary counts
- Include current testimonials and stories
- Maintain privacy of beneficiaries

### Legal Documents
- Have legal team review all policy changes
- Update effective dates
- Ensure compliance with state regulations
- Maintain transparency requirements

## Deployment

Our deployment process:

1. **Development**: Test locally with `npm run dev`
2. **Staging**: Deploy to staging environment for review
3. **Production**: Deploy to live site after approval

### Pre-deployment Checklist

- [ ] Content accuracy verified
- [ ] Links tested
- [ ] Forms tested
- [ ] Mobile responsiveness checked
- [ ] Accessibility tested
- [ ] Performance optimized
- [ ] Legal compliance confirmed

## Getting Help

If you need help:

- Check our [documentation](README.md)
- Review existing issues and PRs
- Contact the web team: web@miraclesinmotion.org
- Join our Slack channel: #website-dev

## Recognition

Contributors will be recognized:

- In our annual report (with permission)
- On our volunteer page
- In release notes for significant contributions

## License

By contributing, you agree that your contributions will be licensed under the same license as the project (MIT License).

## Questions?

Feel free to reach out:
- Email: web@miraclesinmotion.org
- GitHub Issues: [Create an issue](https://github.com/Miracles-In-Motion/public-web/issues/new)

Thank you for helping us create a better experience for our community! 💙