Copy Build a live-collaboration hero with Tailwind CSS. Pair a concise product headline and two CTAs with a large canvas mockup containing sticky notes, connectors, participant avatars, and labeled remote cursors. Add a presence line and a compact activity ticker. Use JavaScript to move the cursors gently around the canvas, cycle the activity message, and pause animation when reduced motion is preferred.<section class="overflow-hidden bg-[#f4f1eb] px-6 py-16 lg:py-24"><div class="mx-auto grid max-w-6xl items-center gap-12 lg:grid-cols-[0.8fr_1.2fr]"><div><div class="flex items-center gap-2 text-sm text-neutral-600"><span class="flex -space-x-2"><span class="h-7 w-7 rounded-full border-2 border-[#f4f1eb] bg-violet-300"></span><span class="h-7 w-7 rounded-full border-2 border-[#f4f1eb] bg-amber-300"></span><span class="h-7 w-7 rounded-full border-2 border-[#f4f1eb] bg-emerald-300"></span></span>12 teammates creating now</div><h1 class="mt-6 text-5xl font-semibold leading-[0.95] tracking-[-0.05em] text-neutral-950 sm:text-6xl">Ideas move faster when everyone can touch them.</h1><p class="mt-6 max-w-lg text-lg leading-8 text-neutral-600">A shared visual workspace for workshops, decisions, and the thinking between them.</p><div class="mt-8 flex flex-wrap gap-3"><a href="#" class="rounded-full bg-neutral-950 px-5 py-3 text-sm font-medium text-white">Start a canvas</a><a href="#" class="rounded-full border border-neutral-300 px-5 py-3 text-sm font-medium text-neutral-800">Watch the tour</a></div><p id="canvasActivity" class="mt-8 text-sm text-neutral-500" aria-live="polite">Maya grouped 3 research notes</p></div><div id="collabCanvas" class="relative aspect-[4/3] overflow-hidden rounded-[2rem] border border-black/10 bg-white shadow-2xl shadow-neutral-900/10"><div class="absolute inset-0 opacity-40" style="background-image:radial-gradient(#a3a3a3 1px,transparent 1px);background-size:24px 24px"></div><div class="absolute left-[10%] top-[14%] w-44 rotate-[-3deg] rounded-xl bg-amber-200 p-4 shadow-md"><b class="text-sm">Customer signal</b><p class="mt-2 text-xs leading-5 text-amber-950/65">Teams need a faster way to converge after research.</p></div><div class="absolute right-[12%] top-[22%] w-40 rotate-2 rounded-xl bg-violet-200 p-4 shadow-md"><b class="text-sm">Opportunity</b><p class="mt-2 text-xs leading-5 text-violet-950/65">Turn patterns into a shared decision.</p></div><div class="absolute bottom-[16%] left-[28%] w-48 rounded-xl border-2 border-emerald-400 bg-emerald-50 p-4"><p class="text-xs font-semibold uppercase tracking-wider text-emerald-700">Next step</p><p class="mt-2 text-sm">Prototype the synthesis view</p></div><div data-cursor class="absolute left-[26%] top-[35%] transition-all duration-1000"><span class="block text-xl text-violet-600">↖</span><span class="ml-3 rounded-full bg-violet-600 px-2 py-1 text-[10px] text-white">Maya</span></div><div data-cursor class="absolute bottom-[22%] right-[22%] transition-all duration-1000"><span class="block text-xl text-blue-600">↖</span><span class="ml-3 rounded-full bg-blue-600 px-2 py-1 text-[10px] text-white">Jon</span></div></div></div></section>var cursors = [].slice.call(document.querySelectorAll("[data-cursor]")); var activity = document.getElementById("canvasActivity"); var messages = ["Maya grouped 3 research notes", "Jon connected an opportunity", "Priya opened the launch workshop", "The team reached a decision"]; var tick = 0; if (!window.matchMedia("(prefers-reduced-motion: reduce)").matches) { setInterval(function () { cursors.forEach(function (cursor, index) { cursor.style.transform = "translate(" + (((tick + index * 2) % 5) * 7 - 12) + "px," + (((tick + index) % 4) * 6 - 9) + "px)"; }); tick += 1; activity.textContent = messages[tick % messages.length]; }, 1800); } 