/* Variation A — Classic Apple-style: centered hero, big product shot, generous whitespace */
function VariationA() {
const { t, fonts, mode, pad } = useRemacTheme();
const accent = t.accent;
const isMobile = useIsMobile(768);
// Scroll-spy: which section is currently in view
const [activeId, setActiveId] = React.useState('');
React.useEffect(() => {
const ids = ['features', 'how', 'privacy', 'pricing'];
const update = () => {
const probe = window.innerHeight * 0.35;
let current = '';
for (const id of ids) {
const el = document.getElementById(id);
if (!el) continue;
const r = el.getBoundingClientRect();
if (r.top <= probe && r.bottom > probe) {current = id;break;}
}
setActiveId(current);
};
update();
window.addEventListener('scroll', update, { passive: true });
window.addEventListener('resize', update);
return () => {
window.removeEventListener('scroll', update);
window.removeEventListener('resize', update);
};
}, []);
const navLink = (id, label) =>
{label};
const heroRef = React.useRef(null);
const heroInnerRef = React.useRef(null);
const phoneRef = React.useRef(null);
useScrollProgress(heroRef, (p) => {
if (heroInnerRef.current) {
// Quantize to 0.5px to avoid sub-pixel jitter on macOS scroll inertia
const scale = Math.round(lerp(0.82, 1.04, easeOut(clamp(p * 1.4))) * 1000) / 1000;
const lift = Math.round(lerp(80, -40, easeOut(clamp(p * 1.3))));
heroInnerRef.current.style.transform = `translate3d(0, ${lift}px, 0) scale(${scale})`;
}
if (phoneRef.current) {
// On mobile the phone is in-flow below the Mac (no absolute offset to anchor against),
// so we skip the parallax write and let it scroll naturally.
if (window.innerWidth >= 768) {
const phoneLift = Math.round(lerp(60, -30, easeOut(clamp(p * 1.5))));
const phoneScale = Math.round(lerp(0.9, 1.0, easeOut(clamp(p * 1.6))) * 1000) / 1000;
phoneRef.current.style.transform = `translateX(50%) translateY(${phoneLift}px) scale(${phoneScale})`;
} else {
phoneRef.current.style.transform = '';
}
}
}, { startOffset: 1.0, endOffset: -0.3 });
return (
{/* Nav */}
{/* Hero */}
{t.heroHeadline}
{t.heroSub}
See it in action
{'\n'}
{/* Hero product shot: phone + Mac shot — scrubs on scroll */}
{/* Glow */}
{/* Mac window placeholder — hidden on mobile (phone is the focal product there) */}
{!isMobile &&
ReMac
}
{/* Phone — overlaps right side of Mac on desktop; stacks below Mac on mobile */}
{/* Features */}
What's inside
Built for the way developers actually work.
} />
} />
}
wide />
}
wide />
{/* How it works */}
How it works
Three steps. Two devices. One pairing.
{[
{ n: '01', title: 'Install ReMac on your Mac', body: 'A 12 MB universal binary. Notarized, sandboxed, and signed.' },
{ n: '02', title: 'Open ReMac on iPhone', body: 'Scan the in-app QR. Devices pair over your local network — or relay if you\'re away.' },
{ n: '03', title: "You're in.", body: 'Terminals, files, screen and apps appear. Nothing leaves your devices unencrypted.' }].
map((s, i) =>
{s.n}
{s.title}
{s.body}
)}
{/* Privacy */}
Privacy
Your Mac talks only to your phone.
Sessions are end-to-end encrypted with keys that never leave your devices. There is no ReMac account, no cloud sync, no telemetry. The relay (when you need it) only sees encrypted bytes.
{[
['End-to-end encrypted', 'Curve25519 + ChaCha20-Poly1305'],
['No account required', 'Pairing is on-device, by QR'],
['Zero telemetry', 'Open source client coming Q3'],
['Local-first', 'Direct LAN whenever possible']].
map(([k, v]) =>
{k}{v}
)}
{/* Pricing */}
Pricing
Free to start. Pay when you fly.
{/* CTA */}
Take your Mac with you.
ReMac is free for personal use. Install on your Mac, scan once, and never feel away from your machine again.
{/* Footer */}