hermes-skills/skills/software-development/portal-ui-mockups/references/dre-mockups-session-jul7.md

DRE Portal Mockups — Session July 7, 2026

Debt Recovery Intake Form (ScrapingAnt-inspired split-screen)

File: debt-recovery.html

Two-panel layout inspired by scrapingant.com/signup:

Left panel (desktop only):

• Dark gradient background: linear-gradient(135deg, #0f172a 0%, #1e3a5f 40%, #b45309 100%)
• Logo + tagline: "Recover what's yours. Without the headache."
• Feature icons with descriptions (AI analysis, tiered recovery, security)
• Footer note: "Trusted by contractors and owner-operators across Texas"
• Abstract SVG circle pattern overlay at 10% opacity

Right panel (white, amber accent #amber-500 / #f59e0b):

• Form sections in order: Your Information → Debtor Information → Claim Details → Document Upload → Terms → Turnstile → Submit
• Your Information: Full name, Business name, Email, Phone
• Debtor Information: Business name, Contact person, Email, Phone, Address
• Claim Details: Amount, Description, State (default Texas), Debt type dropdown
• Document upload: empty drop zone (no placeholder files), files appear after upload
• Cloudflare Turnstile invisible anti-bot (script from challenges.cloudflare.com, site key 0x4AAAAAADxaB0Bik1bqx_CA)
• Terms checkboxes: agree to TOS + confirm accuracy
• Responsive: collapses to single column on mobile, logo shifts inline

Color palette: Deep navy left gradient, white right panel, amber accent throughout.

AI Chatbot — Lead Capture + Logged-In Experience

File: dre-client-dashboard.html

The chat widget (bottom-right amber bubble, fixed position) has three states:

State 1: New Visitor (Lead Capture)

• 4-field form: Full name (req), Company, Email (req), Phone
• "Start Chat" button validates name + email required
• Data stored in window._lead object (in production: sends to CRM/email)
• Chat unlock blocked until lead submitted

State 2: Logged-In Client

• Skips lead capture entirely
• Personalized greeting: "Welcome back, {Company}! Your claim against {Debtor} is in {Tier N}. I'm Agent D.R.E."
• Case-specific quick buttons: My Case Status, Next Steps, Upload Docs
• Flagged by window._isLoggedIn = true (set by backend on auth)

State 3: Chat Conversation

• Shows after lead capture (new visitor) or immediately (logged in)
• FAQ quick-buttons: Fee structure, Required docs, Timeline
• Free-text input with Send button
• Case-specific answers for logged-in users (tier, status, timeline, upload docs)
• PII verification: asking for claim number triggers "please verify your identity" response
• Footer: "Responses from public DRE information. Not legal advice."

Answer routing logic (mockup getAnswer function):

1. Case-specific keywords first (tier, status, next steps, upload): returns personalized answer with claim context
2. Claim number / specific / case details: triggers PII verification
3. General FAQ (fee, cost, timeline, LPOA, payment): returns public knowledge answer with engaging question
4. Greeting: returns proactive engagement question
5. Fallback: invites to submit claim or learn more

All responses should: acknowledge the user's concern, answer clearly (no promises), and ask a leading question to continue the conversation.

Fee Calculator (dre-fee-calculator.html)

• Single input field for claim amount (default $15,000)
• Four side-by-side cards (Tier 1-4) with color-coded borders (green/blue/amber/red)
• Each card shows: tier name, you receive (bold amount), DRE fee, timeline
• Live calculation on input change — no submit button
• Responsive: 4-col desktop, stacked mobile

Debtor Payment Page (dre-pay.html)

• Minimal, no navigation, centered on payment
• Fields: Claim/Invoice Number, Full Name, Amount ($)
• Cloudflare Turnstile protection
• Continue to Payment button → Stripe checkout
• Trust signals: Secure Payment · ACH & Card Accepted · Receipt Emailed
• Phone support link for help

Case Aging Dashboard (dre-case-aging.html)

Dark-themed internal dashboard monitoring stalled cases:

• Summary: active cases, avg time in tier, on-track rate
• Table: claim, debtor, amount, current tier, age in tier, target, status
• Color-coded: green (on track), amber/⚠ (approaching limit), red/🔴 (stalled)
• Stalled case alert banner: "DRE-YYYY-NNNN has been in Tier N for X days — Y days past target"
• SMS notification indicator: "SMS Notifications Active — Twilio Connected"