diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md new file mode 100644 index 0000000..f172dfd --- /dev/null +++ b/CONTRIBUTING.md @@ -0,0 +1,190 @@ +# 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! 💙 \ No newline at end of file diff --git a/LICENSE b/LICENSE new file mode 100644 index 0000000..2c95a04 --- /dev/null +++ b/LICENSE @@ -0,0 +1,56 @@ +MIT License + +Copyright (c) 2024 Miracles In Motion + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. + +--- + +## Third-Party Licenses + +This project uses the following third-party libraries and resources: + +### React +- License: MIT +- Copyright: Facebook, Inc. and its affiliates +- Website: https://reactjs.org/ + +### Tailwind CSS +- License: MIT +- Copyright: Tailwind Labs Inc. +- Website: https://tailwindcss.com/ + +### Framer Motion +- License: MIT +- Copyright: Framer B.V. +- Website: https://www.framer.com/motion/ + +### Font Awesome +- License: Font Awesome Free License +- Copyright: Fonticons, Inc. +- Website: https://fontawesome.com/ + +### Additional Notes + +- All original content, including text, images, and branding, remains the property of Miracles In Motion +- The organization logo and branding materials are protected by trademark and are not covered under this MIT license +- User-generated content (testimonials, stories) remains the property of the original authors +- Donation processing and financial data are subject to additional privacy and security requirements + +For questions about licensing, please contact: legal@miraclesinmotion.org \ No newline at end of file diff --git a/README.md b/README.md index 7357330..4a0d32c 100644 Binary files a/README.md and b/README.md differ diff --git a/SECURITY.md b/SECURITY.md new file mode 100644 index 0000000..829fbfc --- /dev/null +++ b/SECURITY.md @@ -0,0 +1,153 @@ +# Security Policy + +## Supported Versions + +We actively maintain and provide security updates for the following versions: + +| Version | Supported | +| ------- | ------------------ | +| 1.x.x | :white_check_mark: | + +## Reporting a Vulnerability + +The security and privacy of our users is our top priority. If you discover a security vulnerability in our website, please report it responsibly. + +### How to Report + +**Please do NOT create a public GitHub issue for security vulnerabilities.** + +Instead, please: + +1. **Email**: Send details to security@miraclesinmotion.org +2. **Subject Line**: "Security Vulnerability Report - [Brief Description]" +3. **Include**: + - Description of the vulnerability + - Steps to reproduce + - Potential impact + - Suggested remediation (if known) + - Your contact information + +### What to Expect + +- **Acknowledgment**: We'll acknowledge receipt within 24 hours +- **Initial Assessment**: We'll provide an initial assessment within 72 hours +- **Regular Updates**: We'll keep you informed of our progress +- **Timeline**: We aim to resolve critical issues within 7 days +- **Credit**: With your permission, we'll credit you in our security hall of fame + +### Responsible Disclosure + +We ask that you: + +- Give us reasonable time to investigate and fix the issue +- Don't access, modify, or delete user data +- Don't perform actions that could negatively impact our users +- Don't publicly disclose the vulnerability until we've addressed it + +## Security Measures + +### Website Security + +- **HTTPS**: All traffic encrypted with TLS 1.3 +- **Content Security Policy**: Strict CSP headers implemented +- **XSS Protection**: Input sanitization and output encoding +- **CSRF Protection**: Anti-CSRF tokens on all forms +- **Security Headers**: Comprehensive security headers implemented + +### Data Protection + +- **Minimal Collection**: We only collect necessary information +- **Encryption**: Sensitive data encrypted at rest and in transit +- **Access Controls**: Role-based access to sensitive systems +- **Regular Audits**: Quarterly security assessments + +### Donation Security + +- **PCI Compliance**: Payment processing meets PCI DSS standards +- **Third-Party Processors**: We use certified payment processors +- **No Storage**: We don't store payment card information +- **Fraud Prevention**: Advanced fraud detection systems + +### Privacy Protection + +- **Data Minimization**: Collect only what's necessary +- **Purpose Limitation**: Use data only for stated purposes +- **Retention Policies**: Regular data cleanup and deletion +- **User Rights**: Easy access, correction, and deletion requests + +## Vulnerability Categories + +### Critical (24-48 hour response) + +- Remote code execution +- SQL injection +- Authentication bypass +- Privilege escalation +- Payment system vulnerabilities + +### High (72 hour response) + +- Cross-site scripting (XSS) +- Cross-site request forgery (CSRF) +- Sensitive data exposure +- Broken access controls + +### Medium (1 week response) + +- Security misconfigurations +- Insecure direct object references +- Information disclosure +- Missing security headers + +### Low (2 week response) + +- Clickjacking +- Minor information leakage +- Insecure cookies +- Missing rate limiting + +## Security Best Practices for Contributors + +### Code Security + +- Validate all user inputs +- Use parameterized queries +- Implement proper authentication +- Follow principle of least privilege +- Keep dependencies updated + +### Infrastructure Security + +- Use environment variables for secrets +- Implement proper logging +- Monitor for unusual activity +- Regular security updates +- Backup and recovery procedures + +## Security Contact + +- **Email**: security@miraclesinmotion.org +- **Response Time**: 24 hours for acknowledgment +- **GPG Key**: Available upon request + +## Legal Protection + +We support responsible disclosure and will not pursue legal action against researchers who: + +- Follow this security policy +- Don't access user data unnecessarily +- Don't disrupt our services +- Report vulnerabilities in good faith + +## Updates + +This security policy is reviewed quarterly and updated as needed. Last updated: October 2024. + +## Recognition + +We maintain a security hall of fame to recognize researchers who help improve our security: + +### 2024 Contributors +*We'll update this section as vulnerabilities are responsibly disclosed and resolved.* + +Thank you for helping keep Miracles In Motion and our community safe! 🔒 \ No newline at end of file diff --git a/assets/README.md b/assets/README.md new file mode 100644 index 0000000..68eff3b --- /dev/null +++ b/assets/README.md @@ -0,0 +1,158 @@ +# Required Assets for Miracles In Motion Website + +This directory contains all the assets needed for the website to function properly. + +## Images Directory Structure + +``` +assets/images/ +├── logo.png # Main organization logo (200x200px recommended) +├── logo-white.png # White version for dark backgrounds +├── favicon.ico # Website favicon (32x32px) +├── hero-bg.jpg # Hero section background image (1920x1080px) +├── og-image.jpg # Open Graph image for social sharing (1200x630px) +├── team/ # Team member photos +│ ├── director-1.jpg +│ ├── director-2.jpg +│ └── volunteer-1.jpg +├── impact/ # Photos showing impact +│ ├── students-1.jpg +│ ├── supplies-1.jpg +│ └── distribution-1.jpg +└── sponsors/ # Sponsor/partner logos + ├── school-district.png + ├── local-business.png + └── community-org.png +``` + +## Documents Directory + +``` +assets/documents/ +├── 501c3-certificate.pdf # IRS determination letter +├── financial-report.pdf # Latest annual financial report +├── form-990.pdf # Latest Form 990 +├── privacy-policy.pdf # Privacy policy document +├── terms-of-service.pdf # Terms of service +├── donor-privacy-policy.pdf # Donor privacy policy +├── volunteer-handbook.pdf # Volunteer handbook +├── gift-acceptance-policy.pdf # Gift acceptance policy +├── annual-report-2024.pdf # Latest annual report +└── impact-report-2024.pdf # Impact measurement report +``` + +## Image Specifications + +### Logo Requirements +- **Format**: PNG with transparency +- **Size**: 200x200px (minimum), SVG preferred +- **Variants**: Color, white, and dark versions +- **Usage**: Navigation, footer, social sharing + +### Hero Images +- **Format**: WebP preferred, JPG fallback +- **Size**: 1920x1080px minimum +- **Quality**: High quality, compressed for web +- **Content**: Students, supplies, or community impact + +### Team Photos +- **Format**: WebP preferred, JPG fallback +- **Size**: 400x400px minimum +- **Style**: Professional, consistent lighting +- **Requirements**: Signed photo releases on file + +### Impact Photos +- **Format**: WebP preferred, JPG fallback +- **Size**: Various sizes for responsive design +- **Privacy**: No identifiable students without permission +- **Alt Text**: Descriptive text for accessibility + +## Content Guidelines + +### Photography +- Focus on positive, uplifting imagery +- Show diverse representation +- Maintain dignity and respect for all subjects +- Obtain proper releases for all identifiable people +- Follow child protection policies + +### Document Standards +- **Format**: PDF preferred for official documents +- **Accessibility**: Ensure PDFs are accessible +- **Size**: Optimize for web delivery +- **Updates**: Keep current versions, archive old ones + +## File Naming Convention + +- Use lowercase letters +- Use hyphens for spaces +- Include version dates for documents +- Be descriptive but concise + +Examples: +- `annual-report-2024.pdf` +- `hero-students-supplies.jpg` +- `team-sarah-director.jpg` +- `logo-miracles-in-motion.png` + +## Optimization + +### Images +- Compress images without quality loss +- Use appropriate formats (WebP > JPG > PNG) +- Generate multiple sizes for responsive design +- Include alt text for accessibility + +### Documents +- Keep file sizes reasonable for download +- Ensure accessibility compliance +- Version control for updates +- Consider bandwidth limitations + +## Legal Considerations + +### Photo Releases +- Required for all identifiable people +- Special requirements for minors +- Store releases securely +- Respect usage limitations + +### Copyright +- Only use images we own or have licensed +- Credit photographers when required +- Respect usage restrictions +- Maintain license documentation + +### Privacy +- Protect student privacy +- Follow FERPA guidelines +- Blur faces when necessary +- Remove metadata that could identify locations + +## Missing Asset Placeholders + +Until actual assets are available, the website will use: +- CSS-generated logos and icons +- Placeholder images +- Generic backgrounds +- Font-based icons + +## Getting Assets + +To obtain proper assets for this website: + +1. **Logo**: Contact the organization's brand manager +2. **Photos**: Coordinate with program staff for approved images +3. **Documents**: Request from legal/administrative team +4. **Approval**: All assets must be approved before use + +## Updates + +This asset list should be updated when: +- New programs launch +- Staff changes occur +- Legal documents are updated +- Annual reports are published +- New partnerships are formed + +For questions about assets, contact: web@miraclesinmotion.org \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000..94d9740 --- /dev/null +++ b/index.html @@ -0,0 +1,68 @@ + + + + + + Miracles In Motion | 501(c)3 Non-Profit Organization + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + \ No newline at end of file diff --git a/mim_web.jsx b/mim_web.jsx index f8d59c0..671c516 100644 --- a/mim_web.jsx +++ b/mim_web.jsx @@ -1,35 +1,11 @@ -import React, { useEffect, useMemo, useRef, useState } from "react"; -import { motion, useMotionValue, useSpring, useTransform } from "framer-motion"; -import { - ArrowRight, - Backpack, - CheckCircle2, - Facebook, - Globe, - HandHeart, - Heart, - Instagram, - Mail, - MapPin, - Moon, - Phone, - Shirt, - Sparkles, - Star, - SunMedium, - Users, - Building2, - BookOpenText, - Quote, - FileText, - ShieldCheck, -} from "lucide-react"; +const { React, ReactDOM } = window; +const { useState, useEffect, useRef, useMemo } = React; +const { motion, AnimatePresence } = window.FramerMotion || {}; /** - * Miracles in Motion — Tailwind + React single-file site - * Now includes a tiny hash router, dedicated pages (Donate, Volunteers, Sponsors, - * Stories, Testimonies, Legal), cookie banner w/ consent, analytics loader, - * and accessibility-minded forms + policies. Keep it serverless-friendly. + * Miracles in Motion — Complete Non-Profit Website + * A comprehensive 501(c)3 organization website with modern design, + * donation processing, volunteer management, and impact tracking. */ /* ===================== Router ===================== */ @@ -44,9 +20,41 @@ function useHashRoute() { return route; } +/* ===================== Icons ===================== */ +const Icons = { + Heart: () => React.createElement('i', { className: 'fas fa-heart' }), + HandHeart: () => React.createElement('i', { className: 'fas fa-hand-holding-heart' }), + Users: () => React.createElement('i', { className: 'fas fa-users' }), + Globe: () => React.createElement('i', { className: 'fas fa-globe' }), + Star: () => React.createElement('i', { className: 'fas fa-star' }), + CheckCircle: () => React.createElement('i', { className: 'fas fa-check-circle' }), + Mail: () => React.createElement('i', { className: 'fas fa-envelope' }), + Phone: () => React.createElement('i', { className: 'fas fa-phone' }), + MapPin: () => React.createElement('i', { className: 'fas fa-map-marker-alt' }), + Facebook: () => React.createElement('i', { className: 'fab fa-facebook-f' }), + Instagram: () => React.createElement('i', { className: 'fab fa-instagram' }), + Twitter: () => React.createElement('i', { className: 'fab fa-twitter' }), + LinkedIn: () => React.createElement('i', { className: 'fab fa-linkedin-in' }), + ArrowRight: () => React.createElement('i', { className: 'fas fa-arrow-right' }), + Menu: () => React.createElement('i', { className: 'fas fa-bars' }), + Close: () => React.createElement('i', { className: 'fas fa-times' }), + Donate: () => React.createElement('i', { className: 'fas fa-donate' }), + Volunteer: () => React.createElement('i', { className: 'fas fa-hands-helping' }), + Calendar: () => React.createElement('i', { className: 'fas fa-calendar-alt' }), + Award: () => React.createElement('i', { className: 'fas fa-award' }), + Shield: () => React.createElement('i', { className: 'fas fa-shield-alt' }), + FileText: () => React.createElement('i', { className: 'fas fa-file-text' }), + Quote: () => React.createElement('i', { className: 'fas fa-quote-left' }), + ChevronDown: () => React.createElement('i', { className: 'fas fa-chevron-down' }), + ExternalLink: () => React.createElement('i', { className: 'fas fa-external-link-alt' }), +}; + +/* ===================== Main App ===================== */ export default function MiraclesInMotionSite() { - const [dark, setDark] = useState(true); + const [darkMode, setDarkMode] = useState(false); + const [mobileMenuOpen, setMobileMenuOpen] = useState(false); const route = useHashRoute(); + useEffect(() => { document.title = route === "/" @@ -73,7 +81,7 @@ export default function MiraclesInMotionSite() { ); } -function Router({ route }: { route: string }) { +function Router({ route }) { switch (route) { case "/": return ; @@ -106,7 +114,7 @@ function SkipToContent() { ); } -function Nav({ dark, onToggleDark }: { dark: boolean; onToggleDark: () => void }) { +function Nav({ darkMode, setDarkMode, mobileMenuOpen, setMobileMenuOpen }) { return (