);
}
// ── Text mode — CSS-rendered wordmark, supports any color ─────────
const map = {
sm: { word: 18, sub: 8, gap: 1 },
md: { word: 22, sub: 9, gap: 1 },
lg: { word: 30, sub: 11, gap: 2 },
xl: { word: 52, sub: 16, gap: 3 },
};
const s = map[size] || map.md;
const fg = color || "var(--text)";
const sub = subColor || "var(--text-muted, #888)";
return (
axious{withAccentDot && .}
Creative Studio
);
}
/* ─────────────────────────────────────────────────────────────────
AnimatedCount — counts from 0 → value when in view.
───────────────────────────────────────────────────────────────── */
function AnimatedCount({ to = 100, duration = 1500, prefix = "", suffix = "", decimals = 0 }) {
const [v, setV] = useState(0);
const [ref, shown] = useReveal();
useEffect(() => {
if (!shown) return;
if (prefersReducedMotion()) { setV(to); return; }
const start = performance.now();
let raf;
const tick = (now) => {
const t = Math.min(1, (now - start) / duration);
const eased = 1 - Math.pow(1 - t, 3); // ease-out cubic
setV(to * eased);
if (t < 1) raf = requestAnimationFrame(tick);
};
raf = requestAnimationFrame(tick);
return () => cancelAnimationFrame(raf);
}, [shown, to, duration]);
const display = decimals ? v.toFixed(decimals) : Math.round(v).toLocaleString();
return {prefix}{display}{suffix};
}
/* ─────────────────────────────────────────────────────────────────
StatsStrip — three big numbers under the hero CTA cluster.
───────────────────────────────────────────────────────────────── */
function StatsStrip() {
const stats = [
{ value: 14, suffix: "+", label: "Sites launched" },
{ value: 5.0, suffix: "★", label: "Google rating", decimals: 1 },
{ value: 100, suffix: "%", label: "Hand-coded" },
];
return (