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 <[email protected]>

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>

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

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

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

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,