88 lines
4.3 KiB
Markdown
88 lines
4.3 KiB
Markdown
# 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"
|