From 7c3fe21dfb4ff2fd8aa7fdad386e2d9a70064864 Mon Sep 17 00:00:00 2001 From: defiQUG Date: Sat, 4 Oct 2025 17:39:26 -0700 Subject: [PATCH] Implement feature X to enhance user experience and optimize performance --- mim_web.jsx | 812 ++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 812 insertions(+) create mode 100644 mim_web.jsx diff --git a/mim_web.jsx b/mim_web.jsx new file mode 100644 index 0000000..f8d59c0 --- /dev/null +++ b/mim_web.jsx @@ -0,0 +1,812 @@ +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"; + +/** + * 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. + */ + +/* ===================== 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; +} + +export default function MiraclesInMotionSite() { + const [dark, setDark] = useState(true); + 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 }: { 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 + + ); +} + +function Nav({ dark, onToggleDark }: { dark: boolean; onToggleDark: () => void }) { + 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 }: { icon: any; title: string; desc: string }) { + 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 as HTMLElement).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 }: { icon: any; title: string; body: string }) { + 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 }: { label: string; value: number }) { + 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]); + 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 }: { title: string; body: string; href: string; accent: string; icon: any }) { + 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.

+
+
+
+
+
+
+ ); +} + +/* ===================== New Pages ===================== */ +function PageShell({ title, icon: Icon, eyebrow, children, cta }: { title: string; icon: any; eyebrow?: string; children: React.ReactNode; cta?: React.ReactNode }) { + 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.");}}> + +