// Main app, theme state, section order, sticky CTA
const { useState: useAppState, useEffect: useAppEffect } = React;
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
"accentColor": "#00D9A0",
"accentSecondary": "#8B5CF6",
"heroHeadline": "We build the AI systems that run your business while you sleep.",
"showParticles": true,
"animationsEnabled": true,
"cardRadius": 12
}/*EDITMODE-END*/;
function App() {
const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);
// Theme state, persist in localStorage
const [theme, setTheme] = useAppState(() => {
try { return localStorage.getItem('q8-theme') || 'dark'; } catch { return 'dark'; }
});
const toggleTheme = () => {
const next = theme === 'dark' ? 'light' : 'dark';
setTheme(next);
try { localStorage.setItem('q8-theme', next); } catch {}
};
// Apply theme to
useAppEffect(() => {
document.documentElement.setAttribute('data-theme', theme);
}, [theme]);
// Apply accent color tweaks
useAppEffect(() => {
document.documentElement.style.setProperty('--accent-mint', tweaks.accentColor);
document.documentElement.style.setProperty('--accent-violet', tweaks.accentSecondary);
}, [tweaks.accentColor, tweaks.accentSecondary]);
// Global scroll reveal animation
useAppEffect(() => {
const obs = new IntersectionObserver((entries) => {
entries.forEach(e => {
if (e.isIntersecting) {
e.target.style.opacity = 1;
e.target.style.transform = 'translateY(0)';
obs.unobserve(e.target);
}
});
}, { threshold: 0.1, rootMargin: '0px 0px -50px 0px' });
// Select sections (except hero) and premium cards to animate
const els = document.querySelectorAll('section:not(#hero), .premium-card');
els.forEach(el => {
// Avoid overriding existing inline transition if possible, but we need to ensure it animates
if (el.style.opacity !== '1' && !el.dataset.animated) {
el.style.opacity = 0;
el.style.transform = 'translateY(30px)';
el.style.transition = 'opacity 0.8s cubic-bezier(0.16,1,0.3,1), transform 0.8s cubic-bezier(0.16,1,0.3,1)';
el.dataset.animated = 'true';
obs.observe(el);
}
});
return () => obs.disconnect();
}, []);
return (
<>
{/* Ambient lighting orbs */}
{/* 1. Hero, gradient headline, live agent canvas */}
{/* 2. Social Proof, trust strip immediately after hero */}
{/* 3. Case Studies, show the work */}
{/* 4. Industry Selector, high conversion lever */}
{/* 5. Founder, humanizes the brand */}
{/* 6. Differentiator, old way vs Q8 way */}
{/* 7. Services, four ways we ship */}
{/* 8. Process, 6-week live build simulation */}
{/* 9. Pricing, with pilot guarantee */}
{/* 10. Tech Stack, compact credibility strip */}
{/* 11. FAQ */}
{/* 12. Final CTA, 2-field form, direct to calendar */}
{/* Sticky book-a-call pill, appears after scroll */}
{/* AI Chatbot */}
setTweak('accentColor', v)} />
setTweak('accentSecondary', v)} />
setTweak('heroHeadline', v)} />
setTweak('showParticles', v)} />
setTweak('animationsEnabled', v)} />
setTweak('cardRadius', v)} />
);
}
function StickyCallButton() {
const [scrolled, setScrolled] = useAppState(false);
useAppEffect(() => {
const h = () => setScrolled(window.scrollY > 600);
window.addEventListener('scroll', h, { passive: true });
return () => window.removeEventListener('scroll', h);
}, []);
return (
{ e.currentTarget.style.transform = 'translateY(-2px) scale(1.04)'; e.currentTarget.style.boxShadow = '0 8px 28px rgba(0,217,160,0.45)'; }}
onMouseLeave={e => { e.currentTarget.style.transform = 'translateY(0) scale(1)'; e.currentTarget.style.boxShadow = '0 4px 20px rgba(0,217,160,0.35)'; }}
>
Book a discovery call
);
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render();