// Homepage section: AI / Claude Skills & Projects teaser const csHomeStyles = { wrap: { padding: 'var(--section-y) 32px', position: 'relative', overflow: 'hidden', background: 'var(--paper-deep)', borderTop: '1px solid var(--line-soft)', borderBottom: '1px solid var(--line-soft)' }, bg: { position: 'absolute', inset: 0, pointerEvents: 'none', background: 'radial-gradient(50% 60% at 90% 50%, rgba(29,78,137,0.05) 0%, transparent 60%)' }, inner: { maxWidth: 1280, margin: '0 auto', position: 'relative' }, panel: { background: 'transparent', border: 'none', borderRadius: 0, padding: 0, display: 'flex', flexDirection: 'column', gap: 48, boxShadow: 'none', position: 'relative', overflow: 'visible', }, panelGrid: { display: 'grid', gridTemplateColumns: '1.1fr 1fr', gap: 56, alignItems: 'center', }, // --- Human-in-the-loop orbital diagram (top of panel) --- cycleWrap: { position: 'relative', }, cycleHead: { display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', marginBottom: 24, gap: 24, flexWrap: 'wrap', }, cycleEyebrow: { fontFamily: "'Outfit', system-ui, sans-serif", fontSize: 11, color: 'var(--blue-deep)', letterSpacing: '0.08em', textTransform: 'uppercase', fontWeight: 500, whiteSpace: 'nowrap', }, cycleTagline: { fontSize: 13, color: 'var(--ink-muted)', whiteSpace: 'nowrap', }, // Setup heading + card sitting above the orbit setupHeading: { fontFamily: "'Outfit', system-ui, sans-serif", fontSize: 28, lineHeight: 1.12, letterSpacing: '-0.02em', fontWeight: 600, color: 'var(--ink)', textAlign: 'center', marginBottom: 20, }, setupHeadingBlue: { color: 'var(--blue)' }, setupRow: { display: 'flex', justifyContent: 'center', position: 'relative', zIndex: 5, }, setupCard: { background: '#fff', border: '1.5px solid var(--blue)', borderRadius: 14, padding: '14px 22px', display: 'inline-flex', alignItems: 'center', gap: 14, boxShadow: '0 0 0 5px rgba(8,120,216,0.08), var(--shadow-sm)', maxWidth: 460, }, setupIcon: { width: 38, height: 38, borderRadius: 10, background: 'var(--blue)', color: '#fff', display: 'grid', placeItems: 'center', flex: 'none', }, setupWho: { fontFamily: "'Outfit', system-ui, sans-serif", fontSize: 10, fontWeight: 500, letterSpacing: '0.08em', textTransform: 'uppercase', color: 'var(--blue)', marginBottom: 3, }, setupTitle: { fontSize: 14.5, fontWeight: 600, letterSpacing: '-0.01em', color: 'var(--ink)' }, setupDesc: { fontSize: 12.5, color: 'var(--ink-muted)', marginTop: 3, lineHeight: 1.5 }, entryArrow: { display: 'flex', justifyContent: 'center', height: 36, color: 'var(--blue)', }, // Orbital diagram orbitColumn: { display: 'flex', flexDirection: 'column', gap: 14 }, orbitOuter: { width: '100%', display: 'flex', justifyContent: 'center', }, orbitDiagram: { position: 'relative', width: '100%', maxWidth: 560, aspectRatio: '680 / 540', margin: '4px auto', }, orbitSvg: { position: 'absolute', inset: 0, width: '100%', height: '100%', pointerEvents: 'none', overflow: 'visible', }, // Step cards positioned around the orbit orbitCard: (pos, highlight) => { const base = { position: 'absolute', width: '27%', minWidth: 132, maxWidth: 180, background: '#fff', border: highlight ? '1.5px solid var(--blue)' : '1px solid var(--line-soft)', borderRadius: 13, padding: '10px 12px', boxShadow: highlight ? '0 8px 24px rgba(8,120,216,0.14)' : 'var(--shadow-sm)', transition: 'transform .18s, box-shadow .18s', }; const placements = { top: { left: '50%', top: '0%', transform: 'translate(-50%, -22%)' }, right: { right: '0%', top: '50%', transform: 'translate(0, -50%)' }, bottom: { left: '50%', bottom: '0%', transform: 'translate(-50%, 22%)' }, left: { left: '0%', top: '50%', transform: 'translate(0, -50%)' }, }; return { ...base, ...placements[pos] }; }, orbitWho: (variant) => ({ display: 'inline-flex', alignItems: 'center', gap: 5, fontFamily: "'Outfit', system-ui, sans-serif", fontSize: 10, fontWeight: 600, letterSpacing: '0.08em', textTransform: 'uppercase', borderRadius: 999, padding: '2px 8px', marginBottom: 6, background: variant === 'va' ? 'var(--blue)' : 'var(--blue-soft)', color: variant === 'va' ? '#fff' : 'var(--blue-deep)', whiteSpace: 'nowrap', }), orbitStepLbl: { fontFamily: "'Outfit', system-ui, sans-serif", fontVariantNumeric: 'tabular-nums', fontSize: 10, fontWeight: 500, letterSpacing: '0.08em', textTransform: 'uppercase', color: 'var(--ink-muted)', marginBottom: 4, }, orbitCardTitle: { fontSize: 13, fontWeight: 600, letterSpacing: '-0.01em', color: 'var(--ink)', lineHeight: 1.25, marginBottom: 3 }, orbitCardDesc: { fontSize: 12, color: 'var(--ink-muted)', lineHeight: 1.45, minHeight: '2.9em' }, // Center hub orbitHub: { position: 'absolute', width: '28%', aspectRatio: '1 / 1', left: '50%', top: '50%', transform: 'translate(-50%, -50%)', borderRadius: '50%', overflow: 'hidden', border: '3px solid var(--blue)', boxShadow: '0 0 0 8px rgba(8,120,216,0.08), 0 0 0 16px rgba(8,120,216,0.035)', background: 'linear-gradient(180deg, #fff 0%, var(--blue-soft) 100%)', }, orbitHubImg: { width: '108%', height: '108%', objectFit: 'cover', objectPosition: '50% 22%', display: 'block', marginLeft: '-4%', marginTop: '-2%' }, orbitHubLabel: { position: 'absolute', left: '50%', top: 'calc(50% + 13%)', transform: 'translate(-50%, 0)', background: 'var(--blue)', color: '#fff', padding: '7px 14px', borderRadius: 11, textAlign: 'center', maxWidth: '70%', boxShadow: '0 8px 20px -8px rgba(8,120,216,0.5)', whiteSpace: 'nowrap', }, orbitHubLabelTitle: { fontFamily: "'Outfit', system-ui, sans-serif", fontVariantNumeric: 'tabular-nums', fontSize: 10, fontWeight: 700, letterSpacing: '0.06em', textTransform: 'uppercase', display: 'inline-flex', alignItems: 'center', gap: 5, whiteSpace: 'nowrap', }, orbitHubLabelSub: { fontSize: 10.5, color: 'rgba(255,255,255,0.85)', marginTop: 2, lineHeight: 1.3, whiteSpace: 'nowrap' }, // Final tagline below the orbit orbitTagline: { display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 10, marginTop: 18, background: 'var(--paper-deep)', border: '1px solid var(--line-soft)', borderRadius: 12, padding: '12px 20px', }, orbitTagTxt: { fontFamily: "'Outfit', system-ui, sans-serif", fontSize: 14, fontWeight: 600, letterSpacing: '-0.01em', color: 'var(--ink)', }, orbitTagTxtBlue: { color: 'var(--blue)' }, // left eyebrow: { display: 'inline-flex', alignItems: 'center', gap: 8, fontSize: 12, color: 'var(--blue)', fontWeight: 500, padding: '5px 12px', borderRadius: 999, background: 'var(--blue-soft)', border: '1px solid rgba(29,78,137,0.12)', marginBottom: 22, fontFamily: "'Outfit', system-ui, sans-serif", fontVariantNumeric: 'tabular-nums', letterSpacing: '0.06em', textTransform: 'uppercase' }, eyebrowDot: { width: 6, height: 6, borderRadius: 3, background: 'var(--blue)' }, h2: { fontFamily: "'Outfit', system-ui, sans-serif", fontSize: 52, lineHeight: 1.05, letterSpacing: '-0.03em', fontWeight: 600, marginBottom: 18 }, italic: { color: 'var(--blue)' }, p: { fontSize: 17, lineHeight: 1.55, color: 'var(--ink-muted)', maxWidth: 520, marginBottom: 28 }, bullets: { display: 'flex', flexDirection: 'column', gap: 10, marginBottom: 32 }, bullet: { display: 'flex', gap: 12, alignItems: 'flex-start', fontSize: 15, color: 'var(--ink-soft)' }, bulletDot: { flex: 'none', width: 22, height: 22, borderRadius: 6, background: 'var(--blue-soft)', color: 'var(--blue-deep)', display: 'grid', placeItems: 'center' }, ctas: { display: 'flex', alignItems: 'center', gap: 12, flexWrap: 'wrap' }, primary: { background: 'var(--ink)', color: '#fff', padding: '14px 22px', borderRadius: 12, fontSize: 15, fontWeight: 500, display: 'inline-flex', alignItems: 'center', gap: 8, transition: 'background .2s' }, ghost: { background: 'transparent', color: 'var(--ink)', padding: '14px 22px', borderRadius: 12, fontSize: 15, fontWeight: 500, border: '1px solid var(--line)', display: 'inline-flex', alignItems: 'center', gap: 8, transition: 'background .2s, border-color .2s' }, // right: stack of 4 cards stack: { position: 'relative', display: 'flex', flexDirection: 'column', gap: 12 }, cardOuter: { background: '#fff', border: '1px solid var(--line-soft)', borderRadius: 14, padding: '16px 18px', display: 'flex', alignItems: 'center', gap: 14, boxShadow: 'var(--shadow-sm)', transition: 'transform .2s, box-shadow .2s' }, cardIcon: { width: 36, height: 36, borderRadius: 9, display: 'grid', placeItems: 'center', flex: 'none' }, cardLabel: { fontFamily: "'Outfit', system-ui, sans-serif", fontVariantNumeric: 'tabular-nums', fontSize: 10, color: 'var(--blue)', letterSpacing: '0.08em', textTransform: 'uppercase', marginBottom: 3 }, cardTitle: { fontSize: 15, fontWeight: 600, letterSpacing: '-0.01em', marginBottom: 2 }, cardDesc: { fontSize: 13, color: 'var(--ink-muted)', lineHeight: 1.45 }, cardArrow: { color: 'var(--ink-muted)', flex: 'none' }, }; function HumanLoopCycle({ outputDesc }) { // 4 orbiting steps. Three are owned by the human VA — that's the point. const steps = [ { pos: 'top', n: '01', who: 'AI', whoVariant: 'ai', label: 'AI runs', title: 'Output generated', desc: outputDesc || 'Drafts, research, and summaries generated at scale.' }, { pos: 'right', n: '02', who: 'Your VA', whoVariant: 'va', label: 'Review', title: 'VA checks every output', desc: 'Edits, proofreads, and flags issues before they ship.' }, { pos: 'bottom', n: '03', who: 'Your VA', whoVariant: 'va', label: 'Deliver', title: 'VA ships the work', desc: 'Approved output sent on your behalf, on time.' }, { pos: 'left', n: '04', who: 'Your VA', whoVariant: 'va', label: 'Improve', title: 'VA tunes the system', desc: 'Refines prompts, adds context, and learns as it goes.' }, ]; return (
VA & You · One time
Build the system
Prompt, project, workflow, and rules created once, then handed off to the loop.
{/* Orbital diagram */}
{/* Faint orbit ring */} {/* Step markers (numbered chips) */} 01 02 03 04 {/* Animated path arcs */} {/* Travelling dots */} {/* 4 step cards orbiting */} {steps.map((s) => (
{s.whoVariant === 'va' ? : } {s.who}
{s.n} · {s.label}
{s.title}
{s.desc}
))} {/* Center hub: the human */}
BlueMoso VA, your human in the loop
); } function HumanInLoop({ copy }) { // copy is optional — when provided (e.g. from an ICP page) it overrides the // default homepage copy. ICP pages opt out of the bullet list entirely by // simply omitting `bullets`; only the homepage (no copy prop) shows defaults. const isIcpPage = !!copy; const c = copy || {}; const eyebrow = c.eyebrow || 'Jobs powered by AI'; const h2Lead = c.h2Lead || 'Creating new jobs'; const h2Accent = c.h2Accent || 'with AI.'; const bodyHtml = c.bodyHtml || `We provide a high performing BlueMoso VA who manages and supports your AI systems day to day, helping your business run smoother while giving you your time back.`; const bullets = Array.isArray(c.bullets) ? c.bullets : isIcpPage ? [] : [ 'A real human to communicate with', 'A vetted VA who runs and manages your AI', 'Builds prompts, workflows, and repeatable systems', 'Reviews outputs for mistakes, accuracy, and quality', ]; return (
{/* Left */} {/* Right: human-in-the-loop orbital diagram */}
); } Object.assign(window, { HumanInLoop, HumanLoopCycle });