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

Align site copy and structure with client foundation brief

Browse Source 
Add About, Mission, What We Do, Events, and Contact pages; update hero, footer, nav, EIN 33-4887159, and [email protected]; warm cream/beige palette and faith-centered messaging for LA County outreach.

Co-authored-by: Cursor <[email protected]>
This commit is contained in:
defiQUG
2026-05-26 21:02:02 -07:00
co-authored by Cursor
parent 33aab0d3de
commit c9948dff4a
16 changed files with 758 additions and 286 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/App.tsx
+87 -91
View File
@@ -67,6 +67,16 @@ import MimChatAgent from './components/MimChatAgent'
import { Navigation } from './components/Navigation'
import { Footer } from './components/Footer'
import { BrandAssetsPage } from './pages/BrandPage'
import {
AboutPage,
ContactPage,
EventsPage,
MissionPage,
StoriesIntroBlock,
WhatWeDoPage,
} from './pages/foundation'
import { WhoWeServe } from './components/home/WhoWeServe'
import { SITE, WHAT_WE_DO } from './content/siteContent'
/**
* Miracles in Motion — Complete Non-Profit Website
@@ -590,11 +600,6 @@ interface FeatureCardProps {
body: string
}
interface StatProps {
label: string
value: number
}
interface SectionHeaderProps {
eyebrow?: string
title: string
@@ -788,6 +793,7 @@ function HomePage() {
return (
<>
<Hero />
<WhoWeServe />
<PartnerMarquee />
<Programs />
<Impact />
@@ -813,7 +819,7 @@ function Hero() {
<section ref={containerRef} className="relative isolate overflow-hidden min-h-screen flex items-center">
{/* Enhanced 3D Background Layers */}
<motion.div
className="absolute inset-0 bg-gradient-to-br from-primary-50/30 via-white to-secondary-50/30 dark:from-gray-900/30 dark:via-gray-800/30 dark:to-gray-900/30"
className="absolute inset-0 bg-gradient-to-br from-[var(--mim-cream)] via-white to-secondary-50/40 dark:from-gray-900/30 dark:via-gray-800/30 dark:to-gray-900/30"
style={{ y: backgroundY }}
>
<FloatingParticles />
@@ -846,19 +852,21 @@ function Hero() {
>
<div className="lg:col-span-7">
<ParallaxContainer depth={0.3}>
<p className="text-sm font-medium tracking-wide text-secondary-700 dark:text-secondary-300">
{SITE.tagline}
</p>
<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 transform-gpu"
className="mt-3 text-balance font-serif text-4xl font-bold tracking-tight sm:text-5xl md:text-6xl transform-gpu"
style={{ transformStyle: 'preserve-3d' }}
>
Equipping kids for success—
<span className="relative whitespace-pre gradient-text"> school supplies, clothing, & more</span>
{SITE.brandMessage}
</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.
Bringing hope, compassion, and support to individuals and families facing life’s most difficult moments — through faith, community outreach, and compassionate care in Los Angeles County.
</p>
<div className="mt-8 flex flex-wrap items-center gap-3">
<Magnetic>
@@ -869,14 +877,14 @@ function Hero() {
<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 href="#/about" className="rounded-full border border-transparent px-4 py-2 text-sm text-neutral-700 underline-offset-4 hover:underline dark:text-neutral-300">
About us
</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>
<li className="flex items-center gap-2"><CheckCircle2 className="h-4 w-4 text-secondary-600"/> {SITE.legalStatus}</li>
<li className="flex items-center gap-2"><CheckCircle2 className="h-4 w-4 text-secondary-600"/> EIN {SITE.ein}</li>
<li className="flex items-center gap-2"><CheckCircle2 className="h-4 w-4 text-secondary-600"/> Los Angeles County</li>
</ul>
</ParallaxContainer>
</div>
@@ -1028,10 +1036,10 @@ function HeroShowcase() {
<div className="relative mx-auto max-w-sm lg:max-w-md xl:max-w-lg">
<div className="absolute -inset-6 -z-10 rounded-3xl bg-gradient-to-tr from-primary-500/15 via-secondary-500/15 to-secondary-600/15 blur-2xl" />
<div className="grid grid-cols-2 gap-3 sm:gap-4">
<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" />
<TiltCard icon={Users} title="Community Outreach" desc="Direct support for families in need" />
<TiltCard icon={Heart} title="Crisis & Relief" desc="Fire, disaster, and emergency assistance" />
<TiltCard icon={Shield} title="Advocacy & Navigation" desc="Resources, referrals, and compassionate care" />
<TiltCard icon={Sparkles} title="Hope & Restoration" desc="Faith-rooted support when it matters most" />
</div>
</div>
)
@@ -1117,11 +1125,12 @@ function PartnerMarquee() {
}
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." },
]
const icons = [Users, Heart, HomeIcon, Globe, Shield, Star] as const
const items = WHAT_WE_DO.slice(0, 3).map((p, idx) => ({
icon: icons[idx] ?? Heart,
title: p.title,
body: p.body,
}))
return (
<section id="programs" className="relative py-20 overflow-hidden">
@@ -1149,7 +1158,7 @@ function Programs() {
<div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 relative z-10">
<ParallaxContainer depth={0.2}>
<SectionHeader eyebrow="What we do" title="Practical, student-first programs" subtitle="Flexible help that meets families where they are." />
<SectionHeader eyebrow="What we do" title="Compassionate support when it matters most" subtitle="Outreach, advocacy, emergency assistance, and resource navigation for vulnerable populations." />
</ParallaxContainer>
<div className="mt-10 grid gap-6 md:grid-cols-3">
{items.map((i, idx) => (
@@ -1158,6 +1167,11 @@ function Programs() {
</ParallaxContainer>
))}
</div>
<div className="mt-10 text-center">
<a href="#/what-we-do" className="btn-secondary">
See all programs <ArrowRight className="ml-1 inline h-4 w-4" />
</a>
</div>
</div>
</section>
)
@@ -1216,11 +1230,11 @@ function FeatureCard({ icon: Icon, title, body }: FeatureCardProps) {
}
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 },
const pillars = [
{ label: "Community outreach", desc: "Direct support for underserved families" },
{ label: "Emergency assistance", desc: "Crisis, fire, and disaster relief" },
{ label: "Advocacy & navigation", desc: "Connecting people to hope and resources" },
{ label: "Faith & restoration", desc: "Dignity, empathy, and compassionate care" },
]
return (
@@ -1251,41 +1265,38 @@ function Impact() {
<div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 relative z-10">
<ParallaxContainer depth={0.2}>
<SectionHeader eyebrow="Impact" title="Every gift moves a student forward" subtitle="Transparent, measurable outcomes powered by local partnerships." />
<SectionHeader eyebrow="Our heart" title="Healing begins when people feel seen" subtitle={SITE.closingLine} />
</ParallaxContainer>
<div className="mt-12 grid gap-6 sm:grid-cols-2 lg:grid-cols-4">
{stats.map((s, i) => (
{pillars.map((s, i) => (
<ParallaxContainer key={i} depth={0.3 + i * 0.05}>
<motion.div
initial={{ opacity: 0, y: 30, rotateX: -15 }}
whileInView={{ opacity: 1, y: 0, rotateX: 0 }}
initial={{ opacity: 0, y: 30 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true }}
transition={{ duration: 0.8, delay: i * 0.15 }}
whileHover={{
scale: 1.05,
rotateY: 8,
z: 60,
boxShadow: "0 25px 50px -12px rgba(0, 0, 0, 0.25)"
}}
style={{ transformStyle: 'preserve-3d' }}
className="card h-full text-center"
>
<Stat label={s.label} value={s.value} />
<div className="font-semibold tracking-tight text-primary-800 dark:text-primary-100">{s.label}</div>
<p className="mt-2 text-sm text-neutral-600 dark:text-neutral-400">{s.desc}</p>
</motion.div>
</ParallaxContainer>
))}
</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 className="mt-10 grid items-center gap-6 rounded-2xl border border-secondary-300/30 bg-secondary-50/50 p-6 sm:grid-cols-2 dark:border-secondary-700/30 dark:bg-secondary-900/20">
<div className="text-sm text-primary-900 dark:text-primary-100">
<div className="font-medium">Your gift restores hope</div>
<p className="mt-3 leading-relaxed">
Donations support outreach, emergency assistance, wellness support, and resource navigation for women, families, survivors, and communities in crisis throughout Los Angeles County.
</p>
</div>
<div className="flex items-center justify-end">
<a href="#/impact" className="btn-primary">
See the impact report <ArrowRight className="ml-2 h-4 w-4" />
<div className="flex flex-wrap items-center justify-end gap-3">
<a href="#/donate" className="btn-primary">
Donate <ArrowRight className="ml-2 h-4 w-4" />
</a>
<a href="#/stories" className="btn-secondary">
Stories of hope
</a>
</div>
</div>
@@ -1294,32 +1305,6 @@ function Impact() {
)
}
function Stat({ label, value }: StatProps) {
return (
<div className="card text-center">
<div className="absolute -right-10 -top-10 h-28 w-28 rounded-full bg-gradient-to-br from-primary-500/20 to-secondary-600/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, mv])
return <motion.span>{rounded}</motion.span>
}
function HowItWorks() {
const steps = [
{ title: "Referral", body: "A school counselor, social worker, or parent submits a simple request." },
@@ -1583,10 +1568,10 @@ function CTA() {
<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"/> 20274 Via Medici, Porter Ranch, CA 91326</li>
<li className="flex items-center gap-2"><Mail className="h-4 w-4"/> [email protected]</li>
<li className="flex items-center gap-2"><Mail className="h-4 w-4"/> {SITE.email}</li>
<li className="flex items-center gap-2"><Phone className="h-4 w-4"/> (818) 491-6884</li>
</ul>
<p className="mt-3 text-xs text-white/80">Miracles in Motion is a 501(c)(3). EIN 88-1234567.</p>
<p className="mt-3 text-xs text-white/80">{SITE.legalStatus}. EIN {SITE.ein}.</p>
</div>
</div>
</div>
@@ -1995,7 +1980,7 @@ function DonatePage() {
<span>Secure 256-bit SSL encryption</span>
</div>
<p className="text-xs text-neutral-500 dark:text-neutral-500 mt-2">
You'll receive an email receipt for your tax records. Donations are tax-deductible to the extent allowed by law. EIN 12-3456789.
You'll receive an email receipt for your tax records. Donations are tax-deductible to the extent allowed by law. EIN {SITE.ein}.
</p>
</div>
</div>
@@ -2012,7 +1997,7 @@ function DonatePage() {
</div>
</div>
<p className="text-sm text-neutral-700 dark:text-neutral-300 mb-3">
Many employers will match your charitable donation. Check with your HR department and provide our EIN: 12-3456789.
Many employers will match your charitable donation. Check with your HR department and provide our EIN: {SITE.ein}.
</p>
<a href="#" className="inline-flex items-center gap-2 text-sm text-primary-600 dark:text-primary-400 hover:text-primary-700 dark:hover:text-primary-300 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 rounded">
<ExternalLink className="h-4 w-4" />
@@ -2115,8 +2100,8 @@ function DonatePage() {
</div>
<div className="flex items-center gap-2">
<Mail className="h-4 w-4 text-primary-600 dark:text-primary-400" />
<a href="mailto:[email protected]" className="text-primary-600 dark:text-primary-400 hover:text-primary-700 dark:hover:text-primary-300">
contact@mim4u.org
<a href={SITE.emailHref} className="text-primary-600 dark:text-primary-400 hover:text-primary-700 dark:hover:text-primary-300">
{SITE.email}
</a>
</div>
</div>
@@ -2230,13 +2215,14 @@ function SponsorsPage() {
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" },
{ title: "A family found hope again", tag: "Outreach", body: "After a fire displaced their home, a mother and children received emergency support and compassionate guidance through recovery.", by: "Community partner" },
{ title: "Strength after hardship", tag: "Advocacy", body: "A survivor connected with resources and encouragement — reminded that she matters and brighter days are ahead.", by: "Volunteer" },
{ title: "Community showed up", tag: "Events", body: "Neighbors and volunteers came together at an outreach event to serve families with supplies, prayer, and heartfelt support.", by: "Event volunteer" },
]
return (
<PageShell title="Stories" icon={BookOpenText} eyebrow="Impact in motion" cta={<a href="#/testimonies" className="btn-secondary">Read testimonies</a>}>
<PageShell title="Stories of Hope" icon={BookOpenText} eyebrow="Hope in motion" cta={<a href="#/testimonies" className="btn-secondary">Read testimonies</a>}>
<StoriesIntroBlock />
<div className="grid gap-6 md:grid-cols-3">
{stories.map((s, i) => (
<article key={i} className="card">
@@ -2289,7 +2275,7 @@ function ImpactReportPage() {
<PageShell title="Impact Report" icon={BarChart3} eyebrow="Our impact in numbers" cta={<a href="#/donate" className="btn-primary">Donate to support more students</a>}>
<div className="max-w-4xl mx-auto space-y-8">
<p className="text-lg text-neutral-700 dark:text-neutral-300">
Miracles in Motion provides essential supplies, clothing, and support to students in need. Below is a summary of our impact. For the full report or data requests, contact <a className="underline" href="mailto:[email protected]">contact@mim4u.org</a>.
Miracles in Motion Foundation serves vulnerable individuals and families across Los Angeles County. For impact updates or data requests, contact <a className="underline" href={SITE.emailHref}>{SITE.email}</a>.
</p>
<div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-4">
<div className="card text-center">
@@ -2365,7 +2351,7 @@ function LegalPage() {
<p>We aim to meet WCAG 2.1 AA standards. If you encounter accessibility barriers, email <a className="underline" href="mailto:[email protected]">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>
<p>{SITE.name} is a {SITE.legalStatus.toLowerCase()}. EIN {SITE.ein}. 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 space-y-2">
@@ -4558,7 +4544,7 @@ function AppContent() {
// Update document title based on current route
useEffect(() => {
document.title = currentPath === "/"
? "Miracles in Motion — Essentials for Every Student"
? `${SITE.name} — ${SITE.brandMessage}`
: `Miracles in Motion — ${currentPath.replace("/", "").replace(/-/g, " ").replace(/\b\w/g, (m) => m.toUpperCase())}`
}, [currentPath])
@@ -4579,6 +4565,16 @@ function AppContent() {
return <LegalPage />
case '/brand':
return <BrandAssetsPage />
case '/about':
return <AboutPage />
case '/mission':
return <MissionPage />
case '/what-we-do':
return <WhatWeDoPage />
case '/events':
return <EventsPage />
case '/contact':
return <ContactPage />
case '/impact':
return <ImpactReportPage />
case '/request-assistance':