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 [email protected]; warm cream/beige palette and faith-centered messaging for LA County outreach.

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

src/pages/BrandPage/BrandAssetsPage.tsx

@@ -55,8 +55,8 @@ export function BrandAssetsPage() {
           </li>
           <li>
             Questions:{' '}
-            <a className="underline" href="mailto:contact@mim4u.org">
-              contact@mim4u.org
+            <a className="underline" href="mailto:info@faithforwardmiracles.org">
+              info@faithforwardmiracles.org
             </a>
           </li>
         </ul>

src/pages/DonatePage/index.tsx

@@ -362,7 +362,7 @@ const TrustBadges: React.FC = () => (
     
     <div className="mt-6 pt-4 border-t border-gray-200 dark:border-gray-700">
       <p className="text-xs text-gray-500">
-        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.
       </p>
     </div>
   </Card>

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 (
+    <div className="foundation-page mx-auto max-w-4xl px-4 py-12 sm:px-6 lg:px-8">
+      <p className="section-eyebrow">{eyebrow}</p>
+      <h1 className="section-title mt-2">{title}</h1>
+      <div className="mt-6 space-y-4 text-base leading-relaxed text-neutral-700 dark:text-neutral-300">
+        {children}
+      </div>
+    </div>
+  )
+}
+
+function ContentCard({ title, children }: { title: string; children: ReactNode }) {
+  return (
+    <section className="card">
+      <h2 className="font-serif text-xl font-semibold tracking-tight text-primary-800 dark:text-primary-100">
+        {title}
+      </h2>
+      <div className="mt-3 space-y-3 text-sm leading-relaxed text-neutral-700 dark:text-neutral-300">
+        {children}
+      </div>
+    </section>
+  )
+}
+
+export function AboutPage() {
+  return (
+    <div className="pb-16">
+      <PageIntro eyebrow={SITE.tagline} title="About Us">
+        <p className="text-lg font-medium text-primary-800 dark:text-primary-100">{SITE.brandMessage}</p>
+        <p>{INTRO.lead}</p>
+        <p>{INTRO.body}</p>
+        <p>{INTRO.belief}</p>
+        <p>{INTRO.scope}</p>
+        <p className="font-medium italic text-primary-700 dark:text-secondary-300">{INTRO.restoration}</p>
+        <p className="text-secondary-700 dark:text-secondary-400">{SITE.closingLine}</p>
+      </PageIntro>
+
+      <div className="mx-auto max-w-4xl space-y-6 px-4 sm:px-6 lg:px-8">
+        <ContentCard title="Who we serve">
+          <ul className="list-disc space-y-2 pl-5">
+            {POPULATIONS_SERVED.map((item) => (
+              <li key={item}>{item}</li>
+            ))}
+          </ul>
+        </ContentCard>
+
+        <ContentCard title="Why we started">
+          <p>{WHY_WE_STARTED.lead}</p>
+          <p>{WHY_WE_STARTED.body}</p>
+          <p className="font-medium">{WHY_WE_STARTED.reminder}</p>
+          <p>{WHY_WE_STARTED.goal}</p>
+        </ContentCard>
+
+        <div className="flex flex-wrap gap-3">
+          <a href="#/mission" className="btn-primary">
+            Our mission <ArrowRight className="ml-1 h-4 w-4" />
+          </a>
+          <a href="#/what-we-do" className="btn-secondary">
+            What we do
+          </a>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export function MissionPage() {
+  return (
+    <div className="pb-16" id="mission">
+      <PageIntro eyebrow="Our purpose" title="Our Mission">
+        <p>{MISSION.statement}</p>
+        <p>{MISSION.dedication}</p>
+      </PageIntro>
+
+      <div className="mx-auto max-w-4xl space-y-6 px-4 sm:px-6 lg:px-8">
+        <ContentCard title="Our vision">
+          <p>{VISION.lead}</p>
+          <p>{VISION.body}</p>
+        </ContentCard>
+        <a href="#/donate" className="btn-primary inline-flex">
+          <Heart className="mr-2 h-4 w-4" /> Support our mission
+        </a>
+      </div>
+    </div>
+  )
+}
+
+export function WhatWeDoPage() {
+  return (
+    <div className="pb-16">
+      <PageIntro eyebrow="Programs & services" title="What We Do">
+        <p>
+          Compassionate, practical support for vulnerable individuals and families — from outreach and
+          advocacy to emergency relief and resource navigation.
+        </p>
+      </PageIntro>
+
+      <div className="mx-auto grid max-w-4xl gap-6 px-4 sm:px-6 sm:grid-cols-2 lg:px-8">
+        {WHAT_WE_DO.map((item) => (
+          <article key={item.title} className="card card-hover">
+            <h2 className="font-semibold tracking-tight text-primary-800 dark:text-primary-100">
+              {item.title}
+            </h2>
+            <p className="mt-2 text-sm leading-relaxed text-neutral-700 dark:text-neutral-300">
+              {item.body}
+            </p>
+          </article>
+        ))}
+      </div>
+
+      <div className="mx-auto mt-10 max-w-4xl px-4 text-center sm:px-6 lg:px-8">
+        <a href="#/request-assistance" className="btn-secondary mr-3">
+          Request assistance
+        </a>
+        <a href="#/volunteers" className="btn-primary">
+          <Users className="mr-2 inline h-4 w-4" /> Volunteer
+        </a>
+      </div>
+    </div>
+  )
+}
+
+export function EventsPage() {
+  return (
+    <div className="pb-16">
+      <PageIntro eyebrow="Community" title="Community Events">
+        <p>{EVENTS.lead}</p>
+        <p>{EVENTS.body}</p>
+      </PageIntro>
+
+      <div className="mx-auto max-w-4xl px-4 sm:px-6 lg:px-8">
+        <div className="card flex flex-col items-center gap-4 py-12 text-center">
+          <Calendar className="h-12 w-12 text-secondary-500" aria-hidden />
+          <p className="max-w-md text-sm text-neutral-600 dark:text-neutral-400">
+            Event listings will be posted here as dates are confirmed. We welcome volunteers and
+            community partners.
+          </p>
+          <div className="flex flex-wrap justify-center gap-3">
+            <a href={EVENTS.ctaVolunteer} className="btn-primary">
+              Volunteer
+            </a>
+            <a href={EVENTS.ctaContact} className="btn-secondary">
+              Contact us
+            </a>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export function ContactPage() {
+  return (
+    <div className="pb-16">
+      <PageIntro eyebrow="Reach out" title="Contact Us">
+        <p>
+          We would love to hear from you — whether you need support, want to volunteer, or hope to
+          partner with our foundation.
+        </p>
+      </PageIntro>
+
+      <div className="mx-auto max-w-4xl space-y-6 px-4 sm:px-6 lg:px-8">
+        <div className="card space-y-4">
+          <div className="flex items-start gap-3">
+            <Mail className="mt-0.5 h-5 w-5 shrink-0 text-primary-600 dark:text-secondary-400" />
+            <div>
+              <div className="font-medium">Email</div>
+              <a className="text-primary-700 underline dark:text-secondary-300" href={SITE.emailHref}>
+                {SITE.email}
+              </a>
+            </div>
+          </div>
+          <div className="flex items-start gap-3">
+            <MapPin className="mt-0.5 h-5 w-5 shrink-0 text-primary-600 dark:text-secondary-400" />
+            <div>
+              <div className="font-medium">Service area</div>
+              <p className="text-sm text-neutral-700 dark:text-neutral-300">{SITE.serviceArea}</p>
+            </div>
+          </div>
+        </div>
+
+        <div className="flex flex-wrap gap-3">
+          <a href={SITE.emailHref} className="btn-primary">
+            <Mail className="mr-2 h-4 w-4" /> Send email
+          </a>
+          <a href="#/request-assistance" className="btn-secondary">
+            Request assistance
+          </a>
+          <a href="#/donate" className="btn-secondary">
+            Donate
+          </a>
+        </div>
+
+        <p className="text-center text-xs text-neutral-500 dark:text-neutral-400">
+          {SITE.name} · {SITE.legalStatus} · EIN {SITE.ein}
+        </p>
+      </div>
+    </div>
+  )
+}
+
+export function StoriesIntroBlock() {
+  return (
+    <div className="card mb-8 border-secondary-200/60 bg-secondary-50/40 dark:border-secondary-800/40 dark:bg-secondary-900/20">
+      <p>{STORIES_OF_HOPE.lead}</p>
+      <p className="mt-3">{STORIES_OF_HOPE.body}</p>
+      <p className="mt-3 italic text-primary-800 dark:text-primary-100">{STORIES_OF_HOPE.closing}</p>
+    </div>
+  )
+}

src/pages/foundation/index.ts

@@ -0,0 +1,8 @@
+export {
+  AboutPage,
+  ContactPage,
+  EventsPage,
+  MissionPage,
+  StoriesIntroBlock,
+  WhatWeDoPage,
+} from './FoundationPages'