{/* Back card — board pack */}

Board pack · Q1

{[['71%', 'Response'], ['+38', 'eNPS'], ['1', 'Open']].map(([v, l]) => (

{v}

{l}

))}

{[82, 74, 61, 78].map((pct, i) => (

))}

{/* Middle card — Critical Concern alert (the star of the show) */}

Critical concern · open

Possible bullying reference

Q3 pulse · 9:14am · routed to Priya Shah

{[ { label: 'Email', Icon: IconMail, iconColor: 'text-slate-900', active: true }, { label: 'SMS', Icon: IconSmartphone, iconColor: 'text-emerald-500', active: true }, { label: 'Pers email', Icon: IconMail, iconColor: 'text-sky-500', active: true }, { label: 'Pers SMS', Icon: IconSmartphone, iconColor: 'text-amber-500', active: false }, ].map(({ label, Icon, iconColor, active }) => ( {label} ))}

{/* Front card — small pulse question */}

Q4 of 10 2 mins

How likely are you to recommend us as a place to work?

{[1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map((n) => { const colors = { 1: '#c0392b', 2: '#e74c3c', 3: '#e67e22', 4: '#f39c12', 5: '#f1c40f', 6: '#cddc39', 7: '#9acd32', 8: '#7cb342', 9: '#4caf50', 10: '#2e7d32', }; const isSelected = n === 8; return ( {n} ); })}

); } /* =========================================================================== TrustSection v2 — short CX-Feedback statement + 3 numbers + logo letterbox =========================================================================== */ function TrustSectionV2() { const stats = [ { num: '110', cap: 'UK social landlords already using our products.' }, { num: '98%', cap: "Customer retention across the team's products, multi-year average." }, { num: '2008', cap: 'Trading since. Glasgow-based, twelve people.' }, ]; return (

By the team behind CX-Feedback

You probably know someone using us right now.

Colleague Pulse is built by the team behind CX-Feedback, the tenant-engagement platform 110 UK social landlords already use.

{/* Numbers */}

{stats.map((s, i) => (

{s.num}

{s.cap}

))}

{/* Logo letterbox */}

); } function CustomerLogoGrid() { const ROW_H = 56; const GAP = 8; const VISIBLE_ROWS = 6; const COL_LCM = 24; // lcm(4, 6, 8): the three column counts this grid uses const MIN_COPY = 48; // six rows at eight columns, so one copy always fills the window const windowH = ROW_H * VISIBLE_ROWS + GAP * (VISIBLE_ROWS - 1); // The shared logos folder is the single source of truth. /api/logos returns // every image in it, so there is no hardcoded list to keep in sync. const [logos, setLogos] = useStateH([]); useEffectH(() => { let active = true; fetch('api/logos') .then(r => (r.ok ? r.json() : [])) .then(files => { if (active) setLogos(Array.isArray(files) ? files : []); }) .catch(() => { if (active) setLogos([]); }); return () => { active = false; }; }, []); // The track scrolls up by exactly half its own height, so the second copy has // to land where the first one started. That needs each copy to be a whole // number of grid rows, i.e. its length has to divide by the column count, and // this grid is 4, 6 or 8 columns wide across its breakpoints, so it has to // divide by all three: a multiple of 24. It also has to be at least 48 tiles, // or a copy is shorter than the 376px window and the background shows through // before the wrap. // // The listing is whatever the shared container holds (97 today, and 97 is // prime, so no column count divides it) and nothing polices that. The // shortfall is made up by repeating logos from the front of the list, spliced // in halfway down rather than appended: that puts every repeat exactly // (target / 2) tiles from its original, which at eight columns is six rows, // one more than the window shows, so the two are never on screen together. // Repeats rather than truncation to a multiple of 24, because a customer not // finding their own logo on a trust wall is worse than a repeat nobody sees. const n = logos.length; let copy = logos; if (n) { const target = Math.max(MIN_COPY, Math.ceil(n / COL_LCM) * COL_LCM); const extras = []; for (let i = 0; extras.length < target - n; i++) extras.push(logos[i % n]); const mid = Math.floor(n / 2); copy = logos.slice(0, mid).concat(extras, logos.slice(mid)); } const tiles = copy.concat(copy); return (

{/* Text — left */}

{s.problemNumber && (

{s.problemNumber}

)}

{s.headline}

{s.body} {s.solution && ( <> {s.solution} )}

{s.ctaText}

{/* Mock — right */}

{s.image ? ( {s.imageAlt

) : (

{s.mock === 'concern-problem' ? ( ) : ( )}

)}

); } /* Editorial visual for the "AI Critical Concern" carousel slide. Not a product UI — a wall of anonymous pulse quotes with the buried bullying signal sitting quietly among them, plus the timing that makes the point. */ function ConcernProblemVisual({ playing }) { const [t, setT] = React.useState(0); const LOOP = 13; React.useEffect(() => { if (!playing) { setT(0); return; } const start = performance.now(); let raf; const tick = (now) => { setT(((now - start) / 1000) % LOOP); raf = requestAnimationFrame(tick); }; raf = requestAnimationFrame(tick); return () => cancelAnimationFrame(raf); }, [playing]); // Phases (seconds) const SCROLL_END = 4.8; // scroll finishes here const PICK_IN = 5.0; // target highlights const CHIP_IN = 5.8; // AI chip slides in const HOLD_END = 11.5; // start fade-out before loop const FADE_END = 12.6; // The feed const TARGET_IDX = 9; const cards = [ { text: 'Manager is supportive. Really good week.' }, { text: 'Liking the new shift pattern.' }, { text: 'All fine. No issues.' }, { text: 'Workload OK most weeks.' }, { text: 'Happy enough. Pay could be better.' }, { text: 'Team is great. No complaints.' }, { text: 'Good induction. Useful sessions.' }, { text: 'Comms have improved this quarter.' }, { text: 'Nothing to flag this month.' }, { text: 'My line manager shouts at me in front of the team and nothing has changed.', flagged: true, trigger: 'shouts at me in front of the team', }, { text: 'Patch is busy but manageable.' }, { text: 'Office is too cold on Mondays.' }, { text: 'New starter pack was clear.' }, { text: 'No concerns from me.' }, ]; const CARD_H = 54; // px including gap const VIEWPORT_H = 240; // px // Scroll: bring target to ~38% of viewport (slightly above centre). const targetCentreY = VIEWPORT_H * 0.42; const finalScrollY = TARGET_IDX * CARD_H + CARD_H / 2 - targetCentreY; const easeOut = (p) => 1 - Math.pow(1 - p, 3); let scrollY = 0; if (t <= SCROLL_END) { const p = Math.min(1, t / SCROLL_END); scrollY = finalScrollY * easeOut(p); } else { scrollY = finalScrollY; } const picked = t >= PICK_IN; const chip = t >= CHIP_IN; // Overall fade for graceful loop reset let containerOpacity = 1; if (t < 0.35) containerOpacity = t / 0.35; else if (t > HOLD_END) containerOpacity = Math.max(0, 1 - (t - HOLD_END) / (FADE_END - HOLD_END)); return (

{/* Apple-style window chrome */}

{/* Header */}

Pulse responses · streaming

947 read

{/* Scrolling viewport */}

{/* Top + bottom fade masks */}

{cards.map((c, i) => { const isTarget = i === TARGET_IDX; const dim = picked && !isTarget; return (

{isTarget ? ( <> "My line manager{' '} {c.trigger} {' '}and nothing has changed." ) : c.text}

); })}

{/* AI flag chip — slides in */}

Critical concern detected

Possible harassment · response #4127

); } Object.assign(window, { HeroV2, TrustSectionV2, CustomerLogoGrid, PainCarousel, PainSlide, HeroVisual, ConcernProblemVisual, });

Hear from every colleague.{' '} Including the ones not at the office.

You probably know someone using us right now.

{s.headline}

Hear from every colleague.
{' '} Including the ones not at the office.