diff --git a/app/scripts/static-fallback.mjs b/app/scripts/static-fallback.mjs
new file mode 100644
index 0000000..936062e
--- /dev/null
+++ b/app/scripts/static-fallback.mjs
@@ -0,0 +1,62 @@
+export function esc(value) {
+  return String(value ?? '')
+    .replace(/&/g, '&')
+    .replace(/"/g, '"')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;');
+}
+
+export function cleanText(value) {
+  return String(value ?? '').replace(/<[^>]+>/g, ' ').replace(/\s+/g, ' ').trim();
+}
+
+function renderLinks(links = []) {
+  const items = links
+    .filter(item => item?.href && item?.label)
+    .slice(0, 24)
+    .map(item => `<li><a href="${esc(item.href)}">${esc(item.label)}</a>${item.text ? `<span>${esc(item.text)}</span>` : ''}</li>`)
+    .join('');
+  return items ? `<ul class="static-fallback__links">${items}</ul>` : '';
+}
+
+function renderFacts(facts = []) {
+  const items = facts
+    .filter(item => item?.label && item?.value)
+    .slice(0, 12)
+    .map(item => `<li><strong>${esc(item.label)}</strong><span>${esc(item.value)}</span></li>`)
+    .join('');
+  return items ? `<ul class="static-fallback__facts">${items}</ul>` : '';
+}
+
+export function renderStaticFallback({ eyebrow, title, description, bodyHtml, facts, links, sections } = {}) {
+  const renderedSections = (sections ?? [])
+    .filter(section => section?.title || section?.text)
+    .slice(0, 8)
+    .map(section => `
+        <section>
+          ${section.title ? `<h2>${esc(section.title)}</h2>` : ''}
+          ${section.text ? `<p>${esc(section.text)}</p>` : ''}
+          ${renderLinks(section.links)}
+        </section>`)
+    .join('');
+
+  return `<section id="static-fallback" class="static-fallback" aria-label="محتوای اصلی صفحه">
+    <main class="static-fallback__inner">
+      ${eyebrow ? `<p class="static-fallback__eyebrow">${esc(eyebrow)}</p>` : ''}
+      ${title ? `<h1>${esc(title)}</h1>` : ''}
+      ${description ? `<p class="static-fallback__lead">${esc(description)}</p>` : ''}
+      ${renderFacts(facts)}
+      ${renderLinks(links)}
+      ${bodyHtml ? `<article class="static-fallback__article">${bodyHtml}</article>` : ''}
+      ${renderedSections}
+    </main>
+  </section>`;
+}
+
+export function replaceStaticFallback(html, fallbackHtml) {
+  const fallbackPattern = /<section id="static-fallback"[\s\S]*?<\/section>\s*(?=<div id="root"><\/div>)/;
+  if (fallbackPattern.test(html)) {
+    return html.replace(fallbackPattern, `${fallbackHtml}\n\n  `);
+  }
+  return html.replace('<div id="root"></div>', `${fallbackHtml}\n\n  <div id="root"></div>`);
+}