defiQUGandCursor
4e4df13ab1
Replace hash URLs with path-based routing, post-build prerender for money pages, Playwright smoke tests, and wrap the app in HelmetProvider so /donate mounts correctly. Co-authored-by: Cursor <cursoragent@cursor.com>
100 lines
5.2 KiB
HTML
100 lines
5.2 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<base href="/" />
|
|
<!-- 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> |