d-bis/miracles_in_motion
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Implement feature X to enhance user experience and optimize performance

Browse Source
This commit is contained in:
defiQUG
2025-10-04 17:39:26 -07:00
parent acec54ea50
commit 7c3fe21dfb
1 changed files with 812 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

812
mim_web.jsx Normal file
View File

@@ -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 (
<div className={dark ? "dark" : ""}>
<div className="min-h-screen bg-neutral-50 text-neutral-900 antialiased selection:bg-fuchsia-200/60 dark:bg-neutral-950 dark:text-neutral-50">
<BackgroundDecor />
<CookieBanner />
<AnalyticsLoader />
<SkipToContent />
<header className="sticky top-0 z-50 backdrop-blur supports-[backdrop-filter]:bg-white/50 dark:supports-[backdrop-filter]:bg-black/40 border-b border-white/30 dark:border-white/10">
<Nav dark={dark} onToggleDark={() => setDark((d) => !d)} />
</header>
<main id="content" className="relative">
<Router route={route} />
</main>
<Footer />
<StickyDonate />
</div>
</div>
);
}
function Router({ route }: { route: string }) {
switch (route) {
case "/":
return <HomePage />;
case "/donate":
return <DonatePage />;
case "/volunteers":
return <VolunteerPage />;
case "/sponsors":
return <SponsorsPage />;
case "/stories":
return <StoriesPage />;
case "/testimonies":
return <TestimoniesPage />;
case "/legal":
return <LegalPage />;
default:
return <NotFoundPage />;
}
}
/* ===================== Shared UI ===================== */
function SkipToContent() {
return (
<a
href="#content"
className="sr-only focus:not-sr-only focus:fixed focus:left-3 focus:top-3 focus:z-[100] focus:rounded-xl focus:bg-white/90 focus:px-4 focus:py-2 focus:text-sm focus:shadow-xl dark:focus:bg-black/80"
>
Skip to content
</a>
);
}
function Nav({ dark, onToggleDark }: { dark: boolean; onToggleDark: () => void }) {
return (
<nav className="mx-auto flex w-full max-w-7xl items-center justify-between px-4 py-3 sm:px-6 lg:px-8">
<div className="flex items-center gap-3">
<a href="#/" className="flex items-center gap-3">
<LogoMark />
<div className="-space-y-1">
<div className="font-semibold tracking-tight">Miracles in Motion</div>
<div className="text-xs text-neutral-600 dark:text-neutral-400">Essentials for every student</div>
</div>
</a>
</div>
<div className="hidden items-center gap-6 md:flex">
<a className="navlink" href="#/stories">Stories</a>
<a className="navlink" href="#/testimonies">Testimonies</a>
<a className="navlink" href="#/volunteers">Volunteers</a>
<a className="navlink" href="#/sponsors">Corporate</a>
<a className="navlink" href="#/legal">Legal</a>
</div>
<div className="flex items-center gap-2">
<button
aria-label="Toggle dark mode"
onClick={onToggleDark}
className="group rounded-full border border-neutral-200/70 bg-white/70 p-2 shadow-sm transition hover:scale-105 hover:bg-white dark:border-white/10 dark:bg-white/10 dark:hover:bg-white/15"
>
{dark ? (
<SunMedium className="h-5 w-5 transition group-hover:rotate-12" />
) : (
<Moon className="h-5 w-5 transition group-hover:-rotate-12" />
)}
</button>
<Magnetic>
<a href="#/donate" className="btn-primary hidden md:inline-flex">
<Heart className="mr-2 h-4 w-4" /> Donate
</a>
</Magnetic>
</div>
</nav>
);
}
function LogoMark() {
return (
<div className="relative grid h-10 w-10 place-items-center overflow-hidden rounded-2xl bg-gradient-to-br from-fuchsia-500 via-violet-500 to-indigo-500 shadow-lg shadow-fuchsia-500/20">
<motion.div
className="absolute inset-0 opacity-60"
animate={{ background: [
"radial-gradient(120px 80px at 20% 20%, rgba(255,255,255,0.4), transparent)",
"radial-gradient(120px 80px at 80% 30%, rgba(255,255,255,0.4), transparent)",
"radial-gradient(120px 80px at 50% 80%, rgba(255,255,255,0.4), transparent)",
]}}
transition={{ duration: 6, repeat: Infinity, ease: "easeInOut" }}
/>
<Sparkles className="relative h-6 w-6 text-white drop-shadow" />
</div>
);
}
/* ===================== Home Page ===================== */
function HomePage() {
return (
<>
<Hero />
<PartnerMarquee />
<Programs />
<Impact />
<HowItWorks />
<Testimonial />
<GetInvolved />
<CTA />
</>
);
}
function Hero() {
return (
<section className="relative isolate overflow-hidden">
<div className="mx-auto grid max-w-7xl items-center gap-10 px-4 py-20 sm:px-6 lg:grid-cols-2 lg:gap-12 lg:py-28 lg:px-8">
<div>
<motion.h1
initial={{ opacity: 0, y: 12 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true }}
transition={{ duration: 0.6 }}
className="text-balance text-4xl font-bold tracking-tight sm:text-5xl md:text-6xl"
>
Equipping kids for success—
<span className="relative whitespace-pre text-transparent bg-clip-text bg-gradient-to-r from-fuchsia-500 via-violet-500 to-indigo-500"> school supplies, clothing, & more</span>
</motion.h1>
<p className="mt-5 max-w-xl text-lg leading-7 text-neutral-700 dark:text-neutral-300">
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.
</p>
<div className="mt-8 flex flex-wrap items-center gap-3">
<Magnetic>
<a href="#/donate" className="btn-primary">
<HandHeart className="mr-2 h-4 w-4" /> Donate now
</a>
</Magnetic>
<a href="#/volunteers" className="btn-secondary">
Volunteer <ArrowRight className="ml-1 h-4 w-4" />
</a>
<a href="#/stories" className="rounded-full border border-transparent px-4 py-2 text-sm text-neutral-700 underline-offset-4 hover:underline dark:text-neutral-300">
Read stories
</a>
</div>
<ul className="mt-8 flex flex-wrap items-center gap-x-6 gap-y-2 text-sm text-neutral-600 dark:text-neutral-400">
<li className="flex items-center gap-2"><CheckCircle2 className="h-4 w-4 text-emerald-500"/> 501(c)(3) public charity</li>
<li className="flex items-center gap-2"><CheckCircle2 className="h-4 w-4 text-emerald-500"/> Donations tax-deductible</li>
<li className="flex items-center gap-2"><CheckCircle2 className="h-4 w-4 text-emerald-500"/> Community-driven impact</li>
</ul>
</div>
<div className="relative">
<HeroShowcase />
</div>
</div>
</section>
);
}
function HeroShowcase() {
return (
<div className="relative mx-auto max-w-md lg:max-w-none">
<div className="absolute -inset-8 -z-10 rounded-3xl bg-gradient-to-tr from-fuchsia-500/20 via-violet-500/20 to-indigo-500/20 blur-3xl" />
<div className="grid grid-cols-2 gap-4 sm:gap-6">
<TiltCard icon={Backpack} title="School Supplies" desc="Backpacks, notebooks, calculators" />
<TiltCard icon={Shirt} title="School Clothing" desc="Uniforms, shoes, coats" />
<TiltCard icon={Sparkles} title="Everything Else" desc="Glasses, fees, emergencies" />
<TiltCard icon={Users} title="Family Support" desc="Referrals & wraparound care" />
</div>
</div>
);
}
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 (
<motion.div
onMouseMove={(e) => {
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"
>
<div className="pointer-events-none absolute inset-0 -z-10 bg-[radial-gradient(150px_80px_at_var(--x)_var(--y),_rgba(255,255,255,0.35),_transparent)] opacity-0 transition-opacity duration-500 group-hover:opacity-100" />
<div className="flex items-start gap-4" style={{ transform: "translateZ(40px)" }}>
<div className="grid h-12 w-12 place-items-center rounded-xl bg-gradient-to-br from-fuchsia-500 to-indigo-500 text-white shadow-lg">
<Icon className="h-6 w-6" />
</div>
<div>
<div className="font-semibold tracking-tight">{title}</div>
<div className="text-sm text-neutral-600 dark:text-neutral-300">{desc}</div>
</div>
</div>
<div className="mt-4 flex items-center gap-2 text-sm text-fuchsia-600 transition group-hover:translate-x-1 dark:text-fuchsia-300">
Learn more <ArrowRight className="h-4 w-4" />
</div>
</motion.div>
);
}
function PartnerMarquee() {
return (
<section aria-label="Community partners" className="relative">
<div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
<div className="rounded-2xl border border-white/30 bg-white/60 p-3 backdrop-blur dark:border-white/10 dark:bg-white/5">
<div className="flex items-center gap-2 px-2 text-xs uppercase tracking-wider text-neutral-500 dark:text-neutral-400">
<Sparkles className="h-4 w-4" /> Trusted by schools & community partners
</div>
<div className="mt-2 overflow-hidden">
<div className="animate-marquee whitespace-nowrap py-2 text-neutral-600 dark:text-neutral-300">
{Array.from({ length: 2 }).map((_, i) => (
<span key={i} className="mx-6 inline-flex items-center gap-2 text-sm opacity-80">
<span className="h-2 w-2 rounded-full bg-gradient-to-r from-fuchsia-500 to-indigo-500" />
Lincoln Unified • Sunrise Elementary • Northview High • Rotary Club • City Youth Fund • BookBank • Caring Co.
</span>
))}
</div>
</div>
</div>
</div>
</section>
);
}
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 (
<section id="programs" className="relative py-20">
<div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
<SectionHeader eyebrow="What we do" title="Practical, student-first programs" subtitle="Flexible help that meets families where they are." />
<div className="mt-10 grid gap-6 md:grid-cols-3">
{items.map((i, idx) => (
<FeatureCard key={idx} icon={i.icon} title={i.title} body={i.body} />
))}
</div>
</div>
</section>
);
}
function FeatureCard({ icon: Icon, title, body }: { icon: any; title: string; body: string }) {
return (
<div className="group relative overflow-hidden rounded-2xl border border-white/30 bg-white/70 p-6 shadow-xl backdrop-blur transition hover:-translate-y-0.5 hover:shadow-2xl dark:border-white/10 dark:bg-white/5">
<div className="absolute left-1/2 top-0 -z-10 h-40 w-40 -translate-x-1/2 rounded-full bg-gradient-to-br from-fuchsia-500/20 to-indigo-500/20 blur-2xl" />
<div className="flex items-center gap-3">
<div className="grid h-10 w-10 place-items-center rounded-xl bg-gradient-to-br from-fuchsia-500 to-indigo-500 text-white shadow">
<Icon className="h-5 w-5" />
</div>
<div className="font-semibold tracking-tight">{title}</div>
</div>
<p className="mt-3 text-sm leading-6 text-neutral-700 dark:text-neutral-300">{body}</p>
<div className="mt-5 text-sm text-fuchsia-700 transition group-hover:translate-x-1 dark:text-fuchsia-300">
Explore <ArrowRight className="ml-1 inline h-4 w-4" />
</div>
</div>
);
}
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 (
<section id="impact" className="relative py-24">
<div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
<SectionHeader eyebrow="Impact" title="Every gift moves a student forward" subtitle="Transparent, measurable outcomes powered by local partnerships." />
<div className="mt-12 grid gap-6 sm:grid-cols-2 lg:grid-cols-4">
{stats.map((s, i) => (
<Stat key={i} label={s.label} value={s.value} />
))}
</div>
<div className="mt-10 grid items-center gap-6 rounded-2xl border border-emerald-500/20 bg-emerald-500/10 p-6 sm:grid-cols-2">
<div className="text-sm text-emerald-900 dark:text-emerald-100">
<div className="font-medium">Where your donation goes</div>
<ul className="mt-3 space-y-2">
<li className="flex items-center gap-2"><span className="h-1.5 w-1.5 rounded-full bg-emerald-500"/> 85% programs • 10% ops • 5% fundraising</li>
<li className="flex items-center gap-2"><span className="h-1.5 w-1.5 rounded-full bg-emerald-500"/> Average grant: $48 for supplies; $72 for clothing</li>
</ul>
</div>
<div className="flex items-center justify-end">
<a href="#/donate" className="btn-primary">
See the impact report <ArrowRight className="ml-2 h-4 w-4" />
</a>
</div>
</div>
</div>
</section>
);
}
function Stat({ label, value }: { label: string; value: number }) {
return (
<div className="relative overflow-hidden rounded-2xl border border-white/30 bg-white/70 p-6 text-center shadow-xl backdrop-blur dark:border-white/10 dark:bg-white/5">
<div className="absolute -right-10 -top-10 h-28 w-28 rounded-full bg-gradient-to-br from-fuchsia-500/20 to-indigo-500/20 blur-2xl" />
<div className="text-4xl font-semibold tracking-tight">
<AnimatedNumber value={value} />
</div>
<div className="mt-2 text-sm text-neutral-600 dark:text-neutral-300">{label}</div>
</div>
);
}
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 <motion.span>{rounded}</motion.span>;
}
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 (
<section id="how" className="relative py-24">
<div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
<SectionHeader eyebrow="How it works" title="Simple process, real results" subtitle="Designed with counselors, optimized for speed and dignity." />
<div className="mt-10 grid gap-6 md:grid-cols-2">
<div className="relative overflow-hidden rounded-2xl border border-white/30 bg-white/70 p-6 backdrop-blur dark:border-white/10 dark:bg-white/5">
<ol className="relative space-y-6">
{steps.map((s, i) => (
<li key={i} className="relative pl-8">
<div className="absolute left-0 top-1 grid h-6 w-6 place-items-center rounded-full bg-gradient-to-br from-fuchsia-500 to-indigo-500 text-white shadow">
{i + 1}
</div>
<div className="font-medium">{s.title}</div>
<p className="text-sm text-neutral-700 dark:text-neutral-300">{s.body}</p>
</li>
))}
</ol>
</div>
<div className="grid gap-6">
<div className="rounded-2xl border border-emerald-500/20 bg-emerald-500/10 p-6">
<div className="flex items-center gap-3">
<div className="grid h-10 w-10 place-items-center rounded-xl bg-emerald-500 text-white"><Heart className="h-5 w-5"/></div>
<div className="font-semibold tracking-tight">Donor promise</div>
</div>
<p className="mt-2 text-sm text-emerald-900 dark:text-emerald-100">Your gift funds direct student needs first. We publish anonymized impact and receipts for transparency.</p>
</div>
<div className="rounded-2xl border border-indigo-500/20 bg-indigo-500/10 p-6">
<div className="flex items-center gap-3">
<div className="grid h-10 w-10 place-items-center rounded-xl bg-indigo-500 text-white"><Users className="h-5 w-5"/></div>
<div className="font-semibold tracking-tight">For counselors</div>
</div>
<p className="mt-2 text-sm text-indigo-950 dark:text-indigo-100">One-page referral. No uploads required. We do the running so students don’t miss class.</p>
</div>
</div>
</div>
</div>
</section>
);
}
function Testimonial() {
return (
<section className="relative py-20">
<div className="mx-auto max-w-5xl px-4 sm:px-6 lg:px-8">
<div className="relative overflow-hidden rounded-3xl border border-white/30 bg-white/70 p-8 shadow-2xl backdrop-blur dark:border-white/10 dark:bg-white/5">
<div className="absolute -left-10 -top-10 h-60 w-60 rounded-full bg-gradient-to-tr from-fuchsia-500/30 to-indigo-500/30 blur-3xl" />
<blockquote className="text-balance text-xl leading-8 text-neutral-800 dark:text-neutral-100">
“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.”
</blockquote>
<div className="mt-4 flex items-center gap-3 text-sm text-neutral-600 dark:text-neutral-300">
<Star className="h-4 w-4 text-amber-500" />
Counselor, Northview High
</div>
</div>
</div>
</section>
);
}
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 (
<section id="get-involved" className="relative py-24">
<div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
<SectionHeader eyebrow="Get involved" title="There’s a role for everyone" subtitle="Give monthly, share skills, or introduce us to your school." />
<div className="mt-10 grid gap-6 md:grid-cols-3">
{options.map((o, i) => (<Callout key={i} {...o} />))}
</div>
</div>
</section>
);
}
function Callout({ title, body, href, accent, icon: Icon }: { title: string; body: string; href: string; accent: string; icon: any }) {
return (
<div className="group relative overflow-hidden rounded-2xl border border-white/30 bg-white/70 p-6 shadow-xl backdrop-blur transition hover:-translate-y-0.5 hover:shadow-2xl dark:border-white/10 dark:bg-white/5">
<div className={`absolute -right-10 -top-10 h-36 w-36 rounded-full bg-gradient-to-br ${accent} opacity-30 blur-2xl`} />
<div className={`mb-3 grid h-12 w-12 place-items-center rounded-xl bg-gradient-to-br ${accent} text-white shadow`}> <Icon className="h-6 w-6" /> </div>
<div className="font-semibold tracking-tight">{title}</div>
<p className="mt-2 text-sm text-neutral-700 dark:text-neutral-300">{body}</p>
<a href={href} className="mt-4 inline-flex items-center text-sm text-neutral-800 underline-offset-4 hover:underline dark:text-neutral-200">
Learn more <ArrowRight className="ml-1 h-4 w-4" />
</a>
</div>
);
}
function CTA() {
return (
<section className="relative py-24">
<div className="mx-auto max-w-6xl px-4 sm:px-6 lg:px-8">
<div className="relative overflow-hidden rounded-3xl border border-white/30 bg-gradient-to-br from-fuchsia-600 via-violet-600 to-indigo-600 p-8 text-white shadow-2xl dark:border-white/10">
<div className="absolute inset-0 opacity-30 [mask-image:radial-gradient(60%_80%_at_70%_50%,white,transparent)]" style={{ backgroundImage: "url('data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\' width=\'400\' height=\'400\'><defs><pattern id=\'g\' width=\'40\' height=\'40\' patternUnits=\'userSpaceOnUse\'><path d=\'M0 20 H40 M20 0 V40\' stroke=\'white\' stroke-opacity=\'0.25\' stroke-width=\'1\'/></pattern></defs><rect width=\'100%\' height=\'100%\' fill=\'url(%23g)\'/></svg>')" }} />
<div className="grid items-center gap-8 md:grid-cols-2">
<div>
<h2 className="text-balance text-3xl font-semibold tracking-tight sm:text-4xl">Help a student start school with pride</h2>
<p className="mt-3 max-w-md text-white/90">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.</p>
<div className="mt-6 flex flex-wrap items-center gap-3">
<a href="#/donate" className="btn-white">Donate $48</a>
<a href="#/donate" className="btn-white/outline">Give monthly <ArrowRight className="ml-1 h-4 w-4" /></a>
</div>
</div>
<div className="relative">
<div className="rounded-2xl border border-white/40 bg-white/10 p-6 backdrop-blur">
<h3 className="font-medium tracking-tight">Prefer offline?</h3>
<ul className="mt-3 space-y-2 text-sm text-white/90">
<li className="flex items-center gap-2"><MapPin className="h-4 w-4"/> 123 Community Way, Hometown, ST</li>
<li className="flex items-center gap-2"><Mail className="h-4 w-4"/> donate@miraclesinmotion.org</li>
<li className="flex items-center gap-2"><Phone className="h-4 w-4"/> (555) 123-4567</li>
</ul>
<p className="mt-3 text-xs text-white/80">Miracles in Motion is a 501(c)(3). EIN 12-3456789.</p>
</div>
</div>
</div>
</div>
</div>
</section>
);
}
/* ===================== New Pages ===================== */
function PageShell({ title, icon: Icon, eyebrow, children, cta }: { title: string; icon: any; eyebrow?: string; children: React.ReactNode; cta?: React.ReactNode }) {
return (
<section className="relative py-16 sm:py-24">
<div className="mx-auto max-w-6xl px-4 sm:px-6 lg:px-8">
<div className="mb-10 flex items-center gap-3">
<div className="grid h-12 w-12 place-items-center rounded-xl bg-gradient-to-br from-fuchsia-500 to-indigo-500 text-white shadow"><Icon className="h-6 w-6"/></div>
<div>
{eyebrow && <div className="text-xs uppercase tracking-wider text-neutral-500 dark:text-neutral-400">{eyebrow}</div>}
<h1 className="text-3xl font-semibold tracking-tight sm:text-4xl">{title}</h1>
</div>
<div className="ml-auto">{cta}</div>
</div>
<div className="grid gap-8">{children}</div>
</div>
</section>
);
}
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 (
<PageShell title="Donate" icon={HandHeart} eyebrow="Give with confidence" cta={<a href="#/legal" className="btn-secondary">Policies</a>}>
<div className="grid gap-6 md:grid-cols-3">
<div className="md:col-span-2 space-y-6">
<div className="rounded-2xl border border-white/30 bg-white/70 p-6 backdrop-blur dark:border-white/10 dark:bg-white/5">
<div className="font-medium">Choose an amount</div>
<div className="mt-4 grid grid-cols-2 gap-3 sm:grid-cols-4">
{tiers.map((t) => (
<a key={t.amount} href="#" className="btn-secondary justify-center">${t.amount}</a>
))}
</div>
<div className="mt-4 flex gap-3">
<input aria-label="Custom amount" placeholder="$ Custom" className="w-40 rounded-xl border border-white/30 bg-white/70 px-3 py-2 text-sm dark:border-white/10 dark:bg-white/10" />
<label className="inline-flex items-center gap-2 text-sm"><input type="checkbox" className="h-4 w-4"/> Make it monthly</label>
</div>
<div className="mt-6 flex flex-wrap gap-3">
<a href="#" className="btn-primary">Donate securely</a>
<a href="#" className="btn-secondary">PayPal</a>
<a href="#" className="btn-secondary">Donorbox</a>
</div>
<p className="mt-3 text-xs text-neutral-600 dark:text-neutral-400">You’ll receive an email receipt for your tax records. Donations are tax-deductible to the extent allowed by law. EIN 12-3456789.</p>
</div>
<div className="rounded-2xl border border-white/30 bg-white/70 p-6 dark:border-white/10 dark:bg-white/5">
<div className="font-medium">Matching gifts</div>
<p className="mt-2 text-sm text-neutral-700 dark:text-neutral-300">Check if your employer will match your donation. Provide your receipt to your HR portal using our EIN.</p>
<a href="#" className="mt-3 inline-flex text-sm underline underline-offset-4">Download matching gift letter</a>
</div>
<div className="rounded-2xl border border-white/30 bg-white/70 p-6 dark:border-white/10 dark:bg-white/5">
<div className="font-medium">Other ways to give</div>
<ul className="mt-2 list-disc space-y-1 pl-5 text-sm text-neutral-700 dark:text-neutral-300">
<li>Mail a check to: 123 Community Way, Hometown, ST 12345</li>
<li>In-kind gifts: new supplies/clothing only. See <a className="underline" href="#/legal">Gift Acceptance Policy</a>.</li>
<li>Stocks/DAF/wire: request instructions at donate@miraclesinmotion.org</li>
</ul>
</div>
</div>
<aside className="space-y-6">
<Card title="Transparency" icon={FileText}>
<p className="text-sm text-neutral-700 dark:text-neutral-300">We publish annual reports and Form 990s. See our <a className="underline" href="#/legal">Legal & Financials</a>.</p>
</Card>
<Card title="Privacy" icon={ShieldCheck}>
<p className="text-sm text-neutral-700 dark:text-neutral-300">We never sell or trade donor data. See our Donor Privacy Policy.</p>
</Card>
<Card title="Tax info" icon={CheckCircle2}>
<p className="text-sm text-neutral-700 dark:text-neutral-300">501(c)(3) public charity. EIN 12-3456789. No goods/services provided unless specified.</p>
</Card>
</aside>
</div>
</PageShell>
);
}
function VolunteerPage() {
return (
<PageShell title="Volunteer" icon={Users} eyebrow="Serve locally">
<div className="grid gap-6 md:grid-cols-2">
<div className="rounded-2xl border border-white/30 bg-white/70 p-6 dark:border-white/10 dark:bg-white/5">
<div className="font-medium">Sign-up form</div>
<form className="mt-4 grid grid-cols-1 gap-4" onSubmit={(e)=>{e.preventDefault(); alert("Thanks! We’ll be in touch via email.");}}>
<div className="grid gap-2 sm:grid-cols-2">
<input required aria-label="First name" placeholder="First name" className="input" />
<input required aria-label="Last name" placeholder="Last name" className="input" />
</div>
<div className="grid gap-2 sm:grid-cols-2">
<input required type="email" aria-label="Email" placeholder="Email" className="input" />
<input aria-label="Phone" placeholder="Phone" className="input" />
</div>
<div className="grid gap-2 sm:grid-cols-2">
<select aria-label="Interests" className="input"><option>Assemble kits</option><option>Delivery driver</option><option>School liaison</option><option>Admin support</option></select>
<select aria-label="Availability" className="input"><option>Weekdays</option><option>Weeknights</option><option>Weekends</option></select>
</div>
<label className="flex items-start gap-3 text-sm">
<input required type="checkbox" className="mt-1 h-4 w-4" />
<span>I have read and agree to the <a className="underline" href="#/legal#volunteer-waiver">Volunteer Waiver & Liability Release</a>, including background check and child-safety requirements.</span>
</label>
<button className="btn-primary w-full justify-center" type="submit">Submit</button>
</form>
</div>
<aside className="space-y-6">
<Card title="What to expect" icon={Backpack}>
<p className="text-sm text-neutral-700 dark:text-neutral-300">Shifts are 2–3 hours. Training provided. Youth (14+) welcome with guardian consent.</p>
</Card>
<Card title="Group volunteering" icon={Users}>
<p className="text-sm text-neutral-700 dark:text-neutral-300">We host teams of 5–25 for corporate/service groups. <a className="underline" href="#/sponsors">Contact us</a> for dates.</p>
</Card>
</aside>
</div>
</PageShell>
);
}
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 (
<PageShell title="Corporate Sponsorship" icon={Building2} eyebrow="Partner with purpose" cta={<a className="btn-secondary" href="#">Download prospectus</a>}>
<div className="grid gap-6 md:grid-cols-2">
<div className="space-y-6">
{tiers.map((t) => (
<div key={t.name} className="rounded-2xl border border-white/30 bg-white/70 p-6 dark:border-white/10 dark:bg-white/5">
<div className="flex items-start justify-between">
<div className="text-xl font-semibold">{t.name}</div>
<div className="text-lg">{t.amt}</div>
</div>
<ul className="mt-3 list-disc space-y-1 pl-5 text-sm text-neutral-700 dark:text-neutral-300">
{t.perks.map((p, i) => (<li key={i}>{p}</li>))}
</ul>
</div>
))}
</div>
<div className="rounded-2xl border border-white/30 bg-white/70 p-6 dark:border-white/10 dark:bg-white/5">
<div className="font-medium">Start a conversation</div>
<form className="mt-4 grid gap-4" onSubmit={(e)=>{e.preventDefault(); alert("Thanks! We’ll reach out soon.");}}>
<input className="input" placeholder="Company name" aria-label="Company name" required />
<div className="grid gap-2 sm:grid-cols-2">
<input className="input" placeholder="Contact name" aria-label="Contact name" required />
<input type="email" className="input" placeholder="Email" aria-label="Email" required />
</div>
<select className="input" aria-label="Tier interest"><option>Bronze</option><option>Silver</option><option>Gold</option><option>Platinum</option><option>Custom</option></select>
<textarea className="input min-h-28" placeholder="Tell us about your goals" aria-label="Message"></textarea>
<label className="flex items-start gap-3 text-xs opacity-80">
<input type="checkbox" className="mt-1 h-4 w-4"/> I agree to logo-use guidelines and brand approvals per our <a className="underline" href="#/legal#sponsorship-terms">Sponsorship Terms</a>.
</label>
<button className="btn-primary w-full justify-center" type="submit">Send</button>
</form>
</div>
</div>
</PageShell>
);
}
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 (
<PageShell title="Stories" icon={BookOpenText} eyebrow="Impact in motion" cta={<a href="#/testimonies" className="btn-secondary">Read testimonies</a>}>
<div className="grid gap-6 md:grid-cols-3">
{stories.map((s, i) => (
<article key={i} className="rounded-2xl border border-white/30 bg-white/70 p-6 dark:border-white/10 dark:bg-white/5">
<div className="text-xs uppercase tracking-wide text-neutral-500">{s.tag}</div>
<h3 className="mt-1 text-lg font-semibold">{s.title}</h3>
<p className="mt-2 text-sm text-neutral-700 dark:text-neutral-300">{s.body}</p>
<div className="mt-3 text-xs text-neutral-500">— {s.by}</div>
</article>
))}
</div>
<div className="rounded-2xl border border-white/30 bg-white/70 p-6 dark:border-white/10 dark:bg-white/5">
<div className="font-medium">Submit your story</div>
<form className="mt-3 grid gap-3" onSubmit={(e)=>{e.preventDefault(); alert("Thanks for sharing! We'll review and publish with consent.");}}>
<input className="input" placeholder="Your name (or Anonymous)" aria-label="Name" />
<textarea className="input min-h-28" placeholder="Your story (no private student info)" aria-label="Story" required />
<label className="flex items-start gap-3 text-xs opacity-80">
<input type="checkbox" className="mt-1 h-4 w-4" required /> I grant permission to publish this story (edited for length/clarity). I have removed personally identifying student information.
</label>
<button className="btn-primary w-full justify-center">Submit</button>
</form>
</div>
</PageShell>
);
}
function TestimoniesPage() {
const items = [
{ who: "Parent", quote: "The uniform voucher saved us right before school started." },
{ who: "Counselor", quote: "The 24-hr turnaround is unmatched for our families." },
{ who: "Principal", quote: "Attendance improves when kids have what they need." },
];
return (
<PageShell title="Testimonies" icon={Quote} eyebrow="What people say">
<div className="grid gap-6 md:grid-cols-3">
{items.map((t, i) => (
<figure key={i} className="rounded-2xl border border-white/30 bg-white/70 p-6 dark:border-white/10 dark:bg-white/5">
<blockquote className="text-balance">“{t.quote}”</blockquote>
<figcaption className="mt-3 text-sm text-neutral-600 dark:text-neutral-300">— {t.who}</figcaption>
</figure>
))}
</div>
</PageShell>
);
}
function LegalPage() {
return (
<PageShell title="Legal & Policies" icon={FileText} eyebrow="Trust & compliance" cta={<a href="#/donate" className="btn-secondary">Donate</a>}>
<PolicySection id="privacy" title="Privacy Policy">
<p>We collect only the data necessary to process donations, volunteer coordination, and email subscriptions. We do not sell or trade personal data. You may request access, correction, or deletion at <a className="underline" href="mailto:privacy@miraclesinmotion.org">privacy@miraclesinmotion.org</a>.</p>
</PolicySection>
<PolicySection id="donor-privacy" title="Donor Privacy Policy">
<p>We never sell, share, or trade donor names or personal information with any other entity, nor send donor mailings on behalf of other organizations. This policy applies to all information received online and offline.</p>
</PolicySection>
<PolicySection id="terms" title="Terms of Use">
<ul className="list-disc pl-5">
<li>Content is provided “as is” for informational purposes; no warranties.</li>
<li>By submitting content (stories/testimonies), you grant us a non-exclusive license to edit and publish.</li>
<li>Unauthorized scraping or misuse of site content is prohibited.</li>
</ul>
</PolicySection>
<PolicySection id="cookies" title="Cookie Policy">
<p>We use essential cookies for site functionality and, with your consent, privacy-friendly analytics. You can change your choices via the cookie banner or by clearing site data.</p>
</PolicySection>
<PolicySection id="refunds" title="Refund Policy">
<p>Donations are generally non-refundable. If you believe a donation was made in error, contact <a className="underline" href="mailto:donate@miraclesinmotion.org">donate@miraclesinmotion.org</a> within 15 days for assistance.</p>
</PolicySection>
<PolicySection id="gift-acceptance" title="Gift Acceptance Policy">
<ul className="list-disc pl-5">
<li>We accept monetary gifts, new school supplies/clothing, DAF grants, and publicly traded securities.</li>
<li>In-kind items must be new and appropriate for school settings. We reserve the right to decline gifts not aligned with mission or capacity.</li>
</ul>
</PolicySection>
<PolicySection id="volunteer-waiver" title="Volunteer Waiver & Liability Release">
<p>By volunteering, you agree to follow staff instructions; assume ordinary risks associated with volunteering; and release Miracles in Motion from liability for ordinary negligence. You consent to background checks where required and agree to our child-safeguarding rules (no unsupervised time with minors, no personal contact outside events). Under 18 requires guardian consent.</p>
</PolicySection>
<PolicySection id="child-safety" title="Child Safety & Safeguarding">
<ul className="list-disc pl-5">
<li>No one-on-one unsupervised interactions with minors.</li>
<li>Report suspected abuse/neglect immediately to authorities and notify staff.</li>
<li>Photography of minors requires prior written consent from a parent/guardian.</li>
</ul>
</PolicySection>
<PolicySection id="nondiscrimination" title="Non‑Discrimination Statement">
<p>We serve students regardless of race, color, religion, national origin, sex, sexual orientation, gender identity, disability, or any other protected status.</p>
</PolicySection>
<PolicySection id="accessibility" title="Accessibility Statement">
<p>We aim to meet WCAG 2.1 AA standards. If you encounter accessibility barriers, email <a className="underline" href="mailto:access@miraclesinmotion.org">access@miraclesinmotion.org</a>.</p>
</PolicySection>
<PolicySection id="financials" title="Financials & 990">
<p>Miracles in Motion is a 501(c)(3) nonprofit. EIN 12-3456789. Annual reports and Form 990s are available upon request or linked here when published.</p>
</PolicySection>
<PolicySection id="sponsorship-terms" title="Sponsorship Terms & Logo Use">
<ul className="list-disc pl-5">
<li>Logo usage requires prior written approval and must follow brand guidelines.</li>
<li>Sponsorship does not imply endorsement of products or services.</li>
<li>Benefits may be adjusted for equivalency based on availability.</li>
</ul>
</PolicySection>
<div className="rounded-2xl border border-white/30 bg-white/70 p-4 text-xs opacity-80 dark:border-white/10 dark:bg-white/5">
<p>State disclosures: Certain states may require additional disclosures for charitable solicitations. Where applicable, our disclosures will be presented on the donation page and receipts.</p>
</div>
</PageShell>
);
}
function PolicySection({ id, title, children }: { id: string; title: string; children: React.ReactNode }) {
return (
<section id={id} className="rounded-2xl border bord