// app.jsx — ITbyPeople landing page: hero, problem-first services, how-it-works, AI hub. Mounts everything. const { useState: useS, useEffect: useEffectA } = React; // Option A — services organized by the problem on the visitor's mind. Each card deep-links into services.html. const PROBLEMS = [ { key: 'security', label: "I'm worried about security", items: [ ['shield-check', 'Cybersecurity', 'Continuous monitoring and threat detection. We catch problems before they become headlines.', 'threat'], ['shield-search', 'Security assessment', 'A clear, honest look at your current exposure — no fear tactics, just facts and a plan.', 'sec-assess'], ['users', 'Identity & access', 'Control who can access what — inside and outside your organization.', 'identity'], ['database-export', 'Backup & recovery', 'Your data is safe and recoverable. If the worst happens, we get you back online fast.', 'backup'], ], }, { key: 'cloud', label: "We're moving to the cloud", items: [ ['cloud-upload', 'Cloud migration', 'We move your business to AWS or Azure — nothing left behind, no surprises.', 'migration'], ['cloud', 'Cloud management', 'Ongoing management of your cloud environment — costs optimized, security maintained.', 'cloud-mgmt'], ['mail', 'Email services', 'Microsoft 365 or Google Workspace — configured, secured and managed for your team.', 'email'], ['building-store', 'IaaS', 'Virtual servers, storage and networking in the cloud — deployed and managed for you.', 'iaas'], ], }, { key: 'growing', label: "We're growing fast", items: [ ['topology-star', 'Network design', "A network built for where you're going, not just where you are today.", 'netdesign'], ['wifi-2', 'Wi-Fi deployment', 'Enterprise-grade wireless coverage — no dead zones, no guesswork.', 'wifi'], ['robot', 'AI adoption', 'We identify where AI saves your team real time, then help you implement it safely.', 'ai'], ['transform', 'Digital transformation', 'Swap manual processes for modern systems — your team moves faster, with less friction.', 'digital'], ], }, { key: 'everything', label: 'I need full IT support', items: [ ['device-laptop', 'Computer & device support', 'Day-to-day help for your whole team — a real person, fast response.', 'hds'], ['server', 'Server management', 'Your servers monitored, maintained and kept healthy — on-premise or hosted.', 'server'], ['shield-check', 'Patch management', 'Every device updated automatically — no disruptions, no gaps left open.', 'patch'], ['wifi', 'Network & infrastructure', 'Routers, switches, firewalls — managed end to end so your team stays connected.', 'network'], ], }, ]; const STEPS = [ ['clock', 'AI keeps watch', 'It monitors your systems every minute of every day — quietly, in the background.'], ['zap', 'We catch it early', 'Most issues are handled before you ever notice them, often overnight.'], ['phone', 'A person calls you', 'When something needs you, you talk to someone who already knows your setup.'], ]; function scrollToId(id) { const el = document.getElementById(id); if (!el) return; const top = el.getBoundingClientRect().top + window.scrollY - 76; window.scrollTo({ top, behavior: 'smooth' }); } const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{ "heroLayout": "Split", "heroMark": "Show", "whyBand": "Navy" }/*EDITMODE-END*/; function Page() { const ns = window.ITbyPeopleDesignSystem_44acd8 || {}; const { Button, Card, Badge, LogoMark } = ns; const [t, setTweak] = useTweaks(TWEAK_DEFAULTS); const [tab, setTab] = useS('schedule'); // cross-page deep links: index.html#schedule / #support / #how useEffectA(() => { const h = (location.hash || '').replace('#', ''); if (h === 'support') { setTab('ticket'); setTimeout(() => scrollToId('contact'), 80); } else if (h === 'schedule') { setTab('schedule'); setTimeout(() => scrollToId('contact'), 80); } else if (h === 'how') { setTimeout(() => scrollToId('how'), 80); } }, []); const openHub = (which) => { setTab(which); setTimeout(() => scrollToId('contact'), 30); }; const onNav = (key) => { if (key === 'services') { window.location.href = 'services.html'; return; } if (key === 'how') { scrollToId('how'); return; } setTab(key === 'support' ? 'ticket' : 'schedule'); scrollToId('contact'); }; return (
{/* ===== Hero ===== */}
{t.heroLayout === 'Centered' && ( )}
{t.heroLayout === 'Split' ? (

Powered by AI.
Driven by people.

We use AI to catch problems before you notice them. You still talk to a real person — every time. IT for legal, finance and medical teams that want calm, not jargon.

) : (
{t.heroMark === 'Show' && }

Powered by AI.
Driven by people.

We use AI to catch problems before you notice them. You still talk to a real person — every time.

)}
Trusted by teams in {['Legal', 'Finance & accounting', 'Medical & healthcare'].map((x) => {x})}
{/* ===== Services (problem-first) ===== */} {/* ===== How it works ===== */}
{t.whyBand === 'Navy' && }
How we work

AI does the watching. We do the talking.

You are not a number, and you'll never get a wall of jargon. Here's what working with us feels like.

{STEPS.map(([icon, title, body], i) => (
0{i + 1}

{title}

{body}

))}
{/* ===== Contact hub ===== */}
Let's talk

Get help the way you like.

Book a call and an engineer reaches out, or open a ticket and let AI route it. Either way, a real person owns it.

{[['schedule', 'calendar', 'Book a call'], ['ticket', 'ticket', 'Open a ticket']].map(([id, icon, label]) => ( ))}
{tab === 'schedule' ? : }
Prefer email? Reach us at info@itbypeople.com
{/* ===== Tweaks ===== */} setTweak('heroLayout', v)} /> setTweak('heroMark', v)} /> setTweak('whyBand', v)} />
); } function ProblemServices({ ns }) { const [active, setActive] = useS('security'); const prob = PROBLEMS.find((p) => p.key === active); return (
What we take care of

Start with what's on your mind.

Most people come to us with one thing keeping them up at night. Tell us which sounds like you — we'll show the services that fit.

{PROBLEMS.map((p) => ( ))}
{prob.items.map(([icon, name, desc, id]) => (
{name}
{desc}
 ))}
Services shown are matched to your situation. Every engagement starts with a 30-minute call — no jargon, no pressure.
See all services in detail
); } function HeroPreview({ onBook, ns }) { const { Button } = ns; return (
Schedule with AI
Online now
Our firewall has been flaky since this morning.
Sounds like a network issue — here are a few times an engineer can call you today.
{['1:30 PM', '2:00 PM', '3:30 PM'].map((s, i) => (
{s}
))}
); } (function mount() { const tryMount = () => { if (!window.ITbyPeopleDesignSystem_44acd8 || !window.Scheduler || !window.TicketIntake || !window.useTweaks || !window.SiteHeader) { setTimeout(tryMount, 40); return; } ReactDOM.createRoot(document.getElementById('root')).render(); }; tryMount(); })(); Object.assign(window, { Page });