// Sayso — Testimonial Ads page. Site-level shell: design tokens-in-code, // shared atoms (editorial crosshair grid, eyebrow capsule, buttons), Nav, // Hero, and Footer. Pink is rationed to CTAs + accents per the brand. const { useState: useStateS, useEffect: useEffectS, useRef: useRefS } = React; const PC_REDUCE = typeof matchMedia !== "undefined" && matchMedia("(prefers-reduced-motion: reduce)").matches; const PC_CSS = ` :root { --pc-max: 1200px; --pc-pad: 56px; } .pc { font-family: var(--font-sans); color: var(--text-primary); } .pc-wrap { max-width: var(--pc-max); margin: 0 auto; padding: 0 var(--pc-pad); } .pc-sec { position: relative; } /* video lightbox */ .pc-lbx { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 32px; background: rgba(0,0,0,0.78); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); opacity: 0; transition: opacity .22s cubic-bezier(.2,0,0,1); } .pc-lbx.on { opacity: 1; } .pc-lbx-frame { position: relative; width: min(960px, 92vw); transform: scale(.96); transition: transform .22s cubic-bezier(.2,0,0,1); } .pc-lbx.on .pc-lbx-frame { transform: scale(1); } .pc-lbx.vert .pc-lbx-frame { width: min(420px, 88vw); } .pc-lbx-video { position: relative; width: 100%; aspect-ratio: 16/9; border-radius: 20px; overflow: hidden; background: #000; box-shadow: 0 16px 40px rgba(0,0,0,0.5); } .pc-lbx.vert .pc-lbx-video { aspect-ratio: 9/16; } .pc-lbx-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; } .pc-lbx-x { position: absolute; top: -44px; right: 0; width: 36px; height: 36px; border-radius: 999px; border: none; cursor: pointer; background: rgba(255,255,255,0.12); display: flex; align-items: center; justify-content: center; transition: background .2s; } .pc-lbx-x:hover { background: rgba(255,255,255,0.24); } .pc-unmute { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); z-index: 8; display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 18px; border: 0; cursor: pointer; border-radius: 999px; background: #FF238C; color: #fff; font: 600 14px/1 var(--font-sans); letter-spacing: -0.01em; box-shadow: 0 6px 20px rgba(255,35,140,0.45); transition: opacity .2s, transform .2s, background .18s; } .pc-unmute:hover { background: #F0167E; } .pc-unmute.off { opacity: 0; pointer-events: none; transform: translateX(-50%) scale(.88); } .pc-playsound { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); z-index: 9; display: inline-flex; align-items: center; gap: 10px; height: 56px; padding: 0 26px; border: 0; cursor: pointer; border-radius: 999px; background: #FF238C; color: #fff; font: 600 16px/1 var(--font-sans); letter-spacing: -0.01em; box-shadow: 0 12px 34px rgba(255,35,140,0.5); transition: background .18s, transform .18s; } .pc-playsound:hover { background: #F0167E; transform: translate(-50%,-50%) scale(1.03); } .pc-playsound svg { flex: none; } /* mobile: play full-frame — lightbox fills the viewport edge-to-edge */ @media (max-width: 767px) { .pc-lbx { padding: 0; } .pc-lbx-frame, .pc-lbx.vert .pc-lbx-frame { width: 100%; max-width: 100%; height: 100dvh; transform: scale(1); } .pc-lbx-video, .pc-lbx.vert .pc-lbx-video { width: 100%; height: 100%; aspect-ratio: auto; border-radius: 0; box-shadow: none; } .pc-lbx-x { top: 14px; right: 14px; width: 40px; height: 40px; background: rgba(0,0,0,0.55); z-index: 10; } .pc-lbx-x:hover { background: rgba(0,0,0,0.7); } } /* editorial crosshair grid field (the signature) */ .pc-field { display: none; position: absolute; inset: 0; pointer-events: none; z-index: 0; background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='116'%20height='116'%3E%3Cpath%20d='M58%2051%20C58.4%2056%2060%2057.6%2065%2058%20C60%2058.4%2058.4%2060%2058%2065%20C57.6%2060%2056%2058.4%2051%2058%20C56%2057.6%2057.6%2056%2058%2051%20Z'%20fill='rgba(0,0,0,0.14)'/%3E%3C/svg%3E"), linear-gradient(to right, transparent 57px, rgba(0,0,0,0.045) 57px 58px, transparent 58px), linear-gradient(to bottom, transparent 57px, rgba(0,0,0,0.045) 57px 58px, transparent 58px); background-size: 116px 116px; background-position: center top; } /* eyebrow capsule */ .pc-cap { display:inline-flex; align-items:center; gap:10px; padding:8px 16px; border-radius:999px; background:#fff; border:1px solid var(--line); font:600 13px/1 var(--font-sans); letter-spacing:.16em; text-transform:uppercase; color:var(--text-secondary); white-space:nowrap; } .pc-cap .d { width:6px; height:6px; border-radius:999px; background:var(--brand-600); flex:none; } .pc-cap--dark { background:rgba(255,255,255,0.06); border-color:rgba(255,255,255,0.16); color:rgba(255,255,255,0.82); } /* buttons */ .pc-btn { appearance:none; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; gap:9px; border-radius:999px; font:600 16px/1 var(--font-sans); letter-spacing:-0.01em; height:56px; padding:0 30px; border:1px solid transparent; transition:background .18s cubic-bezier(.2,0,0,1), border-color .18s, color .18s, transform .42s cubic-bezier(.34,1.56,.64,1), box-shadow .28s cubic-bezier(.2,0,0,1); } .pc-btn-pri { background:var(--brand-600); color:#fff; } .pc-btn-pri svg { transition:transform .26s cubic-bezier(.2,0,0,1); } .pc-btn-pri:hover { background:var(--brand-700); box-shadow:0 10px 24px -8px rgba(255,35,140,0.45); } .pc-btn-pri:hover svg { transform:translate(2.5px,-2.5px); } .pc-btn-pri:active { transform:scale(0.94); transition:transform .1s cubic-bezier(.4,0,.2,1); } .pc-btn-sec { background:#fff; border-color:var(--text-primary); color:var(--text-primary); } .pc-btn-sec:hover { background:var(--text-primary); color:#fff; } .pc-btn-sm { height:46px; padding:0 22px; font-size:15px; } .pc-btn-ghostd { background:transparent; border-color:rgba(255,255,255,0.24); color:#fff; } .pc-btn-ghostd:hover { background:#fff; color:#000; border-color:#fff; } /* section heads */ .pc-h2 { font:700 clamp(36px,4.4vw,58px)/1.06 var(--font-sans); letter-spacing:-0.035em; color:var(--text-primary); margin:20px 0 0; max-width:18ch; text-wrap:balance; } .pc-h2.center { margin-left:auto; margin-right:auto; text-align:center; } .pc-lead { font:400 clamp(17px,1.8vw,20px)/1.5 var(--font-sans); letter-spacing:-0.01em; color:var(--text-secondary); margin:18px 0 0; max-width:54ch; } .pc-lead.center { margin-left:auto; margin-right:auto; text-align:center; } .pc-pink { color:var(--brand-600); } .pc-card { background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg, 20px); } /* robust entrance — NEVER touches opacity, so content is always visible even if CSS animations are paused (throttled/background tab). Only a gentle lift. */ @keyframes pcRise { from { transform:translateY(14px); } to { transform:none; } } .pc-rise { animation: pcRise .6s cubic-bezier(.2,0,0,1) both; } @media (prefers-reduced-motion: reduce) { .pc-rise { animation:none; } } /* nav */ .pc-nav { position:sticky; top:0; z-index:60; height:74px; background:rgba(255,255,255,0.86); backdrop-filter:saturate(180%) blur(14px); -webkit-backdrop-filter:saturate(180%) blur(14px); border-bottom:1px solid var(--line); } .pc-nav-in { height:100%; display:flex; align-items:center; justify-content:space-between; gap:24px; } .pc-nav-links { display:flex; gap:30px; } .pc-nav-links a { font:500 15.5px/1 var(--font-sans); letter-spacing:-0.01em; color:var(--text-secondary); text-decoration:none; transition:color .15s; } .pc-nav-links a:hover { color:var(--text-primary); } .pc-nav-right { display:flex; align-items:center; gap:14px; } .pc-nav-login { font:500 15.5px/1 var(--font-sans); color:var(--text-primary); text-decoration:none; } @media (max-width: 960px) { :root { --pc-pad: 22px; } .pc-nav-links, .pc-nav-login { display:none; } } /* products dropdown */ .pc-nav-item { position:relative; display:flex; align-items:center; } .pc-nav-trigger { display:inline-flex; align-items:center; gap:5px; cursor:pointer; font:500 15.5px/1 var(--font-sans); letter-spacing:-0.01em; color:var(--text-secondary); background:none; border:0; padding:0; transition:color .15s; } .pc-nav-trigger:hover, .pc-nav-item:hover .pc-nav-trigger { color:var(--text-primary); } .pc-nav-trigger svg { transition:transform .2s cubic-bezier(.2,0,0,1); } .pc-nav-item:hover .pc-nav-trigger svg { transform:rotate(180deg); } .pc-dd { position:absolute; top:100%; left:50%; transform:translateX(-50%) translateY(8px); width:540px; background:#fff; border:1px solid var(--line); border-radius:20px; box-shadow:var(--shadow-lift,0 8px 24px rgba(0,0,0,0.12)); padding:14px; margin-top:14px; opacity:0; visibility:hidden; pointer-events:none; transition:opacity .18s cubic-bezier(.2,0,0,1), transform .18s cubic-bezier(.2,0,0,1); z-index:80; } .pc-dd::before { content:""; position:absolute; bottom:100%; left:0; right:0; height:24px; } .pc-nav-item:hover .pc-dd { opacity:1; visibility:visible; pointer-events:auto; transform:translateX(-50%) translateY(0); } .pc-dd-grid { display:grid; grid-template-columns:1fr 1fr; gap:4px; } .pc-dd-item { display:flex; gap:12px; padding:12px; border-radius:12px; text-decoration:none; transition:background .15s; align-items:flex-start; } .pc-dd-item:hover { background:rgba(0,0,0,0.045); } .pc-dd-ico { flex:none; width:38px; height:38px; border-radius:10px; border:1px solid var(--line); display:flex; align-items:center; justify-content:center; color:var(--text-primary); } .pc-dd-tt { font:600 15px/1.2 var(--font-sans); color:var(--text-primary); letter-spacing:-0.01em; } .pc-dd-sb { font:400 13px/1.4 var(--font-sans); color:var(--text-tertiary); margin-top:4px; } .pc-dd-foot { display:flex; align-items:center; justify-content:space-between; gap:16px; margin:10px 4px 4px; padding-top:14px; border-top:1px solid var(--line); } .pc-dd-foot .lbl { font:500 14px/1 var(--font-sans); color:var(--text-secondary); } .pc-dd-foot a { display:inline-flex; align-items:center; gap:6px; font:600 14px/1 var(--font-sans); color:var(--brand-600); text-decoration:none; transition:color .15s; } .pc-dd-foot a:hover { color:var(--brand-700); } /* footer links + socials */ .pc-foot-link { font:400 15px/1.5 var(--font-sans); color:rgba(255,255,255,0.82); text-decoration:none; transition:color .15s; } .pc-foot-link:hover { color:#fff; } .pc-foot-socials { display:flex; gap:10px; } .pc-foot-social { width:34px; height:34px; border-radius:999px; background:#fff; flex:none; display:flex; align-items:center; justify-content:center; transition:transform .18s cubic-bezier(.2,0,0,1), opacity .18s; } .pc-foot-social:hover { transform:translateY(-2px); opacity:0.86; } /* ── responsive helpers ── */ .pc-2col { display:grid; } @media (max-width: 760px) { .pc-2col { grid-template-columns:1fr !important; gap:36px !important; } } .pc-foot-grid { display:grid; grid-template-columns:1.7fr 1fr 1fr 1fr; gap:40px; } @media (max-width: 820px) { .pc-foot-grid { grid-template-columns:1fr 1fr; gap:38px 28px; } .pc-foot-brand { grid-column:1 / -1; max-width:none; } } @media (max-width: 480px) { .pc-foot-grid { grid-template-columns:1fr; gap:32px; } } /* ════════════════ MOBILE (≤767px) — dedicated layout ════════════════ */ @media (max-width: 767px) { /* — kill all horizontal overflow — */ html, body { overflow-x:hidden; max-width:100%; } .pc { overflow-x:hidden; max-width:100vw; } .pc-sec { max-width:100vw; overflow-x:clip; } .pc-wrap { max-width:100%; width:100%; } .pc img, .pc video, .pc svg { max-width:100%; } :root { --pc-pad:18px; } /* — header: 72px, compact logo, prominent-but-sane CTA — */ .pc-nav { height:72px; } .pc-nav-in { gap:12px; } .pc-nav a img { height:24px !important; width:auto; } .pc-nav-right { gap:0; } /* compact header CTA — present but no longer dominating the first screen */ .pc-nav-right .pc-btn { height:38px !important; min-width:0 !important; justify-content:center; font-size:13.5px !important; padding:0 14px !important; } /* — generic section rhythm: tighten the giant desktop gaps — */ .pc-sec > .pc-wrap { padding-top:48px !important; padding-bottom:18px !important; } .pc-h2 { font-size:30px !important; line-height:1.1 !important; } .pc-lead { font-size:17px !important; } /* — section eyebrows: editorial label with a short pink rule (no pill, no dots) — */ .pc-cap { background:transparent !important; border:0 !important; padding:0 !important; gap:10px !important; letter-spacing:.2em !important; font-size:11.5px !important; color:var(--text-tertiary) !important; } /* unified mobile section label — short pink rule on BOTH sides (— TITLE —) */ .pc-cap .d { display:inline-block !important; width:18px !important; height:1.5px !important; border-radius:0 !important; background:var(--brand-600) !important; } .pc-cap--dark { color:rgba(255,255,255,0.66) !important; } /* — premium mobile CTA block: full-width stacked buttons — */ .pc-cta-mob { display:flex; flex-direction:column; align-items:stretch; gap:10px; width:100%; max-width:360px; margin-left:auto; margin-right:auto; } .pc-cta-mob .pc-btn { width:100%; height:54px; font-size:16px; } } /* mobile-only helper element (hidden on desktop so layout never changes there) */ .pc-mob-only { display:none !important; } @media (max-width:767px) { .pc-mob-only { display:inline-flex !important; } .pc-desk-only { display:none !important; } } `; function ArrowUR({ s = 17 }) { return ; } function Cap({ children, dark = false }) { return {children}; } // Reusable mounting fade-in function useMount(delay = 120) { const [on, setOn] = useStateS(PC_REDUCE); useEffectS(() => { if (PC_REDUCE) return; const t = setTimeout(() => setOn(true), delay); return () => clearTimeout(t); }, []); return on; } function rise(on, delay = 0, dist = 22) { if (PC_REDUCE) return {}; // Amplify travel so the scroll-build reads clearly (per-call stagger preserved). const d = dist ? Math.round(dist * 1.7) : 0; const tr = { transition: `opacity 760ms cubic-bezier(.2,0,0,1) ${delay}ms, transform 760ms cubic-bezier(.2,0,0,1) ${delay}ms` }; return on ? { ...tr, opacity: 1, transform: "none" } : { ...tr, opacity: 0, transform: d ? `translateY(${d}px)` : "none" }; } // Scroll reveal (shared with sections). True scroll-driven build via // IntersectionObserver: content above the fold shows at once; everything below // stays hidden until it scrolls into view, so each section builds as you reach // it. Print/export and no-IO environments reveal immediately (never stuck). function usePcReveal() { const ref = useRefS(null); const [shown, setShown] = useStateS(PC_REDUCE); useEffectS(() => { if (PC_REDUCE) { setShown(true); return; } const el = ref.current; if (!el) return; let done = false, io = null; const cleanup = () => { if (io) io.disconnect(); window.removeEventListener("beforeprint", reveal); }; const reveal = () => { if (done) return; done = true; setShown(true); cleanup(); }; // already in (or above) the viewport on mount → reveal now, no animation gap const r = el.getBoundingClientRect(); const vh = window.innerHeight || 0; if (r.top < vh * 0.92 && r.bottom > 0) { reveal(); return; } if (typeof IntersectionObserver !== "undefined") { io = new IntersectionObserver((entries) => { entries.forEach((e) => { if (e.isIntersecting) reveal(); }); }, { threshold: 0.12, rootMargin: "0px 0px -14% 0px" }); io.observe(el); } else { reveal(); } window.addEventListener("beforeprint", reveal); return cleanup; }, []); return [ref, shown]; } // Mobile detection (drives mobile-specific render branches). Uses innerWidth so it // stays consistent with the morph sizing and works under preview harnesses. function usePcIsMobile(bp = 767) { const [m, setM] = useStateS(typeof window !== "undefined" ? window.innerWidth <= bp : false); useEffectS(() => { const f = () => setM(window.innerWidth <= bp); f(); window.addEventListener("resize", f); return () => window.removeEventListener("resize", f); }, [bp]); return m; } // Generic play mark function PcPlay({ d = 44 }) { return ( ); } // Imperative video lightbox — opens an embed (Vimeo/YouTube) over a dimmed backdrop. // Vanilla DOM so it works across the separate Babel script scopes. // opts.vertical → 9:16 portrait player (for vertical reels); default landscape 16:9. function openPcVideo(embedSrc, opts) { if (document.querySelector(".pc-lbx")) return; const vertical = opts && opts.vertical; // Opened by a user click → autoplay WITH sound is permitted. Start UNMUTED; if a browser // still blocks it we recover (re-mute + resume) so the clip never freezes. No mute button. let src = embedSrc.replace(/([?&])autoplay=0\b/, "$1autoplay=1").replace(/([?&])muted=1\b/, "$1muted=0"); if (!/[?&]autoplay=/.test(src)) src += (src.indexOf("?") >= 0 ? "&" : "?") + "autoplay=1"; if (!/[?&]muted=/.test(src)) src += "&muted=0"; const ov = document.createElement("div"); ov.className = "pc-lbx" + (vertical ? " vert" : ""); ov.setAttribute("role", "dialog"); ov.setAttribute("aria-modal", "true"); ov.innerHTML = '
' + '' + '
' + '
'; let player = null; let removeToggle = null; const close = () => { // hard-stop audio immediately, independent of the fade-out if (player) { try { player.setVolume(0); player.setMuted(true); if (player.pause) player.pause(); } catch (e) {} } if (removeToggle) { try { removeToggle(); } catch (e) {} } ov.classList.remove("on"); document.removeEventListener("keydown", onKey); setTimeout(() => ov.remove(), 220); }; const onKey = (e) => { if (e.key === "Escape") close(); }; ov.addEventListener("click", (e) => { if (e.target === ov) close(); }); ov.querySelector(".pc-lbx-x").addEventListener("click", close); document.addEventListener("keydown", onKey); document.body.appendChild(ov); requestAnimationFrame(() => ov.classList.add("on")); const frame = ov.querySelector(".pc-lbx-frame"); if (typeof window.Vimeo !== "undefined") { try { player = new window.Vimeo.Player(ov.querySelector("iframe")); } catch (e) { player = null; } } if (player) { // Start with sound. If a browser blocks the unmute and pauses the clip, recover // (re-mute + resume) so it never freezes. Runs once → no loop. No button shown. let triedSound = false; const ensureSound = () => { if (triedSound) return; triedSound = true; try { player.setMuted(false); player.setVolume(1); } catch (e) {} setTimeout(() => { try { player.getPaused().then((p) => { if (p) { try { player.setMuted(true); player.setVolume(0); } catch (e) {} try { const r = player.play(); if (r && r.catch) r.catch(function(){}); } catch (e) {} } }).catch(function(){}); } catch (e) {} }, 260); }; try { player.on("playing", ensureSound); } catch (e) {} try { if (player.ready) player.ready().then(ensureSound).catch(function(){}); } catch (e) {} } } // The pink button IS the audio controller for the visible Vimeo player — it owns no // separate state. Its label is derived purely from the player's real audibility // (getMuted + getVolume), kept in sync via the volumechange event AND a light poll so // it can never disagree with Vimeo's own controls. Each click acts on the real player. const PC_IC_MUTED = ''; const PC_IC_ON = ''; function pcSyncMuteToggle(player, mountEl) { if (!player || !mountEl) return null; const btn = document.createElement("button"); btn.type = "button"; btn.className = "pc-unmute"; let audible = true; // corrected immediately from the real player const render = () => { btn.innerHTML = audible ? PC_IC_ON + "Mute" : PC_IC_MUTED + "Unmute"; btn.classList.toggle("is-muted", !audible); btn.setAttribute("aria-pressed", String(audible)); }; // Read the player's TRUE audible state (not muted AND volume > 0) and reflect it. const readState = () => { try { Promise.all([ player.getMuted ? player.getMuted().catch(function(){ return false; }) : Promise.resolve(false), player.getVolume ? player.getVolume().catch(function(){ return 1; }) : Promise.resolve(1), ]).then(function (r) { const a = !r[0] && r[1] > 0; if (a !== audible) { audible = a; render(); } }); } catch (e) {} }; const onVol = () => readState(); btn.addEventListener("click", () => { // act on the REAL player; reconcile the label from the player right after try { if (audible) { player.setMuted(true); player.setVolume(0); } else { player.setMuted(false); player.setVolume(1); if (player.play) { const pr = player.play(); if (pr && pr.catch) pr.catch(function(){}); } } } catch (e) {} audible = !audible; render(); // snappy, then immediately reconciled below setTimeout(readState, 80); }); try { player.on("volumechange", onVol); } catch (e) {} const poll = setInterval(readState, 600); // catches changes made via Vimeo's own controls render(); readState(); mountEl.appendChild(btn); return () => { try { clearInterval(poll); } catch (e) {} try { player.off && player.off("volumechange", onVol); } catch (e) {} try { btn.remove(); } catch (e) {} }; } // Back-compat alias (reels overlay calls window.pcUnmuteBtn): same synced toggle. function pcUnmuteBtn(player, mountEl) { return pcSyncMuteToggle(player, mountEl); } function pcPinkUnmute(iframe, mountEl) { if (typeof window.Vimeo === "undefined" || !iframe) return null; let p; try { p = new window.Vimeo.Player(iframe); } catch (e) { return null; } return pcSyncMuteToggle(p, mountEl); } // ─── LINK CONFIG ───────────────────────────────────────────────────────────── // Every outbound link of this unit lives here. The host page (Webflow) may // override window.PC_LINKS BEFORE this script runs to wire the unit to the real // site. Values starting with "#" scroll to a section INSIDE the unit; any other // value (e.g. "/pricing" or "https://app.sayso.video") is a normal navigation. window.PC_LINKS = window.PC_LINKS || { logo: "https://www.sayso.video/", navHome: "https://www.sayso.video/", navPricing: "https://www.sayso.video/pricing", navPortfolio: "https://www.sayso.video/portfolio", navBlog: "https://www.sayso.video/blog", testimonial: "https://www.sayso.video/testimonial", performance: "https://www.sayso.video/performance", conferences: "https://www.sayso.video/conferences", shootOnly: "https://www.sayso.video/shoot-only", contact: "https://www.sayso.video/contact", about: "https://www.sayso.video/about-us", privacy: "https://www.sayso.video/privacy-policy", terms: "https://www.sayso.video/terms-of-service", prodTerms: "https://www.sayso.video/video-production-terms", cookies: "https://www.sayso.video/cookies-setting", fb: "https://www.facebook.com/sayso.videos/", linkedin: "https://www.linkedin.com/company/sayso-video/", youtube: "https://www.youtube.com/channel/UC7meVWhFPgfAS5T7u-sZlXQ", vimeo: "https://vimeo.com/saysovideos", navLogin: "https://app.sayso.video/version-live/authorization?Page=LogIn", navBook: "https://www.sayso.video/book-a-meeting", addClips: "https://www.sayso.video/book-a-meeting", buyClips: "https://www.sayso.video/book-a-meeting", planningCall: "https://www.sayso.video/book-a-meeting", }; window.pcGo = function (t) { if (!t) return; if (String(t).charAt(0) === "#") { var el = document.getElementById(String(t).slice(1)); if (el) el.scrollIntoView({ behavior: "smooth" }); } else { /* Open in a new tab. Works whether the unit is standalone or embedded in an iframe (top-window navigation is blocked in sandboxed previews). */ try { var w = window.open(t, "_blank", "noopener"); if (!w) { try { (window.top || window).location.href = t; } catch (e) { window.location.href = t; } } } catch (e) { window.location.href = t; } } }; // In-page "#" anchors smooth-scroll; everything else opens in a new tab so the // link is always clickable, whether standalone or embedded in a sandboxed iframe. function NavA({ href, className, style, children, onClick }) { const isHash = String(href || "").charAt(0) === "#"; return ( { if (isHash) { e.preventDefault(); window.pcGo(href); } if (onClick) onClick(e); }}> {children} ); } // Products dropdown contents — mirrors the live site nav. const PC_PRODUCTS = [ { key: "testimonial", title: "Testimonial", desc: "Real customer proof. Filmed anywhere.", icon: () }, { key: "performance", title: "Performance", desc: "Hook-based video ads from your testimonials.", icon: () }, { key: "conferences", title: "Conference", desc: "One event. Multiple customer stories.", icon: () }, { key: "shootOnly", title: "Shoot-Only", desc: "Pro footage. Your team edits.", icon: () }, ]; // ─── NAV ───────────────────────────────────────────────────────────────────── function PcNav() { const L = window.PC_LINKS; return (
Sayso
Login
); } // ─── HERO ──────────────────────────────────────────────────────────────────── function HeroFormat({ src, label, w, h, objPos = "center 28%", z = 1, style }) { return (
{label}
); } function PcHero() { return (
Testimonial Ads

Don't leave 90% of your testimonial shoot
on the cutting room floor.

Sayso turns your raw interview footage into short, high-converting campaign clips.

$690 first clip · $590 per additional clip · 3 formats: 9:16 · 1:1 · 16:9
); } // ─── FOOTER ────────────────────────────────────────────────────────────────── function PcFooter() { const L = window.PC_LINKS; const Col = ({ title, links }) => (
{title}
{links.map((l, i) => {l.label})}
); const socials = [ { href: L.fb, label: "Facebook", svg: () }, { href: L.linkedin, label: "LinkedIn", svg: () }, { href: L.youtube, label: "YouTube", svg: () }, { href: L.vimeo, label: "Vimeo", svg: () }, ]; return ( ); } Object.assign(window, { PC_CSS, PC_REDUCE, useMount, rise, usePcReveal, usePcIsMobile, PcPlay, openPcVideo, pcUnmuteBtn, pcSyncMuteToggle, pcPinkUnmute, ArrowUR, Cap, NavA, PcNav, PcHero, PcFooter });