const { useEffect: useEffectCS } = React; function CSCover() { return ( ); } function CSShot({ kind }) { // Three different illustrative screens if (kind === 1) { return ( ); } if (kind === 2) { return ( ); } // kind 3 — confirmation return ( ); } function CSImageSlot({ label }) { return (
+ {label || "Add image here"}
); } const CS2_BASE = "assets/2-works/Bradesco/work-tiu-diu/"; const CS3_BASE = "assets/2-works/BYU/work-app-elc-apply/"; function CS2Stage({ srcs, back, ratio = "16/9", cover = false, bleedBottom = false }) { const backdrop = back || srcs[0]; const cls = [ "cs2-stage", cover ? "cs2-stage--cover" : "", bleedBottom ? "cs2-stage--bleed-bottom" : "", ].filter(Boolean).join(" "); return (
{srcs.map((src, i) => ( ))}
); } function CaseCarousel({ slides }) { const [idx, setIdx] = React.useState(0); const [prevIdx, setPrevIdx] = React.useState(null); const [dir, setDir] = React.useState('left'); const [animating, setAnimating] = React.useState(false); const total = slides.length; function goTo(next, direction) { if (animating || next === idx) return; setDir(direction); setPrevIdx(idx); setAnimating(true); setIdx(next); setTimeout(() => { setPrevIdx(null); setAnimating(false); }, 520); } function goPrev() { goTo((idx - 1 + total) % total, 'right'); } function goNext() { goTo((idx + 1) % total, 'left'); } return (
{prevIdx !== null && (
{slides[prevIdx]}
)}
{slides[idx]}
{slides.map((_, i) => (
); } // Desktop: mostra pares (2 imagens lado a lado) // Mobile: mostra imagens individualmente (1 por vez) function CS2Carousel({ pairs }) { const allSlides = pairs.flat(); const [isMobile, setIsMobile] = React.useState(() => window.innerWidth <= 640); React.useEffect(() => { const check = () => setIsMobile(window.innerWidth <= 640); window.addEventListener('resize', check); return () => window.removeEventListener('resize', check); }, []); const [idx, setIdx] = React.useState(0); const [prevIdx, setPrevIdx] = React.useState(null); const [dir, setDir] = React.useState('left'); const [animating, setAnimating] = React.useState(false); const total = isMobile ? allSlides.length : pairs.length; React.useEffect(() => { setIdx(0); setPrevIdx(null); }, [isMobile]); function goTo(next, direction) { if (animating || next === idx) return; setDir(direction); setPrevIdx(idx); setAnimating(true); setIdx(next); setTimeout(() => { setPrevIdx(null); setAnimating(false); }, 520); } function goPrev() { goTo((idx - 1 + total) % total, 'right'); } function goNext() { goTo((idx + 1) % total, 'left'); } const currPair = isMobile ? [allSlides[idx]] : pairs[idx]; const prevPair = prevIdx !== null ? (isMobile ? [allSlides[prevIdx]] : pairs[prevIdx]) : null; const ratio = isMobile ? "9/16" : "16/9"; return (
{prevPair && (
{prevPair.map((src, i) => ( ))}
)}
{currPair.map((src, i) => ( ))}
{Array.from({ length: total }).map((_, i) => (
); } function CaseStudy({ slug, lang, onBack, onNext }) { const slugMap = { "marketing-materials": "cs", "regulatory-app": "cs2", "campaign-management": "cs3" }; const key = slugMap[slug] || "cs"; const I = window.I18N[key]; const isCs1 = key === "cs"; const isCs2 = key === "cs2"; const isCs3 = key === "cs3"; useEffectCS(() => { window.scrollTo({ top: 0, behavior: "instant" }); }, [slug]); return (
{/* Back */} {/* Eyebrow + Title */}
↳ {t(I.label, lang)}

{t(I.title, lang).replace(/\.$/, "")}.

 {/* Meta bar — Company · Role · Timeline · Tools */}
{t(I.metaCompanyLbl, lang)} {t(I.metaCompanyVal, lang)}
{t(I.metaRoleLbl, lang)} {t(I.metaRoleVal, lang)}
{t(I.metaTimeLbl, lang)} {t(I.metaTimeVal, lang)}
{t(I.metaYearLbl, lang)} {t(I.metaYearVal, lang)}
{/* Cover */} {isCs1 ? (
) : isCs2 ? ( ) : isCs3 ? ( ) : (
)} {/* § 01 — CONTEXT */} {!isCs3 && (
{t(I.contextLbl, lang)}

{t(I.contextH, lang)}

{t(I.contextP1, lang)}

{isCs2 ? ( ) : } )} {/* § 01+02 cs3 — Context & Problem side by side in 2 columns */} {isCs3 && (
{t(I.contextLbl, lang)}

{t(I.contextH, lang)}

{t(I.contextP1, lang)}

{t(I.problemLbl, lang)}

{t(I.problemH, lang)}

{t(I.problemP, lang)}

 )} {/* § 02 — THE PROBLEM (hidden for cs3 — shown alongside context above) */} {!isCs3 &&
{t(I.problemLbl, lang)}

{t(I.problemH, lang)}

{t(I.problemP, lang)}

{isCs2 ? (
{[CS2_BASE + "tiu-old-1.png", CS2_BASE + "tiu-old-2.png", CS2_BASE + "tiu-old-3.png"].map((src, i) => ( ))}
) : } } {/* § 03 — WHAT I DID */}
{t(I.whatididLbl, lang)}

{t(I.whatididH, lang)}

{I.process.map((p, i) => (
↳ {p.n}

{t(p.h, lang)}

{t(p.p, lang)}

))}
{isCs2 ? ( <>
↳ {t(I.resultLbl, lang)}
) : isCs3 ? ( <>
↳ {t(I.resultLbl, lang)}
) : ( <>
↳ {t(I.resultLbl, lang)}
, , , ] : [ , , ]} /> )} {/* § 04 — IMPACT */}
{t(I.impactLbl, lang)}

{t(I.impactH, lang)}

{I.r1n}
{t(I.r1l, lang)}
{I.r2n}
{t(I.r2l, lang)}
{I.r3n}
{t(I.r3l, lang)}
 {/* Next */}
{t(I.nextLbl, lang)} →
{t(I.nextTitle, lang).replace(/\.$/, "")}.
→
); } Object.assign(window, { CaseStudy });