// "The Real Problem" — premium B2B conversion section (Sayso). // Structure: a subtle grid of compact pain items (problem) → a dominant // transformation band ("The fix") that shows, in ~3 seconds, how one shoot // becomes several genuinely useful campaign videos. Two simple tabs: // What you get (default) — the business outputs // How it works — the four-step flow // Real footage stills. Pink is rationed: accents, dots, connectors only. const { useState: useStateG, useEffect: useEffectG, useRef: useRefG } = React; const G_REDUCE = typeof matchMedia !== "undefined" && matchMedia("(prefers-reduced-motion: reduce)").matches; function gAnim(kind, delay, play) { if (G_REDUCE) return {}; const tr = { transition: `opacity 600ms cubic-bezier(.2,0,0,1) ${delay}ms, transform 600ms cubic-bezier(.2,0,0,1) ${delay}ms` }; if (play) return { ...tr, opacity: 1, transform: "none" }; const from = kind === "pop" ? "scale(.95)" : kind === "fade" ? "none" : "translateY(14px)"; return { ...tr, opacity: 0, transform: from }; } const G_STYLE = ` @keyframes gb-sweep { 0% { left:6%; } 100% { left:94%; } } @keyframes gb-fill { 0% { transform:scaleX(0.06); } 100% { transform:scaleX(1); } } .gb-playhead { animation: gb-sweep 9s cubic-bezier(.45,0,.55,1) infinite alternate; } .gb-tickfill { transform-origin:left; transform:scaleX(0.06); animation: gb-fill 9s cubic-bezier(.45,0,.55,1) infinite alternate; } @media (prefers-reduced-motion: reduce) { .gb-playhead, .gb-tickfill { animation:none; } } .gb { position:relative; background:var(--bg-white); overflow:hidden; } .gb-wrap { position:relative; max-width:1240px; margin:0 auto; padding:0 56px; } /* problem area */ .gb-prob { position:relative; overflow:hidden; } /* continuous editorial grid plane behind the whole problem section */ .gb-prob::before { display:none; content:""; 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.16)'/%3E%3C/svg%3E"), linear-gradient(to right, transparent 57px, rgba(0,0,0,0.04) 57px 58px, transparent 58px), linear-gradient(to bottom, transparent 57px, rgba(0,0,0,0.04) 57px 58px, transparent 58px); background-size:116px 116px, 116px 116px, 116px 116px; background-position:center top; -webkit-mask-image:linear-gradient(to bottom, transparent, #000 14%, #000 86%, transparent); mask-image:linear-gradient(to bottom, transparent, #000 14%, #000 86%, transparent); } .gb-guide { position:absolute; top:0; bottom:0; width:1px; background:rgba(0,0,0,0.04); z-index:0; } .gb-plus { position:absolute; width:14px; height:14px; z-index:4; transform:translate(-50%,-50%); pointer-events:none; background:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M12%201%20C12.6%208%2016%2011.4%2023%2012%20C16%2012.6%2012.6%2016%2012%2023%20C11.4%2016%208%2012.6%201%2012%20C8%2011.4%2011.4%208%2012%201%20Z'%20fill='%23C9C9C9'/%3E%3C/svg%3E") center/contain no-repeat; } .gb-plus::before, .gb-plus::after { content:none; } /* layer 2 — headline floats in a clean white pocket above the plane */ .gb-head { position:relative; z-index:2; text-align:center; padding:60px 0 54px; } .gb-head::before { content:""; position:absolute; left:50%; top:46%; transform:translate(-50%,-50%); width:820px; height:300px; z-index:-1; pointer-events:none; background:radial-gradient(ellipse at center, #fff 0%, #fff 42%, rgba(255,255,255,0) 74%); } .gb-lbl { 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; } .gb-lbl .d { width:6px; height:6px; border-radius:999px; background:var(--brand-600); flex:none; } .gb-lbl--fix { font-weight:600; font-size:13px; letter-spacing:.16em; color:var(--text-secondary); } .gb-h2 { font:700 clamp(40px,4.6vw,60px)/1.07 var(--font-sans); letter-spacing:-0.035em; color:var(--text-primary); margin:18px auto 0; max-width:860px; text-wrap:balance; } .gb-sub { font:400 clamp(18px,1.9vw,21px)/1.45 var(--font-sans); letter-spacing:-0.01em; color:var(--text-secondary); margin:16px auto 0; max-width:560px; } /* layer 1 — tiles carved out of the plane: they rest LIFTED, casting soft shadow so the depth (and the connection to the plane) is always felt */ .gb-grid { position:relative; z-index:2; display:grid; grid-template-columns:repeat(4,1fr); gap:20px; } .gb-cell { position:relative; padding:28px 24px 30px; border-radius:16px; background:#fff; border:1px solid var(--line); box-shadow: var(--shadow-card); transition: transform 0.28s cubic-bezier(0.2,0,0,1), box-shadow 0.28s cubic-bezier(0.2,0,0,1); } .gb-cell:hover { transform: translateY(-4px); z-index:3; box-shadow: var(--shadow-lift); } .gb-item { display:flex; flex-direction:column; gap:14px; align-items:flex-start; } .gb-ic { flex:none; width:24px; height:24px; color:var(--text-secondary); transition: color 0.25s cubic-bezier(0.4,0,0.2,1), transform 0.25s cubic-bezier(0.4,0,0.2,1); } .gb-cell:hover .gb-ic { color:#FF238C; transform: translateY(-2px) scale(1.04); } .gb-title { font:600 18px/1.3 var(--font-sans); letter-spacing:-0.02em; color:var(--text-primary); } .gb-desc { font:400 15px/1.45 var(--font-sans); color:var(--text-secondary); margin-top:7px; } @media (max-width:860px){ .gb-grid { grid-template-columns:1fr 1fr; } } @media (max-width:560px){ .gb-grid { grid-template-columns:1fr; } } /* transformation band — editorial grid (Firecrawl/Peec-style) */ .gb-fix { position:relative; background:#fff; border-top:1px solid rgba(0,0,0,0.06); } .gb-fix::before { display:none; content:""; 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, 116px 116px, 116px 116px; background-position:center top; -webkit-mask-image:radial-gradient(68% 38% at 50% 50%, #000 0%, #000 30%, rgba(0,0,0,0.35) 58%, transparent 80%); mask-image:radial-gradient(68% 38% at 50% 50%, #000 0%, #000 30%, rgba(0,0,0,0.35) 58%, transparent 80%); } .gb-fix-in { position:relative; z-index:1; max-width:1240px; margin:0 auto; padding:72px 56px 92px; text-align:center; } .gb-fix-h { font:700 clamp(28px,3vw,40px)/1.12 var(--font-sans); letter-spacing:-0.03em; color:var(--text-primary); margin:18px auto 0; max-width:760px; text-wrap:balance; } .gb-fix-p { font:400 clamp(16px,1.7vw,18px)/1.5 var(--font-sans); color:var(--text-secondary); margin:14px auto 0; max-width:640px; text-align:center; } /* tab toggle */ .gb-seg { display:inline-flex; gap:4px; margin:30px auto 0; padding:5px; background:rgba(0,0,0,0.05); border-radius:999px; } .gb-seg button { appearance:none; border:none; cursor:pointer; background:transparent; color:var(--text-tertiary); font:600 14.5px/1 var(--font-sans); letter-spacing:-0.01em; padding:11px 22px; border-radius:999px; white-space:nowrap; transition:background .2s cubic-bezier(.2,0,0,1), color .2s cubic-bezier(.2,0,0,1); } .gb-seg button:hover:not(.on) { color:var(--text-secondary); } .gb-seg button.on { background:#fff; color:var(--text-primary); box-shadow:var(--shadow-card); } /* what you get — output cards */ .gb-outs { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; } .gb-more { margin-top:18px; display:flex; align-items:center; justify-content:center; gap:10px; border:1.5px dashed var(--line-strong); border-radius:18px; padding:16px 22px; } .gb-close { font:500 clamp(17px,1.9vw,20px)/1.4 var(--font-sans); letter-spacing:-0.015em; color:var(--text-secondary); text-wrap:balance; } .gb-close b { color:var(--text-primary); font-weight:600; } @media (max-width:900px) { .gb-wrap { padding:0 22px; } .gb-head { padding:72px 0 40px; } .gb-grid { grid-template-columns:1fr; } .gb-fix-in { padding:52px 22px 64px; } .gb-outs { grid-template-columns:1fr; max-width:420px; margin-left:auto; margin-right:auto; } .gb-arrow { display:none; } } `; // Tiny white play triangle on a blurred dark circle (generic video mark). function PlayDot({ d = 28 }) { return ( ); } // Subtle, monochrome platform hints (never brand-colored, per the system). const GS = { fill: "none", stroke: "currentColor", strokeWidth: 1.6, strokeLinecap: "round", strokeLinejoin: "round" }; function GlyphInstagram({ s = 15 }) { return ; } function GlyphMeta({ s = 15 }) { return ; } function GlyphYouTube({ s = 15 }) { return ; } function GlyphSalesLink({ s = 15 }) { return ; } // Reveal-on-scroll: fires once when the element scrolls into view. Capture-phase // scroll listener + immediate in-view check + safety fallback so content can // never stay hidden if no scroll event arrives. function useReveal() { const ref = useRefG(null); const [shown, setShown] = useStateG(G_REDUCE); useEffectG(() => { if (G_REDUCE) { setShown(true); return; } const el = ref.current; if (!el) return; let done = false; const reveal = () => { if (done) return; done = true; setShown(true); cleanup(); }; const check = () => { if (done) return; const r = el.getBoundingClientRect(); const vh = window.innerHeight || document.documentElement.clientHeight || 0; if (r.top < vh * 0.88 && r.bottom > 0) reveal(); }; const cleanup = () => { window.removeEventListener("scroll", check, true); window.removeEventListener("resize", check); clearTimeout(timer); }; window.addEventListener("scroll", check, true); window.addEventListener("resize", check); const raf = requestAnimationFrame(check); const timer = setTimeout(reveal, 1500); return () => { cleanup(); cancelAnimationFrame(raf); }; }, []); return [ref, shown]; } function vReveal(shown, delay = 0, dist = 20) { if (G_REDUCE) return {}; const tr = { transition: `opacity 600ms cubic-bezier(.2,0,0,1) ${delay}ms, transform 600ms cubic-bezier(.2,0,0,1) ${delay}ms` }; return shown ? { ...tr, opacity: 1, transform: "none" } : { ...tr, opacity: 0, transform: dist ? `translateY(${dist}px)` : "none" }; } // ─── SOURCE — horizontal shooting-day footage strip / editing timeline ─────── function FilmStripWide() { const frames = [ "assets/footage/r-source.png", "assets/footage/r-169.png", "assets/footage/r-916.png", "assets/footage/r-11.png", "assets/footage/r-source.png", "assets/footage/r-169.png", "assets/footage/r-916.png", "assets/footage/r-11.png", ]; const sprockets = "repeating-linear-gradient(90deg, transparent 0 7px, rgba(255,255,255,0.38) 7px 13px, transparent 13px 21px)"; const ticks = "repeating-linear-gradient(90deg, var(--line-strong) 0 1px, transparent 1px 34px)"; return (
Shooting-day footage
Captured once. Used for multiple clips.
Also used for the main testimonial
{frames.map((src, i) => (
))}
{/* playhead */}
0:00
0:42
); } // One-to-many fork: a single feeder from the strip splits to three card columns. // All segments are axis-aligned, so the SVG scales responsively (non-uniform). function Fork({ shown }) { const ease = "cubic-bezier(.2,0,0,1)"; return (
); } // One output clip card. Every card shares the SAME media-well height, title // position, description position, and bottom-aligned metadata — but the clip // INSIDE the well takes the use-case's real shape (9:16 / 1:1 / 16:9), so the // format reads visually, not just in text. Platform hints are quiet glyphs. const WELL_H = 196; function OutputCard({ src, shape, Icon, title, desc, platforms }) { const dims = shape === "9:16" ? { w: 96, h: 170 } : shape === "1:1" ? { w: 156, h: 156 } : { w: 250, h: 141 }; return (
{/* soft blurred fill so letterboxed shapes never look empty */}
{shape}
{title}

{desc}

15–45 sec · 9:16 · 1:1 · 16:9 {platforms.map((P, i) =>

)}

); } // ─── TAB 1 — WHAT YOU GET ──────────────────────────────────────────────────── function WhatYouGet() { const [ref, shown] = useReveal(); const outs = [ { src: "assets/footage/r-916.png", shape: "9:16", Icon: IconMegaphone, title: "Paid ad clip", desc: "Short customer proof for campaigns.", platforms: [GlyphMeta, GlyphInstagram] }, { src: "assets/footage/r-11.png", shape: "1:1", Icon: IconHash, title: "Social proof clip", desc: "A strong customer moment for organic and social.", platforms: [GlyphInstagram, GlyphYouTube] }, { src: "assets/footage/r-169.png", shape: "16:9", Icon: IconSend, title: "Sales follow-up clip", desc: "A short video your sales team can send after calls.", platforms: [GlyphSalesLink] }, ]; return (
{outs.map((o, i) => (
))}
+ More clips when the footage supports it
); } // ─── TAB 2 — HOW IT WORKS ──────────────────────────────────────────────────── function StepArrow() { return ( ); } function HowItWorks() { const [ref, shown] = useReveal(); const steps = [ { n: "01", t: "We scan the shoot day", d: "Interview, b-roll, and real moments beyond the main film." }, { n: "02", t: "You get 3 directions", d: "Suggested clip angles from the strongest campaign moments." }, { n: "03", t: "You choose or build", d: "Pick one, choose several, or create your own mix." }, { n: "04", t: "We produce the clips", d: "Delivered in 9:16, 1:1, and 16:9, with review and comments." }, ]; return (
{steps.map((s, i) => (
{s.n}
{s.t}

{s.d}

{i < steps.length - 1 &&
} ))}
); } // ─── STANDALONE: visual product demo (one testimonial → 3-format pack) ─────── function FixVisual() { const [play, setPlay] = useStateG(false); useEffectG(() => { const t = setTimeout(() => setPlay(true), 140); return () => clearTimeout(t); }, []); return (
The Fix

From one approved testimonial to campaign-ready clips.

One customer story becomes paid ads, sales follow-ups, and social proof assets.

); } // ─── STANDALONE: the real problem (parameterized 4-card grid) ──────────────── function ProblemGrid({ label, headline, sub, cards }) { const [play, setPlay] = useStateG(false); useEffectG(() => { const t = setTimeout(() => setPlay(true), 120); return () => clearTimeout(t); }, []); return (
{label}

{sub}

{cards.map((p, i) => (
{p.t}
{p.d}
))}
); } function GridBuild() { const [play, setPlay] = useStateG(false); useEffectG(() => { const t = setTimeout(() => setPlay(true), 140); return () => clearTimeout(t); }, []); const [tab, setTab] = useStateG(() => { try { const v = localStorage.getItem("gb-fix-tab"); return v === "how" ? "how" : "get"; } catch (e) { return "get"; } }); useEffectG(() => { try { localStorage.setItem("gb-fix-tab", tab); } catch (e) {} }, [tab]); const pains = [ { Icon: IconSend, t: "Sales teams need proof", d: "Short customer videos they can send right now." }, { Icon: IconMegaphone, t: "Paid campaigns need fresh creative", d: "New angles, new cuts, less ad fatigue." }, { Icon: IconHash, t: "Social channels need constant content", d: "Always-on channels need a steady flow." }, { Icon: IconClock, t: "New shoots don’t scale", d: "Every new production adds time, cost, and coordination." }, ]; return (
The Real Problem

Marketing and sales teams never have enough video assets.

Campaigns need fresh creative. New productions don’t scale.

{pains.map((p, i) => (
{i === 0 && } {i === 0 && }
{p.t}
{p.d}
))}
How it works

Your film is done. Your next clips are already mapped out.

The main film tells the story. The other strong moments from your shoot day become proof for paid, social, and sales.

{tab === "get" ? : }

You already have the material. Sayso finds the campaign value inside it.

); } window.GridBuild = GridBuild; Object.assign(window, { GB_STYLE: G_STYLE, FixVisual, ProblemGrid, GbWhatYouGet: WhatYouGet });