// For Care Workers, For Facilities, For Agencies — one variation each, // plus lightweight tweak to show interaction (accordion/tabs). // SF Symbol-style stroke icons (1.6px, rounded caps, current color) function WalletIcon({ size = 22 }) { return ( ); } function BadgeCheckIcon({ size = 22 }) { return ( ); } function QrShareIcon({ size = 22 }) { return ( ); } // Small uniform headshot avatars — seeded deterministic variations. function MiniAvatar({ seed = 0, size = 28 }) { const skins = ['#f5d6b3', '#e8c19a', '#d4a574', '#b78660', '#8b5e3c']; const hairs = ['#2c1810', '#4a3020', '#8b5a2b', '#c4a484', '#6b4423', '#1a1a1a', '#d4a574']; const uniforms = ['#2a6cb7', '#1f7a6a', '#5a4a8f', '#8b3a5f', '#2c5f8d', '#3d7a5a']; const skin = skins[seed % skins.length]; const hair = hairs[seed * 3 % hairs.length]; const uni = uniforms[seed * 5 % uniforms.length]; const hairStyle = seed % 4; // 0 short, 1 long/tied, 2 bun, 3 buzz const id = `av-${seed}`; return (
{/* uniform/shoulders */} {/* neck */} {/* head */} {/* hair */} {hairStyle === 0 && } {hairStyle === 1 && <> } {hairStyle === 2 && <> } {hairStyle === 3 && } {/* eyes + smile */}
); } function PortabilityIllustration() { const [phase, setPhase] = React.useState(0); // 0: at Home A, 1: transit, 2: at Home B React.useEffect(() => { const id = setInterval(() => setPhase((p) => (p + 1) % 3), 2200); return () => clearInterval(id); }, []); const House = ({ name, sub, active, dimmed, color }) =>
{active &&
✓
}
{name}
{sub}
; // Wallet position along arc: phase 0 → left of arc, phase 1 → middle, phase 2 → right const walletX = phase === 0 ? 18 : phase === 1 ? 50 : 82; // percent const walletY = phase === 1 ? 8 : 38; // percent from top of arc container return (
{/* Eyebrow pill */}
Your wallet · always with you
{/* Arc path */} {/* Houses + wallet */}
{/* Traveling wallet */}
C
Julian's Credz
{[1, 2, 3].map((i) =>
✓
)}
18 verified docs
{/* Caption bottom */}
No re-uploads.{' '} No lost files.{' '} One wallet, for life.
); } function ForCareWorkers() { const [openFaq, setOpenFaq] = React.useState(0); const faqs = [ ['Is Credz free for care workers?', 'Yes, 100%. You pay nothing to build and share your Credz wallet. '], ['How long does verification take?', 'Most issuing bodies verify in under 24 hours. Some take up to 3 business days.'], ['Can I use Credz across provinces?', 'We currently support Ontario only. We\'re actively working on adding the other provinces — stay tuned.'], ['How secure are my credentials?', 'Extremely. Credz is 100% Canadian — built in Canada, by Canadians, hosted in Canada. Your data lives in AWS Canada (Central) and never leaves Canadian soil, keeping us fully aligned with PHIPA (Ontario) and PIPEDA (federal). Every document is protected by AES-256 at-rest encryption and TLS 1.2+ in transit, so your files are unreadable to anyone — including us — without your authorization. We verify credentials directly with provincial registries (CNO, HSCPOA, and more) so what\u2019s in your wallet is always authentic and audit-ready. You own your wallet: homes and agencies can only see your documents after you grant them access through an explicit, time-stamped Digital Handshake, and you can revoke that access in one tap. Behind the scenes we run continuous SOC 2 and HIPAA-aligned monitoring with full audit logging on every interaction.'], ['What if I leave the profession?', 'Your wallet is yours. Download everything and revoke access at any time.']]; return (