```
#### Browser Chrome Bar
Three dots (red/yellow/green at 60% opacity) + URL text: "Singoa — Pay Application Tracker"
#### Sidebar Navigation (left, 48px wide, dark)
Vertical icon strip: Dashboard, Pay Apps (active, amber highlight), Retainage, Lien Calendar, Reports, Settings. Active item has left amber border + amber icon tint.
#### Top Summary Bar (4 metric cards, horizontal)
| Metric | Value | Animation | Color |
|--------|-------|-----------|-------|
| Billed This Month | $2.47M | Counter 0 → 2.47 over 1.5s | White text |
| Pending Approval | $892K | Counter 0 → 892 over 1.5s | Amber/yellow |
| Retainage Held | $1.84M | Counter 0 → 1.84 over 1.5s | Orange |
| Lien Deadlines (30d) | 7 | Counter 0 → 7 over 1s | Red pulse |
Each card: `bg-white/5 rounded-lg p-3 border border-white/5`. Value in `text-lg font-bold text-white`. Label in `text-[10px] text-gray-500`. Use `useInView` + `requestAnimationFrame` counter pattern from existing MetricCard component.
#### Data Table — Active Pay Applications
Column headers: `text-xs text-gray-500 px-3 py-1` grid row.
| Pay App # | Project | GC | Period | SOV Amount | Retainage (5%) | Net Due | Status |
|-----------|---------|-----|--------|-----------|----------------|---------|--------|
| PA-2847 | Riverside Mixed-Use Tower | Turner Construction | Jan 2026 | $184,500 | $9,225 | $175,275 | Approved (green badge) |
| PA-2848 | Metro Transit Station Ph2 | Skanska USA | Jan 2026 | $267,000 | $13,350 | $253,650 | AI Generating (yellow, pulsing dot) |
| PA-2849 | Harbor Bridge Rehabilitation | Kiewit Corp | Jan 2026 | $92,300 | $4,615 | $87,685 | Submitted (blue badge) |
| PA-2850 | Parkview Elementary School | Gilbane Building | Dec 2025 | $43,750 | $2,188 | $41,562 | Retainage Due (amber badge) |
| PA-2851 | Downtown Office Complex | Hensel Phelps | Jan 2026 | $156,800 | $7,840 | $148,960 | Overdue 12d (red, pulsing) |
Row animation: `motion.div initial={{ opacity: 0, x: -10 }} animate={{ opacity: 1, x: 0 }} transition={{ delay: 0.8 + i * 0.15 }}`
Status badge styles:
- Approved: `text-green-400` + solid green dot
- AI Generating: `text-yellow-400` + pulsing dot `animate={{ opacity: [1, 0.4, 1] }} transition={{ duration: 1.5, repeat: Infinity }}`
- Submitted: `text-blue-400` + solid blue dot
- Retainage Due: `text-amber-400` + solid amber dot
- Overdue: `text-red-400` + pulsing red dot + "12d" suffix
#### Bottom Bar — Quick Actions
Two buttons: "Generate Pay App" (amber gradient, primary) and "Bulk Submit to GCs" (outlined, white/10 bg). Small text: "Next lien deadline: TX — Harbor Bridge — 14 days" in red-400.
#### Framer Motion for Entire Dashboard
```jsx
```
### Hero Content (Left Side)
#### Pill Badge
"Construction AR Automation — 14-Day Free Trial" in `bg-white/10 backdrop-blur-sm rounded-[90px] px-4 py-2 border border-[#F59E0B]/40`
#### Headline (h1)
"Construction Companies Lose **$40B+ to Retainage Holds** Every Year"
- "$40B+" in gradient text `bg-clip-text text-transparent` using `linear-gradient(135deg, #F59E0B, #EA580C)`
- Source: ASA Subcontractors Legal Defense Fund
- Size: `lg:text-[48px] md:text-[36px] text-[26px] font-bold text-white leading-tight`
#### Subheadline
"AI-powered pay app automation, retainage tracking, and lien deadline management — built for contractors tired of waiting 83 days to get paid."
- "83 days" references CFMA Financial Survey 2024 (DSO benchmark 60-83 days)
- Size: `lg:text-[20px] text-[16px] text-white/80 leading-relaxed`
#### Animated Counter Stats (3 inline)
| Stat | Display | Source |
|------|---------|--------|
| 83 → 45 days | Animated: starts at 83, counts down to 45 | CFMA avg DSO → projected reduction |
| 62% | "Pay app rejections from admin errors — eliminated" | Procore Construction Payment Guide 2024 |
| 50 states | "Lien deadlines tracked automatically" | Levelset State Lien Law Resources |
#### CTAs (two buttons, side by side)
1. Primary: "Schedule Your Construction AR Assessment" — amber gradient, `rounded-[90px]`, arrow icon, `trackEvent('industry_cta_click', { industry: 'construction', cta_type: 'hero_assessment' })`
2. Secondary: "Watch 2-Min Demo" — outlined, `border-2 border-[#F59E0B] bg-[#F59E0B]/10`, play icon
#### Trust Bar (below CTAs)
Inline badges: "Sage 300 CRE" | "Procore" | "Viewpoint" | "AIA G702/G703" | "SOC 2"
Style: `text-sm text-white/50 flex items-center gap-2` with small amber icons
---
## C) SECTION-BY-SECTION LAYOUT — 9 Sections
### Section 1: HERO (covered in Section B above)
- Layout: Split — 55% text left, 45% dashboard right (desktop). Stacked on mobile.
- Background: Dark gradient `linear-gradient(135deg, #0a0a1a 0%, #1a150a 25%, #2d1f0f 50%, #1a150a 75%, #0e0a2c 100%)`
- Decorative: Three blurred gradient orbs (amber/orange) at `blur-3xl`, `aria-hidden="true"`
- Framer Motion: Staggered entry — pill (0.2s), h1 (0.3s), subhead (0.4s), stats (0.5s), CTAs (0.6s), trust bar (0.7s), dashboard (0.9s)
---
### Section 2: PROBLEM — "The Construction Payment Crisis"
- Layout: Centered header + 4-card grid (2x2 on desktop, 1-col on mobile)
- Background: Light `bg-gradient-to-b from-[#F9FAFB] to-white` with subtle diagonal stripe pattern at 5% opacity
#### Section Header
- Pill: "Industry Challenge" with warning icon, amber border
- h2: "Sound Familiar?" — `lg:text-[40px] font-bold text-[#0D121F]`
- Subtext: "Construction AR is broken. Here's the proof."
#### 4 Pain Point Cards
Each card: `bg-white rounded-2xl p-8 border border-[#E0E0E0] hover:border-[#F59E0B]/30 hover:shadow-xl transition-all`. Top amber gradient bar on hover.
| Card | Icon | Headline | Stat | Source |
|------|------|----------|------|--------|
| 1 | FaFileSignature | "Your billing team spends 3 days on pay apps" | "4-8 hours per pay application, 15-50 subs per cycle" | Payapps Billing Efficiency Report; ENR Cost Report 2024 |
| 2 | FaPercentage | "$1.2M in retainage you can't track" | "$40B+ held industry-wide, 73% held longer than required" | ASA Retainage Survey 2023; ASA Subcontractors Legal Defense Fund |
| 3 | FaExclamationTriangle | "You missed a lien deadline last quarter" | "Only 17% use automated tracking; $1.5B+ in lost recovery annually" | Levelset Construction Payment Practices Survey 2023; NASBP 2024 |
| 4 | FaChartLine | "Your DSO is 83 days and your surety is asking questions" | "Construction DSO 60-83 days vs 40-45 all-industry avg" | CFMA Financial Survey 2024 |
Each stat displayed in amber gradient text, source in `text-xs text-gray-400 italic` below.
#### Framer Motion
Cards: `initial={{ opacity: 0, y: 30 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true }} transition={{ delay: index * 0.12 }}`
---
### Section 3: BEFORE/AFTER — "Manual Pay Apps vs. Singoa Automation"
- Layout: Split-screen comparison. Left panel (red-tinted "Before"), right panel (green-tinted "After"). On mobile: stacked vertically.
- Background: White `bg-white`
#### Left Panel — "Before: Manual Process"
Dark card with red accent: `bg-[#1a1a2e] rounded-2xl p-6 border border-red-500/20`
Title: "Without Singoa" in `text-red-400`
Timeline of 6 steps (vertical, with time estimates):
1. "Collect % complete from field PMs" — 2-3 hours
2. "Update Schedule of Values in Excel" — 1-2 hours
3. "Fill out AIA G702/G703 manually" — 2-4 hours
4. "Chase subs for lien waivers" — 3-5 hours
5. "Submit via email/Textura/GCPay portal" — 1 hour
6. "Wait... and follow up manually" — 30-60 days
Total: "8-15 hours per pay app + 30-60 day wait"
Style: Each step is a row with a red dot connector, time in `text-red-400 font-mono`
#### Right Panel — "After: Singoa Automation"
Dark card with green accent: `bg-[#1a2e1a] rounded-2xl p-6 border border-green-500/20`
Title: "With Singoa" in `text-green-400`
Timeline of 4 steps (compressed, faster):
1. "AI pulls % complete from Procore/field data" — automatic
2. "G702/G703 auto-generated, validated for errors" — 12 minutes
3. "Lien waivers auto-collected, compliance verified" — automatic
4. "Submitted to all GC portals + AI follow-up triggered" — 1 click
Total: "12 minutes per pay app + AI-powered collections"
Style: Each step with green dot connector, time in `text-green-400 font-mono`
#### Center Divider
Vertical line with "VS" badge in amber circle on desktop. Horizontal with "VS" on mobile.
#### Bottom Stat Bar
"62% of pay app rejections are due to admin errors, not disputes — Singoa's AI validation catches them before submission."
Source: Procore Construction Payment Guide 2024
Style: `bg-[#FEF3C7] rounded-xl p-4 border border-[#FDE68A] text-center text-sm`
#### Framer Motion
Left panel: `initial={{ opacity: 0, x: -40 }} whileInView={{ opacity: 1, x: 0 }}`
Right panel: `initial={{ opacity: 0, x: 40 }} whileInView={{ opacity: 1, x: 0 }}`
Both: `viewport={{ once: true }} transition={{ duration: 0.6 }}`
---
### Section 4: PRODUCT SHOWCASE — 4-Tab Explorer
- Layout: Tabbed interface (Versapay pattern). Tab bar at top, content area below swaps dashboard mockup + description per tab.
- Background: `bg-[#0D121F]` dark section for contrast with dashboard mockups
#### Section Header
- h2: "One Platform. Every Construction AR Workflow." — white text
- Subtext: "Explore how Singoa handles the full billing-to-cash lifecycle" — `text-white/70`
#### Tab Bar
4 tabs, horizontal on desktop, scrollable on mobile. Active tab: amber bottom border + white text. Inactive: `text-white/50 hover:text-white/80`.
#### Tab 1: "Pay App Automation"
- Mockup: AIA G702/G703 form view. Shows a single pay application with:
- Header: Application #12, Project: Riverside Mixed-Use Tower, To: Turner Construction, Period: January 2026
- SOV table (5 rows): Item | Description | Scheduled Value | Previous | This Period | Materials Stored | Total % | Balance | Retainage
- Row data examples: "03100 — Concrete Foundations | $485,000 | $340,000 | $72,500 | $12,000 | 87% | $60,500 | $21,225"
- Bottom totals row with contract sum, change orders, net amount
- "AI Validated" green badge in top-right corner
- Description: "Auto-generate AIA G702/G703 from your Schedule of Values. AI validates line items, flags errors before submission, and tracks change order impacts. Cut prep time from 4-8 hours to 12 minutes per application."
- Stat: "62% of rejections are admin errors (Procore 2024) — Singoa catches them first"
#### Tab 2: "Retainage Tracking"
- Mockup: Card grid showing 4 project retainage cards:
- Each card: Project name, contract value, retainage held ($), retainage %, est. release date, status bar
- Example: "Harbor Bridge Rehab | $3.2M contract | $284K retainage (8.9%) | Release: Mar 2026 | 72% complete"
- Summary header: "Total Retainage: $1.84M across 24 projects"
- Color coding: Green (on track), Yellow (approaching completion), Red (overdue for release)
- Small stacked bar chart showing retainage accumulation over 12 months
- Description: "Track retainage across every project and subcontract. Get alerts when release conditions are met — substantial completion, punch list sign-off, final lien waivers. Never leave money on the table."
- Stat: "$40B+ in retainage held industry-wide; 73% held longer than required (ASA 2023)"
#### Tab 3: "Lien Management"
- Mockup: Calendar view (month) with deadline markers:
- Color-coded deadlines: Preliminary Notice (blue), Lien Filing (red), Lien Waiver Due (orange), Bond Claim (purple)
- Right sidebar: "Upcoming Deadlines" list — 5 items sorted by urgency
- Example: "TX — Harbor Bridge — Preliminary Notice — 14 days" (yellow alert)
- Example: "CA — Metro Station — Lien Filing — 7 days" (red alert, pulsing)
- Small US map outline with colored dots showing active project states
- Description: "Lien deadlines vary by state — 30 to 120 days, with preliminary notice requirements in 38 states. Singoa tracks every deadline, auto-generates notices, and ensures you never forfeit lien rights."
- Stat: "Only 17% use automated tracking; $1.5B+ lost annually to missed deadlines (Levelset 2023, NASBP 2024)"
#### Tab 4: "Change Order Reconciliation"
- Mockup: Table view of change orders with billing impact:
- Columns: CO # | Project | Description | Amount | Status | Billing Impact | Pay App Updated
- 4 rows with statuses: Approved (green), Pending Owner (yellow), Disputed (red), Draft (gray)
- Example: "CO-047 | Riverside Tower | Added elevator shaft waterproofing | +$34,500 | Approved | Included in PA-2847 | Yes (green check)"
- Summary: "12 open COs | $487K pending approval | 3 disputed ($112K at risk)"
- Description: "75% of projects have change order disputes, delaying payment by 45+ days (FMI/CMAA 2024). Singoa tracks every CO from field approval through billing, ensuring approved work gets billed immediately."
- Stat: "Average CO dispute costs $39,000 to resolve (Arcadis 2024)"
#### Tab Switching Animation
```jsx
{/* Tab content */}
```
---
### Section 5: ROI — "What Construction Teams Can Expect"
- Layout: 3 metric cards top + interactive ROI calculator below
- Background: `bg-gradient-to-b from-white to-[#FEF3C7]`
#### 3 Outcome Metric Cards (horizontal on desktop)
| Metric | Value | Description | Source |
|--------|-------|-------------|--------|
| DSO Reduction | 30-45% | "Construction DSO averages 60-83 days. Automated submission + AI follow-up compress toward 40-day best practice." | CFMA Financial Survey 2024 |
| Billing Admin Time | -80% | "Manual pay app prep takes 4-8 hours. Singoa reduces to 12 minutes with AI validation." | Payapps Billing Efficiency Report |
| Retainage Recovery | 60-90 days faster | "Average release takes 60-120 days post-completion. Automated tracking cuts this by half." | CFMA Financial Survey 2024 |
Card style: `bg-white rounded-2xl p-8 border border-[#FDE68A] text-center hover:border-[#F59E0B] hover:shadow-xl`. Value in large amber gradient text.
#### Interactive ROI Calculator
Container: `bg-gradient-to-br from-[#FEF3C7] to-white rounded-2xl p-8 border border-[#FDE68A]`
3 input fields (sliders or number inputs):
- "Annual Revenue" — default $50M, range $5M-$500M
- "Active Projects" — default 25, range 5-200
- "Current DSO (days)" — default 70, range 40-120
3 output fields (calculated live):
- "Projected Annual Cash Flow Improvement" — formula: (revenue / 365) * (currentDSO - targetDSO) where targetDSO = currentDSO * 0.6
- "Billing Hours Saved Per Month" — formula: activeProjects * 6 * 0.8 (6 hrs avg * 80% reduction)
- "Retainage Recovered Faster" — formula: revenue * 0.07 (7% avg retainage rate)
CTA below calculator: "Get Your Custom ROI Report" — amber gradient button, leads to contact form. `trackEvent('industry_cta_click', { industry: 'construction', cta_type: 'roi_calculator' })`
Disclaimer: `text-xs text-gray-400` — "Projections based on CFMA Financial Survey 2024 benchmarks. Actual results vary by company size, project mix, and current processes."
---
### Section 6: INTEGRATIONS — "Works With Your Construction Stack"
- Layout: Dark section. Centered header + 2-row logo grid grouped by category + "no rip-and-replace" messaging.
- Background: `bg-[#0D121F]` with subtle amber/orange gradient orbs at `blur-3xl`
#### Section Header
- h2: "Connects With Your Existing Tools" — white
- Subtext: "Two-way sync with the construction ERP and PM software you already use. No rip-and-replace." — `text-white/70`
#### Integration Grid — 3 Category Columns
| Category | Integrations | Display |
|----------|-------------|---------|
| Construction ERP | Sage 300 CRE (Timberline), Sage 100 Contractor, Foundation Software, Viewpoint Vista/Spectrum, CMiC, Jonas Construction | Each: logo placeholder icon + name in `text-white/80`, grouped in `bg-white/5 rounded-2xl p-6 border border-white/10` card |
| Project Management | Procore, Buildertrend, PlanGrid (Autodesk Build), Fieldwire, Trimble Viewpoint Field View | Same card style |
| Banking & Communication | Plaid (bank feeds), QuickBooks, Xero, Gmail, Outlook, Slack | Same card style |
Each integration item: `flex items-center gap-3` with amber-tinted icon and white text.
#### Data Flow Diagram (below grid)
Simple horizontal flow: "Your ERP → Singoa AI → Pay Apps + Collections + Forecasts → Back to ERP"
3 nodes connected by animated dashed lines. Each node is a rounded pill with icon.
Animation: Dashes flow left-to-right using CSS `animation: dash 2s linear infinite` on SVG stroke-dasharray.
#### Bottom Note
"Don't see your software? We add new integrations monthly. Contact us." — `text-white/50 text-sm`
#### Framer Motion
Category cards: staggered `whileInView` with `delay: i * 0.15`
---
### Section 7: COMPLIANCE — "Built for Construction Compliance"
- Layout: Light section. 2-column — left: compliance text with checklist, right: compliance dashboard mockup.
- Background: `bg-gradient-to-b from-[#FEF3C7] to-white`
- This section is UNIQUE to construction — no other industry page has it.
#### Left Column — Compliance Checklist
h2: "Bonding, Certified Payroll, Prevailing Wage — Covered"
Subtext: "Construction compliance isn't optional. Singoa tracks it alongside your AR."
Checklist items (each with green check icon):
1. "Bonding capacity reporting — WIP schedules and AR aging formatted for your surety"
2. "Certified payroll tracking — prevailing wage compliance on public projects"
3. "State-specific retainage reform compliance (TX, OH, CA caps)"
4. "Lien waiver chain verification — conditional/unconditional tracking from owner to sub"
5. "AIA document compliance — G702/G703 format validation before submission"
6. "Audit trail — immutable log of every billing action, payment match, and collection step"
Each item: `flex items-start gap-3 py-3`. Check icon in `text-green-500`. Text in `text-[#596780] text-sm`.
#### Right Column — Compliance Dashboard Mockup
Small dark dashboard showing:
- "Compliance Score: 94/100" with circular progress ring (green)
- 4 mini status rows: "Bonding Docs: Current (green)" | "Certified Payroll: 2 pending (yellow)" | "Lien Waivers: All collected (green)" | "Retainage Compliance: TX cap applied (green)"
- Style: Same `bg-[#0D1321] rounded-2xl border border-white/10` pattern as hero mockup but smaller
#### Framer Motion
Left: `initial={{ opacity: 0, x: -30 }} whileInView={{ opacity: 1, x: 0 }}`
Right: `initial={{ opacity: 0, x: 30 }} whileInView={{ opacity: 1, x: 0 }}`
---
### Section 8: FAQ — 10 Construction-Specific Questions
- Layout: Centered accordion, max-width 3xl
- Background: `bg-white`
- Each item: `bg-[#FEFCE8] rounded-xl border border-[#FDE68A]` with amber chevron
#### 10 FAQ Items
1. **"Does Singoa generate AIA G702/G703 pay applications?"**
Yes. Singoa auto-generates AIA G702/G703 from your Schedule of Values. It tracks completed work, stored materials, change orders, and retainage — eliminating manual spreadsheet work. Competitors like Payapps report up to 80% reduction in billing admin time with automation (Payapps.com).
2. **"How does retainage tracking work?"**
Singoa monitors retainage holds (typically 5-10% per progress payment) across every project and subcontract. Alerts fire when release conditions are met — substantial completion, punch list sign-off, final lien waivers collected. The system also tracks state-specific retainage reform laws (e.g., Texas and Ohio caps).
3. **"Which construction ERPs and PM tools does Singoa integrate with?"**
Sage 300 CRE, Sage 100 Contractor, Foundation Software, Viewpoint Vista/Spectrum, CMiC, Jonas Construction, Procore, Buildertrend, PlanGrid, QuickBooks, Xero. Banking via Plaid. Communication via Gmail, Outlook, Slack. All API-based — no middleware.
4. **"How does lien deadline tracking work across multiple states?"**
Mechanics lien deadlines vary by state from 30 to 120 days, with preliminary notice requirements in 38 states (Levelset). Singoa tracks state-specific requirements for every project, auto-generates preliminary notices, and sends escalating alerts before deadlines expire.
5. **"What's the difference between conditional and unconditional lien waivers?"**
A conditional waiver releases lien rights only after payment clears. An unconditional waiver releases rights immediately upon signing. Singoa generates the correct type automatically based on payment confirmation from your bank feed, preventing premature release of lien rights.
6. **"How much can Singoa reduce our DSO?"**
Construction DSO averages 60-83 days (CFMA Financial Survey 2024) vs. 40-45 days all-industry average. Singoa targets 30-45% reduction through automated pay app submission, 24-hour rejection flagging, AI-timed payment reminders, and collectability-scored follow-up prioritization.
7. **"Can Singoa handle T&M billing alongside fixed-price contracts?"**
Yes. Singoa supports progress billing (AIA G702/G703), time-and-materials, milestone billing, unit-price billing, and JOC contracts. Each contract type is tracked separately with the appropriate pay application format. Change orders are automatically reflected in subsequent pay apps.
8. **"How is Singoa different from GCPay, Siteline, or Textura?"**
Those platforms digitize billing workflows — replacing paper with digital forms. Singoa adds AI-powered AR automation on top: predictive payment timing, automated collection sequences, intelligent follow-up prioritization, anomaly detection in billing patterns, and AI-driven payment matching. It is full AR automation, not just billing software.
9. **"Does Singoa support certified payroll and prevailing wage compliance?"**
Yes. For public projects requiring prevailing wage compliance, Singoa tracks certified payroll submissions alongside pay applications. It flags missing certifications before pay app submission to prevent rejection.
10. **"What does implementation look like? How long to get started?"**
Connect your ERP and banking in 15 minutes via API. Singoa's AI scans your existing projects, pay apps, and AR data within 24 hours. Most teams are fully operational within 1 week. No data migration required — Singoa syncs alongside your existing systems.
#### Framer Motion
Each accordion item: `initial={{ opacity: 0, y: 10 }} whileInView={{ opacity: 1, y: 0 }} transition={{ delay: i * 0.05 }}`
---
### Section 9: FINAL CTA — "Schedule Your Construction AR Assessment"
- Layout: Full-width dark section with centered content + contact form
- Background: Dark gradient matching hero `linear-gradient(135deg, #0a0a1a 0%, #1a150a 50%, #0e0a2c 100%)` with amber blur orbs
#### Header
- h2: "Stop Chasing Pay Apps. **Start Building.**" — white, "Start Building" in amber gradient
- Subtext: "See how much faster your team could collect with AI-powered construction AR automation." — `text-white/70`
#### Contact Form
Same form structure as current `ContactFormSection` — name, email, company, phone, message, submit button.
- Submit button text: "Schedule Your Construction AR Assessment"
- `trackEvent('industry_contact_form_submit', { industry: 'Construction' })`
- Success state: green check + "We'll be in touch within 24 hours to discuss your construction AR needs."
#### Contact Alternatives (3 cards below form)
- Email: shivam@singoa.com
- Phone: +1 (778) 885-9155
- Calendar: cal.com/shivam-bindal-botvux — "Book a Call"
#### Trust Badges (below contact cards)
"AIA G702/G703 Compliant" | "Bank-Level Security" | "14-Day Free Trial" | "No Credit Card Required"
#### Framer Motion
Form container: `initial={{ opacity: 0, y: 30 }} whileInView={{ opacity: 1, y: 0 }}`
---
## D) ABOVE-THE-FOLD CONVERSION CHECKLIST
Within 2 seconds of landing, the visitor must understand:
| Requirement | How It's Met |
|-------------|-------------|
| What this product does | Headline: "$40B+ lost to retainage" + dashboard showing pay app tracker = AR automation for construction |
| Who it's for | Construction-specific language (AIA, SOV, retainage, lien waivers) + trust bar (Sage 300, Procore, Viewpoint) |
| Why they should care | Pain stat "$40B+" + animated counter "83 → 45 days DSO" + "62% rejections eliminated" |
| What to do next | Primary CTA: "Schedule Your Construction AR Assessment" in amber gradient, high contrast |
| Product solves their problem | Dashboard mockup shows pay apps being tracked with real project names, GC names, retainage columns, lien deadlines |
| Trust signals visible | Integration logos (Sage, Procore, Viewpoint) + "AIA G702/G703" + "SOC 2" badges below CTAs |
Anti-bounce elements:
- Dashboard mockup animates rows in one-by-one (creates movement, holds attention)
- "AI Generating" status pulses on one row (shows the product is intelligent, not just a spreadsheet)
- Counters animate from 0 to target values (creates engagement through motion)
- No stock photography, no generic illustrations — only product UI
---
## E) DIFFERENTIATION FROM OTHER INDUSTRY PAGES
| Element | Construction Page | Other Pages |
|---------|------------------|-------------|
| Hero mockup | Pay App Tracker with AIA G702/G703 data, retainage column, GC names, lien deadline counter | Each industry has unique dashboard (healthcare: claim denials, SaaS: subscription recovery, etc.) |
| Section 3 layout | Split-screen Before/After with timeline steps and time estimates | Other pages may use different comparison formats (side-by-side cards, slider, etc.) |
| Section 4 layout | 4-tab product explorer (Versapay pattern) with swappable dashboard mockups | Other pages may use accordion, carousel, or scroll-triggered reveals |
| Section 7 | Compliance section (bonding, certified payroll, prevailing wage) — UNIQUE to construction | No other industry page has this section |
| Color palette | Amber #F59E0B / Orange #EA580C — construction safety/equipment association | Each industry has distinct palette per RALPH_INDUSTRY_PROMPT_V2 |
| Terminology | AIA, SOV, retainage, lien waiver, GC/sub, pay app, change order, WIP, bonding | Each page uses its own industry jargon exclusively |
| CTA language | "Schedule Your Construction AR Assessment" | Each page has industry-specific CTA (healthcare: "Revenue Cycle Assessment", SaaS: "See Your Recovery Rate") |
| Problem section | 4 cards with construction-specific pain stats (retainage, lien deadlines, DSO, pay app time) | Each page has different pain points from its own research |
| ROI framing | DSO reduction + billing hours saved + retainage recovered faster | Each industry frames ROI around its primary financial pain |
---
## F) CTA STRATEGY
### CTA Placement Map (9 appearances across page)
| Location | CTA Text | Type | Analytics Event |
|----------|----------|------|----------------|
| Hero (primary) | "Schedule Your Construction AR Assessment" | Amber gradient button | `hero_assessment` |
| Hero (secondary) | "Watch 2-Min Demo" | Outlined button | `hero_demo` |
| Section 3 bottom | "See How Singoa Automates Pay Apps" | Text link with arrow | `beforeafter_cta` |
| Section 4 (each tab) | "Try This Feature" | Small amber button | `product_tab_{tabname}` |
| Section 5 (ROI calc) | "Get Your Custom ROI Report" | Amber gradient button | `roi_calculator` |
| Section 6 bottom | "Check Your Integration" | Text link | `integration_check` |
| Section 8 (after FAQ) | "Still Have Questions? Talk to a Specialist" | Outlined button | `faq_specialist` |
| Section 9 (form submit) | "Schedule Your Construction AR Assessment" | Full-width amber button | `contact_form_submit` |
| Section 9 (calendar) | "Book a Call" | Card link | `book_call` |
### CTA Hierarchy Logic
1. Hero: Capture both self-serve (assessment) and visual learners (demo video)
2. After Before/After: Visitor now understands the problem — nudge toward product exploration
3. Product tabs: Low-friction micro-CTAs keep engagement within the page
4. ROI calculator: Lead capture embedded in the value demonstration
5. After FAQ: Catch visitors who scrolled past everything but still have objections
6. Final section: Full commitment CTA with form — visitor has seen the complete story
### Lead Magnet (gated content)
"The 2026 Construction AR Benchmark Report" — PDF with industry DSO data, payment trends, automation ROI benchmarks.
- Captures: Name, email, company, annual revenue range, current ERP
- Trigger: Offered as secondary CTA in ROI section — "Download the full benchmark data"
- Follow-up: 5-email nurture sequence with construction-specific content
---
## G) COLOR SCHEME & VISUAL LANGUAGE
### Primary Palette
| Token | Hex | Usage |
|-------|-----|-------|
| Primary | #F59E0B | CTAs, active states, accent highlights, counter values |
| Secondary | #EA580C | Gradient endpoints, hover states, urgency indicators |
| Accent | #D97706 | Text accents, icon tints, secondary highlights |
| Light | #FEF3C7 | Light section backgrounds, card fills, FAQ backgrounds |
| Light Border | #FDE68A | Card borders, dividers, input focus rings |
### Dark Theme (hero, integrations, CTA sections)
| Token | Hex | Usage |
|-------|-----|-------|
| Background | #0D1321 | Dashboard mockup backgrounds |
| Surface | #0a0a1a | Section backgrounds |
| Surface Warm | #1a150a | Gradient midpoints (warm dark) |
| Border | white/10 | Card borders, dividers |
| Text Primary | white | Headlines, values |
| Text Secondary | white/70-80 | Body text, descriptions |
| Text Muted | white/50 | Labels, badges, trust bar |
### Status Colors (used in dashboard mockups)
| Status | Color | Tailwind Class |
|--------|-------|---------------|
| Approved / On Track | #22C55E | `text-green-400` |
| AI Generating / Pending | #FACC15 | `text-yellow-400` |
| Submitted / In Progress | #60A5FA | `text-blue-400` |
| Retainage Due / Warning | #F59E0B | `text-amber-400` |
| Overdue / Danger | #EF4444 | `text-red-400` |
### Typography
- Headlines: Inter (or system sans-serif), bold, `lg:text-[40-52px]`
- Body: Inter, regular, `lg:text-[16-20px]`
- Data/financial values: `font-mono` for tabular alignment in dashboard mockups
- Stat values: Bold, amber gradient `bg-clip-text text-transparent`
### Spacing & Layout
- Container: `container mx-auto px-3` (consistent with existing pages)
- Section padding: `lg:py-24 py-16`
- Card border radius: `rounded-2xl` (16px)
- Button border radius: `rounded-[90px]` for primary CTAs, `rounded-xl` for secondary
- Max content width: `max-w-4xl` for text, `max-w-6xl` for grids
### Animation Patterns (Framer Motion)
All animations use `viewport={{ once: true }}` to fire only once on scroll.
| Pattern | Props | Usage |
|---------|-------|-------|
| Fade up | `initial={{ opacity: 0, y: 20-30 }} whileInView={{ opacity: 1, y: 0 }}` | Section headers, cards |
| Slide left | `initial={{ opacity: 0, x: -30 }} whileInView={{ opacity: 1, x: 0 }}` | Before panel, left columns |
| Slide right | `initial={{ opacity: 0, x: 30 }} whileInView={{ opacity: 1, x: 0 }}` | After panel, right columns |
| Stagger children | `transition={{ delay: index * 0.1-0.15 }}` | Card grids, table rows |
| Counter | `useInView` + `requestAnimationFrame` counting from 0 to target | Metric cards, hero stats |
| Pulse | `animate={{ opacity: [1, 0.4, 1] }} transition={{ duration: 1.5, repeat: Infinity }}` | "AI Generating" status, overdue badges |
| Tab swap | `AnimatePresence mode="wait"` with fade up/down | Product showcase tabs |
---
## H) STAT CITATION INDEX
Every statistic used on this page with its source, for verification:
| Stat | Value | Source | Section Used |
|------|-------|--------|-------------|
| Late payments | 83% of professionals report delays | Levelset 2023 National Construction Payment Report | Hero, Problem |
| Average payment delay | 51 days past due | Atradius Payment Practices Barometer 2024 | Problem |
| Industry DSO | 60-83 days (vs 40-45 avg) | CFMA Financial Survey 2024 | Hero, Problem, ROI, FAQ |
| Retainage held industry-wide | $40B+ | ASA Subcontractors Legal Defense Fund | Hero, Tab 2 |
| Retainage held longer than required | 73% of subs report | ASA Retainage Survey 2023 | Problem, Tab 2 |
| Retainage release time | 60-120 days post-completion | CFMA Financial Survey 2024 | ROI |
| Automated lien tracking adoption | Only 17% | Levelset Construction Payment Practices Survey 2023 | Problem, Tab 3 |
| Lost recovery from missed deadlines | $1.5B+ annually | NASBP Surety Bond Market Report 2024 | Problem, Tab 3 |
| Pay app prep time | 4-8 hours per application | Payapps Billing Efficiency Report | Before/After, ROI |
| Subs managed per billing cycle | 15-50 | ENR Cost Report 2024 | Problem |
| Pay app rejection rate from errors | 62% | Procore Construction Payment Guide 2024 | Before/After, Tab 1 |
| Change order dispute rate | 75% of projects | FMI/CMAA Industry Survey 2024 | Tab 4 |
| CO dispute payment delay | 45 additional days | Navigant Construction Disputes Report | Tab 4 |
| CO dispute resolution cost | $39,000 average | Arcadis Global Construction Disputes Report 2024 | Tab 4 |
| US construction spending | $2.17 trillion | US Census Bureau, January 2025 | Context |
| Lien deadline variation | 30-120 days by state | Levelset State Lien Law Resources | Tab 3, FAQ |
| Preliminary notice states | 38 states require | Levelset State Lien Law Resources | Tab 3, FAQ |
| Invoices paid late | 49% | Xero Small Business Insights 2024 | Context |
| Billing admin reduction | Up to 80% | Payapps Billing Efficiency Report | ROI, FAQ |
---
*End of design specification. This document drives the Step 4 implementation — every section, mockup, stat, and animation pattern is defined here. No creative decisions should be made during coding that are not covered above.*