/* Nafaarts Development — Landing Page App */
const { useState, useEffect, useRef } = React;
// Icons (simple line SVGs)
const Icon = {
web: () =>
,
mobile: () =>
,
consult: () =>
,
arrow: () =>
,
arrowOut: () =>
};
function Nav() {
const [scrolled, setScrolled] = useState(false);
useEffect(() => {
const onScroll = () => {
const hero = document.querySelector(".hero");
const threshold = hero ? hero.offsetTop + hero.offsetHeight - 80 : window.innerHeight - 80;
setScrolled(window.scrollY > threshold);
};
onScroll();
window.addEventListener("scroll", onScroll, { passive: true });
return () => window.removeEventListener("scroll", onScroll);
}, []);
return (
);
}
// Smooth, slower section-snap controller. Intercepts wheel events while the
// user is inside the Hero/Services/Process zone and animates the scroll with
// a ~1100ms easing curve. Beyond Process, native scrolling resumes so CTA &
// Footer behave normally.
function SnapScroller() {
useEffect(() => {
const getTargets = () => [
document.querySelector(".hero"),
document.querySelector("#services"),
document.querySelector("#process"),
].filter(Boolean);
let animating = false;
let lastWheel = 0;
const easeInOutCubic = (t) =>
t < 0.5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) / 2;
const smoothScrollTo = (y, dur = 1100) => {
const startY = window.scrollY;
const dy = y - startY;
if (Math.abs(dy) < 2) return;
const t0 = performance.now();
animating = true;
const step = (now) => {
const elapsed = now - t0;
const t = Math.min(elapsed / dur, 1);
window.scrollTo(0, startY + dy * easeInOutCubic(t));
if (t < 1) requestAnimationFrame(step);
else setTimeout(() => { animating = false; }, 80);
};
requestAnimationFrame(step);
};
const currentIndex = (targets) => {
const y = window.scrollY + 4;
let idx = 0;
for (let i = 0; i < targets.length; i++) {
if (targets[i].offsetTop <= y + 30) idx = i;
}
return idx;
};
const inSnapZone = (targets) => {
const last = targets[targets.length - 1];
const lastEnd = last.offsetTop + last.offsetHeight;
// Active while the user is anywhere from page top through ~70% into the
// last snap section. Past that, hand off to native scroll.
return window.scrollY < lastEnd - 80;
};
const onWheel = (e) => {
if (window.innerWidth <= 860) return;
if (animating) { e.preventDefault(); return; }
const targets = getTargets();
if (targets.length === 0) return;
if (!inSnapZone(targets)) return;
const now = performance.now();
if (now - lastWheel < 220) { e.preventDefault(); return; }
lastWheel = now;
const dir = e.deltaY > 0 ? 1 : -1;
const cur = currentIndex(targets);
let next = cur + dir;
if (next >= targets.length) {
// Past last snap target: scroll to the section AFTER the snap zone
const after = document.querySelector("#contact");
if (after) {
e.preventDefault();
smoothScrollTo(after.offsetTop, 1100);
}
return;
}
if (next < 0) next = 0;
e.preventDefault();
smoothScrollTo(targets[next].offsetTop, 1100);
};
const onKey = (e) => {
if (window.innerWidth <= 860) return;
const targets = getTargets();
if (targets.length === 0 || !inSnapZone(targets)) return;
if (animating) { e.preventDefault(); return; }
const downKeys = ["ArrowDown", "PageDown", " "];
const upKeys = ["ArrowUp", "PageUp"];
let dir = 0;
if (downKeys.includes(e.key)) dir = 1;
else if (upKeys.includes(e.key)) dir = -1;
else return;
const cur = currentIndex(targets);
let next = cur + dir;
if (next < 0) next = 0;
e.preventDefault();
if (next >= targets.length) {
const after = document.querySelector("#contact");
if (after) smoothScrollTo(after.offsetTop, 1100);
return;
}
smoothScrollTo(targets[next].offsetTop, 1100);
};
window.addEventListener("wheel", onWheel, { passive: false });
window.addEventListener("keydown", onKey);
return () => {
window.removeEventListener("wheel", onWheel);
window.removeEventListener("keydown", onKey);
};
}, []);
return null;
}
// Fixed circular control in the bottom-left of the viewport.
// Behaviour: scrolls to the next section, then flips to a back-to-top control
// once the user is in the bottom 15% of the page.
function ScrollControl() {
const [mode, setMode] = useState("next");
useEffect(() => {
const update = () => {
const winH = window.innerHeight;
const docH = document.documentElement.scrollHeight;
const remaining = docH - winH - window.scrollY;
setMode(remaining < winH * 0.4 ? "top" : "next");
};
update();
window.addEventListener("scroll", update, { passive: true });
window.addEventListener("resize", update);
return () => {
window.removeEventListener("scroll", update);
window.removeEventListener("resize", update);
};
}, []);
const easeInOutCubic = (t) =>
t < 0.5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) / 2;
const animateScroll = (y, dur = 1100) => {
const startY = window.scrollY;
const dy = y - startY;
const t0 = performance.now();
const step = (now) => {
const elapsed = now - t0;
const t = Math.min(elapsed / dur, 1);
window.scrollTo(0, startY + dy * easeInOutCubic(t));
if (t < 1) requestAnimationFrame(step);
};
requestAnimationFrame(step);
};
const onClick = () => {
if (mode === "top") {
animateScroll(0, 1300);
return;
}
// Find first section whose top is below current viewport top
const anchors = [
document.querySelector(".hero"),
document.querySelector("#services"),
document.querySelector("#process"),
document.querySelector("#contact"),
document.querySelector(".footer"),
].filter(Boolean);
const y = window.scrollY;
for (const a of anchors) {
if (a.offsetTop > y + 30) {
animateScroll(a.offsetTop, 1100);
return;
}
}
// Fallback: scroll to bottom
animateScroll(document.documentElement.scrollHeight, 1100);
};
return (
);
}
function Hero() {
return (
We build resilient web & mobile products from the western edge of Indonesia.
Nafaarts Development is a software studio and IT consultancy. We partner with founders, government, and enterprise teams to ship custom applications that survive scale — not slide decks.
);
}
// Sweeps a soft fade across the footer wordmark from left to right
// as it scrolls into view — animated CSS mask gradient.
function FadeInWordmark({ children }) {
const elRef = useRef(null);
const [p, setP] = useState(0);
useEffect(() => {
let rafId = 0;
let last = -1;
const update = () => {
const el = elRef.current;
if (!el) return;
const rect = el.getBoundingClientRect();
const winH = window.innerHeight;
// Generous range so the sweep completes well before the user reaches the bottom.
const start = winH * 1.2;
const end = winH * 0.65;
const r = rect.top;
let prog = (start - r) / Math.max(1, start - end);
prog = Math.max(0, Math.min(1, prog));
if (Math.abs(prog - last) > 0.005) {
last = prog;
setP(prog);
}
rafId = requestAnimationFrame(update);
};
rafId = requestAnimationFrame(update);
return () => cancelAnimationFrame(rafId);
}, []);
// Reveal from 0% to 150% with a 20% soft edge — ensures the wordmark is
// fully opaque at p=1 (no residual fade at the right edge).
const reveal = p * 150;
const fade = Math.max(0, reveal - 20);
const grad = `linear-gradient(to right, black 0%, black ${fade}%, transparent ${reveal}%)`;
const maskStyle = { WebkitMaskImage: grad, maskImage: grad };
return (
{children}
);
}
function Services() {
const list = [
{
n: "01",
icon: ,
title: "Custom Web Applications",
desc: "Production-grade dashboards, SaaS platforms, e-commerce, and internal tools. Built on TypeScript, React, and Postgres — designed to last beyond the launch sprint.",
stack: ["Next.js", "TypeScript", "Postgres", "Tailwind", "Redis", "AWS"]
},
{
n: "02",
icon: ,
title: "Mobile Applications",
desc: "Native-feeling iOS and Android apps with React Native and Flutter. Offline-first architecture, smooth animations, and a release pipeline you can hand to your team.",
stack: ["React Native", "Flutter", "Swift", "Kotlin", "Firebase"]
},
{
n: "03",
icon: ,
title: "IT Consulting & Architecture",
desc: "Technical due diligence, system design, cloud migration, and dedicated engineering teams. We help you decide what to build — and what not to.",
stack: ["Architecture", "Cloud", "Audits", "Team Lead", "DevOps"]
}];
return (
01 / Services
Three disciplines, one studio. Engineering that doesn't leak.
{list.map((s) =>
{s.icon}
{s.n}
{s.title}
{s.desc}
{s.stack.map((t) => {t})}
)}
);
}
function Process() {
const [active, setActive] = useState(0);
const steps = [
{ n: "01", title: "Discover", desc: "Workshops, stakeholder interviews, and competitive teardowns. We arrive curious and leave with a brief that maps real outcomes to product moves." },
{ n: "02", title: "Design", desc: "Hi-fi interaction design, clickable prototypes, and a vetted component system — so engineering starts on day one, not month three." },
{ n: "03", title: "Build", desc: "Two-week sprints, weekly demos, and shared boards. CI/CD from the first commit. You see exactly where the budget went." },
{ n: "04", title: "Operate", desc: "Production support, observability, and a retainer team. Most clients keep us on board long after launch — that's the win we optimize for." }];
useEffect(() => {
const id = setInterval(() => setActive((a) => (a + 1) % steps.length), 3200);
return () => clearInterval(id);
}, []);
return (
02 / Process
A four-stage cadence. No mystery, no surprise invoices.