From 0933c8208cff4b01f92cb842e3e3f204a50a015b Mon Sep 17 00:00:00 2001 From: defiQUG Date: Sat, 4 Oct 2025 17:46:58 -0700 Subject: [PATCH] feat: Add contributing guidelines, license, and security policy documents - Created CONTRIBUTING.md to outline contribution process and code of conduct. - Added LICENSE file with MIT License and third-party licenses. - Introduced SECURITY.md detailing vulnerability reporting and security measures. - Established README.md in assets directory for asset management and guidelines. - Implemented index.html as the main entry point for the website. - Configured package.json for project dependencies and scripts. - Developed styles.css for custom styles and responsive design. - Set up vite.config.ts for Vite configuration and build settings. --- CONTRIBUTING.md | 190 ++++++++++++++++++++++++ LICENSE | 56 +++++++ README.md | Bin 30 -> 13278 bytes SECURITY.md | 153 +++++++++++++++++++ assets/README.md | 158 ++++++++++++++++++++ index.html | 68 +++++++++ mim_web.jsx | 277 +++++++++++++++++++++++++++++------ package.json | 37 +++++ styles.css | 373 +++++++++++++++++++++++++++++++++++++++++++++++ vite.config.ts | 30 ++++ 10 files changed, 1300 insertions(+), 42 deletions(-) create mode 100644 CONTRIBUTING.md create mode 100644 LICENSE create mode 100644 SECURITY.md create mode 100644 assets/README.md create mode 100644 index.html create mode 100644 package.json create mode 100644 styles.css create mode 100644 vite.config.ts 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 7357330bd13e91182c5c366597f68cfe0a9d5379..4a0d32c4b307acd91d29d2f18df92ee14caae4dd 100644 GIT binary patch literal 13278 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 K|H6U)pYUHDO_@{x delta 18 ZcmcbYF30-+pE85OWJV!T7G4G}1^_(w1b+Yk 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 (