/* ============================================================ Tectus — problem + comparison · solution grid · Tectus/GO split ============================================================ */ const { Card: S1Card, Eyebrow: S1Eyebrow, Button: S1Button, Badge: S1Badge } = window.TectusDesignSystem_c42b34; /* ---------- 3. Problem ---------- */ const OLD_WAY = [ 'Calling multiple companies', 'Slow responses & delays', 'Unvetted security companies', 'Unclear pricing & unpredictable costs', 'No central communication', ]; const NEW_WAY = [ 'Request security in minutes', 'Real-time updates', 'Vetted security vendors', 'Transparent pricing & predictable workflows', '24/7 support & centralized communication', ]; function Problem() { const [inView, setInView] = useState(false); const rightRef = useRef(null); useEffect(() => { if (!document.getElementById('tt-problem-styles')) { const el = document.createElement('style'); el.id = 'tt-problem-styles'; el.textContent = ` @keyframes tt-fly-in { from { opacity:0; transform:translateX(56px); } to { opacity:1; transform:translateX(0); } } @keyframes tt-fade-up { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:translateY(0); } } @media(max-width:700px){ .tt-compare{ grid-template-columns:1fr!important; } } `; document.head.appendChild(el); } const el = rightRef.current; if (!el) return; const obs = new IntersectionObserver(([e]) => { if (e.isIntersecting) setInView(true); }, { threshold: 0.15 }); obs.observe(el); return () => obs.disconnect(); }, []); return (

There's a smarter way to protect what matters

{/* Old ways */}
Old ways
    {OLD_WAY.map((x) => (
  • {x}
    • ))}
{/* Tectus ways — flies in from right */}
TECTUS
    {NEW_WAY.map((x, idx) => (
  • {x}
    • ))}
); } /* ---------- 4. Solution / system — interactive feature showcase ---------- */ const SYSTEM = [ { icon: 'clipboard-list', t: 'Requests', d: 'Submit coverage details by time, location, and requirement in minutes.' }, { icon: 'calendar-clock', t: 'Scheduling', d: 'Set time blocks, windows, and recurring coverage across sites.' }, { icon: 'git-compare-arrows', t: 'Vendor matching', d: 'Connect to qualified, licensed vendors ranked by fit and availability.' }, { icon: 'bell', t: 'Service updates', d: 'Real-time notifications as each job moves through the workflow.' }, { icon: 'badge-check', t: 'Compliance review', d: 'License and insurance checks enforced per request, every time.' }, { icon: 'bar-chart-3', t: 'Reporting', d: 'Exportable, audit-ready records for every engagement.' }, { icon: 'message-square', t: 'Messaging', d: 'Coordinate with vendors in one shared thread per job.' }, { icon: 'activity', t: 'Status tracking', d: 'Assigned, on site, completed — every step logged and visible.' }, ]; /* -- inline product UI mockups -- */ function MockRequests() { const [submitted, setSubmitted] = useState(false); return (
New Service Request {submitted ? 'SUBMITTED' : 'DRAFT'}
{[['Location', 'Downtown Office — Floor 12'], ['Service type', 'Access Control'], ['Date range', 'Jul 14 – Jul 18, 2025'], ['Personnel', '3 guards / 8hr shifts']].map(([label, value]) => (
{label}
{value}
))}
); } function MockScheduling() { const days = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']; const DEFAULT_ON = new Set(['Mon-0','Mon-1','Mon-2','Tue-1','Tue-2','Tue-3','Thu-2','Thu-3','Thu-4','Fri-0','Fri-1','Fri-2','Fri-3','Sat-1','Sat-2']); const [active, setActive] = useState(DEFAULT_ON); const rows = ['8 AM', '10 AM', '12 PM', '2 PM', '4 PM']; const toggle = (key) => setActive(prev => { const next = new Set(prev); if (next.has(key)) next.delete(key); else next.add(key); return next; }); return (
Coverage Schedule — Jul 14–20
{days.map((d) =>
{d}
)} {rows.map((r, ri) => (
{r}
{days.map((d) => { const key = `${d}-${ri}`; const on = active.has(key); return
toggle(key)} style={{ height: 26, margin: '0 2px 2px', borderRadius: 3, background: on ? 'rgba(212,175,55,0.16)' : 'var(--color-bg)', border: `1px solid ${on ? 'rgba(212,175,55,0.32)' : 'var(--color-border)'}`, cursor: 'pointer', transition: 'all 0.15s' }} />; })} ))}
); } function MockVendors() { const [accepted, setAccepted] = useState(null); const vendors = [ { name: 'Apex Security Group', score: 98, badges: ['Licensed', 'Insured', 'Top rated'], star: true }, { name: 'ShieldForce LLC', score: 91, badges: ['Licensed', 'Insured'], star: true }, { name: 'Metro Guard Co.', score: 84, badges: ['Licensed'], star: false }, ]; return (
{vendors.map((v, i) => (
{v.name} {v.star && }
{v.badges.map((b) => {b})}
{v.score}%
match
{i === 0 && (
)}
))}
); } function MockUpdates() { const ALL = [ { icon: 'check-circle', text: 'Vendor confirmed: Apex Security Group', time: 'Just now', hi: true }, { icon: 'user-check', text: '3 officers assigned to Downtown Office', time: '2m ago', hi: false }, { icon: 'map-pin', text: 'Personnel on-site at Floor 12 entrance', time: '14m ago', hi: false }, { icon: 'bell', text: 'Shift change logged — Officer Rodriguez', time: '1h ago', hi: false }, { icon: 'file-check', text: 'Compliance check passed for this request', time: '2h ago', hi: false }, ]; const [items, setItems] = useState(ALL); const [hovered, setHovered] = useState(null); const dismiss = (idx) => setItems(prev => prev.filter((_, i) => i !== idx)); return (
Service Updates
{items.length === 0 && } Live
{items.length === 0 &&
All updates cleared
} {items.map((u, i) => (
setHovered(i)} onMouseLeave={() => setHovered(null)} style={{ display: 'flex', gap: 11, alignItems: 'flex-start', padding: '10px 14px', borderBottom: i < items.length-1 ? '1px solid var(--color-divider)' : 'none', background: hovered === i ? 'rgba(255,255,255,0.02)' : u.hi ? 'rgba(212,175,55,0.03)' : 'transparent', position: 'relative', transition: 'background 0.15s' }}>
{u.text}
{u.time}
{hovered === i && ( )}
))}
); } function MockCompliance() { const checks = [['License verified', 'Valid through Dec 2025'], ['General liability insured', '$2M coverage — current'], ['Background checks complete', 'All 3 officers cleared'], ['Drug screening passed', 'Within 90-day window'], ['Uniform requirements met', 'Confirmed by vendor']]; const [running, setRunning] = useState(false); const timerRef = useRef(null); const rerun = () => { if (running) return; setRunning(true); clearTimeout(timerRef.current); timerRef.current = setTimeout(() => setRunning(false), 2000); }; return (
Compliance Review
{checks.map(([label, sub], i) => (
{label}
{sub}
))}
{running ? 'Running checks…' : 'All checks passed — vendor approved'}
); } function MockReporting() { const bars = [62, 78, 54, 91, 68, 85, 73]; const days = ['M', 'T', 'W', 'T', 'F', 'S', 'S']; const [exportState, setExportState] = useState('idle'); const timerRef = useRef(null); const handleExport = () => { if (exportState !== 'idle') return; setExportState('exporting'); clearTimeout(timerRef.current); timerRef.current = setTimeout(() => { setExportState('done'); timerRef.current = setTimeout(() => setExportState('idle'), 2500); }, 1400); }; const exportLabel = exportState === 'exporting' ? 'Exporting…' : exportState === 'done' ? '✓ Exported' : 'Export'; return (
Weekly Coverage Report
{[['47', 'Total jobs'], ['98%', 'Fill rate'], ['1.8h', 'Avg. response']].map(([v, l]) => (
{v}
{l}
))}
{bars.map((h, i) => (
{i === 3 && 91%}
{days[i]}
))}
); } function MockMessaging() { const INIT = [ { s: 'v', t: 'Team confirmed for tomorrow 0700. Officer Reyes will be lead.' }, { s: 'c', t: 'Perfect. Please check in with building security on arrival.' }, { s: 'v', t: 'Understood. Any specific access requirements?' }, { s: 'c', t: "Badge required for floors 10–14. I'll have it ready at the desk." }, ]; const [msgs, setMsgs] = useState(INIT); const [input, setInput] = useState(''); const scrollRef = useRef(null); const send = () => { const text = input.trim(); if (!text) return; setMsgs(m => [...m, { s: 'c', t: text }]); setInput(''); setTimeout(() => { if (scrollRef.current) scrollRef.current.scrollTop = 99999; }, 30); }; return (
Apex Security Group
{msgs.map((m, i) => (
{m.t}
))}
setInput(e.target.value)} onKeyDown={e => e.key === 'Enter' && send()} placeholder="Message Apex Security Group" style={{ flex: 1, background: 'none', border: 'none', outline: 'none', fontSize: 12, color: 'var(--color-text)', minWidth: 0 }} />
); } function MockStatusTracking() { const ALL_STEPS = [ { label: 'Request submitted', sub: 'Jul 14, 9:02 AM' }, { label: 'Vendor matched', sub: 'Apex Security Group' }, { label: 'Vendor confirmed', sub: 'Jul 14, 9:18 AM' }, { label: 'Personnel on site', sub: 'Arriving Jul 15, 7:00 AM' }, { label: 'Job completed', sub: 'Scheduled Jul 18, 5:00 PM' }, ]; const [progress, setProgress] = useState(3); const advance = () => setProgress(p => p < ALL_STEPS.length - 1 ? p + 1 : 0); useEffect(() => { if (!document.getElementById('tt-status-styles')) { const el = document.createElement('style'); el.id = 'tt-status-styles'; el.textContent = ` @keyframes tt-line-fill { from { transform: scaleY(0); transform-origin: top; } to { transform: scaleY(1); transform-origin: top; } } @keyframes tt-line-flow { 0% { background-position: 0 0; } 100% { background-position: 0 32px; } } `; document.head.appendChild(el); } }, []); return (
Downtown Office — Jul 14
{ALL_STEPS.map((s, i) => { const done = i < progress; const active = i === progress; const lineType = i < progress - 1 ? 'done' : i === progress - 1 ? 'flowing' : 'pending'; return (
setProgress(i)} style={{ display: 'flex', gap: 13, position: 'relative', paddingBottom: i < ALL_STEPS.length-1 ? 18 : 0, cursor: 'pointer' }}> {i < ALL_STEPS.length-1 && (
{lineType === 'done' && (
)} {lineType === 'flowing' && (
)}
)}
{done && } {active &&
}
{s.label}
{s.sub}
); })}
); } const SYS_MOCKUPS = [MockRequests, MockScheduling, MockVendors, MockUpdates, MockCompliance, MockReporting, MockMessaging, MockStatusTracking]; function SystemGrid() { const [active, setActive] = useState(0); const [tick, setTick] = useState(0); const timerRef = useRef(null); const startTimer = React.useCallback(() => { clearInterval(timerRef.current); timerRef.current = setInterval(() => { setActive((p) => (p + 1) % SYSTEM.length); setTick((t) => t + 1); }, 4500); }, []); useEffect(() => { if (!document.getElementById('tt-sys-styles')) { const el = document.createElement('style'); el.id = 'tt-sys-styles'; el.textContent = '@keyframes tt-pg{from{width:0}to{width:100%}}.tt-sys-tab:hover:not(.tt-sys-tab--on){background:rgba(212,175,55,0.03)!important}.tt-sys-link:hover{color:var(--color-text)!important}@media(max-width:860px){.tt-sys-split{grid-template-columns:1fr!important}.tt-sys-left{border-right:none!important;border-bottom:1px solid var(--color-border)!important}.tt-sys-right{min-height:340px!important}}'; document.head.appendChild(el); } startTimer(); return () => clearInterval(timerRef.current); }, [startTimer]); const handleSelect = (i) => { setActive(i); setTick((t) => t + 1); startTimer(); }; return (
The system

One platform.
Every workflow.

The full operating layer for physical security logistics — request to resolution, in one place.

{/* left: feature tabs */}
{SYSTEM.map((s, i) => ( ))}
{/* right: mockup */}
); } /* ---------- 5. Tectus + Tectus GO split ---------- */ const TECTUS_PTS = ['Request coverage by time, location & requirement', 'Track status from match to completion', 'Coordinate with vendors in one place']; const GO_PTS = ['Receive and accept job requests', 'Assign personnel and manage schedules', 'Update job status from the field']; function TectusGoSplit() { return (
{[ { tag: 'For clients', tagTone: 'gold', name: 'Tectus', desc: 'Request & manage security services', pts: TECTUS_PTS, cta: 'Request coverage', href: '#/get-quote', screen: 'assets/tectus-app-screen.webp', mark: 'assets/tectus-icon-white.webp', markId: 'iconWhite' }, { tag: 'For vendors', tagTone: 'neutral', name: 'Tectus GO', desc: 'Coordinate jobs & field execution', pts: GO_PTS, cta: 'Become a vendor', href: '#/become-a-vendor', screen: 'assets/tectus-go-app-screen.webp', mark: 'assets/tectus-go-icon-white.webp', markId: 'goIconWhite' }, ].map((c, i) => (
{/* floating phone — no box */}
{`${c.name}
{/* text box */}
{c.name} {c.name} {c.tag}

{c.desc}

    {c.pts.map((p) => (
  • {p}
    • ))}
{c.cta}
))}
); } Object.assign(window, { Problem, SystemGrid, TectusGoSplit });