import React, { useState, useEffect } from 'react' import { motion, useMotionValue, useSpring, useTransform } from 'framer-motion' import { ArrowRight, Backpack, CheckCircle2, Facebook, Globe, Heart, Instagram, Mail, MapPin, Moon, Phone, Shirt, Sparkles, Star, SunMedium, Users, Building2, BookOpenText, Quote, FileText, ShieldCheck, } from 'lucide-react' /** * Miracles in Motion — Complete Non-Profit Website * A comprehensive 501(c)3 organization website with modern design, * donation processing, volunteer management, and impact tracking. */ /* ===================== Types ===================== */ interface IconProps { className?: string } interface TiltCardProps { icon: React.ComponentType title: string desc: string } interface FeatureCardProps { icon: React.ComponentType title: string body: string } interface StatProps { label: string value: number } interface SectionHeaderProps { eyebrow?: string title: string subtitle?: string } interface CalloutProps { title: string body: string href: string accent: string icon: React.ComponentType } interface PageShellProps { title: string icon: React.ComponentType eyebrow?: string children: React.ReactNode cta?: React.ReactNode } interface CardProps { title: string icon: React.ComponentType children: React.ReactNode } interface PolicySectionProps { id: string title: string children: React.ReactNode } /* ===================== 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 } /* ===================== Main App ===================== */ export default function MiraclesInMotionSite() { const [darkMode, setDarkMode] = 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]) useEffect(() => { if (darkMode) { document.documentElement.classList.add('dark') } else { document.documentElement.classList.remove('dark') } }, [darkMode]) return (
) } function Router({ route }: { route: string }) { 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 ) } interface NavProps { darkMode: boolean setDarkMode: (value: boolean) => void } function Nav({ darkMode, setDarkMode }: NavProps) { 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 }: TiltCardProps) { 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 card card-hover will-change-transform" >
{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 }: FeatureCardProps) { 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 }: StatProps) { return (
{label}
) } function AnimatedNumber({ value }: { value: number }) { 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, mv]) 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-primary-500", icon: Heart }, { title: "Volunteer", body: "Assemble kits, deliver items, host a drive.", href: "#/volunteers", accent: "from-sky-500 to-secondary-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 }: CalloutProps) { 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?

  • 123 Community Way, Hometown, ST
  • donate@miraclesinmotion.org
  • (555) 123-4567

Miracles in Motion is a 501(c)(3). EIN 12-3456789.

) } /* ===================== Pages ===================== */ function PageShell({ title, icon: Icon, eyebrow, children, cta }: PageShellProps) { 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.");}}>