feat(landing): ship purpose-built OG card site-wide (#4292)

* feat(landing): ship purpose-built OG card site-wide

Replace the hero-screenshot Open Graph image with a dedicated 1200×630
brand card (light paper, lime highlight, "the official open-source Claude
Design alternative" headline, with Local-first / Apache-2.0 / BYO coding
agent tags). The previous og:image reused hero.png, which crops awkwardly
to 1.91:1 and carries no positioning.

- image-assets.ts: ogDefaultImage now points at the raw R2 object
  (landing/assets/og-card.png) instead of the cdn-cgi/image resizer, so
  social crawlers always get a real PNG at exactly 1200×630 rather than a
  format=auto WebP. Export OG_IMAGE_WIDTH/HEIGHT.
- index.astro: homepage og:image + twitter:image use the card; add
  og:image:width/height/type meta.
- og.astro: rewrite the /og/ screenshotable source to match the shipped
  card (self-contained, inline brand mark), with regenerate steps.

The static PNG is uploaded to R2 separately; this commit only wires the
references.

* fix(landing): use OG card as sub-page-layout default share image

sub-page-layout.astro powers most non-homepage landing routes (/skills,
/systems, /templates, /solutions, /agents, …). Its og:image fallback
still resolved to the old hero screenshot (heroImage), so those pages
kept unfurling the product shot after the site-wide card landed. Point
the default at ogDefaultImage so the new card is genuinely site-wide;
per-page ogImage overrides are untouched.

---------

Co-authored-by: Joey <276262049+xne998808-ai@users.noreply.github.com>

Author: xne998808-ai

apps/landing-page/app/_components/sub-page-layout.astro

@@ -28,7 +28,7 @@ import LocaleSwitcherScript from './locale-switcher-script.astro';
 import PreciseLazyload from './precise-lazyload.astro';
 import TemplateCardAutoplay from './template-card-autoplay.astro';
 import SiteFooter from './site-footer.astro';
-import { heroImage } from '../image-assets';
+import { ogDefaultImage } from '../image-assets';
 import {
   LANDING_LOCALES,
   alternateLinksForPath,
@@ -80,9 +80,10 @@ const alternateLinks = localeCanonicalOnly
 const xDefaultHref = new URL(altEntries[0]!.hrefPath, Astro.site).toString();
 // Absolute URL for the social share card: og:image / twitter:image are read
 // by external crawlers outside the page-origin context, so a same-origin path
-// like `/hero-home.png?v=2` is unreliable for rich previews. `new URL()`
-// leaves an already-absolute `ogImage` untouched.
-const og = new URL(ogImage ?? heroImage, Astro.site).toString();
+// is unreliable for rich previews. The default is the site-wide OG card
+// (`ogDefaultImage`, already an absolute R2 URL); `new URL()` leaves an
+// already-absolute `ogImage` override untouched.
+const og = new URL(ogImage ?? ogDefaultImage, Astro.site).toString();
 const counts = await getCatalogCounts();
 const github = await getGithubRepoMeta();
 const headerHtml = renderToStaticMarkup(

apps/landing-page/app/image-assets.ts

@@ -67,12 +67,20 @@ export const heroProductSrcset = [
 ].join(', ');
 
 /**
- * Default Open Graph card image. Used by every page that doesn't supply
- * its own hero (most blog posts in the v1 layout). 1200 wide is what most
- * social platforms render at; aspect ratio is whatever hero.png ships with
- * — we omit explicit og:image:width/height so platforms can resolve it.
+ * Default Open Graph card image — the purpose-built 1200×630 brand plate
+ * (light paper, lime highlight, "official open-source Claude Design
+ * alternative" headline). Used site-wide by every page that doesn't
+ * supply its own card. Referenced as the raw R2 object (not via the
+ * `cdn-cgi/image` resizer) so social crawlers always receive a real PNG
+ * at exactly 1200×630 — `format=auto` would hand some of them WebP.
+ *
+ * Source of truth for the artwork is the `/og/` route (`pages/og.astro`):
+ * render it at viewport 1200×630, screenshot, then upload the PNG to
+ * R2 at `landing/assets/og-card.png`.
  */
-export const ogDefaultImage = imageAsset('hero.png', { width: 1200, quality: 86 });
+export const ogDefaultImage = r2Asset('og-card.png');
+export const OG_IMAGE_WIDTH = 1200;
+export const OG_IMAGE_HEIGHT = 630;
 
 /**
  * 1×1 transparent SVG used as the initial `src` for precise-lazyloaded

apps/landing-page/app/pages/index.astro

@@ -14,7 +14,9 @@ import PreciseLazyload from '../_components/precise-lazyload.astro';
 import {
   heroBgImage,
   heroBgSrcset,
-  heroImage,
+  ogDefaultImage,
+  OG_IMAGE_HEIGHT,
+  OG_IMAGE_WIDTH,
 } from '../image-assets';
 import {
   LANDING_LOCALES,
@@ -184,7 +186,10 @@ const matterRuntime = readFileSync(
     <meta property="og:title" content={title} />
     <meta property="og:description" content={description} />
     <meta property="og:url" content={canonical} />
-    <meta property="og:image" content={new URL(heroImage, Astro.site).toString()} />
+    <meta property="og:image" content={ogDefaultImage} />
+    <meta property="og:image:width" content={String(OG_IMAGE_WIDTH)} />
+    <meta property="og:image:height" content={String(OG_IMAGE_HEIGHT)} />
+    <meta property="og:image:type" content="image/png" />
     <meta property="og:locale" content={localeDef.ogLocale} />
     {LANDING_LOCALES.filter((entry) => entry.code !== locale).map((entry) => (
       <meta property="og:locale:alternate" content={entry.ogLocale} />
@@ -193,7 +198,7 @@ const matterRuntime = readFileSync(
     <meta name="twitter:card" content="summary_large_image" />
     <meta name="twitter:title" content={title} />
     <meta name="twitter:description" content={description} />
-    <meta name="twitter:image" content={new URL(heroImage, Astro.site).toString()} />
+    <meta name="twitter:image" content={ogDefaultImage} />
 
     {/*
      * Single @graph JSON-LD block — WebSite + Organization +