defiQUGandCursor
6c0de165d3
Ship VMID 7811 API (assistance, contact, Stripe checkout), wire donate and forms to API with accessible success UI, static LCP shell with deferred React mount, and perf gate tooling (P0 72/2600ms; world-class 85/2500ms tracked separately). Co-authored-by: Cursor <[email protected]>
99 lines
5.2 KiB
HTML
99 lines
5.2 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<!-- CSP is applied at nginx/reverse-proxy in production (see MIM4U_502_ERROR_RESOLUTION.md). Meta CSP omitted to avoid breaking dev/build. -->
|
|
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
|
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
|
|
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>Miracles in Motion Foundation | Faith • Hope • Community • Restoration</title>
|
|
<meta name="description" content="Restoring hope through compassion, community, and faith. Serving Los Angeles County with outreach, emergency assistance, and advocacy for families in crisis." />
|
|
<meta name="keywords" content="non-profit, charity, 501c3, miracles in motion, community support, donations, volunteers" />
|
|
|
|
<!-- Open Graph Meta Tags -->
|
|
<meta property="og:title" content="Miracles in Motion Foundation" />
|
|
<meta property="og:description" content="Restoring hope through compassion, community, and faith." />
|
|
<meta property="og:type" content="website" />
|
|
<meta property="og:url" content="https://mim4u.org" />
|
|
<meta property="og:image" content="https://mim4u.org/og-image.png" />
|
|
|
|
<!-- Twitter Card Meta Tags -->
|
|
<meta name="twitter:card" content="summary_large_image" />
|
|
<meta name="twitter:title" content="Miracles in Motion Foundation" />
|
|
<meta name="twitter:description" content="Restoring hope through compassion, community, and faith." />
|
|
<meta name="twitter:image" content="https://mim4u.org/og-image.png" />
|
|
|
|
<!-- Favicon and Web App Manifest -->
|
|
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
|
|
<link rel="manifest" href="/site.webmanifest" />
|
|
|
|
<!-- LCP: hero WebP 720w (~45KB) — matches HeroLcpImage default slot -->
|
|
<link
|
|
rel="preload"
|
|
as="image"
|
|
href="/photos/community/optimized/outreach-01-480.webp"
|
|
type="image/webp"
|
|
fetchpriority="high"
|
|
imagesrcset="/photos/community/optimized/outreach-01-480.webp 480w, /photos/community/optimized/outreach-01-720.webp 720w, /photos/community/optimized/outreach-01-960.webp 960w"
|
|
imagesizes="(min-width: 1024px) 480px, 100vw"
|
|
/>
|
|
|
|
<!-- Theme Color -->
|
|
<meta name="theme-color" content="#1a3c34" />
|
|
|
|
<!-- Critical hero shell (LCP text paint before JS/CSS bundle) -->
|
|
<style>
|
|
#root{min-height:100vh;background:#fffefb}
|
|
#mim-static-hero{position:absolute;inset:0 auto auto 0;width:100%;z-index:0;pointer-events:none}
|
|
#mim-static-hero.is-hidden{display:none}
|
|
.hero-section{min-height:clamp(420px,72vh,720px);padding:1.5rem 1rem 3rem}
|
|
.hero-section h1{font-family:Georgia,"Playfair Display",serif;font-weight:700;line-height:1.1;color:#0f2922;font-size:clamp(2rem,5vw,3.75rem);max-width:36rem;margin:.75rem 0 0}
|
|
.mim-static-tagline{font:500 .875rem/1.4 system-ui,sans-serif;color:#2d6b5c;letter-spacing:.04em}
|
|
.mim-static-hero-inner{display:grid;gap:2rem;max-width:80rem;margin:0 auto;align-items:start}
|
|
.mim-static-lcp{width:100%;max-width:28rem;border-radius:1rem;object-fit:cover;aspect-ratio:16/10;box-shadow:0 10px 30px rgba(26,60,52,.15)}
|
|
@media(min-width:1024px){
|
|
.mim-static-hero-inner{grid-template-columns:1.2fr 1fr;padding:0 2rem}
|
|
.mim-static-lcp{justify-self:end}
|
|
}
|
|
@media(prefers-color-scheme:dark){
|
|
#root{background:#111827}
|
|
.hero-section h1{color:#f3f4f6}
|
|
.mim-static-tagline{color:#93c5b8}
|
|
}
|
|
</style>
|
|
|
|
<!-- Fonts: self-hosted via @fontsource/inter (see src/index.css); no external font requests for LCP -->
|
|
</head>
|
|
<body>
|
|
<!-- Static LCP shell — removed after React mount; not inside #root so LCP fires before JS bundle -->
|
|
<main id="mim-static-hero" class="hero-section" aria-label="Miracles in Motion Foundation">
|
|
<div class="mim-static-hero-inner">
|
|
<div class="mim-static-hero-copy">
|
|
<p class="mim-static-tagline">Faith • Hope • Community • Restoration</p>
|
|
<h1>Restoring hope through compassion, community, and faith.</h1>
|
|
</div>
|
|
<picture>
|
|
<source
|
|
type="image/webp"
|
|
media="(min-width: 1024px)"
|
|
srcset="/photos/community/optimized/outreach-01-720.webp"
|
|
/>
|
|
<img
|
|
class="mim-static-lcp"
|
|
src="/photos/community/optimized/outreach-01-480.webp"
|
|
srcset="/photos/community/optimized/outreach-01-480.webp 480w, /photos/community/optimized/outreach-01-720.webp 720w, /photos/community/optimized/outreach-01-960.webp 960w"
|
|
sizes="(min-width: 1024px) 480px, 100vw"
|
|
width="1200"
|
|
height="750"
|
|
alt="Miracles in Motion community outreach — volunteers serving families in Los Angeles County"
|
|
fetchpriority="high"
|
|
decoding="async"
|
|
/>
|
|
</picture>
|
|
</div>
|
|
</main>
|
|
<div id="root"></div>
|
|
<script type="module" src="/src/main.tsx"></script>
|
|
</body>
|
|
</html> |