chore(branding): multi-modal press kit, hero OG + dashboard.gif (#323)

- Recolor banner/wordmark SVGs to the Otter Orange palette with brand fonts - Rebuild social-preview.png as a hero-style OG card (trust badges, headline, five modality cards with section counts), synced to apps/landing + apps/web og-image.png - Replace static dashboard PNGs with dashboard.gif: a guided tab tour of all 157 tools across the five modalities - Update branding/README.md (Otter Palette, brand fonts, asset list); add scripts/branding generator + sync helpers
2026-08-03 07:46:42 +02:00 · 2026-06-22 19:51:35 +08:00
parent c4ce5f96df
commit 5b86eaa2c5
13 changed files with 183 additions and 19 deletions
@@ -0,0 +1,150 @@
+// Generates branding/social-preview.png (1280x640) -- the SnapOtter social/OG card.
+// Echoes the landing hero: trust badges, the "Every file tool you need / Nothing
+// leaves your network" headline, the supporting subhead, and the five modality
+// cards. Rendered from HTML with the real brand fonts via headless Chromium.
+// Run: node scripts/branding/generate-social-preview.mjs
+//
+// The same output is the canonical OG image; sync it to apps/landing/public/og-image.png
+// and apps/web/public/og-image.png (see scripts/branding/sync-og.sh).
+
+import { rmSync, writeFileSync } from "node:fs";
+import { dirname, resolve } from "node:path";
+import { fileURLToPath } from "node:url";
+import { chromium } from "@playwright/test";
+
+const repoRoot = resolve(dirname(fileURLToPath(import.meta.url)), "..", "..");
+const out = resolve(repoRoot, "branding/social-preview.png");
+// Temp HTML lives in branding/ so the page origin is file:// and can load the
+// sibling logo and the ../apps fonts as file:// subresources.
+const htmlPath = resolve(repoRoot, "branding/.og.html");
+
+// Enterprise trust badges (subset of Hero.astro's list).
+const BADGES = ["On-premise", "GDPR & HIPAA", "Air-gap", "SAML SSO", "Open source"];
+
+// lucide icon inner-SVG (stroke), matching the icons used in CategoryCards.astro.
+const ICON = {
+  image:
+    '<rect width="18" height="18" x="3" y="3" rx="2" ry="2"/><circle cx="9" cy="9" r="2"/><path d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21"/>',
+  video:
+    '<path d="m16 13 5.223 3.482a.5.5 0 0 0 .777-.416V7.87a.5.5 0 0 0-.752-.432L16 10.5"/><rect x="2" y="6" width="14" height="12" rx="2"/>',
+  music: '<path d="M9 18V5l12-2v13"/><circle cx="6" cy="18" r="3"/><circle cx="18" cy="16" r="3"/>',
+  fileText:
+    '<path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"/><path d="M14 2v4a2 2 0 0 0 2 2h4"/><path d="M16 13H8"/><path d="M16 17H8"/><path d="M10 9H8"/>',
+  database:
+    '<ellipse cx="12" cy="5" rx="9" ry="3"/><path d="M3 5V19A9 3 0 0 0 21 19V5"/><path d="M3 12A9 3 0 0 0 21 12"/>',
+};
+
+// Mirrors CategoryCards.astro (label/blurb/color/icon). Counts are toolSection()
+// section counts (image 64, video 29, audio 17, pdf 25, files 22 = 157); refresh
+// with: tsx -e "import('@snapotter/shared')..." over toolSection (see git history).
+const CARDS = [
+  {
+    label: "Image Tools",
+    count: 64,
+    blurb: "Resize, convert, and enhance",
+    color: "#E07832",
+    icon: ICON.image,
+  },
+  {
+    label: "Video Tools",
+    count: 29,
+    blurb: "Trim, convert, and caption",
+    color: "#BE4A3C",
+    icon: ICON.video,
+  },
+  {
+    label: "Audio Tools",
+    count: 17,
+    blurb: "Convert, trim, and transcribe",
+    color: "#2C7A75",
+    icon: ICON.music,
+  },
+  {
+    label: "PDF & Documents",
+    count: 25,
+    blurb: "Merge, split, and convert",
+    color: "#44568C",
+    icon: ICON.fileText,
+  },
+  {
+    label: "File Tools",
+    count: 22,
+    blurb: "Convert and transform",
+    color: "#5C8642",
+    icon: ICON.database,
+  },
+];
+const total = CARDS.reduce((s, c) => s + c.count, 0);
+
+const badgesHtml = BADGES.map(
+  (b) =>
+    `<span class="badge"><svg class="chk" viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"/></svg>${b}</span>`,
+).join("");
+
+const cardsHtml = CARDS.map(
+  (c) => `<div class="card" style="background:${c.color}">
+  <div class="card-top">
+    <span class="card-icon"><svg viewBox="0 0 24 24">${c.icon}</svg></span>
+    <span class="card-pill">${c.count} tools</span>
+  </div>
+  <div class="card-label">${c.label}</div>
+  <div class="card-blurb">${c.blurb}</div>
+</div>`,
+).join("");
+
+const html = `<!doctype html><html><head><meta charset="utf-8"/><style>
+@font-face{font-family:'Bricolage Grotesque';src:url('../apps/landing/public/fonts/bricolage-grotesque-var.woff2') format('woff2');font-weight:200 800;font-display:block}
+@font-face{font-family:'Instrument Sans';src:url('../apps/landing/public/fonts/instrument-sans-400.woff2') format('woff2');font-weight:400;font-display:block}
+*{margin:0;padding:0;box-sizing:border-box}
+html,body{width:1280px;height:640px}
+.canvas{position:relative;width:1280px;height:640px;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px 30px;
+  font-family:'Instrument Sans',system-ui,sans-serif;
+  background:
+    radial-gradient(60% 55% at 13% 8%, rgba(224,120,50,.10), transparent 62%),
+    radial-gradient(55% 55% at 88% 94%, rgba(68,86,140,.08), transparent 60%),
+    linear-gradient(158deg,#FFFFFF 0%,#FAFAF7 48%,#F3EEE6 100%)}
+.brand{display:flex;align-items:center;gap:15px}
+.brand img{width:56px;height:56px}
+.brand .wm{font-family:'Bricolage Grotesque',system-ui,sans-serif;font-weight:800;font-size:46px;letter-spacing:-1px;color:#1A1814}
+.brand .wm .o{color:#E07832}
+.brand .pill{margin-left:4px;align-self:center;border-radius:999px;background:#FFF1E6;border:1px solid rgba(224,120,50,.30);color:#C06520;font-weight:700;font-size:16px;padding:6px 14px;letter-spacing:.2px}
+.badges{display:flex;flex-wrap:wrap;justify-content:center;gap:9px;margin-top:20px}
+.badge{display:inline-flex;align-items:center;gap:6px;border-radius:999px;border:1px solid rgba(224,120,50,.22);background:rgba(224,120,50,.06);padding:5px 13px;font-size:14px;font-weight:500;color:#C06520}
+.badge .chk{width:13px;height:13px;stroke:#C06520;stroke-width:2.5;fill:none;stroke-linecap:round;stroke-linejoin:round}
+.headline{margin-top:22px;text-align:center;font-family:'Bricolage Grotesque',system-ui,sans-serif;font-weight:800;font-size:58px;line-height:1.04;letter-spacing:-1.4px;color:#1A1814}
+.headline .f{color:#E07832}
+.headline .hl2{display:block;margin-top:12px;font-size:32px;font-weight:700;letter-spacing:-.5px;
+  background:linear-gradient(90deg,#E07832,#F09550);-webkit-background-clip:text;background-clip:text;color:transparent}
+.subhead{margin-top:15px;font-size:20px;color:#6B6560;text-align:center;max-width:760px}
+.cards{display:flex;gap:16px;margin-top:30px}
+.card{width:230px;border-radius:20px;padding:20px;color:#fff;display:flex;flex-direction:column;box-shadow:0 9px 22px rgba(26,18,16,.13)}
+.card-top{display:flex;align-items:center;justify-content:space-between}
+.card-icon{display:flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:11px;background:rgba(255,255,255,.20)}
+.card-icon svg{width:23px;height:23px;stroke:#fff;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
+.card-pill{background:rgba(255,255,255,.20);border-radius:999px;padding:3px 12px;font-size:13px;font-weight:600}
+.card-label{font-family:'Bricolage Grotesque',system-ui,sans-serif;font-weight:700;font-size:20px;line-height:1.1;margin-top:34px}
+.card-blurb{font-size:14px;color:rgba(255,255,255,.84);margin-top:6px}
+</style></head><body><div class="canvas">
+<div class="brand"><img src="logo-512.png" alt=""/><span class="wm">Snap<span class="o">Otter</span></span><span class="pill">${total} tools</span></div>
+<div class="badges">${badgesHtml}</div>
+<div class="headline">Every <span class="f">file</span> tool you need.<span class="hl2">Nothing leaves your network.</span></div>
+<div class="subhead">The file-processing suite for teams that keep sensitive data in-house.</div>
+<div class="cards">${cardsHtml}</div>
+</div></body></html>`;
+
+writeFileSync(htmlPath, html);
+try {
+  const browser = await chromium.launch();
+  const ctx = await browser.newContext({ viewport: { width: 1280, height: 640 } });
+  const page = await ctx.newPage();
+  await page.goto("file://" + htmlPath, { waitUntil: "load" });
+  await page.evaluate(async () => {
+    await document.fonts.ready;
+  });
+  await page.waitForTimeout(150);
+  await page.screenshot({ path: out });
+  await browser.close();
+  console.log("wrote " + out);
+} finally {
+  rmSync(htmlPath, { force: true });
+}
@@ -0,0 +1,9 @@
+#!/usr/bin/env bash
+# Propagate the canonical social card to the app OG-image locations.
+# Run after regenerating branding/social-preview.png.
+set -euo pipefail
+root="$(cd "$(dirname "$0")/../.." && pwd)"
+src="$root/branding/social-preview.png"
+cp "$src" "$root/apps/landing/public/og-image.png"
+cp "$src" "$root/apps/web/public/og-image.png"
+echo "synced social-preview.png -> apps/landing/public/og-image.png, apps/web/public/og-image.png"