/* Auto-generated from mockups/06-itx-case-tier3.html */ (function(){ const { useState, useEffect, useRef } = React; /* WhatsApp href per brief — real number for Tier 3 CTA */ const WA_TIER3 = 'https://wa.me/972534200984?text=' + encodeURIComponent("Hi BoldBrandz, I'm interested in the Branding & Product Design tier"); /* ── Icons ── */ const Icon = ({ size = 16, children, style }) => ( {children} ); const Check = (p) => ; const ArrowDown = (p) => ; const ArrowRight = (p) => ; const WA = ({ size = 18 }) => ( ); const Play = (p) => ; /* ── Hooks ── */ function useReveal(threshold = 0.15) { const ref = useRef(null); useEffect(() => { if (!ref.current) return; const el = ref.current; const r = el.getBoundingClientRect(); if (r.top < window.innerHeight * 0.92 && r.bottom > 0) { el.classList.add('in'); return; } const io = new IntersectionObserver(([e]) => { if (e.isIntersecting) { el.classList.add('in'); io.disconnect(); } }, { threshold }); io.observe(el); return () => io.disconnect(); }, [threshold]); return ref; } function useInViewBoolean(threshold = 0.25) { const ref = useRef(null); const [inView, setInView] = useState(false); useEffect(() => { if (!ref.current) return; const r = ref.current.getBoundingClientRect(); if (r.top < window.innerHeight * 0.9 && r.bottom > 0) { setInView(true); return; } const io = new IntersectionObserver(([e]) => { if (e.isIntersecting) { setInView(true); io.disconnect(); } }, { threshold }); io.observe(ref.current); return () => io.disconnect(); }, [threshold]); return [ref, inView]; } /* ── Metric reveal (pop + fade). DOM default = final number so static exports (PDF, screenshots) capture the real value. On `active`, pop from scale(0.9) → scale(1) with opacity 0 → 1 over 600ms. ── */ function useMetricPop({ active, delay = 0 } = {}) { const [popped, setPopped] = useState(false); useEffect(() => { if (!active) { setPopped(false); return; } const reduce = window.matchMedia?.('(prefers-reduced-motion: reduce)')?.matches; if (reduce) { setPopped(true); return; } const id = setTimeout(() => setPopped(true), delay); return () => clearTimeout(id); }, [active, delay]); return { display: 'inline-block', opacity: popped ? 1 : 0, transform: popped ? 'scale(1)' : 'scale(0.9)', transition: 'opacity 600ms cubic-bezier(0.34, 1.56, 0.64, 1), transform 600ms cubic-bezier(0.34, 1.56, 0.64, 1)', transformOrigin: 'left center', willChange: 'transform, opacity', }; } const fmt = (n) => n.toLocaleString('en-US'); /* ── Button (same API as other sections) ── */ function Button({ size = 'lg', glow = false, children, onClick, href }) { const [hover, setHover] = useState(false); const base = { display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 10, fontFamily: 'var(--font-display)', fontWeight: 600, borderRadius: 10, border: '1px solid transparent', cursor: 'pointer', letterSpacing: '-0.005em', whiteSpace: 'nowrap', textDecoration: 'none', transition: 'all 180ms var(--ease-out)', background: hover ? '#0035cc' : '#0047ff', color: '#fff', boxShadow: glow ? (hover ? '0 0 40px rgba(0,71,255,0.65)' : '0 0 24px rgba(0,71,255,0.45)') : 'none', }; const sizes = { sm: { height: 36, padding: '0 16px', fontSize: 13 }, lg: { height: 54, padding: '0 32px', fontSize: 15 }, }; const Tag = href ? 'a' : 'button'; const extra = href ? { href, target: '_blank', rel: 'noopener noreferrer', 'data-gtm-event': 'Lead_WhatsApp_Tier3CTA' } : { onClick }; return ( setHover(true)} onMouseLeave={() => setHover(false)} style={{ ...base, ...sizes[size] }}> {children} ); } /* ── Reusable tag pill (brand blue eyebrow style) ── */ function Eyebrow({ children, accentDot = '#0047ff' }) { return (
{children}
); } function CardTag({ children }) { return (
{children}
); } /* ── Meta bullet row ── */ function MetaRow({ items }) { return (
{items.map((it, i) => ( {i > 0 && } {it.k} · {it.v} ))}
); } /* ── Image frame (consistent for all three ITX images) ── */ function ImageFrame({ eyebrow, src, alt, caption, maxW = 680, aspect = '4 / 5' }) { const ref = useReveal(0.1); return (
{eyebrow && (
{eyebrow}
)}
{alt}
{caption && (
{caption}
)}
); } /* ──────────────────────────────────────────────────────────────────── LAYER 1 — THE CHALLENGE ──────────────────────────────────────────────────────────────────── */ function Challenge() { const ref = useReveal(); const t = window.useCopy(); return (
{t.itx.challenge.badge}
{/* Pullquote */}
{t.itx.challenge.quote}
{/* Sub-head */}

{t.itx.challenge.h}

{/* Body */}

{t.itx.challenge.body}

{/* Framing line */}

{t.itx.challenge.mission}

); } /* ──────────────────────────────────────────────────────────────────── LAYER 2 — 4-PILLAR ARCHITECTURE ──────────────────────────────────────────────────────────────────── */ function PillarCard({ n, title, body }) { return (
{/* Side-gutter ghost numeral */}
{n}

{title}

{body}

); } function Architecture() { const ref = useReveal(); const t = window.useCopy(); return (
{t.itx.arch.badge}

{t.itx.arch.h}

{t.itx.arch.layers.map((layer, i) => ( ))}
); } /* ──────────────────────────────────────────────────────────────────── LAYER 3 — THE RESULT (three metric cards with count-up) ──────────────────────────────────────────────────────────────────── */ function MetricCard({ label, pillText, num, unit, format = 'comma', accent = '#0047ff', delay, active }) { const popStyle = useMetricPop({ active, delay }); const display = format === 'comma' ? fmt(num) : num; return (
{/* Accent top stripe */}
{/* Pill */}
{pillText}
{/* Number */}
{display} {unit && ( {unit} )}
{/* Label */}
{label}
); } function Results() { const [ref, inView] = useInViewBoolean(); const t = window.useCopy(); const nums = [22600, 21000, 30]; const formats = ['comma', 'comma', 'plain']; return (
{t.itx.proof.badge}

{t.itx.proof.h}

{t.itx.proof.metrics.map((m, i) => ( ))}
); } /* ──────────────────────────────────────────────────────────────────── LAYER 4 — TRANSITION ──────────────────────────────────────────────────────────────────── */ function Transition() { const ref = useReveal(); const t = window.useCopy(); return (
{/* thin divider above */}

{t.itx.tier3.transition_p1}

{t.itx.tier3.transition_p2}

{ e.preventDefault(); const el = document.getElementById('tier-3'); if (el) el.scrollIntoView({ behavior: 'smooth', block: 'start' }); }}> {t.itx.tier3.link}
); } /* ──────────────────────────────────────────────────────────────────── TIER 3 SERVICE CARD ──────────────────────────────────────────────────────────────────── */ function Tier3Card() { const ref = useReveal(0.1); const t = window.useCopy(); const { lang } = window.useLang(); return (
{/* Accent top stripe */}
{/* Tag + Arabic */}
{t.t3.pill}
{lang === 'ar' && (
{t.t3.ar_sub}
)}
{/* Tagline */}

{t.t3.title}

{/* Section divider */}
{t.tiers.whats_included}
{/* Two-column inclusions */}
{t.t3.features.map((line, i) => (
{line}
))}
{/* Price + CTA */}
{t.tiers.investment}
{t.tiers.from}{' '} 20,000 ₪ {' '}{t.tiers.setup}
{t.tiers.monthly_retainer}
); } /* ──────────────────────────────────────────────────────────────────── PAGE ──────────────────────────────────────────────────────────────────── */ function Page() { const t = window.useCopy(); return ( <> {/* ── SECTION: ITX CASE STUDY ───────────────────────────────── */}
{/* Horizon streak */}
{/* Header */}
{t.itx.badge}

{t.itx.h1_pre}{' '} {t.itx.h1_metric}{t.itx.h1_post}

{/* Client meta row */}
{t.itx.meta}
{/* LAYER 1 — Challenge */} {/* Brand shift image */} {/* LAYER 2 — Architecture */} {/* Multi-device image */} {/* LAYER 3 — Results */} {/* Trust-building image (reinforces metric 1 + 2) */} {/* LAYER 4 — Transition */}
{/* ── SECTION: TIER 3 ──────────────────────────────────────── */}
{t.t3.badge}

{t.t3.h}

); } /* ── Mockup chrome wrapper ── */ window.ItxTier3Section = Page; })();