progress {done} of {total} complete · {total - done} to go

{Array.from({ length: total }).map((_, i) => (

))}

); } // ─── tasks data ─────────────────────────────────────────── const TASKS = [ { n: "01", type: "sig", title: "Sign your offer letter", time: "2 min", status: "complete", note: "Signed Friday, May 9 at 4:42 PM" }, { n: "02", type: "form", title: "Fill out Form I-9 Section 1", time: "5 min", status: "complete", note: "Submitted Friday, May 9 at 5:01 PM" }, { n: "03", type: "form", title: "Set up direct deposit", time: "3 min", status: "complete", note: "Bank verified · ending in 4421" }, { n: "04", type: "sig", title: "Acknowledge the employee handbook", time: "10 min", status: "next", note: "Read and sign. Includes the code of conduct and the IP assignment clause." }, { n: "05", type: "eq", title: "Order your equipment", time: "4 min", status: "locked", note: "Locked until you finish the handbook acknowledgement." }, { n: "06", type: "check", title: "Schedule your Day-1 orientation", time: "2 min", status: "waiting", note: "Waiting on Meridian Federal to confirm available times for Monday." }, ]; // ─── SCREEN 1 · welcome ───────────────────────────────── function WelcomeScreen({ brand, goTo }) { const nextTask = TASKS.find(t => t.status === "next"); const done = TASKS.filter(t => t.status === "complete").length; const total = TASKS.length; return (

{/* Greeting */}

{brand.short.toLowerCase()} · onboarding

Welcome, Daniel.

{brand.name} is getting you ready for your start date on{' '} Monday, May 26.

{/* Next-up card */}

up next · task {nextTask.n} of {total} · {nextTask.time}

{nextTask.title}.

{nextTask.note}

goTo('tasks')}> Open task

{/* Timeline preview */}

your first 90 days

{[ { d: "Day 1", l: "Onboarding day · in-office at Arlington" }, { d: "Day 30", l: "Manager check-in · with Theo Bramwell" }, { d: "Day 90", l: "Goal review · 30/60/90 plan complete" }, ].map(s => (

{s.d} {s.l}

))}

{/* HR contact */}

Stuck? Message {brand.hrName.split(' ')[0]}.

{brand.hrTitle}, {brand.short}. Reply within 4 business hours.

{/* Earned photo slot */} {/* All tasks link */}

); } // ─── SCREEN 2 · tasks ─────────────────────────────────── function TasksScreen({ brand, goTo }) { const done = TASKS.filter(t => t.status === "complete").length; return (

Your tasks.

In order. Top to bottom. Each one tells you when you'll need to come back if anything's pending.

)}

tip · you can pause and come back. progress is saved. nothing is submitted until you tap submit on the task itself.

); } function TaskRow({ task, goTo }) { const STATUS = { complete: { label: "complete", color: "var(--green-500)", bg: "var(--green-100)", fg: "var(--green-700)", border: "var(--paper-300)" }, next: { label: "next", color: "var(--brand-accent)", bg: "var(--brand-accent-100)", fg: "var(--brand-accent-700)", border: "var(--brand-accent)" }, locked: { label: "locked", color: "var(--ink-400)", bg: "var(--paper-200)", fg: "var(--ink-600)", border: "var(--paper-300)" }, waiting: { label: "waiting", color: "var(--accent-500)", bg: "var(--amber-100)", fg: "var(--amber-700)", border: "var(--paper-300)" }, }[task.status]; const isClickable = task.status === "next" || task.status === "complete"; return (

); } // ─── SCREEN 3 · sign offer letter ──────────────────────── function SignScreen({ brand, goTo }) { const [scrolled, setScrolled] = React.useState(false); const [name, setName] = React.useState(''); const [signed, setSigned] = React.useState(false); const [done, setDone] = React.useState(false); const allReady = scrolled && name.trim().length >= 4 && signed && !done; const onSubmit = () => setDone(true); if (done) return ; return (

task 01 of 06 · e-signature

Sign your offer letter.

This is the binding agreement between you and {brand.name}. Take the time you need.

{/* Three-step status */}

= 4} />

{/* Offer letter document */} setScrolled(true)} /> {/* Identity confirm */}

type your full legal name setName(e.target.value)} placeholder="Daniel A. Okafor" style={{ width: '100%', marginTop: 6, padding: '12px 14px', background: 'var(--paper-50)', border: '1.5px solid var(--paper-300)', borderRadius: 'var(--r-2)', fontFamily: 'var(--sans)', fontSize: 16, color: 'var(--ink-900)', outline: 'none', boxSizing: 'border-box', }} />

must match the name on the offer letter exactly

{/* Signature pad */} {/* Audit-trail disclosure */}

chain of custody

this signature will be captured with timestamp, ip address, device fingerprint, and a cryptographic hash of the document. the audit certificate will be available to download after completion.

Sign offer letter

); } function CeremonyStep({ n, label, done }) { return (

{done && } {label}

); } // ─── offer letter (Plex Serif body for document feel) ──── function OfferLetter({ brand, onReachEnd }) { const scrollRef = React.useRef(null); React.useEffect(() => { const el = scrollRef.current; if (!el) return; const handle = () => { if (el.scrollTop + el.clientHeight >= el.scrollHeight - 20) onReachEnd(); }; el.addEventListener('scroll', handle); return () => el.removeEventListener('scroll', handle); }, [onReachEnd]); return (

{/* Document chrome */}

offer letter · {brand.short.toLowerCase()} · v2 scroll to end

{/* Scrollable document body */}

{/* Letterhead */}

{brand.glyph}

{brand.name}

{brand.sector.toLowerCase()} · arlington va

{/* Letter body in Plex Serif */}

MAY 9, 2026

Daniel A. Okafor
1422 Quincy Street NW
Washington, DC 20011

Re: Offer of Employment, Cloud Engineer

Dear Daniel,

On behalf of {brand.name}, I am pleased to offer you the position of{' '} Cloud Engineer, reporting to{' '} Theo Bramwell, Director of Infrastructure. Your primary work location will be our Arlington, Virginia office, with hybrid flexibility of two days remote per week after the probationary period.

Compensation and start date

Your annual base salary will be{' '} $145,000, paid in twenty-six equal installments. You will be eligible for the company performance bonus pool, with a target of 10% of base salary, reviewed annually each February. Your start date is{' '} Monday, May 26, 2026.

Position contingencies

This offer is contingent upon the successful completion of (a) employment verification, including I-9 with E-Verify; (b) a standard pre-employment background check pursuant to the FCRA disclosure provided separately; and (c) verification of your interim Top Secret clearance, sponsored under contract designation 24-OPM-7714. Your access to classified systems will be limited until the final adjudication is received.

Benefits

You are eligible to enroll in our medical, dental, and vision plans effective on your start date. We contribute 80% of the premium for employee-only coverage. The 401(k) plan includes a 4% match, vesting on a three-year graded schedule. You will accrue paid time off at the rate of 20 days per year, with 11 paid federal holidays.

At-will employment

Your employment with {brand.name} is at-will, meaning either you or the company may terminate the employment relationship at any time, with or without cause or notice. Nothing in this letter creates an express or implied contract of employment for any specific duration.

Acceptance

To accept this offer, please sign below by Friday, May 16, 2026. If you have any questions, contact {brand.hrName}, {brand.hrTitle}, at the address above.

Sincerely,

{brand.hrName}

{brand.hrTitle.toUpperCase()} · {brand.short.toUpperCase()}

); } // ─── signature pad ────────────────────────────────────── function SignaturePad({ name, signed, setSigned, scrolled }) { const [mode, setMode] = React.useState('type'); // 'type' or 'draw' const canvasRef = React.useRef(null); const drawing = React.useRef(false); const [hasDrawing, setHasDrawing] = React.useState(false); const start = (e) => { if (!scrolled || !name) return; drawing.current = true; const ctx = canvasRef.current.getContext('2d'); ctx.beginPath(); const r = canvasRef.current.getBoundingClientRect(); const pt = e.touches ? e.touches[0] : e; ctx.moveTo(pt.clientX - r.left, pt.clientY - r.top); }; const move = (e) => { if (!drawing.current) return; e.preventDefault(); const ctx = canvasRef.current.getContext('2d'); const r = canvasRef.current.getBoundingClientRect(); const pt = e.touches ? e.touches[0] : e; ctx.lineTo(pt.clientX - r.left, pt.clientY - r.top); ctx.strokeStyle = '#16140F'; ctx.lineWidth = 2.4; ctx.lineCap = 'round'; ctx.stroke(); setHasDrawing(true); }; const end = () => { if (drawing.current) { drawing.current = false; if (hasDrawing) setSigned(true); } }; const clear = () => { const c = canvasRef.current; if (!c) return; c.getContext('2d').clearRect(0, 0, c.width, c.height); setHasDrawing(false); setSigned(false); }; React.useEffect(() => { if (mode === 'type') setSigned(name.trim().length >= 4); }, [mode, name, setSigned]); const ready = scrolled && name.trim().length >= 4; return (

sign · choose one

{['type', 'draw'].map(m => ( ))}

{mode === 'type' ? (

{ready ? ( {name} ) : ( {scrolled ? "type your full legal name above to confirm" : "scroll the offer letter to the end first"} )}

) : (

{hasDrawing && ( )}

)}

); } function SignComplete({ brand, goTo, name }) { return (

Offer letter signed.

Signed by {name || "Daniel A. Okafor"} on Monday, May 12 at 8:42 AM ET. Countersignature requested from {brand.hrName} at {brand.short}.

audit certificate

sha-256 · 0x9e22…b41a
rfc 3161 timestamp · 1747146126
chain index · 14,329

Download certificate (PDF)

goTo('tasks')}>Continue to next task

); } // ─── assembly ──────────────────────────────────────────── function Portal({ tweaks, setTweak }) { // Resolve brand const brand = tweaks.whitelabel ? BRANDS[tweaks.brand] || BRANDS.meridian : BRANDS.oiq; const goTo = (s) => setTweak('screen', s); const screen = tweaks.screen; return ( goTo('welcome') } : null}> {screen === 'welcome' && } {screen === 'tasks' && } {screen === 'sign' && } ); } Object.assign(window, { Portal, BRANDS });