d-bis/miracles_in_motion
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

P0: mim-api, live conversion paths, and CWV sprint to ~2.56s LCP.

Browse Source 
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]>
This commit is contained in:
defiQUG
2026-06-15 23:42:45 -07:00
co-authored by Cursor
parent f0180bd3b8
commit 6c0de165d3
26 changed files with 4212 additions and 5370 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+49 -1
View File
@@ -32,7 +32,7 @@
<link
rel="preload"
as="image"
href="/photos/community/optimized/outreach-01-720.webp"
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"
@@ -41,10 +41,58 @@
<!-- 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>