Images and content updates

src/layouts/BaseLayout.astro

@@ -25,6 +25,14 @@ import StoreNav from "@components/store/StoreNav.astro";
 import Footer from "@components/layout/Footer.astro";
 import { themeInitScript } from "@/scripts/theme-init";
 import { siteIdentity } from "@lib/site";
+// Dev-only react-refresh preamble (see astro.config.mjs for why). Imported as a
+// raw string so we can emit it as the FIRST module script in <head>, ahead of
+// any React island, so $RefreshReg$/$RefreshSig$ exist before islands eval.
+import { REACT_REFRESH_PREAMBLE } from "../../astro.config.mjs";
+
+// Only emit the preamble in dev (import.meta.env.DEV). Production builds compile
+// islands to jsx/jsxs and never touch the refresh runtime.
+const isDev = import.meta.env.DEV;
 
 type Surface = "neutral" | "professional" | "interest";
 
@@ -85,6 +93,13 @@ const ogImageUrl = ogImage
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="generator" content={Astro.generator} />
 
+    {/* Dev-only react-refresh preamble. MUST be the first module script so the
+        refresh globals exist before any React island module evaluates. Without
+        it, islands throw at eval time and never hydrate (see astro.config.mjs). */}
+    {isDev && (
+      <script type="module" set:html={REACT_REFRESH_PREAMBLE} />
+    )}
+
     <title>{fullTitle}</title>
     <meta name="description" content={description} />
     <link rel="canonical" href={canonical} />