Add June 2026 outreach video with poster frame to the community section.

Replace the placeholder community clip with the new WhatsApp recording, extract a poster still, and surface it below the photo gallery with a titled caption card.

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

src/components/home/CommunityGallery.tsx

@@ -1,4 +1,5 @@
 import { Instagram } from 'lucide-react'
+import { CommunityVideo } from './CommunityVideo'
 import { COMMUNITY_PHOTOS, SOCIAL, SITE } from '../../content/siteContent'
 
 type CommunityGalleryProps = {
@@ -29,7 +30,8 @@ export function CommunityGallery({
               Community in action
             </h2>
             <p className="section-subtitle">
-              Authentic photos from our outreach events and gatherings throughout {SITE.serviceArea.split('.')[0].replace('Serving ', '')}.
+              Authentic photos and video from our outreach events and gatherings throughout{' '}
+              {SITE.serviceArea.split('.')[0].replace('Serving ', '')}.
             </p>
             <a
               href={SOCIAL.instagram}
@@ -67,6 +69,12 @@ export function CommunityGallery({
             </li>
           ))}
         </ul>
+
+        {showHeader && (
+          <div className="mx-auto mt-14 max-w-3xl">
+            <CommunityVideo />
+          </div>
+        )}
       </div>
     </section>
   )

src/components/home/CommunityVideo.tsx

@@ -1,10 +1,23 @@
 import { COMMUNITY_VIDEO } from '../../content/siteContent'
 
-export function CommunityVideo() {
+type CommunityVideoProps = {
+  /** Show eyebrow + title above the player */
+  showHeader?: boolean
+}
+
+export function CommunityVideo({ showHeader = true }: CommunityVideoProps) {
   return (
-    <div className="card overflow-hidden p-0">
+    <figure className="card overflow-hidden p-0">
+      {showHeader && (
+        <div className="border-b border-secondary-200/50 px-5 py-4 text-center dark:border-white/10">
+          <p className="section-eyebrow mb-1">Watch</p>
+          <figcaption className="font-serif text-lg font-semibold text-primary-800 dark:text-primary-100">
+            {COMMUNITY_VIDEO.title}
+          </figcaption>
+        </div>
+      )}
       <video
-        className="w-full rounded-xl"
+        className="w-full bg-black"
         controls
         playsInline
         preload="metadata"
@@ -14,9 +27,11 @@ export function CommunityVideo() {
         <source src={COMMUNITY_VIDEO.src} type="video/mp4" />
         Your browser does not support embedded video.
       </video>
-      <p className="px-4 py-3 text-center text-xs text-neutral-600 dark:text-neutral-400">
-        {COMMUNITY_VIDEO.alt}
-      </p>
-    </div>
+      <div className="border-t border-secondary-200/50 px-5 py-4 dark:border-white/10">
+        <p className="text-center text-sm leading-relaxed text-neutral-700 dark:text-neutral-300">
+          {COMMUNITY_VIDEO.caption}
+        </p>
+      </div>
+    </figure>
   )
 }

src/content/siteContent.ts

@@ -81,9 +81,12 @@ export const COMMUNITY_PHOTOS = [
 ] as const
 
 export const COMMUNITY_VIDEO = {
-  src: '/photos/community/outreach-video.mp4',
-  poster: '/photos/community/outreach-01.jpg',
-  alt: 'Video from a Miracles in Motion Foundation community outreach event',
+  src: '/photos/community/community-outreach-2026-06-11.mp4',
+  poster: '/photos/community/community-outreach-2026-06-11-poster.jpg',
+  title: 'Outreach in motion',
+  caption:
+    'A glimpse from our June 2026 community gathering — volunteers, families, and hope shared in real time.',
+  alt: 'Video from a Miracles in Motion Foundation community outreach event, June 2026',
 } as const
 
 export const NAV_LINKS = [