// Simulated webinar campaign assets — 1600x900 LP, 600x150 email, 600x200 zoom, IAB ad sizes // Composition lifted from /2025---Tines-Dragos-RegScale-Webinar/LP-Tines-Dragos-RegScale_Webinar_1920x1080 // Verified against /MASTER-RegScale-Hosted-Webinar-Assets/* and /Template-Webinar-Name---Year---Hosted-Webinar/Graphic-Requirements const { useState: useStateCM, useEffect: useEffectCM, useRef: useRefCM } = React; const CAMPAIGN = { pretitle: "Hosted Webinar", title: "3 Ways to Mature Your Legacy GRC Program in a Highly Regulated Environment", date: "September 3, 2025", time: "10:00 AM ET", cta: "Register Now", speakers: [ { name: "Travis Howerton", title: "Co-Founder & CEO, RegScale" }, { name: "Eoin Hinchy", title: "Co-Founder & CEO, Tines" }, { name: "Robert M. Lee", title: "Co-Founder & CEO, Dragos" }, ], partners: ["Tines", "Dragos"], }; // ── Building blocks ────────────────────────────────────────────────────── function WebinarKey({ scale = 1, label = "webinar" }) { return (
{label}
); } function CtaButton({ label, scale = 1 }) { return ( ); } function DateBlock({ scale = 1, date, time }) { // The slate calendar icon block per the Tines LP — simplified const s = scale; return (
{/* binder rings */}
{/* check */}
{date} | {time}
); } // Inverse RegScale wordmark sized to a target width function InverseWordmark({ width = 440 }) { return (
RegScale
); } // ── Mock surfaces ──────────────────────────────────────────────────────── function LandingPage1600() { // 1600x900 hero. Rendered at scale via CSS transform in caller. return (
{/* Photography placeholder — striped duotone */}
{/* Diagonal magenta image overlay — matches Tines LP exactly */}
{/* RegScale inverse logo — top-left */}
{/* Partner row — center-top */}
tines
DRAGOS
{/* Webinar key — top-right */}
{/* Headline */}
3 Ways to Mature Your Legacy GRC Program in a Highly Regulated Environment
{/* Date row */}
{/* CTA */}
{/* Speakers strip — bottom-left */}
{CAMPAIGN.speakers.map((s, i) => (
{s.name}
{s.title}
))}
); } function EmailBanner600() { // 600x150 return (
{/* logo */}
{/* webinar key */}
{/* headline */}
3 Ways to Mature Your Legacy GRC Program
{/* date + cta */}
Sept 3, 2025 · 10 AM ET
); } function ZoomBanner600() { // 600x200 return (
{/* magenta side overlay */}
3 Ways to Mature Your Legacy GRC Program
Sept 3, 2025 · 10:00 AM ET
); } // ── IAB Ad sizes ────────────────────────────────────────────────────────── function AdMedRectangle300x250() { return (
Mature Your Legacy GRC Program
Sept 3, 2025 · 10 AM ET
); } function AdLeaderboard728x90() { return (
Mature Your Legacy GRC Program · Sept 3
); } function AdSkyscraper160x600() { return (
Mature Your Legacy GRC Program
Sept 3
10 AM ET
); } function AdMobileBanner320x50() { return (
Mature Your Legacy GRC · Sept 3
); } // ── Page wrappers ──────────────────────────────────────────────────────── function ScaledFrame({ width, height, label, children }) { // Scale to fit container width at most const [scale, setScale] = useStateCM(1); const ref = useRefCM(null); useEffectCM(() => { const el = ref.current; if (!el) return; const ro = new ResizeObserver(() => { const cw = el.clientWidth; setScale(Math.min(1, cw / width)); }); ro.observe(el); return () => ro.disconnect(); }, [width]); return (
{children}
{label} {width} × {height}
); } function CampaignLandingPage() { return (

Hero — 1600×900

Anatomy

{[ ["RegScale inverse logo", "Top-left, white wordmark + Light Blue 'Scale'. ~28% of total width."], ["Partner co-brand row", "Center-top. Thin white divider between partner marks."], ["Webinar key pill", "Top-right. Light Blue #29ABE3 background, 5px white border, 40px Montserrat 700, 0.020em tracking."], ["Hero headline", "Montserrat 800, ~92px, white with subtle shadow, balance-wrapped, key term in Light Blue."], ["Date block", "Slate Grey calendar icon (134px) + 64px Roboto Bold white. Emphasizes time over everything else."], ["Primary CTA", "Solid Cyber Orange + 4px white border, Roboto Bold ALL CAPS, ~18px tracking."], ["Speakers strip", "Bottom-left, 56px circular avatars in brand-accent colors, Montserrat captions."], ["Magenta overlay", "Diagonal gradient via 90° rotation — Protected Purple at edges, transparent center. The signature RegScale photo treatment."], ].map(([k, v]) => (

{k}

{v}

))}

Touchpoint set per the Hosted Webinar template

The 2025 Hosted Webinar template ships four touchpoints per campaign — see them on the next page.

  • 1× LP / Social Graphic — 1600×900
  • 1× Email Banner — 600×150
  • 1× Zoom Banner — 600×200
  • (Optional) 1× Speaker Graphic
); } function CampaignAdsPage() { return (

Email & Zoom (canonical)

HTML5 ad set

Hierarchy rules across sizes

Always present

RegScale inverse logo · Webinar key pill · Solid Cyber Orange CTA.

Drops at small sizes

Partner co-brand · Speakers strip · Body description.

Headline shrinks

Reduce to a single benefit clause at ≤300px width. No more than 6 words.

Don't shrink the CTA

Action element retains 11px+ uppercase tracking. Lower legibility kills click-through.

Date stays visible

Even in 320×50, surface "Sept 3" — urgency drives webinar registration.

No emoji

Brand voice doesn't use them. Don't add them just because the surface is small.

Animate the CTA

HTML5 ads can pulse the orange button at 4–6s intervals (90 % opacity bob, 240ms ease-emphasis).

Don't autoplay everything

One animated element max per ad. Don't loop the headline. Don't loop the gradient.

Production notes

  • Click area: entire ad surface should be clickable, with the CTA button as the visual focus.
  • Polite load: initial file size ≤ 150KB per IAB; defer secondary assets to backup image.
  • Backup image: ship a flattened JPG/PNG of frame 1 for non-HTML5 placements.
  • Copy: drop pretitle ("Hosted Webinar") at ≤728×90 — the webinar pill carries the same signal.
  • Tracking: all CTAs append ?utm_source+utm_campaign per the marketing standard.
); } Object.assign(window, { CampaignLandingPage, CampaignAdsPage });