diff --git a/src/App.tsx b/src/App.tsx index 9cf66e8..1deebda 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -10,6 +10,7 @@ import { Instagram, Mail, MapPin, + Menu, Moon, Phone, Shirt, @@ -21,7 +22,27 @@ import { BookOpenText, Quote, FileText, - ShieldCheck, + X, + ExternalLink, + DollarSign, + Shield, + Award, + Settings, + UserCheck, + School, + ClipboardList, + Calendar, + FileCheck, + AlertCircle, + Home as HomeIcon, + CreditCard, + Package, + Truck, + Plus, + Lock, + Database, + Check, + Clock, } from 'lucide-react' /** @@ -169,6 +190,7 @@ function useHashRoute() { /* ===================== Main App ===================== */ export default function MiraclesInMotionSite() { const [darkMode, setDarkMode] = useState(false) + const [mobileMenuOpen, setMobileMenuOpen] = useState(false) const route = useHashRoute() useEffect(() => { @@ -192,7 +214,7 @@ export default function MiraclesInMotionSite() {
-
@@ -219,6 +241,16 @@ function Router({ route }: { route: string }) { return case "/legal": return + case "/request-assistance": + return + case "/portals": + return + case "/admin-portal": + return + case "/volunteer-portal": + return + case "/resource-portal": + return default: return } @@ -239,46 +271,151 @@ function SkipToContent() { interface NavProps { darkMode: boolean setDarkMode: (value: boolean) => void + mobileMenuOpen: boolean + setMobileMenuOpen: (value: boolean) => void } -function Nav({ darkMode, setDarkMode }: NavProps) { +function Nav({ darkMode, setDarkMode, mobileMenuOpen, setMobileMenuOpen }: NavProps) { + // Close mobile menu when route changes + useEffect(() => { + setMobileMenuOpen(false) + }, [window.location.hash]) + + // Handle keyboard navigation + const handleKeyDown = (e: React.KeyboardEvent, action: () => void) => { + if (e.key === 'Enter' || e.key === ' ') { + e.preventDefault() + action() + } + } + return ( - + + {/* Mobile Menu */} + + + + ) } @@ -814,64 +951,304 @@ function PageShell({ title, icon: Icon, eyebrow, children, cta }: PageShellProps } function DonatePage() { - const tiers = [ - { amount: 24, label: "Supplies for one class project" }, - { amount: 48, label: "Fill a backpack with essentials" }, - { amount: 72, label: "Shoes + warm coat" }, - { amount: 150, label: "Head-to-toe outfit & fees" }, + const [selectedAmount, setSelectedAmount] = useState(50) + const [customAmount, setCustomAmount] = useState('') + const [isRecurring, setIsRecurring] = useState(false) + + const suggestedAmounts = [ + { amount: 25, impact: "School supplies for 1 student", popular: false }, + { amount: 50, impact: "Complete backpack kit for 1 student", popular: true }, + { amount: 100, impact: "School clothing for 2 students", popular: false }, + { amount: 250, impact: "Emergency fund for 5 families", popular: false } ] + const getImpactText = (amount: number) => { + if (amount >= 250) return `Emergency support for ${Math.floor(amount / 50)} families` + if (amount >= 100) return `School clothing for ${Math.floor(amount / 50)} students` + if (amount >= 50) return `Complete support for ${Math.floor(amount / 50)} student${Math.floor(amount / 50) > 1 ? 's' : ''}` + if (amount >= 25) return `School supplies for ${Math.floor(amount / 25)} student${Math.floor(amount / 25) > 1 ? 's' : ''}` + return "Every dollar helps a student in need" + } + + const finalAmount = customAmount ? parseInt(customAmount) || 0 : selectedAmount + return ( - Policies}> -
-
+ Policies}> +
+
+ {/* Impact Calculator */} + +
+
+ +
+
+

Your Impact: ${finalAmount}

+

+ {getImpactText(finalAmount)} +

+ {isRecurring && ( +

+ That's {getImpactText(finalAmount * 12).replace(/\d+/, String(Math.floor((finalAmount * 12) / 25)))} annually! +

+ )} +
+
+ + + {/* Donation Form */}
-
Choose an amount
-
- {tiers.map((t) => ( - ${t.amount} +
+

Choose Your Donation Amount

+

Every dollar directly supports students in need

+
+ + {/* Suggested Amounts */} +
+ {suggestedAmounts.map((tier) => ( + { + setSelectedAmount(tier.amount) + setCustomAmount('') + }} + className={`relative p-4 rounded-xl border-2 transition-all focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 ${ + selectedAmount === tier.amount && !customAmount + ? 'border-primary-500 bg-primary-50 dark:bg-primary-900/20' + : 'border-neutral-200 dark:border-neutral-700 hover:border-primary-300' + }`} + whileHover={{ scale: 1.02 }} + whileTap={{ scale: 0.98 }} + aria-label={`Donate $${tier.amount} - ${tier.impact}`} + > + {tier.popular && ( +
+ + Most Popular + +
+ )} +
+ ${tier.amount} +
+
+ {tier.impact} +
+ ))}
-
- -
+ + {/* Sidebar */} +
+ {/* Trust Indicators */} +
+
+
+ +
+
+
501(c)(3) Verified
+
Tax-deductible donations
+
+
+
+
+ Program expenses: + 85% +
+
+ Administrative: + 10% +
+
+ Fundraising: + 5% +
+
+
+ + {/* Recent Impact */} +
+
Recent Impact
+
+
+
+
+ 127 students received school supplies this month +
+
+
+
+
+ 43 families got emergency clothing support +
+
+
+
+
+ $12,450 raised this week by donors like you +
+
+
+
+ + {/* Contact Info */} +
+
Questions about donating?
+
-
) @@ -1128,6 +1505,867 @@ function Card({ title, icon: Icon, children }: CardProps) { ) } +// Assistance Request Page +function AssistanceRequestPage() { + const [formData, setFormData] = useState({ + requestType: '', + urgency: 'medium', + studentInfo: { + firstName: '', + lastName: '', + grade: '', + school: '', + studentId: '' + }, + contactInfo: { + parentName: '', + phone: '', + email: '', + address: '', + relationship: '' + }, + needs: { + schoolSupplies: false, + clothing: false, + shoes: false, + backpack: false, + emergency: false, + other: false, + otherDescription: '' + }, + details: '', + verificationMethod: 'school' + }) + + const handleSubmit = (e: React.FormEvent) => { + e.preventDefault() + alert('Request submitted successfully! We will contact you within 24-48 hours.') + } + + return ( + +
+ {/* Emergency Notice */} + +
+ +
+

Emergency Assistance

+

+ For urgent needs (no food, no warm clothing in winter, etc.), please call us directly at + (818) 491-6884 for immediate assistance. +

+

+ This form is for non-emergency assistance requests and will be processed within 24-48 hours. +

+
+
+ + +
+ {/* Request Type */} +
+

Type of Request

+
+ {[ + { id: 'individual', label: 'Individual Student', icon: Users, desc: 'Help for one student' }, + { id: 'family', label: 'Family (Multiple)', icon: HomeIcon, desc: 'Multiple children' }, + { id: 'classroom', label: 'Classroom Need', icon: School, desc: 'Entire class project' }, + { id: 'emergency', label: 'Emergency', icon: AlertCircle, desc: 'Urgent assistance' } + ].map(type => ( + + setFormData({...formData, requestType: e.target.value})} + className="sr-only" + /> + +
{type.label}
+
{type.desc}
+ + ))} +
+
+ + {/* Student Information */} +
+

Student Information

+
+
+ + setFormData({ + ...formData, + studentInfo: {...formData.studentInfo, firstName: e.target.value} + })} + /> +
+
+ + setFormData({ + ...formData, + studentInfo: {...formData.studentInfo, lastName: e.target.value} + })} + /> +
+
+ + +
+
+ + setFormData({ + ...formData, + studentInfo: {...formData.studentInfo, school: e.target.value} + })} + /> +
+
+
+ + {/* Contact Information */} +
+

Contact Information

+
+
+ + setFormData({ + ...formData, + contactInfo: {...formData.contactInfo, parentName: e.target.value} + })} + /> +
+
+ + setFormData({ + ...formData, + contactInfo: {...formData.contactInfo, phone: e.target.value} + })} + /> +
+
+ + setFormData({ + ...formData, + contactInfo: {...formData.contactInfo, email: e.target.value} + })} + /> +
+
+ + +
+
+
+ + {/* Needs Assessment */} +
+

What does the student need? (Select all that apply)

+
+ {[ + { key: 'schoolSupplies', label: 'School Supplies', icon: BookOpenText, desc: 'Notebooks, pencils, folders, etc.' }, + { key: 'clothing', label: 'School Clothing', icon: Shirt, desc: 'Uniforms, appropriate attire' }, + { key: 'shoes', label: 'Shoes', icon: Package, desc: 'School-appropriate footwear' }, + { key: 'backpack', label: 'Backpack', icon: Backpack, desc: 'New backpack or bag' }, + { key: 'emergency', label: 'Emergency Fund', icon: CreditCard, desc: 'Fees, glasses, urgent needs' }, + { key: 'other', label: 'Other', icon: Plus, desc: 'Specify in description below' } + ].map(need => ( + + ))} +
+
+ + {/* Additional Details */} +
+

Additional Information

+
+
+ +