From c9948dff4ad75e7f35b7ed2dabe1fde72f6c592c Mon Sep 17 00:00:00 2001 From: defiQUG Date: Tue, 26 May 2026 21:02:02 -0700 Subject: [PATCH] Align site copy and structure with client foundation brief Add About, Mission, What We Do, Events, and Contact pages; update hero, footer, nav, EIN 33-4887159, and info@faithforwardmiracles.org; warm cream/beige palette and faith-centered messaging for LA County outreach. Co-authored-by: Cursor --- index.html | 12 +- public/brand/MIM4U-Brand-Kit.zip | Bin 2834127 -> 2834127 bytes public/sitemap.xml | 25 ++ src/App.tsx | 178 +++++++------- src/components/Footer.tsx | 110 ++++++--- src/components/Navigation.tsx | 149 ++++++------ src/components/SEO/SEOHead.tsx | 7 +- src/components/__tests__/Footer.test.tsx | 65 ++---- src/components/__tests__/Navigation.test.tsx | 62 ++--- src/components/home/WhoWeServe.tsx | 41 ++++ src/content/siteContent.ts | 115 +++++++++ src/index.css | 33 +++ src/pages/BrandPage/BrandAssetsPage.tsx | 4 +- src/pages/DonatePage/index.tsx | 2 +- src/pages/foundation/FoundationPages.tsx | 233 +++++++++++++++++++ src/pages/foundation/index.ts | 8 + 16 files changed, 758 insertions(+), 286 deletions(-) create mode 100644 src/components/home/WhoWeServe.tsx create mode 100644 src/content/siteContent.ts create mode 100644 src/pages/foundation/FoundationPages.tsx create mode 100644 src/pages/foundation/index.ts diff --git a/index.html b/index.html index be1c30a..d5d5059 100644 --- a/index.html +++ b/index.html @@ -7,21 +7,21 @@ - Miracles In Motion | 501(c)3 Non-Profit Organization - + Miracles in Motion Foundation | Faith • Hope • Community • Restoration + - - + + - - + + diff --git a/public/brand/MIM4U-Brand-Kit.zip b/public/brand/MIM4U-Brand-Kit.zip index 0e9f2000e1ea540db8df35b8c8a95ebf3c661ccc..239ca9efa56e80da58286df6b29ed001969f1365 100644 GIT binary patch delta 896 zcmZvaKWGzC9LK#Eb4}vqkD8{j_SDOzSJT&mMa3kS#6@w@N(Nh9TwIdN4I(%Q4#5sL zs)*i{O~?s~4vlZR$e14ule5B1ED?qi#v8^O~|;mWZFx?RGQsg6S85{*{>f6^CM2^q3|rt zomQ*wux~9vy~)LpM!fV&e@>_F8ciSV^|AD(59|egATqr<@#Ha2`cw#b)!5Qk41gdA zfql$Zl-kogX=_#TI)zR4dsWiTlS#)`8`7d!#reXfwbGD47(_r6#K3-V02~ByFbNWD zr7?AJoi}(|PHJugjNUFM!67gW4ucsWgCpQ5+b$m~ec?s11!Yb&+^MX%pxnF9#Wx#D z$`uWh{n$|a6I}fHR+;UI-UXlCRFZ@{*V%z@(|!=l~!3sru@SF`jK zshIY!9Gx2cBQLV_%x=}6quHJ+^V;iUF&m3xd72x}H}a$Po5Ma%CF@itRd*MepYo25 z-G<_hPEQkK;HL}pL@(ai9aXmr^yF^!!+%w|hzVZDp$@kOs=LR#;TV@ZQ=&_x=Ivpd HC3@o@7|kFG delta 896 zcmZvaJ#5oJ7>4ngq)Bj-@YjY?1CCRd^je9EARIdm3y7r@WuS$Hg$dIEAu%8^M0D^7 z2!W?;C;UA!rG!mriy*b^wZ?r@j_HoRX2zG)Ph%>V_^5`K?`dCQ>)i|YSB|s9S zz%C|QQfGo(Yr31u5{;L!O37xwmL=^B7uAL|7dL#-S!zgN6r@20WWjE*2kZs=zf2W8FTPAr*^ z9ERt5ahlKlat>lJ*GVttS$a|ZROiOGuBt{x##5b)R{&E$1JmFrD6)(=CzlHVm1_K4O$+|w~c{%thT}ZvOinqtI8%diP4X5 znK;`(+%@TmUW{c66?%-A+s=+IH!Jjbm=$dV_5FWU+3HOg$i2~5Wqzq|c^u5~monthly 0.5 + + https://mim4u.org/#/about + monthly + 0.8 + + + https://mim4u.org/#/mission + monthly + 0.8 + + + https://mim4u.org/#/what-we-do + monthly + 0.8 + + + https://mim4u.org/#/events + weekly + 0.7 + + + https://mim4u.org/#/contact + monthly + 0.8 + https://mim4u.org/#/brand monthly diff --git a/src/App.tsx b/src/App.tsx index 23112f4..f08f2fc 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -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 ( <> + @@ -813,7 +819,7 @@ function Hero() {
{/* Enhanced 3D Background Layers */} @@ -846,19 +852,21 @@ function Hero() { >
+

+ {SITE.tagline} +

- Equipping kids for success— - school supplies, clothing, & more + {SITE.brandMessage}

- 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.

@@ -869,14 +877,14 @@ function Hero() { Volunteer - - Read stories + + About us
    -
  • 501(c)(3) public charity
    • -
  • Donations tax-deductible
    • -
  • Community-driven impact
    • +
  • {SITE.legalStatus}
    • +
  • EIN {SITE.ein}
    • +
  • Los Angeles County
@@ -1028,10 +1036,10 @@ function HeroShowcase() {
- - - - + + + +
) @@ -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 (
@@ -1149,7 +1158,7 @@ function Programs() {
- +
{items.map((i, idx) => ( @@ -1158,6 +1167,11 @@ function Programs() { ))}
+
) @@ -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() {
- +
- {stats.map((s, i) => ( + {pillars.map((s, i) => ( - +
{s.label}
+

{s.desc}

 ))}
-
-
-
Where your donation goes
-
    -
  • 85% programs • 10% ops • 5% fundraising
    • -
  • Average grant: $48 for supplies; $72 for clothing
    • -
+
+
+
Your gift restores hope
+

+ Donations support outreach, emergency assistance, wellness support, and resource navigation for women, families, survivors, and communities in crisis throughout Los Angeles County. +

- @@ -1294,32 +1305,6 @@ function Impact() { ) } -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." }, @@ -1583,10 +1568,10 @@ function CTA() {

Prefer offline?

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

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

+

{SITE.legalStatus}. EIN {SITE.ein}.

@@ -1995,7 +1980,7 @@ function DonatePage() { Secure 256-bit SSL encryption

- 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}.

@@ -2012,7 +1997,7 @@ function DonatePage() {

- 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}.

@@ -2115,8 +2100,8 @@ function DonatePage() { @@ -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 ( - Read testimonies}> + Read testimonies}> +
{stories.map((s, i) => (
@@ -2289,7 +2275,7 @@ function ImpactReportPage() { Donate to support more students}>

- 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 contact@mim4u.org. + Miracles in Motion Foundation serves vulnerable individuals and families across Los Angeles County. For impact updates or data requests, contact {SITE.email}.

@@ -2365,7 +2351,7 @@ function LegalPage() {

We aim to meet WCAG 2.1 AA standards. If you encounter accessibility barriers, email access@miraclesinmotion.org.

-

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.

+

{SITE.name} is a {SITE.legalStatus.toLowerCase()}. EIN {SITE.ein}. Annual reports and Form 990s are available upon request or linked here when published.
    @@ -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 case '/brand': return + case '/about': + return + case '/mission': + return + case '/what-we-do': + return + case '/events': + return + case '/contact': + return case '/impact': return case '/request-assistance': diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx index 9842a20..7839d0a 100644 --- a/src/components/Footer.tsx +++ b/src/components/Footer.tsx @@ -1,62 +1,120 @@ -import { - Facebook, - Globe, - Instagram, -} from 'lucide-react' +import { Facebook, Globe, Instagram, Mail } from 'lucide-react' +import { SITE } from '../content/siteContent' import { LogoMark } from './ui/LogoMark' export function Footer() { return ( -
    + ) } -export default Footer \ No newline at end of file +export default Footer diff --git a/src/components/Navigation.tsx b/src/components/Navigation.tsx index 262111b..edcec37 100644 --- a/src/components/Navigation.tsx +++ b/src/components/Navigation.tsx @@ -1,15 +1,8 @@ import React, { useEffect } from 'react' import { motion } from 'framer-motion' -import { - Heart, - Menu, - Moon, - SunMedium, - X, -} from 'lucide-react' +import { Heart, Menu, Moon, SunMedium, X } from 'lucide-react' +import { NAV_LINKS } from '../content/siteContent' import { trackEvent } from '../utils/analytics' - -// Import UI components import { Magnetic, LogoMark } from './ui' interface NavProps { @@ -20,12 +13,10 @@ interface NavProps { } export function Navigation({ darkMode, setDarkMode, mobileMenuOpen, setMobileMenuOpen }: NavProps) { - // Close mobile menu when route changes useEffect(() => { setMobileMenuOpen(false) - }, [window.location.hash]) + }, [window.location.hash, setMobileMenuOpen]) - // Handle keyboard navigation const handleKeyDown = (e: React.KeyboardEvent, action: () => void) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault() @@ -33,39 +24,51 @@ export function Navigation({ darkMode, setDarkMode, mobileMenuOpen, setMobileMen } } + const navLinkClass = + 'navlink focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 rounded text-sm lg:text-[0.9375rem]' + return ( <> -
diff --git a/src/pages/DonatePage/index.tsx b/src/pages/DonatePage/index.tsx index edf5f8f..eea0c96 100644 --- a/src/pages/DonatePage/index.tsx +++ b/src/pages/DonatePage/index.tsx @@ -362,7 +362,7 @@ const TrustBadges: React.FC = () => (

- EIN: 12-3456789 • All donations are tax-deductible to the fullest extent allowed by law. + EIN: 33-4887159 • All donations are tax-deductible to the fullest extent allowed by law.

diff --git a/src/pages/foundation/FoundationPages.tsx b/src/pages/foundation/FoundationPages.tsx new file mode 100644 index 0000000..19f5c85 --- /dev/null +++ b/src/pages/foundation/FoundationPages.tsx @@ -0,0 +1,233 @@ +import type { ReactNode } from 'react' +import { ArrowRight, Calendar, Heart, Mail, MapPin, Users } from 'lucide-react' +import { + EVENTS, + INTRO, + MISSION, + POPULATIONS_SERVED, + SITE, + STORIES_OF_HOPE, + VISION, + WHAT_WE_DO, + WHY_WE_STARTED, +} from '../../content/siteContent' + +function PageIntro({ + eyebrow, + title, + children, +}: { + eyebrow: string + title: string + children: ReactNode +}) { + return ( +
+

{eyebrow}

+

{title}

+
+ {children} +
+
+ ) +} + +function ContentCard({ title, children }: { title: string; children: ReactNode }) { + return ( +
+

+ {title} +

+
+ {children} +
+
+ ) +} + +export function AboutPage() { + return ( +
+ +

{SITE.brandMessage}

+

{INTRO.lead}

+

{INTRO.body}

+

{INTRO.belief}

+

{INTRO.scope}

+

{INTRO.restoration}

+

{SITE.closingLine}

+ + +
+ +
    + {POPULATIONS_SERVED.map((item) => ( +
  • {item}
    • + ))} +
+ + + +

{WHY_WE_STARTED.lead}

+

{WHY_WE_STARTED.body}

+

{WHY_WE_STARTED.reminder}

+

{WHY_WE_STARTED.goal}

+ + + +
+
+ ) +} + +export function MissionPage() { + return ( +
+ +

{MISSION.statement}

+

{MISSION.dedication}

+ + +
+ +

{VISION.lead}

+

{VISION.body}

+ + + Support our mission + +
+
+ ) +} + +export function WhatWeDoPage() { + return ( +
+ +

+ Compassionate, practical support for vulnerable individuals and families — from outreach and + advocacy to emergency relief and resource navigation. +

+ + +
+ {WHAT_WE_DO.map((item) => ( +
+

+ {item.title} +

+

+ {item.body} +

+
+ ))} +
+ + +
+ ) +} + +export function EventsPage() { + return ( +
+ +

{EVENTS.lead}

+

{EVENTS.body}

+ + +
+
+ +

+ Event listings will be posted here as dates are confirmed. We welcome volunteers and + community partners. +

+ +
+
+
+ ) +} + +export function ContactPage() { + return ( +
+ +

+ We would love to hear from you — whether you need support, want to volunteer, or hope to + partner with our foundation. +

+ + +
+
+
+ +
+
Email
+ + {SITE.email} + +
+
+
+ +
+
Service area
+

{SITE.serviceArea}

+
+
+
+ + + +

+ {SITE.name} · {SITE.legalStatus} · EIN {SITE.ein} +

+
+
+ ) +} + +export function StoriesIntroBlock() { + return ( +
+

{STORIES_OF_HOPE.lead}

+

{STORIES_OF_HOPE.body}

+

{STORIES_OF_HOPE.closing}

+
+ ) +} diff --git a/src/pages/foundation/index.ts b/src/pages/foundation/index.ts new file mode 100644 index 0000000..ac2e359 --- /dev/null +++ b/src/pages/foundation/index.ts @@ -0,0 +1,8 @@ +export { + AboutPage, + ContactPage, + EventsPage, + MissionPage, + StoriesIntroBlock, + WhatWeDoPage, +} from './FoundationPages'