// ───────────────────────────────────────────────────────────── // "ONE GROUP. ONE POWER." — campaign-poster sibling of the // Definitive concept. Same form mechanics; the personality // dial is turned up: // // • Squares-cluster header burst (full brand palette — // primary amber + tertiary strong + secondary pastels) // arranged around the stacked logo, matching the WXG // "Visit Your New Website" campaign aesthetic. // • "WE ARE" / "ONE GROUP. ONE POWER." tagline frame. // • Skyline lives at the BOTTOM, not the top — feels like // a closing horizon line, with the squares acting as // the rising celebration overhead. // • Track record stats row above the skyline. // • Form card identical to the Definitive — reuses every // shared internal so the two are interchangeable. // ───────────────────────────────────────────────────────────── const CB_TYPE = WXG_FONT; const CB_MONO = WXG_MONO; // Palette — full brand spectrum (primaries, secondaries, tertiaries) const CB_PALETTE = { amber: '#FCAF17', pinkStrong: '#C161CA', greenStrong: '#61CAA0', blueStrong: '#6186CA', goldStrong: '#CABE61', redStrong: '#CA6461', pinkSoft: '#E0B0E5', greenSoft: '#B0E5D0', blueSoft: '#B0C2E5', goldSoft: '#E5DEB0', redSoft: '#E5B2B0', ink: '#1F1F1F', grey: '#4D4D4D', paper: '#F5F5F4', }; // ───────────────────────────────────────────────────────────── // The squares-cluster — fixed, intentional composition arranged // around the logo. Numbers are percentages relative to the // header region (so the cluster scales with the viewport). // ───────────────────────────────────────────────────────────── const CB_SQUARES = [ // Big amber anchor — lower-left of the burst { x: 38, y: 60, w: 64, h: 64, c: CB_PALETTE.amber, d: 0 }, // Strong pinks/magenta accents { x: 22, y: 14, w: 38, h: 30, c: CB_PALETTE.pinkStrong, d: 0.4 }, { x: 49, y: 10, w: 24, h: 32, c: CB_PALETTE.pinkStrong, d: 0.5 }, { x: 64, y: 26, w: 18, h: 18, c: CB_PALETTE.pinkStrong, d: 0.6 }, { x: 14, y: 40, w: 14, h: 18, c: CB_PALETTE.pinkStrong, d: 0.7 }, // Pastel pinks { x: 30, y: 5, w: 18, h: 18, c: CB_PALETTE.pinkSoft, d: 0.3 }, { x: 76, y: 12, w: 22, h: 16, c: CB_PALETTE.pinkSoft, d: 0.55 }, // Greens { x: 5, y: 22, w: 22, h: 18, c: CB_PALETTE.greenSoft, d: 0.2 }, { x: 60, y: 50, w: 28, h: 22, c: CB_PALETTE.greenStrong, d: 0.45 }, { x: 4, y: 60, w: 14, h: 14, c: CB_PALETTE.greenSoft, d: 0.65 }, // Golds { x: 73, y: 38, w: 30, h: 26, c: CB_PALETTE.goldSoft, d: 0.35 }, { x: 86, y: 56, w: 20, h: 22, c: CB_PALETTE.goldStrong, d: 0.5 }, { x: 56, y: 28, w: 14, h: 14, c: CB_PALETTE.goldSoft, d: 0.4 }, // Blues { x: 18, y: 4, w: 14, h: 14, c: CB_PALETTE.blueSoft, d: 0.15 }, { x: 81, y: 4, w: 12, h: 14, c: CB_PALETTE.blueStrong, d: 0.6 }, // Small black + amber accents (the brand book's "dots") { x: 50, y: 36, w: 8, h: 8, c: CB_PALETTE.ink, d: 0.7 }, { x: 26, y: 56, w: 8, h: 8, c: CB_PALETTE.ink, d: 0.75 }, { x: 70, y: 16, w: 6, h: 6, c: CB_PALETTE.ink, d: 0.8 }, { x: 90, y: 36, w: 10, h: 10, c: CB_PALETTE.amber, d: 0.55 }, { x: 12, y: 70, w: 10, h: 10, c: CB_PALETTE.amber, d: 0.65 }, // Red accents { x: 44, y: 80, w: 14, h: 12, c: CB_PALETTE.redSoft, d: 0.8 }, { x: 38, y: 30, w: 10, h: 12, c: CB_PALETTE.redStrong, d: 0.6 }, ]; function CB_SquaresCluster({ mobile, progress }) { // Cluster region: full width × ~85% of header height. // On mobile, slightly tighter scaling. return (
{CB_SQUARES.map((sq, i) => { // Each square fades in based on `d` (delay 0..1) compared // to progress through the survey. Subtle drift on activation. const revealed = progress >= sq.d - 0.05; return (
); })}
); } // ───────────────────────────────────────────────────────────── // "WE ARE WXG / ONE GROUP. ONE POWER." stacked treatment // (the campaign-edition variant of the stacked logo) // ───────────────────────────────────────────────────────────── function CB_CampaignLogo({ mobile }) { const wxgH = mobile ? 44 : 60; return (
WE ARE One Group. One Power.
); } // ───────────────────────────────────────────────────────────── // Track-record stats row above the skyline footer. // ───────────────────────────────────────────────────────────── function CB_Stats({ mobile }) { const items = [ ['30+', 'שנות מצוינות'], ['400+', 'פרויקטים'], ['12', 'מדינות'], ]; return (
{items.map(([n, l], i) => (
{n} {l} {i < items.length - 1 && ( )}
))}
); } // ───────────────────────────────────────────────────────────── // Direction shell — Squares header + Card + Stats + Skyline footer // ───────────────────────────────────────────────────────────── function DirectionCelebrate({ mobile = false, initialPage = 0, initialAnswers = null }) { const s = useSurvey({ initialPage, initialAnswers }); // Continuous progress 0..1 across the survey, used to reveal // both the squares cluster and the skyline footer. const progress = s.page === 0 ? 0.04 : s.page > s.total ? 1 : (s.page / (s.total + 0.4)); return (
{/* Squares-cluster header */}
{/* Logo + tagline centered, anchored to bottom of header */}
{/* Form card */}
{/* Card header — project meta */} {/* Body — fade-slide between states */}
0 ? 'next' : 'prev'} 380ms cubic-bezier(.2,.8,.2,1)`, }}> {s.page === 0 && } {s.page > 0 && s.page <= s.total && } {s.page > s.total && }
{/* Card nav */}
{/* Stats row + skyline footer */}
© 2026 WXG · Waxman Group
); } window.DirectionCelebrate = DirectionCelebrate;