From e24cb6379aad9b8acb00455b83b4fededd676a35 Mon Sep 17 00:00:00 2001
From: defiQUG <defi@defi-oracle.io>
Date: Tue, 26 May 2026 22:00:39 -0700
Subject: [PATCH] Fix stale home copy, enlarge nav logo, and refresh PWA cache

Replace student/counselor sections with foundation messaging; show nav from md breakpoint; workbox skipWaiting so deploys reach browsers faster.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 public/brand/MIM4U-Brand-Kit.zip | Bin 2834127 -> 2834127 bytes
 src/App.tsx                      |  58 ++++++++++++++-----------------
 src/components/Navigation.tsx    |   8 ++---
 src/content/siteContent.ts       |  34 ++++++++++++++++++
 src/index.css                    |  22 ++++++------
 vite.config.ts                   |   9 +++--
 6 files changed, 84 insertions(+), 47 deletions(-)

diff --git a/public/brand/MIM4U-Brand-Kit.zip b/public/brand/MIM4U-Brand-Kit.zip
index 239ca9efa56e80da58286df6b29ed001969f1365..81e6b49250fdb5212174c1afdfd4d8d612329238 100644
GIT binary patch
delta 896
zcmX^AcMaotAl{(O#FV^#vM!Svn`D((mQ+={l^WA_D>dd54IEqyAdtL%x@I$@CRqA?
z<#a<%C6(<p&5RbjKz-A<O<>eQk>Q%ixKafqvvn(6X8Y5vjLHQdK`u2Wh;m7|J?9$0
z63dyjq2{z(FJ}f~79eH?Vz%wp%h{(*1u430!vWC^bS1Mb2M}`tF&7YXZ)djUIVuHG
zbSj(&X43ZG;XG=tAVKB1Ji2UBK>xk3Y!92u1H`;Q%m>8$Kr8^nf<P<;#KJ%<0>q*~
zEVeytuDH(@kO4~qCDgzM0Ij|dC;`NhKr98s(m*T&#Iisv2gLH*F9a&s-2!P6&{0%}
z+Pd9VN3p3NBzSPQq7u}k?JsvLva*8&KO9n2g$hCf*#5Ah1Sn#rM;=9!S#eY`locfN
z|CA!kNf15$rxmx@f@D}Zm0&X4fzh?z1tj>$7cSV&=clxt&rkVU15?WS>Cet7E3-)h
z!$!KQo&UTt5UT*ODiEsyu{scI0I}wF{_|SynIMxQEVNCSB&()>wA2<yq>;52+UA&|
ztd`mqP*GWs-Z(V=b~L_#m9{0a`YbC{{fE)yWv#WXnWVsO0h?cG4Rjk4|D3h9DKcNh
zM%w_&M{;|qjkYnS=t-=ivbJy=kW45-h=Sd59GMRcWEnecLndj6JE!N^X(s~!Jf$X*

delta 896
zcmZvaKWGzC9LK#Eb4}vqkD8{j_SDOzSJT&mMa3kS#6@w@N(Nh9TwIdN4I(%Q4#5sL
zs)*i{O~?s~4vlZ<q$Q{ol7isiC@8q;ETZ3cm*!tR_zb`A_xJC;cilhFg)VqS35h$8
z7KtWS%!FZ>R$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<!_(^jtdx$}2R(MD=6e^l0s-0=rfI}XEh
zy*$Uoub29w6<JQP$g=vmP7;p&y`!pP4O`YsE80~-8q5L>%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

diff --git a/src/App.tsx b/src/App.tsx
index 8b456b1..a9b7920 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -78,7 +78,7 @@ import {
 import { AwarenessCampaigns } from './components/home/AwarenessCampaigns'
 import { CommunityGallery } from './components/home/CommunityGallery'
 import { WhoWeServe } from './components/home/WhoWeServe'
-import { COMMUNITY_PHOTOS, SITE, WHAT_WE_DO } from './content/siteContent'
+import { COMMUNITY_PHOTOS, HOME_TESTIMONIAL, HOW_IT_WORKS, SITE, WHAT_WE_DO } from './content/siteContent'
 
 /**
  * Miracles in Motion — Complete Non-Profit Website
@@ -1056,19 +1056,21 @@ function HeroShowcase() {
 }
 
 function PartnerMarquee() {
+  const partners =
+    'Los Angeles County • Faith communities • Outreach volunteers • Crisis & fire relief • Domestic violence advocacy • Youth & family support • Resource navigation'
   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="card">
           <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
+            <Sparkles className="h-4 w-4" /> Serving our community together
           </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-primary-500 to-secondary-600" />
-                  Lincoln Unified • Sunrise Elementary • Northview High • Rotary Club • City Youth Fund • BookBank • Caring Co.
+                  {partners}
                 </span>
               ))}
             </div>
@@ -1261,12 +1263,7 @@ function Impact() {
 }
 
 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." },
-  ]
+  const steps = HOW_IT_WORKS.steps.map((s) => ({ title: s.title, body: s.body }))
   
   return (
     <section id="how" className="relative py-24 overflow-hidden">
@@ -1305,7 +1302,7 @@ function HowItWorks() {
       
       <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 relative z-10">
         <ParallaxContainer depth={0.2}>
-          <SectionHeader eyebrow="How it works" title="Simple process, real results" subtitle="Designed with counselors, optimized for speed and dignity." />
+          <SectionHeader eyebrow={HOW_IT_WORKS.eyebrow} title={HOW_IT_WORKS.title} subtitle={HOW_IT_WORKS.subtitle} />
         </ParallaxContainer>
         <div className="mt-10 grid gap-6 md:grid-cols-2">
           <ParallaxContainer depth={0.3}>
@@ -1352,7 +1349,7 @@ function HowItWorks() {
           <div className="grid gap-6">
             <ParallaxContainer depth={0.4}>
               <motion.div 
-                className="rounded-2xl border border-emerald-500/20 bg-emerald-500/10 p-6"
+                className="rounded-2xl border border-primary-500/20 bg-primary-50/80 p-6 dark:border-primary-700/30 dark:bg-primary-900/20"
                 initial={{ opacity: 0, rotateX: 15, y: 20 }}
                 whileInView={{ opacity: 1, rotateX: 0, y: 0 }}
                 viewport={{ once: true }}
@@ -1367,7 +1364,7 @@ function HowItWorks() {
               >
                 <div className="flex items-center gap-3">
                   <motion.div 
-                    className="grid h-10 w-10 place-items-center rounded-xl bg-emerald-500 text-white"
+                    className="grid h-10 w-10 place-items-center rounded-xl bg-primary-600 text-white"
                     whileHover={{ rotateY: 180, scale: 1.1 }}
                     style={{ transformStyle: 'preserve-3d' }}
                   >
@@ -1375,7 +1372,7 @@ function HowItWorks() {
                   </motion.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>
+                <p className="mt-2 text-sm text-primary-900 dark:text-primary-100">{HOW_IT_WORKS.donorPromise}</p>
               </motion.div>
             </ParallaxContainer>
             <ParallaxContainer depth={0.5}>
@@ -1401,9 +1398,9 @@ function HowItWorks() {
                   >
                     <Users className="h-5 w-5"/>
                   </motion.div>
-                  <div className="font-semibold tracking-tight">For counselors</div>
+                  <div className="font-semibold tracking-tight">For partners & volunteers</div>
                 </div>
-                <p className="mt-2 text-sm text-secondary-950 dark:text-secondary-100">One-page referral. No uploads required. We do the running so students don't miss class.</p>
+                <p className="mt-2 text-sm text-secondary-950 dark:text-secondary-100">{HOW_IT_WORKS.partnerNote}</p>
               </motion.div>
             </ParallaxContainer>
           </div>
@@ -1420,11 +1417,11 @@ function Testimonial() {
         <div className="card p-8">
           <div className="absolute -left-10 -top-10 h-60 w-60 rounded-full bg-gradient-to-tr from-primary-500/30 to-secondary-600/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."
+            &ldquo;{HOME_TESTIMONIAL.quote}&rdquo;
           </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
+            <Star className="h-4 w-4 text-secondary-500" />
+            {HOME_TESTIMONIAL.attribution}
           </div>
         </div>
       </div>
@@ -1434,16 +1431,16 @@ function Testimonial() {
 
 function GetInvolved() {
   const options = [
-    { title: "Donate", body: "Fuel fast responses for urgent student needs.", href: "#/donate", accent: "from-secondary-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 },
+    { title: "Donate", body: "Restore hope through outreach, emergency aid, and compassionate care.", href: "#/donate", accent: "from-secondary-500 to-primary-500", icon: Heart },
+    { title: "Volunteer", body: "Serve at outreach events and support families in your community.", href: "#/volunteers", accent: "from-sky-500 to-secondary-500", icon: Users },
+    { title: "Partner with us", body: "Churches, businesses, and organizations — let's serve together.", href: "#/contact", accent: "from-primary-500 to-secondary-500", icon: Globe },
   ]
   
   return (
     <section id="get-involved" className="relative py-24 overflow-hidden">
       <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
         <ParallaxContainer depth={0.3}>
-          <SectionHeader eyebrow="Get involved" title="There's a role for everyone" subtitle="Give monthly, share skills, or introduce us to your school." />
+          <SectionHeader eyebrow="Get involved" title="There is a role for everyone" subtitle="Give, volunteer, or partner — every act of compassion builds hope." />
         </ParallaxContainer>
         
         <div className="mt-10 grid gap-6 md:grid-cols-3">
@@ -1509,22 +1506,21 @@ function CTA() {
           <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>
+              <h2 className="font-serif text-balance text-3xl font-semibold tracking-tight sm:text-4xl">Help restore hope in someone&apos;s hardest season</h2>
+              <p className="mt-3 max-w-md text-white/90">Your generosity supports outreach, emergency assistance, and resource navigation for families facing crisis throughout Los Angeles County.</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="inline-flex items-center gap-2 rounded-full border-2 border-white/40 px-6 py-3 text-sm font-medium text-white backdrop-blur transition hover:bg-white/10 focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2">
-                  Give monthly <ArrowRight className="ml-1 h-4 w-4" />
+                <a href="#/donate" className="btn-white">Donate now</a>
+                <a href="#/request-assistance" className="inline-flex items-center gap-2 rounded-full border-2 border-white/40 px-6 py-3 text-sm font-medium text-white backdrop-blur transition hover:bg-white/10 focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2">
+                  Request assistance <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>
+                <h3 className="font-medium tracking-tight">Contact us</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"/> {SITE.email}</li>
-                  <li className="flex items-center gap-2"><Phone className="h-4 w-4"/> (818) 491-6884</li>
+                  <li className="flex items-center gap-2"><Mail className="h-4 w-4"/> <a href={SITE.emailHref} className="underline">{SITE.email}</a></li>
+                  <li className="flex items-start gap-2"><MapPin className="mt-0.5 h-4 w-4 shrink-0"/> {SITE.serviceArea}</li>
                 </ul>
                 <p className="mt-3 text-xs text-white/80">{SITE.legalStatus}. EIN {SITE.ein}.</p>
               </div>
diff --git a/src/components/Navigation.tsx b/src/components/Navigation.tsx
index edcec37..de6d8e5 100644
--- a/src/components/Navigation.tsx
+++ b/src/components/Navigation.tsx
@@ -42,7 +42,7 @@ export function Navigation({ darkMode, setDarkMode, mobileMenuOpen, setMobileMen
           <LogoMark variant="nav" />
         </a>
 
-        <div className="hidden items-center gap-4 xl:gap-5 lg:flex">
+        <div className="hidden items-center gap-3 md:flex lg:gap-4 xl:gap-5">
           {NAV_LINKS.map((link) => (
             <a
               key={link.href}
@@ -60,7 +60,7 @@ export function Navigation({ darkMode, setDarkMode, mobileMenuOpen, setMobileMen
           ))}
         </div>
 
-        <div className="hidden items-center gap-3 lg:flex">
+        <div className="hidden items-center gap-3 md:flex">
           <Magnetic>
             <a
               href="#/donate"
@@ -85,7 +85,7 @@ export function Navigation({ darkMode, setDarkMode, mobileMenuOpen, setMobileMen
           </button>
         </div>
 
-        <div className="flex items-center gap-2 lg:hidden">
+        <div className="flex items-center gap-2 md:hidden">
           <Magnetic>
             <a
               href="#/donate"
@@ -116,7 +116,7 @@ export function Navigation({ darkMode, setDarkMode, mobileMenuOpen, setMobileMen
 
       <motion.div
         id="mobile-menu"
-        className="lg:hidden"
+        className="md:hidden"
         initial={false}
         animate={{ height: mobileMenuOpen ? 'auto' : 0, opacity: mobileMenuOpen ? 1 : 0 }}
         transition={{ duration: 0.2 }}
diff --git a/src/content/siteContent.ts b/src/content/siteContent.ts
index 93b319f..1860d5e 100644
--- a/src/content/siteContent.ts
+++ b/src/content/siteContent.ts
@@ -162,6 +162,40 @@ export const STORIES_OF_HOPE = {
     'This is more than a nonprofit organization — it is a movement built on faith, resilience, and the belief that lives can be transformed through love and support.',
 } as const
 
+export const HOW_IT_WORKS = {
+  eyebrow: 'How we help',
+  title: 'Compassionate support, step by step',
+  subtitle: 'A simple path from first contact to hope restored — with dignity at every step.',
+  steps: [
+    {
+      title: 'Reach out',
+      body: 'A family, partner, or community member contacts us or submits a request for assistance.',
+    },
+    {
+      title: 'Listen & respond',
+      body: 'We respond with empathy, learn what is needed, and connect people to the right resources quickly.',
+    },
+    {
+      title: 'Deliver support',
+      body: 'Outreach, emergency aid, referrals, and practical help — tailored to each situation.',
+    },
+    {
+      title: 'Follow up with care',
+      body: 'We stay present so families know they are seen, valued, and not alone on the journey ahead.',
+    },
+  ],
+  donorPromise:
+    'Your gift funds direct community support — outreach, emergency assistance, and resource navigation. We steward every donation with transparency and heart.',
+  partnerNote:
+    'Churches, community groups, and volunteers are welcome partners. Contact us to co-host an outreach or refer someone in need.',
+} as const
+
+export const HOME_TESTIMONIAL = {
+  quote:
+    'After a fire displaced their home, a mother and children received emergency support and compassionate guidance. They were reminded that they matter — and that brighter days are still ahead.',
+  attribution: 'Community partner, Los Angeles County',
+} as const
+
 export const EVENTS = {
   lead:
     'Community events are where compassion meets action — outreach gatherings, resource fairs, and seasonal support drives throughout Los Angeles County.',
diff --git a/src/index.css b/src/index.css
index 2a0bac0..b2131c9 100644
--- a/src/index.css
+++ b/src/index.css
@@ -121,41 +121,41 @@
 
   /* Nav: symbol (square) on mobile, horizontal lockup on md+ */
   .logo-mark--nav {
-    height: 2.5rem;
+    height: 3rem;
   }
 
   .logo-mark--nav .logo-mark__img--symbol {
     height: 100%;
     width: auto;
-    max-width: 2.75rem;
+    max-width: 3.25rem;
   }
 
   @media (min-width: 768px) {
     .logo-mark--nav {
-      height: 3.25rem;
+      height: 4.25rem;
     }
     .logo-mark--nav .logo-mark__img--horizontal {
       height: 100%;
       width: auto;
-      max-width: min(14rem, 42vw);
+      max-width: min(20rem, 48vw);
     }
   }
 
   @media (min-width: 1024px) {
     .logo-mark--nav {
-      height: 3.5rem;
+      height: 4.5rem;
     }
     .logo-mark--nav .logo-mark__img--horizontal {
-      max-width: 15rem;
+      max-width: 21rem;
     }
   }
 
   @media (min-width: 1280px) {
     .logo-mark--nav {
-      height: 3.75rem;
+      height: 4.75rem;
     }
     .logo-mark--nav .logo-mark__img--horizontal {
-      max-width: 16.5rem;
+      max-width: 23rem;
     }
   }
 
@@ -217,9 +217,11 @@
     align-items: center;
   }
 
-  @media (min-width: 1024px) {
+  @media (min-width: 768px) {
     .mim-site-nav {
-      min-height: 4.5rem;
+      min-height: 5rem;
+      padding-top: 0.5rem;
+      padding-bottom: 0.5rem;
     }
   }
 
diff --git a/vite.config.ts b/vite.config.ts
index c696bc1..b643f59 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -18,11 +18,12 @@ export default defineConfig({
         'robots.txt',
         'site.webmanifest',
         'brand/**/*',
+        'photos/**/*',
       ],
       manifest: {
         name: 'Miracles in Motion Foundation',
         short_name: 'MiM',
-        description: 'A 501(c)(3) nonprofit providing students with essential support',
+        description: 'Restoring hope through compassion, community, and faith in Los Angeles County',
         theme_color: '#1a3c34',
         background_color: '#1a3c34',
         display: 'standalone',
@@ -50,7 +51,11 @@ export default defineConfig({
         ],
       },
       workbox: {
-        globPatterns: ['**/*.{js,css,html,ico,png,svg,webp}'],
+        skipWaiting: true,
+        clientsClaim: true,
+        cleanupOutdatedCaches: true,
+        globPatterns: ['**/*.{js,css,html,ico,png,svg,webp,jpg}'],
+        maximumFileSizeToCacheInBytes: 3 * 1024 * 1024,
         runtimeCaching: [
           {
             urlPattern: /^https:\/\/fonts\.googleapis\.com\/.*/i,