const { React, ReactDOM } = window; const { useState, useEffect, useRef, useMemo } = React; const { motion, AnimatePresence } = window.FramerMotion || {}; /** * 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 ===================== */ function useHashRoute() { const parse = () => (window.location.hash?.slice(1) || "/"); const [route, setRoute] = useState(parse()); useEffect(() => { const onHash = () => setRoute(parse()); window.addEventListener("hashchange", onHash); return () => window.removeEventListener("hashchange", onHash); }, []); 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 [darkMode, setDarkMode] = useState(false); const [mobileMenuOpen, setMobileMenuOpen] = useState(false); const route = useHashRoute(); useEffect(() => { document.title = route === "/" ? "Miracles in Motion — Essentials for Every Student" : `Miracles in Motion — ${route.replace("/", "").replace(/-/g, " ").replace(/\b\w/g, (m) => m.toUpperCase())}`; }, [route]); return (
); } function Router({ route }) { switch (route) { case "/": return ; case "/donate": return ; case "/volunteers": return ; case "/sponsors": return ; case "/stories": return ; case "/testimonies": return ; case "/legal": return ; default: return ; } } /* ===================== Shared UI ===================== */ function SkipToContent() { return ( Skip to content ); } function Nav({ darkMode, setDarkMode, mobileMenuOpen, setMobileMenuOpen }) { return ( ); } function LogoMark() { return (
); } /* ===================== Home Page ===================== */ function HomePage() { return ( <> ); } function Hero() { return (
Equipping kids for success— school supplies, clothing, & more

Miracles in Motion is a nonprofit providing students with the essentials they need to thrive: backpacks and notebooks, uniforms and shoes, and the everything-else fund for urgent needs.

  • 501(c)(3) public charity
  • Donations tax-deductible
  • Community-driven impact
); } function HeroShowcase() { return (
); } function TiltCard({ icon: Icon, title, desc }) { const x = useMotionValue(0); const y = useMotionValue(0); const rx = useTransform(y, [-50, 50], [8, -8]); const ry = useTransform(x, [-50, 50], [-8, 8]); const springX = useSpring(rx, { stiffness: 200, damping: 20 }); const springY = useSpring(ry, { stiffness: 200, damping: 20 }); return ( { const rect = e.currentTarget.getBoundingClientRect(); x.set(e.clientX - rect.left - rect.width / 2); y.set(e.clientY - rect.top - rect.height / 2); }} onMouseLeave={() => { x.set(0); y.set(0); }} style={{ rotateX: springX, rotateY: springY, transformStyle: "preserve-3d" }} className="group relative overflow-hidden rounded-2xl border border-white/20 bg-white/70 p-5 shadow-xl backdrop-blur transition will-change-transform dark:border-white/10 dark:bg-white/5" >
{title}
{desc}
Learn more
); } function PartnerMarquee() { return (
Trusted by schools & community partners
{Array.from({ length: 2 }).map((_, i) => ( Lincoln Unified • Sunrise Elementary • Northview High • Rotary Club • City Youth Fund • BookBank • Caring Co. ))}
); } function Programs() { const items = [ { icon: Backpack, title: "School Supplies", body: "Backpacks, notebooks, art kits, calculators—ready for day one." }, { icon: Shirt, title: "School Clothing", body: "Uniforms, shoes, coats, and seasonal essentials in all sizes." }, { icon: Sparkles, title: "Everything Else", body: "Glasses, test fees, activity passes, hygiene kits—fast relief when needed." }, ]; return (
{items.map((i, idx) => ( ))}
); } function FeatureCard({ icon: Icon, title, body }) { return (
{title}

{body}

Explore
); } function Impact() { const stats = [ { label: "Students equipped", value: 4200 }, { label: "Schools partnered", value: 38 }, { label: "Avg. response time (hrs)", value: 24 }, { label: "Counties served", value: 6 }, ]; return (
{stats.map((s, i) => ( ))}
Where your donation goes
  • 85% programs • 10% ops • 5% fundraising
  • Average grant: $48 for supplies; $72 for clothing
); } function Stat({ label, value }) { return (
{label}
); } function AnimatedNumber({ value }) { const mv = useMotionValue(0); const spring = useSpring(mv, { stiffness: 90, damping: 15 }); const rounded = useTransform(spring, (latest) => Math.floor(latest).toLocaleString()); useEffect(() => { mv.set(0); const timeout = setTimeout(() => mv.set(value), 150); return () => clearTimeout(timeout); }, [value]); return {rounded}; } function HowItWorks() { const steps = [ { title: "Referral", body: "A school counselor, social worker, or parent submits a simple request." }, { title: "Fast response", body: "Needs are verified same-day and approved within 24 hours." }, { title: "Fulfillment", body: "We purchase items locally or provide vouchers for pickup." }, { title: "Follow-up", body: "We confirm support reached the student and log outcomes." }, ]; return (
    {steps.map((s, i) => (
  1. {i + 1}
    {s.title}

    {s.body}

  2. ))}
Donor promise

Your gift funds direct student needs first. We publish anonymized impact and receipts for transparency.

For counselors

One-page referral. No uploads required. We do the running so students don’t miss class.

); } function Testimonial() { return (
“A student arrived with torn shoes before winter break. Within 24 hours, Miracles in Motion had a new coat and shoes ready. He came back from break beaming.”
Counselor, Northview High
); } function GetInvolved() { const options = [ { title: "Donate", body: "Fuel fast responses for urgent student needs.", href: "#/donate", accent: "from-rose-500 to-fuchsia-500", icon: HandHeart }, { title: "Volunteer", body: "Assemble kits, deliver items, host a drive.", href: "#/volunteers", accent: "from-sky-500 to-indigo-500", icon: Users }, { title: "Corporate sponsor", body: "Schools and community orgs: let’s team up.", href: "#/sponsors", accent: "from-emerald-500 to-lime-500", icon: Globe }, ]; return (
{options.map((o, i) => ())}
); } function Callout({ title, body, href, accent, icon: Icon }) { return (
{title}

{body}

Learn more
); } function CTA() { return (
')" }} />

Help a student start school with pride

Your gift today equips a child with the essentials they need—fast. $48 fills a backpack; $72 outfits a student with shoes and a coat.

Prefer offline?

  • 20274 Via Medici, Porter Ranch, CA 91326
  • contact@mim4u.org
  • (818) 491-6884

Miracles in Motion is a 501(c)(3). EIN 88-1234567.

); } /* ===================== New Pages ===================== */ function PageShell({ title, icon: Icon, eyebrow, children, cta }) { return (
{eyebrow &&
{eyebrow}
}

{title}

{cta}
{children}
); } 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" }, ]; return ( Policies}>
Choose an amount
{tiers.map((t) => ( ${t.amount} ))}

You’ll receive an email receipt for your tax records. Donations are tax-deductible to the extent allowed by law. EIN 12-3456789.

Matching gifts

Check if your employer will match your donation. Provide your receipt to your HR portal using our EIN.

Download matching gift letter
Other ways to give
  • Mail a check to: 123 Community Way, Hometown, ST 12345
  • In-kind gifts: new supplies/clothing only. See Gift Acceptance Policy.
  • Stocks/DAF/wire: request instructions at donate@miraclesinmotion.org
); } function VolunteerPage() { return (
Sign-up form
{e.preventDefault(); alert("Thanks! We’ll be in touch via email.");}}>
); } function SponsorsPage() { const tiers = [ { name: "Bronze", amt: "$2,500", perks: ["Logo on website", "Social thank-you", "Quarterly impact note"] }, { name: "Silver", amt: "$5,000", perks: ["All Bronze", "Logo on event signage", "Volunteer day for your team"] }, { name: "Gold", amt: "$10,000", perks: ["All Silver", "Co-branded kit drive", "Annual report feature"] }, { name: "Platinum", amt: "$25,000+", perks: ["All Gold", "Program naming opportunity", "Custom partnership plan"] }, ]; return ( Download prospectus}>
{tiers.map((t) => (
{t.name}
{t.amt}
    {t.perks.map((p, i) => (
  • {p}
  • ))}
))}
Start a conversation
{e.preventDefault(); alert("Thanks! We’ll reach out soon.");}}>
); } function StoriesPage() { const stories = [ { title: "Ready on Day One", tag: "Supplies", body: "A 3rd grader received a backpack and art kit, returning to class with pride.", by: "Ms. Lee, Teacher" }, { title: "Warm for Winter", tag: "Clothing", body: "A high schooler got a coat and shoes before a cold snap—attendance rebounded.", by: "School Social Worker" }, { title: "Glasses for Growth", tag: "Everything Else", body: "A student’s new glasses improved reading in two weeks.", by: "Counselor" }, ]; return ( Read testimonies}>
{stories.map((s, i) => (
{s.tag}

{s.title}

{s.body}

— {s.by}
))}
Submit your story
{e.preventDefault(); alert("Thanks for sharing! We'll review and publish with consent.");}}>