// SignDrop hero + animated mini-document demo using the real handwritten signature.
const HERO_BG = "#0a1ab5"; // approved vivid ultramarine
const HERO_BG2 = "#0c1fcb";
const ACCENT_BLUE = "#1a3df0";
// ---- Mini document with the real signature dropping onto it ----
function MiniDocDemo({ width = 380, height = 480, sigSrc, labels }) {
const src = sigSrc || (typeof window !== "undefined" && window.SD_SIGNATURE) || "assets/signature-navy.png";
const [phase, setPhase] = React.useState(0); // 0 hover, 1 lower, 2 placed, 3 reset
React.useEffect(() => {
const t = setInterval(() => setPhase((p) => (p + 1) % 4), 1700);
return () => clearInterval(t);
}, []);
const sigY = phase === 0 ? -96 : phase === 1 ? -8 : phase === 2 ? 0 : -130;
const sigOpacity = phase === 3 ? 0 : 1;
const sigScale = phase === 0 ? 1.06 : 1;
const placed = phase === 2;
const lineCol = "#d8d4ca";
return (
AGREEMENT.PDF1 / 3
Service Agreement
{[0.95, 0.88, 0.92, 0.7, 0.9, 0.82, 0.6].map((w, i) => (
))}
{[0.85, 0.7, 0.55].map((w, i) => (
))}
{/* signature line */}
{/* the real signature image dropping in */}
{/* drop target while lowering */}
{(phase === 0 || phase === 1) && (
)}
{/* placed toast */}
✓ {labels.signed}
);
}
// ---- Cursor-trailing signature stroke ----
function SignatureCursor({ containerRef, color = "#fff" }) {
const canvasRef = React.useRef(null);
const pointsRef = React.useRef([]);
React.useEffect(() => {
const cnt = containerRef.current, cv = canvasRef.current;
if (!cnt || !cv) return;
const ctx = cv.getContext("2d");
const dpr = window.devicePixelRatio || 1;
function resize() {
const r = cnt.getBoundingClientRect();
cv.width = r.width * dpr; cv.height = r.height * dpr;
cv.style.width = r.width + "px"; cv.style.height = r.height + "px";
ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
}
resize();
window.addEventListener("resize", resize);
function onMove(e) {
const r = cnt.getBoundingClientRect();
pointsRef.current.push({ x: e.clientX - r.left, y: e.clientY - r.top, t: performance.now() });
}
cnt.addEventListener("pointermove", onMove);
let raf;
function draw() {
const r = cnt.getBoundingClientRect();
ctx.clearRect(0, 0, r.width, r.height);
const now = performance.now();
const pts = pointsRef.current.filter((p) => now - p.t < 1500);
pointsRef.current = pts;
if (pts.length > 1) {
ctx.lineCap = "round"; ctx.lineJoin = "round";
for (let i = 1; i < pts.length; i++) {
const a = pts[i - 1], b = pts[i];
const age = (now - b.t) / 1500;
ctx.strokeStyle = color; ctx.globalAlpha = Math.max(0, 1 - age);
ctx.lineWidth = 3 * (1 - age) + 0.6;
ctx.beginPath(); ctx.moveTo(a.x, a.y); ctx.lineTo(b.x, b.y); ctx.stroke();
}
ctx.globalAlpha = 1;
}
raf = requestAnimationFrame(draw);
}
raf = requestAnimationFrame(draw);
return () => { cancelAnimationFrame(raf); cnt.removeEventListener("pointermove", onMove); window.removeEventListener("resize", resize); };
}, []);
return ;
}
// ---- Fixed header (sticky on scroll) ----
function Header({ t, lang, setLang }) {
const L = window.SD_LINKS;
const [scrolled, setScrolled] = React.useState(false);
React.useEffect(() => {
const onScroll = () => setScrolled(window.scrollY > 36);
onScroll();
window.addEventListener("scroll", onScroll, { passive: true });
return () => window.removeEventListener("scroll", onScroll);
}, []);
return (
);
}
// ---- Hero ----
function Hero({ t, lang, setLang }) {
const wrapRef = React.useRef(null);
const L = window.SD_LINKS;
return (
{/* content */}
{/* LEFT — clean message */}
{(() => {
const ua = (typeof navigator !== "undefined" ? navigator.userAgent : "") || "";
const isMac = /Mac|iPod|iPhone|iPad/.test(ua) && !ua.includes("Windows");
const isLinux = /Linux/.test(ua) && !/Android/.test(ua) && !isMac;
const btnLabel = isMac ? t.hero.btnMac : isLinux ? t.hero.btnLinux : t.hero.btnWin;
const btnHref = isMac ? L.mac : isLinux ? L.linux : L.exe;
return (
<>
{t.hero.h1a}{" "}
{t.hero.h1b}
{t.hero.sub}
{/* 2×2 grid: buttons + text links share column widths */}
);
})()}
{/* RIGHT — badge above, document, playful hint below */}
{t.hero.badge}
{t.hero.hint}
{t.facts.map((f, i) => (
{f}
{i === t.facts.length - 1 && t.osNote && (
{t.osNote}
)}
))}
{["ru", "en"].map((l) => (
))}
);
}
Object.assign(window, { Header, Hero, MiniDocDemo, SignatureCursor, LangSwitch, HERO_BG, HERO_BG2, ACCENT_BLUE });