// Shared primitives for PlaceSpace flyers
// - PSLogo: the emerald app mark (recreated from the logo PNG shape so it
// stays crisp at poster scale).
// - QRCode: fake but plausible-looking QR block. Real print would need a
// generated QR pointing to placespace.co or a space-specific deep link.
// - AppStoreBadges: App Store + Google Play pills (line art — no official
// artwork pulled in).
// - StorePills, etc.
const BRAND = {
emerald50: '#ecfdf5',
emerald100: '#d1fae5',
emerald200: '#a7f3d0',
emerald300: '#6ee7b7',
emerald400: '#34d399',
emerald500: '#10b981',
emerald600: '#059669',
emerald700: '#047857',
emerald800: '#065f46',
emerald900: '#064e3b',
teal500: '#14b8a6',
gray50: '#f9fafb',
gray100: '#f3f4f6',
gray200: '#e5e7eb',
gray300: '#d1d5db',
gray400: '#9ca3af',
gray500: '#6b7280',
gray600: '#4b5563',
gray700: '#374151',
gray800: '#1f2937',
gray900: '#111827',
white: '#ffffff',
black: '#000000',
font: 'ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif',
};
// PlaceSpace mark — the actual logo PNG.
// The `color` prop is retained for API compatibility but is ignored; the
// logo is rendered as-is from assets/logo.png. `inverted` swaps to a white
// tinted version via CSS filter (used on dark backgrounds).
function PSLogo({ size = 96, color, inverted = false, shadow = false }) {
// Detect "white on dark" use-cases: callers pass BRAND.white as `color`
// when the surrounding surface is dark. In those cases, tint the logo to
// white so it reads against the background.
const tintWhite = color === BRAND.white || inverted;
return (
);
}
// Pseudo QR — 25×25 matrix that looks right from any distance. For real
// production the user should swap in a generated QR (e.g. pointing to
// https://placespace.co or a deep link). Three finder squares at the
// corners are authentic to QR; the rest is decorative noise with stable
// pseudo-random dots so it renders identically on every load.
function QRCode({ size = 220, fg = BRAND.gray900, bg = BRAND.white, radius = 0, quietZone = 14 }) {
const cells = 25;
const inner = size - quietZone * 2;
const cell = inner / cells;
// Stable pseudo-random pattern
const rand = (i, j) => {
const x = Math.sin(i * 374.2 + j * 611.7) * 43758.5453;
return x - Math.floor(x);
};
const isFinder = (i, j) => (
(i < 7 && j < 7) || // top-left
(i < 7 && j > cells - 8) || // top-right
(i > cells - 8 && j < 7) // bottom-left
);
const Finder = ({ x, y }) => (
);
const dots = [];
for (let i = 0; i < cells; i++) {
for (let j = 0; j < cells; j++) {
if (isFinder(i, j)) continue;
if (rand(i, j) > 0.55) {
dots.push();
}
}
}
return (
);
}
// App Store / Google Play badges — line-art recreations. Real printed
// flyers should use the official brand artwork from each store's asset
// kit. These are placeholders that read correctly at a distance.
function AppStoreBadge({ color = BRAND.white, bg = BRAND.black, width = 158 }) {
const height = width * (54 / 158);
const padX = width * 0.07;
const gap = width * 0.05;
return (
);
}
// Pseudo QR — 25×25 matrix that looks right from any distance. For real
// production the user should swap in a generated QR (e.g. pointing to
// https://placespace.co or a deep link). Three finder squares at the
// corners are authentic to QR; the rest is decorative noise with stable
// pseudo-random dots so it renders identically on every load.
function QRCode({ size = 220, fg = BRAND.gray900, bg = BRAND.white, radius = 0, quietZone = 14 }) {
const cells = 25;
const inner = size - quietZone * 2;
const cell = inner / cells;
// Stable pseudo-random pattern
const rand = (i, j) => {
const x = Math.sin(i * 374.2 + j * 611.7) * 43758.5453;
return x - Math.floor(x);
};
const isFinder = (i, j) => (
(i < 7 && j < 7) || // top-left
(i < 7 && j > cells - 8) || // top-right
(i > cells - 8 && j < 7) // bottom-left
);
const Finder = ({ x, y }) => (