{ setOpen(null); setMobile(false); }} style={{
position: 'fixed', inset: 0, zIndex: 90, background: 'rgba(248,250,250,.35)',
backdropFilter: 'blur(9px)', WebkitBackdropFilter: 'blur(9px)',
opacity: (open !== null || mobile) ? 1 : 0, visibility: (open !== null || mobile) ? 'visible' : 'hidden',
transition: 'opacity .35s cubic-bezier(.4,0,.2,1), visibility .35s cubic-bezier(.4,0,.2,1)',
}} />
{/* Full-width mega panel, drops from the top (Concept 3) */}
clearTimeout(closeT.current)} onMouseLeave={scheduleClose} style={{
position: 'fixed', top: 0, left: 0, right: 0, zIndex: 95, background: 'var(--warm-50)',
boxShadow: '0 24px 40px rgba(15,28,46,.10)', borderBottom: '1px solid var(--warm-200)',
padding: '92px 0 44px',
opacity: open !== null ? 1 : 0, visibility: open !== null ? 'visible' : 'hidden',
transform: open !== null ? 'translateY(0)' : 'translateY(-16px)',
transition: 'opacity .35s cubic-bezier(.4,0,.2,1), transform .4s cubic-bezier(.4,0,.2,1), visibility .35s cubic-bezier(.4,0,.2,1)',
}}>
{NAV.map((n, i) => open === i && (
))}
);
}
Object.assign(window, { Nav });
/* ===== ia-sections1.jsx ===== */
// ia-sections1.jsx — Hero (centered), Two-door, Trust marquee, Offers, How-it-works (horizontal pin).
function Arrow({ s = 16 }) {
return
;
}
// Step icons (simple line glyphs) inside a brand hexagon tile.
const STEP_ICON = {
create:
,
automate:
,
track:
,
paid:
,
};
// Step header: bare line-glyph icon (no hexagon tile) + large grey step number.
function StepHead({ tone, icon, n }) {
const color = tone === 'adv' ? 'var(--midnight-light)' : 'var(--ember)';
return (
{STEP_ICON[icon]}
{n}
);
}
/* ---------------- Two-door CTA (reused in Hero + Final CTA) ---------------- */
function TwoDoor({ emphasis = 'equal', onDark = false, size = 'lg', center = false }) {
const labelColor = onDark ? 'var(--warm-300)' : 'var(--warm-400)';
const pubFilled = emphasis !== 'adv';
const advFilled = emphasis !== 'pub';
const big = size === 'lg';
const Door = ({ kicker, cls, href, children }) => (
);
return (
List Your Brand
Start Earning
);
}
/* ---------------- Hero — centered, no unvalidated KPI cards ---------------- */
/* Hero headline — Sohub-style big-text motion. Each word sits in an overflow-hidden
mask: on ENTER it rises up into the clip (staggered); on LEAVE (scrolling the hero
away) the whole word slides up + fades, reverse-staggered and scroll-linked.
Enter animates the inner .hl-word; leave animates the outer .hl-mask — different
elements, so the two animations never clobber each other. */
// Two explicit lines (matches the Figma hero copy). Each line wraps as a unit so the
// break lands after "Earnings"; words are still individually masked for the reveal.
const HERO_LINES = [['Scale', 'Your', 'Online', 'Earnings'], ['Through', 'Affiliate', 'Marketing']];
function HeroHeadline({ dark }) {
const ref = React.useRef(null);
React.useLayoutEffect(() => {
const gsap = window.gsap;
if (!ref.current || !gsap) return;
const words = ref.current.querySelectorAll('.hl-word');
const masks = ref.current.querySelectorAll('.hl-mask');
if (prefersReduced()) { gsap.set(words, { yPercent: 0, autoAlpha: 1 }); return; }
const ST = window.ScrollTrigger;
const heroEl = ref.current.closest('#hero'); // real element — a scoped '#hero' selector wouldn't resolve inside the h1
const ctx = gsap.context(() => {
// ENTER — words rise into their masks, staggered
gsap.set(words, { yPercent: 120, autoAlpha: 0 });
gsap.to(words, { yPercent: 0, autoAlpha: 1, duration: 0.95, ease: 'power4.out', stagger: 0.085, delay: 0.4 });
// LEAVE — as the hero scrolls away, words slide up + fade (reverse stagger).
// Desktop only: on the mobile split layout the headline no longer sits at the
// hero's top, so this scroll-linked mask animation mis-measures and can leave
// the words hidden. The enter animation above already reveals them everywhere.
if (ST && heroEl && window.matchMedia('(min-width: 861px)').matches) {
gsap.registerPlugin(ST);
gsap.fromTo(masks, { yPercent: 0, autoAlpha: 1 }, {
yPercent: -120, autoAlpha: 0, ease: 'none', stagger: { each: 0.03, from: 'end' }, immediateRender: false,
scrollTrigger: { trigger: heroEl, start: 'top top', end: 'bottom 42%', scrub: 0.5 },
});
}
}, ref);
return () => ctx.revert();
}, []);
return (
{HERO_LINES.map((line, li) => (
{line.map((w, i) => {w}
))}
);
}
/* Concept 5 hero — "One affiliate marketing platform". Exact Figma copy + assets:
dual Publisher/Advertiser value-prop flanking a cutout figure, with floating
payout cards + a total-sales card. Static layout (Phase 1); the spiral/float
entrance motion is layered in a later phase. */
const HERO_PAYOUTS = [
{ brand: 'GrabTransport (MY)', amt: '48.00', dot: '#14cf55' },
{ brand: 'Shopee', amt: '16.00', dot: '#f05826' },
{ brand: 'Nike', amt: '22.00', dot: '#111110' },
{ brand: 'Sephora', amt: '60.00', dot: '#d1373b' },
{ brand: 'Agoda', amt: '27.40', dot: '#5b4de0' },
{ brand: 'Lazada', amt: '18.90', dot: '#0f146e' },
{ brand: 'Watsons (MY)', amt: '31.20', dot: '#00a3a1' },
{ brand: 'AirAsia', amt: '54.60', dot: '#e6002d' },
];
// Live "Total Sales" counter — every 4 or 6s it climbs by a random 2-, 3- or 4-digit
// amount and rolls up to the new figure. Own component so its ticks re-render only the
// number, never the hero or the payout stack.
function HeroSales() {
const START = 15612881;
const [sales, setSales] = React.useState(START);
React.useEffect(() => {
const gsap = window.gsap;
const reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
let cur = START, timer, tween;
const bump = () => {
const digits = 2 + Math.floor(Math.random() * 3); // 2, 3 or 4 digits
const min = Math.pow(10, digits - 1), max = Math.pow(10, digits) - 1;
const inc = min + Math.floor(Math.random() * (max - min + 1));
const from = cur, target = cur + inc;
cur = target;
if (gsap && !reduce) {
const o = { v: from };
tween = gsap.to(o, { v: target, duration: 0.9, ease: 'power1.out', onUpdate: () => setSales(Math.round(o.v)) });
} else {
setSales(target);
}
timer = setTimeout(bump, Math.random() < 0.5 ? 4000 : 6000); // next tick in 4 or 6s
};
timer = setTimeout(bump, Math.random() < 0.5 ? 4000 : 6000);
return () => { clearTimeout(timer); if (tween) tween.kill(); };
}, []);
return
{'$' + sales.toLocaleString('en-US')} ;
}
// Interactive honeycomb field behind the hero figures. Loads the EXACT Figma honeycomb
// (media/figma/hero-hexgrid.svg, node 1694:22220), splits its single "Union" path into
// individual hexagons, and each hex is PUSHED radially away from the cursor — the hexes
// physically move out and leave a gap that follows the mouse (Ramp-style). Each hex is also
// scaled to 0.9 (10% smaller). Only hexes near the cursor get transform writes per frame;
// reduced-motion leaves the field static.
function HeroHexField() {
const svgRef = React.useRef(null);
const [paths, setPaths] = React.useState([]);
const W = 690.282, H = 664.1;
React.useEffect(() => {
let alive = true;
fetch('media/figma/hero-hexgrid.svg').then((r) => r.text()).then((txt) => {
if (!alive) return;
const m = txt.match(/id="Union"\s+d="([^"]+)"/);
if (!m) return;
const subs = m[1].split(/[Zz]/).map((s) => s.trim()).filter(Boolean).map((s) => s + 'Z');
setPaths(subs);
}).catch(() => {});
return () => { alive = false; };
}, []);
React.useLayoutEffect(() => {
const svg = svgRef.current;
if (!svg || !paths.length) return;
const hexes = Array.from(svg.querySelectorAll('.hx')).map((el) => {
const b = el.getBBox();
const cx = b.x + b.width / 2, cy = b.y + b.height / 2;
const base = `translate(${cx.toFixed(2)} ${cy.toFixed(2)}) scale(0.81) translate(${(-cx).toFixed(2)} ${(-cy).toFixed(2)})`;
el.setAttribute('transform', base);
return { el, cx, cy, base, dx: 0, dy: 0 };
});
if (prefersReduced()) return;
const sec = svg.closest('.hero2-sec') || svg.parentElement;
// Radial push, softened toward the edge (MAXPUSH·f², f = 1 − dist/R). Gentle strength.
const R = 140, MAXPUSH = 24; // influence radius + max displacement (viewBox units)
let mx = -9999, my = -9999, active = false, raf = 0;
const frame = () => {
let moving = false;
for (const h of hexes) {
let tx = 0, ty = 0;
if (active) {
const ddx = h.cx - mx, ddy = h.cy - my, dist = Math.hypot(ddx, ddy);
if (dist < R && dist > 0.01) { const f = 1 - dist / R, push = MAXPUSH * f * f, inv = push / dist; tx = ddx * inv; ty = ddy * inv; }
}
h.dx += (tx - h.dx) * 0.2; h.dy += (ty - h.dy) * 0.2;
if (Math.abs(h.dx) > 0.06 || Math.abs(h.dy) > 0.06) {
h.el.setAttribute('transform', `translate(${h.dx.toFixed(2)} ${h.dy.toFixed(2)}) ${h.base}`);
moving = true;
} else if (h.dx !== 0 || h.dy !== 0) { h.dx = 0; h.dy = 0; h.el.setAttribute('transform', h.base); }
}
if (active || moving) raf = requestAnimationFrame(frame); else raf = 0;
};
const onMove = (e) => {
const r = svg.getBoundingClientRect();
mx = (e.clientX - r.left) * (W / r.width);
my = (e.clientY - r.top) * (H / r.height);
active = true;
if (!raf) raf = requestAnimationFrame(frame);
};
const onLeave = () => { active = false; if (!raf) raf = requestAnimationFrame(frame); };
sec.addEventListener('mousemove', onMove);
sec.addEventListener('mouseleave', onLeave);
return () => { sec.removeEventListener('mousemove', onMove); sec.removeEventListener('mouseleave', onLeave); if (raf) cancelAnimationFrame(raf); };
}, [paths]);
return (
{paths.map((d, i) =>
);
}
function Hero({ dark = false, hex = 3, emphasis = 'equal' }) {
const payIdx = React.useRef(0);
const [pay, setPay] = React.useState(HERO_PAYOUTS[0]);
const [payVis, setPayVis] = React.useState(true);
// Single payout notification sitting in front of the creator. On a randomized cadence
// (3, 4, 5 or 6s) it fades out, swaps to a different random brand/amount, and fades back
// in the SAME spot — subtle, minimal. Driven by CSS opacity/transform transitions (see
// .pcard) + setTimeout, so it stays reliable regardless of rAF; reduced-motion just swaps
// the text with no fade.
React.useEffect(() => {
const reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
const nextIdx = () => { let n = payIdx.current; while (n === payIdx.current) n = Math.floor(Math.random() * HERO_PAYOUTS.length); payIdx.current = n; return n; };
const nextDelay = () => (3 + Math.floor(Math.random() * 4)) * 1000; // 3, 4, 5 or 6s
let tCycle, tSwap;
const cycle = () => {
const n = nextIdx();
if (reduce) { setPay(HERO_PAYOUTS[n]); tCycle = setTimeout(cycle, nextDelay()); return; }
setPayVis(false); // fade out
tSwap = setTimeout(() => { setPay(HERO_PAYOUTS[n]); setPayVis(true); }, 360); // swap + fade in
tCycle = setTimeout(cycle, nextDelay());
};
tCycle = setTimeout(cycle, nextDelay());
return () => { clearTimeout(tCycle); clearTimeout(tSwap); };
}, []);
return (
{/* soft ember (bottom-left) + blue (bottom-right) colour glows, and the interactive honeycomb */}
The affiliate platform that keeps everyone moving, faster.
Brands grow with the right publishers, and publishers earn from the brands they love. Daily validation and faster payouts mean less waiting, for everyone.
{/* single payout notification, top-left of the figure — swaps brand/amount on a random cadence */}
Payout Completed
{pay.brand}
+ ${pay.amt}
{/* total-sales card */}
Sales Driven
last 30 days
{/* bottom fade — layered ABOVE the right-side figure but BEHIND the left copy/CTAs */}
);
}
/* ---------------- Trust strip — two air-style rows, opposite directions ---------------- */
// Advertiser logos (media/advertiser logos for showcase/). [name, file]
const LOGO_DIR = 'media/advertiser logos for showcase/';
const LOGOS = [
// row 1
['Shopee', 'shopee@3x.webp'], ['Lazada', 'lazada@3x.webp'], ['Zalora', 'zalora@3x.webp'], ['Shein', 'shein@3x.webp'],
['Nike', 'nike@3x.webp'], ['Apple', 'apple@3x.webp'], ['Klook', 'klook@3x.webp'], ['Maybank', 'maybank@3x.webp'],
// row 2
['Watsons', 'watsons@3x.webp'], ['AliExpress', 'aliexpress@3x.webp'], ['TikTok Shop', 'tiktok-shop@3x.webp'], ['Razer', 'razer@3x.webp'],
['Traveloka', 'traveloka@3x.webp'], ['Trip.com', 'tripcom@3x.webp'], ['UOB', 'uob@3x.webp'], ['Lego', 'lego@3x.webp'],
// row 3
['AirAsia', 'airasia@3x.webp'], ['Malaysia Airlines', 'malaysia-airlines@3x.webp'], ['Cathay Pacific', 'cathay-pacific@3x.webp'], ['Huawei', 'huawei@3x.webp'],
['Udemy', 'udemy@3x.webp'], ['BaskBear', 'baskbear@3x.webp'], ['Pet Wonderland', 'pet wonderland@3x.webp'], ['CIMB', 'cimb@3x.webp'],
];
const LOGO_ROWS = 1;
function TrustStrip() {
const secRef = React.useRef(null);
const tracksRef = React.useRef([]);
const [reps, setReps] = React.useState(1);
// Repeat each row until one loop spans the visible width, so no blank gap appears mid-scroll.
React.useEffect(() => {
const track = tracksRef.current.filter(Boolean)[0];
if (!track) return;
const marq = track.parentElement;
const imgs = Array.prototype.slice.call(track.querySelectorAll('img'));
const fit = () => {
if (imgs.some((im) => !im.complete)) return; // wait until the logos are measurable
const baseW = track.scrollWidth / (2 * reps);
if (baseW < 40) return;
const need = Math.min(6, Math.max(1, Math.ceil((marq.clientWidth + 8) / baseW)));
if (need !== reps) setReps(need);
};
fit();
imgs.forEach((im) => im.addEventListener('load', fit));
window.addEventListener('resize', fit);
const ro = window.ResizeObserver ? new ResizeObserver(fit) : null;
if (ro) { ro.observe(track); ro.observe(marq); }
return () => { imgs.forEach((im) => im.removeEventListener('load', fit)); window.removeEventListener('resize', fit); if (ro) ro.disconnect(); };
}, [reps]);
React.useEffect(() => {
const tracks = tracksRef.current.filter(Boolean);
if (tracks.length < LOGO_ROWS) return;
const reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
// Seamless because each row's content is duplicated: wrapping the offset into
// (-half, 0] repeats invisibly. Rows alternate direction; auto-advance is slow.
const norm = (o, half) => { if (!half) return 0; o %= half; if (o > 0) o -= half; return o; };
const SPEED = 26; // px/sec — subtle, not busy
const states = tracks.map((el, i) => ({
el, offset: 0, half: el.scrollWidth / 2 || 1, dir: i % 2 === 0 ? -1 : 1, dragging: false, startX: 0, startOffset: 0,
}));
const draw = (s) => { s.el.style.transform = `translate3d(${s.offset.toFixed(1)}px,0,0)`; };
// ---- draggable: grab any row to scroll it (mouse + touch via touch-action:pan-y) ----
const cleanups = states.map((s) => {
const row = s.el.parentElement; // the .marquee container
const onDown = (e) => { s.dragging = true; s.startX = e.clientX; s.startOffset = s.offset; row.classList.add('grabbing'); try { row.setPointerCapture(e.pointerId); } catch (_) {} };
const onMove = (e) => { if (!s.dragging) return; s.offset = norm(s.startOffset + (e.clientX - s.startX), s.half); draw(s); };
const onUp = (e) => { if (!s.dragging) return; s.dragging = false; row.classList.remove('grabbing'); try { row.releasePointerCapture(e.pointerId); } catch (_) {} };
row.addEventListener('pointerdown', onDown);
row.addEventListener('pointermove', onMove);
row.addEventListener('pointerup', onUp);
row.addEventListener('pointercancel', onUp);
row.addEventListener('lostpointercapture', onUp);
return () => { row.removeEventListener('pointerdown', onDown); row.removeEventListener('pointermove', onMove); row.removeEventListener('pointerup', onUp); row.removeEventListener('pointercancel', onUp); row.removeEventListener('lostpointercapture', onUp); };
});
// ---- auto-advance (skipped under reduced-motion: static, drag-only) ----
let raf = 0, last = null;
const onResize = () => states.forEach((s) => { s.half = s.el.scrollWidth / 2 || 1; });
if (reduce) {
states.forEach(draw);
} else {
const tick = (now) => {
if (last == null) last = now;
const dt = Math.min(0.05, (now - last) / 1000); last = now;
states.forEach((s) => { if (!s.dragging) s.offset = norm(s.offset + s.dir * SPEED * dt, s.half); draw(s); });
raf = requestAnimationFrame(tick);
};
raf = requestAnimationFrame(tick);
window.addEventListener('resize', onResize);
}
return () => { if (raf) cancelAnimationFrame(raf); window.removeEventListener('resize', onResize); cleanups.forEach((fn) => fn()); };
}, [reps]);
const per = Math.ceil(LOGOS.length / LOGO_ROWS);
const rows = Array.from({ length: LOGO_ROWS }, (_, i) => LOGOS.slice(i * per, i * per + per));
return (
Trusted by brands you already know
{rows.map((row, ri) => {
const oneLoop = [];
for (let k = 0; k < reps; k++) oneLoop.push(...row);
const dup = [...oneLoop, ...oneLoop];
return (
{ tracksRef.current[ri] = el; }} className="marquee-track">
{dup.map(([name, file], i) =>
)}
);
})}
);
}
/* ---------------- Section 3 — "keeps everyone moving, faster." ----------------
Radial ring of live stat cards + avatars surrounding the headline. Static rest
state (Phase 1); card positions map to the Figma composition (1160×1080 stage,
1em≈16px via container units). The spiral entrance motion is layered later. */
function KeepsMoving() {
const stageRef = React.useRef(null);
React.useEffect(() => {
const gsap = window.gsap, ST = window.ScrollTrigger;
const stage = stageRef.current;
if (!stage || !gsap || !ST) return; // no GSAP → static ring
if (window.matchMedia('(max-width:900px)').matches || window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;
gsap.registerPlugin(ST);
const els = [...stage.querySelectorAll('.km-card, .km-ava')]; // the 9 floating cards + avatars
const title = stage.querySelector('.km-title'), sub = stage.querySelector('.km-sub');
const CX = 50, CY = 52; // ring centre (matches .km-ring / .km-copy)
const polar = els.map((el) => { // each card's final spot, in polar form from centre
const x = parseFloat(el.style.left), y = parseFloat(el.style.top);
return { r: Math.hypot(x - CX, y - CY), a: Math.atan2(y - CY, x - CX) };
});
const SPIN = Math.PI * 1.15; // angle each card unwinds through → spiral path
const ctx = gsap.context(() => {
// pre-entrance: everything piled tight at the centre (tiny, faint); headline hidden.
// NB: no self-rotation — these are sticker/coin cards, so their drop-shadow must always
// fall straight down; rotating the box would swing the shadow off to the side mid-flight.
els.forEach((el) => {
el.style.left = CX + '%'; el.style.top = CY + '%';
gsap.set(el, { xPercent: -50, yPercent: -50, transformOrigin: '50% 50%', scale: 0.3, autoAlpha: 0 });
});
gsap.set([title, sub], { autoAlpha: 0, y: 18 });
const tl = gsap.timeline({
defaults: { ease: 'power3.out' },
scrollTrigger: { trigger: stage, start: 'top 60%', once: true }, // fire once when the stage is 60% into view
});
els.forEach((el, i) => {
const P = polar[i], s = { p: 0 };
tl.to(s, {
p: 1, duration: 1.25,
onUpdate: () => { // drive position along the spiral each frame
const p = s.p, r = P.r * p, ang = P.a + SPIN * (1 - p);
el.style.left = (CX + r * Math.cos(ang)) + '%';
el.style.top = (CY + r * Math.sin(ang)) + '%';
gsap.set(el, { scale: 0.3 + 0.7 * p, autoAlpha: Math.min(1, p * 1.8) });
},
}, i * 0.07); // staggered launch out of the pile
});
tl.to([title, sub], { autoAlpha: 1, y: 0, duration: 0.7, stagger: 0.14 }, 0.75); // headline resolves as cards clear
}, stage);
return () => ctx.revert();
}, []);
return (
{/* concentric rings (Figma "background circle" — 4 layered gradient ellipses) */}
{/* floating cards + avatars (decorative) */}
Verified
+$24
Total clicks 21,086
New Campaign Live
Conversion Rate +38.1%
{/* headline + subcopy (center) */}
The affiliate platform that
We confirm earnings every day, so creators get paid faster and brands see results sooner. Less waiting, more growing, all in one place.
);
}
/* ---------------- Section 4 — "See what's live right now." ----------------
Live Brand Directory: category filter rail + grid of photo-background brand
cards (scrim + brand mark + commission chip + publisher count). Static (Phase 1). */
const LIVE_CATS = ['All', 'Marketplace', 'Fashion', 'Travel', 'Digital Services', 'Electronics', 'Health & Beauty'];
// comm rates are PLACEHOLDERS — wire to the live directory data at dev time (varied, not a flat rate).
const LIVE_BRANDS = [
{ name: 'Shopee', comm: '4.0', pub: '6,302' },
{ name: 'Uniqlo', comm: '5.0', pub: '2,214', boxed: true },
{ name: 'TikTok', comm: '3.5', pub: '8,190' },
{ name: 'Huawei', comm: '6.0', pub: '1,224' },
{ name: 'Watsons', comm: '4.5', pub: '3,901' },
{ name: 'Puma', comm: '2.1', pub: '1,466' },
];
function LiveDirectory() {
const slug = (n) => n.toLowerCase();
const [cat, setCat] = React.useState(0); // active category (instant swap, no motion)
// Mockup: each category maps to a randomized-but-stable subset of the brand
// list, seeded by the category index so a given category always shows the
// same set (and the numbers shift so the grid visibly re-filters on click).
const displayed = React.useMemo(() => {
if (cat === 0) return LIVE_BRANDS;
let seed = (cat + 1) * 747796405;
const rnd = () => { seed = (seed * 1103515245 + 12345) & 0x7fffffff; return seed / 0x7fffffff; };
const arr = LIVE_BRANDS.slice();
for (let i = arr.length - 1; i > 0; i--) { const j = Math.floor(rnd() * (i + 1)); const t = arr[i]; arr[i] = arr[j]; arr[j] = t; }
const count = 3 + Math.floor(rnd() * 4); // 3..6
return arr.slice(0, count).map((b) => ({
...b,
comm: (2 + rnd() * 6).toFixed(1),
pub: (500 + Math.floor(rnd() * 8500)).toLocaleString(),
}));
}, [cat]);
return (
See what's live right now.
Real brands, ready to promote. See what each one pays and how many publishers are already on board.
{LIVE_CATS.map((c, i) => (
setCat(i)}>{c}
))}
Explore all offers
);
}
/* ---------------- Offers (Advertisers & Campaigns) ---------------- */
// Eight categories — matches the live involve.asia advertiser directory.
// Up to 12 brands each (3 per row × 4 rows). LINE-style: a left rail keeps one
// category in focus at a time while signalling the full breadth on offer.
const OFFER_CATS = ['Marketplace','Fashion','Travel','Finance','Health & Beauty','Electronics','Services','Internal'];
const OFFERS_BY_CAT = {
'Marketplace': [
{ brand: 'Shopee', comm: 'Up to 8% commission' }, { brand: 'Lazada', comm: 'Up to 9% commission' },
{ brand: 'Amazon', comm: 'Up to 7% commission' }, { brand: 'AliExpress', comm: 'Up to 6.5% commission' },
{ brand: 'Taobao', comm: 'Up to 5% commission' }, { brand: 'Tokopedia', comm: 'Up to 4.5% commission' },
{ brand: 'Qoo10', comm: 'Up to 6% commission' }, { brand: 'Blibli', comm: 'Up to 4% commission' },
{ brand: 'Temu', comm: 'Up to 10% commission' }, { brand: 'Carousell', comm: 'Up to 5% commission' },
{ brand: 'IKEA', comm: 'Up to 7% commission' }, { brand: 'Decathlon', comm: 'Up to 6% commission' },
],
'Fashion': [
{ brand: 'Zalora', comm: 'Up to 12% commission' }, { brand: 'Shein', comm: 'Up to 14% commission' },
{ brand: 'Uniqlo', comm: 'Up to 8% commission' }, { brand: 'H&M', comm: 'Up to 9% commission' },
{ brand: 'Nike', comm: 'Up to 11% commission' }, { brand: 'Adidas', comm: 'Up to 10% commission' },
{ brand: 'Charles & Keith', comm: 'Up to 13% commission' }, { brand: 'Pomelo', comm: 'Up to 12% commission' },
{ brand: 'Love Bonito', comm: 'Up to 10% commission' }, { brand: 'Cotton On', comm: 'Up to 9% commission' },
{ brand: 'Pedro', comm: 'Up to 11% commission' }, { brand: 'ASOS', comm: 'Up to 8% commission' },
],
'Travel': [
{ brand: 'Klook', comm: 'Up to 5% commission' }, { brand: 'Agoda', comm: 'Up to 6% commission' },
{ brand: 'Trip.com', comm: 'Up to 6% commission' }, { brand: 'Traveloka', comm: 'Up to 5.5% commission' },
{ brand: 'Tiket.com', comm: 'Up to 4.5% commission' }, { brand: 'AirAsia', comm: 'Up to 3% commission' },
{ brand: 'Expedia', comm: 'Up to 6% commission' }, { brand: 'Booking.com', comm: 'Up to 5% commission' },
{ brand: 'Cathay Pacific', comm: 'Up to 2.5% commission' }, { brand: 'KKday', comm: 'Up to 7% commission' },
{ brand: 'Pelago', comm: 'Up to 8% commission' }, { brand: 'Trivago', comm: 'Up to 4% commission' },
],
'Finance': [
{ brand: 'Maybank', comm: 'Up to RM120 / lead' }, { brand: 'CIMB', comm: 'Up to RM100 / lead' },
{ brand: 'UOB', comm: 'Up to RM150 / lead' }, { brand: 'Trust Bank', comm: 'Up to SGD30 / signup' },
{ brand: "Touch 'n Go", comm: 'Up to RM15 / signup' }, { brand: 'Wise', comm: 'Up to USD40 / referral' },
{ brand: 'StashAway', comm: 'Up to USD50 / funded' }, { brand: 'Luno', comm: 'Up to USD25 / signup' },
{ brand: 'Funding Societies', comm: 'Up to USD60 / lead' }, { brand: 'Aspire', comm: 'Up to USD80 / account' },
{ brand: 'Tonik', comm: 'Up to USD20 / signup' }, { brand: 'Revolut', comm: 'Up to USD45 / referral' },
],
'Health & Beauty': [
{ brand: 'Sephora', comm: 'Up to 10% commission' }, { brand: 'Watsons', comm: 'Up to 11% commission' },
{ brand: 'Guardian', comm: 'Up to 9% commission' }, { brand: 'Sociolla', comm: 'Up to 12% commission' },
{ brand: 'Innisfree', comm: 'Up to 13% commission' }, { brand: 'The Body Shop', comm: 'Up to 12% commission' },
{ brand: 'iHerb', comm: 'Up to 10% commission' }, { brand: 'Althea', comm: 'Up to 14% commission' },
{ brand: 'Hada Labo', comm: 'Up to 11% commission' }, { brand: 'Shiseido', comm: 'Up to 9% commission' },
{ brand: "L'Oréal", comm: 'Up to 10% commission' }, { brand: 'SaSa', comm: 'Up to 12% commission' },
],
'Electronics': [
{ brand: 'Samsung', comm: 'Up to 5% commission' }, { brand: 'Xiaomi', comm: 'Up to 6% commission' },
{ brand: 'ASUS', comm: 'Up to 4% commission' }, { brand: 'Lenovo', comm: 'Up to 4.5% commission' },
{ brand: 'Dell', comm: 'Up to 3.5% commission' }, { brand: 'HP', comm: 'Up to 4% commission' },
{ brand: 'Logitech', comm: 'Up to 7% commission' }, { brand: 'Anker', comm: 'Up to 8% commission' },
{ brand: 'ExpressVPN', comm: 'Up to USD36 / signup' }, { brand: 'Kaspersky', comm: 'Up to 14% commission' },
{ brand: 'Razer', comm: 'Up to 6% commission' }, { brand: 'JBL', comm: 'Up to 7% commission' },
],
'Services': [
{ brand: 'GrabFood', comm: 'Up to RM12 / order' }, { brand: 'foodpanda', comm: 'Up to RM10 / order' },
{ brand: 'Netflix', comm: 'Up to USD8 / signup' }, { brand: 'Spotify', comm: 'Up to USD6 / signup' },
{ brand: 'Coursera', comm: 'Up to 20% commission' }, { brand: 'Udemy', comm: 'Up to 7% commission' },
{ brand: 'Canva', comm: 'Up to USD18 / Pro signup' }, { brand: 'Adobe', comm: 'Up to 8% commission' },
{ brand: 'Shopify', comm: 'Up to USD58 / referral' }, { brand: 'NordVPN', comm: 'Up to 40% commission' },
{ brand: 'Lingoda', comm: 'Up to EUR38 / signup' }, { brand: 'Photobook', comm: 'Up to 15% commission' },
],
'Internal': [
{ brand: 'Involve Rewards', comm: 'Bonus payouts' }, { brand: 'Refer & Earn', comm: 'Up to USD25 / referral' },
{ brand: 'Creator Academy', comm: 'Featured program' }, { brand: 'Brand Spotlight', comm: 'Boosted rates' },
{ brand: 'Seasonal Campaign', comm: 'Limited-time bonus' }, { brand: 'New Advertiser Drop', comm: 'Early-access rates' },
{ brand: 'Express Withdrawal', comm: 'Partner perk' }, { brand: 'Mobile App', comm: 'On-the-go tracking' },
{ brand: 'Loyalty Bonus', comm: 'Tiered rewards' }, { brand: 'Partner Perks', comm: 'Member offers' },
],
};
// Real brand logos we have on hand (media/advertiser logos for showcase/). Cards with
// a match show the logo; the rest fall back to a clean monogram tile. Brief Change 6.
const BRAND_LOGOS = {
'Shopee': 'shopee@3x.webp', 'Lazada': 'lazada@3x.webp', 'AliExpress': 'aliexpress@3x.webp',
'Zalora': 'zalora@3x.webp', 'Shein': 'shein@3x.webp', 'Nike': 'nike@3x.webp', 'Apple': 'apple@3x.webp',
'Klook': 'klook@3x.webp', 'Trip.com': 'tripcom@3x.webp', 'Traveloka': 'traveloka@3x.webp',
'AirAsia': 'airasia@3x.webp', 'Cathay Pacific': 'cathay-pacific@3x.webp', 'Malaysia Airlines': 'malaysia-airlines@3x.webp',
'Maybank': 'maybank@3x.webp', 'CIMB': 'cimb@3x.webp', 'UOB': 'uob@3x.webp', 'Watsons': 'watsons@3x.webp',
'Razer': 'razer@3x.webp', 'Huawei': 'huawei@3x.webp', 'Udemy': 'udemy@3x.webp', 'TikTok Shop': 'tiktok-shop@3x.webp', 'Lego': 'lego@3x.webp',
};
function OffersSection() {
const [cat, setCat] = React.useState('Marketplace');
// Larger cards show fewer brands at once (brief Change 6): show a curated highlight
// of 6, leading with brands we have real logos for. "View all" carries the full scale.
const list = OFFERS_BY_CAT[cat] || [];
const shown = [...list].sort((a, b) => (BRAND_LOGOS[b.brand] ? 1 : 0) - (BRAND_LOGOS[a.brand] ? 1 : 0)).slice(0, 9);
// "Up to 8% commission" -> { up:'Up to', num:'8%', rem:'commission' } so the number reads as the Ember co-hero.
const parseComm = (comm) => {
let up = '', rest = comm;
if (comm.startsWith('Up to ')) { up = 'Up to'; rest = comm.slice(6); }
const sp = rest.indexOf(' ');
return { up, num: sp === -1 ? rest : rest.slice(0, sp), rem: sp === -1 ? '' : rest.slice(sp + 1) };
};
return (
Advertisers and campaigns to promote
We have 4,000+ advertisers on our platform that partners can earn from. Here is a highlight across categories, pick one to explore.
{OFFER_CATS.map(c => (
setCat(c)}>
{c}
))}
);
}
/* ---------------- Section 5 — "Simple enough to start today." ----------------
Four steps (Match → Go live → Track → Grow and get paid). Each row: masked photo
with floating live-UI cards (left) + step copy and a testimonial (right).
Static (Phase 1); overlay cards rebuilt in CSS for crispness. */
const START_STEPS = [
{ n: 'Step 1', title: 'Match', img: 'home-start-img-01.png', overlay: 'match',
desc: 'We match you with the right brands, or the right creators. No cold outreach.',
quote: '“Found 40 brands to promote in a day, the filter and category makes the process much easier.”',
name: 'John Doe', role: 'Publisher · Food Blogger', avatar: 's5-avatar-1.png' },
{ n: 'Step 2', title: 'Go live', img: 'home-start-img-02.png', overlay: 'golive',
desc: 'Then you go live, your way. Share a link, drop a coupon, add a banner, or launch a full campaign.',
quote: '“Involve Asia did a great job in guiding us on what info needed and launched our campaign in an afternoon.”',
name: 'Brand Name', role: 'Advertiser · Brand Category', avatar: 's5-avatar-3.png' },
{ n: 'Step 3', title: 'Track', img: 'home-start-img-03.png', overlay: 'track',
desc: 'Watch every click, sale, and payout in one dashboard.',
quote: '“Found 40 brands to promote in a day, the filter and category makes the process much easier.”',
name: 'Jane Doe', role: 'Publisher · Lifestyle Content Creator', avatar: 's5-avatar-2.png' },
{ n: 'Step 4', title: 'Grow and get paid', img: 'home-start-img-04.png', overlay: 'payout',
desc: "Creators get paid for every sale they drive. Brands grow from those sales, and only pay when they're real and verified.",
quote: '“The data provided is clear which makes the validation process easier, and we only pay when it actually converts.”',
name: 'Brand Name', role: 'Advertiser · Brand Category', avatar: 's5-avatar-3.png' },
];
function StartOverlay({ type }) {
if (type === 'match') return (
Recommended
{[['JD Sports', '3.5', '#0F1C2E', 'JD-ft-img.png'], ['PUMA', '2.1', '#1A2E47', 'PUMA-ft-img.png']].map(([b, c, bg, logo]) => (
{b} Up to {c}% commission
))}
);
if (type === 'golive') return (
);
if (type === 'track') return (
);
if (type === 'payout') return (
);
return null;
}
/* Static fallback (reduced-motion / mobile / no-GSAP): the original vertical step list. */
function StartStatic() {
return (
Simple enough to start today.
Whether you're here to earn or to grow, you're four steps from your first payout.
{START_STEPS.map((s) => (
{s.n}
{s.title}
{s.desc}
{s.quote}
{s.name} {s.role}
))}
);
}
/* Animated (desktop): Klarna-style pinned deck. Section pins; each step's image card
slides up from below and stacks over the previous (which peeks at the top). The right
column shows ONE step's text at a time — the whole block cross-fades to the next as
you scroll. Scrubbed to the scroll position. */
function StartAnimated() {
const stageRef = React.useRef(null);
const cardsRef = React.useRef([]);
const textsRef = React.useRef([]);
React.useEffect(() => {
const gsap = window.gsap, ST = window.ScrollTrigger;
const stage = stageRef.current;
if (!stage || !gsap || !ST) return;
gsap.registerPlugin(ST);
const cards = cardsRef.current.filter(Boolean);
const texts = textsRef.current.filter(Boolean);
const ctx = gsap.context(() => {
// the floating UI cards overlaid on each photo (glass stat/product/payout cards + the match box)
const uis = cards.map((c) => [...c.querySelectorAll('.st-glass, .st-ov-match')]);
cards.forEach((c, i) => gsap.set(c, { autoAlpha: i === 0 ? 1 : 0, zIndex: i + 1 }));
texts.forEach((t, i) => gsap.set(t, { autoAlpha: i === 0 ? 1 : 0, y: i === 0 ? 0 : 26, zIndex: i + 1 }));
uis.forEach((arr) => gsap.set(arr, { autoAlpha: 0, y: 16 })); // UI starts hidden; enters per step
const tl = gsap.timeline({
defaults: { ease: 'power2.out' },
scrollTrigger: { trigger: stage, pin: stage, start: 'top top', end: '+=3400', scrub: 0.5, anticipatePin: 1 },
});
tl.to(uis[0], { autoAlpha: 1, y: 0, duration: 0.4, stagger: 0.09 }, 0.15); // step 1 UI enters as the pin engages
const HOLD = 0.5, TR = 0.6;
let at = 0.6; // let step 1 read as the pin engages
for (let i = 0; i < cards.length - 1; i++) {
tl.to(cards[i], { autoAlpha: 0, duration: TR }, at); // current card fades fully out…
tl.to(cards[i + 1], { autoAlpha: 1, duration: TR }, at); // …next fades in at the SAME position
tl.to(texts[i], { autoAlpha: 0, y: -26, duration: 0.42 }, at); // current text fades out…
tl.to(texts[i + 1], { autoAlpha: 1, y: 0, duration: 0.5 }, at + 0.12); // …next text fades in
tl.to(uis[i + 1], { autoAlpha: 1, y: 0, duration: 0.4, stagger: 0.09 }, at + 0.28); // …UI cards rise in after the photo settles
at += TR + HOLD;
}
tl.to({}, { duration: 0.5 }); // tail hold on the last step
}, stage);
return () => ctx.revert();
}, []);
return (
Simple enough to start today.
Whether you're here to earn or to grow, you're four steps from your first payout.
{START_STEPS.map((s, i) => (
(cardsRef.current[i] = el)}>
))}
{START_STEPS.map((s, i) => (
(textsRef.current[i] = el)} aria-hidden={i !== 0}>
{s.n}
{s.title}
{s.desc}
{s.quote}
{s.name} {s.role}
))}
);
}
function StartToday() {
return (
Simple enough to start today.
Whether you're here to earn or to grow, you're four steps from your first payout.
{START_STEPS.map((s, i) => (
))}
);
}
/* ---------------- Section 6 — "Real human support, at every step." ----------------
Wide rounded photo banner: giant translucent 95% stat (left) + headline, copy and
a glass-boxed testimonial (right). MOTION (Figma 1110:30219 / 1216:43136): when the
banner falls into the viewport centre it auto-plays ONCE — a chat pill types (three
bouncing dots) then morphs into "How can we help today?", holds, and exits as the
photo blur-reveals; then title+copy fade in, and the 95% figure + testimonial land
last. Sizes use container units so the composition scales with the banner width.
Reduced-motion / mobile fall back to the static final composition. */
function SupportBanner() {
const secRef = React.useRef(null);
// Chat-pill motion (concept-8): typing dots → morph wider → reveal "How can we help today?",
// then STOP (no exit / no photo blur). Fires once when the section enters the viewport.
// Static fallback (no GSAP / reduced motion): CSS resting state already shows the final bubbles.
React.useEffect(() => {
const gsap = window.gsap, ST = window.ScrollTrigger;
const root = secRef.current;
if (!root || !gsap || !ST || prefersReduced()) return;
gsap.registerPlugin(ST);
const q = (s) => root.querySelector(s);
const pill = q('.sup-pill'), dots = q('.sup-pill-dots'), ans = q('.sup-pill-answer'), hello = q('.sup-hello');
const natW = Math.round(pill.getBoundingClientRect().width); // measure resting width (answer shown)
const ctx = gsap.context(() => {
gsap.set(pill, { width: 52, autoAlpha: 0 }); // dot pill, hidden until after "Hello."
gsap.set(dots, { autoAlpha: 1 });
gsap.set(ans, { autoAlpha: 0 });
gsap.set(hello, { autoAlpha: 0, y: 6, scale: 0.9 });
pill.classList.remove('is-typing');
const tl = gsap.timeline({
scrollTrigger: { trigger: root, start: 'top 72%', once: true },
defaults: { ease: 'power2.out' },
});
tl.to(hello, { autoAlpha: 1, y: 0, scale: 1, duration: 0.4 }, 0.15); // 1 "Hello." comes out FIRST
tl.to(pill, { autoAlpha: 1, duration: 0.3 }, 0.95); // 2 then the dot pill appears…
tl.call(() => pill.classList.add('is-typing'), null, 1.05); // …dots do ONE bounce round
tl.to(pill, { width: natW, duration: 0.5, ease: 'power3.out' }, 2.0); // 3 morph wider…
tl.to(pill, { scaleY: 1.06, duration: 0.13, yoyo: true, repeat: 1, ease: 'sine.inOut' }, 2.0);
tl.to(dots, { autoAlpha: 0, duration: 0.2, onStart: () => pill.classList.remove('is-typing') }, 2.05);
tl.to(ans, { autoAlpha: 1, duration: 0.35 }, 2.4); // 4 …reveal "How can we help today?" — STOP here
}, root);
return () => ctx.revert();
}, []);
return (
Real human support, at every step.
Not bots, not dead-end FAQs. Real people who know the platform and are ready to help, whether you're a creator setting up your first link or a brand launching your biggest campaign.
95% of users rate our support as great.
“It's easy to reach customer service, and they fix things quickly.”
Verified Publisher
Hello.
How can we help today?
);
}
/* ---------------- Section 7 — "Real results. Real growth." ----------------
Dual-audience success-story slider. Publisher stories anchored left, Advertiser
anchored right; upcoming cards peek toward the centre. Arrows advance BOTH stacks
at once — the left stack slides left, the right stack slides right. */
const PUB_STORIES = [
{ photo: 's7-pub.png', big: '3', unit: ' properties', head: 'Bought from her affiliate earnings', tag: 'Facebook creator, Philippines', desc: 'How a mother of four built a new life from Facebook content with Involve.' },
{ photo: 's7-pub-travel.png', big: '$220K', unit: '+', head: 'In sales driven for one travel brand, Q4 2023', tag: 'Affiliate network, AI content', desc: 'How Flickstree scaled travel sales through Involve.' },
{ photo: 's7-pub-food.png', big: '$250', unit: ' earned', head: 'From just 10.5k followers, part-time', tag: 'Travel and food creator', desc: "Proof you don't need to be big to earn with Involve." },
];
const ADV_STORIES = [
{ photo: 's7-adv.png', big: '796', unit: '%', head: 'Increase in sales', tag: 'E-commerce', desc: 'How Big Bang Sales scaled through affiliate partnerships.' },
{ photo: 's7-adv-telco.png', big: '4.3', unit: 'x', head: 'Increase in sales', tag: 'Telco', desc: 'How Involve partners drove growth for TIME Internet.' },
{ photo: 's7-adv-health.png', big: '$160K', unit: '', head: 'In sales · 4,912 conversions', tag: 'Health & Wellness', desc: 'How a global health and wellness brand launched a CPS programme on Involve.' },
];
function RRChevron({ dir }) {
return (
{dir === 'l' ?
);
}
/* Mobile stacked deck for the active tab: front card + two cards peeking behind it
(3 total), swipe/arrows to advance. `tabKey` re-keys the front card so it re-animates
both on tab switch and on advance. */
function MobileDeck({ stories, idx, onPrev, onNext, tabKey }) {
const m = (n, k) => ((n % k) + k) % k;
const N = stories.length;
const front = stories[m(idx, N)];
const p1 = stories[m(idx + 1, N)];
const p2 = stories[m(idx + 2, N)];
// horizontal swipe → prev/next (ignore mostly-vertical drags so the page can still scroll)
const touch = React.useRef(null);
const onTouchStart = (e) => { const t = e.touches[0]; touch.current = { x: t.clientX, y: t.clientY, done: false }; };
const onTouchMove = (e) => {
const s = touch.current; if (!s || s.done) return;
const t = e.touches[0], dx = t.clientX - s.x, dy = t.clientY - s.y;
if (Math.abs(dx) > 44 && Math.abs(dx) > Math.abs(dy)) { s.done = true; (dx < 0 ? onNext : onPrev)(); }
};
const onTouchEnd = () => { touch.current = null; };
return (
);
}
function StoryCard({ s }) {
const photo = !!s.photo;
return (
{photo &&
}
{photo &&
}
);
}
function rrSlot(r, side) {
const sgn = side === 'l' ? -1 : 1;
let tx, sc, op, z;
if (r === 0) { tx = 36; sc = 1; op = 1; z = 4; }
else if (r === 1) { tx = 24; sc = 0.78; op = 1; z = 3; }
else if (r === 2) { tx = 17; sc = 0.64; op = 0.26; z = 2; }
else if (r < 0) { tx = 64; sc = 0.95; op = 0; z = 1; }
else { tx = 13; sc = 0.5; op = 0; z = 1; }
return { transform: `translate(-50%,-50%) translateX(${sgn * tx}cqw) scale(${sc})`, opacity: op, zIndex: z };
}
function SuccessSlider() {
// Two unbounded indices, one per deck. Desktop moves both together (arrows / card-click);
// mobile drives each independently. Slot positions are circular, so both loop forever.
const [pi, setPi] = React.useState(0);
const [ai, setAi] = React.useState(0);
const [mtab, setMtab] = React.useState(0); // mobile tabs: 0 = publishers, 1 = advertisers
const stageRef = React.useRef(null);
const prevPiRef = React.useRef(0);
const prevAiRef = React.useRef(0);
const initedRef = React.useRef(false);
const mod = (n, m) => ((n % m) + m) % m;
// GSAP owns positioning on desktop (reads each card's LIVE position → smooth from any state,
// reliably re-triggers every step). Fallback (no GSAP / reduced-motion / mobile) uses inline slots.
const useGsap = React.useState(() =>
typeof window !== 'undefined' && !!window.gsap &&
window.matchMedia('(min-width:821px)').matches && !prefersReduced()
)[0];
const advanceBoth = (delta) => { setPi((v) => v + delta); setAi((v) => v + delta); }; // desktop: both decks move together
const mPrev = () => (mtab === 0 ? setPi((v) => v - 1) : setAi((v) => v - 1)); // mobile: advance the active tab's deck
const mNext = () => (mtab === 0 ? setPi((v) => v + 1) : setAi((v) => v + 1));
const pickCard = (d, N, st) => {
if (d === 0) { window.location.href = st.href || '/success-stories/'; return; }
if (d <= N - d) advanceBoth(d); else advanceBoth(-(N - d)); // shorter single ±1 step to the front
};
React.useLayoutEffect(() => {
if (!useGsap) return;
const gsap = window.gsap, stage = stageRef.current;
if (!stage) return;
const layout = (animate) => {
const W = stage.getBoundingClientRect().width || 1;
const u = W / 100; // 1cqw in px
const props = (d, side) => {
const s = side === 'l' ? -1 : 1;
if (d === 0) return { x: s * 36 * u, scale: 1, opacity: 1, zIndex: 4 };
if (d === 1) return { x: s * 24 * u, scale: 0.78, opacity: 1, zIndex: 3 };
return { x: s * 17 * u, scale: 0.64, opacity: 0.26, zIndex: 2 };
};
const exitX = (side) => (side === 'l' ? -1 : 1) * 62 * u;
[['l', PUB_STORIES, pi, prevPiRef], ['r', ADV_STORIES, ai, prevAiRef]].forEach(([side, arr, cur, prevRef]) => {
const N = arr.length;
arr.forEach((_, idx) => {
const el = stage.querySelector(`[data-rr="${side}${idx}"]`);
if (!el) return;
const d = mod(idx - cur, N), pd = mod(idx - prevRef.current, N);
const t = props(d, side);
if (!animate) { gsap.set(el, { xPercent: -50, yPercent: -50, x: t.x, scale: t.scale, opacity: t.opacity, zIndex: t.zIndex }); return; }
gsap.killTweensOf(el);
if (pd === 0 && d === N - 1) { // leaving (next): front → out → back
gsap.timeline()
.to(el, { x: exitX(side), scale: 1.04, opacity: 0, zIndex: 6, duration: 0.3, ease: 'power2.in' })
.set(el, { x: t.x, scale: t.scale, zIndex: t.zIndex })
.to(el, { opacity: t.opacity, duration: 0.28, ease: 'power2.out' });
} else if (pd === N - 1 && d === 0) { // arriving (prev): fade where it is → jump to exit → slide in
gsap.timeline()
.to(el, { opacity: 0, duration: 0.16, ease: 'power1.in' })
.set(el, { x: exitX(side), scale: 1.04, zIndex: 6 })
.to(el, { x: t.x, scale: t.scale, opacity: 1, duration: 0.44, ease: 'power3.out' });
} else { // normal move
gsap.to(el, { x: t.x, scale: t.scale, opacity: t.opacity, zIndex: t.zIndex, duration: 0.55, ease: 'power2.inOut' });
}
});
});
prevPiRef.current = pi; prevAiRef.current = ai;
};
layout(initedRef.current); // first run = instant place; after = animate
initedRef.current = true;
const onResize = () => { gsap.killTweensOf(stage.querySelectorAll('[data-rr]')); layout(false); };
window.addEventListener('resize', onResize);
return () => window.removeEventListener('resize', onResize);
}, [pi, ai, useGsap]);
return (
Real results. Real growth.
From the people and brands growing with Involve.
{/* desktop: side labels above the shared deck */}
For Publishers
For Advertisers
{PUB_STORIES.map((st, idx) => {
const N = PUB_STORIES.length, d = mod(idx - pi, N); // circular slot 0..N-1
const style = useGsap ? { cursor: 'pointer' } : { ...rrSlot(d, 'l'), cursor: 'pointer' };
return
pickCard(d, N, st)}>
;
})}
{ADV_STORIES.map((st, idx) => {
const N = ADV_STORIES.length, d = mod(idx - ai, N);
const style = useGsap ? { cursor: 'pointer' } : { ...rrSlot(d, 'r'), cursor: 'pointer' };
return
pickCard(d, N, st)}>
;
})}
{/* mobile: Publisher / Advertiser tabs (+ arrows), then a stacked deck (front + 2 peeking) */}
);
}
/* ---------------- From the Involve blog — placeholder cards (auto-featured from WordPress) ----------------
Header + "Read the blog" link + Publisher/Advertiser tabs, then the 3 MOST-RECENT posts for the active
audience. Cards are PLACEHOLDERS: at dev time the homepage auto-surfaces the newest posts from the CMS
(per audience, most recent first). Each card = category tag + title + read time + "Read more".
Mobile mirrors the "Real results" section: tabs above the scroller, "Read the blog" CTA below it. */
const BLOG_PUB = [
{ tone: 'pub', tag: 'For Publishers', title: 'How to promote affiliate links on TikTok', read: '5 min read', href: '/blog/' },
{ tone: 'pub', tag: 'For Publishers', title: 'Express Withdrawal, explained', read: '4 min read', href: '/blog/' },
{ tone: 'pub', tag: 'For Publishers', title: 'What is EPC in affiliate marketing?', read: '5 min read', href: '/blog/' },
];
const BLOG_ADV = [
{ tone: 'adv', tag: 'For Advertisers', title: 'How to launch your first affiliate program', read: '6 min read', href: '/blog/' },
{ tone: 'adv', tag: 'For Advertisers', title: 'Choosing the right commission structure', read: '6 min read', href: '/blog/' },
{ tone: 'adv', tag: 'For Advertisers', title: 'Measuring ROI across your publisher network', read: '7 min read', href: '/blog/' },
];
function BlogSection() {
const [btab, setBtab] = React.useState(0); // 0 = Publisher, 1 = Advertiser
const posts = btab === 0 ? BLOG_PUB : BLOG_ADV;
return (
From the Involve blog.
Fresh tips, playbooks, and insights, whichever side you're on.
Read the blog
);
}
/* ---------------- Stat band (concept-8) — standalone section ----------------
Centered caption + a 4-up row of headline stats that count up when scrolled into view. */
const STAT_BAND = [
{ to: 1000000, fmt: (v) => Math.round(v).toLocaleString() + '+', label: 'publishers' },
{ to: 270, fmt: (v) => '$' + Math.round(v) + 'M+', label: 'commissions paid' }, // confirmed: $270M+
{ to: 3.2, fmt: (v) => '$' + v.toFixed(1) + 'B+', label: 'sales generated' },
{ to: 500, fmt: (v) => Math.round(v) + '+', label: 'brands' },
];
function StatCount({ to, fmt }) {
const ref = React.useRef(null);
React.useEffect(() => {
const el = ref.current;
if (!el) return;
if (prefersReduced() || !('IntersectionObserver' in window)) { el.textContent = fmt(to); return; }
let raf = 0, started = false, tid = 0;
const run = () => {
const dur = 1500, t0 = performance.now();
const tick = (now) => {
const p = Math.min(1, (now - t0) / dur);
el.textContent = fmt(to * (1 - Math.pow(1 - p, 3))); // easeOutCubic
if (p < 1) raf = requestAnimationFrame(tick);
};
raf = requestAnimationFrame(tick);
};
const start = () => { if (started) return; started = true; run(); io.disconnect(); if (tid) clearTimeout(tid); };
const io = new IntersectionObserver((es) => { if (es[0].isIntersecting) start(); }, { threshold: 0.45 });
io.observe(el);
// Fallback: if the band is already within the viewport shortly after mount (e.g. above
// the fold on a tall screen) and the observer hasn't fired, run anyway so it never sticks at 0.
tid = setTimeout(() => { const t = el.getBoundingClientRect().top; if (t < window.innerHeight && t > -el.offsetHeight) start(); }, 1200);
return () => { io.disconnect(); if (raf) cancelAnimationFrame(raf); if (tid) clearTimeout(tid); };
}, [to, fmt]);
return
{fmt(0)} ;
}
function StatBand() {
return (
This is what growing together looks like, since 2014.
{STAT_BAND.map((s, i) => (
{s.label}
))}
);
}
/* Wrapper: pinned scroll choreography on desktop w/ GSAP; static composed fallback otherwise. */
function HexFinale(props) {
// concept-8: simplified — the pinned scroll-scrubbed morph is retired; render the static
// "Pick your side" (the stat band is now its own section,
). HexFinaleAnimated
// is kept below (unused) for reference/revival.
return
;
}
/* Pinned, scroll-scrubbed hexagon finale: connected mark → stats count up → drift →
split → flip → photo-fill → honeycomb + "Pick your side" + cards bloom. */
// honeycomb greys tessellated around the two photo hexes — [asset, xpx, ypx] offsets from the hex centre (w≈190,h≈214)
// spaced honeycomb around the photo hexes (gaps between every tile), Figma arrangement — [asset, xpx, ypx]
const HFA_HONEY = [['g1', 0, -225], ['g3', 268, -225], ['g1', 536, 0], ['g3', 0, 225], ['g2', -268, 225], ['g2', -536, 225]];
// Figma's rounded pointy-top hexagon path; non-scaling stroke keeps the outline the
// same weight at every hex size, and the bezier corners match the photo hexes' rounding.
const HexOut = ({ id }) => (
);
function HexFinaleAnimated({ emphasis = 'equal', hex = 3 }) {
const wrapRef = React.useRef(null), stageRef = React.useRef(null);
const aRef = React.useRef(null), bRef = React.useRef(null);
const aOut = React.useRef(null), bOut = React.useRef(null), aPh = React.useRef(null), bPh = React.useRef(null);
const statsRef = React.useRef(null), combRef = React.useRef(null), headRef = React.useRef(null);
const cLRef = React.useRef(null), cRRef = React.useRef(null);
const n0 = React.useRef(null), n1 = React.useRef(null), n2 = React.useRef(null), n3 = React.useRef(null);
React.useEffect(() => {
const gsap = window.gsap, ST = window.ScrollTrigger;
if (!gsap || !ST) return;
gsap.registerPlugin(ST);
const ctx = gsap.context(() => {
const A = aRef.current, B = bRef.current;
const stats = statsRef.current, comb = combRef.current, head = headRef.current, cL = cLRef.current, cR = cRRef.current;
const combHexes = comb.children;
const blurb = stats.querySelector('.hfa-blurb'), since = stats.querySelector('.hfa-since');
const numStats = stats.querySelectorAll('.hfa-stat');
// start as the connected mark: A big centred, B small upper-right — both OUTLINE (photo hidden)
gsap.set([A, B], { left: '50%', top: '50%', xPercent: -50, yPercent: -50, rotationY: 0, force3D: true });
gsap.set(A, { width: 230, height: 259, x: 0, y: 0 });
gsap.set(B, { width: 108, height: 122, x: 108, y: -68 });
gsap.set([aPh.current, bPh.current], { autoAlpha: 0 });
gsap.set([blurb, since], { autoAlpha: 0 });
gsap.set(numStats, { autoAlpha: 0 });
gsap.set(combHexes, { xPercent: -50, yPercent: -50, autoAlpha: 0, scale: 0.85 });
gsap.set(head, { autoAlpha: 0, y: 40, xPercent: -50 });
gsap.set([cL, cR], { autoAlpha: 0, y: 40, yPercent: -50 });
const c = { a: 0, b: 0, cc: 0, d: 0 };
const setNums = () => {
if (n0.current) n0.current.textContent = Math.round(c.a).toLocaleString() + '+';
if (n1.current) n1.current.textContent = '$' + Math.round(c.b) + 'M+';
if (n2.current) n2.current.textContent = '$' + Math.round(c.cc) + 'B+';
if (n3.current) n3.current.textContent = Math.round(c.d).toLocaleString() + '+';
};
setNums();
// Count up in REAL TIME (not scrubbed) the moment the numbers appear, so it auto-runs
// to the final figures without the user inch-scrolling to drive it. Fires once.
let counted = false;
const countUp = () => {
if (counted) return; counted = true;
gsap.to(c, { a: 800000, b: 270, cc: 15, d: 4000, duration: 1.0, ease: 'power2.out', onUpdate: setNums });
};
const tl = gsap.timeline({ defaults: { ease: 'none' } });
tl.from([A, B], { autoAlpha: 0, y: '+=50', duration: 0.5 }, 0); // 1 connected mark in
tl.to([blurb, since], { autoAlpha: 1, duration: 0.45 }, 0.55); // 2 context lines FIRST
tl.to(numStats, { autoAlpha: 1, duration: 0.3, stagger: 0.06 }, 1.05); // 3 numbers jump in
tl.call(countUp, null, 1.1); // → auto count-up (real time)
tl.to([blurb, since, ...numStats], { autoAlpha: 0, y: -24, duration: 0.5 }, 2.25); // 4 all out
// 5 MORPH: the two mark hexes grow/shrink to equal, split to final spots, flip, outline→photo
tl.to(A, { width: 247, height: 278, x: -134, y: 0, duration: 0.85 }, 2.55);
tl.to(B, { width: 247, height: 278, x: 134, y: 0, duration: 0.85 }, 2.55);
tl.to([A, B], { rotationY: 360, duration: 0.95 }, 2.7);
tl.to([aOut.current, bOut.current], { autoAlpha: 0, duration: 0.4 }, 3.15); // outline out
tl.to([aPh.current, bPh.current], { autoAlpha: 1, duration: 0.4 }, 3.15); // photo in (fill)
tl.to(combHexes, { autoAlpha: 0.6, scale: 1, duration: 0.7, stagger: 0.05 }, 3.5); // 6 honeycomb comb
tl.to(head, { autoAlpha: 1, y: 0, duration: 0.5 }, 3.55);
tl.to([cL, cR], { autoAlpha: 1, y: 0, duration: 0.6, stagger: 0.12 }, 3.75);
tl.to({}, { duration: 1.6 }); // 7 HOLD on the final CTA so users dwell before the footer
ST.create({
trigger: wrapRef.current, pin: stageRef.current, start: 'top top', end: '+=3315',
scrub: 0.6, anticipatePin: 1, invalidateOnRefresh: true, animation: tl,
});
}, wrapRef);
return () => ctx.revert();
}, []);
return (
{HFA_HONEY.map(([g, x, y], i) =>
)}
800,000+ publishers
Behind every number,
$270M+ Commissions paid
$15B+ Sales Generated
4,000+ advertisers
Since 2014
Pick your side and grow with us.
Creators. Content sites. Affiliate sites.
I'm a
Promote brands you love. Turn your audience or traffic into income.
Start Earning
Brands. Retailers. Enterprises.
I'm an
Grow your sales with the right publishers. Pay only for results.
Grow My Brand
);
}
/* ---------------- Section 8 + 9 — Stat band + "Pick your side" hexagon finale ----------------
Stat band (800k / $270M / $15B / 4,000, Since 2014) around a connected-hex mark,
flowing into the hexagon CTA. Pass 1: composed layout, live counters, reveals.
Pass 2 (below, in effect): scroll-scrubbed split → flip → fill choreography. */
const HEX_CLIP = 'polygon(50% 2%, 91.57% 26%, 91.57% 74%, 50% 98%, 8.43% 74%, 8.43% 26%)';
function useCounter(ref, to, fmt) {
React.useEffect(() => {
const el = ref.current; if (!el) return;
const gsap = window.gsap;
const set = (v) => { el.textContent = fmt(v); };
if (!gsap || prefersReduced()) { set(to); return; }
const obj = { v: 0 };
const st = window.ScrollTrigger;
const tween = gsap.to(obj, { v: to, duration: 1.6, ease: 'power2.out', paused: true, onUpdate: () => set(obj.v) });
set(0);
let trig;
if (st) { trig = st.create({ trigger: el, start: 'top 85%', once: true, onEnter: () => tween.play() }); }
else { tween.play(); }
return () => { tween.kill(); trig && trig.kill(); };
}, []);
}
function StatBig({ to, fmt, size }) {
const ref = React.useRef(null);
useCounter(ref, to, fmt);
return
{fmt(0)} ;
}
function HexFinaleStatic({ emphasis = 'equal', hex = 3 }) {
// Honeycomb decoration around the two photo hexes — EXACT placement copied from the previous
// (backup) animated finale's HFA_HONEY: [asset, xpx, ypx] centre offsets, 247px hex tiles.
const HF_HONEY = [
['g1', 0, -225], ['g3', 268, -225], ['g1', 536, 0],
['g3', 0, 225], ['g2', -268, 225], ['g2', -536, 225],
];
return (
{/* ---- Hexagon "Pick your side" CTA ---- */}
Pick your side and grow with us.
{HF_HONEY.map(([g, x, y], i) => (
))}
{/* mobile-only kickers, placed ABOVE the photos (the desktop kickers stay inside the cards) */}
Influencers. Websites. App owner.
Brands. Retailers. Enterprises.
Creators. Content sites. Affiliate sites.
I'm a
Promote brands you love. Turn your audience or traffic into income.
Start Earning
Brands. Retailers. Enterprises.
I'm an
Grow your sales with the right publishers. Pay only for results.
Grow My Brand
);
}
/* ---------------- How it works — Concept 3 design: alternating step rows ----------------
Ported from Concept 3's "#how" section: centred head, four alternating text|video rows —
oversized warm-300 step numeral, display title, short copy, and the step's looping clip
in a rounded, warm-100 bordered box. Uses Concept 3's real step videos (media/video/). */
const STEPS = [
{ n: '01', t: 'Create', d: 'List your brand or sign up as a publisher in minutes. Live the same day.', video: 'media/video/create%20step%20video.mov' },
{ n: '02', t: 'Automate', d: 'We match the right partners to the right campaigns. No manual outreach.', video: 'media/video/automate%20step%20video.mov' },
{ n: '03', t: 'Track', d: 'Clicks, conversions, and commissions update in real-time, transparently.', video: 'media/video/track%20step%20video.mov' },
{ n: '04', t: 'Get Paid', d: 'Brands pay for results. Partners get fast, local-currency payouts.', video: 'media/video/payment%20step%20video.mov' },
];
function HowItWorks({ hex = 3 }) {
const secRef = React.useRef(null);
// Concept 3 autoplays all four clips; this keeps the identical look while only letting
// clips decode when on screen. rAF-throttled scroll check (same proven pattern as the
// rest of the bundle) rather than IntersectionObserver — the repeated ticks also
// self-heal the pending-play/pause AbortError race under smooth (Lenis) scrolling.
React.useEffect(() => {
const vids = Array.from(secRef.current.querySelectorAll('video'));
if (!vids.length) return;
let raf = 0;
const update = () => {
raf = 0;
const vh = window.innerHeight || 1;
vids.forEach((v) => {
const r = v.getBoundingClientRect();
const inView = r.top < vh + 80 && r.bottom > -80;
if (inView) { if (v.paused) { const p = v.play(); if (p && p.catch) p.catch(() => {}); } }
else if (!v.paused) v.pause();
});
};
const onScroll = () => { if (!raf) raf = requestAnimationFrame(update); };
update();
window.addEventListener('scroll', onScroll, { passive: true });
window.addEventListener('resize', onScroll);
return () => {
window.removeEventListener('scroll', onScroll);
window.removeEventListener('resize', onScroll);
if (raf) cancelAnimationFrame(raf);
};
}, []);
return (
{/* rides the global surface (= warm-50 until the stats transition begins) so there's no hard seam where the darkening starts */}
Involve scales & automates your partnerships
Stop reaching out to partners one by one, manually. Involve runs the busywork so both sides can focus on growth.
{STEPS.map((s, i) => (
))}
);
}
Object.assign(window, { TwoDoor, Hero, TrustStrip, OffersSection, HowItWorks, Arrow });
/* ===== ia-sections2.jsx ===== */
// ia-sections2.jsx — Stats (count-up, never 0), Blog slider, Final CTA, Footer.
/* ---------------- Stats ----------------
Count-up never starts at 0 (brief §2.4). Starts at ~60% of the real value
and is reduced-motion aware. Real anchors: 800,000+ partners, 4,000+ brands. */
function useCountUp(target, run, startFrac = 0.6) {
// Baseline is the REAL value (brief §2.4) — never a partial seed. We only drop to
// the lower start value at the moment the in-view animation actually begins.
const [v, setV] = React.useState(target);
React.useEffect(() => {
if (!run) return;
const reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
if (reduce) { setV(target); return; }
const from = Math.round(target * startFrac), dur = 1100, t0 = performance.now();
setV(from);
let raf;
const tick = (now) => {
const p = Math.min(1, (now - t0) / dur);
const e = 1 - Math.pow(1 - p, 3);
setV(Math.round(from + (target - from) * e));
if (p < 1) raf = requestAnimationFrame(tick);
};
raf = requestAnimationFrame(tick);
return () => cancelAnimationFrame(raf);
}, [run, target, startFrac]);
return v;
}
// Stats per brief Change 2, in order: 800,000+ / 4,000+ / 12 years / 15 Billion+.
// Each carries the sticky image that swaps in as it becomes the active stat.
// NOTE: the "15 Billion+" revenue figure is pending finance confirmation (it must
// represent advertiser sales generated, not Involve's own revenue) — open item.
const STATS = [
{ value: 800000, tone: 'pub', fmt: (n) => Intl.NumberFormat('en').format(n) + '+', kicker: 'The network', label: 'Creators and publishers', sub: 'Creators, content sites, affiliate marketers, coupon and loyalty sites, all in one place.', imgLabel: 'community',
img: 'media/webp/800000%20globalpartners.webp', alt: 'Creators and publishers across the network' },
{ value: 4000, tone: 'adv', fmt: (n) => Intl.NumberFormat('en').format(n) + '+', kicker: 'The brands', label: 'Brands and advertisers', sub: 'From marketplaces to travel, finance and beauty, across every major category.', imgLabel: 'retail',
img: 'media/webp/4000%20brand%20images.webp', alt: 'Brands and advertisers on the platform' },
{ value: 12, tone: 'pub', fmt: (n) => n + ' years', kicker: 'The track record', label: 'Pioneering the network', sub: 'Trusted since 2014, scaling partnerships that quietly run themselves for both sides.', imgLabel: 'growth',
img: 'media/webp/sub-card-company.webp', alt: 'Twelve years pioneering the network' },
{ value: 15, tone: 'adv', fmt: (n) => n + ' Billion+', kicker: 'The impact', label: 'Revenue driven for advertisers', sub: 'Sales generated for advertisers through partnerships across the network.', imgLabel: 'revenue',
img: 'media/webp/market-region-image-recolor.webp', alt: 'Revenue driven for advertisers' },
];
// Sticky brand-recognition shape (hexagon-clipped) that holds in the viewport while
// the stat numbers scroll past. The active stat's image crossfades in (brief Change 2,
// air.inc register). Desktop only — hidden on mobile / reduced-motion where each stat
// shows its own inline image instead.
function StatsHexImage({ stats, active }) {
return (
{stats.map((s, i) => (
))}
);
}
/* Rolling odometer number (dashcreative-style): each digit is a reel of 0–9 that
spins one full turn and lands on its value, cascading left→right. Static / no-JS /
reduced-motion fallback rests on the REAL number (brief §2.4: never resting on 0). */
function RollingNumber({ value, fmt, run }) {
const rootRef = React.useRef(null);
const text = String(fmt(value));
const restY = (el) => -(10 + +el.getAttribute('data-d')) * 5; // yPercent that shows the target digit
// Rest each reel on its real digit up-front (correct before the roll & under
// reduced motion). GSAP owns yPercent end-to-end — NO inline transform, or its
// yPercent stacks on top and the strip overshoots into the blank gap past the digits.
React.useLayoutEffect(() => {
if (!rootRef.current || !window.gsap) return;
rootRef.current.querySelectorAll('.reel-inner').forEach((el) => window.gsap.set(el, { yPercent: restY(el) }));
}, [text]);
React.useEffect(() => {
if (!run || !rootRef.current) return;
const gsap = window.gsap;
const reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
if (!gsap || reduce) return; // stays on the real value
rootRef.current.querySelectorAll('.reel-inner').forEach((el, i) => {
gsap.fromTo(el, { yPercent: 0 }, { yPercent: restY(el), duration: 0.95 + i * 0.13, ease: 'power3.out' });
});
}, [run, text]);
return (
{text.split('').map((ch, i) => {
if (ch >= '0' && ch <= '9') {
const d = +ch;
return (
{Array.from({ length: 20 }, (_, k) => {k % 10} )}
);
}
return {ch === ' ' ? ' ' : ch} ;
})}
);
}
// One stat in the scrolling column. Dims when not the active stat; carries an inline
// hexagon image used only on mobile / reduced-motion (where the sticky image is off).
function StatItem({ s, i, active, itemRef, gate = true }) {
const accent = s.tone === 'adv' ? 'var(--stat-adv)' : 'var(--ember-light)'; // adv accent tracks the surface (readable bright + dark)
const on = i === active;
return (
{/* fade-and-rise entrance (no skew/rotate), per motion spec */}
{/* mobile / reduced-motion only: each stat shows its own image (no sticky column) */}
= i} />
{/* gate: count-up waits for the honeycomb wipe to fully cover (settled Midnight) */}
{s.label}
{s.sub}
);
}
/* ---------- animated logo video backdrop (viewport-pinned through section + parallax) ---------- */
function StatsVideoBg() {
const layerRef = React.useRef(null);
const pinRef = React.useRef(null);
const vidRef = React.useRef(null);
React.useEffect(() => {
const v = vidRef.current; if (!v) return;
const tryPlay = () => { const p = v.play(); if (p && p.catch) p.catch(() => {}); };
tryPlay();
v.addEventListener('canplay', tryPlay, { once: true });
return () => v.removeEventListener('canplay', tryPlay);
}, []);
React.useEffect(() => {
const layer = layerRef.current, pin = pinRef.current, vid = vidRef.current;
if (!layer || !pin) return;
const section = layer.parentElement;
const reduce = prefersReduced();
const baseOpacity = parseFloat(getComputedStyle(vid).opacity) || 0.3;
const clamp = (v, a, b) => Math.max(a, Math.min(b, v));
const update = () => {
const r = section.getBoundingClientRect();
const vh = window.innerHeight || 1;
// Keep a 100vh band pinned to the viewport while the section spans it,
// parked at the section's top/bottom otherwise — all via position:absolute
// so NO stacking context is created and mix-blend-mode keeps blending with
// the midnight background + hex texture behind it.
const t = Math.max(0, Math.min(r.height - vh, -r.top));
pin.style.top = t + 'px';
if (!vid) return;
// gentle parallax drift over the section's travel
const prog = clamp((vh - r.top) / (r.height + vh), 0, 1);
const parallax = reduce ? 0 : (prog - 0.5) * 120;
const ss = (x) => x * x * (3 - 2 * x); // smoothstep ease
// Enter fade is keyed to the video's ACTUAL centre in the viewport (not the
// section's top edge) — so it fades IN as the video rises into view, mirroring
// the exit fade. Exit keeps its original section-bottom keying.
const vidCenter = r.top + t + vh / 2; // video centre, in viewport coords
const enterT = clamp((vh - vidCenter) / (vh * 0.5), 0, 1); // 0 at/below the bottom edge → 1 once centred
const exitT = clamp(r.bottom / (vh * 1.5), 0, 1); // starts fading ~1.5 screens from the bottom → 0 as it rises out (more gradual/visible)
const fade = reduce ? 1 : ss(Math.min(enterT, exitT));
const entrance = reduce ? 0 : -(1 - enterT) * 64; // starts ~64px up, drops into place
vid.style.opacity = (baseOpacity * fade).toFixed(3);
vid.style.transform = `translate3d(0, ${(parallax + entrance).toFixed(1)}px, 0)`;
};
update();
const onScroll = () => update();
window.addEventListener('scroll', onScroll, { passive: true });
window.addEventListener('resize', onScroll);
return () => { window.removeEventListener('scroll', onScroll); window.removeEventListener('resize', onScroll); };
}, []);
return (
);
}
/* ---------------- Hexagon honeycomb wipe (steps → stats → brand-motion motif) ----------------
Signature transition for this boundary only: a honeycomb of brand hexagons rises from the
bottom of the viewport and fills it with Midnight (enter); on the way out of stats the
Midnight mass departs UPWARD (vertically flipped exit — light rises from the bottom,
mirroring the entrance; per design revision this supersedes the original "same timeline
reversed" spec line). While the enter wipe's top 25% is still filling, the stats section
itself slides up from the bottom edge over the covered area (scoped -18vh margin — real
scroll, no transform hand-off). Full-viewport background wipe on a pinned, scrub-locked
stage. The Midnight layer is ONE svg
masked by the honeycomb — only mask geometry
animates (transform/opacity tweens; no painted per-hex nodes, no layout properties).
Sits below the fold → no LCP impact.
ORIENTATION: spec draft said "flat-top", but the confirmed brand geometry is POINTY-TOP
everywhere — the logomark (NM_HEX), the Hexagon component, and the Figma honeycomb asset
(HEX_PATHS: top vertex at centre-x, vertical side edges). Built pointy-top to match the
mark; adjust the angle offset in the path builder to flip.
FALLBACKS: reduced-motion, mobile/touch and no-GSAP skip the wipe entirely and keep the
existing continuous surface cross-fade (which already snaps under reduced motion). */
const HEXW_MID = '#0F1C2E'; // locked Midnight (--midnight)
const hexWipeEnabled = () =>
typeof window !== 'undefined' && !!(window.gsap && window.ScrollTrigger) &&
!window.matchMedia('(max-width: 860px)').matches &&
!window.matchMedia('(pointer: coarse)').matches &&
!window.matchMedia('(prefers-reduced-motion: reduce)').matches;
function HexWipe({ reverse = false }) {
const on = React.useState(hexWipeEnabled)[0];
const stageRef = React.useRef(null);
const clipRef = React.useRef(null);
const gid = 'hexwipe-' + (reverse ? 'out' : 'in');
const [dims, setDims] = React.useState(() => (typeof window !== 'undefined' ? { w: window.innerWidth, h: window.innerHeight } : { w: 1440, h: 900 }));
// Rebuild geometry on real resizes only (debounced; ignores tiny/URL-bar shifts) —
// clip coords are in px (userSpaceOnUse), so they must track the viewport.
React.useEffect(() => {
if (!on) return;
let t;
const f = () => {
clearTimeout(t);
t = setTimeout(() => setDims((d) => (Math.abs(innerWidth - d.w) > 40 || Math.abs(innerHeight - d.h) > 120 ? { w: innerWidth, h: innerHeight } : d)), 250);
};
window.addEventListener('resize', f);
return () => { window.removeEventListener('resize', f); clearTimeout(t); };
}, [on]);
// Pointy-top tessellation over-bleeding all four viewport edges, so at every scroll
// position the screen is fully covered, cleanly mid-transition, or fully clear —
// never a sliver of the wrong colour at a seam or frame edge.
const grid = React.useMemo(() => {
const { w, h } = dims;
const a = Math.max(56, Math.min(130, w / 12)); // circumradius → hex width = √3·a (storyboard scale)
const stepX = Math.sqrt(3) * a, stepY = 1.5 * a;
const rows = Math.ceil(h / stepY) + 3, cols = Math.ceil(w / stepX) + 3;
const cells = [];
for (let r = -1; r < rows; r++)
for (let c = -1; c < cols; c++)
cells.push({ cx: c * stepX + ((((r % 2) + 2) % 2) ? stepX / 2 : 0), cy: r * stepY, r, c });
// One pointy-top hexagon path centred at 0,0 — overscaled 2% so settled tiles overlap a
// hair and antialiasing can never open hairline seams between them.
const s = a * 1.02, pts = [];
for (let i = 0; i < 6; i++) { const ang = (Math.PI / 3) * i - Math.PI / 6; pts.push((Math.cos(ang) * s).toFixed(2) + ' ' + (Math.sin(ang) * s).toFixed(2)); }
return { a, cells, d: 'M' + pts.join('L') + 'Z', maxRow: rows - 1 };
}, [dims]);
React.useEffect(() => {
if (!on) return;
const gsap = window.gsap, ST = window.ScrollTrigger;
gsap.registerPlugin(ST);
const { a, cells, maxRow } = grid;
const nodes = Array.from(clipRef.current.children);
const RISE = a * 3; // ≈ two rows of travel — enough to read as a rise, small enough to stay crisp
const tl = gsap.timeline({ paused: true, defaults: { ease: 'power1.out' } });
cells.forEach((cell, i) => {
// Deterministic raggedness (no Math.random → stable across rebuilds).
const j = ((((cell.c * 7 + cell.r * 13) % 9) + 9) % 9) / 9;
const floater = ((((cell.c * 3 + cell.r * 5) % 11) + 11) % 11) === 0;
const rowT = (maxRow - cell.r) / (maxRow + 1); // 0 = bottom row → bottom always leads
if (!reverse) {
// ENTER — hexes rise from below and settle. Jitter pulls starts EARLY only — peaks
// and detached floaters ahead of the wave, never late, so the covered mass can't
// open an interior hole. Rise + fade-in on a mask: position eases OUT, opacity
// eases IN (opaque only at settle) → no white hairline can flash at tile seams.
const start = Math.max(0, rowT * 0.68 - j * 0.3 - (floater ? 0.22 : 0));
tl.fromTo(nodes[i], { x: cell.cx, y: cell.cy + RISE }, { x: cell.cx, y: cell.cy, duration: 0.24, ease: 'power1.out' }, start)
.fromTo(nodes[i], { opacity: 0 }, { opacity: 1, duration: 0.24, ease: 'power2.in' }, start);
} else {
// EXIT — vertically flipped: the Midnight mass leaves UPWARD. Bottom rows depart
// first (light rises from the bottom, mirroring the entrance) and hexes fly up
// out of the viewport. Jitter/floaters push departures LATE only (lingering
// stragglers above the receding edge — never early), so the mass can't open
// interior light holes. Translucent in flight, mirroring the entrance.
const start = rowT * 0.68 + j * 0.3 + (floater ? 0.22 : 0);
tl.fromTo(nodes[i], { x: cell.cx, y: cell.cy }, { x: cell.cx, y: cell.cy - RISE, duration: 0.24, ease: 'power1.in' }, start)
.fromTo(nodes[i], { opacity: 1 }, { opacity: 0, duration: 0.24, ease: 'power2.out' }, start);
}
});
tl.progress(0); // enter rests clear; exit timeline runs covered → clear, so 0 = fully Midnight
const PIN = Math.round(dims.h * (reverse ? 0.65 : 0.72)); // enter reduced 20% (was 0.9)
// Enter only: the scrub LEADS the pin — the wave starts rising from the viewport bottom
// while the steps section still fills the top 75% of the screen (no dead approach), and
// completes at the pin end as before. Pin and scrub are separate triggers so the stage
// still pins cleanly at 'top top'.
const LEAD = reverse ? 0 : Math.round(dims.h * 0.75);
const stPin = ST.create({
trigger: stageRef.current, pin: true, pinSpacing: true,
start: 'top top', end: '+=' + PIN, anticipatePin: 1, invalidateOnRefresh: true,
});
const st = ST.create({
trigger: stageRef.current, start: LEAD ? 'top 75%' : 'top top', end: '+=' + (LEAD + PIN),
invalidateOnRefresh: true,
onUpdate(self) {
const p = self.progress;
tl.progress(p);
// Nav chrome hand-off — one shared class, last-writer wins: the enter stage turns it
// ON near full coverage (top edge covered last); the exit stage turns it OFF once the
// upward departure clears the top strip (top rows leave last → ~p 0.8).
document.body.classList.toggle('hexwipe-dark', reverse ? p < 0.8 : p > 0.93);
if (!reverse) window.dispatchEvent(new CustomEvent('ia:hexwipe', { detail: { progress: p } }));
},
});
(window.__hexWipes = window.__hexWipes || []).push({ gid, tl, st, stPin }); // verification/debug handle
return () => {
stPin.kill(); st.kill(); tl.kill();
window.__hexWipes = (window.__hexWipes || []).filter((x) => x.tl !== tl);
document.body.classList.remove('hexwipe-dark');
};
}, [on, grid, reverse, gid]);
if (!on) return null;
const { w, h } = dims;
return (
{/* mask (not clip) so in-flight hexes can be translucent — kills white hairline
slivers at tile seams mid-transition; unpainted mask area = hidden */}
{grid.cells.map((c, i) =>
);
}
function StatsSection({ hex = 3 }) {
const [active, setActive] = React.useState(0);
// Count-up gate (wipe mode): numbers may only start once Midnight has fully covered the
// viewport (wipe progress ≥ 0.9) — never over a half-covered screen. Latched true once
// reached. Fallback modes (no wipe) are ungated, as before.
const [covered, setCovered] = React.useState(() => !hexWipeEnabled());
React.useEffect(() => {
if (covered) return;
const f = (e) => { if (e.detail && e.detail.progress >= 0.9) setCovered(true); };
window.addEventListener('ia:hexwipe', f);
return () => window.removeEventListener('ia:hexwipe', f);
}, [covered]);
const itemRefs = React.useRef([]);
React.useEffect(() => {
const reduce = prefersReduced();
if (reduce) return; // static: CSS lights every stat, no scrub
let raf = 0;
const update = () => {
raf = 0;
const mid = window.innerHeight / 2;
let best = 0, bestD = Infinity;
itemRefs.current.forEach((el, i) => {
if (!el) return;
const r = el.getBoundingClientRect();
const d = Math.abs((r.top + r.height / 2) - mid);
if (d < bestD) { bestD = d; best = i; }
});
setActive(best);
};
const onScroll = () => { if (!raf) raf = requestAnimationFrame(update); };
update();
window.addEventListener('scroll', onScroll, { passive: true });
window.addEventListener('resize', onScroll);
return () => { window.removeEventListener('scroll', onScroll); window.removeEventListener('resize', onScroll); if (raf) cancelAnimationFrame(raf); };
}, []);
return (
Join a network that's already delivering
The numbers behind partnerships that run themselves, for advertisers acquiring customers and publishers earning more.
{STATS.map((s, i) => (
{ itemRefs.current[i] = el; }} />
))}
);
}
/* ---------------- Case studies — "Real results, measured" (fanned-arc carousel) ----------------
NEW section (not from Concept 1/3): five case-study cards in a static fanned arc — centre
card upright, larger and ACTIVE (background photo + overlaid text); side cards tilt
progressively outward, sit lower, and are text-only. STAGE 1: static arc + active/default
states only — glass overlay, entrance, auto-slide and drag come in later stages.
Images are real bundled brand photos standing in until final industry shots land. */
const CASES = [
{ stat: '796', unit: '%', line: 'Increase in sales', tag: 'E-commerce', d: 'How Big Bang Sales scaled through affiliate partnerships.', img: 'media/case%20study/ecommerce.png' },
{ stat: '723', unit: 'k MYR', line: 'In sales · 4,912 conversions', tag: 'Health & Wellness', d: 'How a global health and wellness brand launched a CPS programme on Involve.', img: 'media/case%20study/health%20and%20wellness.png' },
{ stat: '29', unit: 'x', line: 'Sales growth in 6 months', tag: 'Retail', d: "How Lotus's drove results through campaign optimisation.", img: 'media/case%20study/retail.png' },
{ stat: '52', unit: '%', line: 'More personal-loan sign-ups', tag: 'Finance', d: 'How RinggitPlus grew applications with affiliate marketing.', img: 'media/case%20study/finance.png' },
{ stat: '4.3', unit: 'x', line: 'Increase in sales', tag: 'Telco', d: 'How Involve partners drove growth for TIME Internet.', img: 'media/case%20study/telco.png' },
];
// Arc slots relative to the active card: {x-shift px, y-drop px, rotation °, scale, z}.
// Spacing tuned so all five read within a desktop viewport (outer cards' stats stay
// on-screen), matching the reference fan.
const CASE_SLOTS = {
'-2': { x: -540, y: 150, r: -24, s: 0.94, z: 1 },
'-1': { x: -280, y: 46, r: -12, s: 1, z: 2 },
'0': { x: 0, y: 0, r: 0, s: 1.1, z: 3 },
'1': { x: 280, y: 46, r: 12, s: 1, z: 2 },
'2': { x: 540, y: 150, r: 24, s: 0.94, z: 1 },
};
function CaseStudies() {
const N = CASES.length;
const mod = (n) => ((n % N) + N) % N;
const relOf = (i, a) => { const d = mod(i - a); return d > 2 ? d - N : d; }; // -2..2 slot relative to active
const [active, setActive] = React.useState(0);
const reduce = typeof window !== 'undefined' && window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
const [entered, setEntered] = React.useState(reduce); // reduced-motion: no fade-in-up, show immediately
const stageRef = React.useRef(null);
const prevActive = React.useRef(0);
const hoverRef = React.useRef(false), dragRef = React.useRef(false), pauseUntil = React.useRef(0);
const go = React.useCallback((dir) => setActive((a) => mod(a + dir)), []);
// Entrance: fire once when the arc first scrolls into view.
React.useEffect(() => {
if (entered || !stageRef.current) return;
const io = new IntersectionObserver((es) => { if (es[0].isIntersecting) { setEntered(true); io.disconnect(); } }, { threshold: 0.25 });
io.observe(stageRef.current);
return () => io.disconnect();
}, [entered]);
// Auto-slide every 4s; skip while hovered / dragging / within the post-interaction idle window.
React.useEffect(() => {
if (reduce) return;
const id = setInterval(() => {
if (hoverRef.current || dragRef.current || performance.now() < pauseUntil.current) return;
go(1);
}, 4000);
return () => clearInterval(id);
}, [reduce, go]);
// Pointer/touch drag — one step per horizontal swipe; resume auto-slide after a short idle.
React.useEffect(() => {
const el = stageRef.current; if (!el) return;
let sx = 0, moved = false;
const down = (e) => { dragRef.current = true; moved = false; sx = e.clientX; try { el.setPointerCapture(e.pointerId); } catch (_) {} };
const move = (e) => { if (dragRef.current && Math.abs(e.clientX - sx) > 8) moved = true; };
const up = (e) => {
if (!dragRef.current) return; dragRef.current = false;
const dx = e.clientX - sx;
if (dx <= -50) go(1); else if (dx >= 50) go(-1);
pauseUntil.current = performance.now() + 3200; // idle before auto-slide resumes
try { el.releasePointerCapture(e.pointerId); } catch (_) {}
};
el.addEventListener('pointerdown', down);
el.addEventListener('pointermove', move);
el.addEventListener('pointerup', up);
el.addEventListener('pointercancel', up);
return () => { el.removeEventListener('pointerdown', down); el.removeEventListener('pointermove', move); el.removeEventListener('pointerup', up); el.removeEventListener('pointercancel', up); };
}, [go]);
React.useEffect(() => { prevActive.current = active; }); // remember last active for wrap detection
return (
Real results, measured
See how brands across every industry grow with affiliate marketing on Involve.
{ hoverRef.current = true; }} onMouseLeave={() => { hoverRef.current = false; }}>
{CASES.map((c, i) => {
const rel = relOf(i, active);
const isActive = rel === 0;
// Wrap teleport: when a card jumps from one far edge to the other (Δrel = ±4),
// kill its slide transition for that frame so it repositions instantly instead of
// flying across the screen; it animates normally on every other step.
const wrapped = Math.abs(rel - relOf(i, prevActive.current)) > 2;
return (
1 || undefined}>
{/* frosted edge highlight — full CSS glass tuning is stage 2 */}
{c.stat} {c.unit}
{c.line}
);
})}
);
}
/* ---------------- Final CTA (Midnight anchor + two-door) ---------------- */
function FinalCTA({ emphasis = 'equal', hex = 3 }) {
// Bright CTA: the surface has eased back to warm after the stats section, so the
// brand motif + text are dark-on-light (bright mode). Logomark fades + scales in.
return (
Be part of our network
Whether you're a brand looking to grow or a creator ready to earn, Involve connects you to the partnerships that scale.
);
}
/* ---------------- Network morph CTA (pinned, scroll-scrubbed) ----------------
The Involve logomark (two overlapped dark hexagons) splits — large hex goes
left → Brand, small hex grows + goes right → Creator — flips, then morphs from
hexagon into the two-door pill CTA while the honeycomb blooms behind. The two
morphing elements ARE the real CTAs, so they stay clickable throughout.
Colour only appears once the hexes are apart, so Midnight + Ember never touch.
GSAP + ScrollTrigger (loaded globally). Desktop only; small screens / no-GSAP /
reduced-motion fall back to the static . (Degrade pass comes later.) */
const NM_HEX = 'polygon(50% 2%, 91.57% 26%, 91.57% 74%, 50% 98%, 8.43% 74%, 8.43% 26%)'; // regular hexagon: x = 50 ± 48·√3/2
const NM_PILL = 'polygon(50% 0%, 100% 0%, 100% 100%, 50% 100%, 0% 100%, 0% 0%)';
// The hexagon split-morph (brand-motion motif) on the BRIGHT CTA surface: the surface
// eases back to warm after the stats section, so the resting logomark is dark on light
// and door/gradient colours are the originals. Motion reduced + pin shortened so the
// final CTA arrives with less scroll.
const ENABLE_MORPH = true;
function NetworkMorphCTA({ emphasis = 'equal', hex = 3 }) {
const useMorph = React.useState(() =>
ENABLE_MORPH &&
typeof window !== 'undefined' && !!window.gsap && !!window.ScrollTrigger &&
!window.matchMedia('(max-width: 860px)').matches && !prefersReduced()
)[0];
const wrapRef = React.useRef(null);
const stageRef = React.useRef(null);
const aRef = React.useRef(null), bRef = React.useRef(null);
const aFill = React.useRef(null), bFill = React.useRef(null);
const aGrad = React.useRef(null), bGrad = React.useRef(null);
const aImg = React.useRef(null), bImg = React.useRef(null);
const aH = React.useRef(null), bH = React.useRef(null);
const aTxt = React.useRef(null), bTxt = React.useRef(null);
const headRef = React.useRef(null), labA = React.useRef(null), labB = React.useRef(null);
const fieldRef = React.useRef(null);
React.useEffect(() => {
if (!useMorph) return;
const gsap = window.gsap, ST = window.ScrollTrigger;
gsap.registerPlugin(ST);
const ctx = gsap.context(() => {
const OFF = 112; // half-gap between the two doors at rest
const raised = -window.innerHeight * 0.15; // lift the mark higher above centre during morph
const ASIZE = 240, BSIZE = 120; // start sizes (large hex / small hex)
const MID = '#0F1C2E'; // resting hex RIM colour — dark (bright-mode motif: dark logomark on the light CTA surface)
gsap.set([aRef.current, bRef.current], { clipPath: NM_HEX, borderRadius: 18, backgroundColor: MID, force3D: true });
// Logomark start: two OUTLINE hexes (dark rim from the door bg, page-colour
// interior via .nm-fill). Large hex centred; small hex sits upper-right per the
// brand mark — translate(31%,-98%) of its own box (re-tuned after the hexagons
// were narrowed to regular proportions; was 39% with the wider shape).
gsap.set(aRef.current, { xPercent: -50, yPercent: -50, x: 0, y: raised, width: ASIZE, height: ASIZE, zIndex: 5 });
gsap.set(bRef.current, { xPercent: 31, yPercent: -98, x: 0, y: raised, width: BSIZE, height: BSIZE, zIndex: 6 });
gsap.set([aGrad.current, bGrad.current], { autoAlpha: 0 }); // hero-CTA gradients, faded in on fill
gsap.set([aImg.current, bImg.current], { autoAlpha: 0 }); // image backdrops, shown during hex/spin only
gsap.set([aFill.current, bFill.current], { autoAlpha: 1 }); // page-colour interiors → outline look
gsap.set([aH.current, bH.current], { autoAlpha: 0 }); // "Advertiser"/"Publisher" hex labels
gsap.set([aTxt.current, bTxt.current], { autoAlpha: 0 });
gsap.set([headRef.current, labA.current, labB.current, fieldRef.current], { autoAlpha: 0 });
const tl = gsap.timeline({ defaults: { ease: 'none' }, paused: true });
// Pin and scrub are SPLIT triggers: the pin holds the stage from 'top top'; the scrub
// leads the pin by only LEAD px (starts at 'top %') so the logomark entrance
// begins once the hexagons are actually in view — NOT a full viewport early (which ran
// the motion before the mark appeared). Small lead keeps the entry from feeling abrupt.
// Progress driven raw in onUpdate (scrub-locked; no scrub smoothing, matches the wipe).
const LEAD = Math.round(window.innerHeight * 0.35);
ST.create({
trigger: wrapRef.current, pin: stageRef.current, pinSpacing: true,
start: 'top top', end: '+=1100', anticipatePin: 1, invalidateOnRefresh: true,
});
ST.create({
trigger: wrapRef.current, start: 'top 35%', end: '+=' + (LEAD + 1100),
invalidateOnRefresh: true,
// The doors are only the real, clickable CTAs once they've fully morphed.
// Until then (and on scrub-back) they're inert; `is-live` gates pointer
// events, the hero drop-shadow, and the hover effect.
onUpdate: (self) => {
tl.progress(self.progress);
const live = self.progress > 0.92;
[aRef.current, bRef.current].forEach((el) => {
if (el && el.classList.contains('is-live') !== live) {
el.classList.toggle('is-live', live);
if (!live) { el.classList.remove('nm-hovered'); gsap.set(el, { scale: 1 }); } // not hoverable until live
}
});
},
});
tl // 0 · entrance: the logomark fades in and drifts DOWN as we enter the
// frame — the hand-off from the stats video, which has faded out by now
.from([aRef.current, bRef.current], { autoAlpha: 0, y: '-=70', duration: 0.6, ease: 'power1.out' }, 0)
// 1 · split: large hex → left; small hex centres, grows to match, → right
.to(aRef.current, { x: -OFF, duration: 1 }, 0.6)
.to(bRef.current, { xPercent: -50, yPercent: -50, x: OFF, width: ASIZE, height: ASIZE, duration: 1 }, 0.6)
// 1b · fill with the hero-CTA gradients + image backdrops (only once apart)
.to([aGrad.current, bGrad.current], { autoAlpha: 1, duration: 0.5 }, 1.15)
.to([aImg.current, bImg.current], { autoAlpha: 1, duration: 0.5 }, 1.15)
.to([aFill.current, bFill.current], { autoAlpha: 0, duration: 0.5 }, 1.15)
// 1c · "Advertiser"/"Publisher" labels appear on the hexes
.to([aH.current, bH.current], { autoAlpha: 1, duration: 0.3 }, 1.3)
// 2 · spin — fade the hex labels out as the flip begins
.to([aH.current, bH.current], { autoAlpha: 0, duration: 0.3 }, 1.65)
.to([aRef.current, bRef.current], { rotationY: 360, duration: 0.6, ease: 'power2.inOut' }, 1.7) // exactly ONE round, eased so it reads as a single deliberate turn (not a continuous spin)
// 3 · silky hex → pill: clip eases to a rectangle, then we DROP the clip
// (a rectangular clip-path would override border-radius and keep sharp
// corners) so border-radius can round it into a proper hero-style pill.
.to([aRef.current, bRef.current], { clipPath: NM_PILL, duration: 0.45, ease: 'power2.inOut' }, 2.7)
.to([aImg.current, bImg.current], { autoAlpha: 0, duration: 0.5 }, 2.7) // image fades out → clean gradient CTA pill
.set([aRef.current, bRef.current], { clipPath: 'none' }, 3.15)
.to([aRef.current, bRef.current], { width: 200, height: 58, duration: 1.2, ease: 'power2.inOut' }, 2.7)
.to([aRef.current, bRef.current], { borderRadius: 9999, duration: 0.75, ease: 'power2.out' }, 3.15)
.to([aRef.current, bRef.current], { y: 0, duration: 1.2, ease: 'power1.inOut' }, 2.7)
// 4 · settle: CTA text, honeycomb, headline, audience labels
// (drop-shadow + clickability handled by the `is-live` class via onUpdate)
.to([aTxt.current, bTxt.current], { autoAlpha: 1, duration: 0.4 }, 3.2)
.to(fieldRef.current, { autoAlpha: 1, duration: 0.8 }, 3.2)
.to(headRef.current, { autoAlpha: 1, duration: 0.7 }, 3.6)
.to([labA.current, labB.current], { autoAlpha: 1, duration: 0.6 }, 3.9);
}, wrapRef);
// Hover (matches hero buttons): scale 1.02 via GSAP — must be GSAP, not CSS,
// since the doors' transform is GSAP-owned. Only fires when `is-live` lets
// pointer events through. (Ember's shadow-drop on hover is handled in CSS.)
// Hover like the hero: scale 1.02 via GSAP (the standalone CSS `scale`
// property isn't honoured alongside the GSAP-managed transform). The class
// also drives the ember shadow-drop in CSS. At rest the scrub timeline is
// idle, so the scale tween sticks.
const hov = (el, on) => { if (!el) return; el.classList.toggle('nm-hovered', on); gsap.to(el, { scale: on ? 1.02 : 1, duration: 0.18, ease: 'power2.out' }); };
const onAEnter = () => hov(aRef.current, true), onALeave = () => hov(aRef.current, false);
const onBEnter = () => hov(bRef.current, true), onBLeave = () => hov(bRef.current, false);
aRef.current.addEventListener('mouseenter', onAEnter); aRef.current.addEventListener('mouseleave', onALeave);
bRef.current.addEventListener('mouseenter', onBEnter); bRef.current.addEventListener('mouseleave', onBLeave);
// Recompute start/end once async content above (images, fonts) settles —
// otherwise the pin is measured against a too-short page and lands wrong.
const refresh = () => ST.refresh();
window.addEventListener('resize', refresh);
window.addEventListener('load', refresh);
if (document.fonts && document.fonts.ready) document.fonts.ready.then(refresh);
const timers = [setTimeout(refresh, 400), setTimeout(refresh, 1200)];
const aEl = aRef.current, bEl = bRef.current;
return () => {
window.removeEventListener('resize', refresh);
window.removeEventListener('load', refresh);
timers.forEach(clearTimeout);
if (aEl) { aEl.removeEventListener('mouseenter', onAEnter); aEl.removeEventListener('mouseleave', onALeave); }
if (bEl) { bEl.removeEventListener('mouseenter', onBEnter); bEl.removeEventListener('mouseleave', onBLeave); }
ctx.revert();
};
}, [useMorph]);
if (!useMorph) return {/* ref was missing — the old combined trigger fell back to the pin element, but the split scrub trigger needs the real wrap */}
);
}
/* ---------------- Footer (Midnight — shared anchor) ---------------- */
const FOOT = [
{ h: 'For Publishers', links: [['Overview','/partners/overview'],['Creators','/partners/content-creators/'],['Content sites','/partners/content-sites/'],['Affiliate & rewards sites','/partners/affiliate-rewards-sites/'],['App owners','/partners/app-owners/'],['Media buyers','/partners/media-buyers/'],['Networks & agencies','/partners/networks-agencies/'],['All Brands Directory','https://app.involve.asia/directory'],['Express Withdrawal','/partners/express-withdrawal/'],['API Overview','/partners/api-overview/']] },
{ h: 'For Advertisers', links: [['Overview','/advertisers/'],['How We Track','/advertisers/how-we-track/'],['Partner Discovery','/advertisers/partner-discovery/'],['Automation','/advertisers/automation/'],['Case Studies','/advertisers/case-studies/']] },
{ h: 'Top Programs', links: [['Shopee Affiliate','/blog/shopee-affiliate-program/'],['Lazada Affiliate','/blog/lazada-affiliate-program/'],['Zalora Affiliate','/blog/zalora-affiliate-program/'],['Sephora Affiliate','/blog/sephora-affiliate-program/'],['See all programs','/top-affiliate-programs/']] },
{ h: 'Company', links: [['About Us','/about/'],['Careers','https://career.involve.asia/'],['Blog','/blog/'],['Support','https://helpcentre.involve.asia/'],['Release Notes','/release-notes/'],['Terms & Privacy','/terms-conditions/']] },
];
const SOCIAL = [['Facebook','https://www.facebook.com/involveasia'],['Twitter','https://twitter.com/InvolveAsia'],['Instagram','https://www.instagram.com/involveasia/'],['LinkedIn','https://www.linkedin.com/company/involve-asia/']];
function Footer() {
const year = new Date().getFullYear();
return (
The affiliate marketing platform connecting advertisers with creators and publishers across Asia.
{FOOT.map(col => (
))}
© 2014–{year} Involve Asia Technologies Sdn Bhd · 201201032669 (1017157-V)
🌐 English
);
}
Object.assign(window, { StatsSection, CaseStudies, FinalCTA, Footer });
/* ===== ia-app.jsx ===== */
// ia-app.jsx — Root: assembles sections, smooth scroll (Lenis), scroll-reveal, Tweaks.
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
"emphasis": "equal",
"heroDark": false,
"hex": 3,
"smooth": true
}/*EDITMODE-END*/;
const EMPH_LABELS = { 'Equal': 'equal', 'Publisher': 'pub', 'Advertiser': 'adv' };
const EMPH_REV = { equal: 'Equal', pub: 'Publisher', adv: 'Advertiser' };
const prefersReduced = () => window.matchMedia('(prefers-reduced-motion: reduce)').matches;
/* ---------------- Hexagon cursor follower ----------------
A small #D2D2CC hexagon trails the real cursor with an eased lag (GSAP quickTo).
Over any clickable element it rotates 90°, enlarges and dims. Extras for polish:
fades in on first move / out when the pointer leaves the window, a subtle click
pulse, and it's disabled on touch + reduced-motion (and never blocks clicks). The
native cursor stays visible — the hexagon is a trailing accent, not a replacement. */
const CURSOR_CLICKABLE = 'a,button,[role="button"],input,textarea,select,label,summary,.nm-door,.offer-card,.offer-rail-tab,[data-cursor="link"]';
function HexCursor() {
const ref = React.useRef(null);
React.useEffect(() => {
const el = ref.current, gsap = window.gsap;
if (!el || !gsap) return;
if (!window.matchMedia('(pointer: fine)').matches || prefersReduced()) return; // skip on touch / reduced-motion
gsap.set(el, { xPercent: -50, yPercent: -50, opacity: 0 });
const xTo = gsap.quickTo(el, 'x', { duration: 0.36, ease: 'power3' }); // snappier lag
const yTo = gsap.quickTo(el, 'y', { duration: 0.36, ease: 'power3' });
const poly = el.querySelector('polygon');
let shown = false, isHover = false;
const base = () => (isHover ? 0.45 : 0.9);
const onMove = (e) => {
xTo(e.clientX); yTo(e.clientY);
if (!shown) { shown = true; gsap.to(el, { opacity: base(), duration: 0.3 }); }
const over = !!(e.target.closest && e.target.closest(CURSOR_CLICKABLE));
if (over !== isHover) {
isHover = over;
gsap.to(el, { rotation: over ? 180 : 0, scale: over ? 1.7 : 1, opacity: base(), duration: 0.32, ease: 'power3' });
// over a clickable: a light fill → soft adaptive highlight, kept low so text behind stays readable
gsap.to(poly, { fillOpacity: over ? 0.22 : 0, duration: 0.32, ease: 'power3' });
}
};
const onLeaveWin = () => gsap.to(el, { opacity: 0, duration: 0.25 });
const onEnterWin = () => { if (shown) gsap.to(el, { opacity: base(), duration: 0.25 }); };
const onDown = () => gsap.to(el, { scale: isHover ? 1.45 : 0.7, duration: 0.12 });
const onUp = () => gsap.to(el, { scale: isHover ? 1.7 : 1, duration: 0.2, ease: 'power2' });
window.addEventListener('mousemove', onMove);
document.addEventListener('mouseleave', onLeaveWin);
document.addEventListener('mouseenter', onEnterWin);
window.addEventListener('mousedown', onDown);
window.addEventListener('mouseup', onUp);
return () => {
window.removeEventListener('mousemove', onMove);
document.removeEventListener('mouseleave', onLeaveWin);
document.removeEventListener('mouseenter', onEnterWin);
window.removeEventListener('mousedown', onDown);
window.removeEventListener('mouseup', onUp);
};
}, []);
return (
);
}
/* Back-to-top sticky CTA (Figma 1542:59021) — a translucent-grey halo with a white inner
circle and a muted up-chevron, fixed bottom-right. Shows ONLY when the user is (a) past
the hero AND (b) scrolling up; hides on scroll-down or back in the hero. Subtle fade +
rise on enter/exit. Reads scroll from Lenis (falls back to window scroll). */
function BackToTop() {
const [show, setShow] = React.useState(false);
React.useEffect(() => {
const hero = document.getElementById('hero');
let last = -1;
// Poll the scroll position (Lenis owns scrolling, so native 'scroll' events don't fire,
// and Lenis may init after this mounts) — reading lenis.scroll each tick is timing-proof.
const id = setInterval(() => {
const l = window.__lenis;
const y = (l && typeof l.scroll === 'number') ? l.scroll : (window.scrollY || window.pageYOffset || 0);
if (last < 0) { last = y; return; }
const heroBottom = hero ? hero.offsetTop + hero.offsetHeight : window.innerHeight;
const pastHero = y > heroBottom - 120;
if (y > last + 3) setShow(false); // scrolling down → hide
else if (y < last - 3 && pastHero) setShow(true); // scrolling up, past hero → show
else if (!pastHero) setShow(false); // back in the hero → hide
last = y;
}, 100);
return () => clearInterval(id);
}, []);
const toTop = () => {
if (window.__lenis) window.__lenis.scrollTo(0, { duration: 0.9 });
else window.scrollTo({ top: 0, behavior: 'smooth' });
};
return (
);
}
function App() {
const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
const { emphasis, hex } = t;
React.useEffect(() => { document.documentElement.style.setProperty('--hex', hex); }, [hex]);
// ---- Lenis inertia smooth-scroll (off under reduced-motion or tweak) ----
React.useEffect(() => {
if (!t.smooth || prefersReduced() || !window.Lenis) return;
const lenis = new window.Lenis({ duration: 1.05, smoothWheel: true, wheelMultiplier: 1, touchMultiplier: 1.4 });
window.__lenis = lenis; // handle for programmatic scroll (dev/testing)
const gsap = window.gsap, ST = window.ScrollTrigger;
let raf = null, tick = null;
if (gsap && ST) {
// Canonical Lenis ⇄ ScrollTrigger integration: one clock. Driving Lenis
// from GSAP's ticker (instead of a separate rAF) lets ScrollTrigger.refresh()
// measure trigger positions reliably — a separate rAF made Lenis fight ST's
// measure-time scroll-to-0, which mis-placed the pinned morph section.
lenis.on('scroll', ST.update);
tick = (time) => lenis.raf(time * 1000);
gsap.ticker.add(tick);
gsap.ticker.lagSmoothing(0);
} else {
const loop = (time) => { lenis.raf(time); raf = requestAnimationFrame(loop); };
raf = requestAnimationFrame(loop);
}
const onClick = (e) => {
const a = e.target.closest && e.target.closest('a[href^="#"]');
if (!a) return;
const id = a.getAttribute('href');
if (id.length < 2) return;
const el = document.querySelector(id);
if (el) { e.preventDefault(); lenis.scrollTo(el, { offset: -80, duration: 1.1 }); }
};
document.addEventListener('click', onClick);
return () => {
if (tick && gsap) gsap.ticker.remove(tick);
if (raf) cancelAnimationFrame(raf);
document.removeEventListener('click', onClick);
lenis.destroy();
};
}, [t.smooth]);
// ---- Scroll-reveal: fade/translate-up as elements enter view ----
React.useEffect(() => {
const els = Array.from(document.querySelectorAll('[data-reveal]'));
if (prefersReduced()) { els.forEach(e => e.classList.add('in')); return; }
const io = new IntersectionObserver((ents) => {
ents.forEach(en => { if (en.isIntersecting) { en.target.classList.add('in'); io.unobserve(en.target); } });
}, { threshold: 0.12, rootMargin: '0px 0px -7% 0px' });
els.forEach(e => io.observe(e));
return () => io.disconnect();
}, []);
// ---- Scrubbed hero → trust-strip handoff (scroll-linked, eased, lagging) ----
React.useEffect(() => {
const hero = document.getElementById('hero');
const content = document.querySelector('.hero-handoff');
const trust = document.querySelector('.trust-handoff');
const video = document.querySelector('.hero-video');
if (!hero || !content || !trust) return;
if (prefersReduced()) return;
// Rest opacity comes from CSS so the Safari @supports fallback (lower, blend-free) flows through.
const baseVidOpacity = video ? (parseFloat(getComputedStyle(video).opacity) || 0.32) : 0.32;
const clamp = (v, a, b) => Math.max(a, Math.min(b, v));
const smoothstep = (t) => t * t * (3 - 2 * t); // eased, not linear
let cur = 0, target = 0; // hero exit progress
let curE = 0, targetE = 0; // trust strip viewport-enter progress
let raf = null, running = false;
const computeTargets = () => {
const scrolled = window.scrollY || window.pageYOffset || 0;
const span = Math.max(1, hero.offsetHeight * 0.8); // hero resolves over ~80% of its height
target = clamp(scrolled / span, 0, 1);
const r = trust.getBoundingClientRect();
const vh = window.innerHeight || 1;
targetE = (vh - r.top) / (vh * 0.85); // 0 as it touches the bottom edge, grows as it rises
};
const applyHero = (p) => {
// Hero content drifts up and fades as it leaves.
content.style.transform = `translate3d(0, ${(-p * 64).toFixed(2)}px, 0)`;
content.style.opacity = (1 - p).toFixed(3);
// Background video drifts DOWN and fades out — gone by the time the trust strip arrives.
if (video) {
const vp = clamp(p * 1.15, 0, 1);
video.style.transform = `translate3d(0, ${(vp * 150).toFixed(1)}px, 0)`;
video.style.opacity = (baseVidOpacity * (1 - vp)).toFixed(3); // rest at CSS base (.32 Chrome / .14 Safari), fade to 0 on scroll
}
};
const applyTrust = (e) => {
// Rises from below, zooms slightly PAST normal as it arrives, then eases back to 1.0 on further scroll.
const rise = clamp(e / 0.7, 0, 1); // arrival: rise + fade + initial grow
const settle = clamp((e - 0.7) / 0.6, 0, 1); // afterwards: zoom overshoot relaxes to normal
const scale = 0.96 + smoothstep(rise) * 0.085 - smoothstep(settle) * 0.045; // 0.96 → ~1.045 peak → 1.0
const y = (1 - smoothstep(rise)) * 72;
const op = smoothstep(clamp(e / 0.5, 0, 1));
trust.style.transform = `translate3d(0, ${y.toFixed(2)}px, 0) scale(${scale.toFixed(4)})`;
trust.style.opacity = op.toFixed(3);
};
const tick = () => {
cur += (target - cur) * 0.12; // inertia: lags the scroll, feels weighted
curE += (targetE - curE) * 0.12;
if (Math.abs(target - cur) < 0.0006 && Math.abs(targetE - curE) < 0.0006) {
cur = target; curE = targetE; running = false;
}
applyHero(smoothstep(clamp(cur, 0, 1)));
applyTrust(curE);
if (running) raf = requestAnimationFrame(tick);
};
const kick = () => { if (!running) { running = true; raf = requestAnimationFrame(tick); } };
const onScroll = () => { computeTargets(); kick(); };
computeTargets();
cur = target; curE = targetE; // no entrance jump on load
applyHero(smoothstep(clamp(cur, 0, 1)));
applyTrust(curE);
window.addEventListener('scroll', onScroll, { passive: true });
window.addEventListener('resize', onScroll);
return () => {
window.removeEventListener('scroll', onScroll);
window.removeEventListener('resize', onScroll);
cancelAnimationFrame(raf);
content.style.transform = ''; content.style.opacity = '';
trust.style.transform = ''; trust.style.opacity = '';
if (video) { video.style.transform = ''; video.style.opacity = ''; }
};
}, []);
// ---- Continuous warm-50 → Midnight surface transition (brief Change 3) ----
// One scroll-tied interpolation drives a few root custom properties; CSS does the
// rest (no per-frame JS over many elements). Starts as the stats section rises into
// view and holds Midnight all the way down through the final CTA into the footer.
// Text/elements invert in lockstep via --ink / --ink-soft; --darkp (0..1) drives the
// nav logo + chrome crossfade. prefers-reduced-motion snaps instead of easing.
React.useEffect(() => {
// Desktop uses the honeycomb wipe for this boundary (stats owns a real Midnight bg
// there); this continuous lerp remains ONLY as the mobile cross-fade / reduced-motion
// snap fallback, per the motion spec.
if (hexWipeEnabled()) return;
const root = document.documentElement;
const WARM = [248, 250, 250], MID = [15, 28, 46]; // --warm-50 (#F8FAFA) → --midnight
const INK0 = [17, 17, 16], INK1 = [248, 250, 250]; // --warm-900 → --warm-50 (#F8FAFA)
const SOFT0 = [75, 75, 70], SOFT1 = [210, 210, 204]; // --warm-600 → --warm-300
const ADV0 = [61, 90, 128], ADV1 = [146, 175, 214]; // stat 'adv' accent: --midnight-light → #92AFD6 (readable on bright + dark)
const lerp = (a, b, t) => a.map((v, i) => Math.round(v + (b[i] - v) * t));
const rgb = (a) => `rgb(${a[0]}, ${a[1]}, ${a[2]})`;
const ease = (t) => t * t * (3 - 2 * t); // smoothstep — gentle in/out, no abrupt edges
const reduce = prefersReduced();
let last = -1;
const apply = (p) => {
root.style.setProperty('--surface', rgb(lerp(WARM, MID, p)));
root.style.setProperty('--ink', rgb(lerp(INK0, INK1, p)));
root.style.setProperty('--ink-soft', rgb(lerp(SOFT0, SOFT1, p)));
root.style.setProperty('--stat-adv', rgb(lerp(ADV0, ADV1, p)));
root.style.setProperty('--darkp', p.toFixed(3));
};
const compute = () => {
const s = document.getElementById('stats');
if (!s) { if (last !== 0) { last = 0; apply(0); } return; }
const r = s.getBoundingClientRect();
const vh = window.innerHeight || 1;
// Dark ONLY while the stats section holds the viewport (the "Mercury moment"),
// then ease back to bright so the CTA below returns to light. The section stays
// BRIGHT (matching the sections above) as it enters from the bottom, and only
// transitions to Midnight once its top is scrolled well up into view — so the
// darkening reads as "you've arrived at this section", not a premature dark band.
const pIn = Math.max(0, Math.min(1, (vh * 0.6 - r.top) / (vh * 0.5))); // enter → dark (held bright until scrolled in)
const pOut = Math.max(0, Math.min(1, r.bottom / (vh * 1.0))); // leave → bright
const p = Math.min(pIn, pOut);
const pe = reduce ? (p > 0.5 ? 1 : 0) : ease(p);
if (Math.abs(pe - last) < 0.0015) return; // skip redundant repaints
last = pe;
apply(pe);
};
compute();
// Drive off the Lenis smooth-scroll clock when present, so the colour scrubs in
// lockstep with the inertia scroll (buttery, no lag). Fall back to window scroll
// (covers smooth-off / reduced-motion).
const lenis = window.__lenis;
if (lenis && lenis.on) lenis.on('scroll', compute);
let raf = 0;
const onScroll = () => { if (!raf) raf = requestAnimationFrame(() => { raf = 0; compute(); }); };
window.addEventListener('scroll', onScroll, { passive: true });
window.addEventListener('resize', onScroll);
return () => {
if (lenis && lenis.off) lenis.off('scroll', compute);
window.removeEventListener('scroll', onScroll);
window.removeEventListener('resize', onScroll);
if (raf) cancelAnimationFrame(raf);
};
}, []);
const gsTone = emphasis === 'pub' ? 'pub' : emphasis === 'adv' ? 'adv' : 'midnight';
// Honeycomb-wipe mode (desktop + motion OK): the html class scopes the stats section's
// Midnight background + inverted text vars; fallback modes keep the surface-lerp look.
const wipeOn = React.useState(() => hexWipeEnabled())[0];
React.useEffect(() => {
document.documentElement.classList.toggle('hexwipe-on', wipeOn);
return () => document.documentElement.classList.remove('hexwipe-on');
}, [wipeOn]);
return (
setTweak('emphasis', EMPH_LABELS[v])} />
Equal = two distinct doors. Publisher fills Ember; Advertiser fills Midnight-Light.
setTweak('smooth', v)} />
setTweak('heroDark', v)} />
setTweak('hex', v)} />
);
}
ReactDOM.createRoot(document.getElementById('root')).render(