Add client wellness and PTSD awareness campaign graphics

Healing minds and June PTSD awareness artwork on home and mission pages, with wellness tagline in footer and accessible captions.

Co-authored-by: Cursor <[email protected]>

src/App.tsx

@@ -75,6 +75,7 @@ import {
   StoriesIntroBlock,
   WhatWeDoPage,
 } from './pages/foundation'
+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'
@@ -789,6 +790,7 @@ function HomePage() {
     <>
       <Hero />
       <WhoWeServe />
+      <AwarenessCampaigns />
       <PartnerMarquee />
       <Programs />
       <CommunityGallery />

src/components/Footer.tsx

@@ -15,6 +15,9 @@ export function Footer() {
             <p className="mt-4 max-w-md text-sm leading-relaxed text-neutral-700 dark:text-neutral-300">
               {SITE.brandMessage}
             </p>
+            <p className="mt-2 text-sm font-medium text-primary-800 dark:text-secondary-300">
+              {SITE.wellnessTagline}
+            </p>
             <p className="mt-3 text-sm text-neutral-600 dark:text-neutral-400">{SITE.serviceArea}</p>
             <div className="mt-4">
               <a

src/components/__tests__/Footer.test.tsx

@@ -16,6 +16,7 @@ describe('Footer Component', () => {
     expect(screen.getByTestId('logo-mark')).toBeInTheDocument()
     expect(screen.getByText(SITE.tagline)).toBeInTheDocument()
     expect(screen.getByText(SITE.brandMessage)).toBeInTheDocument()
+    expect(screen.getByText(SITE.wellnessTagline)).toBeInTheDocument()
   })
 
   it('renders service area and Instagram', () => {

src/components/home/AwarenessCampaigns.tsx

@@ -0,0 +1,46 @@
+import { CAMPAIGN_GRAPHICS, SITE } from '../../content/siteContent'
+
+export function AwarenessCampaigns() {
+  return (
+    <section
+      className="relative py-20"
+      aria-labelledby="awareness-campaigns-heading"
+    >
+      <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+        <div className="section-header mx-auto mb-12 max-w-3xl text-center">
+          <div className="section-eyebrow">Wellness & advocacy</div>
+          <h2 id="awareness-campaigns-heading" className="section-title">
+            Healing minds. Restoring hope.
+          </h2>
+          <p className="section-subtitle">{SITE.wellnessTagline}</p>
+        </div>
+
+        <ul className="grid gap-8 md:grid-cols-2">
+          {CAMPAIGN_GRAPHICS.map((item) => (
+            <li key={item.id}>
+              <article className="card overflow-hidden p-0">
+                <img
+                  src={item.src}
+                  alt={item.alt}
+                  width={1024}
+                  height={1024}
+                  loading="lazy"
+                  decoding="async"
+                  className="w-full object-contain bg-[var(--mim-brand-green-deep)]"
+                />
+                <div className="border-t border-secondary-200/50 p-5 dark:border-white/10">
+                  <h3 className="font-serif text-lg font-semibold text-primary-800 dark:text-primary-100">
+                    {item.title}
+                  </h3>
+                  <p className="mt-2 text-sm leading-relaxed text-neutral-700 dark:text-neutral-300">
+                    {item.caption}
+                  </p>
+                </div>
+              </article>
+            </li>
+          ))}
+        </ul>
+      </div>
+    </section>
+  )
+}

src/content/siteContent.ts

@@ -11,8 +11,29 @@ export const SITE = {
   serviceArea:
     'Serving Los Angeles County with a vision to expand throughout California and beyond.',
   closingLine: 'Because miracles still happen every day.',
+  wellnessTagline: 'Healing minds. Restoring hope. Transforming lives.',
 } as const
 
+/** Client-provided awareness / campaign graphics (public/photos/campaigns/) */
+export const CAMPAIGN_GRAPHICS = [
+  {
+    id: 'healing-minds',
+    src: '/photos/campaigns/healing-minds-wellness.jpg',
+    title: 'You are not alone',
+    caption:
+      'We walk alongside individuals facing grief, anxiety, depression, trauma, and other invisible struggles — with compassion, faith, and community support.',
+    alt: 'Miracles in Motion Foundation awareness graphic: floral silhouette with name tags for grief, anxiety, phobia, stress, shame, panic, post-traumatic stress, and depression. Tagline: Healing minds. Restoring hope. Transforming lives.',
+  },
+  {
+    id: 'ptsd-awareness',
+    src: '/photos/campaigns/ptsd-awareness-june.jpg',
+    title: 'PTSD Awareness Month — June',
+    caption:
+      'Not all wounds are visible. We honor survivors and families affected by trauma and advocate for compassionate care and resources.',
+    alt: 'Miracles in Motion Foundation PTSD Awareness Month graphic for June: silhouette with brain illustration and text Not all wounds are visible.',
+  },
+] as const
+
 /** Official social profiles */
 export const SOCIAL = {
   instagram: 'https://www.instagram.com/miraclesinmotionfoundation',

src/pages/foundation/FoundationPages.tsx

@@ -1,5 +1,6 @@
 import type { ReactNode } from 'react'
 import { ArrowRight, Calendar, Heart, Instagram, Mail, MapPin, Users } from 'lucide-react'
+import { AwarenessCampaigns } from '../../components/home/AwarenessCampaigns'
 import { CommunityGallery } from '../../components/home/CommunityGallery'
 import { CommunityVideo } from '../../components/home/CommunityVideo'
 import {
@@ -103,10 +104,15 @@ export function MissionPage() {
           <p>{VISION.lead}</p>
           <p>{VISION.body}</p>
         </ContentCard>
+        <p className="text-center font-medium text-primary-800 dark:text-secondary-300">
+          {SITE.wellnessTagline}
+        </p>
         <a href="#/donate" className="btn-primary inline-flex">
           <Heart className="mr-2 h-4 w-4" /> Support our mission
         </a>
       </div>
+
+      <AwarenessCampaigns />
     </div>
   )
 }