Last active
April 16, 2026 22:54
-
-
Save chadwtaylor/95d846d7069f4d198511474f9c7ba397 to your computer and use it in GitHub Desktop.
Terp Tools - Pitch Page
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Terp Tools — The Operating System for Independent Interpreters</title> | |
| <link rel="preconnect" href="https://fonts.googleapis.com"> | |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet"> | |
| <style> | |
| *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } | |
| :root { | |
| --violet: #7c3aed; | |
| --violet-light: #a78bfa; | |
| --violet-dark: #5b21b6; | |
| --violet-glow: rgba(124, 58, 237, 0.15); | |
| --bg: #0a0a0f; | |
| --bg-card: #111118; | |
| --bg-card-hover: #16161f; | |
| --bg-surface: #0e0e14; | |
| --border: #1e1e2a; | |
| --border-light: #2a2a3a; | |
| --text: #e4e4e7; | |
| --text-muted: #71717a; | |
| --text-dim: #52525b; | |
| --emerald: #10b981; | |
| --emerald-dim: rgba(16, 185, 129, 0.15); | |
| --amber: #f59e0b; | |
| --amber-dim: rgba(245, 158, 11, 0.15); | |
| --red: #ef4444; | |
| --red-dim: rgba(239, 68, 68, 0.15); | |
| --blue: #3b82f6; | |
| --blue-dim: rgba(59, 130, 246, 0.15); | |
| } | |
| html { scroll-behavior: smooth; } | |
| body { | |
| font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; | |
| background: var(--bg); color: var(--text); line-height: 1.6; | |
| -webkit-font-smoothing: antialiased; | |
| } | |
| .mono { font-family: 'JetBrains Mono', monospace; } | |
| .container { max-width: 1120px; margin: 0 auto; padding: 0 24px; } | |
| section { padding: 100px 0; } | |
| /* -- Nav -- */ | |
| nav { | |
| position: fixed; top: 0; left: 0; right: 0; z-index: 100; | |
| background: rgba(10, 10, 15, 0.85); backdrop-filter: blur(20px); | |
| border-bottom: 1px solid var(--border); | |
| } | |
| nav .container { display: flex; align-items: center; justify-content: space-between; height: 64px; } | |
| .logo { font-size: 18px; font-weight: 700; color: var(--text); text-decoration: none; display: flex; align-items: center; gap: 8px; } | |
| .logo-icon { width: 28px; height: 28px; background: var(--violet); border-radius: 8px; display: flex; align-items: center; justify-content: center; } | |
| .logo-icon svg { width: 16px; height: 16px; } | |
| .nav-tagline { font-size: 13px; color: var(--text-dim); } | |
| /* -- Hero -- */ | |
| .hero { | |
| padding: 160px 0 100px; text-align: center; | |
| background: radial-gradient(ellipse 80% 50% at 50% -20%, var(--violet-glow), transparent); | |
| } | |
| .hero-badge { | |
| display: inline-flex; align-items: center; gap: 6px; | |
| background: var(--violet-glow); border: 1px solid rgba(124, 58, 237, 0.3); | |
| border-radius: 100px; padding: 6px 16px; font-size: 13px; font-weight: 500; | |
| color: var(--violet-light); margin-bottom: 24px; | |
| } | |
| .hero-badge .dot { width: 6px; height: 6px; background: var(--emerald); border-radius: 50%; animation: pulse 2s infinite; } | |
| @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } } | |
| .hero h1 { font-size: clamp(36px, 5.5vw, 64px); font-weight: 800; line-height: 1.08; letter-spacing: -0.03em; max-width: 840px; margin: 0 auto 20px; } | |
| .hero h1 .gradient { background: linear-gradient(135deg, var(--violet-light), var(--violet), #c084fc); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } | |
| .hero p.subtitle { font-size: clamp(16px, 2vw, 20px); color: var(--text-muted); max-width: 620px; margin: 0 auto 40px; line-height: 1.6; } | |
| .hero-ctas { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; } | |
| .btn-primary { background: var(--violet); color: white; border: none; padding: 14px 32px; border-radius: 10px; font-size: 16px; font-weight: 600; cursor: pointer; transition: all 0.2s; text-decoration: none; } | |
| .btn-primary:hover { background: var(--violet-dark); transform: translateY(-1px); } | |
| .btn-secondary { background: transparent; color: var(--text); border: 1px solid var(--border); padding: 14px 32px; border-radius: 10px; font-size: 16px; font-weight: 500; cursor: pointer; transition: all 0.2s; text-decoration: none; } | |
| .btn-secondary:hover { border-color: var(--text-dim); background: var(--bg-card); } | |
| .credibility { text-align: center; padding: 40px 0 0; } | |
| .credibility p { font-size: 14px; color: var(--text-dim); line-height: 1.8; max-width: 540px; margin: 0 auto; } | |
| .credibility strong { color: var(--text-muted); font-weight: 600; } | |
| /* -- Pain -- */ | |
| .pain { border-top: 1px solid var(--border); } | |
| .section-header { text-align: center; margin-bottom: 56px; } | |
| .section-header h2 { font-size: clamp(28px, 3.5vw, 40px); font-weight: 700; letter-spacing: -0.02em; margin-bottom: 12px; } | |
| .section-header p { color: var(--text-muted); font-size: 18px; max-width: 600px; margin: 0 auto; } | |
| .section-header .overline { display: block; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--violet-light); margin-bottom: 16px; } | |
| .pain-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; } | |
| .pain-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: 28px; } | |
| .pain-card .emoji { font-size: 28px; margin-bottom: 16px; display: block; } | |
| .pain-card h3 { font-size: 16px; font-weight: 600; margin-bottom: 8px; } | |
| .pain-card p { font-size: 14px; color: var(--text-muted); line-height: 1.6; } | |
| /* -- Showcase Sections -- */ | |
| .showcase { border-top: 1px solid var(--border); } | |
| .showcase.glow-top { background: radial-gradient(ellipse 70% 40% at 50% 0%, var(--violet-glow), transparent); } | |
| .showcase.glow-bottom { background: radial-gradient(ellipse 60% 40% at 50% 100%, var(--violet-glow), transparent); } | |
| .showcase-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; } | |
| .showcase-layout.reverse .showcase-text { order: 2; } | |
| .showcase-layout.reverse .showcase-visual { order: 1; } | |
| .showcase-text .overline { display: block; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--violet-light); margin-bottom: 12px; } | |
| .showcase-text h2 { font-size: clamp(24px, 3vw, 36px); font-weight: 700; letter-spacing: -0.02em; margin-bottom: 14px; line-height: 1.15; } | |
| .showcase-text > p { color: var(--text-muted); font-size: 15px; line-height: 1.7; margin-bottom: 20px; } | |
| .showcase-text .callout { font-size: 13px; color: var(--text-dim); font-style: italic; margin-top: 16px; } | |
| .showcase-bullets { list-style: none; display: flex; flex-direction: column; gap: 10px; margin-top: 20px; } | |
| .showcase-bullets li { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; color: var(--text-muted); line-height: 1.5; } | |
| .showcase-bullets .bullet-icon { flex-shrink: 0; width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-top: 1px; } | |
| .showcase-bullets .bullet-icon.violet { background: var(--violet-glow); color: var(--violet-light); } | |
| .showcase-bullets .bullet-icon.emerald { background: var(--emerald-dim); color: var(--emerald); } | |
| .showcase-bullets .bullet-icon svg { width: 11px; height: 11px; } | |
| /* -- Mockup Frame -- */ | |
| .mockup { background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px; padding: 20px; overflow: hidden; } | |
| .mockup-bar { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--border); } | |
| .mockup-dot { width: 8px; height: 8px; border-radius: 50%; } | |
| .mockup-dot.r { background: #ef4444; } .mockup-dot.y { background: #eab308; } .mockup-dot.g { background: #22c55e; } | |
| .mockup-bar-title { font-size: 11px; color: var(--text-dim); margin-left: 8px; font-weight: 500; } | |
| /* -- Tap Mockup -- */ | |
| .tap-item { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 8px; margin-bottom: 6px; background: var(--bg-surface); border: 1px solid var(--border); transition: border-color 0.2s; } | |
| .tap-item:hover { border-color: var(--border-light); } | |
| .tap-icon { width: 28px; height: 28px; border-radius: 6px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 13px; } | |
| .tap-icon.red { background: var(--red-dim); color: var(--red); } | |
| .tap-icon.amber { background: var(--amber-dim); color: var(--amber); } | |
| .tap-icon.blue { background: var(--blue-dim); color: var(--blue); } | |
| .tap-icon.violet { background: var(--violet-glow); color: var(--violet-light); } | |
| .tap-body { flex: 1; min-width: 0; } | |
| .tap-title { font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } | |
| .tap-meta { font-size: 10px; color: var(--text-dim); margin-top: 1px; } | |
| .tap-badge { font-size: 9px; font-weight: 600; padding: 2px 6px; border-radius: 4px; flex-shrink: 0; text-transform: uppercase; letter-spacing: 0.04em; } | |
| .tap-badge.urgent { background: var(--red-dim); color: var(--red); } | |
| .tap-badge.warning { background: var(--amber-dim); color: var(--amber); } | |
| .tap-badge.info { background: var(--blue-dim); color: var(--blue); } | |
| .tap-section-label { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-dim); margin: 12px 0 6px 4px; } | |
| /* -- Invoice Pipeline Mockup -- */ | |
| .pipeline { display: flex; flex-direction: column; gap: 0; } | |
| .pipeline-step { display: flex; align-items: center; gap: 12px; padding: 12px 0; position: relative; } | |
| .pipeline-step:not(:last-child)::after { content: ''; position: absolute; left: 15px; top: 36px; bottom: -4px; width: 1px; background: var(--border); } | |
| .pipeline-dot { width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 13px; z-index: 1; } | |
| .pipeline-dot.done { background: var(--emerald-dim); color: var(--emerald); } | |
| .pipeline-dot.active { background: var(--violet-glow); color: var(--violet-light); border: 2px solid var(--violet); } | |
| .pipeline-dot.pending { background: var(--bg-surface); color: var(--text-dim); border: 1px solid var(--border); } | |
| .pipeline-info { flex: 1; } | |
| .pipeline-label { font-size: 13px; font-weight: 600; } | |
| .pipeline-desc { font-size: 11px; color: var(--text-dim); } | |
| .auto-tag { display: inline-block; font-size: 9px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--emerald); background: var(--emerald-dim); padding: 1px 6px; border-radius: 3px; margin-left: 6px; } | |
| /* -- Doc Mockup -- */ | |
| .doc-item { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 8px; background: var(--bg-surface); border: 1px solid var(--border); margin-bottom: 5px; } | |
| .doc-icon { width: 28px; height: 28px; border-radius: 6px; background: var(--violet-glow); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } | |
| .doc-icon svg { width: 14px; height: 14px; color: var(--violet-light); } | |
| .doc-body { flex: 1; min-width: 0; } | |
| .doc-name { font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } | |
| .doc-exp { font-size: 10px; color: var(--text-dim); } | |
| .doc-check { width: 16px; height: 16px; border-radius: 4px; border: 1.5px solid var(--violet); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } | |
| .doc-check.checked { background: var(--violet); } | |
| .doc-check.checked svg { color: white; } | |
| .doc-check svg { width: 10px; height: 10px; color: transparent; } | |
| .bundle-bar { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; background: var(--violet-glow); border: 1px solid rgba(124, 58, 237, 0.3); border-radius: 8px; margin-top: 10px; } | |
| .bundle-bar span { font-size: 12px; font-weight: 600; color: var(--violet-light); } | |
| .bundle-btn { font-size: 11px; font-weight: 600; background: var(--violet); color: white; border: none; padding: 5px 14px; border-radius: 6px; cursor: pointer; } | |
| /* -- Profile Mockup -- */ | |
| .profile-mock { text-align: center; padding: 24px 20px; } | |
| .profile-avatar { width: 56px; height: 56px; border-radius: 50%; background: linear-gradient(135deg, var(--violet), #c084fc); margin: 0 auto 12px; display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 700; color: white; } | |
| .profile-name { font-size: 16px; font-weight: 700; margin-bottom: 2px; } | |
| .profile-headline { font-size: 12px; color: var(--text-muted); margin-bottom: 14px; } | |
| .profile-badges { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; margin-bottom: 16px; } | |
| .profile-badge { font-size: 10px; font-weight: 500; padding: 3px 8px; border-radius: 4px; background: var(--bg-surface); border: 1px solid var(--border); color: var(--text-muted); } | |
| .profile-badge.verified { background: var(--emerald-dim); border-color: rgba(16, 185, 129, 0.3); color: var(--emerald); } | |
| .profile-stats { display: flex; justify-content: center; gap: 20px; margin-bottom: 16px; } | |
| .profile-stat { text-align: center; } | |
| .profile-stat .num { font-size: 16px; font-weight: 700; color: var(--text); } | |
| .profile-stat .label { font-size: 10px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.06em; } | |
| .profile-cta { display: inline-block; background: var(--violet); color: white; font-size: 12px; font-weight: 600; padding: 8px 24px; border-radius: 8px; border: none; cursor: pointer; } | |
| /* -- SLA Mockup -- */ | |
| .sla-row { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 8px; background: var(--bg-surface); border: 1px solid var(--border); margin-bottom: 5px; } | |
| .sla-type { flex: 1; font-size: 12px; font-weight: 500; } | |
| .sla-time { font-size: 11px; font-weight: 600; color: var(--violet-light); font-family: 'JetBrains Mono', monospace; } | |
| .sla-override { font-size: 10px; color: var(--amber); } | |
| /* -- Team Mockup -- */ | |
| .team-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 8px; background: var(--bg-surface); border: 1px solid var(--border); margin-bottom: 5px; } | |
| .team-avatar { width: 28px; height: 28px; border-radius: 50%; background: var(--border-light); display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600; color: var(--text-muted); flex-shrink: 0; } | |
| .team-info { flex: 1; } | |
| .team-name { font-size: 12px; font-weight: 600; } | |
| .team-role { font-size: 10px; color: var(--text-dim); } | |
| .team-status { font-size: 10px; font-weight: 500; padding: 2px 7px; border-radius: 4px; } | |
| .team-status.connected { background: var(--emerald-dim); color: var(--emerald); } | |
| .team-status.pending { background: var(--amber-dim); color: var(--amber); } | |
| /* -- Income Mockup -- */ | |
| .income-card { background: var(--bg-surface); border: 1px solid var(--border); border-radius: 10px; padding: 16px; margin-bottom: 10px; } | |
| .income-card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; } | |
| .income-label { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-dim); } | |
| .pace-badge { font-size: 10px; font-weight: 500; padding: 2px 8px; border-radius: 100px; } | |
| .pace-badge.on-track { background: var(--emerald-dim); color: var(--emerald); } | |
| .pace-badge.behind { background: var(--amber-dim); color: var(--amber); } | |
| .progress-bar { height: 8px; background: #1e1e2a; border-radius: 100px; overflow: hidden; margin-bottom: 8px; position: relative; } | |
| .progress-earned { height: 100%; background: var(--violet); border-radius: 100px; position: absolute; left: 0; top: 0; } | |
| .progress-confirmed { height: 100%; background: rgba(124, 58, 237, 0.35); border-radius: 100px; position: absolute; top: 0; background-image: repeating-linear-gradient(135deg, transparent, transparent 2px, rgba(255,255,255,0.1) 2px, rgba(255,255,255,0.1) 4px); } | |
| .income-stats { display: flex; gap: 12px; font-size: 11px; color: var(--text-dim); } | |
| .income-stats span { display: flex; align-items: center; gap: 4px; } | |
| .stats-dot { width: 6px; height: 6px; border-radius: 50%; } | |
| .stats-dot.earned { background: var(--violet); } | |
| .stats-dot.confirmed { background: rgba(124, 58, 237, 0.4); } | |
| .income-target { text-align: center; margin-top: 12px; font-size: 12px; color: var(--text-dim); } | |
| .income-target strong { color: var(--text); font-size: 20px; font-weight: 700; } | |
| /* -- Automation Dial -- */ | |
| .dial-section { border-top: 1px solid var(--border); } | |
| .dial-section .container { max-width: 900px; } | |
| .dial-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 40px; } | |
| .dial-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: 24px; text-align: center; position: relative; } | |
| .dial-card.active { border-color: var(--violet); background: var(--bg-card-hover); } | |
| .dial-card .dial-label { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 8px; } | |
| .dial-card.manual .dial-label { color: var(--text-dim); } | |
| .dial-card.semi .dial-label { color: var(--amber); } | |
| .dial-card.full .dial-label { color: var(--emerald); } | |
| .dial-card p { font-size: 12px; color: var(--text-muted); line-height: 1.5; } | |
| .dial-card .dial-icon { font-size: 24px; margin-bottom: 10px; display: block; } | |
| .dial-card .recommended { position: absolute; top: -10px; right: -10px; font-size: 10px; font-weight: 600; background: var(--violet); color: white; padding: 2px 8px; border-radius: 4px; } | |
| .dial-details { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: 28px; } | |
| .dial-details p.intro { font-size: 14px; color: var(--text-muted); margin-bottom: 20px; text-align: center; } | |
| .toggle-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 24px; } | |
| .toggle-item { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--text-muted); padding: 6px 0; } | |
| .toggle-pip { width: 32px; height: 18px; border-radius: 100px; flex-shrink: 0; position: relative; } | |
| .toggle-pip.on { background: var(--emerald); } | |
| .toggle-pip.off { background: var(--text-dim); opacity: 0.4; } | |
| .toggle-pip::after { content: ''; position: absolute; top: 2px; width: 14px; height: 14px; border-radius: 50%; background: white; } | |
| .toggle-pip.on::after { left: 16px; } | |
| .toggle-pip.off::after { left: 2px; } | |
| /* -- Chat Mockup -- */ | |
| .chat-bubble { padding: 12px 16px; border-radius: 12px; font-size: 13px; line-height: 1.5; max-width: 85%; margin-bottom: 10px; } | |
| .chat-bubble.user { background: var(--violet); color: white; margin-left: auto; border-bottom-right-radius: 4px; } | |
| .chat-bubble.assistant { background: var(--bg-surface); border: 1px solid var(--border); color: var(--text); border-bottom-left-radius: 4px; } | |
| .chat-bubble .assistant-label { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--violet-light); margin-bottom: 4px; } | |
| .chat-input-mock { display: flex; align-items: center; gap: 8px; margin-top: 16px; padding: 10px 14px; border: 1px solid var(--border); border-radius: 10px; font-size: 13px; color: var(--text-dim); } | |
| .chat-input-mock svg { flex-shrink: 0; color: var(--violet-light); } | |
| .ai-prompts { display: flex; flex-direction: column; gap: 8px; margin-top: 20px; } | |
| .ai-prompt { display: flex; align-items: center; gap: 10px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px; padding: 10px 14px; font-size: 13px; color: var(--text-muted); transition: all 0.2s; } | |
| .ai-prompt:hover { border-color: rgba(124, 58, 237, 0.3); color: var(--text); } | |
| .ai-prompt .icon { color: var(--violet-light); flex-shrink: 0; } | |
| /* -- Agreement Mockup -- */ | |
| .ag-tabs { display: flex; gap: 0; border-bottom: 1px solid var(--border); margin-bottom: 16px; } | |
| .ag-tab { font-size: 11px; font-weight: 600; padding: 8px 14px; color: var(--text-dim); border-bottom: 2px solid transparent; cursor: default; } | |
| .ag-tab.active { color: var(--violet-light); border-bottom-color: var(--violet); } | |
| .ag-meta-row { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; } | |
| .ag-meta { font-size: 10px; color: var(--text-dim); display: flex; align-items: center; gap: 4px; } | |
| .ag-meta strong { color: var(--text-muted); font-weight: 600; } | |
| .ag-status { font-size: 10px; font-weight: 600; padding: 2px 8px; border-radius: 4px; background: var(--emerald-dim); color: var(--emerald); } | |
| .rate-table { width: 100%; border-collapse: collapse; font-size: 11px; } | |
| .rate-table th { text-align: left; padding: 6px 8px; font-weight: 600; color: var(--text-dim); font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; border-bottom: 1px solid var(--border); } | |
| .rate-table th.num { text-align: right; } | |
| .rate-table td { padding: 6px 8px; border-bottom: 1px solid rgba(30,30,42,0.4); color: var(--text-muted); } | |
| .rate-table td.num { text-align: right; font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--text); } | |
| .rate-table td.label { font-weight: 500; color: var(--text); } | |
| .rate-table tr.highlight td { background: rgba(124, 58, 237, 0.05); } | |
| .ag-sub-header { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-dim); padding: 12px 0 6px; margin-top: 4px; border-top: 1px solid var(--border); } | |
| .ag-policy-row { display: flex; align-items: center; gap: 8px; padding: 6px 8px; font-size: 11px; border-bottom: 1px solid rgba(30,30,42,0.4); } | |
| .ag-policy-icon { width: 22px; height: 22px; border-radius: 5px; display: flex; align-items: center; justify-content: center; font-size: 11px; flex-shrink: 0; } | |
| .ag-policy-icon.mileage { background: var(--blue-dim); } | |
| .ag-policy-icon.parking { background: var(--amber-dim); } | |
| .ag-policy-icon.travel { background: var(--emerald-dim); } | |
| .ag-policy-icon.fee { background: var(--violet-glow); } | |
| .ag-policy-name { flex: 1; color: var(--text); font-weight: 500; } | |
| .ag-policy-detail { color: var(--text-dim); font-family: 'JetBrains Mono', monospace; font-size: 10px; } | |
| .ag-sidebar { display: flex; flex-direction: column; gap: 12px; } | |
| .ag-sidebar-card { background: var(--bg-surface); border: 1px solid var(--border); border-radius: 8px; padding: 12px; } | |
| .ag-sidebar-card h5 { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-dim); margin-bottom: 8px; } | |
| .ag-field { display: flex; justify-content: space-between; align-items: center; padding: 3px 0; font-size: 11px; } | |
| .ag-field .label { color: var(--text-dim); } | |
| .ag-field .value { color: var(--text); font-weight: 500; } | |
| .ag-sig { text-align: center; padding: 8px 0; } | |
| .ag-sig-img { font-family: 'Georgia', serif; font-size: 18px; font-style: italic; color: var(--text); margin-bottom: 4px; } | |
| .ag-sig-meta { font-size: 9px; color: var(--text-dim); } | |
| .ag-layout { display: grid; grid-template-columns: 1fr 200px; gap: 16px; } | |
| @media (max-width: 768px) { .ag-layout { grid-template-columns: 1fr; } } | |
| /* -- More Grid -- */ | |
| .more-features { border-top: 1px solid var(--border); } | |
| .more-features .container { max-width: 900px; } | |
| .more-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; } | |
| .more-item { background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; padding: 20px; } | |
| .more-item h4 { font-size: 14px; font-weight: 600; margin-bottom: 4px; } | |
| .more-item p { font-size: 12px; color: var(--text-muted); line-height: 1.5; } | |
| /* -- Before/After -- */ | |
| .diff { border-top: 1px solid var(--border); text-align: center; } | |
| .diff h2 { font-size: clamp(28px, 3.5vw, 40px); font-weight: 700; letter-spacing: -0.02em; margin-bottom: 16px; } | |
| .diff > .container > p { color: var(--text-muted); font-size: 18px; margin-bottom: 56px; max-width: 600px; margin-left: auto; margin-right: auto; } | |
| .diff-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0; max-width: 800px; margin: 0 auto; } | |
| .diff-col { padding: 32px; } | |
| .diff-col.old { border-right: 1px solid var(--border); text-align: right; } | |
| .diff-col h3 { font-size: 14px; font-weight: 600; margin-bottom: 20px; text-transform: uppercase; letter-spacing: 0.06em; } | |
| .diff-col.old h3 { color: var(--text-dim); } | |
| .diff-col.new h3 { color: var(--violet-light); } | |
| .diff-item { font-size: 15px; color: var(--text-muted); padding: 8px 0; } | |
| .diff-col.old .diff-item { text-decoration: line-through; opacity: 0.5; } | |
| .diff-col.new .diff-item { color: var(--text); } | |
| /* -- CTA -- */ | |
| .cta-section { border-top: 1px solid var(--border); text-align: center; background: radial-gradient(ellipse 60% 50% at 50% 0%, var(--violet-glow), transparent); } | |
| .cta-section h2 { font-size: clamp(28px, 4vw, 48px); font-weight: 800; letter-spacing: -0.03em; margin-bottom: 16px; } | |
| .cta-section p { color: var(--text-muted); font-size: 18px; max-width: 520px; margin: 0 auto; } | |
| footer { border-top: 1px solid var(--border); padding: 40px 0; text-align: center; font-size: 13px; color: var(--text-dim); } | |
| /* -- Responsive -- */ | |
| @media (max-width: 768px) { | |
| section { padding: 72px 0; } | |
| .hero { padding: 120px 0 80px; } | |
| .hero h1 { font-size: 32px; } | |
| .showcase-layout { grid-template-columns: 1fr; gap: 32px; } | |
| .showcase-layout.reverse .showcase-text { order: 1; } | |
| .showcase-layout.reverse .showcase-visual { order: 2; } | |
| .showcase-text h2 { font-size: 24px; } | |
| .diff-grid { grid-template-columns: 1fr; } | |
| .diff-col.old { border-right: none; border-bottom: 1px solid var(--border); text-align: left; } | |
| .diff-col { padding: 24px 16px; } | |
| .dial-cards { grid-template-columns: 1fr; } | |
| .toggle-grid { grid-template-columns: 1fr; } | |
| .more-grid { grid-template-columns: 1fr; } | |
| .pain-grid { grid-template-columns: 1fr; } | |
| .mockup { padding: 14px; overflow-x: auto; -webkit-overflow-scrolling: touch; } | |
| .pipeline-step .pipeline-desc { font-size: 10px; } | |
| .profile-badges { gap: 4px; } | |
| .profile-badge { font-size: 9px; padding: 2px 6px; } | |
| .ai-prompts { gap: 6px; } | |
| .ai-prompt { font-size: 12px; padding: 8px 12px; } | |
| .section-header h2 { font-size: 28px; } | |
| .section-header p { font-size: 16px; } | |
| .tap-item { padding: 8px 10px; gap: 8px; } | |
| .tap-title { font-size: 11px; } | |
| .chat-bubble { font-size: 12px; max-width: 92%; } | |
| } | |
| @media (max-width: 480px) { | |
| .container { padding: 0 16px; } | |
| .hero h1 { font-size: 28px; } | |
| .pain-card { padding: 20px; } | |
| .showcase-bullets li { font-size: 13px; } | |
| .income-stats { flex-direction: column; gap: 4px; } | |
| .profile-stats { gap: 12px; } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- Nav --> | |
| <nav> | |
| <div class="container"> | |
| <a href="#" class="logo"> | |
| <div class="logo-icon"><svg viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2.5"><path d="M12 3l1.912 5.813a2 2 0 0 0 1.275 1.275L21 12l-5.813 1.912a2 2 0 0 0-1.275 1.275L12 21l-1.912-5.813a2 2 0 0 0-1.275-1.275L3 12l5.813-1.912a2 2 0 0 0 1.275-1.275L12 3z"/></svg></div> | |
| Terp Tools | |
| </a> | |
| <span style="font-size:13px; color:var(--text-dim);">The Operating System for Interpreters</span> | |
| </div> | |
| </nav> | |
| <!-- ═══════════════════════ HERO ═══════════════════════ --> | |
| <section class="hero"> | |
| <div class="container"> | |
| <div class="hero-badge"><span class="dot"></span> From the creators of Linguabee</div> | |
| <h1>Interpret. <span class="gradient">We'll handle the rest.</span></h1> | |
| <p class="subtitle">Agreements, invoicing, scheduling, documents, action items — all on autopilot. One platform that runs the business side so you can focus on what you do best.</p> | |
| <div class="hero-ctas"> | |
| <a href="#tap" class="btn-secondary" onclick="event.preventDefault();document.getElementById('tap').scrollIntoView({behavior:'smooth'})">See How It Works</a> | |
| </div> | |
| <div class="credibility"> | |
| <p>We spent years building technology for language service agencies.<br>Now we're bringing that same engine — the rate logic, the billing complexity, the interpreter-specific workflows — <strong>directly to you.</strong></p> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- ═══════════════════════ PAIN POINTS ═══════════════════════ --> | |
| <section class="pain"> | |
| <div class="container"> | |
| <div class="section-header"> | |
| <h2>Sound familiar?</h2> | |
| <p>Running a freelance interpreting practice means running a second full-time job you never signed up for.</p> | |
| </div> | |
| <div class="pain-grid"> | |
| <div class="pain-card"> | |
| <span class="emoji">📑</span> | |
| <h3>Every agency has different everything</h3> | |
| <p>Rates, minimums, mileage, invoice formats, portals. You keep a cheat sheet just to remember who pays what.</p> | |
| </div> | |
| <div class="pain-card"> | |
| <span class="emoji">🧠</span> | |
| <h3>Decision fatigue is real</h3> | |
| <p>Which invoices went out? Who hasn't paid? Is that cert expiring? Your brain runs a background process 24/7.</p> | |
| </div> | |
| <div class="pain-card"> | |
| <span class="emoji">💰</span> | |
| <h3>Getting paid is a job in itself</h3> | |
| <p>Cross-referencing pay stubs against spreadsheets. Some interpreters are being underpaid and don't even know it.</p> | |
| </div> | |
| <div class="pain-card"> | |
| <span class="emoji">📅</span> | |
| <h3>Schedule lives in five places</h3> | |
| <p>Email, text, portals, phone — across multiple agencies. Copy into Google Calendar and pray nothing slips.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- ═══════════════════════ TAP ═══════════════════════ --> | |
| <section class="showcase" id="tap"> | |
| <div class="container"> | |
| <div class="showcase-layout"> | |
| <div class="showcase-text"> | |
| <span class="overline">Tap — Action Inbox</span> | |
| <h2>Never wonder "what should I do next?" again.</h2> | |
| <p>Tap is a smart, prioritized inbox of everything that needs attention. The system detects what's missing, what's overdue, and what's about to slip — then ranks it by urgency. Decision fatigue is real. We get it. So Tap thinks for you.</p> | |
| <ul class="showcase-bullets"> | |
| <li><span class="bullet-icon violet"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><polyline points="20 6 9 17 4 12"/></svg></span> Overdue invoices bubble to the top automatically</li> | |
| <li><span class="bullet-icon violet"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><polyline points="20 6 9 17 4 12"/></svg></span> Expiring certs surface before they lapse</li> | |
| <li><span class="bullet-icon violet"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><polyline points="20 6 9 17 4 12"/></svg></span> Missing job details flagged before billing</li> | |
| <li><span class="bullet-icon violet"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><polyline points="20 6 9 17 4 12"/></svg></span> SLA breach alerts when you're behind on response</li> | |
| </ul> | |
| <p class="callout">Open the app. See what matters. Tap and act. Done.</p> | |
| </div> | |
| <div class="showcase-visual"> | |
| <div class="mockup"> | |
| <div class="mockup-bar"> | |
| <span class="mockup-dot r"></span><span class="mockup-dot y"></span><span class="mockup-dot g"></span> | |
| <span class="mockup-bar-title">Tap — 7 items need attention</span> | |
| </div> | |
| <div class="tap-section-label">Urgent</div> | |
| <div class="tap-item"> | |
| <div class="tap-icon red">$</div> | |
| <div class="tap-body"> | |
| <div class="tap-title">Invoice #IV4XMH8 overdue — St. Luke's</div> | |
| <div class="tap-meta">$1,240.00 · 12 days past due</div> | |
| </div> | |
| <span class="tap-badge urgent">Overdue</span> | |
| </div> | |
| <div class="tap-item"> | |
| <div class="tap-icon red">📄</div> | |
| <div class="tap-body"> | |
| <div class="tap-title">RID NIC certification expiring</div> | |
| <div class="tap-meta">Expires in 14 days · 2.5 CEUs remaining</div> | |
| </div> | |
| <span class="tap-badge urgent">Expiring</span> | |
| </div> | |
| <div class="tap-section-label">Needs Action</div> | |
| <div class="tap-item"> | |
| <div class="tap-icon amber">📍</div> | |
| <div class="tap-body"> | |
| <div class="tap-title">Missing location — BK7K3NR</div> | |
| <div class="tap-meta">Denver Health · Tomorrow 9:00 AM</div> | |
| </div> | |
| <span class="tap-badge warning">Missing</span> | |
| </div> | |
| <div class="tap-item"> | |
| <div class="tap-icon amber">🔗</div> | |
| <div class="tap-body"> | |
| <div class="tap-title">Missing remote URL — BK9DPLT</div> | |
| <div class="tap-meta">Colorado Legal · Friday 2:00 PM</div> | |
| </div> | |
| <span class="tap-badge warning">Missing</span> | |
| </div> | |
| <div class="tap-item"> | |
| <div class="tap-icon blue">📄</div> | |
| <div class="tap-body"> | |
| <div class="tap-title">Agreement needed — Metro Schools</div> | |
| <div class="tap-meta">3 bookings without bound agreement</div> | |
| </div> | |
| <span class="tap-badge info">Setup</span> | |
| </div> | |
| <div class="tap-section-label">Informational</div> | |
| <div class="tap-item"> | |
| <div class="tap-icon violet">✅</div> | |
| <div class="tap-body"> | |
| <div class="tap-title">Confirm times — BK4XMH8</div> | |
| <div class="tap-meta">Children's Hospital · Completed yesterday</div> | |
| </div> | |
| <span class="tap-badge info">Confirm</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- ═══════════════════════ SLA / RESPONSE TARGETS ═══════════════════════ --> | |
| <section class="showcase glow-top"> | |
| <div class="container"> | |
| <div class="showcase-layout reverse"> | |
| <div class="showcase-text"> | |
| <span class="overline">Response Targets</span> | |
| <h2>Prioritize who matters most.</h2> | |
| <p>Set response time targets for each type of action in Tap. Denver Health needs a 2-hour response? Done. A new client gets 24 hours? Fine. When you breach a target, the system escalates it automatically.</p> | |
| <ul class="showcase-bullets"> | |
| <li><span class="bullet-icon emerald"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><polyline points="20 6 9 17 4 12"/></svg></span> Global defaults for every Tap type</li> | |
| <li><span class="bullet-icon emerald"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><polyline points="20 6 9 17 4 12"/></svg></span> Client-level overrides for VIP accounts</li> | |
| <li><span class="bullet-icon emerald"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><polyline points="20 6 9 17 4 12"/></svg></span> Breach alerts when you're behind on SLA</li> | |
| <li><span class="bullet-icon emerald"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><polyline points="20 6 9 17 4 12"/></svg></span> Tap re-ranks by urgency automatically</li> | |
| </ul> | |
| </div> | |
| <div class="showcase-visual"> | |
| <div class="mockup"> | |
| <div class="mockup-bar"> | |
| <span class="mockup-dot r"></span><span class="mockup-dot y"></span><span class="mockup-dot g"></span> | |
| <span class="mockup-bar-title">Settings › Response Targets</span> | |
| </div> | |
| <div class="tap-section-label">Global Defaults</div> | |
| <div class="sla-row"><span class="sla-type">Pending requests</span><span class="sla-time">2h</span></div> | |
| <div class="sla-row"><span class="sla-type">Confirm times</span><span class="sla-time">4h</span></div> | |
| <div class="sla-row"><span class="sla-type">Missing location</span><span class="sla-time">12h</span></div> | |
| <div class="sla-row"><span class="sla-type">Overdue invoice</span><span class="sla-time">24h</span></div> | |
| <div class="sla-row"><span class="sla-type">Missing agreement</span><span class="sla-time">48h</span></div> | |
| <div class="tap-section-label">Client Override — Denver Health</div> | |
| <div class="sla-row"><span class="sla-type">Pending requests</span><span class="sla-time">1h</span><span class="sla-override">VIP</span></div> | |
| <div class="sla-row"><span class="sla-type">Confirm times</span><span class="sla-time">2h</span><span class="sla-override">VIP</span></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- ═══════════════════════ AGREEMENT ENGINE — DETAIL ═══════════════════════ --> | |
| <section class="showcase"> | |
| <div class="container"> | |
| <div class="section-header"> | |
| <span class="overline">The engine behind everything</span> | |
| <h2>Set it once. Autopilot from there.</h2> | |
| <p>Every client gets a full agreement: rates by time bracket, cancellation tiers, short-notice premiums, mileage policies, expense rules, and billing preferences. Set it up once — every job, proforma, and invoice downstream flows from it automatically.</p> | |
| </div> | |
| <!-- Agreement Detail Mockup --> | |
| <div class="mockup" style="max-width:900px; margin:0 auto;"> | |
| <div class="mockup-bar"> | |
| <span class="mockup-dot r"></span><span class="mockup-dot y"></span><span class="mockup-dot g"></span> | |
| <span class="mockup-bar-title">Agreement — Denver Health · On-Site · AG7K3NR</span> | |
| <span class="ag-status" style="margin-left:auto;">Active</span> | |
| </div> | |
| <!-- Meta row --> | |
| <div class="ag-meta-row"> | |
| <div class="ag-meta"><strong>Client:</strong> Denver Health</div> | |
| <div class="ag-meta"><strong>Modality:</strong> In-Person</div> | |
| <div class="ag-meta"><strong>Zone:</strong> Denver Metro</div> | |
| <div class="ag-meta"><strong>Language:</strong> ASL ↔ English</div> | |
| <div class="ag-meta"><strong>Provider:</strong> Interpreter</div> | |
| </div> | |
| <!-- Tabs --> | |
| <div class="ag-tabs"> | |
| <div class="ag-tab active">Rates</div> | |
| <div class="ag-tab">Policies</div> | |
| <div class="ag-tab">Notes</div> | |
| <div class="ag-tab">Attachments (2)</div> | |
| <div class="ag-tab">Versions (3)</div> | |
| </div> | |
| <!-- Two-column layout --> | |
| <div class="ag-layout"> | |
| <!-- Main content --> | |
| <div> | |
| <!-- Rate Table --> | |
| <table class="rate-table"> | |
| <thead> | |
| <tr> | |
| <th>Rate Type</th> | |
| <th class="num">Weekday</th> | |
| <th class="num">Weeknight</th> | |
| <th class="num">Weekend</th> | |
| <th class="num">Holiday</th> | |
| </tr> | |
| </thead> | |
| <tbody> | |
| <tr class="highlight"> | |
| <td class="label">Base Rate</td> | |
| <td class="num">$91.00</td> | |
| <td class="num">$105.00</td> | |
| <td class="num">$120.00</td> | |
| <td class="num">$145.00</td> | |
| </tr> | |
| <tr> | |
| <td class="label">Specialized (Medical)</td> | |
| <td class="num">+$15.00</td> | |
| <td class="num">+$15.00</td> | |
| <td class="num">+$15.00</td> | |
| <td class="num">+$15.00</td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| <!-- Cancellation Tiers --> | |
| <div class="ag-sub-header">Cancellation Tiers</div> | |
| <table class="rate-table"> | |
| <thead> | |
| <tr><th>Notice Window</th><th class="num">Charge</th><th class="num">Weekday Amount</th></tr> | |
| </thead> | |
| <tbody> | |
| <tr><td class="label">≤ 72 hours</td><td class="num">50%</td><td class="num" style="color:var(--amber);">$45.50</td></tr> | |
| <tr><td class="label">≤ 24 hours</td><td class="num">100%</td><td class="num" style="color:var(--amber);">$91.00</td></tr> | |
| <tr><td class="label">≤ 4 hours</td><td class="num">125%</td><td class="num" style="color:var(--red);">$113.75</td></tr> | |
| </tbody> | |
| </table> | |
| <!-- Short-Notice Tiers --> | |
| <div class="ag-sub-header">Short-Notice Premiums</div> | |
| <table class="rate-table"> | |
| <thead> | |
| <tr><th>Booked Within</th><th class="num">Surcharge</th></tr> | |
| </thead> | |
| <tbody> | |
| <tr><td class="label">≤ 24 hours</td><td class="num" style="color:var(--violet-light);">+$25.00/hr</td></tr> | |
| <tr><td class="label">≤ 4 hours</td><td class="num" style="color:var(--violet-light);">+$50.00/hr</td></tr> | |
| </tbody> | |
| </table> | |
| <!-- Expense Policies --> | |
| <div class="ag-sub-header">Expense Policies</div> | |
| <div class="ag-policy-row"> | |
| <div class="ag-policy-icon mileage">🚗</div> | |
| <div class="ag-policy-name">Mileage</div> | |
| <div class="ag-policy-detail">$0.705/mi · IRS 2026 · 20 mi floor</div> | |
| </div> | |
| <div class="ag-policy-row"> | |
| <div class="ag-policy-icon parking">🅿</div> | |
| <div class="ag-policy-name">Parking</div> | |
| <div class="ag-policy-detail">Actual · $30 cap</div> | |
| </div> | |
| <div class="ag-policy-row"> | |
| <div class="ag-policy-icon travel">🕑</div> | |
| <div class="ag-policy-name">Travel Time</div> | |
| <div class="ag-policy-detail">At rate · $91.00/hr</div> | |
| </div> | |
| <div class="ag-policy-row"> | |
| <div class="ag-policy-icon fee">💳</div> | |
| <div class="ag-policy-name">Appearance Fee</div> | |
| <div class="ag-policy-detail">Fixed · $35.00/job</div> | |
| </div> | |
| </div> | |
| <!-- Sidebar --> | |
| <div class="ag-sidebar"> | |
| <div class="ag-sidebar-card"> | |
| <h5>Details</h5> | |
| <div class="ag-field"><span class="label">Effective</span><span class="value">Jan 1, 2026</span></div> | |
| <div class="ag-field"><span class="label">Expires</span><span class="value">Dec 31, 2026</span></div> | |
| <div class="ag-field"><span class="label">Minimum</span><span class="value">2 hours</span></div> | |
| <div class="ag-field"><span class="label">Increments</span><span class="value">15 min</span></div> | |
| <div class="ag-field"><span class="label">Net Terms</span><span class="value">Net 30</span></div> | |
| </div> | |
| <div class="ag-sidebar-card"> | |
| <h5>Signature</h5> | |
| <div class="ag-sig"> | |
| <div class="ag-sig-img">Sarah Mitchell</div> | |
| <div class="ag-sig-meta">Signed Jan 3, 2026 · v1<br>✓ Valid</div> | |
| </div> | |
| </div> | |
| <div class="ag-sidebar-card"> | |
| <h5>Version History</h5> | |
| <div class="ag-field"><span class="label">v3 · Current</span><span class="value" style="font-size:10px;">Apr 1</span></div> | |
| <div class="ag-field"><span class="label" style="color:var(--text-dim);">v2 · Rate update</span><span class="value" style="font-size:10px; color:var(--text-dim);">Mar 1</span></div> | |
| <div class="ag-field"><span class="label" style="color:var(--text-dim);">v1 · Created</span><span class="value" style="font-size:10px; color:var(--text-dim);">Jan 1</span></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <p style="text-align:center; color:var(--text-dim); font-size:13px; margin-top:20px;">One agreement per client. Everything downstream — proformas, invoices, payment tracking — flows from it automatically.</p> | |
| </div> | |
| </section> | |
| <!-- ═══════════════════════ AGREEMENT ENGINE — FLOW ═══════════════════════ --> | |
| <section class="showcase glow-top" style="padding-top:60px;"> | |
| <div class="container"> | |
| <div class="showcase-layout"> | |
| <div class="showcase-text"> | |
| <span class="overline">From agreement to payment</span> | |
| <h2>The full autopilot pipeline.</h2> | |
| <p>Once the agreement exists, every job that runs through it triggers the pipeline. Rates applied, proforma generated, invoice sent, payment tracked. You log start and end time. The engine does the rest.</p> | |
| <ul class="showcase-bullets"> | |
| <li><span class="bullet-icon violet"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><polyline points="20 6 9 17 4 12"/></svg></span> Correct time-bracket rate applied automatically</li> | |
| <li><span class="bullet-icon violet"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><polyline points="20 6 9 17 4 12"/></svg></span> Minimums and increment rounding handled</li> | |
| <li><span class="bullet-icon violet"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><polyline points="20 6 9 17 4 12"/></svg></span> Mileage, parking, travel time added per policy</li> | |
| <li><span class="bullet-icon violet"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><polyline points="20 6 9 17 4 12"/></svg></span> PO numbers, cost centers, billing cadence pre-filled</li> | |
| <li><span class="bullet-icon violet"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><polyline points="20 6 9 17 4 12"/></svg></span> Discrepancy detection: expected vs. actual pay</li> | |
| </ul> | |
| <p class="callout">Full manual control at every step. Autopilot when you're ready.</p> | |
| </div> | |
| <div class="showcase-visual"> | |
| <div class="mockup"> | |
| <div class="mockup-bar"> | |
| <span class="mockup-dot r"></span><span class="mockup-dot y"></span><span class="mockup-dot g"></span> | |
| <span class="mockup-bar-title">Job → Invoice Pipeline</span> | |
| </div> | |
| <div class="pipeline"> | |
| <div class="pipeline-step"> | |
| <div class="pipeline-dot done">✓</div> | |
| <div class="pipeline-info"><div class="pipeline-label">Job completed</div><div class="pipeline-desc">Tue Apr 15, 9:00 – 11:30 AM · Weekday · Denver Health</div></div> | |
| </div> | |
| <div class="pipeline-step"> | |
| <div class="pipeline-dot done">✓</div> | |
| <div class="pipeline-info"><div class="pipeline-label">Proforma generated <span class="auto-tag">Auto</span></div><div class="pipeline-desc">2.5 hrs @ $91/hr = $227.50<br>18 mi @ $0.705 = $12.69<br>Parking: $8.00 (actual)<br><strong>Total: $248.19</strong></div></div> | |
| </div> | |
| <div class="pipeline-step"> | |
| <div class="pipeline-dot done">✓</div> | |
| <div class="pipeline-info"><div class="pipeline-label">Invoice sent <span class="auto-tag">Auto</span></div><div class="pipeline-desc">IV4XMH8 · billing@denverhealth.org · Net 30</div></div> | |
| </div> | |
| <div class="pipeline-step"> | |
| <div class="pipeline-dot active">→</div> | |
| <div class="pipeline-info"><div class="pipeline-label">Reminder sent <span class="auto-tag">Auto</span></div><div class="pipeline-desc">7-day reminder · Apr 22</div></div> | |
| </div> | |
| <div class="pipeline-step"> | |
| <div class="pipeline-dot pending">5</div> | |
| <div class="pipeline-info"><div class="pipeline-label">Payment reconciled <span class="auto-tag">Auto</span></div><div class="pipeline-desc">Expected $248.19 · Due May 15</div></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- ═══════════════════════ INVOICING & COLLECTIONS ═══════════════════════ --> | |
| <section class="showcase glow-bottom"> | |
| <div class="container"> | |
| <div class="showcase-layout"> | |
| <div class="showcase-text"> | |
| <span class="overline">Invoicing & Collections</span> | |
| <h2>Sit back. We'll chase the money.</h2> | |
| <p>Invoices auto-generate from completed jobs using agreement rates. They send themselves. Reminders fire on schedule. Late fees apply automatically. Collections escalate without you lifting a finger.</p> | |
| <ul class="showcase-bullets"> | |
| <li><span class="bullet-icon violet"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><polyline points="20 6 9 17 4 12"/></svg></span> Proformas auto-generated from job + agreement</li> | |
| <li><span class="bullet-icon violet"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><polyline points="20 6 9 17 4 12"/></svg></span> Invoices auto-bundled and sent per client cadence</li> | |
| <li><span class="bullet-icon violet"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><polyline points="20 6 9 17 4 12"/></svg></span> Payment reminders at 7, 14, 30 days — automatic</li> | |
| <li><span class="bullet-icon violet"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><polyline points="20 6 9 17 4 12"/></svg></span> Late fees applied per policy — no manual tracking</li> | |
| <li><span class="bullet-icon violet"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><polyline points="20 6 9 17 4 12"/></svg></span> Discrepancy detection: "Paid $380, expected $425"</li> | |
| </ul> | |
| <p class="callout">The entire pipeline from job completion to cash in the bank — hands-free.</p> | |
| </div> | |
| <div class="showcase-visual"> | |
| <div class="mockup"> | |
| <div class="mockup-bar"> | |
| <span class="mockup-dot r"></span><span class="mockup-dot y"></span><span class="mockup-dot g"></span> | |
| <span class="mockup-bar-title">Billing › Invoice Pipeline</span> | |
| </div> | |
| <div class="tap-section-label">This Week's Pipeline</div> | |
| <div class="tap-item"> | |
| <div class="tap-icon" style="background: var(--emerald-dim); color: var(--emerald);">✓</div> | |
| <div class="tap-body"><div class="tap-title">Denver Health — $240.19</div><div class="tap-meta">Proforma approved · Invoice IV4XMH8 sent</div></div> | |
| <span class="auto-tag">Auto-sent</span> | |
| </div> | |
| <div class="tap-item"> | |
| <div class="tap-icon" style="background: var(--emerald-dim); color: var(--emerald);">✓</div> | |
| <div class="tap-body"><div class="tap-title">Children's Hospital — $455.00</div><div class="tap-meta">Proforma approved · Invoice IV9DPLT sent</div></div> | |
| <span class="auto-tag">Auto-sent</span> | |
| </div> | |
| <div class="tap-item"> | |
| <div class="tap-icon amber">⚠</div> | |
| <div class="tap-body"><div class="tap-title">Colorado Legal — $680.00</div><div class="tap-meta">Reminder sent (7 days) · Due Apr 22</div></div> | |
| <span class="tap-badge warning">Reminded</span> | |
| </div> | |
| <div class="tap-item"> | |
| <div class="tap-icon red">!</div> | |
| <div class="tap-body"><div class="tap-title">Metro Schools — $1,120.00</div><div class="tap-meta">14 days overdue · Late fee $56 applied</div></div> | |
| <span class="tap-badge urgent">Late fee</span> | |
| </div> | |
| <div style="margin-top:12px; padding:10px 14px; background:var(--bg-surface); border:1px solid var(--border); border-radius:8px; display:flex; justify-content:space-between; align-items:center;"> | |
| <span style="font-size:11px; color:var(--text-dim);">This week total</span> | |
| <span style="font-size:14px; font-weight:700; color:var(--emerald);">$2,551.19</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- ═══════════════════════ DOCUMENT VAULT ═══════════════════════ --> | |
| <section class="showcase"> | |
| <div class="container"> | |
| <div class="showcase-layout reverse"> | |
| <div class="showcase-text"> | |
| <span class="overline">Document Vault</span> | |
| <h2>Bundle. Send. Done.</h2> | |
| <p>Every cert, license, W-9, and insurance doc in one place. Expiration tracking built in — Tap alerts you before anything lapses. When a new client needs your credentials? Bundle the docs they always ask for into a packet and share with one link.</p> | |
| <ul class="showcase-bullets"> | |
| <li><span class="bullet-icon emerald"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><polyline points="20 6 9 17 4 12"/></svg></span> Expiration alerts at 60, 30, and 15 days</li> | |
| <li><span class="bullet-icon emerald"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><polyline points="20 6 9 17 4 12"/></svg></span> Verification badges (RID, state, issuer-agnostic)</li> | |
| <li><span class="bullet-icon emerald"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><polyline points="20 6 9 17 4 12"/></svg></span> Credential packets — select docs, share one link</li> | |
| <li><span class="bullet-icon emerald"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><polyline points="20 6 9 17 4 12"/></svg></span> Document templates for common requests</li> | |
| </ul> | |
| <p class="callout">New agency wants your docs? 30 seconds. Not 30 minutes digging through email.</p> | |
| </div> | |
| <div class="showcase-visual"> | |
| <div class="mockup"> | |
| <div class="mockup-bar"> | |
| <span class="mockup-dot r"></span><span class="mockup-dot y"></span><span class="mockup-dot g"></span> | |
| <span class="mockup-bar-title">Documents › Create Packet</span> | |
| </div> | |
| <div class="tap-section-label">Select documents for packet</div> | |
| <div class="doc-item"> | |
| <div class="doc-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg></div> | |
| <div class="doc-body"><div class="doc-name">RID NIC Certification</div><div class="doc-exp" style="color:var(--emerald);">Verified · Exp Dec 2027</div></div> | |
| <div class="doc-check checked"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><polyline points="20 6 9 17 4 12"/></svg></div> | |
| </div> | |
| <div class="doc-item"> | |
| <div class="doc-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg></div> | |
| <div class="doc-body"><div class="doc-name">W-9 (2026)</div><div class="doc-exp">Current tax year</div></div> | |
| <div class="doc-check checked"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><polyline points="20 6 9 17 4 12"/></svg></div> | |
| </div> | |
| <div class="doc-item"> | |
| <div class="doc-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg></div> | |
| <div class="doc-body"><div class="doc-name">Professional Liability Insurance</div><div class="doc-exp" style="color:var(--amber);">Exp in 28 days</div></div> | |
| <div class="doc-check checked"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><polyline points="20 6 9 17 4 12"/></svg></div> | |
| </div> | |
| <div class="doc-item"> | |
| <div class="doc-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg></div> | |
| <div class="doc-body"><div class="doc-name">Background Check</div><div class="doc-exp">Verified · Exp Mar 2027</div></div> | |
| <div class="doc-check"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><polyline points="20 6 9 17 4 12"/></svg></div> | |
| </div> | |
| <div class="bundle-bar"> | |
| <span>3 documents selected</span> | |
| <button class="bundle-btn">Send Packet →</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- ═══════════════════════ PUBLIC PROFILE + BOOKING ═══════════════════════ --> | |
| <section class="showcase glow-top"> | |
| <div class="container"> | |
| <div class="showcase-layout"> | |
| <div class="showcase-text"> | |
| <span class="overline">Public Profile & Client Booking</span> | |
| <h2>Market yourself. Let clients book you.</h2> | |
| <p>A professional profile page with verified credentials, specializations, languages, and availability. Share one link for new client outreach. Favorite clients can submit booking requests directly — no phone tag, no email chains.</p> | |
| <ul class="showcase-bullets"> | |
| <li><span class="bullet-icon violet"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><polyline points="20 6 9 17 4 12"/></svg></span> Shareable URL: terptools.com/p/janedoe</li> | |
| <li><span class="bullet-icon violet"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><polyline points="20 6 9 17 4 12"/></svg></span> Verified credential badges (RID, state licenses)</li> | |
| <li><span class="bullet-icon violet"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><polyline points="20 6 9 17 4 12"/></svg></span> Specializations, modalities, and languages listed</li> | |
| <li><span class="bullet-icon violet"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><polyline points="20 6 9 17 4 12"/></svg></span> "Request Booking" button for direct client access</li> | |
| <li><span class="bullet-icon violet"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><polyline points="20 6 9 17 4 12"/></svg></span> Credential packet link — one click onboarding</li> | |
| </ul> | |
| </div> | |
| <div class="showcase-visual"> | |
| <div class="mockup"> | |
| <div class="mockup-bar"> | |
| <span class="mockup-dot r"></span><span class="mockup-dot y"></span><span class="mockup-dot g"></span> | |
| <span class="mockup-bar-title">terptools.com/p/janedoe</span> | |
| </div> | |
| <div class="profile-mock"> | |
| <div class="profile-avatar">JD</div> | |
| <div class="profile-name">Jane Doe, NIC</div> | |
| <div class="profile-headline">ASL Interpreter · Medical & Legal · Denver, CO</div> | |
| <div class="profile-badges"> | |
| <span class="profile-badge verified">✓ RID NIC</span> | |
| <span class="profile-badge verified">✓ CO Licensed</span> | |
| <span class="profile-badge">Medical</span> | |
| <span class="profile-badge">Legal</span> | |
| <span class="profile-badge">K-12</span> | |
| <span class="profile-badge">Onsite</span> | |
| <span class="profile-badge">Remote</span> | |
| </div> | |
| <div class="profile-stats"> | |
| <div class="profile-stat"><div class="num">12</div><div class="label">Years</div></div> | |
| <div class="profile-stat"><div class="num">500+</div><div class="label">Jobs</div></div> | |
| <div class="profile-stat"><div class="num"><2h</div><div class="label">Response</div></div> | |
| </div> | |
| <button class="profile-cta">Request Booking</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- ═══════════════════════ TEAM MANAGEMENT ═══════════════════════ --> | |
| <section class="showcase"> | |
| <div class="container"> | |
| <div class="showcase-layout reverse"> | |
| <div class="showcase-text"> | |
| <span class="overline">Team & Client Management</span> | |
| <h2>Not just clients. Your team too.</h2> | |
| <p>Manage providers on your team with their own agreements and rate structures. Subcontract jobs, track earnings, and let the system handle payouts. Full AP invoicing — the same automation engine that sends invoices to clients also pays your team.</p> | |
| <ul class="showcase-bullets"> | |
| <li><span class="bullet-icon emerald"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><polyline points="20 6 9 17 4 12"/></svg></span> Agreements with team members (provider rates)</li> | |
| <li><span class="bullet-icon emerald"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><polyline points="20 6 9 17 4 12"/></svg></span> Auto-pay via Stripe Connect — set it and forget it</li> | |
| <li><span class="bullet-icon emerald"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><polyline points="20 6 9 17 4 12"/></svg></span> AP invoicing alongside AR — one billing hub</li> | |
| <li><span class="bullet-icon emerald"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><polyline points="20 6 9 17 4 12"/></svg></span> Job assignment tracking per team member</li> | |
| <li><span class="bullet-icon emerald"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><polyline points="20 6 9 17 4 12"/></svg></span> Client cascading notes visible on every booking</li> | |
| </ul> | |
| </div> | |
| <div class="showcase-visual"> | |
| <div class="mockup"> | |
| <div class="mockup-bar"> | |
| <span class="mockup-dot r"></span><span class="mockup-dot y"></span><span class="mockup-dot g"></span> | |
| <span class="mockup-bar-title">Team Members</span> | |
| </div> | |
| <div class="team-row"> | |
| <div class="team-avatar">MR</div> | |
| <div class="team-info"><div class="team-name">Maria Rodriguez</div><div class="team-role">ASL Interpreter · 8 jobs this month</div></div> | |
| <span class="team-status connected">Stripe Active</span> | |
| </div> | |
| <div class="team-row"> | |
| <div class="team-avatar">KL</div> | |
| <div class="team-info"><div class="team-name">Kevin Lee</div><div class="team-role">CDI · 3 jobs this month</div></div> | |
| <span class="team-status connected">Stripe Active</span> | |
| </div> | |
| <div class="team-row"> | |
| <div class="team-avatar">SP</div> | |
| <div class="team-info"><div class="team-name">Sarah Park</div><div class="team-role">ASL Interpreter · New</div></div> | |
| <span class="team-status pending">Connect Stripe</span> | |
| </div> | |
| <div style="margin-top:12px; padding:10px 14px; background:var(--bg-surface); border:1px solid var(--border); border-radius:8px;"> | |
| <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:6px;"> | |
| <span style="font-size:11px; color:var(--text-dim);">Ready to pay</span> | |
| <span style="font-size:13px; font-weight:700; color:var(--text);">$2,180.00</span> | |
| </div> | |
| <div style="display:flex; justify-content:space-between; align-items:center;"> | |
| <span style="font-size:11px; color:var(--text-dim);">Paid this month</span> | |
| <span style="font-size:13px; font-weight:700; color:var(--emerald);">$4,350.00</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- ═══════════════════════ INCOME GOALS ═══════════════════════ --> | |
| <section class="showcase glow-bottom"> | |
| <div class="container"> | |
| <div class="showcase-layout"> | |
| <div class="showcase-text"> | |
| <span class="overline">Income Goals</span> | |
| <h2>Know where you stand. Always.</h2> | |
| <p>Set an annual or monthly income target. The dashboard shows earned, confirmed, and the gap — in real time. Behind pace? You'll know by mid-month, not at the end when it's too late to do anything about it.</p> | |
| <ul class="showcase-bullets"> | |
| <li><span class="bullet-icon violet"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><polyline points="20 6 9 17 4 12"/></svg></span> Annual target broken into monthly pace</li> | |
| <li><span class="bullet-icon violet"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><polyline points="20 6 9 17 4 12"/></svg></span> Earned vs. confirmed vs. gap visualization</li> | |
| <li><span class="bullet-icon violet"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><polyline points="20 6 9 17 4 12"/></svg></span> On-track / behind-pace alerts at a glance</li> | |
| <li><span class="bullet-icon violet"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><polyline points="20 6 9 17 4 12"/></svg></span> Financial reports: P&L, aging, tax-ready package</li> | |
| </ul> | |
| </div> | |
| <div class="showcase-visual"> | |
| <div class="mockup"> | |
| <div class="mockup-bar"> | |
| <span class="mockup-dot r"></span><span class="mockup-dot y"></span><span class="mockup-dot g"></span> | |
| <span class="mockup-bar-title">Dashboard › Income Progress</span> | |
| </div> | |
| <div class="income-target"> | |
| <div style="margin-bottom:8px;"><strong>$96,000</strong></div> | |
| <div>Annual target · $8,000/month pace</div> | |
| </div> | |
| <div style="margin-top:16px;"> | |
| <div class="income-card"> | |
| <div class="income-card-header"> | |
| <span class="income-label">April Income</span> | |
| <span class="pace-badge on-track">On track</span> | |
| </div> | |
| <div class="progress-bar"> | |
| <div class="progress-earned" style="width: 42%"></div> | |
| <div class="progress-confirmed" style="left: 42%; width: 38%"></div> | |
| </div> | |
| <div class="income-stats"> | |
| <span><span class="stats-dot earned"></span> $3,360 earned</span> | |
| <span><span class="stats-dot confirmed"></span> $3,040 confirmed</span> | |
| </div> | |
| </div> | |
| <div class="income-card"> | |
| <div class="income-card-header"> | |
| <span class="income-label">2026 Year-to-Date</span> | |
| <span class="pace-badge behind">Slightly behind</span> | |
| </div> | |
| <div class="progress-bar"> | |
| <div class="progress-earned" style="width: 28%"></div> | |
| <div class="progress-confirmed" style="left: 28%; width: 8%"></div> | |
| </div> | |
| <div class="income-stats"> | |
| <span><span class="stats-dot earned"></span> $26,880 earned</span> | |
| <span><span class="stats-dot confirmed"></span> $7,680 confirmed</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- ═══════════════════════ CALENDAR SYNC ═══════════════════════ --> | |
| <section class="showcase"> | |
| <div class="container"> | |
| <div class="showcase-layout reverse"> | |
| <div class="showcase-text"> | |
| <span class="overline">Calendar Sync</span> | |
| <h2>Two-way sync. One place. Zero copy-pasting.</h2> | |
| <p>Connect Google Calendar and every job shows up in one unified view. Day, work-week, week, month, or list — choose how you see the schedule. Jobs push upstream to the calendar too. A true one-stop shop.</p> | |
| <ul class="showcase-bullets"> | |
| <li><span class="bullet-icon emerald"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><polyline points="20 6 9 17 4 12"/></svg></span> Bidirectional Google Calendar sync</li> | |
| <li><span class="bullet-icon emerald"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><polyline points="20 6 9 17 4 12"/></svg></span> Conflict detection — overlaps and back-to-back flagged</li> | |
| <li><span class="bullet-icon emerald"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><polyline points="20 6 9 17 4 12"/></svg></span> Color-coded by client for instant recognition</li> | |
| <li><span class="bullet-icon emerald"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><polyline points="20 6 9 17 4 12"/></svg></span> Timezone-aware — set once in settings, applied everywhere</li> | |
| <li><span class="bullet-icon emerald"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><polyline points="20 6 9 17 4 12"/></svg></span> Five calendar views: day, work-week, week, month, list</li> | |
| </ul> | |
| </div> | |
| <div class="showcase-visual"> | |
| <div class="mockup"> | |
| <div class="mockup-bar"> | |
| <span class="mockup-dot r"></span><span class="mockup-dot y"></span><span class="mockup-dot g"></span> | |
| <span class="mockup-bar-title">Calendar › Work Week</span> | |
| </div> | |
| <div style="display:grid; grid-template-columns: 40px repeat(5,1fr); gap:4px; font-size:10px;"> | |
| <div style="color:var(--text-dim); padding:4px 0;"></div> | |
| <div style="color:var(--text-dim); text-align:center; padding:4px 0; font-weight:600;">Mon</div> | |
| <div style="color:var(--text-dim); text-align:center; padding:4px 0; font-weight:600;">Tue</div> | |
| <div style="color:var(--text-dim); text-align:center; padding:4px 0; font-weight:600;">Wed</div> | |
| <div style="color:var(--text-dim); text-align:center; padding:4px 0; font-weight:600;">Thu</div> | |
| <div style="color:var(--text-dim); text-align:center; padding:4px 0; font-weight:600;">Fri</div> | |
| <!-- 9 AM --> | |
| <div style="color:var(--text-dim); padding:4px 0; text-align:right; padding-right:6px;">9a</div> | |
| <div style="background:var(--violet-glow); border-left:2px solid var(--violet); border-radius:4px; padding:4px 6px; grid-row: span 2;"> | |
| <div style="font-weight:600; color:var(--violet-light);">Denver Health</div> | |
| <div style="color:var(--text-dim);">9-11:30a · Onsite</div> | |
| </div> | |
| <div></div> | |
| <div style="background:rgba(59,130,246,0.1); border-left:2px solid var(--blue); border-radius:4px; padding:4px 6px; grid-row: span 2;"> | |
| <div style="font-weight:600; color:var(--blue);">Children's Hosp</div> | |
| <div style="color:var(--text-dim);">9-12p · Onsite</div> | |
| </div> | |
| <div></div> | |
| <div style="background:rgba(16,185,129,0.1); border-left:2px solid var(--emerald); border-radius:4px; padding:4px 6px;"> | |
| <div style="font-weight:600; color:var(--emerald);">St. Luke's</div> | |
| <div style="color:var(--text-dim);">9-10a · Remote</div> | |
| </div> | |
| <!-- 11 AM --> | |
| <div style="color:var(--text-dim); padding:4px 0; text-align:right; padding-right:6px;">11a</div> | |
| <div></div> | |
| <div></div> | |
| <div></div> | |
| <!-- 1 PM --> | |
| <div style="color:var(--text-dim); padding:4px 0; text-align:right; padding-right:6px;">1p</div> | |
| <div></div> | |
| <div style="background:rgba(245,158,11,0.1); border-left:2px solid var(--amber); border-radius:4px; padding:4px 6px;"> | |
| <div style="font-weight:600; color:var(--amber);">CO Legal</div> | |
| <div style="color:var(--text-dim);">1-3p · Onsite</div> | |
| </div> | |
| <div></div> | |
| <div style="background:var(--violet-glow); border-left:2px solid var(--violet); border-radius:4px; padding:4px 6px;"> | |
| <div style="font-weight:600; color:var(--violet-light);">Denver Health</div> | |
| <div style="color:var(--text-dim);">2-4p · Onsite</div> | |
| </div> | |
| <div></div> | |
| <!-- 3 PM --> | |
| <div style="color:var(--text-dim); padding:4px 0; text-align:right; padding-right:6px;">3p</div> | |
| <div style="background:rgba(59,130,246,0.1); border-left:2px solid var(--blue); border-radius:4px; padding:4px 6px;"> | |
| <div style="font-weight:600; color:var(--blue);">Metro Schools</div> | |
| <div style="color:var(--text-dim);">3-5p · Onsite</div> | |
| </div> | |
| <div></div> | |
| <div></div> | |
| <div></div> | |
| <div style="background:rgba(245,158,11,0.1); border-left:2px solid var(--amber); border-radius:4px; padding:4px 6px;"> | |
| <div style="font-weight:600; color:var(--amber);">CO Legal</div> | |
| <div style="color:var(--text-dim);">3-5p · Remote</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- ═══════════════════════ AUTOMATION DIAL ═══════════════════════ --> | |
| <section class="dial-section"> | |
| <div class="container"> | |
| <div class="section-header"> | |
| <h2>Choose how much you want to let go</h2> | |
| <p>One dial. Three modes. From full manual control to complete autopilot — and everything in between.</p> | |
| </div> | |
| <div class="dial-cards"> | |
| <div class="dial-card manual"> | |
| <span class="dial-icon">⚙️</span> | |
| <div class="dial-label">Manual</div> | |
| <p>Review and approve every step yourself. Still faster than spreadsheets.</p> | |
| </div> | |
| <div class="dial-card semi"> | |
| <span class="dial-icon">⚡</span> | |
| <div class="dial-label">Semi-Auto</div> | |
| <p>Proformas auto-generate. Invoices auto-bundle. You review before sending.</p> | |
| </div> | |
| <div class="dial-card full active"> | |
| <span class="recommended">Popular</span> | |
| <span class="dial-icon">🚀</span> | |
| <div class="dial-label">Full Autopilot</div> | |
| <p>Jobs complete, invoices send, reminders fire, late fees apply. You just interpret.</p> | |
| </div> | |
| </div> | |
| <div class="dial-details"> | |
| <p class="intro">Or go granular — toggle each automation independently:</p> | |
| <div class="toggle-grid"> | |
| <div class="toggle-item"><span class="toggle-pip on"></span> Auto-approve proformas</div> | |
| <div class="toggle-item"><span class="toggle-pip on"></span> Auto-bundle invoices</div> | |
| <div class="toggle-item"><span class="toggle-pip on"></span> Auto-send invoices</div> | |
| <div class="toggle-item"><span class="toggle-pip on"></span> Auto-send payment reminders</div> | |
| <div class="toggle-item"><span class="toggle-pip on"></span> Auto-apply late fees</div> | |
| <div class="toggle-item"><span class="toggle-pip on"></span> Auto-pay team members</div> | |
| <div class="toggle-item"><span class="toggle-pip on"></span> Auto-confirm completed jobs</div> | |
| <div class="toggle-item"><span class="toggle-pip on"></span> SLA breach alerts</div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- ═══════════════════════ AI ASSISTANT ═══════════════════════ --> | |
| <section class="showcase glow-bottom"> | |
| <div class="container"> | |
| <div class="showcase-layout"> | |
| <div class="showcase-text"> | |
| <span class="overline">AI Assistant</span> | |
| <h2>A personal assistant at your fingertips.</h2> | |
| <p>Not a generic chatbot. An AI that knows your clients, agreements, schedule, and numbers. It helps you prepare for jobs, find parking, grab coffee between appointments, strategize rates, and catch clients slipping away — before you even notice.</p> | |
| <div class="ai-prompts"> | |
| <div class="ai-prompt"> | |
| <svg class="icon" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg> | |
| Where should I park for my 2pm at Denver Health? | |
| </div> | |
| <div class="ai-prompt"> | |
| <svg class="icon" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 2v20M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/></svg> | |
| Which clients haven't booked recently? Am I losing anyone? | |
| </div> | |
| <div class="ai-prompt"> | |
| <svg class="icon" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg> | |
| Prep me for tomorrow's medical appointment at St. Luke's | |
| </div> | |
| <div class="ai-prompt"> | |
| <svg class="icon" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 12h-4l-3 9L9 3l-3 9H2"/></svg> | |
| Is my rate with Colorado Legal competitive? | |
| </div> | |
| <div class="ai-prompt"> | |
| <svg class="icon" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></svg> | |
| Any good coffee spots near my 10am in Aurora? | |
| </div> | |
| </div> | |
| </div> | |
| <div class="showcase-visual"> | |
| <div class="mockup"> | |
| <div class="mockup-bar"> | |
| <span class="mockup-dot r"></span><span class="mockup-dot y"></span><span class="mockup-dot g"></span> | |
| <span class="mockup-bar-title">Assistant</span> | |
| </div> | |
| <div class="chat-bubble user">I have a gap between my 10am and 2pm tomorrow. Anything I should know?</div> | |
| <div class="chat-bubble assistant"> | |
| <div class="assistant-label">Assistant</div> | |
| Your 10am at Children's Hospital ends around 11:30. Your 2pm is at Denver Health, 12 minutes away. You've got about 2 hours free.<br><br> | |
| There's a Huckleberry Roasters 4 min from Children's — you've been near there before. Also, Denver Health requires a VAT signature, and the parking garage on Bannock fills up after 1pm. I'd head over by 1:30. | |
| </div> | |
| <div class="chat-bubble user">Also — should I be worried about Metro Schools? Feels like they've gone quiet.</div> | |
| <div class="chat-bubble assistant"> | |
| <div class="assistant-label">Assistant</div> | |
| Good instinct. Metro Schools hasn't booked in 38 days — they typically book weekly. Last booking was March 8. Might be worth a check-in. Want me to draft a message? | |
| </div> | |
| <div class="chat-input-mock"> | |
| <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 3l1.912 5.813a2 2 0 0 0 1.275 1.275L21 12l-5.813 1.912a2 2 0 0 0-1.275 1.275L12 21l-1.912-5.813a2 2 0 0 0-1.275-1.275L3 12l5.813-1.912a2 2 0 0 0 1.275-1.275L12 3z"/></svg> | |
| Ask anything about your business... | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- ═══════════════════════ MORE FEATURES ═══════════════════════ --> | |
| <section class="more-features"> | |
| <div class="container" style="max-width:900px;"> | |
| <div class="section-header"> | |
| <h2>And there's more. A lot more.</h2> | |
| <p>Every corner of the platform is built for how interpreters actually run a practice.</p> | |
| </div> | |
| <div class="more-grid"> | |
| <div class="more-item"><h4>Financial Reports</h4><p>P&L, income by client, aging report, mileage summary, expenses by category. CSV export.</p></div> | |
| <div class="more-item"><h4>Tax-Ready Package</h4><p>Income by agency, expenses mapped to Schedule C, mileage deductions. Hand it to the CPA.</p></div> | |
| <div class="more-item"><h4>Rate Schedules & Zones</h4><p>Time-bracket rates (weekday, evening, overnight, holiday) and geographic zones. Right rate, right job.</p></div> | |
| <div class="more-item"><h4>Coverage Warnings</h4><p>Missing agreement rates? Policy gaps? The system catches it before it becomes a billing problem.</p></div> | |
| <div class="more-item"><h4>Retainers & Recurring</h4><p>Retainer agreements and recurring invoices generate on schedule. No manual creation.</p></div> | |
| <div class="more-item"><h4>Consumer Continuity</h4><p>Track the actual people receiving services. Visit history, codes, and notes carry forward.</p></div> | |
| <div class="more-item"><h4>Agency Earnings Reconciliation</h4><p>Log what agencies paid. System compares against what they owed. Discrepancies flagged.</p></div> | |
| <div class="more-item"><h4>Mileage & Expenses</h4><p>Log per job. Auto-splits reimbursable vs. tax-deductible. Year-end package included.</p></div> | |
| <div class="more-item"><h4>Schedule Conflict Detection</h4><p>Overlaps and back-to-back flagged automatically. No more discovering double-bookings day-of.</p></div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- ═══════════════════════ BEFORE / AFTER ═══════════════════════ --> | |
| <section class="diff"> | |
| <div class="container"> | |
| <h2>Before and after</h2> | |
| <p>What changes when you stop duct-taping your practice together.</p> | |
| <div class="diff-grid"> | |
| <div class="diff-col old"> | |
| <h3>Without Terp Tools</h3> | |
| <div class="diff-item">Agency cheat sheet in Google Sheets</div> | |
| <div class="diff-item">Manual rate lookups every invoice</div> | |
| <div class="diff-item">Copy-pasting jobs into Google Calendar</div> | |
| <div class="diff-item">Chasing payments by text and email</div> | |
| <div class="diff-item">Certs in a folder you'll find later</div> | |
| <div class="diff-item">Sunday night invoice reconciliation</div> | |
| <div class="diff-item">Mentally tracking what needs doing</div> | |
| <div class="diff-item">Hoping you're not being underpaid</div> | |
| <div class="diff-item">Paying team out of pocket, tracking in a notebook</div> | |
| <div class="diff-item">No idea if you'll make your income target</div> | |
| </div> | |
| <div class="diff-col new"> | |
| <h3>With Terp Tools</h3> | |
| <div class="diff-item">Agreement Engine stores every rate and rule</div> | |
| <div class="diff-item">Proformas auto-generated, rates auto-applied</div> | |
| <div class="diff-item">Two-way calendar sync, one unified view</div> | |
| <div class="diff-item">Automated reminders, late fees, collections</div> | |
| <div class="diff-item">Document Vault with expiration alerts + packets</div> | |
| <div class="diff-item">Everything reconciles itself</div> | |
| <div class="diff-item">Tap tells you what's next, ranked by urgency</div> | |
| <div class="diff-item">Discrepancy detection catches every dollar</div> | |
| <div class="diff-item">Team payouts via Stripe, AP invoicing built in</div> | |
| <div class="diff-item">Income pace tracking with real-time alerts</div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- ══════════���════════════ CLOSING ═══════════════════════ --> | |
| <section class="cta-section"> | |
| <div class="container"> | |
| <h2>Focus on interpreting.<br>Let the platform run the business.</h2> | |
| <p>Built in Denver, CO by people who've spent years in the language services industry. This is the tool we wished existed.</p> | |
| </div> | |
| </section> | |
| <footer> | |
| <div class="container">© 2026 Terp Tools — Denver, CO</div> | |
| </footer> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment