{['#7B68EE','#E85D75','#F59E0B','#10B981','#3B82F6'].map(c => (
set('accentColor', c)} style={{
width: 22, height: 22, borderRadius: '50%', background: c,
cursor: 'pointer', flexShrink: 0,
border: tweaks.accentColor === c ? '2px solid #fff' : '2px solid transparent',
transition: 'border-color 0.2s',
}} />
))}
Mint / Highlight
{['#00CDA0','#22D3EE','#A78BFA','#FB923C','#F472B6'].map(c => (
set('mintColor', c)} style={{
width: 22, height: 22, borderRadius: '50%', background: c,
cursor: 'pointer', flexShrink: 0,
border: tweaks.mintColor === c ? '2px solid #fff' : '2px solid transparent',
transition: 'border-color 0.2s',
}} />
))}
Background
{['#0B0914','#090909','#0A0F14','#0C0A0A','#080D0B'].map(c => (
set('bgColor', c)} style={{
width: 22, height: 22, borderRadius: '50%', background: c,
cursor: 'pointer', flexShrink: 0,
border: tweaks.bgColor === c ? '2px solid var(--accent)' : '1px solid var(--border)',
transition: 'border-color 0.2s',
}} />
))}
);
};
/* ── APP ── */
const App = () => {
const [page, setPage] = useState(() => localStorage.getItem('vela-page') || 'home');
const [fading, setFading] = useState(false);
const [tweaksOn, setTweaksOn] = useState(false);
const [tweaks, setTweaks] = useState(TWEAK_DEFAULTS);
// Persist page
const navigate = (newPage) => {
if (newPage === page) return;
setFading(true);
setTimeout(() => {
setPage(newPage);
localStorage.setItem('vela-page', newPage);
window.scrollTo({ top: 0, behavior: 'instant' });
setFading(false);
}, 260);
};
// Tweaks host protocol
useEffect(() => {
const handler = (e) => {
if (e.data?.type === '__activate_edit_mode') setTweaksOn(true);
if (e.data?.type === '__deactivate_edit_mode') setTweaksOn(false);
};
window.addEventListener('message', handler);
window.parent.postMessage({ type: '__edit_mode_available' }, '*');
return () => window.removeEventListener('message', handler);
}, []);
// Apply saved tweaks to CSS vars on mount
useEffect(() => {
document.documentElement.style.setProperty('--accent', tweaks.accentColor);
document.documentElement.style.setProperty('--accent-glow', tweaks.accentColor + '40');
document.documentElement.style.setProperty('--accent-dim', tweaks.accentColor + '20');
document.documentElement.style.setProperty('--mint', tweaks.mintColor);
document.documentElement.style.setProperty('--mint-dim', tweaks.mintColor + '20');
document.documentElement.style.setProperty('--bg', tweaks.bgColor);
document.body.style.background = tweaks.bgColor;
}, []);
// Scroll reveal — re-run on page change
useEffect(() => {
const obs = new IntersectionObserver((entries) => {
entries.forEach(e => { if (e.isIntersecting) e.target.classList.add('visible'); });
}, { threshold: 0.08 });
const timer = setTimeout(() => {
document.querySelectorAll('.reveal').forEach(el => {
el.classList.remove('visible');
obs.observe(el);
});
}, 80);
return () => { clearTimeout(timer); obs.disconnect(); };
}, [page]);
const PAGES = {
home: window.HomePage,
services: window.ServicesPage,
work: window.WorkPage,
process: window.ProcessPage,
pricing: window.PricingPage,
contact: window.ContactPage,
};
const PageComponent = PAGES[page] || window.HomePage;
return (
);
};
ReactDOM.createRoot(document.getElementById('root')).render(
);