/* global React */ const { useMemo } = React; // ────────────────────────────────────────────────────────── // Shared atoms // ────────────────────────────────────────────────────────── const SVMonogram = ({ size = 56, ring = "rgba(255,255,255,0.18)" }) => ( ); const SVWordmark = ({ height = 32, color = "#1E1E1E", monoColor = "#1888FF" }) => ( ); // Generic portrait silhouette — used as photo placeholder in profile pic / banner const PortraitSilhouette = ({ tone = "rgba(255,255,255,0.92)", bg = "linear-gradient(160deg, #1888FF 0%, #004B8D 100%)" }) => (
{/* soft radial highlight */}
{/* head */}
); // Decorative blue gradient field with subtle "Q1" mark — reusable hero const Q1Field = ({ children, dense = false, vignette = true }) => (
{/* Massive ghosted Q1 */}
Q1
{/* angular cuts */} {/* corner glow */} {vignette &&
} {children}
); // Eyebrow tag chip — "Q1 2026" const EyebrowChip = ({ children, color = "#fff", bg = "rgba(255,255,255,0.14)", border = "rgba(255,255,255,0.28)" }) => (
{children}
); // ────────────────────────────────────────────────────────── // 1. PROFILE PICTURE — square 1080×1080, with circle-safe variant // ────────────────────────────────────────────────────────── function ProfilePictureSquare({ name, title, photoUrl }) { return (
{photoUrl ? : }
Q1 2026 · BUSINESS REVIEW · STAFFVIRTUAL · Q1 2026 · BUSINESS REVIEW · STAFFVIRTUAL ·{" "}
{name || "Your Name"}
{title &&
{title}
}
I'm Attending · Q1 2026
); } // Circle-safe composition: everything sits comfortably inside the inscribed circle. // 1080×1080 frame, but all content lives inside r≈540 of center. function ProfilePictureCircle({ name, title, photoUrl }) { // truncate long names so the arc doesn't overflow const displayName = (name || "Your Name").trim(); const upperName = displayName.toUpperCase(); return (
{/* Photo well — large, centered, circle. Sized to nearly fill the inscribed circle. */}
{photoUrl ? : }
{/* Top arc — eyebrow text along the upper inside of the circle */} {/* Top arc — sits in the thin band above the enlarged photo. Center 540,540, radius 510. */} Q1 · BUSINESS REVIEW · 2026 {/* Name — sits just below the enlarged photo, centered inside circle */}
{upperName}
{title && (
{title}
)}
); } function ProfilePicture({ name, title, circular = false, photoUrl = null }) { if (circular) { return (
); } return ; } // ────────────────────────────────────────────────────────── // 2. LINKEDIN BANNER — 1584×396 // ────────────────────────────────────────────────────────── function LinkedInBanner({ name }) { return (
{/* LinkedIn safe-zone notice — subtle outline showing avatar overlap region (left circle) — purely decorative omit */} {/* Vertical accent bar */}
{/* Right side — main message */}
Q1 2026 · Quarterly Business Review
Building what's
next, together.
{name ? `${name} · ` : ""}STAFFVIRTUAL · Q1 Business Review · 2026
{/* Top-right wordmark + corner mark */}
SV · Q1 / 2026
{/* Bottom-left — kept clear of LinkedIn avatar overlap (avatar sits ~ x:60, w:160) */}
17 YEARS · 95.6% RETENTION
); } // ────────────────────────────────────────────────────────── // 3. ZOOM / TEAMS VIRTUAL BACKGROUND — 1920×1080 // ────────────────────────────────────────────────────────── function ZoomBackground({ name }) { return (
{/* Foreground content — composed in two zones to avoid the speaker bubble (typically lower-center) */} {/* Top-left — brand */}
STAFFVIRTUAL
Q1 Business Review · 2026
{/* Top-right — eyebrow */}
Live · Q1 2026 Business Review
{/* Left rail — title */}
Q1
Business
Review.
The numbers, the milestones, the people. One quarter, one team, one direction.
{/* Right rail — vertical stat ladder */}
{[ { v: "17", l: "Years in business" }, { v: "95.6%", l: "Client retention" }, { v: "7.2 yr", l: "Average tenure" }, ].map((s, i) => (
{s.v}
{s.l}
))}
{/* Bottom strip — kept above lower-center safe area where speaker bubble lives, keep narrow on edges */}
{name ? `${name} · ` : ""}Cebu · Miami · Worldwide
SV / Q1 — 2026
); } // ────────────────────────────────────────────────────────── // 4. EMAIL SIGNATURE BANNER — 600×200 (standard) // ────────────────────────────────────────────────────────── function EmailSignature({ name, title }) { return (
{/* Left — big Q1 marker */}
Q1
{/* Divider */}
{/* Right — copy */}
I'M ATTENDING — 2026 QBR
Q1 Business Review
{name ? {name}{title ? ", " : ""} : null} {title ? {title} · : null} STAFFVIRTUAL
{/* Right monogram */}
); } // ────────────────────────────────────────────────────────── // 5. SAVE THE DATE — 1080×1080 social tile // ────────────────────────────────────────────────────────── function SaveTheDate() { return (
{/* Top — eyebrow + monogram */}
Save the Date
{/* Center stack */}
Q1
Business
Review.
2026
One quarter in.
The next one starts here.
{/* Bottom strip */}
STAFFVIRTUAL Cebu · Miami SV / Q1 — 2026
{/* Corner ticks */} {[[40, 40, "tl"], [40, 40, "tr"], [40, 40, "bl"], [40, 40, "br"]].map(([w, h, pos], i) => { const map = { tl: { top: 24, left: 24, br: 0 }, tr: { top: 24, right: 24, bl: 0 }, bl: { bottom: 24, left: 24, tr: 0 }, br: { bottom: 24, right: 24, tl: 0 } }[pos]; return (
); })}
); } // Expose Object.assign(window, { ProfilePicture, LinkedInBanner, ZoomBackground, EmailSignature, SaveTheDate, SVMonogram, SVWordmark, Q1Field, EyebrowChip, });